Site Meter
 
 

Category: Touralot

Touralot: an iOS app built with PhoneGap, Knockout, and Azure Mobile Services

As a weekend project for the past few months, I’ve been building my first real mobile app: Touralot. Finally, it’s done, and it’s been approved on the iOS App Store!

Touralot lets you publish your own web-based guides to your favourite places to go and see. Maybe you’re off on vacation and would like to build a record of cool places you see, add photos, ratings, descriptions, plot them on a map, and then publish it all to the web. Or maybe you’re at home and are particularly knowledgeable about local restaurants, kids’ play centres, or whatever, and want to share your expertise.

This video gives a sense of the user experience:

Video looks blurry? Use a different browser, or open the video directly.

If you’re on an iPhone, you can get it now from the App Store (free).

The technology

Touralot is a Cordova/PhoneGap app, with the UI powered by Knockout.js, and a backend data service provided by Windows Azure Mobile Services (and a couple of other Azure facilities). It works entirely offline, except of course at the point where the user wants to log in and publish their stuff:

Screen Shot 2013-03-13 at 12.12.01

Why did I use HTML/JS and PhoneGap instead of native code (e.g., Objective-C)?

  • I wanted to see how far I could push HTML/JS to match the quality experience that people expect from native apps. This includes:
    • Standardised UI elements that respond intuitively to touch, drag/drop, and swipe gestures
    • Butter-smooth hardware-accelerated transitions
    • Retina-sharp professional artwork
    • Offline/syncing support

    Assess the result for yourself – I don’t imagine that it would even occur to normal users, at least on reasonably up-to-date devices (iPhone 4S/5), that this isn’t native.

  • This app can now be made cross-platform with relative ease. There’ll be some restyling effort involved, since Android and Windows Phone have different UI conventions, but hopefully it will mainly just be CSS changes.
  • I don’t know much Objective-C…

Coming up

Over the next few weeks I’m planning a series of blog posts to describe many of the techniques I used and challenges I went through while developing this app, along with recommendations and tips for PhoneGap development. Some of these techniques are well known, some might even be original…