Cómo generar y escanear códigos QR en Cordova

Our Code World

Los códigos QR son uno de los más tipos de código de barras más populares hoy en día, con la habilidad de codificar hasta 4296 caractéres.

Un códigos QR es un código de barras de 2D cómo puedes ver en la imágen anterior. Los códigos QR cumplen diferentes funciones y usos, por ejemplo el rastreo de productos, identificación de un objeto, administración de documentos, marketing en general, compartir URLs, rastreo de paquetes y muchas cosas más.

Requisitos

Generación de códigos QR

Para crear códigos QR vamos a usar el plugin jQuery.qrcode que te permite generar códigos QR por medio del DOM usando un tag canvas. Escribimos un articulo anteriormente acerca de cómo crear códigos QR usando jquery en este artículo. Si no eres fanático de jQuery, puedes usar la libreria qrcode.js que no requires jQuery.

jQuery QR Code es un plugin de jQuery para la generación de códigos QR de manera independiente en el explorador web. Te permite añadir facilmente códigos QR a tus aplicaciones web. Es completamente independiente así que no necesitará ninguna librería externa aparte de jQuery, pesa menos de 4Kb luego de su minificación (no ejecuta llamadas externas a servidores). Este plugin está basado en una libreria de QR de multiples lenguajes, el wrapper de jQuery hace su integración con javascript sencilla. Hay una versión de este plugin (la original llamada qrcode.js), sin embargo si tu sitio usa el protocolo https, el plugin no funcionará como debido. La versión de jQuery no tiene este problema, por lo tanto puedes usarlo sin preocupacioens acerca del protocolo.

Lector de códigos QR

Necesitamos acceder a la cámara del dispositivo para poder escanear un código QR (lo que significa que dependemos si o si de código nativo), por suerte ya hay un plugin que se encargará de todo eso por ti. Para escanear códigos QR vamos a usar el plugin phonegap-plugin-barcodescanner que te permite usar la cámara de tu dispositivo para usar un código QR. Ejecuta el siguiente comando en tu consola de comandos (donde cordova esté disponible) para agregar el plugin a tu proyecto:

cordova plugin add phonegap-plugin-barcodescanner

El plugin de phonegap barcodescanner (documentación aquí) va a interpretar los códigos QR. Este plugin soporta las siguientes plataformas:

  • Android 
  • iOS 
  • Windows (Windows/Windows Phone 8.1 and Windows 10) 
  • Windows Phone 8 
  • BlackBerry 10 
  • Browser

Así que a trabajar!

Leer un código QR

Antes de comenzar, debes saber que este plugin soporta más tipos de códigos de barra:

 cordova.plugins.barcodeScanner.scan(
      function (result) {
          alert("Un código de barras ha sido escaneado \n" +
                "Resultado: " + result.text + "\n" +
                "Formato: " + result.format + "\n" +
                "cancelado: " + result.cancelled);
      }, 
      function (error) {
          alert("No se pudo escanear: " + error);
      }
 );

Así que para filtrar por códigos QR, debemos usar el siguiente código por ejemplo:

cordova.plugins.barcodeScanner.scan(
   function (result) {
        if(!result.cancelled){
               // En este caso solo queremos que procese código QR
               if(result.format == "QR_CODE"){
                    var value = result.text;
                    // Contenido del código QR
                    console.log(value);
               }else{
                  alert("Ops, se escaneo un código pero al parecer no es QR");
               }
        }else{
          alert("El usuario se ha saltado el escaneo.");
        }
     },
     function (error) {
          alert("Ha ocurrido un error: " + error);
     }
);

Despues de colocar este código como acción de un click en un botón, el escaner de código QR comenzará y mostrará algo similar a lo siguiente en tu dispositvo:

Scanner qr cordova phonegap

Que te diviertas !

Esto podría ser de tu interes

Conviertete en un programador más sociable