🏗️Arquitectura del Sistema - ToLearn

Este documento describe la arquitectura técnica de la plataforma ToLearn, sus componentes principales y cómo interactúan entre sí.

📋 Tabla de Contenidos

• Visión General

• Arquitectura de Alto Nivel

• Componentes del Sistema

• Modelo de Datos

• Flujo de Datos

• Seguridad

• Escalabilidad

🎯 Visión General

ToLearn está construida como una aplicación web monolítica usando Django, con arquitectura MVC (Modelo-Vista-Controlador) ampliada con funcionalidades de tiempo real mediante WebSockets.

Stack Tecnológico

┌─────────────────────────────────────────────────────┐
│                   FRONTEND                          │
│  HTML5 + CSS3 + JavaScript + Bootstrap + CKEditor   │
└─────────────────────────────────────────────────────┘
                        ↕
┌─────────────────────────────────────────────────────┐
│                 APPLICATION LAYER                   │
│         Django 5.2.4 + Django Channels              │
│  (HTTP/HTTPS + WebSocket + ASGI + WSGI)            │
└─────────────────────────────────────────────────────┘
                        ↕
┌─────────────────────────────────────────────────────┐
│                   DATA LAYER                        │
│    PostgreSQL + Redis + S3 Storage                  │
└─────────────────────────────────────────────────────┘

🏛️ Arquitectura de Alto Nivel

Diagrama de Arquitectura

                    ┌──────────────┐
                    │   Cliente    │
                    │  (Browser)   │
                    └──────┬───────┘
                           │
                           ↓
                    ┌──────────────┐
                    │    Nginx     │
                    │ (Reverse     │
                    │  Proxy)      │
                    └──┬───────┬───┘
                       │       │
            HTTP/HTTPS │       │ WebSocket
                       │       │
         ┌─────────────┘       └─────────────┐
         ↓                                    ↓
┌─────────────────┐                  ┌───────────────┐
│   Gunicorn      │                  │    Daphne     │
│  (WSGI Server)  │                  │ (ASGI Server) │
└────────┬────────┘                  └───────┬───────┘
         │                                    │
         └──────────┬────────────────────────┘
                    ↓
         ┌──────────────────────┐
         │   Django Application │
         │    testfox.wsgi      │
         │    testfox.asgi      │
         └──────────┬───────────┘
                    │
         ┌──────────┼───────────┐
         ↓          ↓           ↓
┌──────────────┐ ┌──────────┐ ┌────────────┐
│  PostgreSQL  │ │  Redis   │ │ S3 Storage │
│  (Database)  │ │ (Cache)  │ │  (Media)   │
└──────────────┘ └──────────┘ └────────────┘

Componentes Principales

1. Capa de Presentación (Frontend)

   • Plantillas HTML/CSS

   • JavaScript para interactividad

   • Bootstrap para diseño responsive

2. Capa de Aplicación (Backend)

   • Django Framework

   • Django Channels para WebSockets

   • Aplicaciones modulares

3. Capa de Datos

   • PostgreSQL para datos estructurados

   • Redis para cache y WebSocket

   • S3 para archivos multimedia

🧩 Componentes del Sistema

Estructura de Aplicaciones Django

testfox/                    # Proyecto principal
├── accounts/              # Autenticación y OAuth
│   ├── adapter.py        # Adaptador OAuth personalizado
│   └── apps.py           # Configuración de la app
│
├── homepage/             # Páginas públicas
│   ├── views.py         # Vistas principales
│   ├── urls.py          # Rutas públicas
│   └── sitemaps.py      # Mapa del sitio
│
├── dashboard/            # Panel de control
│   ├── models.py        # Modelos de evaluaciones
│   ├── views.py         # Lógica del dashboard
│   └── admin.py         # Administración
│
├── courses/              # Sistema de cursos
│   ├── models.py        # Modelos de cursos/lecciones
│   ├── views.py         # Visualización de cursos
│   ├── admin.py         # Gestión de cursos
│   └── translation.py   # Configuración multiidioma
│
├── webinar/              # Webinars en tiempo real
│   ├── models.py        # Modelos de salas
│   ├── views.py         # Lógica de webinars
│   ├── consumers.py     # Consumidores WebSocket
│   └── routing.py       # Rutas WebSocket
│
├── adminpanel/           # Panel administrativo
│   ├── views.py         # Vistas administrativas
│   └── urls.py          # Rutas admin
│
└── testfox/              # Configuración del proyecto
    ├── settings.py      # Configuración principal
    ├── urls.py          # Rutas globales
    ├── wsgi.py          # Servidor WSGI
    ├── asgi.py          # Servidor ASGI
    ├── routing.py       # Enrutamiento WebSocket
    └── middleware.py    # Middleware personalizado

1. Accounts (Autenticación)

