🎓 KENDI - DOCUMENTO MAESTRO

Sistema Completo de Gestión de Contenido Educativo

Guía cristalina para entender e implementar TODO el sistema

📑 Índice de Contenidos

🎯 1. Visión General
📊 2. Estado Actual
💎 3. El Núcleo del Sistema
👨‍🏫 4. Flujo del Docente
👨‍🎓 5. Flujo del Estudiante
🗃️ 6. Estructura de Datos
📦 7. Módulos a Implementar
🚀 8. Plan de Implementación
🎯 1. VISIÓN GENERAL DEL SISTEMA
¿Qué es KENDI?

KENDI es una plataforma educativa interactiva donde los docentes crean contenido educativo dinámico (trivias, juegos, lecciones) organizado por niveles educativos, y los estudiantes consumen ese contenido a través de un sistema de menús y actividades gamificadas.

🎪 Los 4 Pilares del Sistema
📚
1. NIVELES EDUCATIVOS

18 niveles fijos desde Maternal hasta Tercer Curso de Bachiller

📂
2. MENÚS Y SUBMENÚS

Estructura de navegación creada por el docente (ej: Colores → Primarios)

🗄️
3. BANCOS DE CONTENIDO

El contenido real: preguntas, juegos, lecciones, videos

🔗
4. ASIGNACIONES

La conexión que une todo: Menú + Submenú + Banco

📊 2. ESTADO ACTUAL DEL PROYECTO

✅ LO QUE YA ESTÁ

  • Autenticación completa (login, registro multi-rol)
  • 18 Niveles educativos definidos en JSON
  • CRUD de Menús/Submenús funcionando
  • Navegación por roles (docente, estudiante, admin)
  • Sistema de iconos para menús
  • Clean Architecture implementada
🎉 Estimación: El sistema está al ~30% de completitud

❌ LO QUE FALTA (CRÍTICO)

  • Módulo de Bancos de Contenido (0%)
  • Editor de preguntas/contenido (0%)
  • Sistema de Asignaciones (0%)
  • Renderizado de contenido (0%)
  • Student Dashboard funcional (solo UI)
  • Teacher Dashboard (vacío)
⚠️ Sin esto: El sistema no funciona. Los menús están vacíos.
💡 EL PROBLEMA ACTUAL:

Tienes la "cáscara" del sistema (autenticación + menús) pero falta el corazón: el contenido educativo y la forma de conectarlo todo. Es como tener un restaurante con menú pero sin comida.
💎 3. EL NÚCLEO DEL SISTEMA (LA CLAVE)
🔑 LA REVELACIÓN:

El sistema funciona con 3 componentes conectados:
  1. Menús/Submenús → La navegación (YA ESTÁ ✅)
  2. Bancos de Contenido → El contenido educativo (FALTA ❌)
  3. Asignaciones → La conexión entre ambos (FALTA ❌)
🔗 Cómo se Conecta Todo
📱 Ejemplo Práctico: COLORES para Preescolar
🌈
COLORES
Menú Principal
↓
Submenús:
🔴 Primarios
🟣 Secundarios
↓
Click en "Primarios" → El estudiante ve:
🎯 AQUÍ ESTÁ LA MAGIA:

Cada botón (CONOCER, ASOCIAR, JUGAR) está vinculado a un Banco de Contenido:
  • 📖 CONOCER → Banco B001 (Infografía de colores primarios)
  • 🎯 ASOCIAR → Banco B002 (Trivia con imágenes)
  • 🎮 JUGAR → Banco B003 (Memory Game)
👨‍🏫 4. FLUJO COMPLETO DEL DOCENTE
1
Selecciona el Nivel Educativo
Elige uno de los 18 niveles: Maternal, Preescolar, Primer Grado, etc. ✅ YA FUNCIONA
↓
2
Crea los Menús
Ejemplo: Crea el menú "COLORES" 🌈 para Preescolar ✅ YA FUNCIONA
↓
3
Crea los Submenús
Dentro de "COLORES", crea: "Primarios" y "Secundarios" ✅ YA FUNCIONA
↓
4
Crea Bancos de Contenido
AQUÍ EMPIEZA LO QUE FALTA:
• Selecciona tipo: Trivia
• Selecciona variante: Trivia con Imágenes
• Crea 10 preguntas sobre colores primarios
• Agrega imágenes a cada pregunta/opción
• Guarda el banco como "B001" ❌ NO EXISTE
↓
5
Hace la Asignación (¡LA CONEXIÓN!)
EL PASO MÁS IMPORTANTE:
• Nivel: Preescolar
• Menú: COLORES
• Submenú: Primarios
• Actividad 1: Nombre del botón "CONOCER" → Banco B001
• Actividad 2: Nombre del botón "ASOCIAR" → Banco B002
• Actividad 3: Nombre del botón "JUGAR" → Banco B003 ❌ NO EXISTE
↓
✅
¡Listo! El Contenido está Disponible
Ahora los estudiantes de Preescolar pueden entrar a COLORES → Primarios y verán los 3 botones con el contenido asignado.
💡 NOTA CLAVE:

