∷ ¿y ahora en qué andamos?

Generador de códigos QR facilito con 2 pesos

Estaba buscando un generador de QR online para generar unas URL de un catálogo que debía incluir un número de teléfono y me encontré un sinfín de soluciones online gratis, pero como sabemos nada es gratis, en estos casos tapados de publicidad, y me pregunté por qué no hacer uno mismo y de paso lo dejo por acá, nunca se sabe quién más lo puede necesitar.

La Idea: Un Generador Versátil

Los códigos QR están por todas partes: en envases de productos, tarjetas de presentación y hasta menús de restaurantes. Sin embargo, tener la posibilidad de personalizar lo que quieres que el código haga puede ser muy útil. Mi idea fue crear un generador que, además de ser fácil de usar, permita generar códigos QR para diferentes tipos de datos, desde un enlace web hasta datos de contacto (vCard). Claro que se le puede dar muchas más funciones e incluso jugar con un sinfín de propiedades y personalización. Por el momento el foco está en algo básico y en otras publicaciones retomaré para darle más opciones.

Herramientas Utilizadas

Para construir este proyecto utilicé HTML, CSS y JavaScript. La librería principal para generar los códigos QR es QRCode.js, que facilita enormemente la creación de estos códigos en el navegador sin requerir un backend complejo. Puedes encontrar el repositorio de la librería aquí: QRCode.js en GitHub. El diseño del formulario fue pensado para ser intuitivo, permitiendo al usuario seleccionar el tipo de código QR que desea generar y luego ingresar la información relevante.

Cómo Funciona

El proceso de generación se basa en un sencillo formulario interactivo:

  • Seleccionar el Tipo de Código QR: El usuario elige entre varias opciones como URL, WhatsApp, Teléfono, vCard, Wi-Fi o URL de tienda. Cada tipo de código tiene campos específicos que se muestran dinámicamente en la interfaz.
  • Ingresar los Datos Relevantes: Dependiendo del tipo seleccionado, se muestran distintos campos para completar. Por ejemplo, si el usuario selecciona “Wi-Fi”, se le pedirá el nombre de la red, la contraseña y el tipo de encriptación.
  • Generar el Código QR: Con un clic en el botón de “Generar QR”, el código se crea instantáneamente y aparece en pantalla. El código QR es generado a partir de los datos ingresados, utilizando la librería QRCode.js.
  • Descargar el Código QR: Una vez generado, el usuario puede descargar la imagen del código QR para usarla donde desee.

Código HTML, CSS y JavaScript

Veamos cómo está estructurado el código para lograr este generador de códigos QR:

Estructura HTML

Primero, creamos el HTML básico para la aplicación. Incluye un formulario con opciones que se actualizan dinámicamente según el tipo de QR que el usuario quiera generar.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Generador de Códigos QR Personalizable</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
</head>
<body>
    <h1>Generador de Códigos QR Personalizable</h1>
    <div id="qr-form">
        <label for="qr-type">Tipo de QR:</label>
        <select id="qr-type">
            <option value="url">URL</option>
            <option value="whatsapp">WhatsApp</option>
            <option value="tel">Teléfono</option>
            <option value="vcard">vCard</option>
            <option value="wifi">Wi-Fi</option>
            <option value="store">URL de Tienda</option>
        </select>

        <div id="input-fields"></div>

        <button id="generate-btn">Generar QR</button>
    </div>

    <div id="qrcode"></div>
    <button id="download-btn">Descargar QR</button>
</body>
</html>

En este código, el formulario #qr-form permite al usuario seleccionar el tipo de QR que desea generar, y luego se muestran los campos de entrada relevantes en #input-fields.

Estilos CSS

Para darle un aspecto atractivo a la página, definimos algunos estilos CSS que mantienen el diseño limpio y funcional.

