Cordova 2.0 Android App Creation in Mountain Lion with Eclipse: from Install to Google Play

I kept meticulous notes as I downloaded Eclipse and all the other software I needed to create an Android app for Google Play as though my readers were absolute newbies on the Mac (I’ve been there and I haven’t forgotten) using PhoneGap 2.0.0.

I highly recommend you read this informative FAQ page before you start your app if you are going to submit to the Amazon app store: https://developer.amazon.com/help/faq.html  and this page if you want your app to work on the Kindle Fire devices: http://www.amazonappstoredev.com/2012/09/the-kindle-fire-hd-7-emulator.html

My article below follows these basic steps, but provides much more material to finalize the app: http://docs.phonegap.com/en/2.0.0/guide_getting-started_android_index.md.html#Getting%20Started%20with%20Android

(After I finished the app, I discovered strange error. An Aussie colleague told me to open up the bin/create file in the Downloads folder and do a search for “Darwin.” “Darwin11” should be changed to “Darwin12.” It looks like it would be better off to download PG 2.1.0 instead.)

Prepopulated Database using PhoneGap Storage API, Cordova 2.0.0

I slightly adapted the PhoneGap Cordova Storage API to show content on the screen (PG’s version only shows content in the console). Here is that code below. Just copy and paste it into a text file, name it PGStorageAPI.html, and click to display in web browser. You’ll need cordova-2.0.0.js in the same folder.

Please note that this database is created in the HTML on this page. It is not a separate database that can be lost in an upgrade or low-memory situation. Also, it is not a data-entry database where the user enters data. Just like you cannot lose an HTML page in your app, so you can’t lose the pre-populated data on this page. As you can see, this pre-populated database is ideal for highly repetitive page layouts, such as this one where the same layout information is repeated over and over. Entering the information once in the database frees one from hand-coding the HTML for each entry. Image Gallery, anyone?

(When I copied this file into a text file and renamed the ending .html, and included cordova-2.0.0.js, the page was blank. A bit of searching around found several double-quotes turned into question marks, and a mixture of curly and straight quotes and double-quotes. Once I go those fixed, the script worked fine. I guess it was the change from typing it in my Mac, pasting it in here, then copying/pasting from here into a Windows text editor. What a mess. )

Making an Offline Web App: From Start to Finish, updated 9/21/2012

Here are the steps I followed to create my first successful web app

Create the app files first

1) Create a web app with HTML, CSS, and JS that will support HTML5 specs, and put all the files in their various folders. Make sure all is working in the browser. Ideally, one should use a Jquery-type html page where all pages and content are linked to just one html page, not multiple html pages. That way, when the one page is loaded in the mobile brower, all resources are cached at once and will be available for offline use immediately. Otherwise, one would have to navigate through every page to cache all the resources.

Put all folders in a central folder named just for that app, such as /widget_appname/ if your app is about a widget.

2) In your index.html page, make your <title> the name you want under the web app icon on the home screen, up to 11 characters.

3) Make a “file not found” notice and name it “offline.html” with perhaps a way for the visitor to email you of this problem.

Checking for an active Internet connection

https://developer.mozilla.org/ has a wonderful script that checks whether an Internet connection exists, then gives a readout (ONLINE or OFFLINE) to inform the user. Here is the code as it works in my app.

Installing ChildBrowser into Xcode 4 with PhoneGap 1.0 (Mac OS X, Snow Leopard)

You’ll need the ChildBrowser plugin with PhoneGap in order to return to the app after clicking on an external link. A Done button will appear under the web page, allowing you to exit the web page and return to the app. Very convenient. I’ve had to search and experiment for two weeks before I could piece all the correct steps together. If you landed here early, you can do it all within an hour!

UPDATE 6/5/2012: For PhoneGap-Cordova 1.7.0, use these steps to install ChildBrowser:
https://iphonedevlog.wordpress.com/2012/06/05/installing-childbrowser-with-cordovaphonegap-1-7-0/

UPDATE 3/21/2012: For PhoneGap-Cordova 1.5, use these steps to install ChildBrowser: http://blog.digitalbackcountry.com/2012/03/installing-the-childbrowser-plugin-for-ios-with-phonegapcordova-1-5/

UP