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 una web app con Cordova y Ionic utilizando la cámara

Una de las ventajas de utilizar Cordova es la facilidad con la que podemos utilizar muchas de las características de los móbiles, como cámara, geolocalización, agenda, contactos, etc. La ventaja de utilizar Ionic es la facilidad con la que Angular.js (aunque no utilicemos ngCordova) interactúa con los plugins de Cordova y nos permite utilizarlos. Veamos nuestro ejemplo con la cámara en Android.

Paso 1 – Entorno de desarrollo

Instalamos el entorno de desarrollo, con Cordova y Ionic. Si no lo tenéis ya instalado, podéis consultar nuestro tutorial sobre cómo instalar Cordova y Ionic.

Paso 2 – Creación de la app

Creamos una web app vacía Ionic:

$ ionic start miCameraApp blank

Vamos al directorio:

$ cd miPrimeraApp

Le añadimos la plataforma Android y hacemos el build.

A continuación importamos el proyecto a Eclipse y empezamos a trabajar.

Paso 3 – Instalación del plugin

Volvemos a la consola y en el directorio de la app, instalamos el plugin:

$ cordova plugin add org.apache.cordova.camera

Paso 4 – HTML

Añadimos al HTML básico preparado por Ionic nuestro botón para tomar la foto y un tag img en el que mostrar la última foto tomada:

<ion-content>
    <button ng-click="tomaFoto()" class="button button-block button-primary">Foto!</button>
    <img ng-src={{lastPhoto}} style="max-width: 100%" />
</ion-content>

Al hacer click en el botón ejecutará el método tomaFoto() de Angular.js.

Paso 5 – app.js (Angular)

Abrimos el fichero app.js, en www\js, y añadimos al final de todo el documento, fuera de todas las llaves, el siguiente controlador:

.controller('MainCtrl', function($scope, Camara) {
    $scope.tomaFoto = function() {
        Camara.tomaFoto().then(function(imageURI) {
            $scope.ultimaFoto = imageURI;
        }, function(err) {
            console.err(err);
        }, {
            quality: 75,
            targetWidth: 200,
            targetHeight: 200,
            saveToPhotoAlbum: false
        });
    };
})

Este controlador llama a un servicio angular.js creado por nosotros y que nos devuelve un objeto Camara, que nos permite utilizar la cámara del teléfono. Este servicio lo creamos en otro archivo que crearemos nosotrosahora, services.js, y que debemos cargar cuando se cargue este módulo starter de angular.js. Así, añadimos starter.services a la definición del módulo:

angular.module('starter', ['ionic', 'starter.services'])

IMPORTANTE: añadimos también el controlador al body del html:

<body ng-app="starter" ng-controller="MainCtrl">

Paso 4 – la factoría de Cámaras

Creamos un nuevo fichero services.js en el mismo directorio que app.js, www\js, y añadimos la factoría de Cámaras, que es donde Angular interactúa con el plugin de Cordova:

angular.module('starter.services', [])
.factory('Camara', ['$q', function($q) {
    return {
        tomaFoto: function(options) {
            var q = $q.defer();
            navigator.camera.getPicture(function(result) {
                q.resolve(result);
            }, function(err) {
                q.reject(err);
            }, options);
            return q.promise;
        }
    }
}]);

IMPORTANTE: no olvidéis añadir la referencia a services.js en el had de vuestro index.html:

 <script src="js/services.js"></script>

Final

A partir de aquí podemos jugar con esas fotos, pero eso ya son otros plugins…

 

 

Como instalar Ionic para trabajar con Cordova en entorno Android

Recientemente ha saltado con fuerza a la cyber-palestra un framework para mobile apps que une las ventajas de jQuery Mobile y las de Bootstrap junto con los avances en programación web de la mano de Angular.js. Hablamos de Ionic.

Ionic Framework Logo

Ionic Framework

Si bien su getting started es muy claro y sencillo, hemos creado esta pequeña continuación de nuestro tutorial sobre la instalación y configuración de Cordova 3 porque consideramos que en breve esta será la manera de trabajar con Cordova 3.

Pasos 1-3

Corresponden a la instalación de todo el entorno Android y Java. Son los pasos 1 a 3 de nuestro mencionado artículo sobre la instalación y configuración de Cordova 3.

En cuanto al IDE de desarrollo, podemos optar por el Eclipe ADT que aparece en nuestro tutorial, o podéis probar el flamante, aunque todavía en fase beta, Android Studio.

Paso 4

Queremos trabajar con Cordova utilizando Ionic y Angular, de manera que instalaremos ambos a la vez. Abrimos la consola y escribimos:

$ npm install -g cordova ionic

De hecho van tan unidos que a partir de la instalación de ionic, vamos a hacer las tareas de Cordova en su CLI mediante el comando ionic.

Paso 5

Creamos nuestra primera app. Ionic ofrece algunas plantillas de base para empezar. Algunas con elementos que probablemente utilicemos, y una vacía.

Nos situamos en la carpeta de neustro workspace (el comando de ionic creará por nosotros la carpeta del proyecto) y escribimos:

$ ionic start "nombre de la app" "plantilla"

Así, si queremos iniciar una app vacía:

$ ionic start miPrimeraApp blank

Si queremos iniciar una nueva app con tabuladores:

$ ionic start miPrimeraApp tabs

 

Si queremos iniciar una con menú lateral:

$ ionic start miPrimeraApp sidemenu

 

Paso 6

No olvidemos que queremos trabajar con Cordova y Ionic, pero también con Android, de manera que tenemos que añadir también al proyecto la plataforma Android y hacer un build. Para ello nos siatuamos en la nueva carpeta (en este caso miPrimeraApp):

$ cd miPrimeraApp

Añadimos la plataforma Android:

$ ionic platform add android

Lo mismo haríamos con su equivalente ios. Para Windows Phone podéis consultar este link al foro de Ionic.

Hacemos build:

$ ionic build android

Y ya podemos deployar. Con emulate para emulador o run para dispositivo:

$ ionic emulate android
$ ionic run android

Paso 7

Para trabajar con Ionic podemos utilizar cualquier editor de texto, como nuestro preferido Sublime 3, o el más caro pero al parecer más adecuado para javascript y preferido por muchos desarrolladores de Angular WebStorm.

En todo caso, para trabajar con Android sí queremos el mencionado Eclipse ADT o el Android Studio. Para ver cómo cargamos en nuestro Eclipse esta primera aplicación Cordova con Android, lo abrís desde el Eclipse como un Nuevo Proyecto Android desde Código Existente, tal y como se ve en nustro artículo sobre Córdova 3.

Y hasta aquí. ¡Buena suerte, y a disfrutar de este nuevo framework!

 

Cordova Error: please install android target 17 (the Android 4.2 sdk)

Este error surge cuando preparamos nuestro proyecto Cordova desde consola y no tenemos las APIs de Android que requiere nuestro proyecto. En el caso de nuestro micro-tutorial es el 4.2 (API 17, es decir android target 17), pero podría ser cualquiera.

Para solucionarlo debemos poner android en la misma consola y nos saldrá el Android SDK Manager (que encontraréis también en la instalación). Desde allí podremos instalar lo que nos haga falta.

Android SDK Tools

Android SDK Tools

Recordad que el Android SDK y el proyecto Cordova de Apache no son lo mismo, de manera que configurar una cosa no significa que la otra reaccione.

 

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