Event Listeners en Cordova para Android y iOS

Al empezar una aplicación de Cordova una de las primeras cosas a tener en cuenta son sus event listeners, relacionados con el ciclo de vida de una app. Se trata de unos pocos eventos que conviene tener en cuenta, especialmente cuando tenemos que conservar cambios o estados al pasar nuestra aplicación a segundo plano (porque entra una llamada o porque el usuario aprieta el backbutton) y al volver a primer plano.

Así que examinemos brevemente estos event listeners:

Relacionados con el Ciclo de Vida

deviceready

el evento esencial, marca cuando Cordova está cargada y preparada para accederse, para evitar que la parte del Javascript sea llamada antes de que esté accesible en el DOM. Una vez se dispara este evento, el sistema ya escucha nuestra programación.

pause

se dispara cuando una aplicación pasa a segundo plano o background (ver especificaciones particulares para iOS). Es especialmente importante para guardar estados o datos importantes que no queramos que el usuario pierda.

resume

se dispara cuando una aplicación pasa a primer plano (ver especificaciones particulares para iOS)

Relacionados con los Botones (sólo Android)

backbutton

sobrescribe el comportamiento por defecto del botón de ir atrás

menubutton

sobrescribe el comportamiento por defecto del botón de menú

searchbutton

sobrescribe el comportamiento por defecto del botón de buscar

Ejemplos

function writeConsole() {
 console.log("DEVICE READY");
 document.addEventListener("pause", onPause, false);
 document.addEventListener("resume", onResume, false);
 document.addEventListener("backbutton", onBackKeyDown, false);
 document.addEventListener("menubutton", onMenuKeyDown, false);
 document.addEventListener("searchbutton", onSearchKeyDown, false);
 cordova.plugins.email.isAvailable( function (isAvailable) {
 console.log("EMAIL PLUGIN AVAILABLE");
 });
}
function onPause() {
 console.log("ON PAUSE");
}
function onResume() {
 console.log("ON RESUME");
}
function onBackKeyDown() {
 console.log("ON BACK KEY DOWN");
}
function onMenuKeyDown() {
 console.log("ON MENU KEY DOWN");
}
function onSearchKeyDown() {
 console.log("ON SEARCH KEY DOWN");
}

Ponemos nuestra llamada a writeConsole() en el ready del documento. El ready dependerá del framework de vista que utilicemos. Por ejemplo, si utilizamos (muy recomendable) ionic, lo deberíamos poner en el $ionicPlatform.ready:

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    if(window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    }
    if(window.StatusBar) {
      StatusBar.styleDefault();
    }
    writeConsole()
  });
})

Más información en la página oficial de Cordova.

 

Crear juegos para móvil con HTML5: Construct 2

Hoy en día decir ‘móvil’ en el mundo de las nuevas tecnologías es decir ‘negocio’ y ‘oportunidades’. Una de las maneras más interesante de empezar es con el estándar HTML5.

En este tutorial os presentamos Construct 2, una herramienta para construir muy fácilmente juegos sobre el canvas de HTML5 (en w3schools tenéis una muy buena introducción al Canvas). Si bien no es la única opción, en nuestra opinión es una de las mejores para iniciarse en el mundo del diseño de juegos.

Este tutorial se basa en nuestra experiencia personal. Hemos trabajado bastante con este programa y, si bien tiene algunas limitaciones, es muy recomendable y nos ha dado bastante ventajas con una curva de aprendizaje muy corta.

 

Construct 2

Construct 2

 

Cuánto cuesta

Hay una versión gratuita con algunas limitaciones (pero suficiente para hacer juegos relativamente complejos) y una de pago con todas las funcionalidades, ideal para juegos de gran complejidad. Nosotros finalmente tuvimos que ir a la de pago, pero pudimos hacer bastante con la gratuita.

Cómo empezar

En la página de tutoriales de Construct 2 encontraréis varios tutoriales de iniciación que os permitirán, en muy poco tiempo, crear un juego clásico de disparos y uno de plataforma.

