All right! Let’s get started! As mentioned earlier, we will take the top-down approach in this article. We will first build the Android and iOS app so that you can play around with and know how it’s working and then we will understand the details.

Key Components & Libraries Used

These apps also use the following SDKs and services.

Facebook AccountKit for Phone Verification. Account Kit is easy, quite reliable and offers free phone verification up to 100K users.

Google Maps and Google Places SDKs for Geolocation integration.

Mesibo API for real-time communication. Just like Account Kit and Google maps, Mesibo is an industry leader in real-time communication and offers powerful APIs.

In the next article of the series, we will discuss how to configure API keys for all these services. Now let’s begin with building our messenger app for Android. If you wish to develop the iOS app first, you can directly skip to the iOS section below.

Create Android Messenger App

In this part, we will download the source code for Android Messenger, build and run it on a real device.

Prerequisites

Before we dive into building and running a fully featured Messenger for Android, please ensure the following.

Android Studio Installed and running

An Android Device to run the app

Download Source Code from GitHub

We have uploaded the Android messenger source code on GitHub so that you can get started quickly. There are multiple ways of “downloading” code from the GitHub.

Clone the Repository (Recommended)

If you have git installed, this is a recommended approach as you can quickly sync and stay up to date with the latest version. This is also a preferred way of downloading the code if you decide to contribute to the project.

To download, open a terminal and issue following commands:



$ cd Messenger

$ git clone $ mkdir Messenger$ cd Messenger$ git clone https://github.com/mesibo/messenger-app-android.git

Download the code as a zip file

You can also download the complete Android Messenger source code as a zip file. Although trivial, the downside of this approach is that you will have to download the full source code every time it is updated on the repository.

Download

Once the download completes, unzip into a folder.

Whatever approach you take to download the code, it is important to stay up-to-date with the latest changes, new features, fixes, etc. Ensure to Star(*) the project on GitHub to get notified whenever the source code is updated.

Build and Run

In this part, we will build the code as it is and run the app. In the next section, we will learn about customizing.

Building the code is as simple as:

Launch Android Studio Open the project from the folder where you have downloaded the code using the menu File -> Open Build using menu Build -> Rebuild Project It may take a while to build the project for the first time. Once the build is over, run on the device using the menu Run -> Run (app) That’s it; you should see the welcome screen.

You can log in with your phone number and start exploring. Refer to Running and Exploring Messenger Apps below for some tips. In the next section, we will create an iOS app.

Create iOS Messenger App

In this part, we will download the source code for iOS Messenger, build and run it on a real iPhone device.

Prerequisites

Before we dive into building and running a fully featured Messenger for iOS, ensure the following.

XCode Installed

An iPhone Device

Downloading the Source Code

We have uploaded the iOS messenger source code on GitHub so that you can get started quickly. There are multiple ways of “downloading” code from GitHub.

Clone the Repository (Recommended)

If you have git installed, this is a recommended approach as you can quickly sync and stay up to date with the latest version. This is also a preferred way of downloading the code if you decide to contribute to the project. Ensure that git lfs is installed before cloning the repository.

To download, open a terminal and issue following commands:



$ cd Messenger

$ git lfs install

$ git clone $ mkdir Messenger$ cd Messenger$ git lfs install$ git clone https://github.com/mesibo/messenger-app-ios.git

Download the code as a zip file

You can also download the complete iOS Messenger source code as a zip file. Although trivial, the downside of this approach is that you will have to download the full source code every time it is updated on the repository.

Download

Once the download completes, unzip into a folder.

WARNING! zip file will be quite large due to the inclusion of bitcode enabled frameworks. git clone is the recommended approach.

Stay Up-to-date

Whatever approach you take to download the code, it is essential to stay up-to-date with the latest changes, new features, fixes, etc. Ensure to Star(*) the project on GitHub to get notified whenever the source code is updated.

Build and Run

In this part, we will build the code as it is and run the app. In the next section, we will learn about customizing.

Building the code is as simple as:

Launch Xcode Open the project from the folder where you have downloaded the code using the menu File -> Open Build using menu Product -> Build It may take a while to build the project for the first time. Once the build is over, run on the device using the menu Product -> Run That’s it, you should see the welcome screen like below.

Log in using your phone number. You can even start using the app you’ve just built to communicate with your family and friends. Isn’t it cool?

Running and Exploring Messenger App

Congratulations! You’ve just created fully functional Android and iOS Messenger apps with messaging, voice and video calls.

The first step is to log in using your phone number. All you need to do is to enter your phone number. You’ll quickly receive a verification code, enter it, and you are on it! In case, you have trouble receiving SMS on your phone, you can also get verification code over a call.

Once you are inside the app, you will see an empty screen since you do not have any messages yet. Click on new message button on the top right corner to send your first message. You can send plain text, or rich media messages with images, videos, location, files, etc. You can also make video and voice calls from the message screen.

However, to try all the features of the app, you need more than one device/user so that you can send real-time messages to each other, and can also make voice and video calls. If you do not have more than one device, you need to invite your friends and family so that you can test messaging and calls with them.

Both the Android and the iOS app has contact synchronization. Hence, if two users have each other in their contacts, they will be shown when you click new message button on the main screen.

Questions?

To be continued!

In this part, we’ve created Android and iOS apps so that we have an idea about the features and capabilities of the app. We have also hosted the backend for you so that you can quickly try the apps without any complexities. In the next articles, we will show you how to host the application backend on your own servers.

Please Follow us to get notified when the next part of this series is published.