Logotipo FirefoxOS

Como es bien sabido Mozilla siempre mira por los intereses del usuario (su condición de fundación le permite esta “libertad” pues no tiene accionistas) y en respuesta al panorama de un ecosistema de teléfonos móviles en el que ningún sistema operativo está libre al 100% (en todos existe una gran empresa interesada en que su sistema sea el utilizado) decidió crear un sistema operativo móvil lo más desinteresado posible y para ello han recurrido a lo que mejor saben hacer: la web.

De este modo y utilizando las bondades del HTML5 están desarrollando un sistema que no utiliza nada externo al navegador y de hecho todo lo que se desarrolla técnicamente podría ejecutarse en cualquier otro navegador. En paralelo y gracias a las nuevas necesidades que van surgiendo se aprovechan y se están creando estándares que complementarán al HTML5, las llamadas webAPI (por ejemplo: vibración, contactos…).

Logotipo FirefoxOS

¿Cómo se hace una app para FirefoxOS?

Primero hay que hacer una aplicación HTML5 (ya sabes que eso incluye al CSS y JS).
Haz que funcione sin internet (una calculadora no lo necesita, pero si incluye un conversor de monedas comprueba que esa información la puede utilizar sin conexión usando los datos viejos) ¿cómo hago una app sin conexión?.
Y crea el manifiesto (ver sección en esta misma página) para poder subirlo al Marketplace de Firefox (¿cómo se utiliza el Marketplace?).

Recursos para ahorrar tiempo

Para acelerar la creación de una aplicación existen múltiples herramientas las más recomendadas son:

  • Utilizar las plantillas de Building Firefox OS el único inconveniente es que no disponen de librerías JavaScript pero tu aplicación tendrá un diseño integrado a la perfección con FirefoxOS (y por supuesto funcionará en cualquier otro sitio).
  • Hacer una aplicación con jQuery Mobile tendrá un diseño muy genérico y no seguirá las líneas estéticas de ningún sistema operativo pero a cambio tendrás muchísima documentación escrita pues jQuery es posiblemente la librería más utilizada en la actualidad.
  • Utilizar una alternativa a jQuery para conseguir un diseño más exclusivo y diferenciador. Por ejemplo LungoJS que unido a QuoJS (de los mismos creadores) constituyen una muy alternativa a jQuery. Además al ser un proyecto español encontrarás mucha información en nuestro idioma.

Si utilizas algo fuera de Building Firefox OS es recomendable visitar la guía de estilo de Mozilla, allí nos informan cómo se han de crear las aplicaciones para mantener una uniformidad. Recomendable su visita pues los consejos nos sirven para cualquier sistema operativo: Por ejemplo que si tienes un botón de cancelar de color rojo y lo desactivas éste cambie de color para informar de ese nuevo estado, pero siga teniendo una tonalidad roja.

Creando el instalador

Para hacer el instalador de FirefoxOS hay que tener en cuenta que hay 2 tipos de aplicaciones: hosted (alojadas en una web) y packaged (se instalan desde una tienda de apps). Nos centraremos en las hosted pues las packaged son casi iguales, salvo que el manifiesto tiene otro nombre y los archivos en lugar de estar en un dominio de internet hay que guardarlos en un zip y subirlo a la tienda correspondiente.

El siguiente ejemplo se corresponde con el fichero manifest.webapp que se encontrará en la misma carpeta de inicio de nuestra aplicación.

{
	"name": "La App Definitiva",
	"description": "Una aplicación muy útil.",
	"launch_path": "/app.html",
	"icons": {
		"128": "/imagenes/app_icon_128.png",
		"60": "/imagenes/app_icon_60.png"
	},
	"developer": {
		"name": "IEEEsb-UniOvi",
		"url": "http://ieeesb-uniovi.es/"
	},
	"default_locale": "es",
	"appcache_path": "/cache.manifest",
	"version": "1.0"
}

Es importante que en el archivo cache.manifest se encuentren todos los archivos que se utilizan en la aplicación pues serán los que se copien en el dispositivo durante la instalación (serían los mismos archivos que meteríamos en el archivo ZIP en las aplicaciones empaquetadas).

Una vez creado este archivo es necesario invocar la función: navigator.mozApps.install(); (aquí hay más información y un ejemplo de cómo implementar dicha función).

En la ayuda de Mozilla se explica con más detalle todas las opciones que este manifiesto tiene.

Enlaces interesantes

  • Mini tutorial en 5 pasos para crear una aplicación: PabloYglesias.com
  • Ayuda para desarrolladores de Mozilla: Inglés y Español (contenidos ligeramente diferentes)
  • Zona para desarrolladores del Marketplace de FirefoxOS
  • Ayuda del Marketplace con mini tutoriales para acelerar el desarrollo.