Tutorial de iniciación

Tutorial de iniciación

 

Cómo funciona

Construct 2 genera un Canvas muy complejo, pero su uso es sencillo: se trata de escoger objetos, arrastrarlos al área de juego, y otorgarles, en el área de comandos, comportamientos, variables, tiempo, física, efectos, comportamientos, interacción con mouse, tacto o teclado, y un largo, largo etc.

Área de gráficos

Área de gráficos

El área de comandos es también muy sencilla de usar, dado que todas las opciones están convenientemente explicadas y listadas. Simplemente hay que saber qué queremos hacer y buscar la opción correspondiente.

Área de comandos

Área de comandos

Qué hago con mi juego

Constuct 2 os da la posibilidad de publicar vuestro canvas en varias plataformas, entre ellas iOS, Android o Facebook, ya sea mediante una siomple exportación o mediante precisas instrucciones.

Plataformas

Plataformas

 

Problemas

Como decíamos en la introducción, este programa no está exento de errores o problemas. El principal es que no siempre respeta una lógica aplastante. Al generar javascript, algunas veces puede traerproblemas con la asincronía, de manera que hay que hacer diversas comprobaciones antes de estar seguro que se respetará el orden de los eventos que hemos marcado. Si bien esto se ha solventado en parte en una actualización reciente mediante el uso de funciones, siguen habiendo problemas. Otro porblema es la incapacidad casi total de interactuar con el códigogenerado, dada su complejdiad. En definitiva, es un programa que a los programadores con experiencia puede llegar a irritar bastante.

Actualizaciones y comunidad

Dos puntos a favor: las actualizaciones son muy diversas y se generan a menudo, con incidencia casi nula en los proyectos en marcha. Por otra parte, la comunidad que crea con este programa es muy activa en la creación de plugins y en la participación en foros y creación de tutoriales.

 

Plugins en Phonegap: desarrollo de Plugins para Cordova 2.5

 

Plugins en Phonegap

Los plugins en Phonegap (o Cordova) son el puente para conectar nuestra aplicación Phonegap con la plataforma nativa del dispositivo (ya sea Android, iOS, Blackberry, Windows Phone, etc.). Los plugins para lograrlo se componen de:

-una interface en Javascript común a todas las plataformas (en este ejemplo SamplePlug.js)
-la llamada desde el HTML (en este ejemplo, inserta en index.html)
-implementaciones nativas propias de cada plataforma (en este caso Android, el archivo Echo.java)

Continue reading

Cómo crear tu Perfil de Desarrollador de Android

El perfil de desarrollador de Android: un proceso sencillo

Crear tu perfil de desarrollador de Android es un proceso sencillo pero cuyas particularidades pueden dar pie a temores o desconfianzas. En esta guía hacemos hincapié en cada uno de los pasos para que no haya lugar a dudas.
Continue reading

Phonegap: Cómo interactuar con los eventos nativos

Eventos nativos y Phonegap

Aunque las aplicaciones de Phonegap funcionan como una web view independiente, para que trabajen como auténticas aplicaciones móviles necesitan interactuar con los procesos y sistemas nativos. Los más claros ejemplos de estos eventos nativos son usos como el botón hacia atrás, la apertura de otra aplicación quedando la nuestra en el background, los botones de volumen, etc.

Este es un pequeño apunte no para explicar nada, sino para señalar que existe esta posibilidad y cómo usarla.
Continue reading

Cómo crear un layout básico para un proyecto PhoneGap con jQuery Mobile

En este pequeño tutorial se os muestra un ejemplo básico de layout con jQuery Mobile. Es sencillo, pero no debemos olvidar los dos apartados que debemos tener siempre en cuenta: una buena configuración y una buena comprensión de la arquitectura. En este tutorial abordamos ambas cosas.

jQuery Mobile: configuración

Id a http://jquerymobile.com/download/ y bajaos el código en .zip (a no ser que queráis utilizar Content Distribution Network (CDN), aunque no es recomendable si no estamos seguros de tener siempre internet).
Continue reading