Generar Códigos QR con AngularJS y QrCode

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.

angular
  .module("CodigosQR", ["ja.qr"])
  .controller("ControladorPrincipal", ["$scope", function($scope) {
    //Por el momento, nada por aquí
  }]);

<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js" type="text/javascript"></script>
  <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>
  <script src="script.js"></script>
</head>

<body ng-app="CodigosQR">
  <div ng-controller="ControladorPrincipal">
    <qr text="'Hola mundo, desde parzibyte.me/blog'"></qr>
  </div>
</body>
</html>

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í:

angular
  .module("CodigosQR", ["ja.qr"])
  .controller("ControladorPrincipal", ["$scope", function($scope) {
    $scope.texto = "Hola mundo, desde parzibyte.me/blog"
  }]);

<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js" type="text/javascript"></script>
  <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>
  <script src="script.js"></script>
</head>

<body ng-app="CodigosQR">
  <div ng-controller="ControladorPrincipal">
    <qr text="texto"></qr>
  </div>
</body>

</html>

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í:

angular
  .module("CodigosQR", ["ja.qr"])
  .controller("ControladorPrincipal", ["$scope", function($scope) {
    $scope.texto = "Hola, mundo";
  }]);

<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js" type="text/javascript"></script>
  <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>
  <script src="script.js"></script>
</head>

<body ng-app="CodigosQR">
  <div ng-controller="ControladorPrincipal">
    <input type="text" ng-model="texto" />
    <br><br>
    <qr text="texto"></qr>
  </div>
</body>

</html>

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.

angular
  .module("CodigosQR", ["ja.qr"])
  .controller("ControladorPrincipal", ["$scope", function($scope) {
    $scope.codigos = ["123", "Hola", "parzibyte.me"];
  }]);

<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js" type="text/javascript"></script>
  <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>
  <script src="script.js"></script>
</head>

<body ng-app="CodigosQR">
  <div ng-controller="ControladorPrincipal">
    <div ng-repeat="codigo in codigos track by $index">

      <qr text="codigo"></qr>
      <br>
      <br>
    </div>
  </div>
</body>

</html>

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.

angular
  .module("CodigosQR", ["ja.qr"])
  .controller("ControladorPrincipal", ["$scope", function($scope) {
    $scope.codigos = [{
      codigo: "123",
      mostrar: true
    }, {
      codigo: "Hola, mundo",
      mostrar: false
    }, {
      codigo: "https://parzibyte.me/blog",
      mostrar: true
    }];
  }]);

<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js" type="text/javascript"></script>
  <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>
  <script src="script.js"></script>
</head>

<body ng-app="CodigosQR">
  <div ng-controller="ControladorPrincipal">
    <div ng-repeat="codigo in codigos track by $index">
      <qr text="codigo.codigo" ng-show="codigo.mostrar"></qr>
      <br>
      <input type="checkbox" ng-model="codigo.mostrar" />
      <br>
    </div>
  </div>
</body>

</html>

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”.

Estoy aquí para ayudarte 🤝💻

Estoy aquí para ayudarte en todo lo que necesites. Si requieres alguna modificación en lo presentado en este post, deseas asistencia con tu tarea, proyecto o precisas desarrollar un software a medida, no dudes en contactarme. Estoy comprometido a brindarte el apoyo necesario para que logres tus objetivos. Mi correo es parzibyte(arroba)gmail.com, estoy como@parzibyte en Telegram o en mi página de contacto

No te pierdas ninguno de mis posts 🚀🔔

Suscríbete a mi canal de Telegram para recibir una notificación cuando escriba un nuevo tutorial de programación.

parzibyte

Programador freelancer listo para trabajar contigo. Aplicaciones web, móviles y de escritorio. PHP, Java, Go, Python, JavaScript, Kotlin y más :) https://parzibyte.me/blog/software-creado-por-parzibyte/