Hace casi dos años, Mozilla anuncio “Boot to Gecko” (B2G), un proyecto cuyo objetivo primario era proporcionar un sistema operativo centrado en la web y que fuera además independiente, en el cual la plataforma preferida (de hecho la única) para el desarrollo de aplicaciones en HTML5. En esencia, este sistema operativo se habría llenado con un vacío que impedía que los desarrolladores crearan verdaderas aplicaciones nativas.

FirefoxOS.2

Este anuncio fue recibido con un sentido real de excitación por parte de la comunidad de desarrolladores para móviles. Firefox OS, como seria pronto nombrado apropiadamente, cautivó y emocionó a los desarrolladores web debido a la adopción de HTML5 por parte de Mozilla. Sin más elecciones entre Objective C y Java -HTML5 sería un primer ciudadano. En teoría, con ajustes menores a aplicaciones de HTML5, los desarrolladores podrían portar estas aplicaciones a Firefox OS sin dedicarle mucho tiempo (al igual que desarrolladores de PhoneGap han estado haciendo para otras plataformas).

A pesar del excitamiento (y miedo inherente) de desarrollar un nuevo OS, Mozilla está encarando una batalla cuesta arriba para labrarse incluso un nicho en el mercado de las plataformas móviles actualmente dominantes (como son iOS y Android). Combinado con la presencia pesada de Microsoft (Windows Phone 8) y BlackBerry (RIM), Mozilla claramente tiene que trabajar duro. Igual de importante, Mozilla tiene que convencer a los desarrolladores móviles y web existentes de por qué deberían desarrollar para Firefox OS dados estos obstáculos.

Firefox OS

Por el momento, ignoremos el “por qué” deberíamos desarrollar para Firefox OS y en su lugar enfoquémonos en el “como”.

WebAPIs y Actividades Web

El siguiente es un ejemplo simplificado del post de Introduccion a las Actividades Web, de Robert Nyman. Algunos de los aspectos más intrigantes de Firefox OS incluyen las WebAPIs y las Actividades Web. Una WebAPI es esencialmente una interface de JavaScript que le permite a tu aplicación acceder a funciones nativas (administrar contactos, enviar mensajes SMS, enviar notificaciones, y más). Una Actividad Web es una WebAPI. Específicamente, una Actividad Web permite que tu aplicación delegue una actividad a otra aplicación en el dispositivo. Por ejemplo, si quieres permitirle al usuario el tomar una imagen desde su dispositivo, puedes llamar a la Actividad web “pick” y especificarle un arreglo de tipos de datos como a continuación:

Este código produce el siguiente dialogo.

Web Activity

Muchas de las WebAPIs y Actividades Web tienen los manejadores de eventos onsucess y onfail, los cuales pueden ser utilizados para recibir las respuestas del API. Por ejemplo, en el siguiente código se hace uso del ejemplo de WebAPI que se encuentra más abajo:

Desarrollando tu primer App

Hay dos tipos de aplicaciones (a las cuales Mozilla llama Open Web Apps) que se instalan en Firefox OS: una aplicación hospedada y una aplicación empaquetada.

Una aplicación hospedada es esencialmente un sitio web hospedado en un servidor central, pero ejecutado dentro del contexto de aplicación. Los usuarios necesitan están online para acceder a los recursos de la aplicación (HTML, imágenes, y más) y los desarrolladores están limitados en el alcance de llamadas al WebAPI. Se pueden ver las diferencias entre llamadas regulares y privilegiadas al WebAPI; para más información, revisa el artículo: Usando WebAPIs para hacer la capa web más capaz. Sin embargo, como un sitio web común, los desarrolladores tienen más control sobre las actualizaciones de la aplicación, ya que los recursos aun están siendo hospedados. Este artículo no se enfoca en aplicaciones hospedadas, pero te recomiendo leer más acerca de estas siguiendo a Robert Nyman en Mozilla.

