Agile Development of mobile applications using IBM Rational Team Concert and Phonegap for Android, iOS and others

In earlier articles - Developing applications for Android™ using IBM Rational Team Concert in an agile way and Developing applications for Android™ using IBM Rational Team Concert andRational Rhapsody in an agile way we saw how to leverage the power of planning, collaboration, process, source control, build management, etc that IBM Rational Team Concert (RTC) has to offer, to develop and manage Android applications in a team working across geographies and across different platforms. We also saw how a team can model the application, specify UML class diagrams, use case diagrams, and link them with the requirements through Rational Rhapsody. The buck does not stop here. In a world where there are numerous different platforms such as iOS, Windows Mobile, Android, Meego, Blackberry, etc, how does a development team create applications that work seamlessly across different devices supporting different platforms? The brute force approach, ofcourse, is to write fresh code for each platform and then test and manage the application differently for each device or platform configuration. And as it sounds, this approach is not at all scalable and requires immense investment of resources – time, people and money. The other confounding problem that mobile developers can typically come across is how to glue together native and web components into a single mobile application(hybrid application). The way out of this conundrum is offered by new, open source technologies such as PhoneGap.

In this article, we explore what is PhoneGap and how does one use it. We then see, with the help of a demo, how a team can easily develop, test and maintain a cross-platform application working on Rational Team Concert's Eclipse Client and using PhoneGap APIs. This is facilitated by the MDS Applaud PhoneGap Eclipse plugin.

---

About 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 us try understand 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 the phone APIs, 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 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, and also allows creation of hybrid applications, consisting of both native and web components. 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.

---

Download and installation

1) OS: Windows x86 / Linux x86 .
2) IBM Rational Team Concert: Download/buy from RTC downloads page. Note that if you're using an existing Eclipse installation to install RTC, make sure you have Eclipse 3.5 or lower (Eclipse 3.6 is not yet supported for Android development). RTC can also be installed directly on Eclipse 3.5.x (see http://jazz.net/library/techtip/384).

3) Android SDK: Download the SDK from Android website - http://developer.android.com/sdk/index.html.

4) Android Development Tools(ADT): This is an eclipse plugin- the equivalent of JDT(Java Development Tools)- for Android Development. ADT can be downloaded and installed using instructions given at http://developer.android.com/sdk/eclipse-adt.html. Please follow the detailed instructions on this page for installing the ADT plugin, and also for setting the location of Android SDK in Eclipse.

5) It is a good idea to read through the following step by step guide to set up RTC and prepare it for Android Development: http://jazzpractices.wordpress.com/2010/08/10/how-to-set-up-rtc-for-android-development/.

Installing PhoneGap

Refer to my earlier blogpost on developing Phonegap applications using Eclipse to read about how to install Phonegap on the RTC Eclipse client.

*Note: You can similarly develop Windows mobile applications using RTC's Visual Studio client.

---

Creating a PhoneGap Android project

Follow the steps below to create a hello world PhoneGap Android application:

1. Create a new PhoneGap project by clicking on the PhoneGap command you see on the coolbar.
   
2. If you don't have the source code for PhoneGap, check "Use Built-in PhoneGap" on the project wizard
   
3. Click Next and create the new Android project in the Android project wizard.
   
4. Launch the new application as an Android application and you will get an application as shown below.
   
   
   
   

(Note: For those who do not have the PhoneGap plugin for Eclipse, you can also simply create an Android project, making sure that the android main activity class extends PhoneGap's 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 this website for some good examples. Similar applications can also be created on other platforms using the PhoneGap classes specific to that platform. The javascript code can be directly re-used.

---

The Demo

The demo showcases how a distributed team working on a cross-platform, hybrid mobile application can leverage PhoneGap APIs, and also the functionality provided by RTC through the complete lifecycle of the application, right from planning to implementation to design and testing, and even defect tracking.
In the demo, the application to be developed has a native activity to start with, which displays a list of all phone contacts. Clicking a particular contact displays the contact details in another native activity and provides a button to send an email to that contact. Clicking the button launches a web based email client (this is a PhoneGap activity), which has an option to cc more contacts from the phone's contact book. This makes use of the PhoneGap contacts API to fetch a list of the phone contacts from the web based activity. 
 
Check out the video below:

With the recent release of the Rational's Jazz based solution for Application Lifecycle Management, also called Collaborative Lifecycle Management or CLM, it is possible to do much more by integrating multiple tools with RTC. To see Rational Team Concert and CLM live in action, do visit IBM Rational Innovate India 2011, Bangalore. You can catch me there at the RTC solutions center. Also, if you're interested in building JavaME applications, you can also read up my jazz.net article - Developing Java ME applications using Rational Team Concert inan agile way to see how to do so using RTC.

---

For more information

• Android Developer website
  
• Getting started with Rational Team Concert
  
• Developing Android applications using Eclipse
  
• Using PhoneGap in Eclipse to develop Android applications
  
• PhoneGap Android Eclipse quick start 
  
• Rational Solution for Android Mobile Application Development 
      

Android is a trademark of Google Inc. Use of this trademark is subject to Google Permissions.