body {
    font-family: Arial, sans-serif;
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    background-color: #f0f0f0;
}
h1 {
    text-align: center;
    color: #333;
}
#qr-form {
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
label {
    display: block;
    margin-top: 10px;
}
select, input[type="text"], input[type="tel"], input[type="url"] {
    width: 100%;
    padding: 8px;
    margin-top: 5px;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box;
}
button {
    display: block;
    width: 100%;
    padding: 10px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 20px;
}
button:hover {
    background-color: #45a049;
}
#qrcode {
    text-align: center;
    margin-top: 20px;
}
#download-btn {
    display: none;
    margin-top: 20px;
    background-color: #008CBA;
}
#download-btn:hover {
    background-color: #007B9A;
}

Este diseño asegura que el formulario sea accesible y visualmente agradable, con botones destacados y un esquema de colores consistente.

JavaScript: Generación del Código QR

Finalmente, la funcionalidad del generador está implementada en JavaScript. Aquí es donde sucede la magia:

const qrType = document.getElementById('qr-type');
const inputFields = document.getElementById('input-fields');
const generateBtn = document.getElementById('generate-btn');
const qrcodeDiv = document.getElementById('qrcode');
const downloadBtn = document.getElementById('download-btn');

const inputTemplates = {
    url: '<label for="url">URL:</label><input type="url" id="url" required>',
    whatsapp: '<label for="whatsapp">Número de WhatsApp:</label><input type="tel" id="whatsapp" required>',
    tel: '<label for="tel">Número de Teléfono:</label><input type="tel" id="tel" required>',
    vcard: `
        <label for="name">Nombre:</label><input type="text" id="name" required>
        <label for="tel">Teléfono:</label><input type="tel" id="tel" required>
        <label for="email">Email:</label><input type="email" id="email" required>
        <label for="org">Organización:</label><input type="text" id="org">
        <label for="url">URL:</label><input type="url" id="url">
    `,
    wifi: `
        <label for="ssid">SSID (Nombre de la red):</label><input type="text" id="ssid" required>
        <label for="password">Contraseña:</label><input type="text" id="password" required>
        <label for="encryption">Tipo de Encriptación:</label>
        <select id="encryption">
            <option value="WPA">WPA/WPA2</option>
            <option value="WEP">WEP</option>
            <option value="nopass">Sin contraseña</option>
        </select>
    `,
    store: '<label for="store-url">URL de la Tienda:</label><input type="url" id="store-url" required>'
};

// Actualiza los campos de entrada según el tipo de QR seleccionado
qrType.addEventListener('change', updateInputFields);
// Genera el código QR cuando se hace clic en el botón
generateBtn.addEventListener('click', generateQR);
// Descarga el código QR cuando se hace clic en el botón de descarga
downloadBtn.addEventListener('click', downloadQR);

// Función que actualiza los campos de entrada según el tipo de QR
function updateInputFields() {
    // Muestra los campos específicos según el tipo de QR seleccionado
    inputFields.innerHTML = inputTemplates[qrType.value];
}

// Función que genera el código QR
function generateQR() {
    // Limpia el div donde se mostrará el QR
    qrcodeDiv.innerHTML = '';
    let qrData = '';

    // Obtiene los datos del formulario según el tipo de QR seleccionado
    switch (qrType.value) {
        case 'url':
        case 'store':
            qrData = document.getElementById(qrType.value === 'url' ? 'url' : 'store-url').value;
            break;
        case 'whatsapp':
            qrData = `whatsapp://send?phone=${document.getElementById('whatsapp').value}`;
            break;
        case 'tel':
            qrData = `tel:${document.getElementById('tel').value}`;
            break;
        case 'vcard':
            qrData = `BEGIN:VCARD
VERSION:3.0
N:${document.getElementById('name').value}
TEL:${document.getElementById('tel').value}
EMAIL:${document.getElementById('email').value}
ORG:${document.getElementById('org').value}
URL:${document.getElementById('url').value}
END:VCARD`;
            break;
        case 'wifi':
            const encryption = document.getElementById('encryption').value;
            qrData = `WIFI:T:${encryption};S:${document.getElementById('ssid').value};P:${document.getElementById('password').value};;`;
            break;
    }

    // Genera el código QR usando la librería QRCode.js
    new QRCode(qrcodeDiv, {
        text: qrData,
        width: 256,
        height: 256
    });

    // Muestra el botón de descarga
    downloadBtn.style.display = 'block';
}