El mismo banco puede reutilizarse. Por ejemplo, el Banco B001 (Trivia de colores) puede asignarse también a "COLORES → Secundarios" o a otro nivel educativo.
👨‍🎓 5. FLUJO COMPLETO DEL ESTUDIANTE
1
Entra a su Dashboard
Ve los menús disponibles para su nivel (Preescolar): COLORES, NÚMEROS, ANIMALES ⚠️ SOLO UI
↓
2
Click en "COLORES" 🌈
El sistema carga los submenús: PRIMARIOS | SECUNDARIOS ❌ FALTA IMPLEMENTAR
↓
3
Click en "PRIMARIOS"
El sistema consulta las asignaciones y muestra los botones:
• 📖 CONOCER
• 🎯 ASOCIAR
• 🎮 JUGAR ❌ FALTA IMPLEMENTAR
↓
4
Click en "ASOCIAR" 🎯
El sistema:
1. Lee la asignación → Banco B002
2. Carga el Banco B002 (Trivia con Imágenes)
3. Renderiza la trivia con sus 10 preguntas ❌ FALTA IMPLEMENTAR
↓
5
Juega y Responde
• Ve la pregunta: "¿De qué color es el sol?"
• Ve 4 opciones con imágenes
• Selecciona la respuesta
• Recibe feedback (correcto/incorrecto)
• Avanza a la siguiente pregunta ❌ FALTA IMPLEMENTAR
↓
✅
Completa la Actividad
• Ve su puntaje final
• Gana logros/insignias
• Puede volver al menú y elegir otra actividad
🎉 RESULTADO FINAL:

