Demo of PhoneGap on an Android

CodeProject In this post we will see how to transform simple web application (Html 5, Css3, Javascript) into a native android App using PhoneGap.

First i have a simple web application to show the current location based on your devices Geological position. It was written in simple Html 5, Css 3, and Javascript.


Now i want this to convert into Native App for android. As we are not using PhoneGap Cloud services, we need to use the PhoneGap generic code and will try to transform this simple web form to a Native Android App.

Step 1: Download Eclipse IDE, as we decided to go with Android. Then install Android SDK. Then install ADT package.

As i have been doing Android development also lately, i have everything installed on my Mac.
If its a fresh install for you try following the steps mentioned here. Perform Step 2 only.

Step 2: By this step you would have installed the required software and downloaded the Code sample from PhoneGap.

Step 3: Open Eclipse. Click on Project and Choose "Android Application Form Existing Code Base".

Browse till example folder inside android folder. Rename the App as per your requirement. Check the option to copy to your workspace. This will create a copy of your own version for further modification to host your own app.

Click Finish and the project will be opened in eclispse.

Step 4: Once the Project is loaded, as we check "Copy project into workspace", a copy of code will be copied to the workspace you selected, typically it will be "c:/users/xxxx/documents/workspace" in case of windows. "//xxxxx/documents/workspace" incase of Mac.
Now, go to WWW folder of the workspace copy. Delete all the files inside it and paste your Code files (Html 5 + Css 3 + Java scripts).


Step 5:  Go to res --> values --> string.xml and rename the App. I named it "Where Am I".

Result: We are all set and connect your android phone to laptop. and click on the Run button (Big Green button with > symbol.)

These are the snapshots from my Samsung Galaxy S3, Android Device:






We will see more and more information on PhoneGap in upcoming posts.