En mi caso, como docente, es habitual tener sesiones prácticas en las que los y las estudiantes están, en grupo o de manera individual, trabajando con las actividades que les he propuesto. Uno de los problemas que me surgen es que se acumulan las dudas y muchas veces pierdo el orden de atención.
Hace años pensé en montar una APP a través de algún TFG (Trabajo Fin de Grado), pero ahí quedó, nunca llegué a publicar esa oferta.
Pero ahora, con la rápida evolución de la Inteligencia Artificial Generativa, estoy aprovechando esta tecnología para crearme mis propias APPs. Esto que ha tomado el nombre de «Vibecoding» y que te permite generar aplicaciones web en pocos segundos.
Ya sea a través de herramientas específicas como Lovable o Bubble, como las propias ChatGPT (lienzo), Gemini (Canvas), los artefactos de Claude o los Labs de Perplexity.
En este caso, hice uso del «Superagente de IA educativa«, una Gem (alternativa de Gemini a los GPTs de ChatGPT) elaborada por el gran Juanjo de Haro y que recopila todo el conocimiento de sus grupos de Telegram: ChatGPT-IA-edu, Vibe Coding Educativo y EduuMediaIAG. Aquí más información suya sobre Vibecoding: https://vibe-coding-educativo.github.io/
He creado esta Cola virtual para laboratorios y, a partir del enlace generado, para acceder a la zona docente y los estudiantes puedan apuntarse.
A partir del botón «Soy Docente» (arriba a la derecha) podemos ver el listado de estudiantes:
Los estudiantes, a partir de su botón «Acceder a la cola» (siempre es el mismo), pueden apuntarse, viendo el puesto en el que están (aunque también podríamos proyectar nuestro listado para que lo vean):
Nosotros podemos pulsar en «Atender» y así pasar al siguiente:
Cuando llegue el turno del estudiante, en su página le aparecerá:
Y, una vez atendido/a, puede volver a apuntarse:
Con unas cuantas iteraciones he podido montar esta aplicación 🙂
Aquí tenéis el enlace: https://gemini.google.com/share/dbadaa61f027
Os dejo el Prompt final por si queréis reproducirlo y/o adaptarlo (le he pedido a Gemini que me lo preparase a partir de mi código, si detectas algún error te pediría que me lo comentes):
Actúa como un desarrollador web experto en Single Page Applications (SPA). Quiero que crees una aplicación web completa contenida en un solo archivo HTML ("Cola Virtual de Laboratorio").
**Tecnologías a usar:**
1. **HTML5** y **JavaScript (ES Modules)** nativo dentro del mismo archivo.
2. **Tailwind CSS** (vía CDN) para todo el diseño visual.
3. **Lucide Icons** (vía CDN) para la iconografía.
4. **Firebase v11.6.1** (Auth y Firestore) importado como módulos.
**Objetivo de la App:**
Es un sistema de gestión de colas para un laboratorio escolar con una "Sala Única" (Hardcoded).
**Estructura de Datos (Firestore):**
- Colección: `lab_queue` (o una ruta similar).
- Campos del documento: `name` (string), `sessionCode` (fijo: 'AULA_UNICA'), `timestamp` (number), `studentId` (uid).
**Lógica y Vistas Requeridas:**
1. **Gestión de Estado:**
- Usa un objeto `state` reactivo simple.
- Implementa persistencia usando `sessionStorage`. Si un estudiante refresca la página, debe recordar quién es y mantener su posición en la cola (usando su ID de documento).
- Usa `onSnapshot` de Firestore para escuchar cambios en tiempo real.
2. **Vista 1: Landing (Inicio):**
- Diseño limpio y centrado.
- Título: "Cola Virtual - Laboratorio de Ciencias".
- Dos botones principales:
- "Soy Docente" (lleva al Dashboard).
- "Acceder a la Cola" (lleva al Login de estudiante).
3. **Vista 2: Dashboard Docente:**
- Muestra la lista de estudiantes en tiempo real ordenados por antigüedad (timestamp).
- Contador de estudiantes en espera.
- Cada estudiante en la lista debe tener un botón "Atender" que elimine el documento de Firestore.
- Estado vacío: Mostrar mensaje amigable si no hay nadie.
4. **Vista 3: Login Estudiante:**
- Input para escribir el nombre.
- Botón "Pedir Turno".
- Al enviar: Crea el documento en Firestore y guarda el ID en `sessionStorage`.
5. **Vista 4: Espera Estudiante:**
- Muestra la posición actual en la cola (calculada localmente basándose en el índice del array).
- Muestra el nombre de la persona que va justo delante.
- **Lógica de "Atendido":** Si el documento del estudiante ya no existe en la base de datos (porque el profesor lo borró), mostrar una pantalla verde de "¡Atendido! Tu turno ha finalizado" con un botón para volver al inicio.
**Requisitos de Estilo (UI/UX):**
- Paleta de colores: Slate (grises azulados) y Blue (azul intenso) para acciones principales.
- Animaciones: Implementa una clase `fade-in` para transiciones suaves entre vistas.
- Diseño "Mobile First", responsive y con bordes redondeados (estilo moderno).
- Usa un "Loader" (spinner) mientras se conecta a Firebase inicialmente.
**Nota Importante:**
Deja un placeholder claro `const firebaseConfig = { ... }` para que yo pueda pegar mis propias credenciales de Firebase.
