Uso de plugins de Cordova en Ionic - Códigos QR

Alexander A. Ramírez M.

La forma de comunicarse con las funcionalidades del dispositivo, en ionic, es a través de Cordova. En particular hay un wrapper para usar los plugins de Cordova denominado ngCordova.

ngCordova facilita el uso de los plugins desde Angular y está desarrollado por la misma gente que desarrolló ionic.

Vamos a crear un proyecto que use el plugin para la lectura de códigos QR desde una aplicación hecha en ionic.

Primero vamos a iniciar un proyecto ionic con la plantilla blank mediante el comando:

  ionic start QRReader blank
  cd QRReader
  ionic platform add ios 
  ionic platform add android

Entre al directorio QRReader y se va a conseguir con el esqueleto de una aplicación ionic. Ahora ejecute:

  ionic serve -l

De esta manera ya tiene un proyecto funcional sobre el cual vamos a partir para hacer la aplicación que utiliza ngCordova para leer códigos QR desde su aplicación.

Antes de iniciar podemos revisar algunas cosas previas, como por ejemplo los plugins de Cordova que vienen instalados en nuestra aplicación recien generada.

La forma de conocer cuales son los plugins instalados es mediante la línea de comando en la carpeta del proyecto:

  ionic plugin list

Normalmente están instalados los plugins siguientes:

Es importante entender que cuando se utilizan las funcionalidades del dispositivo hay que utilizar los emuladores o los dispositivos reales para probar. Por ejemplo deberíamos conocer la línea de comandos de ionic para aprovechas las funcionalidades que nos ofrece el emulador. Esto se hace mediante la línea de comandos:

  ionic help emulate

Como podemos ver hay dos opciones de interés que nos ayudan al proceso de desarrollo y a entender lo que pasa en la aplicación mediante mensajes en la cónsola. Estas son las opciones -l y -c. Entonces la opción -l usa livereload, lo cual implica que cuando se modifica algún archivo del proyecto este se carga en el dispositivo inmediatamente. La opción -c permite que los mensajes enviados a la cónsola mediante el comando console.log() se impriman en el terminal. Entonces la forma de utilizar el emulador es mediante la línea de comando siguiente:

  ionic emulate android -lc
  ionic emulate ios -lc

Por otra parte la forma de instalar ngCordova es, preferiblemente, mediante bower utilizando la línea de comando:

  bower install ngCordova --save-dev

La opción –save-dev guarda la dependencia en el bower.json. Así que si alguien instala el proyecto sólo debe ejecutar bower install para instalar las dependencias.

Puede fijarse en el directorio “www/lib” y se dará cuenta de que ngCordova está instalado.

En el archivo index.html dentro del directorio www vamos a agregar ngCordova antes de la inclusión de cordova.js.

<script src="lib/ngCordova/dist/ng-cordova.min.js"></script>
<script src="cordova.js"></script>

Ahora vamos a incluir el plugin phonegap-plugin-barcodescanner siguiendo las instrucciones o alternativamente el comando siguiente:

  ionic plugin add phonegap-plugin-barcodescanner

En el cuerpo del index.html vamos a definir el controlador y vamos a crear una lista con un botón para activar el scanner y dos items con el resultado:

<ion-content ng-controller="contentController">
  <div class="list">
    <div class="item" ng-click="scanQRCode()">
      Scan QRCode
    </div>
    <div class="item">
      { { resultText } }
    </div>
    <div class="item">
      { { resultFormat } }
    </div>
  </div>
</ion-content>

Primero vamos a inyectar la dependencia en la definición del módulo principal:

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

Ahora vamos a crear el controlador y definamos en el modelo resultText y resultFormat utilizando la documentación.

.controller('contentController', ['$scope','$cordovaBarcodeScanner', function($scope, $cordovaBarcodeScanner) {
  $scope.scanQRCode = function()  {
    $cordovaBarcodeScanner.scan().then(function(result) {
      $scope.resultText = result.text;
      $scope.resultForma = result.format;
      console.log(result);
    }, function(error) {
      console.log("error happened..!");
      console.log(error);
    });
  };

Ya puede probar la aplicación con el código siguiente:

Este proceso es similar para todos los plugin de Cordova que se pueden utilizar mediante ngCordova.

Espero les sirva.