WiseMove: a HTML5 Mobile App - full example with source - Part 1

In this small series of posts I will introduce a HTML5 Mobile App named WiseMove, and the technologies and tools used to build it.

The app is available on-line (in form suitable for desktop) at the following location: wisemove.ppettit.net

The app can be packaged for mobile using Cordova and full source code is available at http://github.com/phillp/WiseMove

The app is intended to serve a real, albeit small purpose.  WiseMove is aimed at assisting a person moving house to evaluate locations.  The user is able to place pins on a map that represent locations the user is considering moving to, or locations the user will visit.   The user is able to score locations by any measure they define.  The app also looks up route information from google to determine likely travel times.

The subjective scores and travel times are displayed in charts and tabular forms.

There are a very large number of frameworks and libraries in which this application could have been successfully built.  The libraries I used were:

• JQuery Mobile
• Knockout JS
• Google Maps
• Flot charts
• QUnit JS  

The development environment included:

• Ubuntu
• WebStorm
• Ripple Emulator
• NodeJS (as static content server)

In the next post I'll dig into the way the libraries were used in detail.