Converting Your JavaScript App to an Android / iOS App using PhoneGap

Converting Your JavaScript App to an Android App w/ PhoneGap

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.

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 Android applications. On that note, we’ll change that.

Closing the Gap Between Web and Native with PhoneGap

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.

Option 1: Seamless Android Apps with PhoneGap Build

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.

1. Write a web app
2. Zip it up
3. Upload the zip file to PhoneGap Build cloud. Click Ready to Build. Edit the name of the app and upload an app icon too.
4. When ready, scan the QR code with your Android phone, and follow the link
5. Download the apk and install it on your phone
6. Woo-hoo!
7. (…Profit!)

The overview of the whole process in 6 seconds!

https://vine.co/v/OAr6lrT90hP/embed/simple

Option 2: Full Development with PhoneGap Cordova CLI

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, push notifications and more, and debugging.

STEP 1: INSTALL ANDROID ECLIPSE BUNDLE

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.

STEP 2: SET UP THE ANDROID SDK

Once everything you need is installed, open Eclipse and go to Window > Android SDK Manager. In the dialog, select SDK tools. You probably need:

• Android SDK Tools
• Android SDK Platform-tools
• Android SDK Build-tools (API 19 to work with Cordova, as of Oct. 2014)
• SDK Platform
• ARM EABI v7a System Image

For more information on adding SDK packages, please refer, http://developer.android.com/sdk/installing/adding-packages.html site.

STEP 3: SET UP ANDROID EMULATOR

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….

STEP 4: INSTALL CORDOVA CLI

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

STEP 5: CREATE A NEW PROJECT IN THE SDK

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!

STEP 6: PORT YOUR WEB APP

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 inonDeviceReady().

	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();

view rawindex.js hosted with ❤ by GitHub

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>

view rawconfig.xml hosted with ❤ by GitHub

Deploy to an emulator or device.

$ cordova run android

Now you have your own chat app for Android! Super!

Remote Debugging with Chrome

When you are working on Android apps, you can easily remote-debug on Chrome.

1. Enable USB debugging mode on your Android device by going to Settings > Developer Options, then turn onUSB debugging option.
2. On your desktop Chrome browser, go to chrome://inspect.
3. Connect the device and your computer with a USB cable
4. You should see your device name (in this screenshot below, XT1032 is the name of Moto G that I am testing with), also your app on Chrome screen
5. Click “inspect”

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!

Converting Your JavaScript App to an iOS App w/ PhoneGap

We’ll show you how to take any JavaScript app and make it mobile ready for iOS devices.

Prerequisites

First, you’ll need an OS X running Intel-based Mac. Just like the previous tutorial with Android, you have two options to make your JavaScript web app into an iOS app using PhoneGap. You can either use the PhoneGap Build Cloud, or the PhoneGap Cordova CLI. We’ll walk through both.

When compared with Android development, this supposedly easy way to build your app using PhoneGap Build service is actually not so easy with iOS. There are no open tools, so you must to go through some steps before you start.

iOS Developer Program Set Up

1. Register for iOS Developer Program (and pay $99 annual fee)
2. Download and install Xcode
3. Register your Apple ID in Xcode, at Preferences > Accounts
4. Go to your Apple developer portal
5. Click Devices to register your iOS device. You need to connect your device to iTunes to obtain your UUID
6. Click Certificate
7. Create a certificate for Production (to use PhoneGap Build, otherwise Development)
8. Download the certificate
9. Convert the certificate to a p12 file (See the screenshots below) – Double-click the .cer file to open it in Key Chain Access. Then click My Certificates under the category, Ctrl-click the certificate and export. When you save the.p12 file, you are asked to create a password that you will need later.
10. Create a provision file on Apple developer portal, then download. Again, to make this work on PhoneGap Build, you need one for Distribution, otherwise Development.

Now that that’s all finished, let’s move onto PhoneGap Build.

Option 1: Build Your iOS App on Cloud with PhoneGap Build

This step is almost same as the previously explained in my Android article, except you need to upload the downloaded certificate p12 file, and provisiong file too.

1. Upload your zipped web app to PhoneGap Build cloud.
2. Click Ready to build to build, then edit the name of the app and uplad an app icon too.
3. Click iOS tab. You should see it in red
4. Click the drodown menu that says No key selected. Change it to add a key
5. Enter something, then upload your p12 file, and provisioning file.
6. Now you should see a yellow lock icon. Click it to unlock the key by entering the password you selected earlier.
7. Now you should be able to install the ipa file to your device!

Option 2: Full Development with PhoneGap Cordova CLI

Alternatively, instead of building apps using the PhoneGap Build tool, you can install Cordova command-line interface (CLI) tools for full development with taking advantage of the plugins that enable for you to use hardware APIs, push notifications and more, and debugging.

The iOS SDK and iOS emulators should already have been installed in previous step where you download and install Xcode on your Mac, so you are ready to go.

INSTALL CORDOVA CLI

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 IN XCODE

Create a new project by typing these commands:

$ cordova create simple-chat com.mydomain.chat SimpleChat
$ cd simple-chat
$ cordova platform add ios

Once everything you need for iOS platform is added, try building it by

$ cordova build

Now, under simple-chat/platforms/ios/ you should have a file called, SimpleChat.xcodeproj, so open it inXcode.

You should be able to choose an emulator to deploy the template app from a menu on the left top.

Click the triangle Run button on the top right to launch an emulator.

PORT YOUR WEB APP

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();

view rawindex.js hosted with ❤ by GitHub

Also, you include all your css files and images under /www/.

SET APP ICONS

We previously set an generic icon in config.xml file for Android. However, the icon that looks good on Android isn’t quite esthetically correct on iOS screen, so you may want a designated icon for iOS.

In addition to the generic icon setting, you can include specific icons for each platform.

	<?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>
	…
	<platform name=“ios“>
	<icon src=“app-icon-ios.png“ />
	…
	</platform>
	<platform name=“android“>
	…
	</platform>
	</widget>

view rawconfig.2.xml hosted with ❤ by GitHub

To define multiple icons to support varieties of device types, please read on PhoneGap Documentation.

Also, check out Apple’s iOS Human Interface Guidelines to create beautiful icons.

DEPLOY TO DEVICE

Plug your iOS device to your Mac, and choose the device from the dropdown menu on Xcode. Press Run. You probably get warning message regarding Provisioning Profile, follow the direction.

Hooray, now you have your JavaScript app running on iOS!

REMOTE DEBUGGING WITH SAFARI

When you are working in UIWebView of iOS apps using PhoneGap, you can easily remote-debug on Safari browser on desktop.

1. Open your iOS device. Go to Settings > Safari, tap Advanced, then Enable Web Inspector.
2. On your desktop Safari browser, enable Developer mode. Go to Preferences > Advanced and teun on Show Develop menu in menu bar.
3. Now you should see Develop menu on top tool bar. Connect the device and your computer with a USB cable
4. Under Develop, you should see your device name. Select a file from the menu.

Now you should see Safari’s Web Inspector window. You can debug, test performance, and everything you can do with web development!

And that’s it! To learn more about PhoneGap and Cordova, please visit the official site.