El estudiante tiene una experiencia gamificada donde navega por menús temáticos y accede a contenido educativo interactivo creado por su docente.
🗃️ 6. ESTRUCTURA DE DATOS EN FIREBASE
📊 Colecciones/Tablas Necesarias
Colección Estado Descripción Campos Principales
niveles ✅ EXISTE 18 niveles educativos fijos id, nombre, edad_min, edad_max, categoria
menus ✅ EXISTE Menús creados por docentes id, nivel_id, nombre, icono, descripcion
submenus ✅ EXISTE Submenús de cada menú id, menu_id, nombre, orden
bancos_contenido ❌ FALTA Contenido educativo (preguntas, juegos, lecciones) id, nivel_id, tipo, variante, data (JSON), creado_por
asignaciones ❌ FALTA Vincula menús con bancos id, nivel_id, menu_id, submenu_id, banco_id, nombre_boton, orden
📝 Ejemplo de Estructuras JSON
🗄️ Banco de Contenido (bancos_contenido)
{ "banco_id": "B001", "nivel_id": "preescolar", "tipo": "trivia", "variante": "imagenes", "nombre": "Trivia de Colores Primarios", "descripcion": "Preguntas sobre colores primarios con imágenes", "creado_por": "docente_123", "fecha_creacion": "2025-01-15T10:30:00Z", "data": { "preguntas": [ { "id": 1, "pregunta": "¿De qué color es el sol?", "imagen_pregunta": "https://storage.../sol.png", "audio_pregunta": "https://storage.../pregunta1.mp3", "opciones": [ { "id": "A", "texto": "Amarillo", "imagen": "https://storage.../amarillo.png", "correcta": true }, { "id": "B", "texto": "Azul", "imagen": "https://storage.../azul.png", "correcta": false }, { "id": "C", "texto": "Rojo", "imagen": "https://storage.../rojo.png", "correcta": false }, { "id": "D", "texto": "Verde", "imagen": "https://storage.../verde.png", "correcta": false } ], "explicacion": "¡Muy bien! El sol es de color amarillo.", "puntos": 10 } // ... más preguntas ], "configuracion": { "tiempo_por_pregunta": 30, "mostrar_explicacion": true, "reproducir_audio": true, "orden_aleatorio": false } } }
🔗 Asignación (asignaciones)
{ "asignacion_id": "A001", "nivel_id": "preescolar", "menu_id": "M001", // COLORES "submenu_id": "SM001", // PRIMARIOS "actividades": [ { "orden": 1, "nombre_boton": "CONOCER", "icono": "📖", "banco_id": "B002", // Banco de Infografía "activo": true }, { "orden": 2, "nombre_boton": "ASOCIAR", "icono": "🎯", "banco_id": "B001", // Banco de Trivia "activo": true }, { "orden": 3, "nombre_boton": "JUGAR", "icono": "🎮", "banco_id": "B003", // Banco de Memory "activo": true } ], "fecha_creacion": "2025-01-15T11:00:00Z", "creado_por": "docente_123" }
💡 NOTA IMPORTANTE:

El campo data en los bancos es flexible y cambia según el tipo/variante:
  • Trivia → tiene "preguntas"
  • Infografía → tiene "imagen_principal", "texto"
  • Memory Game → tiene "pares"
  • Video → tiene "url_video", "duracion"
📦 7. MÓDULOS A IMPLEMENTAR EN FLUTTER
1
Módulo: BANCOS DE CONTENIDO
⏱️ Semanas 1-2

Ubicación: features/content_banks/

Componentes:

  • Data Layer:
    • ContentBankRemoteDataSource - API calls a Firebase
    • ContentBankModel - Modelo de datos
    • ContentBankRepositoryImpl - Implementación
  • Domain Layer:
    • ContentBankEntity - Entidad de negocio
    • ContentBankRepository - Interfaz
    • CreateContentBankUseCase
    • GetContentBanksByLevelUseCase
    • UpdateContentBankUseCase
  • Presentation Layer:
    • ContentBankBloc - Gestión de estado
    • CreateBankPage - Flujo de creación (nivel → tipo → variante)
    • BankEditorPage - Editor de contenido con flutter_quill
    • BankListPage - Lista de bancos creados
🔥 PRIORIDAD MÁXIMA: Sin esto, no hay contenido educativo.
2
Módulo: ASIGNACIONES
⏱️ Semana 3

Ubicación: features/assignments/

Componentes:

  • Data + Domain: Similar estructura a content_banks
  • Presentation:
    • AssignmentBloc
    • CreateAssignmentPage - Formulario para asignar:
      • Seleccionar nivel
      • Seleccionar menú
      • Seleccionar submenú
      • Agregar actividades (nombre botón + banco)
    • AssignmentListPage - Ver asignaciones existentes
🔗 CONEXIÓN CRÍTICA: Este módulo une menús con bancos. Es el pegamento del sistema.
3
Módulo: RENDERIZADO DE CONTENIDO
⏱️ Semana 4

Ubicación: features/student_dashboard/presentation/players/

Componentes (Players):

  • TriviaPlayer - Renderiza trivias
    • Muestra preguntas con imágenes
    • Maneja selección de respuestas
    • Muestra feedback
    • Calcula puntaje
  • MemoryGamePlayer - Juego de memoria
  • DragDropPlayer - Arrastrar y soltar
  • InfographicPlayer - Mostrar infografías
  • VideoPlayer - Reproducir videos
  • AudioPlayer - Reproducir audios
  • ReadingPlayer - Contenido de lectura

Lógica:

  • Estudiante hace click en botón "ASOCIAR"
  • Sistema lee la asignación → obtiene banco_id
  • Carga el banco desde Firebase
  • Lee el tipo y variante
  • Redirige al Player correspondiente
  • Player renderiza el contenido según la data
4
Módulo: STUDENT DASHBOARD COMPLETO
⏱️ Semana 5

Ubicación: features/student_dashboard/

Implementar:

  • Data Layer para obtener menús del estudiante
  • Cargar asignaciones del nivel del estudiante
  • Mostrar menús dinámicamente
  • Al click → mostrar submenús
  • Al click en submenú → mostrar botones de actividades
  • Al click en actividad → abrir el player correspondiente
  • Tracking de progreso (opcional para después)
5
Módulo: TEACHER DASHBOARD
⏱️ Semana 6

Ubicación: features/teacher_dashboard/

Funcionalidades:

  • Dashboard con estadísticas
  • Accesos rápidos a:
    • Crear Menú
    • Crear Banco
    • Hacer Asignación
  • Ver lista de sus bancos creados
  • Ver lista de sus asignaciones
  • Editar/Eliminar contenido
🚀 8. PLAN DE IMPLEMENTACIÓN
📅 Cronograma Detallado
Semana Módulo Entregables Prioridad
1-2 Bancos de Contenido • CRUD completo
• Editor con flutter_quill
• Subida de imágenes/audio
• Formulario por tipo/variante 		CRÍTICA
3 Asignaciones • Formulario de asignación
• CRUD de asignaciones
• Validaciones 		CRÍTICA
4 Players (Renderizado) • TriviaPlayer
• MemoryPlayer
• InfographicPlayer
• Mínimo 3 tipos funcionando 		CRÍTICA
5 Student Dashboard • Navegación dinámica
• Carga de asignaciones
• Integración con players 		ALTA
6 Teacher Dashboard • Dashboard principal
• Gestión de contenido
• Estadísticas básicas 		ALTA
7+ 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! 🔥