¡DIY con IA! Genera códigos QR a tu gusto y sin complicaciones

¿Alguna vez te has preguntado cómo hacen esas empresas tecnológicas para crear herramientas útiles tan rápido? ¿O has deseado tener una pequeña aplicación personalizada sin tener que aprender a programar durante meses? ¡Estás en el lugar adecuado! En 'Curiosidad Artificial', creemos que la Inteligencia Artificial generativa está acercando la creación de software a todos los públicos, y queremos demostrártelo.

Hoy inauguramos nuestra nueva sección "DIY: Programas JavaScript autocontenidos", donde te mostraremos cómo puedes crear tus propias herramientas sencillas con la ayuda de la IA, guardarlas en un simple archivo html y usarlas donde quieras, ¡incluso sin conexión a internet! Para nuestro primer proyecto, vamos a abordar algo que ves a diario: un generador de códigos QR. Prepárate para dar tu primer gran paso en el mundo de la creación digital.

¿Qué son los códigos QR? Descifrando esos cuadraditos mágicos

Seguro que los has visto por todas partes: en los menús de los restaurantes, en carteles publicitarios, en tarjetas de visita, ¡hasta en la ropa! Los códigos QR son esos pequeños cuadrados en blanco y negro, a veces con patrones de colores, que parecen laberintos pixelados. Pero, ¿qué son realmente?

QR significa "Quick Response" (Respuesta Rápida), y nacieron en Japón en 1994, de la mano de Denso Wave, para rastrear componentes de automóviles. En esencia, un código QR es como un código de barras bidimensional que puede almacenar una gran cantidad de información. A diferencia de los códigos de barras tradicionales que solo guardan números, los QR pueden almacenar texto, direcciones web (URLs), números de teléfono, direcciones de correo electrónico, coordenadas geográficas y mucho más.

La magia ocurre cuando escaneas uno con la cámara de tu smartphone: tu teléfono interpreta el patrón y te lleva directamente a la información que contiene, ya sea una página web, un contacto o la clave de Wi-Fi de tu cafetería favorita. Son increíblemente prácticos y eficientes para conectar el mundo físico con el digital.

El QR en tu día a día: más allá de los menús de restaurante

Aunque la pandemia los popularizó para ver los menús, los códigos QR tienen un sinfín de utilidades cotidianas que quizás no conozcas. Aquí te dejamos algunas ideas:

• Compartir Wi-Fi: ¡Olvídate de dictar contraseñas largas y complicadas! Genera un QR con los datos de tu red Wi-Fi y tus invitados solo tendrán que escanearlo.

• Tarjetas de visita digitales: ¿Cansado de las tarjetas de papel? Un QR en tu tarjeta puede enlazar directamente a tu LinkedIn, tu portafolio online o tu número de teléfono para que te añadan al instante.

• Enlaces rápidos: Pega un QR en tu nevera que te lleve directamente a tu lista de la compra online o a una receta.

• Información de eventos: En invitaciones o entradas, un QR puede llevar a la ubicación del evento en Google Maps, al programa o a la galería de fotos.

• Redes sociales: Enlaza tu perfil de Instagram, TikTok o X para que la gente te siga fácilmente.

• ¡Pagos sin contacto! Cada vez más apps bancarias y de pago usan QR para facilitar transacciones rápidas.

• Tutoriales o información de productos: En manuales o embalajes, un QR puede llevar a videos explicativos o a fichas técnicas.

Como ves, son pequeños aliados que nos ahorran tiempo y nos facilitan la vida digital.

¿Necesito un generador de QR propio? Las alternativas que ya usas

"Pero, un momento", quizás estés pensando, "si quiero un QR, ¿no puedo usar una de las muchas herramientas online gratuitas que ya existen?" ¡Y tienes toda la razón! Sitios web como QR Code Generator, generadores de Google o incluso muchas apps móviles te permiten crear códigos QR de forma rápida y sencilla. Sus ventajas son claras:

• Rapidez: Generas un QR en segundos.

• No requieren instalación: Accedes desde cualquier navegador.

• Personalización avanzada: Algunos ofrecen opciones de color, añadir logos, etc.

Entonces, ¿por qué molestarse en "hacerlo tú mismo" con la IA? Aquí es donde entra la verdadera magia del "DIY" y el empoderamiento:

• Control y privacidad: Al crear tu propio generador, la información que introduces nunca sale de tu dispositivo o de tu archivo local. Esto es crucial si vas a generar QRs con datos sensibles, por ejemplo tu clave WIFI.

• Autocontenido y offline: Una vez que tienes tu archivo HTML, funciona completamente sin conexión a internet. ¡Ideal para usarlo en cualquier lugar!

• Aprendizaje y empoderamiento: Ver cómo una IA traduce tus ideas en código funcional te abre la mente a un mundo de posibilidades. Es una satisfacción increíble crear algo útil por ti mismo.

• Simpleza a medida: Las herramientas online a veces tienen demasiadas opciones. Tu versión DIY será justo lo que necesitas, sin complicaciones.

• Potenciado de manera incremental: algunas funciones de las herramientas online son de pago; puedes irlas construyendo de forma iterativa a media que las necesites o por el placer de ver hasta dónde puedes llegar experimentando con la IA.

