Twitter About Home

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!

Published Mar 13, 2013

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][1]

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
    • </ul>

      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…
    • </ul>

      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…


      [1]: http://blog.stevensanderson.com/wp-content/uploads/2013/03/Screen-Shot-2013-03-13-at-12.12.01.png

READ NEXT

Knockout 2.2.0 released

It’s been five months since the last significant Knockout release, so it’s about time for another! The core team and many contributors have been hard at work adding some sweet new features, performance upgrades, architectural improvements, and bug fixes. After all this, the final code file is smaller than the previous version :)

Published Oct 29, 2012