Customize Android and iOS Messenger

Estimated reading time: 3 minutes

In this part, we will customize the Android and iOS messenger apps we just built.

Let’s get started.

What can be customized?

Everything! that’s true! You can customize each and everything in these apps to suit your requirements and branding. Not only you can customize the look and feel of the app but even how each and every message is rendered (covered in our upcoming chatbot tutorial).

However, we will not cover all the customizations in this tutorial. Instead, we will focus on a few very important ones as follow.

  • User Verification
  • Geolocation support by configuring Google Maps and Google Places API key
  • Files/Media handler to store files on your own server(s)/cloud
  • Welcome screen and other miscellaneous customizations

Customizations

User Verification

For these demo apps, we have chosen to use a phone number for login. We verify the user by sending an OTP to the user phone number, which the user can enter to confirm the phone number.

It is not necessary to use the phone number; you can use anything you prefer, for example, email address, user account id, your organization id, etc. You can customize the entire login as you prefer.

If you are using a phone number to log in, you will require an SMS gateway to send OTP and verify a user phone number. We are using the Nexmo SMS gateway for this tutorial, which has proven to be quite reliable.

Geolocation - Google Maps and Google Places

Mesibo Messenger allows you to select and send the location to your friends and family. Mesibo Messenger uses Google Maps and Google Places SDK for this functionality. Hence, you must add Google Maps and Google Places API Key into the project for it to work.

For instructions to get API key and configure it, visit

  • For Android, https://developers.google.com/maps/documentation/android-sdk/signup
  • For iOS, https://developers.google.com/maps/documentation/ios-sdk/get-api-key

Media/File Storage

Just like text messages, mesibo allows you to send and receive any arbitrary file (image, video, doc, etc) in real-time. Sending and receiving file is no different from sending and receiving text messages. All an application has to do is to first upload the file to a server and then send the URL and thumbnail [optional] using mesibo in real-time. The receiver then downloads it using that URL. This out-of-band mechanism ensures that no real-time messages are blocked waiting for a large file to be uploaded or downloaded.

Mesibo Messenger offers you the flexibility to store all files on your own servers including private servers or cloud services like Amazon Web Services, Google Cloud Storage, Microsoft Azure, etc. All you have to do is to configure the upload and download URL.

Mesibo Messenger source code has been configured with upload and download URLs that only stores your files for a few hours. Also, the quota is limited for demo purpose. Hence, you must provide your own upload and download URLs.

Conclusion of part four

In this part, we have learnt about customizing Mesibo Messenger. So far, you have used the backend which we already hosted for you so that you can quickly play with the apps. In the next part, we will learn about hosting the backend on your infrastructure.

On to Part 5 >>

open, source, whatsapp, mesibo, ios, overview