← Volver a Proyectos

Generador de Códigos QR por Lotes

Generador de QR - Herramienta de Códigos QR

Descripción

El Generador de Códigos QR por Lotes es una aplicación web de alto rendimiento que permite a los usuarios generar múltiples códigos QR personalizados simultáneamente. Construida con tecnologías frontend modernas, ofrece una experiencia de usuario fluida con capacidades de vista previa en tiempo real y funcionalidad de procesamiento por lotes. La aplicación es particularmente útil para empresas e individuos que necesitan generar grandes volúmenes de códigos QR con un estilo consistente pero datos diferentes.

La aplicación fue desarrollada para resolver el problema común de crear manualmente múltiples códigos QR, lo cual es un proceso que consume tiempo y es propenso a errores. Al automatizar este proceso, los usuarios pueden generar eficientemente cientos de códigos en segundos mientras mantienen control total sobre su apariencia y formato.

Desafíos

Soluciones

Procesamiento Eficiente por Lotes

Implementé un enfoque de procesamiento progresivo utilizando Promesas de JavaScript para generar códigos QR secuencialmente en lugar de simultáneamente. Esto evitó la congelación del navegador durante operaciones de lotes grandes:

// Procesamiento secuencial con seguimiento de progreso
for (let i = 0; i < csvData.length; i++) {
  const row = csvData[i];
  const blob = await generateQRBlob(row);
  if (blob) {
    zip.file(`${row.filename}.${format}`, blob);
  }
  setProgress(((i + 1) / csvData.length) * 100);
}

Un indicador de progreso mantiene a los usuarios informados sobre el estado de la operación, mejorando la percepción del rendimiento.

Personalización Dinámica de Códigos QR

Aproveché la biblioteca qr-code-styling combinada con la gestión de estado de React para crear un sistema de personalización receptivo:

// Actualizaciones de códigos QR en tiempo real usando hooks de React
useEffect(() => {
  if (!qrCode) {
    const qr = new QRCodeStyling(config);
    setQrCode(qr);
    if (ref.current) {
      qr.append(ref.current);
    }
  } else {
    qrCode.update(config);
  }
}, [config, qrCode]);

Este enfoque permite una retroalimentación visual instantánea a medida que los usuarios ajustan configuraciones como el estilo de puntos, colores y posición del logotipo.

Manejo Optimizado de Archivos

Implementé un manejo eficiente de archivos utilizando la API FileReader tanto para cargas de logotipos como para importaciones CSV:

// Manejo de imágenes de logotipo
const handleImageUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
  const file = e.target.files?.[0];
  if (file) {
    const reader = new FileReader();
    reader.onload = (e) => {
      const imageUrl = e.target?.result as string;
      setConfig((prevConfig) => ({
        ...prevConfig,
        image: imageUrl,
      }));
    };
    reader.readAsDataURL(file);
  }
};

Para el procesamiento de CSV, construí un analizador robusto con validación para garantizar la integridad de los datos:

// Validación y análisis de CSV
const headers = rows[0].split(',').map(header => header.trim());
const dataIndex = headers.findIndex(h => h.toLowerCase() === 'data');
const filenameIndex = headers.findIndex(h => h.toLowerCase() === 'filename');

if (dataIndex === -1 || filenameIndex === -1) {
  setError('El CSV debe contener columnas "data" y "filename"');
  return;
}

Compresión ZIP y Descarga

Integré JSZip para empaquetar múltiples códigos QR eficientemente para su descarga:

const zip = new JSZip();
// Añadir archivos al zip
const zipBlob = await zip.generateAsync({ type: "blob" });
const url = URL.createObjectURL(zipBlob);
const link = document.createElement('a');
link.href = url;
link.download = 'codigos-qr.zip';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
URL.revokeObjectURL(url);

Este enfoque asegura un uso eficiente de la memoria y proporciona una única descarga para los usuarios.

Resultados

El Generador de Códigos QR por Lotes ofrece mejoras significativas sobre la creación manual de códigos QR:

La aplicación combina exitosamente tecnologías frontend avanzadas con una interfaz amigable, haciéndola accesible tanto para usuarios técnicos como no técnicos. La arquitectura modular asegura mantenibilidad y extensibilidad para mejoras futuras.

Visuales

Generador de QR - Herramienta de Códigos QR

Enlaces