Curso sobre creación de aplicaciones web con ChatGPT. Desarrollamos un Pomodoro desde cero, depurando errores e integrando nuestra identidad corporativa.
El punto de partida: Canvas y prototipo base
Bienvenidos a una nueva sesión. Hoy vamos a dejarnos de tonterías y a montar una herramienta útil de verdad: un temporizador Pomodoro. La clave aquí no es soltar un prompt kilométrico desde el principio para parecer los más listos, sino saber iterar con cabeza.
Lo primero y más importante para este tipo de desarrollos es activar el Canvas (lienzo) en ChatGPT. Empezamos a las bravas: le pedimos simplemente que nos cree una App Pomodoro y dejamos que nos devuelva una primera versión genérica en HTML/React. A partir de esa base, empezamos a exigir y a pulir el resultado.
Depurando errores y controlando el código
En el proceso de desarrollo, nos hemos topado con la realidad. Han surgido errores de sintaxis y los clásicos problemas de los navegadores modernos, como el bloqueo de la reproducción automática de audio si no hay interacción previa del usuario.
Aquí es donde entra nuestro pensamiento crítico; no basta con asentir a todo lo que escupe la IA. Hemos leído los fallos de la consola, hemos detectado el problema subyacente y le hemos indicado a ChatGPT exactamente dónde estaba metiendo la pata para que lo solucionara.
Identidad visual y preparación para producción
Con el motor ya estable, nos hemos metido de lleno en la personalización. Hemos inyectado nuestra identidad corporativa, reemplazando los estilos estándar aburridos por nuestros tonos azules y adaptando la interfaz.
También le hemos exigido funcionalidades clave: hacer que los intervalos del temporizador sean editables y añadir un CTA (Call to Action) potente que dirija al usuario directamente hacia la página de contacto o asesoría. Para rematar, hemos revisado el visor de código para extraer ese código HTML/React ya depurado y listo para llevarlo a producción, controlando el resultado en cada paso.
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.
Pues ya lo vemos… crear aplicaciones funcionales con inteligencia artificial no va de encontrar la instrucción mágica a la primera, sino de saber iterar. Hemos pasado de un prototipo básico y mudo a una herramienta web totalmente personalizada, sorteando problemas técnicos de audio y aplicando los colores de nuestra marca sin escribir el código a mano.
Propuesta de tareas:
- Abre ChatGPT, asegúrate de activar el entorno Canvas y genera la base de tu temporizador Pomodoro con una instrucción muy simple.
- Añade alertas de sonido para los descansos. Si el navegador te bloquea el audio, usa el error de la consola para iterar con la IA y arreglar el código.
- Modifica la interfaz generada para inyectar tus colores corporativos y añade un botón funcional que enlace a tu propia web.
¿Tienes dudas?
Si te atascas, recuerda que tenemos nuestros canales: el NotebookLM para consultas rápidas, el hilo en Telegram para la comunidad y el formulario para incidencias técnicas.
¡Nos vemos en la siguiente lección!
Deja una respuesta