Construyendo aplicaciones Cordova para Firefox OS

2 Noviembre, 2014 22:19 por

Esta es una traducción del artículo original publicado en blog de Mozilla Hacks.

Actualización: Además de la integración con Cordova descrita a continuación, Firefox OS ahora es compatible con la versión 3.5 de Adobe PhoneGap.

Cordova es un proyecto de código libre de la Apache Foundation proporcionando un conjunto de APIs de dispositivo para permitirle a los desarrolladores de aplicaciones web móviles acceder a las funciones nativas del dispositivo—como la cámara o el acelerómetro — desde JavaScript. Las aplicaciones HTML5 pueden ser empaquetadas como aplicaciones nativas a través del framework, y disponibles para ser instaladas desde las tiendas de aplicaciones de las plataformas compatibles, incluyendo iOS, Android, Blackberry, Windows Phone – y ahora Firefox OS. Cordova también también es el software base en el producto de Adobe, PhoneGap.

En los últimos meses, Mozilla ha estado trabajando con el equipo de Cordova para integrar Firefox OS en el framework de Cordova, haciendo posible liberar aplicaciones Cordova en la plataforma Firefox OS. Aunque este es un proyecto en marcha, una funcionalidad significante está disponible ahora con la versión 3.4 de Cordova. En este artículo describiremos cómo usar estas nueva funciones.

Creando y construyendo una aplicación Firefox OS en Cordova

El sitio de Cordova explica cómo instalar el software. Ten en cuenta que el procedimiento de instalación requiere Node.js y puede ser ejecutado desde la línea de comando.

$ sudo npm install -g cordova

Una vez que Cordova esté instalada, una aplicación puede ser construida con el comando create de Cordova. (Los parámetros para el comando están descritos en la documentación de Cordova enlazada anteriormente).

$ cordova create hello com.example.hello HelloWorld

Esto creará un directorio llamado hello que contiene el proyecto y la aplicación web básica en el directorio hello/www. Para producir una aplicación para Firefox OS, la plataforma adecuada necesita ser agregada con lo siguiente:

$ cd hello
$ cordova platform add firefoxos

Con alguna de las otras plataformas, por lo general, ejecutarías un comando de construcción en esta etapa para producir el resultado para la plataforma. Ya que Firefox OS es un sistema operativo basado en HTML5, no es necesario una etapa de compilación para procesar la aplicación. El único paso requerido es una sentencia de preparación para empaquetar la aplicación.

$ cordova prepare firefoxos

Esos son los pasos básicos para generar una aplicación para Firefox OS simple desde un proyecto Cordova. El resultado para el proyecto será localizado en el directorio hello/platforms/firefoxos/www.

Depurando la aplicación

Con la mayoría de otras plataformas Cordova usarías los comandos para emular o ejecución para probar la aplicación. Con Firefox OS, necesitas usar el Administrador de Aplicaciones, que es la herramienta principal para depuración y pruebas una aplicación Firefox OS. La herramienta ofrece muchas capacidades incluyendo depuración de JavaScript y edición en vivo del CSS mientras tienes conectado un dispositivo.

El enlace anterior explica cómo instalar e iniciar el Administrador de Aplicaciones. Una vez que el Administrador de Aplicaciones está ejecutándose, puedes hacer click al botón Agregar Aplicación Empaquetada y seleccionar el directorio hello/platforms/firefoxos/www de tu aplicación y precionar el botón Abrir.

Administrador de Aplicaciones

Esto agregará la aplicación básica al Administrador de Aplicaciones. Te darás cuenta que los íconos no están presentes. Esto es porque la integración del framework no los provee actualmente y sólo es creado un manifest.webapp simple. Desde aquí puedes actualizar la aplicación o depurarla. Ten en cuenta que entre las actualizaciones debes ejecutar un comando cordova prepare firefoxos ya que este paso empaqueta la aplicación y la pone en el directorio platforms/firefoxos/www. Lo siguiente es una captura de pantalla de la aplicación Cordova Hello World siendo depurada.

Depurador

El Manifiesto de Firefox OS

