Site Meter
 
 

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…


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

  1. Durandaljs will help you for managing your SPA.

  2. Justin

    Very cool. Any thoughts to eventually releasing in Android as well now that Azure has Android mobile services?

  3. Ivan

    This is very impressive. Looking forward to seeing restylized wp and android versions.

  4. James

    Very interested to hear about what frameworks or methods were used to create such a slick UI.

  5. Sean Kearon

    Impressive indeed! I’d be interested to hear if there any performance limitations when using PhoneGap as compared to Xamarin?

  6. Awesome. Looking forward to the details!

  7. Ray

    Awesome, UI seems promising and I am really keen to hear your experience, trial and error from this project

  8. Drago

    Interesting. Maybe some comparison to Xamarin solution indeed…

  9. Hello there, I found your web site via Google while searching for a related topic, your site came up, it looks good. I have bookmarked it in my google bookmarks. here http://www.mymedpals.com/blogs/16323/19183/try-out-this-again-discomfort-re

  10. Dan Miser

    Nicely done! I’ll be waiting for the follow up post. I had the same decision point a couple years back, but ended up going with Xamarin. I don’t regret it at all, but it still will be nice to see how things compare.

    As an aside, can you tell us what tools you used to make the video? I’m assuming the iOS Simulator on the Mac and some screen recording app?

  11. Fabian

    Very nice! Waiting for more to read on that interesting topic!

  12. Pacoder

    I think until you actually try to implement it on Android especially as you’ve pointed that this your first mobile that it will be easy to make cross-platform. I think you’re going to find HTML5 transitions lacking on Android for one thing, especially on lower end devices. You are also likely to run into issues that are going to require more then just CSS changes when you try to deliver a real Android experience. That being said it definitely delivers a very smooth equal to native iOS experience (at least on my iPhone5) BUT it’s also a pretty limited feature set. Like all things using the right tool for the right job is the trick, and HTML5 vs. native is exactly the same, to say either one is the ‘best’ way to develop is a spurious argument. Yes I know you didn’t come right out and and make that exact argument but saying “how far I could push HTML/JS to match the quality experience that people expect from native apps” implies to me that you would have the same experience you’ve had with this app developing any app and I would argue strongly that is not the case.

    Really nice looking app though, I like it.

  13. Dion

    Very impressive! This is the first PhoneGap application that really feels almost like native.
    I suppose the MapKit integration did need some Objective-C to get the nice interaction between your app and the map?
    Anyway, the UI controls and transitions are really amazing. Do you have any plans on open-sourcing those?

  14. Steve

    Justin – I’m hoping to get chance to do an Android version at some point. But my first priority is an iPad version, since it shouldn’t take much extra work.

    Sean, Drago, Dan – good points about Xamarin. I’m sure that works really well too, though to be honest I don’t know it at all. Conceptually I understand it’s quite different (it wraps native UI, rather than using HTML/CSS for UI), so the familiar HTML/CSS route was more appealing for me personally.

    Pacoder – I’m sure you’re right. I’m certainly not claiming that HTML/JS/PhoneGap is the single “best” way to do anything. There are always different tools for different circumstances. It worked well for me in this case, that’s all I’m saying. It will be interesting to see how Android compares; I suspect that I’d have to limit the app to Android 3+ in order to get acceptable behavior when it comes to things like transitions.

    Dion – Yes, I used the PhoneGap MapKit plugin to get the native map. No plans to open source the app at present, but will be blogging about many of the implementation details.

  15. Pingback: Animating lists with CSS 3 transitions - Steve Sanderson’s blog - As seen on YouTube™

  16. Kyran

    Cool app man. Good to see Phonegap in a context where not being slated for not being native. Beyond a few minor design aesthetics I wouldn’t be able to tell this isn’t a native app.

  17. Buddy

    I have been trying this same approach, but have been shying away from MVC for fear it will not be handled by PhoneGap Build.
    Also, if MVC is used for paging, how can the app be used off-line.
    I just descovered device.js for handling different paging for phone/tablet/desttop. This is an alternative for serving different pages for different form factors…similar to the way MVC uses the layout_mobile, etc.
    Hope you can get to the new explanation posts soon.

  18. Steve

    Buddy – if you mean ASP.NET MVC, it doesn’t use that on the phone at all – it’s an entirely client-side HTML/JavaScript application. This app only uses ASP.NET MVC on the server for storing photos and rendering public web pages.

  19. Do you use jQuery Mobile or Sencha Touch for the UI?

  20. Steve

    Halis – No, neither.

  21. Lev

    Steve, its quite a shame that you don’t plan on open-sourcing this! It is obviously your decision, but it would help many people (myself included) with the intimidating task of learning PhoneGap development.

  22. Awesome Steve, nice work! Really slick transitions, great native like styling, feels just like native.

    Reslise why you dont want to open soucre it but I’d love to see the source as sample code – no other examples on the web of this stuff are really quite polished enough. I’m actually especially keen to see the CSS like in the footer bars etc.

  23. bitbonk

    Will we be able to see the source code? It should make good starting point for learning how to use PhoneGap. Especially for beginners like me.

  24. Brian Santucci

    I’m working on a side project with a very similar architecture in mind. Main differences are that I was planning to use JQuery Mobile and that I was going to write my own services with WebAPI, mostly because I didn’t know about Azure Mobile Services, so thanks for making me aware. I’d be interested in your following posts to know if you considered JQuery Mobile and if you had reasons for not using it. Also, please provide a lot of detail on hooking a PhoneGap app up to Azure Mobile Services, since the Azure portal tutorials don’t have anything on that.

  25. Awesome information.looking forward for another helpful post.
    Thank you for sharing this post.

  26. Hi Steve,
    Congratulations on your app. I am doing a similar experiment – I want to write an app for my website (based on DotNetNuke with WebAPI) and am trying to figure out if I can use ASP.MVC to manage my views with the SPA templates, and then somehow grab the output and put it into PhoneGap (so that it only goes to the server for data). Do you think this is possible? I look forward to the rest of the tuts!

    cheers
    Rodney

  27. ps – please comment on how you did the UI – I am trying out Ratchet (Jquery mobile flickered and did not look good) and using custom CSS. How did you do the gestures?

    Thanks

  28. Great App, thanks a lot for sharing this!

    I’m also working on a phonegap app, using backbone/zepto and it works very well.

    Unfortunately, I have some problems related to memory management, (I get segmentation fault crashes on test devices), often after resuming the app.

    Did you experience such issues too?

    Looking forward to more blog posts about this app!

  29. Update: the segmentation fault errors were caused by the socket io client module’s (v0.9.x)
    auto re-connect feature at resuming the app…

    https://issues.apache.org/jira/browse/CB-2301

    thanks again for this post!

  30. Nice place to hear about the latest technology.

  31. With modernization and increased complexities of our lives leisure time have decreased rapidly.
    Thus, a person will not have to waste lot of his productive time.
    It keeps you posted with about the latest, recent and current
    news.

  32. Chicken salad is a staple food that never goes out of style.
    Poach the chicken for 20 minutes or until firm when touched remove the pan from the heat, uncover, cool the chicken in the
    liquid for half an hour. 3 oysters is said to meet our daily zinc consumption recommendations.

  33. Hello there, just changed into aware of your weblog through Google, and located that it’s really informative. I’m going to watch out for brussels. I will be grateful for those who proceed this in future. Lots of folks will be benefited from your writing. Cheers!

  34. Guilherme

    What did you use to perform the transitions. Existing CSS3 libraries or you did it yourself?

  35. Graham

    Yeah I’d love to see the source for this Steve :) But I am not sure if you are intending to push it commercially, but if it’s a proof-of-concept would be great to see the code to help others, as I’m about to step into PhoneGap with your wonderful framework KnockoutJS in the coming weeks and currently have not found any resources on how to start. But I haven’t even started looking, but what better example than something written by the KO author eh? =)