Categorías: Labs

Soporte para FirefoxOS en Cordova

Introducción a Cordova

Apache Cordova esta formado de un framework y un conjunto de plugins que permite, a los desarrollares de aplicaciones, acceder a componentes nativos de los dispositivos (como la cámara o el acelerometro) mediante javascript.

De esta forma, es posible crear aplicaciones móviles sin código nativo haciendo uso únicamente de tecnologías web (HTML, CSS y Js) y correrlas en distintos sistemas operativos con pocos o casi ningún cambio.

Cordova es la parte central del producto de Adobe conocido como Phonegap, que ha sido liberada y permite ser usada independientemente del mismo.

Este último, ofrece implementación para funcionar con FirefoxOS a partir de su última versión.

Mediante plugins, Cordova nos permite acceder a recursos que normalmente no podríamos utilizar usando tecnologías web en los distintos sistemas operativos móviles, como iOS o Android.

A diferencia de estos últimos, FirefoxOS funciona 100% bajo tecnologías web, por lo que no dependemos de una librería “externa” para lograr esto. El uso de Cordova, sin embargo, nos permite que el mismo código que corramos en FirefoxOS, funcione también en Android, iOS, Windows Phone, etc.

Las API de estos plugins, muchas veces simulan las correspondientes de HTML5 y en otros casos, funcionan de una manera similar. Por lo que no implicará un gran esfuerzo comenzar a utilizarlo.

Introducción al desarrollo con Cordova

Comenzar a trabajar con Cordova es sumamente fácil y poco tenemos que cambiar en nuestro flujo de trabajo habitual para hacer uso de su poder (si es que venimos desarrollando para web, claro).
A continuación, veremos algunos ejemplos de su uso, para más información, echa un vistazo a su excelente documentación oficial.

Cordova, necesita de nodejs para poder ejecutarse, una vez que lo tengamos instalado, hacemos:

$npm -g install cordova

cuando termine, ejecutamos:

$cordova create prueba org.mozilla-hispano.prueba MiAppDePrueba

Esto nos creará una carpeta llamada prueba. En su interior encontraremos el código inicial para comenzar a trabajar en nuestro proyecto. El segundo parámetro, es un identificador para nuestra aplicación, para el cual usamos un estilo de dominio reverso mientras que el tercero, es el nombre que veremos de nuestra aplicación una vez instalada.

Para que nuestra aplicación tenga funcione en FirefoxOS entramos en la carpeta prueba y ejecutamos:

$cordova platform add firefoxos

Esto descargará todo lo necesario para que podamos correr e instalar nuestra aplicación en el simulador o en un dispositivo.

Por último:

$cordova prepare firefoxos

Prepara nuestra aplicación, creando, dentro de la carpeta platforms, un directorio firefoxos en donde se encontrará nuestro proyecto listo para empaquetar, junto con el archivo manifest correspondiente.

Si estuviésemos trabajando sobre otra plataforma, como ser android o ios, aún necesitaríamos construir el proyecto mediante el comando ‘build’ (por ejemplo, cordova build android)
Sin embargo, esto no es necesario en FirefoxOS y ya estamos listos para ver nuestra app.

Cordova - app managerPara ello, vamos a abrir Firefox y ejecutar el Administrador de aplicaciones, abriendo una pestaña nueva y yendo a la URL about:app-manager.

Una vez dentro, agregamos la aplicación que acabamos de crear yendo a la carpeta de nuestro proyecto y luego a platforms -> firefoxos -> www y le damos a aceptar para agregar la aplicación al administrador.

Cordova - App agregadaSeleccionamos la aplicación y veremos una advertencia respecto al atributo “icons” que no se encuentra presente en el archivo manifest. Dicho configuración, fue generada automáticamente dentro del mismo a partir de la información contenida dentro del archivo config.xml ubicado en la raíz del proyecto (el mismo fue generado mediante el comando create de Cordova)

Ahora podemos ejecutarla en el emulador haciendo clic en Iniciar simulador (En caso de no tenerlo instalado, nos aparecerá el botón correspondiente para instalarlo).

¡Listo! Ya tenemos nuestra aplicación para FirefoxOS creada. Ahora podemos inspeccionarla y/o depurarla, haciendo clic en el botón Depurar. Esto abrirá las Herramientas de desarrollador de Firefox enfocadas en nuestra aplicación.

