Thursday, June 2, 2011

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!

10 comments:

  1. Check out http://wiki.phonegap.com/w/page/34483744/PhoneGap-Eclipse-PlugIn-for-Android for more details about the MDS AppLaud plugin for PhoneGap development

    ReplyDelete
  2. Thanks, this article helps me when I want to build a android application for my college task

    ReplyDelete
  3. I have no words for this great post such a awe-some information i got gathered. Thanks to Author.
    Google android app development| Android app development|

    ReplyDelete
  4. what is the use of Apache and Ruby ?
    why we need to install them too ?
    i cant found when we use these both.

    -noob-

    Thanks.

    ReplyDelete
    Replies
    1. Hi Haura,

      Apache and Ruby are optional, and not required when working entirely in Eclipse. However, if you work on the command line and want to build and package the phonegap example app, you need to run the droidgap script using Ruby and ANT to build the example. HTH

      Delete
  5. PhoneGap is an open source solution for building cross-platform mobile apps with modern, standards-based Web technologies.Thanks for sharing it.

    android mobile development

    ReplyDelete
  6. Great post! It is very informative and very useful, Thanks for sharing this interesting information.

    mobile web development

    ReplyDelete
  7. Great post . It takes me almost half an hour to read the whole post. Definitely this one of the informative and useful post to me. Thanks for the share.phonegap application development in west delhi Elesoftech is a leading offshare web development,mobile application, iphone application

    ReplyDelete
  8. Wonderful blog & good post.Its really helpful for me, awaiting for more new post. Keep Blogging!..Thanks for sharing this wonderful blog..

    JAVA J2EE Training in Chennai

    ReplyDelete
  9. This is truly a great read for me. I have bookmarked it and I am looking forward to reading new articles.
    facetime for android

    ReplyDelete