setting phonegap for android development

10
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

Upload: julie-iskander

Post on 11-Nov-2014

135 views

Category:

Documents


3 download

TRANSCRIPT

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-.zip) in our folder. Open adt-bundle-/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\platformtools;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 for example: /create C:\AndroidProjects\HelloWorld com.Android.HelloWorld HelloWorld

is the path to your new Cordova Android project is the package name, e.g. com.YourCompany.YourAppName 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-windowsx86-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 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 Egypt 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!