Responsabilidades:

• Autenticación de usuarios

• Integración OAuth con Google

• Gestión de sesiones

Componentes Clave:

• NoSignupSocialAccountAdapter: Previene registro automático con OAuth

• Integración con django-allauth

Flujo de Autenticación:

Usuario → Login Form → Django Auth
                    ↓
              ¿Autenticado? → Sí → Dashboard
                    ↓
                   No
                    ↓
            OAuth Google → Verificar → Dashboard

2. Homepage (Portal Público)

Responsabilidades:

• Página principal

• Páginas informativas

• Login/Registro

• Selector de idioma

Vistas Principales:

• home(): Página principal

• signin(): Autenticación

• signup(): Registro

• logoutuser(): Cierre de sesión

• set_language(): Cambio de idioma

3. Dashboard (Panel de Control)

Responsabilidades:

• Panel principal del usuario

• Gestión de evaluaciones

• Visualización de calificaciones

• Envío de tareas

Modelos Principales:

# Aulas virtuales
ClassRoom
  ├── name
  └── students (ManyToMany → User)

# Evaluaciones
Assignment
  ├── title
  ├── type (homework/exam)
  ├── difficulty (easy/medium/hard)
  ├── time_limit
  ├── require_fullscreen
  └── due_date

# Preguntas
Question
  ├── assignment (FK → Assignment)
  ├── question_text
  ├── question_type
  └── points

# Respuestas
Answer
  ├── question (FK → Question)
  ├── submission (FK → Submission)
  └── answer_text

# Envíos
Submission
  ├── assignment (FK → Assignment)
  ├── student (FK → User)
  ├── score
  ├── submitted_at
  └── status

Flujo de Evaluación:

Profesor crea Assignment
       ↓
Asigna a estudiantes/clases
       ↓
Estudiante accede al examen
       ↓
Responde preguntas
       ↓
Envía respuestas (Submission)
       ↓
Sistema calcula puntuación
       ↓
Profesor revisa y comenta

4. Courses (Gestión de Cursos)

Responsabilidades:

• Creación y gestión de cursos

• Organización de lecciones

• Control de acceso

• Materiales adicionales

Modelos Principales:

Course
  ├── title
  ├── description
  ├── status (nuevo/activo/archivo)
  ├── photo
  ├── student_access (ManyToMany → User)
  └── class_access (ManyToMany → ClassRoom)

Lesson
  ├── course (FK → Course)
  ├── order
  ├── title
  ├── description
  ├── is_active
  ├── activation_date
  └── deactivation_date

Task
  ├── lesson (FK → Lesson)
  ├── order
  ├── title
  ├── description
  └── task_type

AdditionalMaterial
  ├── lesson (FK → Lesson)
  ├── title
  ├── material_type
  └── file/link

Control de Acceso:

Usuario → Intenta acceder al curso
              ↓
        ¿Tiene acceso?
      (directo o por clase)
              ↓
          Sí → Mostrar contenido
              ↓
          No → Error 403

5. Webinar (Salas Virtuales)

Responsabilidades:

• Videoconferencias en tiempo real

• Chat en vivo

• Pizarra colaborativa

• Compartir archivos

Modelos Principales:

WebinarRoom
  ├── name
  ├── miro_url (pizarra)
  ├── current_file
  └── current_page

ChatMessage
  ├── room (FK → WebinarRoom)
  ├── user (FK → User)
  ├── message
  └── timestamp

UploadedFile
  ├── room (FK → WebinarRoom)
  ├── file
  ├── uploaded_by (FK → User)
  └── uploaded_at

Arquitectura WebSocket:

# routing.py
websocket_urlpatterns = [
    path('ws/webinar/<str:room_name>/', WebinarConsumer.as_asgi()),
]

# consumers.py
class WebinarConsumer(AsyncWebsocketConsumer):
    async def connect()
    async def disconnect()
    async def receive()
    async def chat_message()

Flujo WebSocket:

Cliente → WebSocket handshake → Daphne
                                   ↓
                           WebinarConsumer
                                   ↓
                              Redis (pub/sub)
                                   ↓
                          Broadcast a todos
                                   ↓
                      Clientes en la sala

6. AdminPanel (Administración)

Responsabilidades:

• Gestión avanzada de usuarios

• Estadísticas del sistema

• Gestión de cursos y evaluaciones

• Configuración global

Funcionalidades:

• CRUD completo de todos los modelos

• Importación/exportación de datos

• Generación de reportes

• Gestión de permisos

💾 Modelo de Datos

Diagrama de Relaciones

┌──────────────┐
│     User     │ (Django built-in)
│  (Usuario)   │
└──────┬───────┘
       │
       │ 1:1
       ↓
