🎓 KENDI - Sistema Educativo

Documento Maestro de Implementación Completo

📋 Índice de Contenidos

🎯 Visión General del Sistema
🏗️ Arquitectura y Estructura
🔄 Flujos de Usuario Completos
📊 Modelos de Datos
💻 Guía de Implementación
🏦 Bancos de Contenido
📝 Sistema de Asignaciones
🎮 Players y Renderizado
🗺️ Roadmap de Desarrollo
🎯 Visión General del Sistema
¿Qué es KENDI?
KENDI es un sistema educativo gamificado que permite a los profesores crear contenido educativo interactivo (trivias, memoramas, infografías, etc.) y asignarlo a estudiantes organizados por niveles y menús temáticos.
🔑 Conceptos Clave
🏦 Banco de Contenido

Repositorio de actividades educativas. Cada banco contiene un tipo específico de contenido (trivia, memoria, infografía, etc.) con toda su información.

📝 Asignación

Conjunto de actividades organizadas que se muestran a los estudiantes en un nivel, menú y submenú específico.

🎮 Player

Componente visual que renderiza y ejecuta las actividades. Cada tipo de contenido tiene su propio player.

🎭 Usuarios del Sistema
👨‍🏫 Profesor (Teacher)
  • Crea bancos de contenido
  • Configura asignaciones
  • Define estructura de niveles/menús
  • Ve estadísticas y progreso
👨‍🎓 Estudiante (Student)
  • Ve su nivel asignado
  • Navega por menús y submenús
  • Realiza actividades
  • Ve su progreso y puntos
🏗️ Arquitectura y Estructura
📐 Clean Architecture
lib/ ├── core/ # Utilidades compartidas │ ├── constants/ │ ├── errors/ │ ├── usecase/ │ └── utils/ │ ├── features/ # Módulos por funcionalidad │ ├── auth/ │ ├── content_banks/ # Bancos de contenido │ ├── assignments/ # Sistema de asignaciones │ ├── players/ # Renderizadores │ └── dashboard/ # Dashboards (teacher/student) │ └── main.dart
Cada feature sigue la estructura:
data → domain → presentation
🗂️ Estructura de un Feature
feature_name/ ├── data/ │ ├── datasources/ # Firebase, APIs │ ├── models/ # Modelos con JSON │ └── repositories/ # Implementación │ ├── domain/ │ ├── entities/ # Objetos puros │ ├── repositories/ # Interfaces │ └── usecases/ # Casos de uso │ └── presentation/ ├── bloc/ # Gestión de estado ├── pages/ # Pantallas └── widgets/ # Componentes UI
🔄 Flujos de Usuario Completos
👨‍🏫 Flujo del Profesor
1
Crear Banco de Contenido
El profesor selecciona: Nivel → Tipo de contenido → Variante
Llena el formulario específico (texto, imágenes, audios, opciones)
↓
2
Crear Asignación
Selecciona: Nivel → Menú → Submenú
Agrega múltiples actividades seleccionando bancos
Define nombre de botones y orden
↓
3
Publicar
La asignación queda disponible para los estudiantes del nivel correspondiente
👨‍🎓 Flujo del Estudiante
1
Ingresar al Dashboard
Ve los menús disponibles de su nivel
↓
2
Seleccionar Menú
Ve los submenús dentro del menú seleccionado
↓
3
Seleccionar Submenú
Ve botones de actividades (nombres personalizados por el profesor)
↓
4
Realizar Actividad
El sistema abre el player correspondiente y renderiza el contenido
El estudiante completa la actividad
📊 Modelos de Datos Detallados
🏦 ContentBank (Banco de Contenido)
id: String (UUID)
level: String (primer, segundo, tercero, etc.)
contentType: String (trivia, memory, infographic, etc.)
variant: String (text, image, audio, mix)
data: Map<String, dynamic> (contenido específico)
createdBy: String (teacherId)
createdAt: DateTime
updatedAt: DateTime
Campo "data" varía según el tipo:
Para Trivia: pregunta, opciones, respuestaCorrecta, imageUrl, audioUrl
Para Memory: pares de cartas (texto/imagen)
Para Infografía: título, contenido, imágenes
📝 Assignment (Asignación)
id: String (UUID)
level: String
menu: String
submenu: String
activities: List<Activity>
createdBy: String (teacherId)
createdAt: DateTime
isActive: bool
🎯 Activity (Actividad dentro de Asignación)
contentBankId: String (referencia al banco)
buttonLabel: String (nombre del botón)
order: int (orden de aparición)
📈 StudentProgress (Progreso del Estudiante)
studentId: String
assignmentId: String
activityId: String
completed: bool
score: int (puntos obtenidos)
attempts: int
completedAt: DateTime
💻 Guía de Implementación
⚠️ Orden Recomendado:
1️⃣ Bancos de Contenido (sin esto, no hay nada que asignar)
2️⃣ Sistema de Asignaciones (conecta bancos con estudiantes)
3️⃣ Players (renderiza el contenido)
4️⃣ Dashboards (interfaces finales)
🗂️ Estructura Firestore Recomendada
/content_banks/{bankId} - level: "primero" - contentType: "trivia" - variant: "text" - data: {...} - createdBy: "teacherId" - createdAt: timestamp /assignments/{assignmentId} - level: "primero" - menu: "matematicas" - submenu: "sumas" - activities: [ { contentBankId: "bank123", buttonLabel: "Sumar números", order: 1 } ] /student_progress/{studentId}/assignments/{assignmentId}/activities/{activityId} - completed: true - score: 85 - attempts: 2 - completedAt: timestamp
🏦 Bancos de Contenido - Implementación Detallada
🎯 Tipos de Contenido Disponibles
Tipo Variantes Descripción
Trivia Text, Image, Audio, Mix Preguntas con opciones múltiples
Memory Game Text, Image, Mix Juego de encontrar pares
Infographic Static, Interactive Contenido visual informativo
Video Lesson Short, Long Videos educativos
Reading Short, Long, Illustrated Textos para leer
📝 Ejemplo: Estructura de Trivia
{ "id": "trivia_001", "level": "primero", "contentType": "trivia", "variant": "mix", "data": { "question": "¿Cuánto es 2 + 2?", "imageUrl": "https://storage.../suma.png", "audioUrl": "https://storage.../pregunta.mp3", "options": [ {"id": "a", "text": "3", "isCorrect": false}, {"id": "b", "text": "4", "isCorrect": true}, {"id": "c", "text": "5", "isCorrect": false} ], "explanation": "2 + 2 = 4 porque sumamos dos veces el número 2" }, "createdBy": "teacher123", "createdAt": "2025-01-15T10:30:00Z" }
🛠️ Flujo de Creación de Banco
1
Seleccionar Nivel
Primero, Segundo, Tercero, etc.
↓
2
Seleccionar Tipo de Contenido
Trivia, Memory, Infographic, Video, Reading
↓
3
Seleccionar Variante
Text, Image, Audio, Mix (según el tipo)
↓
4
Llenar Formulario Específico
- Editor de texto (flutter_quill)
- Subir imágenes
- Subir audios
- Definir opciones/respuestas
↓
5
Guardar en Firestore
El banco queda disponible para asignar
📝 Sistema de Asignaciones
Concepto Clave:
Una asignación es como crear una "clase virtual" donde seleccionas varios bancos de contenido y los organizas en un orden específico para que los estudiantes los completen.
🎯 Estructura de una Asignación
{ "id": "assignment_001", "level": "primero", "menu": "matematicas", "submenu": "sumas_basicas", "activities": [ { "contentBankId": "trivia_suma_001", "buttonLabel": "Aprende a Sumar", "order": 1 }, { "contentBankId": "memory_numeros_001", "buttonLabel": "Memorama de Números", "order": 2 }, { "contentBankId": "infographic_sumas_001", "buttonLabel": "Infografía: La Suma", "order": 3 } ], "createdBy": "teacher123", "isActive": true }
🔧 Formulario de Asignación