Las aplicaciones de Firefox OS son esencialmente aplicaciones HTML5 que son descritas por un archivo de manifiesto. Este archivo de manifiesto apunto a los artefactos como íconos, página de inicio, etc. que serán usados por la aplicación. Además, el manifiesto controla los niveles de privilegios y las API específicas de dispositivo que son necesarias por la aplicación. La documentación del archivo manifiesto están disponibles en la MDN.

Con la integración por defecto en Cordova, se crea un manifiesto genérico y es localizado en el directorio platforms/firefoxos/www. En la mayoría de casos, esto no será suficiente, ya que tendrás, al menos, que proveer de íconos a tu aplicación. El administrador de aplicaciones se quejará si la aplicacion no contiene, al menos, un ícono de tamaño de 128×128 píxeles. Esto no te prohíbe probar tu aplicación, pero es requerido para subir tu aplicación al Firefox Marketplace. El manifiesto puede ser creado con un siempre editor de texto o puedes modificar el manifiesto en el Administrador de Aplicaciones. Un ejemplo de manifest.webapp es mostrado a continuación.

{
    "name": "Mi aplicación",
    "description": "La descripción de mi aplicación va aquí",
    "launch_path": "/",
    "icons": {
        "128": "/img/icon-128.png"
    },
    "developer": {
        "name": "El nombre de tu organización",
        "url": "http://your-homepage-here.org"
    },
    "default_locale": "en"
}

Asegúrate que el manifiesto sea creado o copiado dentro del directorio project/www. Posterior al comando cordova prepare, se reemplazará el manifest autogenerado con un manifiesto específico para tu aplicación.

Código de inicio

Cuando creas una aplicación Cordova, el código de inicio generado incluye archivos index.html, css/index.css, img/logo.png y js/index.js. El código en index.js es iniciado en index.html con algo como esto.

<script type="text/javascript">
    app.initialize();
</script>

La función initialize esencialmente establece el lanzador para el evento onDeviceReady. Lo que significa que el framework de Cordova está localizado y listo. El código generado es suficiente para Firefox OS, a menos que quieras implementar una aplicación privilegiada. Las aplicaciones privilegiadas son aplicaciones firmadas por el Marketplace que requieren el uso de API más sentitivas – por ejemplo, Contacts API. Mira la documentación de las aplicaciones empaquetadas para más información. Para aplicaciones privilegiadas, código como este viola las restricciones CSP porque el uso de la etiqueta script en línea. Para evitar esto, remueve el script en línea e inicializa la aplicación usando un evento window.onload en el archivo js/index.js.

Aplicación de ejemplo

Para probar y depurar la integración Cordova/Firefox OS hemos desarrollado una aplicación de ejemplo. Esta aplicación está disponible en GitHub. Y muestra el uso de los complementos específicos para dispositivos. Las imágenes y códigos en las siguientes secciones fueron tomadas de la aplicación de ejemplo. Si quieres verificar el código funcionando, primero crear un proyecto Cordova y verifica el código dentro del directorio project/www. Luego, puedes ejecutar cordova prepare firefoxos para empaquetar la aplicación. Ejecuta y depura como lo describimos anteriormente en este artículo.

API de dispositivo

Cordova usa una arquitectura de complementos para implementar API de dispositivos, como el Acelerómetro, Geolocalización o Contactos. Estas API son muy similares a las Web API y Web Activities de Firefox OS y están documentadas en el sitio web de Cordova. A continuación están los complementos actuales implementados para Firefox OS y una corta descripción de cómo puedes incluirlos en tu aplicación. Siempre puedes ver el estado actual del desarrollo del complemento para la plataforma Firefox OS verificando Jira en el sitio web de Apache.

Notification API

La API de notificación es usada para alertar al usuario de tu aplicación y es implementada en dos complementos: org.apache.cordova.dialogs y org.apache.cordova.vibration. Actualmente hemos implementado las funciones alert, confirm prompt y vibrate. Para usar esta funcionalidad, agrega los complementos a tu proyecto con los siguientes comandos:

