Introducción

Ya vimos anteriormente cómo podemos generar códigos de barras con AngularJS en este post. Hoy veremos cómo generar códigos QR. No sé la diferencia entre esos 2, pero creo que los QR pueden guardar más información y su lectura es más fácil.

En fin, no vamos a ver las diferencias, vamos a ver cómo generar códigos QR utilizando AngularJS.

Incluir Librerías

Necesitamos QRCode y Angular-QR. El proyecto original está aquí, en GitHub. Para utilizar la librería, podemos utilizar bower, o incluir directamente los scripts, así:

<script src="https://cdn.rawgit.com/janantala/angular-qr/master/lib/qrcode.js" type="text/javascript"></script>
<script src="https://cdn.rawgit.com/janantala/angular-qr/master/src/angular-qr.js" type="text/javascript"></script>

Debemos incluirlos en ese orden, y obviamente antes de ellos debemos incluir a AngularJS. La versión mínima que pide es la 1.

Registrar módulo en AngularJS

Una vez que ya incluimos las librerías, al instanciar nuestra app debemos decirle que usaremos este módulo.

angular
.module("TuApp", ["ja.qr"]); // Registramos a ja.qr

Con ello ahora sí podemos utilizar la directiva.

Generar código QR

Sólo tenemos que utilizar la directiva qr. Le podemos pasar algunas opciones como el texto que será codificado, nivel de corrección, etcétera. Pero para algo básico, se puede hacer algo como lo de abajo.

Con esto, generamos un código QR con el texto que pusimos entre comillas. Aquí un plunker demostrando el funcionamiento. Si quieres puedes escanear el código QR 🙂

Al escanearlo, a mí me aparece esto:

Veamos ahora más opciones

Código QR dependiendo de variable en scope

Hace un momento utilizamos una cadena, pero no era una variable perteneciente a nuestro scope. Ahora vamos a hacer que imprima una cadena dependiendo de una variable. Se modificaría así:

Lo único que cambió fue que hicimos que dibujara una variable de nuestro scope. Aquí un plunker:

Código QR dependiendo de input

Lo que falta ahora es ligar nuestro código QR a un input, para que se genere el código conforme escribamos. Me gustó mucho el resultado, ya que el código QR se genera conforme escribimos, y va cambiando su forma, algo muy entretenido.

Agregaríamos un input y lo ligaríamos. Quedaría así:

Y un plunker para comprobar nunca cae mal:

Combinando directivas de AngularJS con el generador

Vamos a ver cómo combinar el generador con ng-repeat y ng-show.

Ng-repeat

Podemos repetir códigos dependiendo de un arreglo. Por ejemplo, en mi controlador he declarado un arreglo de cadenas. Luego, en la vista hago un ng-repeat. El div que he agregado es para separar los códigos QR.

Plunker:

Genial, estamos repitiendo códigos. Ahora lo combinaré con un ng-show…

Ng-show

Para hacer esto más divertido, repetiremos los códigos con ng-repeat y daremos la opción de ocultarlos.

Si el checkbox está marcado, el código se muestra. Si no, pues no. También he modificado el arreglo, ahora guarda objetos en lugar de cadenas.

Otras opciones

Podemos cambiar el tamaño del Código QR con el atributo size, el nivel de corrección con correction-level, el modo de entrada que puede ser alfanumérico, numérico, etcétera con input-mode. Las opciones están en la página de GitHub, aquí.

Eso es todo. Cabe aclarar que estos códigos sí son legibles incluso al imprimirlos, acabo de imprimir uno y el resultado es más que satisfactorio. Así que con un poco de trabajo podemos generar códigos QR fácilmente, gratis y a nuestro modo.

Nota importante: por defecto, la librería crea el código QR en un elemento canvas. Si queremos que lo renderice a una imagen, es decir, a un elemento img (para imprimir o cosas de esas) debemos establecer el atributo image=”true”.