Cómo implementar QRs en aplicaciones web / chillerlan php-qrcode

En el desarrollo de aplicaciones añadir QRs se vuelve muy útil para poder intercambiar información entre diferentes dispositivos y tipos de aplicaciones, el artículo será abordado en PHP, un ejemplo sencillo para añadir una URL en nuestro QR, a pesar de ser un ejemplo básico sirve para comprender cómo usarlo, sin más preambulo, comencemos.

Requerimientos

Antes de tener en cuenta los ejecutables requeridos, importante mencionar que el sistema operativo es Windows.

  • Apache
  • PHP 8.4.4
  • Composer

En qué casos usar los códigos QR en nuestras aplicaciones

En casos donde principalmente se busque conectar un dispositivo con otro mediante un hipervinculo a una página web para completar un proceso. “Una imagen dice más que 1000 palabras” y sin lugar a duda tomar una foto es más sencillo que buscar cómo mandarte un link, compartirte una url según el dispositivo puede ser un reto, si se trata de un celular a otro tal vez basta con un WhatsApp o enviartelo por correo, pero la dificultad sube si pasamos de computadora a celular, de televisión a celular, e incluso entre celulares dependiendo qué tan actualizados están o el sistema operativo qué tienen. En estas complicaciones es donde un QR puede unir 2 dispositivos para abrir ese enlace y puedan vincular la información entre ellos para poder visualizar información y completar formularios.

QR con chillerlan php-qrcode

chillerlan php-qrcode es una dependencia PHP que podemos descargar directo en este link o con composer, abrimos nuestra terminal de Windows, nos posicionamos en el proyecto, creamos una carpeta a la cual nombraremos php-qrcode y nos posicionamos en esta carpeta (Cambia prueba por el nombre de tu proyecto):

cd c:/xampp/htdocs/prueba/php-qrcode/

Después ejecutamos el siguiente comando:

composer require chillerlan/php-qrcode

Si todo sale bien se descargarán los archivos requeridos de la dependencia php-qrcode.

Son solo 3 líneas muy simples, llamado de librerías, definición de url e impresión de la imagen, pero hay que tener en cuenta que la estamos generando desde el backend, lo que quiere decir que nos falta la interacción el frontend.

c:/xampp/htdocs/prueba/qr.php

<?php

require_once "php-qrcode/vendor/autoload.php";
$url = "https://dfhash.com";
echo (new chillerlan\QRCode\QRCode)->render($url);

?>

Para el ejemplo del frontend colocaré los fragmentos específicos, aclaro que uso JQuery, en el siguiente código creamos el contenedor del QR.

c:/xampp/htdocs/prueba/qr.html

<div id="divQR"></div>
<script src="qr.js"></script>

En siguiente código hacemos una petición a qr.php la respuesta la imprimimos en el div.

c:/xampp/htdocs/prueba/qr.js

$.get("qr.php", function (src) {
    $("#divQR").html(`<img src="${src}">`)
})

Conclusión

El artículo ha sido muy breve, sin embargo ayudará un poco a crear un QR de prueba, este blog seguirá en edición para agregar ejemplos de visualización de información y apertura de formularios. Espero este post les sea de utilidad y estaré al tanto de cualquier comentario, gracias por su tiempo.

Comments

No comments yet. Why don’t you start the discussion?

Deja tus comentarios