So you’re here because you want to turn your JavaScript application into a mobile Android application. Luckily for you, we’ve written this tutorial just for that, using the PhoneGap framework. In addition to our PhoneGap tutorial, we’ll also walk you through a manual way using Cordova CLI with an Android SDK.
If you want to convert an iOS app, we have a tutorial for that as well.
We’ve built numerous chat demos and tutorials with JavaScript, including 10Chat, a simple chat app written with only 10 lines of JavaScript. These demos do work on mobile, but are not exclusively for building native Android applications. On that note, we’ll change that.
PhoneGap is an open source mobile framework that enables you to create cross-platform apps that run on various mobile devices including iOS and Android. You write your web app in HTML5, JavaScript and CSS, and PhoneGap helps you to turn it into native apps, most likely Android or iOS.
You can create mobile, or responsive web apps with any UI frameworks and libraries of your choice- jQuery Mobile, Sencha Touch, Enyo, Kendo UI, Onsen UI… you name it. Or, of course, VanillaJS sans any frameworks can be your choice. The sample code used for this tutorial is available on Github, and this demo has very clean interface with minimal CSS and no images, and using no extra UI libraries.
There are two ways to make your web app into an Android app using PhoneGap. One is a no-pain ultra easy way, and another way is a manual way using Cordova CLI with an Android SDK.
Using PhoneGap Build is absolutely painless. All you need to do is zip up your web app, upload it to Adobe PhoneGap Build cloud, and the service takes care everything for you. You don’t even need to download and set up SDK or emulators.
Right, that was easy. Or, you can install Cordova command-line interface (CLI) tools and Android SDKs for full development with taking advantage of the plugins that enable for you to use hardware APIs, mobile push notifications and more, and debugging.
First, you need to download and install Eclipse ADT Bundle. The bundle includes the Android SDK tools, Eclipse IDE with built-in Android Developer Tools.
Once everything you need is installed, open Eclipse and go to Window > Android SDK Manager. In the dialog, select SDK tools. You probably need:
For more information on adding SDK packages, please refer, https://developer.android.com/studio/intro/update site.
Now, you need to create an Android Virtual Device (AVD). On Eclipse, go to Window > Android Virtual Device Manager. In the AVD Manager window, at Device Definitions tab, pick an emulator and click Create AVD….
Installation of the command line interface requires node.js. If you have not, you must install it first.
Install cordova with npm:
$ sudo npm install -g cordova
Create a new project by typing these commands:
$ cordova create simple-chat com.mydomain.chat SimpleChat
$ cd simple-chat
$ cordova platform add android
Try building it and deploying the app to an emulator, or an device:
$ cordova build
$ cordova run android
It may take a while to launch the emulator, but be patient. Once the emulator is up and running, you should see this Cordova splash screen!
In your project folder, you should find a /www/
directory. This is where your web app goes.
Your index.html
body content goes into the body of /www/index.html
. Do not delete or replace head section unless you know what you are doing.
And /js/index.js
includes functions that are required for PhoneGap. You just need to call your app functions in onDeviceReady()
.
var app = { initialize: function() ... bindEvents: function() ... onDeviceReady: function() { // Your awesome chat app here --- var channel = 'chat'; var p = PUBNUB.init({ subscribe_key: 'sub-c-f762fb78-2724-...', publish_key: 'pub-c-156a6d5f-22bd-...' ... }); } }; app.initialize();
Also, you include all your css files and images under /www/
.
The application icons can be anywhere, you just need to specify the location in your config.xml file.
<?xml version='1.0' encoding='utf-8'?> <widget id="com.pubnub.com" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0"> <name>SimpleChat</name> ... <icon src="app-icon.png" /> </widget>
Deploy to an emulator or device.
$ cordova run android
Now you have your own chat app for Android! Super!
When you are working on Android apps, you can easily remote-debug on Chrome.
Once you click “inspect”, you should see the familiar DevTools window for debugging! If you have a trouble with the tools, go to Google Chrome Developer for more info.
I hope you enjoyed this tutorial. In a week or two, we’ll be releasing the this tutorial for iOS and PhoneGap!
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