As the Scrum product owner of the german Telefónica o2 online shop I was recently assigned the project of building a mobile version of the application. The project is currently under construction but still the whole topic of mobile web development was relatively new to me – not as a user, but as a creator of applications. Sure enough, I can join in on a mobile web bullshit bingo game, but never having built something myself didn’t feel right. That’s why I decided to mess around with the topic a little bit myself.
In order to learn something new it’s always a good idea to read up on the topic. But that doesn’t make you an expert. So I started a little demo project using various html5 related features. I called it „Geotracer“ and it was inspired by the app „Runtastic“ that I love using on my iPhone. So what does it do?
- collect your positions using the positioning feature of the device
- save the data of the trip in the local storage of the browser
- calculate elapsed time, distance and average speed
- draw the route onto a google map
- functionality for persisting trips on the server and loading them later
- show places nearby and calculate the distance to them. The data for the places was taken from www.geonames.org
From the technical design point of view these are the key elements
- single page web application
- Client-Server data interchange using JSON objects
- basic file structure derived from html5boilerplate in order to get started quickly
When done properly this should be added, too
- feature detection and using polyfills for substituting missing features
- more error handling (as you’ll see when analyzing the sourcecode)
The result can be seen here – it works well with iOS6, I haven’t tested it with any other mobile operating systems.
Here are some of the learnings I got from this little project
The geolocation feature
The api for locating your current position is astonishingly easy to use. All you need to do is call the function and pass references to callback functions for success- and error handling as parameters.
The function called in the case of success receives the current position and you can extract the values for latitude and longitude like this.
var trackingPoint = new TrackingPoint(new Date().getTime(), position.coords.latitude, position.coords.longitude, ”)
of course the GPS module is not 100% accurate. So even if you do not move, the collected geolcations will be spread over an area of some square meters. In order to compensate the effect I made sure the location is only persisted in case the new position is at least 10m away from the previous position
For calculating the distance between two points I used the Haversine-Formula. The implementation I used comes from here: http://stackoverflow.com/questions/27928/how-do-i-calculate-distance-between-two-latitude-longitude-points
I was really amazed how simple the api really is. Geotracer stores all collected geolocations locally, so that you can navigate to another page, come back and your data is still available. The local storage API consists of 4 methods, no need for further explanation:
Important to know: if you want to store object data you’ll need to convert it to a string first. JSON.stringify(object) does the job perfectly. For using a serialized object later you can simply call JSON.parse(object)
It was fun to implement this little project. And while working on it I continuously found other areas I want to dig into, such as the already mentioned web workers or CSS3.