Mi primer webapp (En FirefoxOS)

Este post es un resumen de la charla, introductoria a FirefoxOS, que dí en el evento Hackaton Express.

Pueden ver los slides de la misma desde: http://tehsis.github.io/slides/

El título, posee FirefoxOS entre parentesís, debido a que, en realidad, las cosas que vamos a ver deberían funcionar en distintos browsers y/o tecnologías. FirefoxOS, como plataforma, es el medio por el cual Mozilla provee un stack completo para poder desarrollar este tipo de apps basadas en tecnologías web, asegurando la implementación de los estandares propuestos por las llamadas WebAPI.
Esto es lo que más me atrae de esta plataforma, pero vamos a dejar de lado esto y vamos a ver que es lo nuevo (y no tan nuevo) que nos ofrece.

Web…¿Apps?

Este concepto no es, para nada, nuevo. De hecho, desde la primer versión del iPhone (antes, quizá) podiamos tener sitios web que se guardaban como si fuesen una aplicación y su experiencia de usuario intentaba simular a las aplicaciónes nativas. Sin embargo, tanto iOS, Android y el resto de los dispositivos (Sacando, problablemente, algunas excepciones no muy populares) ofrecián una API limitada en comparación con la ofrecida por el SDK nátivo de la plataforma.
Ahora, vamos a llevar el concepto de webapp un paso más allá del simple hecho de tener “un sitio web con un acceso directo y que se vea sin los botones del navegador” a una aplicación que el usuario puede instalar, es independiente y puede funcionar offline.

Instalables

El usuario, puede instalar las webapps como cualquier otra. Para esto, la aplicación debe contar con un archivo denominado “manifest”, el cual le indica a nuestro “sistema operativo” algunos datos de la aplicación, como ser, el nombre, la descripción, los iconos, los permisos que requiere y algunos más.

Acá, podemos diferenciar 3 tipos de apps de acuerdo a los permisos que poseen.
Las primeras, que pueden ser “hosteadas”, es decir, servidas a través de un servidor web (valga la redundancia) o empaquetadas, en donde todo el contenido se encuentra en un “paquete” (un archivo zip, en el caso de FirefoxOS), pueden acceder a un numero limitado de recursos, como ser, la vibración del teléfono o las notificaciones.
El segundo tipo, son las privilegiadas. Que poseen acceso a recursos más “peligrosos” como la conexión de red o el Bluetooth y requieren estar aprobadas por el MarketPlace para funcionar.

Por último, tenemos las certificadas, las cuales vienen preinstaladas en el dispositivo, por ejemplo la aplicación para realizar llamadas.

Independientes

Cada app es su propio mundo. Esto quiere decir, entre otras cosas, que la aplicación A no puede acceder a las cookies de la aplicación B. Aún si estas cookies comparten el mismo dominio.

Para un ejemplo más claro, pensemos en una app que se identifique con Facebook. Por más que otra app también lo requiera, deberá hacerlo de forma independiente ya que no puede leer las cookies (y ningún otro recurso) de la otra (Mención aparte merecen las denominadas web activities).

Devices API

Esta es la parte que más me emociona de las webapps. Ya que gracias a ellas podemos interactuar de forma más cercana con nuestro dispositivo. Podemos, por ejemplo, hacer vibrar nuestro celular, usar las notificaciones del sistema, reaccionar a los cambios de luz, conocer nuestro nivel de bateria ó si el dispositivo esta enchufado y un largo etcetera. Cuestiones que antes se encontraban relegadas únicamente a las aplicaciones “nativas”.

Para un pequeño ejemplo, si tenes una notebook o un celular con sensor de luz, probá tapar la cámara frontal (o bien, apaga la luz)

En fin, podríamos estar un buen rato viendo ejemplos de webAPIs. Son fáciles de usar y, por la novedad que implica que nuestro browser sea “consciente del entorno” siempre resulta interesante verlos. Pero para eso, mejor veamos la documentación oficial y pasemos a la acción.

Desarrollando mi primer webapp

Para dejar las cosas un poco más en claro vamos a hacer, paso a paso, una pequeña webapp.

La idea, sera hacer una sencilla app que nos avise una vez transcurra una x cantidad de segundos.

Como dijimos desde un principio, no necesitamos otra cosa distinta a lo que usualmente manejamos en desarrollo web. De modo que, para empezar, vamos a crear tres archivios: index.html, alarm.js y alarm.css

Empecemos por index.html. Nuestra app va a contar de un elemento input para colocar los segundos y un boton que pondrá la alarma a sonar.

Como vemos, no hay nada extraño en este archivo. Quizá, haga falta prestar atención al atributo type del input, el cual es de tipo “number”, esto hara que ademas de permitir validaciones, si accedemos desde un celular, solo veremos un teclado númerico en vez de un teclado completo

Pasemos ahora al javascript, en el que nuevamente no veremos muchas sorpresas:

Simplemente, escuchamos el click al boton, el cual genera un timeout que muestra una alerta pasado el tiempo que ingresamos en el input.

Ahora bien, esto no tiene nada de novedoso. De hecho, casi todo esto podría funcionar, incluso, en Internet Explorer 6 (Bueno, en realidad no, ya que no teniamos addEventListener) y no hace uso de nada que haga que nuestro browser use el dispositivo sobre el cual esta funcionando.

