A few weeks ago I started to post regarding the building of my first mobile app. After working with jQuery Mobile some and getting a good feel on its capabilities I started to move forward. For part one of this series I am going to step through the creation of the PhoneGap Android project and basically getting the project setup with the jQuery Mobile framework and getting it ready to work with.
First off, we need to make sure that we have the appropriate software installed onto the machine. The list of software we will need includes the following
- Android ADT – This is a bundle that includes a version of Eclipse, Android SDK, Android platform and tools, as well as the system images for emulator.
- Latest version of PhoneGap
- Apache Ant
After all that software is installed, you will also want to add a package to the Eclipse IDE so that we can better edit HTML files. To do this, open Eclipse and in the top menu navigate to Help->Install New Software. Once this loads in the work with drop down box, select the Juno – http://download.eclipse.org/releases/juno option. In the filter box, type in Web Developer and you will notice the Eclipse Web Developer Tools package. Check this option and then follow the prompts to install it.
Secondly, we need to make sure that we have the appropriate environmental variables setup. To use the PhoneGap create script, which will setup a new android project for us, we need to have the following directory paths into the PATH environment variable. To check this in windows, click the start button and find My Computer. Right click on that and then go to properties. After this, click on Advanced system settings. A new window will open and then click on the Environment Variables button. Under the system variables section, find the variables listed below and modify them to include the appropriate paths. More on this step can be found in PhoneGaps documentation, or by click on this link.
|Variable Name||Included Paths|
|JAVA_HOME||Your instance of the java jdk|
|ANT_HOME||Your instance of Apache Ant|
Note: Update directory path with your directory information.
Once the system variables are correct, we can run the create script that will setup or new Eclipse project. For the case of this article, we will use the below command…
Now we have the project created and we simply need to import this new existing project into our Eclipse workspace. Now we can navigate this new project and see its contents. You will also notice the assets directory. This directory will host the HTML based content of our app and will be where most of the work will be done going forward.