How to Build a Mobile Chat App with PhoneGap/Cordova

It’s clear that mobile development is the future. However, mobile encompasses well, a lot.

There are hundreds of platforms to choose from, and it doesn’t help that the highest cost barrier is development for multiple platforms.

Luckily, there's a solution for developing apps for a number of platforms with a single codebase. And that solution is PhoneGap/Cordova.

How to Use PhoneGap/Cordova for an Android Chat App

Using the beautiful combination of PhoneGap/Cordova, with AngularJS and PubNub, we will build the bare bones of a simple Android chat app. And after that, we can use the code for other mobile platforms like iOS, and web browsers as well.

This is an alternative to using Java and Eclipse for writing an Android mobile application. It will have the structure of a web application, which allows JavaScript developers to get on board quickly. Essentially, we’re developing a web app that is completely compatible with mobile devices.

Mobile Compatibility

Using HTML and AngularJS, we'll be building a chat app you can run on multiple devices with different screen sizes and resolutions. Example devices include the Nexus 5, Nexus 6, Motorola’s Moto X or Moto G, and any of Samsung’s or LG’s flagship phones.

In this blog post, we'll use the Cordova open-source engine to build an Android chat app. Because PhoneGap uses more or less the same engine, we'll use the two terms interchangeably.

Let’s dive in and figure out all we need before getting started!

Step 1: Install Cordova/PhoneGap for Android Development

You'll need a couple different tools depending on what platforms you want to include. In the scope of this article, we'll limit ourselves to Android, for iOS or web applications, you can find more on the PubNub blog!

But first, we must install Cordova. The complete Cordova installation guide is here, but for Linux and Mac OS X users who already have npm installed, all you will need to do is to open a terminal and write:

Yep, that’s all! For the specific mobile platforms you want to compile your code to, it may take a little more time if you don’t already have all the tools setup. But honestly, it won’t be too troublesome installing all of it.

Requirements To Build An Android App With Cordova/ PhoneGap

• Android SDK
• Want to build our awesome app

Install ant with brew for Mac OS X users:

• Configure the android paths:

This should explain how to configure your android paths variables in linux and mac os X. Just write a couple of lines in your /.bash_profile file (or create the file if it doesn’t exist). And run the script in the terminal by typing: source /.bash_profile. Here is how the added lines in your .bash_profile file should look:

Please note that the Android SDK takes a significant amount of space. We recommend having at least 20GB of free space. You can get by with less, but that requires micromanagement of the packages.

Step 2: Create a PhoneGap/Cordova Project

Alright, at this point if you already have your environment set up you just need to write a few words in the terminal. If you had to install the Android SDK, it probably took you a lot more time than that. Congratulations for getting this far. It’ll be worth it, believe me.

Now that we’re all up to speed, let’s start a cordova project. To do so, let’s cd to the working directory of our choice, and run the following command:

The folder name is the only required field here, but you’ll be better of typing all three of them right now. The second field, com.example.appname represents the package identifier as you’d name it in Java for example.

What Does A PhoneGap/Cordova Project Contain?

Cordova simply built the structure for a Cordova project with a little HelloWorld app. Let’s look at the folders we created:

• hooks/ folder is here to shelter scripts that need to be executed at different steps of the app’s life cycle. We won’t be needing to deal with that here, it’s just nice knowing why we have empty folders lying around.
• platforms/ will contain a folder for every platform you decide to compile your code on. We’ll soon have an Android folder in there that will contain a Java project, without us having to write any of it. Pretty neat, right?
• plugins/, self-explanatory. We won’t be using this folder either.
• www/ will be where we’ll be doing all our work. It’ll contain our HTML code and our JavaScript

You can probably keep the folders and delete all the files inside our www/ folder, we won’t be needing the helloWorld app, but feel free to take a look at it.

You do want to keep the config.xml file in the root directory and edit the relevant points (change the app name, add a description, put in the author’s name, etc…)

Step 3: Using AngularJS and HTML to Develop a Mobile Application

In this section, you will find all of the required code to make the app run. We won’t be getting in too deep into explaining the code since it is very similar to this previous article on building an AngularJS app 101, which gives a great line-by-line walkthrough of the code.

It's important to remember that building mobile apps in Cordova allows you to create web applications as native applications. As a result, developing mobile applications in Cordova resembles developing web applications for mobile browsers.

PRO Tip | What a PhoneGap/Cordova HTML file should include

The head of our document will be as follows:

This looks familiar. As expected we start by defining our encryption. The rest is less common:

