Click here to Skip to main content
11,435,048 members (46,366 online)
Click here to Skip to main content
Technical Blog

Tagged as

Demo of PhoneGap on an Android

, 2 Apr 2013 CPOL
Rate this:
Please Sign up or sign in to vote.
Demo of PhoneGap on an Android

Editorial Note

This article appears in the Third Party Products and Tools section. Articles in this section are for the members only and must not be used to promote or advertise products in any way, shape or form. Please report any spam or advertising.

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.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author


Comments and Discussions

 
QuestionExceleent Pin
eng moby28-Feb-14 12:51
membereng moby28-Feb-14 12:51 
GeneralMy vote of 5 Pin
Mihai MOGA10-May-13 19:34
memberMihai MOGA10-May-13 19:34 
GeneralMy vote of 5 Pin
Dheeraj Singh Bhadoria19-Apr-13 2:15
memberDheeraj Singh Bhadoria19-Apr-13 2:15 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.150428.2 | Last Updated 2 Apr 2013
Article Copyright 2013 by PratapReddyP
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid