Getting Started With PhoneGap And Android

PhoneGap is a free and opensource framework for developing mobile applications. It is a great way of creating applications that work across multiple devices including iOS, Android, Blackberry, Windows and others. It works by rendering HTML pages using a browser, which means that you can create applications using just HTML and JavaScript. It also allows you to interact with elements of the phone like the camera and accelerometer through JavaScript using a simple API.

I recently set about trying to use this system to create an application, and as I have an Android phone I started by creating a simple Android app. The PhoneGap website has a number of getting started guides, including what software you need to get started. I found that they were a little wrong for getting started in Android. I am running OSx so the instructions here might not work for you, but they should be fine for most *nix based systems.

The first step is to download the Android SDK for your system. This package contains the Android SDK as well as a copy of Eclipse with the Android Development Tools (ADT) plugin already installed.

Once you have unzipped the file you downloaded you need to add some paths so that other applications can see it. This means opening up your .bash_profile file (or creating it if it doesn't exist) and adding the correct directories to the system path. You need to make sure the sdk/platform-tools and sdk/tools directories are both added.

PATH=$PATH:~/Development/phone/adt-bundle-mac/sdk/platform-tools:~/Development/phone/adt-bundle-mac/sdk/tools

After adding this you'll need to reload your .bash_profile file in order to activate the new rule. This can be done by using the source command.

source ~/.bash_profile

Next you need to download PhoneGap and unzip it. There is no need to create any paths for this.

Once done you'll need to use PhoneGap to generate an application. If you open up the PhoneGap directory you will see a lib directory containing all of the different platforms that are available. Different platforms are built in different ways, and I am only concentrating on Android for this post.

To build an Android application you need to go into the lib/android/bin directory and run the create command with the following parameters. If you have created Android applications in the past outside of PhoneGap then you might be familiar with these options as they are used in Eclipse in order to set up new Android projects. You can create the application in Eclipse first and then add the PhoneGap components by hand, but using the create command is far more reliable.

• The path of the new Android project. This shouldn't exist already or PhoneGap will throw an error and exit.
• The package name. This should be in the format com.YourCompany.YourAppName.
• The name of the project, which is essentially the application name. This must not contain any spaces.

As an example I created a simple test Android project in the following way:

./create ~/Development/phone/philsapp com.hashbangcode.philsapp PhilsApp

The Android SDK you downloaded contains a copy of Eclipse that you can run by navigating to the directory and double clicking on the Eclipse executable. To open the application you created go to File > Import and select the option Existing Android Code Into Workspace. You will now see your Android/PhoneGap application in Eclipse. The src directory contains the Java code needed to bootstrap PhoneGap and render your HTML pages and the assets/www directory contains some example web pages. You can start altering these to suit your needs straight away.

You'll notice that when you open up the HTML and JavaScript files but that they don't have any syntax highlighting. To fix this go to Help > Install new software and install the Eclipse Web Developer Tools and JavaScript Developer Tools from the Web, XML, Java EE and OSGi Enterprise Development packages list. Selecting "-- All Available Sites --" from the Work with drop down at the top of this dialogue will show this in the list.

The copy of Eclipse you have downloaded contains all of the needed packages to emulate and deploy Android applications, but if you want to see what packages are installed click on the Android SDK Manager. From this dialog you can install different versions of Android but it currently comes ready to run with Android 4.2.

With the project loaded you can either emulate a phone or deploy directly to a physical device in order to test the application you are developing.

To emulate the phone you need to set up a virtual device first. Open up the Android Virtual Device Manager and create a device using the options defined. Once the device has been created you can click Run as... and select your virtual device from the list of devices. I have found that virtual devices do not run all of the PhoneGap functionality well so my preferred option is to run the application directly from a phone.

To deploy to a phone you need to enable USB debugging (usually found in Settings > Applications > Development) before plugging it into your system. Once plugged in you can click Run as... in Eclipse and deploy to the phone instead of a virtual device.

Of course, the HTML pages you are creating a just HTML pages and can be opened by a normal web browser. It won't be able to do any of the hardware specific elements like accelerometers or cameras but the layout of the page will work perfectly well as long as you resize the browser to the correct size.

After a few hours playing with PhoneGap on Android and creating a couple of simple applications I was really impressed how fast it was to get things up and running. I will definitely be writing more about PhoneGap in the future and will be using it to create an application. My next step is to create an iOS application, but that is the subject of a different post.

One thing I should mention is that you should probably not use a virtual machine inside VirtualBox to develop mobile applications. After hours of messing about with USB filters, graphics drivers and virtual box extensions I eventually gave up. I did learn a few things and it took me about 20 minutes to get everything working locally using the above instructions.