Una aplicación empaquetada es similar a una aplicación hospedada (aun es HTML5) pero tiene acceso a todas las WebAPIs y es descargada e instalada en el dispositivo (similar a iOS y Android). Por defecto, se espera que estas aplicaciones funcionen sin requerir de una conexión a internet para ello. Incluso aunque la aplicación viva en el dispositivo, es posible para una aplicación empaquetada el actualizarse a si misma. Se puede usar también el Firefox Marketplace para enviar actualizaciones a los usuarios.

Suficiente plática. Construyamos desde cero una aplicación (empaquetada) para Firefox OS; esta aplicación permitirá que al usuario saber cuánto “jugo” queda en su batería.

Creando una Aplicación Empaquetada

Copia el siguiente código y guárdalo como index.html

Ahora, pega el siguiente código de JavaScript dentro de un nuevo archivo llamado app.js y guárdalo dentro de una carpeta llamada js:

Asegúrate de haber descargado jQuery y colocar el archivo dentro de la carpeta js (actualiza el nombre del archivo en el HTML).

¿Que hemos aprendido? No mucho todavía. Tenemos una aplicación en HTML5 que hace un simple llamado a un WebAPI, pero ahora necesitamos hacer algunas adiciones relativamente menores.

Durante el proceso de desarrollo de la aplicación, usa el Simulador de Firefox OS. Este es una extensión gratuita de Mozilla (para el navegador Firefox por supuesto) que permite simular el ambiente de Firefox OS para ambos tipos de aplicaciones.

Creando el archivo manifiesto

Todas las aplicaciones Firefox (hospedadas y empaquetadas) necesitan este archivo. Un archivo manifiesto es simplemente un archivo JSON que contiene los metadatos de la aplicación. Esta es una versión sencilla del manifiesto de una aplicación:

Guarda este archivo como manifest.webapp en el mismo directorio de index.html. (Y si, se tiene que usar exactamente el mismo).

Nota. Si se están utilizando WebAPIs que solo están disponibles para aplicaciones empaquetadas, se necesitaran especificar permisos adicionales en el archivo manifiesto.

Probando la aplicación en el simulador

Si aún no lo has hecho, instala el simulador. Una vez instalado, veras el siguiente dashboard:

Dashboard

Si no vez este dashboard, ve al menú Web Developer en Firefox y selecciona el simulador.

Ya que estamos trabajando una aplicación local, selecciona el botón Add Directory y selecciona el directorio que contiene el archivo manifiesto. Automáticamente, el simulador se iniciara y mostrara la pantalla de desbloqueo (siguiente imagen).

Nota. Si no ocurre algo, no te preocupes. Puede que tengas un problema con tu archivo manifiesto, o tu manifiesto puede estar en el directorio equivocado.

Pantalla de Desbloqueo

Da clic y arrastra la pequeña flecha y entonces da clic en el icono de bloqueo para desbloquear el simulador. Hay numerosas aplicaciones pre-instaladas disponibles, así que da clic y arrastra un par de pantallas para encontrar tu aplicación. Si seguiste mis recomendaciones respecto a las convenciones, tu aplicación tendrá un icono predeterminado llamado Check Batery. Da clic al icono y !ve tu primer aplicación en acción!

Check Battery

Archivando y validando tu aplicación

Ahora, creemos un archivo ZIP con la aplicación completa (incluyendo el archivo manifiesto). Archiva los archivos, pero no archives el folder contenedor. Asegúrate de haber nombrado a tu archivo manifiesto: manifest.webapp.

Además, Mozilla proporciona un sitio que te permite validar tu aplicación, el sitio es Validate an App. Te recomiendo tomar este paso para evitar problemas potenciales, por si hay un error de sintaxis en tu archivo manifiesto o una violación de seguridad debido al uso inapropiado de un WebAPI.

Creando un mini archivo manifiesto

Para hacer esta una aplicación empaquetada, se debe crear otro archivo manifiesto. Este es uno pequeño. Asegúrate de que tu información de desarrollador en este archivo, es idéntica al del otro manifiesto. Este archivo es primeramente una guía de distribución de tu aplicación -si se está utilizando Firefox Marketplace o si se permite la aplicación desde tu propio servidor. Estos detalles se cubren con más detalle en la siguiente sección.

