Vibe coding» para docentes: Crea apps educativas con ayuda de IA

 Por osemaría Elizondo García

Descubrí hace algunos meses que ChatGPT puede generar código para aplicaciones web. Esto es de gran utilidad para los docentes, ya que podemos crear aplicaciones educativas interactivas, adecuadas a nuestras necesidades y las de nuestros estudiantes. Vibe coding es una nueva forma de generar software en la que el usuario describe en lenguaje natural la aplicación y funcionalidad que desea a través de un prompt; posteriormente, la Inteligencia Artificial (IA) generará el código de programación para esa solicitud. Esto es posible gracias al entrenamiento de los modelos de lenguaje de gran tamaño o Large Language Models (LLM) como ChatGPT, Gemini, Claude, entre otros. En este artículo comparto diferentes tipos de aplicaciones educativas que crean los docentes, la pedagogía detrás de estas aplicaciones educativas y una guía para hacer tu primera aplicación web educativa con el uso de los LLM.

Para crear mi primera aplicación web educativa, pensé en un concepto que suele ser difícil de asimilar por mis estudiantes en el curso de investigación cuantitativa que imparto: el concepto de desviación estándar. Por ello, solicité a ChatGPT lo siguiente: “Genera una aplicación HTML para que mis estudiantes comprendan el concepto de desviación estándar. La aplicación permitirá la captura de 5 números. En tiempo real, los estudiantes podrán cambiar el valor en cada casilla y automáticamente se actualizará el valor de la media y la desviación estándar. A la vez, aparecerá una gráfica con los 5 números en la que se muestre la media y la desviación estándar de manera visual”.

Al abrir la aplicación en mi navegador y ver que sí funcionaba, me ilusioné al pensar en las posibilidades que esto implica para mi práctica educativa.

Esta aplicación permitió que mis estudiantes comprendieran el concepto de desviación estándar de manera más fácil. Desde su computadora podían utilizarla, cambiar los valores de la variable e identificar gráficamente que a medida que los valores introducidos eran más dispersos, la desviación estándar aumenta su valor. Adicionalmente, en mis clases de tecnología educativa he podido enseñar el uso de los LLM para la creación de aplicaciones educativas. He identificado una diversidad de propósitos educativos para los cuales los docentes podemos integrar estas apps hechas por nosotros mismos.

Tipos de aplicaciones educativas que crean los docentes

A continuación, te comparto algunos ejemplos de aplicaciones educativas creadas por docentes en diferentes contextos educativos. Para todos los casos, la clave es alinear cada aplicación con un propósito de aprendizaje específico, diseñar interacciones significativas y asegurar retroalimentación útil para el estudiante.

• Quizzes de opción múltiple. Aunque ya existen muchas aplicaciones que permiten transformar tu contenido de la clase en actividades de elección múltiple con retroalimentación automática (preguntas con múltiples opciones de respuesta, relacionar columnas, ordenar listados, etc.), hacerlo con un LLM facilita la customización. Por ejemplo, recientemente pude transformar mi examen parcial en un quiz de repaso previo solo con un prompt en el que adjunté el archivo del examen e indiqué la cantidad y los tipos de reactivos que quería incluir.

• Gamificación y microretos: Algunos alumnos y colegas han hecho aplicaciones para gamificar el aula. Algunos elementos típicos son la acumulación de puntos y el establecimiento de metas para obtener incentivos, niveles de progreso con objetivos claros, conteo de intentos, personajes y narrativas, insignias, tiempo límite opcional y recompensas ajustadas al desempeño. Estas suelen favorecer la motivación extrínseca, el sentido de logro y el establecimiento de objetivos.

• Simuladores para comprensiones conceptuales: Los simuladores virtuales promueven el entendimiento de relaciones causa-efecto y modelos subyacentes al permitir manipular variables y observar resultados. Por ejemplo, pueden ayudar a comprender los conceptos de velocidad, flotación, gravedad, al observar y manipular las variables involucradas. La interacción incluye comparar escenarios, visualizar efectos y registrar hipótesis y conclusiones. La calidad se refleja en visualizaciones legibles, variables didácticamente significativas y soportes que ayuden a pasar de la observación a la explicación.

• Práctica guiada digital y resolución de problemas: Estas aplicaciones están diseñadas para acompañar al estudiante en la adquisición gradual de un procedimiento complejo, combinando apoyo y evaluación automática. Un ejemplo es una app de escritura académica que asesora y evalúa párrafos: el estudiante recibe frases de inicio, redacta en un cuadro de texto y somete su respuesta para obtener retroalimentación de un modelo como Gemini (ya que Gemini permite integrar su propio modelo de lenguaje dentro de las aplicaciones que creas). La calidad de este tipo de apps se refleja en justificaciones claras que explican el porqué de cada corrección.

