n esta clase nos olvidamos de la teoría. Vamos a crear un generador de contraseñas seguro usando ChatGPT como copiloto de código, y lo vamos a tener en producción antes de que se enfríe el café.
Generador de contraseñas con ChatGPT: de prompt a herramienta real
Arrancamos con un prompt directo en el lienzo (canvas): pedimos una interfaz para generar contraseñas seguras. La IA responde en React. No nos interesa complicar el despliegue, así que le exigimos HTML puro con CSS y JavaScript integrados. Un archivo, sin dependencias, sin dramas.
Depurar errores de código con IA: así es como funciona de verdad
Aquí viene el momento que nadie te cuenta en los tutoriales: el código falla. El botón de copiar al portapapeles no funciona. Error clásico de JavaScript.
¿Qué hacemos? Abrimos la consola del navegador, copiamos el error exacto y se lo pasamos a ChatGPT. Sin filtros, sin explicaciones de más. La IA corrige la sintaxis, la app arranca limpia. Después le aplicamos nuestra identidad de marca: colores, textos, el tono del proyecto.
Subir una app HTML al servidor web sin complicaciones
Con el archivo funcionando en local, vamos al administrador de archivos del servidor, creamos una carpeta dentro de la ruta de recursos, subimos el .html y listo. La herramienta está en producción, accesible desde cualquier navegador, alojada en nuestro propio servidor. Sin depender de terceros para nada.
Solo para miembros inicia sesión o suscríbete por 15 €/mes para acceder a los vídeos exclusivos, edición de imágenes, prompts avanzados y a nuestros cursos.
De un prompt a una herramienta funcional, con identidad visual propia y en nuestro servidor. Así de limpio queda cuando sabes guiar a la IA con criterio.
Tareas para esta lección
- Genera tu propio
.htmlcon el generador de contraseñas, exigiéndole a ChatGPT que use los colores corporativos de tu marca. - Prueba el código en el navegador, abre la consola de desarrollador e interactúa con la IA para corregir al menos un bug.
- Sube el archivo final a tu servidor por FTP o el administrador de archivos y verifica que funciona en producción.
¿Tienes dudas?
NotebookLM para consultas rápidas, Telegram para la comunidad, formulario para incidencias técnicas. Nos vemos en la siguiente lección.
Deja una respuesta