En una entrada anterior sobre Firefox OS os conté sobre cómo escribir los archivos manifest.webapp, que no son sino un archivo con una cadena JSON donde se almacena los metadatos de la aplicación para Firefox OS.
Para ello, nada mejor que utilizar un ejemplo, de un cronómetro.
App Cronometro
Programando el cronómetro
Además del título (header), y del pié de página (footer), en la parte central incluimos dos botones que son los que dan la funcionalidad para iniciar-parar el cronometro, y otro para limpiar los datos. Además, agregaremos otro espacio en la web para ir almacenando los tiempos parciales, que además, son almacenados en localStorage.
Se ha hecho uso de la librería zepto.js en lugar de jQuery, y el código Javascript requiere leer los datos (si existen) de localStorage, cargarlos, y preparar las acciones de iniciar cronómetro, parar, mostrar información, … y poco más. Aparentemente el código para conseguir el cronómetro es sencillo.
Sobre el CSS, hemos aplicado un estilo acorde a www.manejandodatos.es, además de PureCSS como framework para la programación del front-end, sencillo y sin complicaciones.
Sobre los iconos
Aunque parezca un asunto menor, no lo es, pues el icono de nuestra aplicación debe ser importante. Una de las cosas a incluir en el manifest.webapp es la ruta hacia los distintos iconos, así que, nada mejor que reproducir el icono a distintos tamaños.
Yo suelo hacerlos en 16, 32, 48, 60, 64, 90, 120, 128 y 256 pixeles.
Preparando los iconos para Firefox OS
Nota: Debería haber cuidado más los iconos y todo eso, pero cómo es un ejemplo … seguro que lo comprendes 😉
Creando el manifest.webapp
Ahora sólo falta escribir el fichero manifest.webapp, con toda la descripción e información de la app:
{ "name": "MD Crono",<br /> "description": "Manejando datos, por David Trillo Montero",<br /> "launch_path" : "/crono.html",<br /> "icons": {<br /> "256" : "/img/crono256.png",<br /> "128" : "/img/crono128.png",<br /> "120" : "/img/crono120.png",<br /> "90" : "/img/crono90.png",<br /> "64" : "/img/crono64.png",<br /> "60" : "/img/crono60.png",<br /> "48" : "/img/crono48.png",<br /> "32" : "/img/crono32.png",<br /> "16" : "/img/crono16.png"<br /> },<br /> "type": "web",<br /> "developer": {<br /> "name": "David Trillo Montero",<br /> "url" : "http://www.manejandodatos.es"<br /> },<br /> "version": "1.0",<br /> "default_locale": "es"<br />}
Una cuestión muy importante es que la ruta del launch_path es relativa porque no requiere la raiz de la web donde está, pero absoluta en cuanto a directorios a partir de dicha raíz.
Instalando el cronómetro desde App Manager
Es la hora de probar la app en el simulador de Firefox (yo he probado con la versión 1.3), y en Añadir aplicación empaquetada (ubicada en nuestro ordenador local), seleccionamos la ruta en nuestro directorio donde tenemos los ficheros:
Instalando App en FirefoxOS
Pulso en Actualizar, y ya me aparece el icono del cronómetro dentro de Firefox OS.
Cronometro en FirefoxOS
Pulso en el icono, y se accede a la aplicación de cronómetro:
Cronometro en FirefoxOS
Desinstalando la app
Si bien he encontrado varias páginas para instalar, pocas para desinstalar aplicaciones. Para ello, vamos a Ajustes:
Desinstalar app en FirefoxOS
Buscamos los Permisos de las aplicaciones:
Permisos de apps en FirefoxOS
Y localizamos la aplicación:
Desinstalar app en FirefoxOS
A continuación, nos sale las características de la aplicación, y un “bonito” botón para Desinstalar, que en el caso de pulsar, nos pide confirmación antes de proceder.
Desinstalar app en FirefoxOS
En fin, espero que hayais aprendido más sobre cómo preparar y desinstalar aplicaciones en Firefox OS, y que tengais un buen día!