Create a Scalable Real-time communication App like WhatsApp with Messaging, Video and Voice calls — Part I
This multi-part series describes the design and implementation of a commercially deployable WhatsApp like app having real-time messaging, video and voice communication which can scale to billions of users. By the end of this article series, you will create fully functional Android and iOS applications which you can even publish on Google and Apple App Store under your brand name. The applications we will create in this article series will have the following key features.
- Secure One-on-one messaging and Group chat
- High-quality voice and video calling
- Rich messaging (text, picture, video, audio, other files)
- Message status and typing indicators
- Online status (presence) and real-time profile update
- Contact Synchronization
- Push notifications
How this article is organized
We will use the top-down approach in this article series — we will first build Android and iOS apps using the code we uploaded on GitHub and then we will get into details.
In Part 1, we will begin by setting up the development environment, fetching the code from the GitHub, building Android and iOS apps and running it. In this part, we have hosted the backend for you so that you can quickly try the apps you have built without worrying about the backend.
In Part 2, we will learn about the backend and hosting it on your infrastructure, setting up the database, manage your users and groups, check stats, etc.
In Part 3 to Part 4, we delve into finer details of — how various aspects of application work and how to customize them. For example, use something other than the phone number (email, your own user-id, etc.) for login, entirely transforming chat and call screens, contact sync, push-notifications, etc.
In conclusion Part 5, we begin by explaining how the entire system works, we move onto exploring challenges in building a reliable system, which can scale to billions of users and the solutions.
Please Follow us to get notified when the next part of this series is published.
Technology Use Cases
For this article series, we’ve selected the popular messaging platform ‘ WhatsApp’ for a use case, as most readers find it easy to relate to.
However, the real-time technology and techniques described in this article series are equally applicable to any domain that requires real-time communication, for example, customer support, team communication, ride-sharing, dating, telemedicine, customer support, social apps, to name a few!
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:
$ mkdir Messenger
$ cd Messenger
$ git clone https://github.com/mesibo/messenger-app-android.gitDownload 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.
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:
$ mkdir Messenger
$ cd Messenger
$ git lfs install
$ git clone https://github.com/mesibo/messenger-app-ios.gitDownload 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.
Once the download completes, unzip into a folder.
WARNING! zip file will be quite large due to the inclusion of bitcode enabled frameworks.
git cloneis 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.
