Cómo empezar a desarrollar para Firefox OS

Desde que llegaron las primeras noticias sobre Firefox OS este nuevo sistema basado en HTML5 querían dejar claro lo fácil que era desarrollar sobre esta plataforma y también destacaba por su arquitectura simple (basada en un núcleo Linux y el motor de renderizado Gecko) y ahora ya está todo lo necesario para empezar a desarrollar accesible para cualquiera que se quiera aventurar con Firefox OS.

Desarrollar para Firefox OS no es solo hacer una página web, por lo que para empezar veremos como probar las funciones que solo podemos usar en móviles con Firefox para Android o con el simulador, como configurar el archivo manifest.webapp en un momento y ver que requisitos de seguridad nos exigen desde Mozilla para las aplicaciones de su nuevo sistema.

Herramientas

Lo primero que tenemos que hacer es disponer de unas cuantas herramientas básicas si queremos probar el correcto funcionamiento de nuestras apps y la correcta interacción con Firefox OS o con el navegador Firefox para Android, aunque no son necesarias ninguna para desarrollar la propia app, para esto solo te hace falta un navegador y que funcione correctamente en el Firefox de escritorio.

Realmente la única diferencia entre una web y una webapp reside en el archivo manifest.webapp, que es el que nos permite instalar la aplicación (si no entramos en aplicaciones de pago o el uso de APIs algo más avanzadas que necesitan derechos adicionales para usarse).

Para simular al sistema completo tenemos el simulador de Firefox OS que es simplemente una extensión de Firefox que se instala al instante y nos proporciona un menú con una lista de las aplicaciones que le añadimos al simulador (que tienen que tener un manifest.webapp válido), que se instalan instantáneamente en Firefox OS, aunque podemos hacerlo de una forma más realista desde el propio sistema de las varias formas que se puede hacer. El simulador incorpora todo lo que tiene cualquier móvil con este sistema, incluidas las APIs de los ajustes, contactos y demás.

Además el simulador tiene, como era de esperar una consola de depuración, pero aún trae más, tenemos también una consola para depurar remotamente cualquier dispositivo móvil con Firefox o Firefox OS.

Otro modo de probar las aplicaciones de una forma más realista si no disponemos de un terminal con Firefox OS es usar Firefox para Android, que nos permite instalar las aplicaciones y acceder a algunas APIs que no podemos usar desde un navegador (como la de la vibración del móvil) y es sobre lo que estoy realizando las pruebas y sobre lo que podréis probar el primer resultado descargando Firefox desde Google Play.

Formas de servir las aplicaciones

Hay dos formas de servir las aplicaciones, que posteriormente podremos validad o enviar al Market place, la primera es la más común y es empaquetar el archivo, simplemente con una compresión zip donde tendremos todos los archivos y el manifest.webapp. Y por otro lado tendremos las aplicaciones alojadas en un servidor web, que proporcionan la comodidad de poderse usar desde cualquier dispositivo y no solo desde Firefox OS, además de que la tienda de aplicaciones será consciente automáticamente de los cambios realizados (leyendo el manifest.webapp), aunque este método tiene una peculiaridad, el manifest tiene que tener un tipo MIME específico, muy simple de cambiar.

Manifiesto de la aplicación

Como ya he comentado el manifest.webapp es algo indispensable para las aplicaciones de Firefox OS y contiene todos los datos de cada app como su nombre, descripción, datos del desarrollador y algunos datos relacionados con la seguridad como desde donde se permite instalar la aplicación o los permisos que se conceden.

Para probar todo esto he creado una aplicación bastante inútil que nos permite "jugar" con la vibración del móvil, paro pensada con una finalidad "seria", como es crear ritmos o efectos con la vibración y que te muestre el código necesario para recrear esa misma vibración con la función del navegador navigator.vibrate().

Podéis coger vuestros Android con Firefox instalado y probarlo, si lo hacéis desde el navegador de escritorio hace exactamente lo mismo que con el móvil, menos... eso de vibrar (es decir, es 100% inútil si no es con un móvil).

Sabiendo de que va la ~~chapuza de~~ app os voy a mostrar el manifest.webapp que tiene.

{
    "version": "1.0",
    "name": "Vibración",
    "description": "Prueba Vibración - Genbeta Dev - Pedro Gutiérrez",
    "launch_path": "/index.html",
    "icons": {
        "16": "/img/icons/logo-16.png",
        "48": "/img/icons/logo-48.png",
        "128": "/img/icons/logo-128.png"
    },
    "developer": {
        "name": "Pedro Gutiérrez",
        "url": "https://www.genbetadev.com"
    },
    "installs_allowed_from": ["*"],
    "locales": {
        "en": {
            "description": "Vibration Test - Genbeta Dev - Pedro Gutiérrez",
            "developer": {
                "name": "Pedro Gutiérrez",
                "url": "https://www.genbetadev.com"
            }
        }
    },
    "default_locale": "es",
    "permissions": {     
    },
    "fullscreen": "true"
}

