Introducing Dude Where’s My Velo

By

Dude Where’s My Velo is a new HTML5 web app you can open on your phone to find the nearest velo city-bike in Antwerp. The interface is a full window Google Map with colour-coded markers representing the location of bike stations and the availability of velos.

Geolocation is used to center the map and show the user’s exact position in Antwerp. As you ride around the city your new location is automatically represented on the map.

The serverside part of the application is built with NodeJS to be blazing fast. It constantly scrapes data from the official velo-antwerpen.be website and stores it as a JSON file. NodeJS is fast because it is an event driven server. After the server sends out a scraping request it will rest, and CPU usage will go down to zero, until it receives a response. This allows it to manage many simultaneous tasks.

On the client side, scripts and stylesheets are included as inline code to reduce the number of HTTP requests made and improve the performance of the app.

All code for the project is open source and available on GitHub, so if you’d like to improve something about the website, feel free to make your own changes and submit a pull request.

There are a number of reasons we built this as an HTML5 web app rather than a native app.

The most important reason is cross-device support. The Google Maps SDK we use already supports iPhone, Android, BlackBerry 6 and Dolfin 2 (Samsung Beda). As other manufacturers improve their mobile web browsers, Dude Where’s My Velo will automatically support those devices. We are expecting good support for Windows Mobile and Nokia devices later this year.

The second reason for web over native is bug fixes and feature updates. Web apps can be updated as quickly and easily as normal websites. Changes don’t have to be approved or reviewed by third parties.

So check it out now. Visit dudewheresmyvelo.be on your phone or computer. We would also like to give a shout out to DotCloud who are hosting the app for free. Happy cycling!

This entry was tagged with HTML5, Javascript, Mobile development. Bookmark the permalink.

Comments

  1. On the other hand, HTTP caching is extremely easy to handle at the application level and it will dramatically reduce the amount of requests hitting your app.

Leave a Reply