Vamos entonces a hacer que, al pasar el tiempo en lugar de mostrar el alert, muestre una notifiación (lo cual hara uso de las notificaciones del sistema operativo sobre el cual esta funcionando) y vibre.

Nuestra, en extremo sencilla, aplicación ya va tomando forma. Pero para cumplir con la definición de webapp que vimos al principio, necesitamos que pueda instalarse. Para eso, lo primero que debemos hacer es crear un archivo manifest para nuestra app. Este archivo, escrito en JSON, le dara al sistema operativo, información sobre la aplicación, tal como el nombre de la misma, la descripción, datos del desarrollador, los permisos que necesita y otra serie de parametros. Un posible manifest para nuestra app podría ser:

Para instalarlo, vamos a hacer uso del objeto mozApp, el cual nos provee lo necesario para instalar la aplicación, reaccionar ente errores, etc. Como notaran por el prefijo moz, este solo funciona en Firefox.

Para hacer aún más facil esto, vamos a usar una pequeña libreria que arme. La misma se encargara de controlar si la aplicación puede, o no, ser instalada sin problemas o si ya se encuentra instalada en el sistema. La pueden conseguir de https://github.com/tehsis/webinstaller/archive/master.zip y la forma de usarla es bastante sencilla:


La libreria, ademas de manejar la instalación en sí, se encarga de colocar clases en el body de acuerdo al estado de la aplicación, forma que podamos decidir si mostrar o no el boton para instalarla o cualquier otro mensaje que se nos ocurra (más info en: https://github.com/tehsis/webinstaller).

Como ven, dentro del manifest, estoy especificando un ícono (de 64×64), el mismo lo podemos crear siguiendo estos guidelines: http://www.mozilla.org/en-US/styleguide/products/firefoxos/icons/
Este sera usado para acceder a nuestra aplicación, una vez instalada.

Si vamos ahora a nuestra aplicación y hacemos click en el botón de Instalar, Firefox nos preguntara si deseamos hacerlo. Si confirmamos, podremos acceder a la aplicación como si se tratase de una más (Vale aclarar que esto funcionará en Firefox ya sea para desktop, Android y/o FirefoxOS)

Por último, solo queda agregar algo de estilo a nuestra aplicación. ¡Y listo! Ya tenemos nuestra primer webapp que, ademas, podemos instalar.

Alarm

Pueden bajar el ejemplo completo desde https://github.com/tehsis/alarmexpress

Herramientas para desarrolladores

Seguramente, en el desarrollo de nuestra aplicación, especialmente si es una un poco más complicada que esta, necesitemos realizar pruebas y/o resolver bugs. Para ello, Mozilla ofrece diferentes herramientas que vamos a mencionar sin entrar en mayores detalles:

La primera, son las Herramientas de desarrollo de Firefox las cuales podemos acceder presionando “Ctrl + shift + I” en Linux y Windows ó “⌘ + shift + I” en OSX,

Estas herramientas, cuentan con la clasica consola Javascript, en la cual podemos ejecutar comandos, un depurador (debugger, para los amigos), visor de red (A partir de Firefox 23), editor de estilos y profiler.

Mediante el debugger, podemos deternos el algún punto especifico de nuestra aplicación, examinar las variables, así como el contexto, ejecutar paso a paso, etc.

Firefox Devtools

Algo interesante de Firefox, es que podemos conectar el debugger con Firefox para Android o bien con un dispositivo con FirefoxOS y hacer uso del mismo de forma remota. Es bastante sencillo y funciona muy bien. Solo debemos ir a about:config (desde la barra de direcciones) y activar el flag devtools.debugger.remote-enabled. Esto hara que se nos habilite la opción “connect” dentro de “Herramientas -> Herramientas de desarrollo” en Firefox (La úbicación puede variar, según el sistema operativo) luego debemos activar esta posibilidad en nuestro dispositivo. Para más información, les dejo un árticulo al respecto: Desarrollo web móvil – Inspeccionando webs en dispositivos moviles.

Segundo, vamos a nombrar al emulador de FirefoxOS, el cual se instala mediante una extensión de Firefox

Esta extensión, nos permite instalar nuestra app, indicandole el manifest, o bien cargandola como una app empaquetada a través del navegador de FirefoxOS o bien mediante el Marketplace ya que, en definitiva, se trata de un emulador de este sistema y podemos usarlo completamente.

Firefox OS Emulator

En resumen:

  • Una webapp es una app, que hace uso de las tecnologías web, pueden ser instalada por el usario y funcionar offline
  • Gracias a las Devices API, las aplicaciones web ahora pueden ser “conscientes” del dispositivo en el que funcionan y acceder a sus recursos.
  • Para poder dar un empuje a este ecosistema, Mozilla ofrece FirefoxOS como plataforma 100% web. Sin embargo, esperamos que las novedades que incluye en cuanto a programación, esten disponibles en todas las platadormas
  • Para más información, ya sea de FirefoxOS o cualquier tema relacionado al desarrollo web, no dejen de visitar el Mozilla Developer Network ó MDN