Saturday, June 28, 2014

Setting up PhoneGap for Hello World!

PhoneGap is a mobile development framework that allows developers to build applications for a variety of mobile platforms, using web technologies such as HTML, CSS, and JavaScript.
An application developed using PhoneGap can be deployed to multiple mobile platforms without rewriting the code.

I have been trying to prepare the basic set up for a Hello World application on PhoneGap. It took me quite many efforts to do that. I could not find one single reference that could help me from start to end. So here am I trying to put my experience of making it stand up and run.

Recent Phonegap requires installation of
1.)NodeJS
http://phonegap.com/install/
Run the command given C:\> npm install -g phonegap
 comm This might give an error as to install git.
Install git. I did it from http://git-scm.com/download/win. Once downloaded click it, and it will take you to its set up wizard. Keep following the next.
I assume you have Java and Android SDK installed. In case you don't have that, please install Java 
http://www.oracle.com/technetwork/java/javase/downloads/index.html?ssSourceSiteId=otnjp
 Android SDK.
https://developer.android.com/sdk/index.html - Whole bundle would install the sdk and eclipse. Other apis can be downloaded by starting the SDK manager as and when required.
You might also require to install Apache Ant and Ruby.
Apache ant can be downloaded from
http://ant.apache.org/bindownload.cgi . Download the zip archive
I downloaded Ruby from http://rubyinstaller.org/. Click the download button.
Set environment variables in Control Panel.I have set as following according to how I have things onto my system. Following are USER VARIABLES in System-> Advanced Settings->Environment Variables
ANDROID_HOME
C:\adt-bundle-windows-x86-20140321\adt-bundle-windows-x86-20140321\sdk
ANT_HOME
C:\apache-ant-1.9.4
JAVA_HOME
C:\Program Files (x86)\Java\jdk1.8.0_05
Make sure JAVA_HOME is pointing to jdk directory.
I have added      %JAVA_HOME%/bin .  in PATH

I have the following paths as well in my PATH under system variables , each separated by ;
C:\Program Files\nodejs\;
C:\Ruby200\bin;C:\apache-ant-1.9.4\bin;
C:\adt-bundle-windows-x86-20140321\adt-bundle-windows-x86-20140321\sdk\platform-tools;
C:\adt-bundle-windows-x86-20140321\adt-bundle-windows-x86-20140321\sdk\tools;
C:\Program Files (x86)\Java\jdk1.8.0_05

Once all this set up is done,and class paths are set,run following commands from cmd prompt.
C:\>npm install -g cordova
Create Helloworld app as 
  $ cordova create hello com.example.hello HelloWorld
This would create a Hello app in C:/
Now do  :   cd hello
 Run the following command
cordova platform add android
Now project can be opened in Eclipse. I did it using Open->Import -> Browsing to C:/Hello
Make sure that it imports both the projects - Helloworld as well as HelloWorld-CordovaLib.
Check you must see Cordovalib green-checked 


Now clean HelloWorld-cordovaLib and build and then clean Helloworld and build.
Launch an emulator through AVD manager. Now run the HelloWorld app.
Output should be something of this kind. Way to go now with Phonegap.
Leave me a comment if you find this article helpful. 















No comments:

Post a Comment