┌──────────────┐
│ UserProfile  │
│   (Perfil)   │
└──────┬───────┘
       │
       │ M:N (through StudentCourseAccess)
       ↓
┌──────────────┐      1:N      ┌───────────┐
│    Course    │───────────────→│  Lesson   │
│   (Curso)    │                │ (Lección) │
└──────────────┘                └─────┬─────┘
       │                              │
       │ M:N                          │ 1:N
       ↓                              ↓
┌──────────────┐                ┌───────────┐
│  ClassRoom   │                │   Task    │
│    (Aula)    │                │  (Tarea)  │
└──────┬───────┘                └───────────┘
       │
       │ M:N
       ↓
┌──────────────┐      1:N      ┌───────────┐
│  Assignment  │───────────────→│ Question  │
│ (Evaluación) │                │(Pregunta) │
└──────┬───────┘                └─────┬─────┘
       │                              │
       │ 1:N                          │ 1:N
       ↓                              ↓
┌──────────────┐      1:N      ┌───────────┐
│  Submission  │───────────────→│  Answer   │
│   (Envío)    │                │(Respuesta)│
└──────────────┘                └───────────┘

Modelo de Usuario Extendido

User (Django)
  ├── username
  ├── email
  ├── password
  ├── first_name
  ├── last_name
  └── groups
      └── UserProfile (1:1)
          ├── language_preference
          ├── avatar
          ├── bio
          └── notification_settings

Relaciones Importantes

1. User ↔ Course: Muchos a Muchos

   • A través de StudentCourseAccess

   • Permite rastrear fechas de inscripción

2. User ↔ ClassRoom: Muchos a Muchos

   • Un usuario puede estar en múltiples aulas

   • Un aula contiene múltiples estudiantes

3. Course ↔ Lesson: Uno a Muchos

   • Un curso tiene múltiples lecciones

   • Lecciones ordenadas secuencialmente

4. Assignment ↔ Submission: Uno a Muchos

   • Una evaluación tiene múltiples envíos

   • Un envío por estudiante por evaluación

🔄 Flujo de Datos

Flujo de Solicitud HTTP

1. Cliente envía solicitud HTTP
          ↓
2. Nginx recibe y redirige a Gunicorn
          ↓
3. Gunicorn procesa con Django WSGI
          ↓
4. Middleware de Django
   - SecurityMiddleware
   - SessionMiddleware
   - LocaleMiddleware
   - AuthenticationMiddleware
   - CSRFMiddleware
          ↓
5. URL Router (urls.py)
          ↓
6. View (views.py)
   - Lógica de negocio
   - Consultas a base de datos
          ↓
7. Template rendering
          ↓
8. Response HTTP
          ↓
9. Cliente recibe HTML

Flujo de WebSocket

1. Cliente inicia WebSocket handshake
          ↓
2. Nginx reconoce /ws/ y redirige a Daphne
          ↓
3. Daphne procesa con Django ASGI
          ↓
4. WebSocket Router (routing.py)
          ↓
5. Consumer (consumers.py)
   - connect()
   - añade a grupo de Redis
          ↓
6. Cliente envía mensaje
          ↓
7. Consumer.receive()
          ↓
8. Publica en canal Redis
          ↓
9. Redis broadcast a todos en el grupo
          ↓
10. Consumer.chat_message()
          ↓
11. Envía a cliente WebSocket

Flujo de Subida de Archivos

1. Usuario selecciona archivo
          ↓
2. Formulario POST con multipart/form-data
          ↓
3. Django recibe archivo
          ↓
4. Validación (tipo, tamaño)
          ↓
5. Procesamiento (si es necesario)
          ↓
6. Subida a S3 Storage
          ↓
7. Guardar URL en base de datos
          ↓
8. Retornar confirmación

🔒 Seguridad

Capas de Seguridad

┌─────────────────────────────────────────┐
│  1. HTTPS/TLS (Capa de Transporte)     │
├─────────────────────────────────────────┤
│  2. Django Security Middleware          │
├─────────────────────────────────────────┤
│  3. Autenticación de Sesión             │
├─────────────────────────────────────────┤
│  4. CSRF Protection                     │
├─────────────────────────────────────────┤
│  5. Autorización basada en Permisos     │
├─────────────────────────────────────────┤
│  6. Validación de Datos                 │
├─────────────────────────────────────────┤
│  7. Sanitización de HTML                │
└─────────────────────────────────────────┘

Mecanismos de Seguridad

1. Autenticación

   • Django session-based authentication

   • OAuth 2.0 con Google

   • Password hashing con PBKDF2

2. Autorización

   • Decoradores @login_required

   • Permisos basados en grupos (estudiante/profesor/admin)

   • Verificación de acceso a nivel de objeto

3. Protección CSRF

   • Token CSRF en todos los formularios

   • Verificación automática por Django

