Archive | octubre 2013

MozLocations: Building a Firefox OS application for transportation

Firefox OS, the mobile operating system from Mozilla, is a concrete bet in order to bring back the web applications to the mobile world. Below I explain a project of an application for Firefox OS in order to solve a local problem.

The context

In Lima, Perú there are to massive systems of public transportation: Metropolitano (a system of buses that  go across the city) and Línea 1 of the Electric Train. Both have predefined stations and schedules and both are used by thousands of people everyday.

Estación Naranjal, Metropolitano de Lima

The past year in Mozilla Perú we started to prepare ourselves to the arrival of Firefox OS and we build mobile web application. The first of them was Metropolitano Mobile, an application built with jQuery Mobile that shows information about stations and routes.

In 2013, with the first commercial launches of Firefox OS worldwide (Geeksphone, ZTE) and local (Spain, Poland, Colombia and Venezuela), we started to work in an application for the Electric Train in Lima (in Spanish), that is also available at the Firefox Marketplace (in Spanish).

The idea behind MozLocations

The obstinacy with transportation apps was because we think it’s important to build useful applications for people for a region or a country, apps that solve real problems and apps that we and our friends can find useful.

After the previous experiments of Metropolitano Mobile and Sube al Metro de Lima, I decided to plan a new app but these principles in mind:

  1. An application for Firefox OS specifically, that take advantages of their resources but also accessible through the web.
  2. An offline application, or at least most of their options can work without an Internet connection.
  3. An online application, that links with other online services only in specific situations.
  4. An application that can be ported to other sceneries with few adjustments.

Then the general guidelines were:

  • List stations and routes of a transportation service (in this case the Metropolitano of Lima).
  • Show stations details, like its position and the list of routes that stop in each station.
  • Save a Favorite station, like a shortcut to the stations details of an station that we always visit or the station we have to go.
  • Calculate the nearest station, that from our current position the app can suggest us what is the station we can go.
  • Retrieve alerts related with the service, like a status alert. In this case the alerts can be obtained from the Twitter offficial account of the service.
  • Show general information: Like the schedules, the fares and options to contact the service.

Metropolitano de Lima, the app

The app is now available at the Firefox Marketplace as Metropolitano de Lima, and it works for Firefox OS devices only. The ‘online’ version is available through Github Pages for any browser.

These are screenshots of the application:

Metropolitano de Lima 1 Metropolitano de Lima 2 Metropolitano de Lima 3 Metropolitano de Lima 4 Metropolitano de Lima 5 Metropolitano de Lima 6 Metropolitano de Lima 7

But I’m not in Lima (and I’m a developer)

It’s time to remind you the forth principle of the application:

4. An application that can be ported to other sceneries with few adjustments.

That’s why the application stores the service information in data arrays in JavaScript:

var applicationData = {
stations: [
{ /* 0 */ name: “Naranjal”, address: “Av. Túpac Amaru cdra 45 con Av. Chinchaysuyo cdra 1 – Independencia”, coordinatelat: “-11.982013”, coordinatelng: “-77.058663”, },
// more stations here
routes: [
{ name: “Regular A”,
directions: [
{ name: “Central » Naranjal”, days: [1,2,3,4,5,6], hours: [“05:40″,”22:55”], typeOfSchedule: “Intervals”, stations: [0,1,2,3,4,5,6,7,8,9,10,11,15,16,17,18], },
// more directions here
] // more routes here

If you understand the previous block, ¡Congratulations!, you can build your own version for a transportation system in your city, or a app for a transportation company that goes over many cities in your region or country.

Even more, imagine that instead of a transportation app you want to do an app for a franchise of fast-food restaurants, or police stations, or just business with many offices. You can remove the routes section and reuse the app code for the new business.

The code is already published in GitHub / juaneladio / metropolitano, but if it’s very complicated for you you just can download the zip file from here.

What’s next?

About the app, it comply with the minimum requirements, but if you have new ideas you can propose them in the Issues section at GitHub.

And maybe, just maybe, we will have another Peruvian transportation app based in this one 😉 .