La pedagogía detrás del uso de apps educativas en el aula

Aprender con apps implica ciclos rápidos de acción, respuesta y ajuste. Diseñar tareas cortas que obliguen a responder antes de avanzar y acompañarlas con retroalimentación que explique el porqué del acierto o del error resulta clave para sostener la atención y favorecer la comprensión. Aquí menciono algunos apuntes a partir de distintos paradigmas de aprendizaje.

Paradigmas de aprendizaje

• Paradigma conductista. En primer lugar, el paradigma conductista enfatiza dividir el aprendizaje en pasos pequeños con alta tasa de aciertos. En las apps, esto se traduce en práctica activa donde cada respuesta genera retroalimentación inmediata y diferenciada. Refuerzos positivos como insignias, puntos o desbloqueos mantienen la motivación, mientras que algoritmos adaptativos ajustan la dificultad para equilibrar reto y éxito, asegurando progresión constante (Skinner, 1954; Skinner, 1968).

• Paradigma constructivista. El constructivismo sostiene que el estudiante construye significados al manipular variables, contrastar hipótesis y observar efectos. Las apps favorecen este proceso al ofrecer entornos de exploración guiada que estimulan el descubrimiento y proporcionan pistas que orientan la búsqueda de explicaciones productivas. Además, el aprendizaje significativo ocurre cuando los nuevos contenidos se vinculan con los saberes previos mediante ejemplos, organizadores o simulaciones contextualizadas (Piaget, 1970; Bruner, 1960; Bruner, 1961; Ausubel, 1968).
  • Dentro de la tradición constructivista y la didáctica de las ciencias, la secuencia de predicción, observación y explicación (POE) busca visibilizar concepciones previas y promover cambio conceptual en tres fases. La app primero solicita una predicción breve, luego muestra una simulación con datos claros y finalmente exige comparar y explicar resultados. Este ciclo activa la metacognición y facilita que el estudiante confronte sus ideas iniciales con la evidencia. A su vez, el conflicto cognitivo funciona como motor para la reestructuración conceptual (White y Gunstone, 1992; Driver y Posner, 1985).

• Enfoque sociocultural.Por último, desde una visión sociocultural, el aprendizaje progresa con apoyos dentro de la zona de desarrollo próximo que se retiran gradualmente conforme aumenta la competencia. Las apps pueden ofrecer pistas ajustadas al desempeño y los LLM adaptar la ayuda al nivel de autonomía del estudiante. Además, al incluir funciones colaborativas, facilitan la construcción de significados compartidos y el andamiaje colectivo en comunidades de aprendizaje (Vygotsky, 1978).

Crea tu primera app educativa con IA

Ya que conoces algunos ejemplos de aplicaciones educativas y sus justificaciones pedagógicas, quisiera compartirte una pequeña guía para hacer tu primera aplicación educativa con el uso de Inteligencia Artificial Generativa (IA generativa). Deseo que con estos pasos que te voy a compartir, tomes un momento en tu próximo tiempo libre para experimentar este uso en el LLM de tu preferencia.

Paso cero. Debido a que hay muchas aplicaciones valiosas disponibles en la web, te recomiendo primero preguntarle a ChatGPT sobre la aplicación que requieres, describiendo sus funcionalidades. Así he encontrado aplicaciones interesantes que ya existen para mi práctica. Además, puede ocurrir que al revisar los sitios web o apps que te refiere, te das cuenta de cuáles son las funcionalidades que necesitas, de manera que puedas crear una mejor aplicación al identificar funcionalidades más adecuadas para ti y tus estudiantes.

Hecho esto, aquí te comparto los pasos recomendados para crear tu primera app educativa.

Pasos para crear tu primera app para integrar en tu clase

