Using PhoneGap in Eclipse to develop applications for Android or other mobile platforms

If you have been hearing a lot about this new kid on the mobile development block - PhoneGap (http://phonegap.com), and are as confused as I was when I started diving deeper, you've come to the right place to sort out your understanding a bit.

1)What is phonegap?

According to the website, "PhoneGap is an open source solution for building cross-platform mobile apps with modern, standards-based Web technologies. Based on HTML5, PhoneGap leverages web technologies developers already know best... HTML and JavaScript."
The definition itself does not make things very clear though. Let me explain a bit more. So today, suppose you have a web application that you want to deploy on multiple platform, say Android, iPhone, etc. In this app, you want to use one or more of the platform services to obtain some kind of data or carry out some kind of processing. Lets take, for example, an application that lets you invite friends to a movie as soon as you book a movie ticket. The app lets you select which friends to invite directly from your phone's contacts book. That means, if you're the developer of such an app, you'll most probably have to deal with consuming the platform's contact book using, for doing which, each platform would obviously have its own different ways. So there are 2 problems here:

1) How can you query the platform's contact book from within your web application which is being written in javascript(or Dojo) and has no knowledge of the platform's APIs.
2) How can you do so in a platform agnostic way, so that your web app works not just on Android but also on iPhone, notwithstanding the different ways of using the contacts book in both.

Phonegap aspires to be the answer to both of the above questions. How? It provides APIs which abstract the platform's contact book for you, so that you only deal with the Phonegap API and let phonegap do the rest of the magic for you.

2) How do I set up/install Phonegap on my system?

This one's not as trivial as a setup.exe, sadly! Phonegap requires a bunch of things to be installed on the machine before getting started. I found this document about installing phonegap - http://wiki.phonegap.com/w/page/16494774/Getting-started-with-Android-PhoneGap-in-Eclipse. Unfortunately, I sat down doing all the steps and till a few hours, I was not even able to create my first phonegap hello world app.

So, the right thing to do here is to follow the above document till the "step 1f" i.e. install eclipse, android sdk, android development tools, apache ANT, and ruby. And you're almost done! Yes, don't get intimidated by the remaining steps in the doc. Step 2 onwards is a longer way of installing phoneGap and more relevant when you aren't going to use Eclipse. And that too, doesn't somehow work as stated. :(

Phonegap can be directly installed on Eclipseas a plugin. All you need to do is go to Help>Install new software>Add and use the download site " https://svn.codespot.com/a/eclipselabs.org/mobile-web-development-with-phonegap/tags/r1.2/download". Then making sure "contact all available update sites" is checked, install the phonegap plugin. Voila!  No need to download phonegap sources from github.

3) How do I create my first phonegap application?

On Eclipse, first create a new phonegap project by clicking on the phonegap comnand you see on the coolbar. Then if you don't have downloaded sources for phonegap, check

"Use Built-in PhoneGap" on the project wizard. Click Next and create the new Android project in the Android project wizard. (Note: You can also simply create an Android project, making sure that the android main activity class extends DroidGap class instead of Activity class. Make sure you add "phonegap.jar" as an external library to the build path.).

You see that a phonegap app is nothing but an android app with the main activity class extending phoneGap's droidgap class and it's onCreate method loading an html page instead of performing any native functionality. You can replace this html page by one of your own choice in the assets/www folder. Check out http://mobile.tutsplus.com/tutorials/phonegap/creating-an-android-hello-world-application-with-phonegap/ for some good examples.

You can now use the phonegap APIs such as the contacts API, media player API, geolocation API, etc. Ripple is a browser based emulator (a chrome extension) that you can use to test the PhoneGap applications. (Testing on the Android emulator is a bit slow with web apps).

Happy phonegapping!