We have been working hard on the official London 2012 in Coventry mobile app recently (now called Coventry – 2012 Games) and thought it would be worthwhile to blog about some of the technical issues we have overcome so far.

We are using PhoneGap for the project (allowing us to reach 7 platforms) and for 5 of those platforms, we are also using the jQueryMobile framework.

The first issue was implementing a fixed header and footer for the app. We wanted a fixed title bar and navigation panels, with only the middle content being scrollable. After much experimentation, the solution we found was using iScroll4 with some modifications for jQueryMobile (creating a new iScroll object for every page with a unique name).

Another tricky topic included integrating a fully interactive GoogleMap within the app that shows custom markers, the user’s location and routes from A to B. We used the jQuery map plugin for this.

We also wanted to implement a method that checked the state of the user’s Internet connection before attempting to retrieve RSS data and/or map data. We found that checking for the connection state of the device could be misleading as it was unable to differentiate between WiFi connections that were accessible and those that weren’t (i.e. when you are connected to a WiFi network but haven’t logged in…such as BT OpenZone…and therefore can’t access the web). Also we didn’t want to block data requests for 2G connections, as if these are speedy enough, they can be acceptable. The solution was to do a quick call to our events feed RSS using Ajax, and if there was an error, or no response within 3 seconds, then we assume there is no valid connection:

$.ajax({
url: "http://london2012.cswp.org.uk/rssfeed-mobile",
type: "GET",
dataType: "xml",
timeout: 3000,
success: function(response)
{
//do whatever we wanted
},
error: function(x, t, m)
{
navigator.notification.alert(
'Unable to connect to the Internet',
alertDismissed,
'Connection Error',
'OK'
);
}
});

We will also be creating an editable web system to allow the Coventry City Council Olympics team to edit the content of the app dynamically, to make sure all the latest news, fixtures and info is kept up to date.

Overall the app is coming along nicely and the iOS version is nearly completed. The final stage is porting the iOS app to the other 6 platforms, which even though we are using PhoneGap, will still be a fiddly task as each platform has it’s own unique charms! Stay tuned to the portfolio page for screenshots nearer the launch.