Es completamente un objeto JSON y contiene información sobre la aplicación y sus desarrolladores y además aspectos de seguridad.

Saltándonos los aspectos básicos nos encontramos con installs_allowed_from que contiene un array con todos los sitios desde donde se puede instalar la app, como medida de seguridad más que nada para evitar instalar cosas que no son accidentalmente (en mi ejemplo he puesto el comodín * por comodidad, pero se puede establecer que se instale desde un dominio completo, un subdominio, una ruta o diferenciando puertos).

El parámetro locales proporciona una información de la aplicación y de los desarrolladores alternativa según el lenguaje y por último está permissions que pese a que no lo he utilizado nos permite especificar el nombre del permiso y la explicación de su uso (además de tener que especificar el permiso) y ya la repararemos más adelante detenidamente.

Ubicación del manifest

El manifest.webapp siempre tiene que estar en la raíz del lugar donde se encuentre la aplicación, ya sea empaquetada o teniéndola en un servidor web, pero en este caso tenemos que tener en cuenta su MIME type, que es application/x-web-app-manifest+json (se decantaron por algo fácil de memorizar) y podemos configurarlo de varias formas.

#Añadir esta línea en .htaccess (en servidor Apache)
AddType application/x-web-app-manifest+json .webapp

#Resolver la siguiente cabecera
Content-Type: application/x-web-app-manifest+json;

#Añadir en mime.types esta línea (en servidor NGINX)
types {
application/x-web-app-manifest+json   webapp;
}

Diseño

Lo vuelvo a recordar: es una página web, ni más ni menos, por lo que hacer el diseño no es nada nuevo para la mayoría, solo que nos recomiendan poner en práctica el Responsive Design (del que ya os hemos hablado ampliamente).

Desarrollo de la aplicación

En esta parte voy a recalcar tres cosas, primero es que tenemos dos tipos de APIs: las Web APIs (como la vibración o el nivel de carga de la batería) y las WebRT APIs (que es necesario tener permiso para usarlas y nos permiten acceder a los ajustes, agenda, contactos y demás). Y otra cosa que tenemos que tener en cuenta para el uso de estas aplicaciones es la seguridad, que para hacer uso de ciertos permisos especiales (como el uso de las WebRT APIs) tiene que cumplir unas directivas básicas.

El sentido de poner en práctica estas medidas es para evitar posibles ataques XSS, inyección de enlaces con código o inyección de HTML. Algunas de estas medidas no permiten que una aplicación valide correctamente con el validador de aplicaciones y algunas otras más simples y menos aprovechables para malos fines nos recomendarán solventarlas, pero no supone un problema.

Las medidas de seguridad son las siguientes:

El código que esté dentro de una etiqueta
dentro del HTML será ignorado.
Las URLs que ejecuten una función JavaScript mediante javascript: serán ignoradas.
Todos los eventos que se ejecuten desde cualquier elemento (como onload, onclick, onfocus...) serán ignorados, en su lugar debemos de usar addEventListener().
La función eval() está desactivada por defecto.
Las funciones setTimeout() y setInterval que pasen las funciones como cadenas de texto en lugar de pasar una función a través de una variable será ignoradas.
Por defecto los datos pasados por URLs (como son texto o imágenes) que se establecen con data: serán deshabilitados.

Además nos recomiendan el uso de https, sobre todo con el archivo manifest.webapp

Ampliación

Hablar sobre como desarrollar en Firefox OS en un solo artículo sería interminable, pero os adelanto unas cuantas cosas que vamos a ir viendo y son necesarias para hacer cosas complejas:

Hacer diseños correctos para las apps (con Responsive Design).
Establecer permisos y hacer uso de las APIs.
Como publicar una aplicación en el Marketplace.
Añadir las funciones de instalación en el dispositivo.
Hacer uso de los métodos de pago y las medidas contra el pirateo de las aplicaciones.
Crear aplicaciones que funcionen sin conexión.

Resumen

Teniendo en cuenta el fuerte apoyo que está teniendo Firefox OS y la facilidad de desarrollar para este sistema no viene mal tener unos conocimientos básicos de la plataforma, por lo que os recomiendo ir siguiendo el avance de la serie.

PD: si probáis la app en Firefox para Android o si sois de los pocos que tienen un móvil con Firefox OS no dudéis en pulsar "Extra" y darle a "Vibrar", demuestra un uso muy poco útil de la vibración del móvil, pero uno que si se le podría dar es el de complementar a un juego o vibrar al recibir notificaciones.

Más información | Introducción a Firefox OS (Mozilla) En Genbeta Dev | Desarrollo en Firefox OS