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…

 

 

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.

 

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

Phonegap: error “The connection to the server was unsuccesful”

Todos los que desarrollamos para Android en Phonegap nos hemos encontrado con este error alguna vez u otra:

Error "unsuccessful connection to the server"

Este error se debe a que se supera el tiempo de espera de carga de la primera url, que por defecto son 2 segundos. Si el ADT o la máquina o el proceso es lento, se cumplen esos dos segundos y salta este error u otro parecido.
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

Cómo configurar Cordova 3 para trabajar en entorno Android

PhoneGap / Cordova: ¿qué es?

PhoneGap es un framework que te permite crear aplicaciones únicas para múltiples plataformas móviles. Está basado en HTML5, de manera que la aplicación que creamos funciona como una página web corriendo en un servidor local. Esto hace que podamos utilizar la misma aplicación en un iOS, un Android, una Blackberry, etc.

Para crear estas aplicaciones no es necesario más que saber diseñar webs. Incluso en esta parte no es necesario ser tampoco un experto: los múltiples frameworks se encargan de las funcionalidades, como la creación de las páginas (HTML5 Boiler, por ejemplo), la gestión del Look and Feel y de la navegación (jQuery Mobile, entre otros), etc. Por ello, la parte más difícil de Phonegap es, quizás, el primer contacto, es decir, la instalación. En este tutorial os acompañamos en este primer paso hacia le mundo del HTML5 en móviles.

Para el problema de la nomenclatura PhoneGap / Cordova podéis ver esta entrada del blog oficial. Continue reading