PhoneGap: A very basic android HTML5 app

I decided today to update my version of PhoneGap and found that instead of the old downloadable zip with JARs and stuff there was only an instruction to update it via the Node.js command line interface. Well, that works well for me too, but for the sake of one of my colleagues I thought I’d better write a small tutorial on how to do this.


Install/Update PhoneGap

Begin by installing node.js if you haven’t (if you have problems at this stage I refer to some article I found on the googely net).
After you have installed Node.js just follow the instructions found on the PhoneGap web site: (run the commands in your node.js command prompt).

Create your first app

Well, I looked around for a good tutorial and I found this one on the PhoneGap web. It worked somewhat well for me. I just got some reeeeally weird error messages such as:

PhoneGap 3.0 Android build Command failed to execute : ant jar

This error is easiest fixed by installing ant and properly setting your ANT_HOME environment variable. Remember that you may have to restart your prompt in order to get everything updated and ready.
After that error I got this one:

Error: An error occurred while listing Android targets

This was even more annoying since it was so generic. The error did contain a stacktrace however and I followed it back to its source (as the scripts are written in non-scrambled javascript). The problem was apparently that the script was trying to execute an android command (android list targets as it were) and it failed. This was fixed by installing the Android SDK properly and setting the ANDROID_HOME environmental variable correctly :).

After all that, I was ready to roll so I created my first example project according to the tutorial:

Create the project: cordova create hello com.example.hello HelloWorld


This creates a dir called hello with your project in it. Enter that dir and run the following command:
Adding android to your app: cordova platform add android

You should now see something like this in your prompt:

You now have a PhoneGap project for android!

Building and running

To build: cordova build
To run the emulator with your project: cordova emulate android (emulate) OR cordova run android (on a real device)

You might encounter the following error:
Error executing “adb devices”: ‘adb’ is not recognized as an internal or external command…
I solved this problem by adding the android-sdk/platform-tools/ to the PATH variable.

Edit your project

Add whatever HTML you want in the www/ directory!
If you want to tamper with the AndroidManifest enter the platforms/android/ directory!

Import it into Eclipse

To import the project into Eclipse open up the IDE and go to File => New => Other… =>Android Project from Existing Source and select the base folder (“hello” in this case) of your phonegap project. You might have a problem with errors such as “KITKAT cannot be resolved or is not a field” which most likely means you haven’t installed the proper SDK API. It happened to me and I hadn’t installed the Android 19 SDK so I just went to Window => SDK Manager and installed it. I then right-clicked on the faulty project (most likely the CordovaLib project) and chose Properties. I then opened the Android tab and selected API Level 19 instead of 18 which was selected.

Right, that was a very short basic tutorial and you should now have some basic knowledge of how to setup a PhoneGap project!

No thanks, I’ll do this only through eclipse instead. Where are the .jar files!?

Allright, the above way is a bit of a hassle and I prefer to use Eclipse my self too. If you are going to use eclipse instead you need the cordova-3.3.0.jar file instead. This doesn’t exist yet so good luck finding it. To acquire one, do the following:


Now you’ll have your .jar file in that directory. Just import it into your eclipse project