$ cordova plugin add org.apache.cordova.dialogs
$ cordova plugin add org.apache.cordova.vibration

Para obtener le adecuado estilo de las cuadros emergentes en Firefox OS, necesitarás agregar el archivo notificaction.css a tu proyecto. Después de agregar los complementos de diálogos, cambia el directorio project/plugins/org.apache.cordova.dialogs/www/firefoxos y copia el archivo notification.css a tu carpeta project/www/css. Enlaza el archivo CSS en el elemento head de index.html

<link rel="stylesheet" type="text/css" href="css/notification.css" />

Ahora, ya puedes hacer uso de las funciones de notificación.

function onPrompt(results) {
    alert("Seleccionaste el número del botón "
        + results.buttonIndex
        + " e ingresaste " + results.input1);
}
 
navigator.notification.vibrate(500);
navigator.notification.prompt(
    'Enter Name', // mensaje
    onPrompt, // función para invocar
    'Prompt Test', // título
    ['Ok', 'Exit'], // etiquetas de los botones
    'Doe, Jane' // texto por defecto
);

Aviso Firefox OS

Compass API

La API de brújula está implementada usando el complemento org.apache.cordova.device-orientation. Este complemento implementa las funciones getCurrentHeading y watchHeading de la brújula. Para usarla simplemente ejecuta el comando plugin add:

$ cordova plugin add org.apache.cordova.device-orientation

Una vez que el complemento está agregado, puedes usar las funciones para obtener o ver la dirección o para obtener la información de la brújula.

function onSuccess(heading) {
    var element = document.getElementById('heading');
    myHeading = (heading.magneticHeading).toFixed(2);
    console.log("Mi dirección  = " + myHeading);
}
 
function onError(compassError) {
    alert('Compass error: ' + compassError.code);
}
 
var options = {
    frequency: 500
};
 
watchID = navigator.compass.watchHeading(onSuccess, onError, options);

Brújula

Accelerometer API

Se accede al acelerómetro usando el complemento org.apache.cordova.device-motion que le da al desarrollador acceso a los datos de aceleración en las direcciones x, y y z. Este complemento implementa las funciones getCurrentAcceleration y watchAcceleration.

Para usar estas funciones, agrega el complemento devide-motion a tu proyecto ejecutando el siguiente comando.

$ cordova plugin add org.apache.cordova.device-motion

Luego, puedes monitorear los valores de aceleración usando un código similar a esto:

var options = {
    frequency: 100
};
watchIDAccel = navigator.accelerometer.watchAcceleration(onSuccess, onError, options);
function onSuccess(acceleration) {
    var acX = acceleration.x.toFixed(1) * -1;
    var acY = acceleration.y.toFixed(1);
    var acZ = acceleration.z.toFixed(1);
    var vals = document.getElementById('accvals');
    var accelstr = "&lt;strong&gt;Accel X: &lt;/strong&gt;" + acX + "&lt;br&gt;" + "&lt;strong&gt;Accel Y: &lt;/strong&gt;" + acY + "&lt;br&gt;" + "&lt;strong&gt;Accel Z: &lt;/strong&gt;" + acZ;
    vals.innerHTML = accelstr;
}
function onError() {
    alert('¡No se pueden recuperar los datos del acelerómetro!');
}

También puedes monitorear los eventos de orientación del dispositivo y obtener valores alpha, beta y gamma como:

function deviceOrientationEvent(eventData) {
    //inclinación izquierda y derecha
    var alpha = Math.round(eventData.alpha);
    //adelante hacia atrás - negativo atrás, positivo adelante
    var beta = Math.round(eventData.beta);
    //roll left positive roll right neg
    //balance a la izquierda positivo, a la derecha negativo
    var gamma = Math.round(eventData.gamma);
    console.log("beta = " + beta + " gamma = " + gamma);
}
window.addEventListener('deviceorientation', deviceOrientationEvent);

Acelerómetro

Camera API

Esta API de la cámara es usada para obtener una imagen desde la galería o desde la cámara del dispositivo. Esta API está implementada en el complemento org.apache.cordova.camera. Para usar esta característica, agrega el complemento a tu proyecto.