El archivo manifest de Firefox OS

Cordova - Debug appLas aplicaciones para FirefoxOS, están compuestas por tecnologías web (HTML+CSS+JS) y un archivo manifest que describe la misma, indicando su nombre, los iconos que usará y los permisos que requiere para funcionar correctamente.

La integración actual de FirefoxOS en Cordova, creará un archivo manifest sumamente básico y en la mayoría de los casos sera necesario crear uno manualmente.

Si bien el archivo manifest predeterminado nos servirá para probar la aplicación mediante el simulador de FirefoxOS, no podremos enviar la misma al Marketplace. Para esto, debemos escribir uno (podemos tomar como base el que Cordova creó por nosotros) y ubicarlo en la carpeta www del proyecto. Luego, cada vez que corramos cordova prepare, este pisará el creado por Cordova.

Para más información, recuerda visitar la pagina correspondiente a Open web apps manifests en MDN.

Usando plugins de Cordova

Como dijimos, los plugins de Cordova nos permiten acceder a funciones que, normalmente, solo se encuentran disponibles usando las APIs privativas de cada plataforma a través de una interfaz javascript uniforme para los dispositivos sobre los cuales estamos trabajando.

Para usarlos, simplemente debemos buscar el plugin que deseamos dentro del registro de plugins de Cordova o bien, ver la lista de los plugins más comunes, junto con su documentación en el sitio oficial de la documentación de Cordova.

Para agregar un plugin, ejecutamos

$cordova plugin add [Nombre del plugin]

Manos a la obra

Vamos a ver un ejemplo usando el plugin de geolocalización, que nos permitirá entender el uso de plugins y utilizar el manifest para pedir permisos especiales.

Lo primero que haremos, es obtener el plugin mediante:

$cordova plugin add org.apache.cordova.geolocation

Para acceder a los datos de posición del usuario, debemos solicitar permiso, por lo que debemos agregar a nuestro manifest:

"permissions": {
"geolocation": {
"description": "Obtain the current location of the user."
}
}

Luego, dentro de nuestro proyecto (www/js/index.js en la aplicación de ejemplo) simplemente utilizamos los métodos getCurrentPosition (para obtener la ubicación actual) o watchPosition (para quedar escuchando la ubicación)

navigator.geolocation.getCurrentPosition(function(position) {
var latElement = document.getElementById('lat');
var longElement = document.getElementById('long');

latElement.innerHTML = position.coords.latitude;
ongElement.innerHTML = position.coords.longitude;
}, function() {
console.log(‘¡Ocurrió un error!’);
});

Para ver más ejemplos, te recomiendo mirar la aplicación de ejemplo que preparo Mozilla en GitHub, la cual contiene usos de las distintas APIs.
También, puedes mirar el árticulo correspondiente a este tema en el blog de Hacks.

Hay que tener en cuenta que, para asegurarnos que Cordova se cargó completamente, debemos escuchar el metodo onDeviceReady, por lo que es una buena idea, inicializar nuestra aplicación, luego de que este evento sea disparado:

document.addEventListener('deviceready', App.init);

Como nota final, hay que tener en cuenta que, de forma predeterminada, Cordova incluye el código para inicializar la aplicación dentro del archivo index.html:

app.initialize();

Lo cual deberemos moverlo a un archivo js, si queremos que nuestra aplicación sea firmada en el Marketplace con privilegios. Dichas aplicaciones, son aquellas que pueden acceder a datos sensibles del teléfono, como por ejemplo, la agenda de contactos.

Conclusión

Para cerrar y como comentario personal, espero que en el futuro no necesitemos “intermediarios” para poder acceder a estos recursos mediante una API web. Muchos de los problemas que soluciona Cordova, ya fueron resueltos de manera nativa en FirefoxOS o incluso en Firefox para Android.

Sin embargo, aún queda un largo camino para que los principales desarrolladores de sistemas operativos móviles den soporte a las Device’s API “de fabrica” y creo que mediante el uso de herramientas como Cordova, podemos incentivar a que más y más desarrolladores se sumen a crear aplicaciones web y esto empuje a que seamos escuchados.

The following two tabs change content below.
Desarrollador web interesado en la web abierta y (desarrollo de) videojuegos.