Good News! We've launched an all-new Chat Resource Center.
We recommend checking out our new Chat Resource Center, which includes overviews, tutorials, and design patterns for building and deploying mobile and web chat.
Take me to the Chat Resource Center →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.
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.
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!
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.
Install ant with brew for Mac OS X users:
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.
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.
Cordova simply built the structure for a Cordova project with a little HelloWorld app. Let’s look at the folders we created:
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…)
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.
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:
"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."msapplication-tap-highlight" meta tag is a microsoft only tag disabling tap highlighting for links"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:
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:
publish() method from our Javascript code which we will see in a minute.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.
"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.
What we’ll want to do is follow 3 steps:
These lines simply create the proper platform set up for the application and builds our app for a given platform.
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.
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.
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.
There are common underlying technologies for a dating app, and in this post, we’ll talk about the major technologies and designs...
Michael Carroll
How to use geohashing, JavaScript, Google Maps API, and BART API to build a real-time public transit schedule app.
Michael Carroll
How to track and stream real-time vehicle location on a live-updating map using EON, JavaScript, and the Mapbox API.
Michael Carroll