semillero digital webapp

La capa de inteligencia que le faltaba a tu Google Classroom. Visualiza el progreso por células, gestiona la asistencia y obtén métricas claras al instante.

Comment

posted an update —

Semillero Digital - Dashboard de Gestión

Versión 1.1.0 | Estado: PRODUCCIÓN

Una aplicación web completa desarrollada con React que funciona como dashboard de gestión para la organización Semillero Digital. Esta aplicación se integra con Google Classroom API y Telegram Bot para proporcionar vistas y métricas personalizadas que resuelven problemas de seguimiento de progreso, comunicación y obtención de métricas educativas.

Características Principales

Branding Oficial

  • Logo Oficial Integrado: Logo oficial de Semillero Digital en toda la aplicación
  • Diseño Consistente: Colores y tipografía acorde al branding organizacional
  • Favicon Personalizado: Icono oficial en el navegador

Autenticación y Seguridad

  • Google OAuth: Autenticación segura con cuentas de Google
  • Sistema de Roles: Permisos específicos por rol (Estudiante, Asistente, Profesor, Coordinador)
  • Protección de Datos: Acceso controlado según el rol del usuario

Dashboards Inteligentes

  • Vista Estudiante: Progreso personal, tareas y calificaciones
  • Vista Asistente: Gestión de células asignadas y seguimiento de estudiantes
  • Vista Profesor/Coordinador: Control completo de cursos, asistencia y reportes

Integraciones Avanzadas

  • Google Classroom API: Sincronización automática de cursos, tareas y entregas
  • Google Calendar API: Gestión de asistencia basada en eventos del calendario
  • Google People API: Perfiles de usuario enriquecidos
  • Telegram Bot: Notificaciones y comunicación directa con estudiantes

Funcionalidades Avanzadas

  • Sistema de Células: Organización de estudiantes en grupos con asistentes asignados
  • Módulo de Asistencia: Control de asistencia integrado con Google Calendar
  • Reportes y Exportación: Exportación de datos a CSV para análisis detallado
  • Notificaciones Telegram: Comunicación automática con estudiantes
  • Interfaz Responsiva: Diseño moderno optimizado para todos los dispositivos

Stack Tecnológico

Frontend

  • React 18+ con Hooks y componentes funcionales
  • Vite para desarrollo rápido y build optimizado
  • Tailwind CSS para diseño moderno y responsivo

Backend y Servicios

  • Firebase Authentication con Google OAuth
  • Firebase Firestore para base de datos NoSQL en tiempo real
  • Node.js para el servidor del bot de Telegram

APIs e Integraciones

  • Google Classroom API - Gestión de cursos y tareas
  • Google Calendar API - Control de asistencia
  • Google People API - Perfiles de usuario
  • Telegram Bot API - Notificaciones y comunicación

Despliegue y DevOps

  • Netlify / Firebase Hosting / Vercel compatibles
  • GitHub Actions para CI/CD (opcional)
  • ESLint y Prettier para calidad de código

Prerrequisitos

Obligatorios

  1. Node.js (versión 16 o superior)
  2. Cuenta de Google Cloud Platform con proyecto configurado
  3. Proyecto de Firebase con Authentication y Firestore habilitados

APIs Requeridas en Google Cloud Console

  • Google Classroom API
  • Google Calendar API
  • Google People API

Opcional (para notificaciones)

  1. Bot de Telegram creado con @BotFather
  2. Servidor Node.js para el bot (puede ser el mismo servidor)

Configuración del Proyecto

1. Clonar el Repositorio

git clone <repository-url>
cd semillero-digital-webapp

2. Instalar Dependencias

npm install

3. Configurar Firebase

  1. Ve a Firebase Console
  2. Crea un nuevo proyecto o selecciona uno existente
  3. Habilita Authentication con el proveedor de Google
  4. Habilita Firestore Database
  5. Ve a Configuración del Proyecto > General > Tus apps
  6. Copia la configuración de Firebase

4. Configurar Google Cloud Console

  1. Ve a Google Cloud Console
  2. Selecciona tu proyecto de Firebase
  3. Habilita las siguientes APIs:
    • Google Classroom API
    • Google Calendar API
    • Google People API
  4. Configura la pantalla de consentimiento OAuth
  5. Agrega los dominios autorizados

5. Variables de Entorno

  1. Copia el archivo de ejemplo:

    cp .env.example .env

  2. Edita .env con tu configuración completa:

Firebase (Obligatorio)

VITE_FIREBASE_API_KEY=tu_api_key_aqui
VITE_FIREBASE_AUTH_DOMAIN=tu_proyecto.firebaseapp.com
VITE_FIREBASE_PROJECT_ID=tu_proyecto_id
VITE_FIREBASE_STORAGE_BUCKET=tu_proyecto.appspot.com
VITE_FIREBASE_MESSAGING_SENDER_ID=tu_sender_id
VITE_FIREBASE_APP_ID=tu_app_id

Telegram Bot (Opcional)

# Para habilitar notificaciones por Telegram
VITE_TELEGRAM_BOT_TOKEN=123456789:ABCdefGHIjklMNOpqrsTUVwxyz