// Función que permite descargar el código QR generado
function downloadQR() {
    // Obtiene el canvas del código QR generado
    const canvas = qrcodeDiv.querySelector('canvas');
    // Convierte el canvas a una imagen descargable
    const image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
    // Crea un enlace para descargar la imagen
    const link = document.createElement('a');
    link.download = 'qrcode.png';
    link.href = image;
    link.click();
}

// Inicializar los campos de entrada al cargar la página
updateInputFields();
  • qrType.addEventListener('change', updateInputFields): Escucha los cambios en el tipo de QR seleccionado y actualiza los campos de entrada correspondientes.
  • generateBtn.addEventListener('click', generateQR): Cuando se hace clic en el botón “Generar QR”, llama a la función generateQR para crear el código QR con los datos ingresados.
  • downloadBtn.addEventListener('click', downloadQR): Cuando se hace clic en el botón “Descargar QR”, llama a la función downloadQR para descargar el código QR generado.

Funciones Explicadas:

  • updateInputFields(): Esta función es responsable de actualizar los campos de entrada según el tipo de QR seleccionado por el usuario. Utiliza el objeto inputTemplates para elegir el HTML apropiado y lo inserta en el div inputFields.
  • generateQR(): Esta es la función principal para generar el código QR. Primero limpia el div donde se mostrará el QR (qrcodeDiv.innerHTML = '') y luego obtiene los datos según el tipo de QR seleccionado. Cada caso del switch maneja un tipo diferente de QR, construyendo la cadena qrData correspondiente. Finalmente, usa la librería QRCode.js para generar el código QR y lo muestra en qrcodeDiv.
  • downloadQR(): Esta función permite al usuario descargar el código QR generado. Obtiene el canvas del código QR y lo convierte en una imagen descargable. Luego, crea un enlace temporal para descargar la imagen y dispara el clic en ese enlace.

Retos Encontrados y Soluciones

Uno de los retos fue manejar de forma eficiente los diferentes tipos de datos que el usuario puede seleccionar para generar el QR. Para esto, opté por usar una estructura de “templates” de HTML que se muestra según la selección del usuario. Esto no solo hizo que el código fuera más limpio y modular, sino que también facilitó la experiencia del usuario, ya que siempre tiene a la vista sólo los campos que necesita llenar.

Otro reto fue asegurarme de que el QR generado fuera fácil de descargar. Implementé una función que convierte el canvas donde se genera el código en una imagen descargable, lo que facilita al usuario llevar el QR a cualquier otro medio.

Aplicaciones Prácticas

Las aplicaciones de este generador son múltiples: puedes crear un código QR con la dirección de tu sitio web para una tarjeta de presentación, o un código que conecte automáticamente a la red Wi-Fi de un bar. También puedes hacer que tus clientes se comuniquen contigo vía WhatsApp con solo escanear el código. La flexibilidad de poder elegir entre diferentes tipos de códigos hace que este proyecto sea útil para cualquier persona o negocio.

Próximos Pasos

El siguiente paso sería agregar una opción de personalización visual para el código QR, permitiendo elegir colores y agregar logotipos. De esta forma, cada código podría alinearse mejor con la identidad visual de una marca.

Conclusión

Este generador de códigos QR personalizable es un excelente ejemplo de cómo se pueden crear herramientas prácticas y potentes con unas cuantas líneas de código. Es una manera divertida de aprender JavaScript y hacer algo que tenga un impacto real en la vida de las personas. Ahora que lo tienes, puedes darle más opciones a tus necesidades. Además, te dejo un visualizador en CodePen para verlo en acción: Ver en CodePen.

¿Te gustó este ejemplo? Si tienes alguna idea de cómo mejorarlo o quieres colaborar en algo similar, ¡deja un comentario o escríbeme! Me encantaría saber qué se te ocurre o qué más le podemos hacer. ¡Escríbeme y lo vamos iterando!

Mas de mi blog

Pushin la Gata UX, asistente UX en chatGPT

Tags importantes