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…