¡La satisfacción de crear! No hay nada como decir: "Esto lo hice yo (con un poco de ayuda de mi amiga la IA)".

¡Manos a la obra con la IA! Tu asistente de código personal

La clave para crear tu propio generador de QR no es aprender JavaScript o HTML de la noche a la mañana. La clave es saber pedirle a la Inteligencia Artificial lo que quieres. La IA se encargará de escribir el código por ti, como un programador personal ultra-rápido y siempre disponible.

Lo que necesitamos es un archivo HTML que contenga todo lo necesario para funcionar: el diseño (HTML), los estilos (CSS, aunque será mínimo para ser autocontenido) y la lógica para generar el QR (JavaScript). Todo en un solo archivo para que sea fácil de guardar y usar. Si no has entendido nada de está última frase, no te preocupes, la IA se encarga de todo.

Aquí te presento un "prompt" mágico que le puedes dar a tu IA generativa favorita (como Claude, Gemini, ChatGPT o similar) para que te cree esta herramienta aunque luego te explico por qué no es la mejor estrategia:

¿Por qué este prompt puede no ser adecuado para nuestro objetivo?

Aunque es específico en cada detalle: pide un solo archivo, una caja de texto, un botón, la ubicación del QR y un diseño simple, y además, deja claro el objetivo principal: que sea una herramienta offline y autocontenida, no siempre funciona como esperamos. Al probarlo en ChatGPT y Gemini, el resultado no funcionaba a la primera y al probarlo en Claude, la respuesta excede el límite y no puede completarlo.

La estrategia correcta

Hay una estrategia más efectiva para ayudar al modelo a pensar en la solución antes de que se lance a construirla:

1. Trata a la IA como a un compañero de equipo: empieza explicándole en qué consiste tu proyecto. Podría se algo así como: "Quiero construir un generador de códigos QR portable; he pensado en que vaya autocontenido en un único archivo HTML y que pueda funcionar sin conexión a internet. ¿Qué me aconsejas?"

2. Profundiza más en el tema: en función de la respuesta que te de pídele más detalle. Por ejemplo:

   • "He visto que algunos generadores de código QR permiten meter texto o URL y el lector sabe lo que hacer en cada caso. ¿Mi generador de códigos QR debe diferenciar el tipo de contenido que representará?"

   • "¿Hay alguna librería open source para generar códigos QR que pueda utilizar?¿Cuál me recomiendas?"

3. Cuando hayas profundizado en la solución, simplemente tendrás que decir: ¿Puedes construirlo? Y la IA generará el código necesario.

Una vez que la IA te entregue el código (será un bloque de texto largo), solo tienes que seguir estos sencillos pasos:

1. Copia todo el código que te dé la IA.

2. Abre un editor de texto simple en tu ordenador (como el Bloc de Notas en Windows, TextEdit en Mac o cualquier editor de código).

3. Pega el código que copiaste.

4. Guarda el archivo con un nombre significativo, por ejemplo, mi_generador_qr.html. Asegúrate de que la extensión sea .html o .htm.

5. ¡Listo! Ahora, abre ese archivo en tu navegador web (Chrome, Firefox, Edge, Safari...). ¡Verás tu generador de códigos QR funcionando!

6. Introduce cualquier texto o URL en la caja, haz clic en "Generar QR", y voilà, tu código QR aparecerá mágicamente debajo.

Con esta estrategia en 3 o 4 pasos, el modelo habrá estado analizando lo que queremos hacer y cuando le pedimos que lo construya lo tendrá mucho más claro. Yo he seguido esta estrategia en ChatGPT y lo ha construido bien a la primera aunque me ha dejando un paso manual, descargar e incrustar la librería QSCode.js en un lugar concreto indicado en el código. 

NOTA: el intento de incrustar a la primera la librería QRCode.js en el código es lo que ha hecho que Claude no pudiera completar la tarea por exceder el límite del tamaño de su respuesta.

¡Listo para usar y compartir!

Hemos visto como el método de "disparo único" o "one-shot prompt", le das una orden, y la IA intenta resolverla al instante, a veces funciona de maravilla, pero otras, el resultado es un poco caótico. Sin embargo, hay una forma mucho más eficaz de trabajar con estas maravillas tecnológicas: en lugar de ir al grano de inmediato, es como tener una conversación. Primero, le cuentas a la IA tus objetivos, qué es lo que realmente quieres lograr. Luego, le pides su opinión y consejos, explorando juntos las mejores opciones y posibles soluciones. Solo después de este "diálogo" y de que la IA entienda a fondo tus necesidades, le pides que construya la solución. Es un proceso más pausado, sí, pero te aseguro que la fiabilidad y la calidad del resultado final son, ¡con diferencia, mucho mejores!

Te dejo un código QR que he hecho con el mismo prompt que te he compartido. Y recuerda, la próxima vez que necesites una pequeña herramienta digital, ¡piensa en la IA como tu cómplice creativo! La capacidad de crear soluciones personalizadas, de forma rápida y sin grandes conocimientos de programación, es una de las grandes ventajas de la IA generativa. Atento a esta sección de DIY en CuriosidadArtificial.es en la que vamos a crear más utilidades con esta técnica.