This post is from a series of posts about a widget developed for the Vodafone 360 platform. Click here for the previous post.
From the start, we had a list of features we would like to have in the widget. We wanted a full featured application, and for that matter, we had some high requirements which we think need to be present in such an application in order for it to become useful. Some of them were relatively simple to implement, while others simply could not be implemented without the help of the Server side services.
Ok, this is a relatively simple one. We could even use the local storage of the device (via Widget.preferenceForKey), for a limited amount of data. However, since we don’t want to impose any limits to our users, we implemented this feature on the server side. This means that we need to upload the track points to the server. This proved to be a needed effort to support other features.
Save or export GPX / KML files
This is a tricky one. Since we don’t have any file system access from within the widget, we needed to be creative here.
Taking advantage of the fact that we have all the points stored in the server, we can then generate a KML/GPX file on the fly, when a user requests it. This is then a “simple” link to a server component with the arguments identifying the correct track. When we request the link to be opened in the browser, we will trigger the download of the generated file. The user can then import this file in Google Earth and browse the track in his/her personal computer.
Show GPS Status
This is a simple one. Sometimes, I just want to check my heading, speed or coordinates. This feature will get GPS information, perform the required calculations and present them in the screen in a clean way.
Display maps of the saved activities
One thing that I was certain that we needed to have in an application like this is the ability to browse the map with the saved track overlayed on it. This is great because we can show the tracks to our friends anywhere and at anytime.
This is also supported by our server side components. The widget manages zoom and pan parameters, and then shows the generated image.
We are using the Google Maps static API for this feature, and as such, we support the following types of maps:
You can change the map type in the settings menu.
You can Zoom In, Zoom out and pan around all directions using the application.
Display graphics (elevation and altitude)
This is also a tricky feature to implement in the Vodafone 360 Platform (or any other Widget based platform for this matter). We have access to the HTML5 canvas element. However, it would be rather tricky to do the drawing in real-time on the device. More: we would need all data to be stored locally or be obtained from the server on demand, which would give a less than optimal user experience. So how to solve this issue? Once again, the server side components are the answer: we use the Google Charts API to draw the graphics from the data stored on the server. The Google charts API draws the graphic and hands them to our server, which in turn will handle it to the application, via a simple asynchronous image loading technique.
Share with friends
When I share my tracks with my friends, I usually send them the GPX or KML file. This is ok if they are at their home PCs and have a tool installed which allows them to open the track information. But if they are on the move or in a place where they cannot access a offline tool, wouldn’t it be great to use for example, a service like Google Maps to show the track in a browser? Well we believe it would and we implemented a share feature in our application: After a track is submitted, we generate a link to a page where you will be able to browse the current activity. We then shorten that URL (using the bit.ly API) and allow you to send the link to your friends via SMS, e-mail, and share it on Twitter or Facebook.
This page also shows the elevation and speed graphs, and allows you to download the KML and GPX files to your desktop computer.
When you send a link to your track, you are actually sending a link to a page like this one (for your own track):
Given that we were targeting an international contest, this is a must. We currently support Portuguese and English, but we have the foundations to add other languages in an easy way.
Design rules and usability
We were to great extents to provide a “Vodafone 360” experience to our users. This included the navigation controls, iconography, and general experience rules, such as the loading screen with the flipping panels. This ensures that the user is already “educated” on how to use our application from the previous knowledge he or she has from the platform.
This was when my friend Teresa Carvalho hopped in and gave us her valuable help:
We are very happy with the final result of the application/service.
We hope that you enjoy using the application as much as we did developing it.
Please let us know your thoughts about Trackie in the comments, below.