Hello everyone, watsup? Everything Ok naa? Well, I hope so.
Have you heard about “Phonegap”??
No..No..No… I am not talking about the gap between two phones. 😛 Jokes apart, this tutorial is to introduce you with the Phonegap’s cross-platform features, about its awesome compatibility and many more superb facilities. So let’s begin..!! Today’s tutorial is based on how to create your first “Hello” application using Android with Phonegap. Before we proceed with this, I would like you to introduce you with this new concept of Phonegap.
What is Phonegap?
The basic and most advantageous feature of Phonegap is that you can write and compile the code without worrying about maintaining the native SDKs. You get 7 different executable files which are compatible with your fellow devices. In the end you get an application running on Android OS, WebOS, iOS, Bada, Blackberry, Windows and Symbian.
There are few tools which you’ll need to have before starting this tutorial which are as follows:
1) Download and install Eclipse Classic 3.7.2 version (Remember: You must download an Eclipse version of 3.4 or 3.4 plus)
2) Download and install Android SDK version from developer.android.com.
3) Download and install ADT Plugin.
4) Download the latest version of Phonegap.
Step 2: After this you go to menu File > New > Project > Android > Android Project From Existing Code > Next
Step 3: In this step you need to browse the directory in which your phonegap’s latest version lies. Say for example I have a Phonegap 2.6.0 version on my desktop’s folder named “New Folder”. So browse Desktop > New Folder > phonegap-2.6.0 > lib > android
Here you’ll be shown two projects named Activity and Cordova, from these unmark the activity project and rename the Cordova to “Phonegap Example” or any other convenient name for your project and click “Finish”.
Now you will find a new project created on the left side of your eclipse’s screen in a “Project explorer”. If there is a package explorer instead then you go to Window > Show View > Project Explorer and you’ll find the project explorer.
Step 4: Now you explore the project and you’ll find that there are lot many folders. From them, you explore the “src” folder and you’ll find out a package already created named like “org.apache.cordova.example” and in that a Java file named cordovaExample.java will be there.
So go and open that java file and edit that java file to this. (Also apply this shortcut Ctrl + Shift + O to fix all the imports.)
public class cordovaExample extends DroidGap
public void onCreate(Bundle savedInstanceState)
Step 5: Now explore another folder named “assets” and you’ll find a subfolder named “www”, and explore it further and you’ll find out numerous other folders named css, js, etc… You’ll also find an html file named index.html. Open that file and edit as below.
Note: If you do not find any folder named “Web” into this window, it means you need to update your eclipse by the following steps: Go to Help > Install New Software > Add this whole thing “Indigo – http://download.eclipse.org/releases/indigo” into the text field > Check the checkbox before “Web, XML, Java EE, and OSGi Enterprise Development“ > Click Next > Finish
Step 7: Now you need to check this app by running this thing in emulator. Always keep this thing in mind that, always have a habit of cleaning up your project to fix all the bugs and errors if there. You can do this by Project > Clean > Clean Projects selected below > ok.
If you already have any emulator’s device name then you can run directly by right clicking on your project name from the project explorer > Run as > Android Application.
If you do not have any virtual device then eclipse will prompt a message like this. So click yes.
You will be redirected to a window like this where you need to create your new Android Virtual Device like this.
After this clean your project as mentioned above and run your application successfully.
So this is all about the first tutorial on Phonegap, next time I’ll show you how to upload your Phonegap project in the form of a zip using Phonegap to get your desired executable files.
If you have any doubts regarding this article you can freely ask me, I’ll try to solve them out.
Hope you all enjoy trying this first tutorial of Phonegap with Android. 🙂