PhoneGap allows you to create apps for a wide range of devices from a single web-based (HTML+CSS+JS) project. Once you code your content in web format (a HTML5 game for instance) PhoneGap creates an app out of it. How is that done? Well, PhoneGap makes a project for your target platform that consists of a native app that launches a webview and loads your web-content there, providing also a JS bridge to some device-specific features (GPS, accelerometers, gallery, etc) creating what’s essentially called a “hybrid” app.

Building and testing something with PhoneGap can be a real Pain in the ASM though. Adobe provides a service called PhoneGap Build that frees you from the hassle. You upload your project to their system and they build the app for you for whatever target you choose. Of course the service is not completely free (is free for opensource apps and/or if you have a single commercial project you want them to build for you. For more than one closed-source project you need to be a paid-plan user).

However, you can still build the apps in your machine. It’s not the easiest process on earth though but it can be done. Since the instructions on the site are rather vague I’ll try to describe the complete process of building your app/game for Android here.

The first step is installing PhoneGap. For that you need to install Node.js on your computer and then type in a command line:

npm install -g phonegap

Then you must ensure you have properly installed Apache Ant and the Android SDK (and of course Java JDK). Windows users will also need to add them to the PATH environmental variable so ant, java and the android tools (adb for instance) can all be invoked from any point in the filesystem.

Then we will use Phonegap’s magic to create the project. Go to the folder where you store your projects, open a command line and type:

phonegap create myProject

This will create a folder with everything that phoneGap needs inside. There you’ll find a “www” directory. Take a look at the config.xml file you’ll find inside and modify the widget’s id attribute and the app name and description tags. You can remove or modify the author tag as well.

Then remove everything in the www folder except for icon.png, config.xml and the res directory. If you paid close attention to the config file you may already have noticed that the res folder stores the icons and splash screens for different platforms and resolutions, and while I’m sure you won’t be using PhoneGap’s icon for your release product, it’s good to have them as placeholder for the time being. *UPDATE* The icon and splash screen settings are read and used by the PhoneGap Build service. If you are using the CLI tools like we are doing now you’ll have to store your icons/splash screens directly in the build directory of each platform in order to customize them.

Now move your HTML+CSS+JS content there (to the www folder). Be sure your starting page is called index.html.

Now go back to the project folder (one level up) and in a command line write:

phonegap build android

If there’s something not properly configured in your environment PhoneGap will tell you now. If everything is OK you should see a “successfully compiled Android app” message and your apk should be in {project folder}\platforms\android\bin.

If you want PhoneGap to attempt to install and run the app on a connected device (or emulator) instead of simply building the apk use “run” instead of “build” in the command above. For some reason though “phonegap run” fails to upload the app to my device half of the time,  so I normally “build” and then I run:

.\platforms\android\cordova\run

Which basically does the same but fails less for me.