Campos del Formulario:

  • Nivel: Dropdown (Primero, Segundo, Tercero...)
  • Menú: Input de texto o dropdown predefinido
  • Submenú: Input de texto
  • Actividades: Lista dinámica donde:
    • Seleccionas un banco de contenido
    • Defines el nombre del botón
    • Puedes reordenar (drag & drop o botones ↑↓)
    • Puedes agregar/eliminar actividades
🎮 Players y Sistema de Renderizado
¿Qué es un Player?
Es el componente que toma el contenido de un banco y lo muestra de forma interactiva al estudiante. Cada tipo de contenido tiene su propio player.
🎯 Tipos de Players
🎲 Trivia Player
  • Muestra la pregunta (texto/imagen/audio)
  • Lista de opciones (botones)
  • Valida respuesta
  • Feedback visual (correcto/incorrecto)
  • Animación de confetti si es correcto
  • Botón "Siguiente"
  • Pantalla final con puntaje
🃏 Memory Player
  • Grid de cartas volteadas
  • Flip al hacer tap
  • Detecta pares
  • Animaciones
  • Contador de intentos
  • Timer (opcional)
  • Pantalla de victoria
📊 Infographic Player
  • Scroll vertical
  • Imágenes y textos ricos
  • Zoom en imágenes
  • Botón "Completar"
🎥 Video Player
  • Reproduce video
  • Controles de reproducción
  • Marca como visto al finalizar