4. Seguridad de Contenido

   • Sanitización HTML con bleach

   • XSS protection headers

   • Content Security Policy

5. Rate Limiting

   • Límite de intentos de login

   • Throttling de API (futuro)

Configuración de Seguridad en Producción

# settings.py
SECURE_SSL_REDIRECT = True
SESSION_COOKIE_SECURE = True
CSRF_COOKIE_SECURE = True
SECURE_HSTS_SECONDS = 31536000
SECURE_HSTS_INCLUDE_SUBDOMAINS = True
SECURE_BROWSER_XSS_FILTER = True
X_FRAME_OPTIONS = 'DENY'
SECURE_CONTENT_TYPE_NOSNIFF = True

📈 Escalabilidad

Estrategias de Escalabilidad

1. Escalabilidad Horizontal

        Load Balancer
              ↓
    ┌─────────┼─────────┐
    ↓         ↓         ↓
Server 1   Server 2  Server 3
    ↓         ↓         ↓
    └─────────┼─────────┘
              ↓
      Shared Database

Implementación:

• Múltiples instancias de Gunicorn/Daphne

• Load balancer (Nginx, HAProxy, AWS ELB)

• Base de datos centralizada

• Redis cluster para cache distribuido

2. Caché en Múltiples Niveles

┌─────────────────────────────────┐
│  Browser Cache (HTTP Headers)   │
├─────────────────────────────────┤
│  CDN Cache (Archivos estáticos) │
├─────────────────────────────────┤
│  Redis Cache (Sesiones/Datos)   │
├─────────────────────────────────┤
│  Database Query Cache            │
└─────────────────────────────────┘

Configuración:

# settings.py
CACHES = {
    'default': {
        'BACKEND': 'django_redis.cache.RedisCache',
        'LOCATION': 'redis://127.0.0.1:6379/1',
        'OPTIONS': {
            'CLIENT_CLASS': 'django_redis.client.DefaultClient',
        }
    }
}

# Uso en views
from django.views.decorators.cache import cache_page

@cache_page(60 * 15)  # Cache por 15 minutos
def course_list(request):
    # ...

3. Optimización de Base de Datos

Índices:

CREATE INDEX idx_course_status ON courses_course(status);
CREATE INDEX idx_lesson_active ON courses_lesson(is_active);
CREATE INDEX idx_submission_student ON dashboard_submission(student_id);

Query Optimization:

# Malo: N+1 queries
courses = Course.objects.all()
for course in courses:
    print(course.lessons.count())  # Query por cada curso

# Bueno: 2 queries total
courses = Course.objects.all().prefetch_related('lessons')
for course in courses:
    print(course.lessons.count())

4. Separación de Servicios

Arquitectura de Microservicios (Futuro):

┌─────────────┐  ┌─────────────┐  ┌─────────────┐
│   Courses   │  │ Evaluations │  │  Webinars   │
│   Service   │  │   Service   │  │   Service   │
└──────┬──────┘  └──────┬──────┘  └──────┬──────┘
       │                │                │
       └────────────────┼────────────────┘
                        ↓
                ┌───────────────┐
                │  API Gateway  │
                └───────────────┘

5. Almacenamiento Distribuido

S3 para archivos multimedia:

• Reduce carga del servidor

• CDN integrado

• Alta disponibilidad

• Escalabilidad automática

Ventajas:

Servidor → Solo procesa lógica de negocio
S3/CDN → Entrega archivos estáticos/media

Métricas de Rendimiento

Objetivos:

• Tiempo de respuesta < 200ms (95º percentil)

• Disponibilidad > 99.9%

• Capacidad: 1000+ usuarios concurrentes

• Throughput: 100+ req/segundo

Monitoreo:

# Logging de rendimiento
import time
from functools import wraps

def performance_logger(func):
    @wraps(func)
    def wrapper(*args, **kwargs):
        start = time.time()
        result = func(*args, **kwargs)
        duration = time.time() - start
        logger.info(f"{func.__name__} took {duration:.2f}s")
        return result
    return wrapper

🔄 Patrones de Diseño Utilizados

1. MVC (Model-View-Controller)

• Model: Modelos de Django (ORM)

• View: Views de Django (Controladores)

• Template: Plantillas HTML (Vistas)

2. Repository Pattern

• Modelos de Django actúan como repositorios

• Abstracción de la capa de datos

3. Decorator Pattern

• @login_required

• @staff_member_required

• @cache_page

4. Observer Pattern

• Signals de Django

• WebSocket pub/sub con Redis

5. Strategy Pattern

• Storage backends (local vs S3)

• Authentication backends

📚 Referencias

• Django Documentation

• Django Channels Documentation

• PostgreSQL Documentation

• Redis Documentation

---

Última actualización: 2024 Versión del documento: 1.0