• The "format-detection" meta tag simply disables the ability for telephone numbers to appear as hypertext links. The default value for iOS and Safari being yes, we have decided to disable it so that all devices behave similarly.
• In a similar fashion, the "msapplication-tap-highlight" meta tag is a microsoft only tag disabling tap highlighting for links
• The "viewport" tag is the most important here as it defines the behavior of our view. It is set here such that the user may not use zoom functionalities and sets the scale of the page. Redundantly we limit the maximum and minimum scales to 1. Feel free to modify them as you wish. We also set the canvas of our html code to match the screen of the device. Finally, we set the pixel density. This is a more delicate affaire and might need to be tweaked depending on the device. Remember that a pixel is not a pixel! Understand that a screen pixel and a css pixel are different entities. More about this tag on Mozilla’s and Safari’s developer page.

Let’s do a rapid overview of the scripts tags added to index.html in /www:

• pubnub.min.js holds the heart of the JavaScript PubNub communication library
• pubnub-crypto.min.js holds encryption features.
• angular.min.js allows us to use some awesome AngularJS features in our JS and HTML. You’ll see the wicked consequences in a minute!
• pubnub-angular.js extends the PubNub functionalities for AngularJS.
• bootstrap.min.css to have that nice Bootstrap look.

How To Use AngularJS Attribute In Our HTML Body

Let’s make it simple. Angular is the key to our app’s dynamism thanks to the ng-app directive referring to our module and ng-controller directive which links our controller to our template.

We can divide the code into 2 key parts. One listing the Users, one listing the messages. Let’s have a quick review of these angular attributes:

• Thanks to the angular attribute ng-repeat, we dynamically generate a list of users from our data and a list of messages.
• The ng-submit allows us to call the publish() method from our Javascript code which we will see in a minute.
• ng-model, as you can guess, does some binding with our data model

Finally, we call our Cordova script which is essential for our app to function. The "pubnubAngularApp.js" holds the brain of our app!

Let’s open the hood of our app’s downloadable example code. We’ll explore the fun logic inside before taking it for a ride on real devices or emulators.

Writing A Mobile Application In Javascript

"Cogito ergo sum" --Javascript

The JS code holds the controller to the html code. We’ll do a quick overview. For more detail about implementing an AngularJS app, we have a tutorial and code walkthrough.

Navigate to the project’s www/js folder. You can also use the pubnubAngularApp.js file located in the attached example code.

The controller first initialized PubNub with a subscribe and publish key. You'll need to sign up for a free PubNub account to get your publish/subscribe keys. Your keys are available in the Admin Dashboard, and once you have them, input them into subscribe_key and publish_key.

Once this is done, we can subscribe to a channel where all the users from the chat will send their messages.

Because we want to upload these messages to the screen as soon as they are received on the channel, we write a callback which is triggered every time the new message event is fired.

We build similar methods to when a new user appears by handling a presence event.

We can also view the history of the channel to repopulate the previous messages sent and users list.

Finally, we create the publish() method which is called whenever a user hits the send button.

Voilà! We’re done! All we want is to see the app run on all our devices.

Step 4 - Test your PhoneGap/Cordova code on Android devices or the emulator

What we’ll want to do is follow 3 steps:

• add the chosen platform to the project
• build the code for the given platform
• run the code on the emulator or on the device

Step 5 - Building Cordova Code For An Android Device

These lines simply create the proper platform set up for the application and builds our app for a given platform.

Step 6 - Run Cordova Code On An Android Emulator

This simple line will run the default Android emulator you use with Eclipse for instance. It requires you to create a virtual device with this link as your guide.

Step 7 - Run Cordova Code On An Android Device

Building the cordova code created a .apk file which you find from your project root in platforms/android/ant-build/CordovaApp-debug.apk

Remember to set your device to developer mode. Once in developer mode, remember to check USB debugging so that the app may be installed.

Remember that this will install the app to your phone but does not automatically launch such as when you use Eclipse! If you are not familiar with Android development using Eclipse, the previous statement means the app is installed, then it must be manually opened on the device like normal.

Summing It Up

You can build a multitude of mobile apps using this combination of PhoneGap/Cordova, now it’s up to you to use your imagination. Are you looking for other options to build? Let us help you out with our related content below.

If you’d like to see more options with Chat, check out our chat resource center.

Related Content:

Converting Javascript App to IOS with PhoneGap

Build a Mobile IOS Chat App with AngularJS and PhoneGap