¿Generador de códigos QR?

Subscribe to my newsletter and never miss my upcoming articles

El otro día me encontraba en el sitio Product Hunt . Y de repente, un proyecto llamo mi atención de cierta manera. Era un generador de códigos QR, más bien, una API. En la misma, con un simple GET al dominio y el texto que querías transformar obtenías tu imagen para usar donde quisieras.

Hasta el momento todo bien, una API normal. Pero me percaté de algo, esta API no tenía ninguna ruta especificada o algún parámetro en la URL. Se encontraba de esta manera:

https://do.miniodela.api/TEXTO_A_TRANSFORMAR

Y eso era algo que no había pensado, personalmente. Justo después me puse a pensar: "Pero, no servirá de nada para imágenes, links, etc.". Esto pues en la mayoría de páginas te dan varias opciones para generar un código (no hablo de la personalización del mismo). Me puse a investigar y me encontré con que un código QR es, básicamente, una cadena de caracteres codificados en forma cuadrados blancos y negros.

Justo después de tener esa información me di cuenta de que, en efecto, la mayoría de páginas que ofrecen servicios para entregar un código QR simplemente te ofrecen el transformarlos a texto y darte la imagen. Entonces me dije a mi mismo: "Eh, no debe ser tan difícil, voy a intentarlo".

Lo primero que hice fue buscar alguna librería que los generara, yo solo quería hacer una simple API para entregar los códigos, no el proceso completo. Entonces encontré qrcode una librería NPM que da varias opciones para generar el código QR. Entonces comencé un proyecto con fastify para tener una configuración simple y rápida de una API.

Posteriormente, configuré la ruta principal para poder realizar la traducción de texto a código QR, pero me encontré con un problema. Al momento de agregar una URL a la misma del API fastify me respondía con un error 404, esto porque tomaba en cuenta las diagonales de una URL (http:// por ejemplo).

Entonces tuve que adaptar un poco la función para que sea utilizable en la ruta principal y cuando se envíe un error 404 desde el servidor.

async function handler(request, reply) {
      let valueToQR = null;

      if (request.url !== '/') valueToQR = request.url.replace('/', '');
      else return reply.sendFile('index.html');

      const qrBuffer = await QRCode.toBuffer(`${valueToQR}`, {
         errorCorrectionLevel: 'H',
         margin: 0.5,
         width: 500,
      });

      reply.type('image/png'); // Para mostrar la imagen en lugar de descargarla
      reply.send(qrBuffer);
   }

Con esta función, usándola como funcionamiento para las rutas en "/" y en los casos de error 404, puedo manejar el retorno de imágenes QR. Ya que con fastify puedo obtener lo que aparece justo después del dominio. Este valor me sirve como parámetro en la función de generación de códigos QR y voilà. Todo texto que se encuentre después del dominio será transformado en código QR. Esto exceptuando los casos donde defina rutas específicas.

Después a esta configuración puedo hacer lo que quiera con el proyecto. Personalmente decidí hacer una pequeña interfaz gráfica para que sea un poco más amena la presentación. Actualmente se puede acceder al proyecto por medio del siguiente enlace: Generador de códigos QR. Igualmente les dejo un enlace al repositorio, en caso de que quieran ver más a profundidad el código fuente.

RubenConde/url-shortener - GitHub

Ir al repositorio

Con este proyecto también probé por primera vez Tailwind CSS y me informé más sobre las configuraciones de una PWA. Pero eso es tema para otros post. Me gustaría que me dieran su opinión del proyecto y de igual forma su feedback en caso de que haya.

No Comments Yet