I thought this post would be useful as a follow on from my last post “Using Google Docs As A Webservice”, where I showed how you can use the ‘publish as ATOM feed’ feature of Google Spreadsheet to read dynamic data from your mobile app using PhoneGap and XUI.

In this installment, I’m adding the ability to present the weather in my mobile app (still using PhoneGap and XUI), building on what we used in the previous post. Let’s have a look:

If you examine the response XML, you’ll notice some things:
– You get the ‘current conditions’, Today’s conditions and the next 3 day forecast.
– The wind speed is returned in MPH.
– The forecast low and high temps are in Fahrenheit

Here is a snippet of the page body to display the weather data. The Javascript and HTML files make “heavy” use of element ids (to separate presentation from data model):
Notice that I load the functions when the body loads.

I picked up this little gem of a trick from Herman Lintvelt’s (@hermanlintvelt) Domain Specific Language (DSL) talk, at AppsWorld Africa at the beginning of the month, where he walked through the processes of creating a DSL for a SASSI Pocket Guide app for Android and iOS. His example used a Google Spreadsheet to maintains the status of indigenous to South Africa, and using the ‘Publish as a web page”feature, he demonstrated how the Spreadsheet RSS export be used as a webservice…niffty, huh!

In this post, I’ll demonstrate how to do it using PhoneGap and XUI.

Firstly we’ll create some data in a Google Doc Spreadsheet, then “Publish as a web page” in ATOM format:

A good option to set is “Automatically republish when changes are done”.

Great! Now we’ve got data we can use in our mobile app. Next, we’ll need to add some Javascript to our PhoneGap app to request our webservice data using XUI.

The Javascript code for XUI (using XHR) looks something like this:

What the function does is make a XUI XHR request to the Spreadsheets ATOM feed to read the data. It then iterates the each of the <entry> elements (each <entry> element represents a row in the Spreadsheet.

We then read each cell value (maintained in the <content> element) to build up the Header row and data row(s) and a HTML table which we then set as the document element with the id “ui_events”.

The Javascript method can be invoked by a timer or when a button is pressed.

I have been evaluating the PhoneGap mobile application framework for about a month now and so far I’ve been really impressed!

The PhoneGap website describes the framework as “…and HTML5 app platform that allows you to author native applications with web technologies and get access to APIs and app stores. PhoneGap leverages web technologies developers already know best…HTML and Javascript”.

The framework is really a RAD (rapid application development) tool to accelerates a n applications development time. To test this theory/promise out, I decided to develop an application on the PhoneGap framework. The application is called MyCiti which has the routes and times for Cape Town’s MyCiti bus system. While PhoneGap can target the major platforms like iOS, BlackBerry and Meego(Nokia), I settled on Android, since I own an Android device and this application would be useful for me. To my excitement, I was able to put together a pretty slick-looking (terribly static) application using JQueryMobile after about 3 hours of coding….PhoneGap delivered on their promise!

*PhoneGap was developed by the mad scientists at Nitobi in 2009 as their submission to the Web 2.0 Expo Launchpad competition.