Testing a PhoneGap Application with Chrome and Ripple

In my previous posting I described how to get started with the freely donwloadable  IBM Mobile Technology Preview. I took one of the samples provided and ran it in an Android emulation environment. That worked nicely to test some features of the samples but the speed of emulation is quite slow. This doesn’t make for a productive Code/Test cycle. In this article I want to describe an alternative approach using a Chrome Plugin known as Ripple. Ripple was created by the gloriously named Tiny Hippos, who were acquired by Research in Motion this year.

Hybrid Applications

One key aspect of the IBM Mobile Technology Preview is the use of PhoneGap to enable building Hybrid applications. That is applications that run in a browser and yet which exploit native device capabilities such as GeoLocation and the Accelerometer. In effect PhoneGap provides an device-independent JavaScript API hooking into a device-specific native implementations on each platform. The expectation is that the bulk of a Hybrid application is implemented in JavaScript that is portable across a wide range of devices. The Dojo mobile APIs will detect the particular device and hence allow suitable style-sheets to be selected giving a visual appearance that fiits the device standards. Hence we have a vision (to use an old phrase) of  “write once, run anywhere”. In my team’s experience this, with careful design, this vision can be realised.

When developing such Hybrid applications we can greatly accelerate the development/unit test cycle if we can simply run the JavaScript in a browser. This is where Ripple comes in: it provides an emulation of different device types and an implementation of the major PhoneGap APIs running directly in Chrome. I am going to show how to use Ripple to run the Mysurance sample, which uses GeoLocation in Ripple.

One note: some aspects of the Technology Preview, notably the Notification framework, depend upon Java code. We cannot test these aspects using Ripple as it currently stands. I believe that Mysurance is typical of most Hybrid applications in having very significant portions of the code in JavaScript and hence benefiting from testing in Ripple.

Setup

The application assets (web pages, JavaScript, css and images) are held in a assets directory. We need those to be accessible to the browser. It simplifies some of my other testing if I serve these files from a web server such as Apache or IBM HTTP Server.

I add these entries to my httpd.conf:

Alias /mysurance "C:/IBM/MobileTechPreview/samples/mysurance/eclipse-project/assets/www"

<Directory "C:/IBM/MobileTechPreview/samples/mysurance/eclipse-project/assets/www">
    AllowOverride None
    Options None
    Order allow,deny
    Allow from all
</Directory>

and restart Apache. I can now point my browser at

http://localhost/mysurance/apps/mysurance/step12.html

and see the Application

Ripple Installation

You can install Ripple into a running Chrome instance from this Ripple download site. On completion the Ripple icon is visible in the toolbar

The first time you access an application with Ripple installed you see this

which offers a number of possible runtimes, I choose PhoneGap, and then can select the Ripple icon and choose to Enable Ripple.

The Mysurance application now shows in a device emulator, along with various control capabilities.

GeoLocation

If you explore the Ripple control capabilities you will see that you can select different devices, emulate the accelerometer and send events. Here I’m going to focus on the GeoLocation. Expanding that section I see

With a default location of Waterloo Station. We can change this, if we know the latitude and longitude of our desired location. I will choose a place in Yorkshire, finding it’s coordinates from this site.

Ripple now shows the new location

Back in the application I pick Accident Toolkit and from this menu

select Call the Police. This brings up a map centred on the location we specified to Ripple, with nearest police station identified.

Select the station gives us the contact details.

Conclusion

This does seem to be a very promising approach to testing some aspects of Hybrid applications.