🔄 Router de Players
class PlayerRouter { static Widget getPlayer(ContentBank bank) { switch (bank.contentType) { case 'trivia': return TriviaPlayer(bank: bank); case 'memory': return MemoryPlayer(bank: bank); case 'infographic': return InfographicPlayer(bank: bank); case 'video': return VideoPlayer(bank: bank); case 'reading': return ReadingPlayer(bank: bank); default: return ErrorWidget('Tipo no soportado'); } } }
🗺️ Roadmap de Desarrollo
📊 Prioridades de Implementación
Sprint Módulo Entregables Prioridad
1 Auth + Setup • Firebase configurado
• Login/Register
• Roles (teacher/student) 		CRÍTICA
2-3 Bancos de Contenido • CRUD completo
• Editor con flutter_quill
• Subida de archivos
• Al menos 3 tipos implementados 		CRÍTICA
4 Asignaciones • Formulario de asignación
• CRUD de asignaciones
• Validaciones 		CRÍTICA
5 Players (Renderizado) • TriviaPlayer
• MemoryPlayer
• InfographicPlayer
• Mínimo 3 tipos funcionando 		CRÍTICA
6 Student Dashboard • Navegación dinámica
• Carga de asignaciones
• Integración con players 		ALTA
7 Teacher Dashboard • Dashboard principal
• Gestión de contenido
• Estadísticas básicas 		ALTA
8+ Extras • Más players
• Sistema de puntos
• Competencias
• Analytics 		MEDIA
🔧 Paquetes Flutter Recomendados
📝 Editor de Contenido
dependencies: flutter_quill: ^9.0.0 image_picker: ^1.0.4 file_picker: ^6.0.0 firebase_storage: ^11.5.0

flutter_quill: Editor WYSIWYG para texto rico (negrita, cursiva, imágenes)
image_picker: Seleccionar imágenes
file_picker: Archivos (audio, video)
firebase_storage: Subir archivos

🎮 Players/Interactividad
dependencies: video_player: ^2.8.0 audioplayers: ^5.2.0 flip_card: ^0.7.0 confetti: ^0.7.0 lottie: ^2.7.0

video_player: Reproducir videos
audioplayers: Reproducir audios
flip_card: Para Memory Game
confetti: Animaciones de celebración
lottie: Animaciones

✅ Checklist de Implementación

Fase 1: Bancos de Contenido (Semanas 1-2)

  • ☐ Crear modelos de datos (ContentBankModel)
  • ☐ Implementar datasource con Firebase
  • ☐ Crear repositorio
  • ☐ Implementar casos de uso (Create, Read, Update, Delete)
  • ☐ Crear BLoC para gestión de estado
  • ☐ Diseñar UI del flujo: Nivel → Tipo → Variante
  • ☐ Integrar flutter_quill para editor
  • ☐ Implementar subida de imágenes a Firebase Storage
  • ☐ Implementar subida de audios
  • ☐ Crear formularios específicos por variante
  • ☐ Validaciones de campos
  • ☐ Guardar en Firestore
  • ☐ Testing básico

Fase 2: Asignaciones (Semana 3)

  • ☐ Crear modelos de asignación
  • ☐ Implementar datasource
  • ☐ Crear repositorio y casos de uso
  • ☐ Crear BLoC
  • ☐ Diseñar UI del formulario de asignación
  • ☐ Dropdown para seleccionar nivel/menú/submenú
  • ☐ Lista dinámica de actividades (agregar/quitar)
  • ☐ Selector de banco por cada actividad
  • ☐ Campo para nombre del botón
  • ☐ Definir orden de actividades
  • ☐ Guardar en Firestore
  • ☐ Página para ver/editar asignaciones

Fase 3: Renderizado (Semana 4)

  • ☐ Crear estructura base de Players
  • ☐ Implementar TriviaPlayer:
    • ☐ Mostrar pregunta
    • ☐ Mostrar imágenes
    • ☐ Reproducir audio (opcional)
    • ☐ Mostrar opciones
    • ☐ Validar respuesta
    • ☐ Feedback visual
    • ☐ Siguiente pregunta
    • ☐ Pantalla final con puntaje
  • ☐ Implementar MemoryGamePlayer
  • ☐ Implementar InfographicPlayer
  • ☐ Router para detectar tipo y abrir player correcto

Fase 4: Student Dashboard (Semana 5)

  • ☐ Obtener nivel del estudiante logueado
  • ☐ Cargar menús de su nivel
  • ☐ Mostrar menús en grid/lista
  • ☐ Al click → cargar submenús
  • ☐ Al click en submenú → cargar asignaciones
  • ☐ Mostrar botones de actividades dinámicamente
  • ☐ Al click en actividad → navegar al player
  • ☐ Historial de actividades completadas (opcional)

🎉 ¡TODO LISTO PARA IMPLEMENTAR!

Ahora tienes una visión cristalina del sistema completo.
Conoces cada pieza, cómo se conectan, y el orden exacto de implementación.

💪 Siguiente paso: Empezar con el módulo de Bancos de Contenido

📚 KENDI - Sistema de Gestión Educativa

Documento Maestro v1.0 | Creado para guiar la implementación completa del sistema

¡Con este documento, cualquier desarrollador puede entender e implementar KENDI! 🔥