1. Piensa en la intención pedagógica. ¿Quieres lograr que los estudiantes comprendan un concepto difícil?, ¿quieres motivar a tus alumnos con incentivos?, ¿quieres que los estudiantes reciban retroalimentación a partir de cierta interacción?
2. Selecciona el modelo adecuado. Generalmente los LLM incluyen opciones entre Modo Rápido (Fast) y Modo Razonamiento (Thinking). Selecciona la opción de Razonamiento para que el LLM tome más tiempo y así brinde una mejor respuesta. Si no cuentas con una suscripción a un LLM, una buena opción es usar Google AI Studio, que es una plataforma de Google que te permite usar sus modelos de manera gratuita.
3. Selecciona la opción de lienzo (Canvas). Al menos ChatGPT y Gemini incluyen esta opción para que el código se presente en una ventana dentro de la respuesta.
4. Escribe el prompt. Cuando eres principiante, te recomiendo que le pidas al LLM que te haga preguntas sobre lo que necesita que le digas para darte una mejor respuesta. Así que este sería un buen prompt inicial: “Quiero generar una app educativa para [función de la app]. Pregúntame lo que necesitas saber para crear la app. Hazme una pregunta, espera mi respuesta. Así hasta que hayas hecho todas las preguntas necesarias”.
5. Ejecuta el código para generar la app. Ya que tengas la respuesta con el código, a veces es posible que lo puedas “correr” (ejecutar) directo en la misma plataforma si activaste la opción Canvas. Es posible que haya funciones que no se puedan visualizar adecuadamente en ese espacio. Por ello, lo que conviene hacer es copiar todo el código que arrojó el LLM y pegarlo en un nuevo documento de texto en tu laptop. Guarda el documento con la extensión .html y asegúrate de escribirlo todo entre comillas para que el navegador lo lea como una aplicación. Se vería así: ‘“nombre_de_la_app.html”’.
6. Visualiza la app. Una vez que tengas el archivo .html, ábrelo en tu navegador web (Chrome, Firefox, Explorer, etc.). De esta forma ya estarás viendo tu aplicación en funcionamiento.
7. Revisa el funcionamiento en general de la app. Es posible que algún elemento o interacción no funcione o no te guste, por ello puedes volver al LLM e indicarle que haga las modificaciones que requieres. Este paso lo repetirás hasta que tu aplicación deseada esté funcionando correctamente.

Pasos para intermedios y avanzados

Los LLM pueden darte el código de acuerdo con lo que solicitaste, pero no pueden hacer directamente conexiones con bases de datos u otras aplicaciones. Las aplicaciones más sofisticadas tienen conexiones entre aplicaciones, bases de datos, redes, perfiles de usuarios, etc. Entre más funciones tenga una app es casi imposible que una IAG pueda hacerlo todo con un solo prompt. Sin embargo, si te animas a hacer aplicaciones, encontrarás que preguntándole a ChatGPT, puedes lograr hacer estas integraciones. Además, hay algunas aplicaciones para hacer aplicaciones que también facilitan este proceso, como Replit o Lovable.

De cualquier forma, hay algunas soluciones sencillas que el mismo LLM puede sugerirte para integrar bases de datos sencillas e incluso integrar IAG en tu propia aplicación. Por ejemplo, puedes solicitarle que tu aplicación guarde datos en un archivo JSON (archivo de texto que se utiliza para guardar datos estructurados) que puedas guardar en tu laptop (u otro dispositivo) y puedas desplegar los datos al cargar este archivo guardado. Además, en Gemini, al generar un código de aplicación mediante la función Canvas, puedes dar clic en el botón inferior derecho que aparece para integrar IAG dentro de tu aplicación. Así, podrías hacer una aplicación que dé respuestas automáticas en texto, lo cual es de gran utilidad como medio de retroalimentación específica para tus estudiantes.

Claro está que la IAG no sustituye a los docentes, sino que potencia su creatividad y amplía las formas de acompañar a los estudiantes en su aprendizaje. Cada experiencia de programación con un LLM es, al mismo tiempo, una experiencia de diseño pedagógico, en la que lo importante no es la sofisticación técnica, sino la claridad del propósito educativo. Cuando realices tu aplicación educativa, me encantará conocerla y saber cómo la integraste en tu práctica docente. ¡Manos a la obra!

Acerca del autor

Josemaría Elizondo (josemariaelizondo@tec.mx) es investigador postdoctoral en Innovación Educativa en el Tecnológico de Monterrey. Sus investigaciones se centran en Tecnología Educativa y Estudios socioculturales en Educación. Ha sido docente por más de 15 años en distintos niveles educativos desde educación primaria hasta posgrado.

Referencias

Ausubel, D. P. (1968). Educational psychology: A cognitive view. Holt, Rinehart & Winston.

Bruner, J. S. (1960). The process of education. Harvard University Press.

Bruner, J. S. (1961). The act of discovery. Harvard Educational Review, 31(1), 21–32.

Driver, R., & Posner, G. J. (1985). An attempt to formulate a constructivist theory of knowledge. In R. Driver, E. Guesne, & A. Tiberghien (Eds.), Children’s ideas in science (pp. 66–106). Open University Press.

Piaget, J. (1970). Psychology and pedagogy. Viking Press.

Skinner, B. F. (1954). The science of learning and the art of teaching. Harvard Educational Review, 24(2), 86–97.

Skinner, B. F. (1968). The technology of teaching. Appleton-Century-Crofts.

Vygotsky, L. S. (1978). Mind in society: The development of higher psychological processes. Harvard University Press.

White, R., & Gunstone, R. (1992). Probing understanding. Falmer Press.

Tomado de EDUBITS del Tec de Monterrey