Setting PhoneGap for Android Development

Trying to set up the development environment for PhoneGap android development, I was faced with many errors. The Documentation on PhoneGap Website made you think everything was straight forward but to a newbie to java like me it wasn't.

I work on Windows 7, and here I will present a detailed description on how to set the environement and get ready to start.

1- To start you need to set up Java SDK, JRE and Ant. For Ant just unzip the downloaded binary and add to c:\Ant
2- Set Environment Variables:
     Right click Computer (from Startup Menu) ==> Properties
                                                          Advanced system Settings
                                                          Environment Variables
                                                          New

Variable Name: JAVA_HOME
Variable Value: C:\Program Files\Java\jdk1.7.0_21   ===> path of JDK on your system

Add also add


Variable Name: ANT_HOME
Variable Value: C:\Ant   ===> path of Ant on your system

3-  Include %JAVA_HOME%\bin to your PATH as well.  Also Include %ANT_HOME%\bin to your PATH.

Environment Variable ==> in System Variables choose Path  ==> Edit
                                 In Edit System Variables add to the end of Variable Value ; then

                                  C:\%ANT_HOME%\bin ; C:\%JAVA_HOME%\bin

Don't forget to substitute %ANT_HOME% and %JAVA_HOME% with your path to each of them.

To test that everything is fine till now
Open cmd  ==> java -version ==> you'll get the version of java installed
                          javac -version ==> you'll get the version again
                          ant   ==> you'll get a message : 'Buildfile: build.xml does not exist!  Build Failed'
                                         Ignore it, this means it is working :)

4- Create a folder for all the setup for me I called it  C:\AndroidDevelopment

7- Download and install ADT Bundle for Windows.


Unzip the ZIP file (named adt-bundle-<os_platform>.zip) in our folder.
Open adt-bundle-<os_platform>/eclipse/  ==>  eclipse.exe

Now the IDE is  loaded with the Android Developer Tools plugin and the SDK is ready to go.


Now add the path to your Android SDK platform-tools and tools directory. Like before edit Path system variable to add the path of the directory the SDK is installed in.

;C:\Android Development\adt-bundle-windows-x86-20130219\sdk\platform-tools;C:\Development\android-sdk-windows\tools

To test this open cmd ==> adb

                                      Then android
                                       Android SDK manager window opens



7- Download the latest copy of PhoneGap and extract it to our folder.
8- Create your Hello World application

Open Start ==> cmd (command Prompt)
                         navigate to the bin directory within the android subfolder of the PhoneGap folder
                         cd C:\Android Development\phonegap-2.6.0\lib\android\bin

                         Then type /create <project_folder_path> <package_name> <project_name>
          for example:      /create C:\AndroidProjects\HelloWorld com.Android.HelloWorld HelloWorld


<project_folder_path> is the path to your new Cordova Android project
<package_name> is the package name, e.g. com.YourCompany.YourAppName
<project_name> is the project name, e.g. YourApp (Must not contain spaces)

Now you have a folder created for you with your first Android project HelloWorld folder..................Hurray!

9- Launch Eclipse from the adt folder (C:\Android Development\adt-bundle-windows-x86-20130219\eclipse). You can create a shortcut for easier start next time.

Select menu item New Project then Android ==> Android Project from Existing Code

Select the directory you used for <project_folder_path>
Click Finish.

If your project has a red X indicating there is a problem follow these additional steps:

Right click on the project folder.
In the Properties dialog that is displayed select Android from the navigation pane.
For the project build target select the highest Android API level you have installed.
Click OK
Then from the Project menu bar item select Clean.
This should correct all the errors in the project.

Now you can run the project on emulator
Run ==> Run As ==> Android Application
From Android Device Chooser
              Launch a new Android Virtual Device    => then press Manager
              In Android Virtual Device Manager ==>  New
                      Create a new AVD to be used.

Since PhoneGap is used to develop HTML 5 applications for Mobiles we need HTML and JavaScript editor.

This is not available in the installed eclipse we need to install WebPageEditor plugin.
Help ==> Install New Software

In work with choose the Juno release
then choose Web, XML,Java EE and OSDI Enterprise Development
           then choose Web Page Editor

then download it. You will be asked to restart eclipse, Do so.

When opened, in Window ==> Preferences
               General ==> Editors ==> fileassociation

Choose *.html and set Web Page Editor as default
repeat for all other extensions (.html, Css, JS,.....)


Thanks,
Nerdy Geeky J!