Opcional

# Google Analytics (opcional)
VITE_FIREBASE_MEASUREMENT_ID=tu_measurement_id_aqui

Nota: Sin el token de Telegram, la aplicación funcionará normalmente pero no enviará notificaciones. Ver Configuración de Telegram Bot para más detalles.

6. Ejecutar en Desarrollo

npm run dev

La aplicación estará disponible en http://localhost:3000

Estructura de la Base de Datos

Firestore Collections

users

{
  email: "usuario@email.com",
  name: "Nombre Completo",
  photoURL: "url_de_foto",
  role: "student|assistant|professor|coordinator"
}

courses/{courseId}

{
  name: "Nombre del Curso",
  ownerId: "id_del_profesor"
}

courses/{courseId}/cells/{cellId}

{
  name: "Célula 1",
  assistantEmail: "asistente@email.com",
  studentEmails: ["estudiante1@email.com", "estudiante2@email.com"]
}

courses/{courseId}/attendance/{eventId}

{
  eventSummary: "Título del Evento",
  eventDate: "2024-01-15T10:00:00Z",
  records: {
    "estudiante1@email.com": "presente",
    "estudiante2@email.com": "ausente"
  }
}

Roles de Usuario

Estudiante

  • Ver progreso personal en tareas
  • Consultar calificaciones
  • Acceso a enlaces de Google Classroom

Asistente

  • Gestionar células asignadas
  • Ver progreso de estudiantes en sus células
  • Seguimiento de entregas de tareas

Profesor/Coordinador

  • Vista completa de todos los cursos
  • Gestión de asistencia
  • Reportes y exportación de datos
  • Organización por células
  • Envío de notificaciones por Telegram
  • Gestión de números de teléfono de estudiantes

Configuración de Telegram Bot

¿Por qué Telegram?

El bot de Telegram permite enviar notificaciones automáticas a los estudiantes sobre:

  • Nuevas tareas asignadas
  • Recordatorios de fechas límite
  • Calificaciones publicadas
  • Anuncios importantes del curso

Configuración Rápida

1. Crear el Bot

  1. Contacta a @BotFather en Telegram
  2. Envía /newbot y sigue las instrucciones
  3. Guarda el token que te proporciona

2. Configurar en la Aplicación

# Agrega a tu archivo .env
VITE_TELEGRAM_BOT_TOKEN=tu_token_aqui

3. Configurar Comandos del Bot

Envía a @BotFather /setcommands y agrega:

start - Iniciar el bot y registrarse
help - Mostrar ayuda
info - Información del curso
unsubscribe - Cancelar notificaciones

Uso en la Aplicación

  1. Profesores: Pueden agregar números de teléfono y enviar mensajes
  2. Estudiantes: Reciben notificaciones automáticas del bot
  3. Grupos: Crear grupos de curso para comunicación masiva

Guía Completa: Ver TELEGRAM_SETUP.md para instrucciones detalladas.

Despliegue

Netlify

  1. Construir la aplicación:

    npm run build

  2. La carpeta dist contiene los archivos para despliegue

  3. En Netlify:

    • Conecta tu repositorio
    • Configura las variables de entorno
    • Comando de build: npm run build
    • Directorio de publicación: dist

Variables de Entorno en Producción

Obligatorias

Configura estas variables en tu plataforma de despliegue:

  • VITE_FIREBASE_API_KEY
  • VITE_FIREBASE_AUTH_DOMAIN
  • VITE_FIREBASE_PROJECT_ID
  • VITE_FIREBASE_STORAGE_BUCKET
  • VITE_FIREBASE_MESSAGING_SENDER_ID
  • VITE_FIREBASE_APP_ID

Opcionales

  • VITE_TELEGRAM_BOT_TOKEN (para notificaciones)
  • VITE_FIREBASE_MEASUREMENT_ID (para analytics)

Seguridad

  • Todas las APIs requieren autenticación
  • Los permisos se basan en roles de usuario
  • Las reglas de Firestore deben configurarse apropiadamente
  • Los tokens de acceso se manejan de forma segura

Configuración Inicial de Datos

Crear Usuarios Iniciales

  1. Los usuarios se crean automáticamente al iniciar sesión por primera vez
  2. El rol por defecto es "student"
  3. Los administradores deben cambiar los roles manualmente en Firestore

Configurar Células

  1. Los profesores/coordinadores pueden crear células desde el dashboard
  2. Asignar asistentes a cada célula
  3. Agregar estudiantes a las células correspondientes

Solución de Problemas

Error de Autenticación

  • Verifica que las APIs estén habilitadas en Google Cloud Console
  • Confirma que los dominios estén autorizados en OAuth
  • Revisa la configuración de Firebase Authentication

Error de Permisos de API

  • Asegúrate de que el usuario tenga acceso a Google Classroom
  • Verifica que los scopes estén correctamente configurados
  • Confirma que el usuario sea profesor o estudiante en los cursos

Problemas de Firestore

  • Revisa las reglas de seguridad de Firestore
  • Confirma que el proyecto de Firebase esté correctamente configurado
  • Verifica que las colecciones existan

Log in or sign up for Devpost to join the conversation.