Starting to use PhoneGap – aka Apache Cordova has been a frustrating experience, not because of PhoneGap but because of getting the Android environment set up. The getting started (Android) tutorial for PhoneGap is great. Once I had the environment set up, working through the tutorial took a few minutes. I am not going to reproduce anything that is in that tutorial here, this post is just about how to get to the point where you can work through the tutorial. I’m working on a Mac (Snow Leopard) so these instructions are Mac specific.
There are 4 steps:
- Installing the ADT Eclipse Plugin
- Installing the Android SDK
- Setting up an Android Virtual Device.
Get started by downloading the major components.
- Eclipse Classic 3.7.1
- Android SDK R16 MacOSX (Note: This is an ‘SDK starter kit’, see later)
- PhoneGap 1.4.1. You don’t need this to set up the Android environment but you will need it for the PhoneGap tutorial so grabbing it while you are downloading stuff makes sense.
I extracted these into 3 separate directories under ~/Applications/ECLIPSE, ~/Applications/ANDR and ~/Applications/PHONEGAP, I don’t think it matters much where they go. Just remember the location.
2. Install the Android Developer Tools (ADT) plugin for Eclipse.
Start up Eclipse, I normally do this from the command line so I just executed:
With the brand new install of Eclipse running, you can install the ADT plugin:
- Help->Install New Software.
- Click the ‘Add’ button, top right.
- Type ‘ADT Plugin’ in the box labelled ‘Name’
- Paste this location “https://dl-ssl.google.com/android/eclipse/” into the box labelled ‘Location’.
- Follow the instructions. These are straightforward, so I won’t reproduce them.
3. Install the Android SDK
First, tell Eclipse where you put the SDK starter kit. To do this:
- Paste the location of our SDK into the box and click ‘Apply’
This part is confusing because nothing happens except this:
I spent a long time wondering what I had done wrong. In fact this is the expected behaviour, all that this step achieves is to tell Eclipse where the ‘SDK starter kit’ can be found so that in the next step it can install the SDK. Just click ‘OK’ to get rid of the message and ‘OK’ again to close the window.
Now that Eclipse knows where you have put the ‘SDK starter kit’ you can go ahead and install whatever version of the SDK you need.
- Window->Android SDK manager
- A window appears with all SDKs you might want to install (see below), pick whatever you need and install it.
This takes a while, in the end you should see something like this:
Now, if you return to the the Android SDK pages in Eclipse, (Eclipse->preferences->Android) you will see that Eclipse knows about the SDK:
4. Setting up an Android Virtual Device (AVD)
The final piece that you will need to run the PhoneGap sample is to install an Android Virtual Device, this is a ‘phone emulator that is going to display your PhoneGap (Android) application.
- Window->AVD Manager ->New
- Give the AVD a name (whatever you want)
- Under ‘Target’, select the SDK that you just installed.
- Give it a size. I have no idea what is appropriate here, I allocated it 10 (MiB) and things seem to work.
That’s it. If you have followed through this you have everything that you need to run the PhoneGap Android tutorial.