Creando una aplicación Cronometro para Firefox OS

Posted by in Firefox OS

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

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

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

Instalando App en FirefoxOS

Pulso en Actualizar, y ya me aparece el icono del cronómetro dentro de Firefox OS.

Cronometro en FirefoxOS

Cronometro en FirefoxOS

Pulso en el icono, y se accede a la aplicación de cronómetro:

Cronometro en FirefoxOS

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

Desinstalar app en FirefoxOS

Buscamos los Permisos de las aplicaciones:

Permisos de apps en FirefoxOS

Permisos de apps en FirefoxOS

Y localizamos la aplicación:

Desinstalar app en FirefoxOS

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

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!

Google+ Comments - Comentarios Google+