AulaLens

Inspiración

La inspiración para AulaLens nació directamente de la misión de Semillero Digital, una ONG que empodera a jóvenes en situación de vulnerabilidad a través de la formación digital. Google Classroom es funcional, pero deja datos críticos inaccesibles, dificultando el seguimiento real del progreso de los alumnos. La idea no era reemplazar Classroom, sino aumentarlo con una "lente de claridad". Quería crear una herramienta que transformara datos dispersos en información accionable, permitiendo a los educadores ver quién está progresando y, más importante, quién podría estar quedándose atrás y necesita apoyo.

Qué hace

AulaLens es una aplicación web que se conecta de forma segura a la API de Google Classroom para potenciarlo con funcionalidades de analítica y gestión que no existen de forma nativa. En concreto:

• Centraliza la Información: Ofrece un dashboard unificado donde coordinadores y profesores pueden ver el progreso de todos los alumnos y cursos en un solo lugar.
• Mide el Progreso Real: No solo muestra si una tarea fue entregada, sino que calcula métricas como el porcentaje de completitud y un "Health Score" que identifica proactivamente a los estudiantes en riesgo.
• Simplifica la Gestión: Ahorra horas de trabajo manual al automatizar la recopilación de datos que antes era un proceso tedioso y propenso a errores.

Cómo lo construí

Para construir una aplicación robusta y segura en 24 horas, elegí un stack tecnológico moderno y eficiente:

• Framework: Nuxt.js 3, utilizando sus rutas de servidor integradas para crear un backend seguro que gestiona toda la comunicación con la API de Google.
• Interfaz de Usuario: Nuxt UI sobre Tailwind CSS, lo que me permitió prototipar y construir un dashboard profesional e intuitivo a gran velocidad.
• Autenticación: Nuxt Auth para gestionar de forma segura y robusta el complejo flujo de OAuth 2.0 con Google, protegiendo las credenciales y los tokens de usuario.
• API de Google: La librería oficial googleapis para Node.js, garantizando una interacción fiable y bien estructurada con los endpoints de Classroom.
• Despliegue: Vercel, para un despliegue continuo y automático directamente desde GitHub, aprovechando su arquitectura de funciones serverless.

Desafíos que encontré

1. Seguridad en la Autenticación: El mayor reto técnico fue gestionar correctamente el flujo OAuth 2.0 sin exponer nunca el client_secret. La solución fue centralizar toda la lógica sensible en las rutas de servidor de Nuxt, actuando como un backend seguro.
2. Priorización Extrema: Con solo 24 horas, el mayor desafío es el tiempo. Tuve que ser implacable priorizando el MVP, enfocándome en resolver los tres problemas centrales y dejando fuera funcionalidades secundarias para garantizar un producto final pulido y funcional.
3. Datos vs. Conocimiento: La API de Google devuelve datos crudos. El verdadero desafío fue interpretar y transformar esa información en conocimiento útil, como el cálculo del "Health Score", que combina múltiples variables para crear una métrica accionable.

Logros de los que estoy orgullosa

• Construir una App Full-Stack Segura en 24h: No es solo un prototipo de frontend, sino una aplicación completa con un backend seguro que maneja autenticación y lógica de negocio.
• Crear una Herramienta Realmente Útil: Más allá de la tecnología, el "Health Score" es una funcionalidad con un impacto real potencial, que puede ayudar a Semillero Digital a no dejar a ningún estudiante atrás.
• Una Experiencia de Usuario Pulida: A pesar del tiempo limitado, gracias a Nuxt UI, la aplicación se siente intuitiva, moderna y fácil de usar.
• Dominar una API Compleja: Integrar con éxito la API de Google Classroom, manejando sus permisos y estructuras de datos bajo la presión de la hackathon.

Qué aprendí

A nivel técnico, esta hackathon solidificó mi conocimiento sobre la arquitectura serverless en Nuxt 3 y sobre cómo consumir APIs complejas de forma segura.

A nivel de producto, aprendí que la mejor tecnología es la que se vuelve invisible y simplemente resuelve un problema real. Mi guía constante fue la misión de Semillero Digital, lo que me ayudó a tomar decisiones centradas en el usuario final.

Y a nivel personal, aprendí que con un plan sólido, las herramientas adecuadas y mucha concentración, es posible crear y lanzar un producto significativo en un tiempo increíblemente corto.

Próximos pasos para AulaLens

AulaLens tiene un gran potencial para crecer y seguir aportando valor. Los próximos pasos serían:

1. Feedback Real: El paso más importante es presentar esta versión a Semillero Digital para obtener feedback de sus coordinadores y profesores y así iterar sobre las funcionalidades.
2. Notificaciones Inteligentes: Implementar un sistema de alertas por correo electrónico para avisar a los coordinadores cuando un estudiante es marcado con un "Health Score" bajo.
3. Integración con Google Calendar: Añadir un módulo de asistencia que se sincronice con las clases programadas en el calendario.
4. Comunidad Open Source: Mantener el proyecto como código abierto para que otras ONGs educativas con problemas similares puedan beneficiarse y contribuir a la herramienta.

La Historia Completa: De 0 a App Premiada en 24h

Este proyecto fue creado en una intensa maratón de 24 horas para la Vibeathon de Nerdearla. Si quieres conocer toda la historia, las decisiones técnicas, los errores que casi me cuestan la entrega y los aprendizajes del proceso, he escrito un artículo completo en mi blog.

Lee el post-mortem completo en Dev.to

Built With

• googleapis
• nuxt
• nuxt-auth
• typescript
• vercel