$ cordova plugin add org.apache.cordova.camera

En la implementación de Firefox OS de este complemento, la función getPicture lanzará una WebActivity que permite al usuario seleccionar de dónde será obtenida la imagen.

El código, similar al siguiente, puede ser usado para ejecutar la función getPicture:

navigator.camera.getPicture(function (src) {
    var img = document.createElement('img');
    img.id = 'slide';
    img.src = src;
}, function () {}, {
    destinationType: 1
});

Contacts API

La API de contactos es usada para crear u obtener contactos del dispositivo y está implementada en el complemento org.apache.cordova.contacts. Para accede a esta característica, ejecuta el siguiente comando:

$ cordova plugin add org.apache.cordova.contacts

Las aplicaciones que acceden a los contactos debe ser privilegiadas con el permiso apropiado establecido en el archivo manifest. Ver la sección anterior “El manifiesto de Firefox OS” en este artículo para entender cómo crear un archivo manifiesto personalizado para tu aplicación. Para esta API, necesitarás agregar los siguientes permisos al manifiesto:

"permissions": {
    "contacts": {
        "access": "readwrite",
        "description": "creates contacts"
    }
}

Mira la documentación sobre el manifiesto para los accesos específicos correctos. Además, necesitarás cambar el tipo de aplicación a privilegiada en el manifiesto.

"type": "privileged",

Una vez que el manifiesto haya sido cambiado, puedes agregar contactos con código como el siguiente:

// crear un nuevo objecto de contacto
var contact = navigator.contacts.create();
var name = new ContactName();
name.givenName = fname;
name.familyName = lname;
contact.name = name;
contact.save(onSuccess, onError);

Contactos

Geolocation API

La API de geolocalización es usada para obtener los valores de localización, tiempo y velocidad desde la unidad GPS del dispositivo y está implementada en el complemento org.apache.cordova.geolocation.device.

$ cordova plugin add org.apache.cordova.geolocation

Puedes obtener la latitud, longitud y una marca de fecha y hora usando esta API en Firefox OS, pero esto requiere agregar un permiso al archivo manifiesto. Mira la sección anterior “El manifiesto de Firefox OS” en este artículo para entender cómo crear un archivo manifiesto personalizado para tu aplicación.

"permissions": {
    "geolocation": {
        "description": "Señalización de la localización del usuario"
    }
}

Agregar este permiso hace que la aplicación muestre una alerta al usuario para permitir obtener los datos del GPS. Tú puedes usar getCurrentPosition para leer el GPS una vez o watchPosition para obtener una actualización basada en intervalo.

var onSuccess = function (position) {
    console.log('Latitud: ' + position.coords.latitude + '\n' +
        'Longitud: ' + position.coords.longitude + '\n'); 
};
function onError(error) {
    console.log('Error obteniendo los datos del GPS');
}
navigator.geolocation.getCurrentPosition(onSuccess, onError);

Geolocalización

Únetenos

Este artículo cubrió algunas de las bases de la nueva integración de Firefox OS y Cordova. Nosotros continuaremos para agregar más API de dispositivos al proyecto, así que quédate atento. Si estás interesado en trabajar en la integración o necesitas soporte para un complemento de dispositivo específico, por favor contáctanos en Stack Overflow bajo la etiqueta firefox-os o en #cordova en Mozilla IRC.

The following two tabs change content below.
Ingeniero de Sistemas y Computación. Desarrollador PHP. Mozilla Peru. Chamilo LMS Developer.

Compartir artículo:

  • ¡Participa!

    Firefox Friends »
    Agrega botones de Firefox en tu sitio web y comparte tu amor por Mozilla Firefox.
    Armada alucinante »
    Ayuda a otros usuarios en Twitter.
    Colabora con la comunidad »
    En Mozilla lo importante son las personas. Descubre cómo puedes colaborar.

    Boletín Firefox

    Suscríbete al boletín de novedades de Firefox.

  • Descargas

    Descarga los programas de Mozilla.

    Lo más visto

    cc-by-sa