Guarda este archivo como mypackage.webapp, o utiliza una convención similar.

Distribución de la aplicación

Una de las grandes cosas de Firefox OS es que se pueden distribuir las aplicaciones desde un servidor propio, aunque para más visibilidad se puede utilizar el Firefox Marketplace. Si quieres permitir que un usuario instale una aplicación desde tu sitio, realiza estos dos pasos sencillos.

  1. Utiliza la característica de detección para asegurarte que el cliente usa un dispositivo Firefox OS:

  1. Indícale al usuario que instale tu aplicación:

Las aplicaciones que se descargan desde Firefox OS no requieren este código.

Ten en cuenta que, al mismo tiempo en que vas escribiendo, el simulador solo soporta la instalación de aplicaciones a través del dashboard, lo cual significa que no se pueden instalar desde el mismo instalador.

Apps empaquetadas Privilegiadas contra Apps Certificadas contra Apps Planas

Los desarrolladores de aplicaciones empaquetadas deberían de ser conscientes de que realmente hay tres tipos diferentes de aplicaciones empaquetadas.

  • Una Aplicación Privilegiada es una aplicación que se somete a un proceso de aprobación en el Firefox Marketplace (justo como en las tientas de Apple y Google). Esto es muy importante en aplicaciones que usan WebAPIs sensibles (como el manejo de contactos).
  • Una Aplicación Certificada es solo para funciones criticas del dispositivo (como el realizar llamada), por lo tanto, la vasta mayoría de los desarrolladores pueden ignorar este tipo de aplicación empaquetada.
  • Una Aplicación Plana no está sometida bajo el mismo proceso de revisión, pero está limitada en el número de llamadas que puede hacer a un WebAPI.

Hemos ido a través de la creación de una aplicación para Firefox OS, y ahora volveremos al por que querrías desarrollar una aplicación para Firefox OS.

¿Porque considerar el desarrollar para Firefox OS?

Dados todos los obstáculos inherentes al desarrollar para un nuevo sistema operativo móvil, el por qué deberíamos, como desarrolladores web/móviles, en mi opinión es porque:

  • Debido a que es de Mozilla
  • No tenemos nada que perder

Aun es Mozilla

Muchos de nosotros hemos crecido con Mozilla y, incluso aunque el navegador Firefox puede estar mostrando su edad, el mismo Mozilla continua como un jugador masivo en la web abierta. Considera también la posibilidad de que Firefox OS asuma un importante rol al incrementarse la extensa venta de dispositivos Android de bajo costo (alrededor de todo el mundo). Muchos desarrolladores móviles estarían de acierto en que los dispositivos Android 2.x (que no pueden ser actualizados) no harían nada excepto beneficiar a la comunidad en su conjunto. ¿Cuál es mi punto? Mozilla no es una compañía de “vuelo nocturno” y tiene un tiro legitimo haciendo este trabajo.

No tienes algo (bueno, no mucho) que perder

¿Porque no desarrollar para Firefox OS? Como ya hemos visto, puedes tomar una aplicación existente de HTML5 y con un poco de código convertirla en una aplicación para Firefox OS. ¿Lo estoy simplificando? Si, por supuesto, pero no puedes acercarte a decir la misma cosa para muchas otras plataformas móviles (excepto utilizando PhoneGap).

A dónde ir desde aquí

Firefox OS es nuevo. Muy nuevo. Es importante sin embargo considerar el potencial de alcance de esta plataforma. Si estas interesado en aprender más, te recomiendo seguir a David Walsh y a Robert Lyman, quienes han lanzado una aplicación increíblemente útil, Boilerplate

Hay que ver como juega en el mercado, pero en la opinión de este desarrollador, es mejor estar atento al potencial de una aplicación de Firefox OS.

En Activ podrás aprender todo sobre HTML5 en nuestro curso de HTML5 para Móviles

La versión original de este artículo está publicada en Adobe Devnet bajo licencia Creative Commons, fue traducido y adaptado en nuestro blog por Jesús Macedo.