← Volver a Documentación
ARQUITECTURA DEL SISTEMA
CEMI Sistema de Gestión Académica
Documentación de Arquitectura de Software
1. Visión General
El sistema CEMI implementa una arquitectura web moderna basada en el patrón cliente-servidor con una API RESTful. Esta arquitectura permite la separación clara de responsabilidades, facilitando el mantenimiento, la escalabilidad y la evolución del sistema.
1.1 Stack Tecnológico
HTML5
CSS3
JavaScript ES6+
Node.js 18+
Express.js 4.x
Socket.IO
MySQL 8.0
bcrypt
Helmet.js
Railway
Cloudinary
1.2 Características Principales
| Característica |
Descripción |
| Arquitectura |
Cliente-Servidor con API REST |
| Patrón |
MVC (Model-View-Controller) adaptado |
| Comunicación |
HTTP/HTTPS + WebSocket (Socket.IO) |
| Autenticación |
Basada en sesiones con bcrypt |
| Base de Datos |
MySQL relacional |
| Despliegue |
Railway (PaaS) con CI/CD automático |
2. Patrón Arquitectónico
2.1 Arquitectura MVC Adaptada
El sistema utiliza una variante del patrón MVC (Model-View-Controller) adaptada para aplicaciones web con API REST:
Patrón MVC Adaptado
flowchart TB
subgraph View["️ VIEW (Frontend)"]
HTML["HTML5 Pages"]
CSS["CSS3 Styles"]
JS["JavaScript Client"]
end
subgraph Controller["️ CONTROLLER (Backend)"]
Express["Express.js Router"]
Routes["API Routes"]
Middleware["Middleware Stack"]
end
subgraph Model[" MODEL (Data Layer)"]
MySQL["MySQL Database"]
Queries["SQL Queries"]
end
View -->|"HTTP Requests"| Controller
Controller -->|"JSON Response"| View
Controller -->|"SQL Queries"| Model
Model -->|"Data Results"| Controller
style View fill:#e3f2fd
style Controller fill:#e8f5e9
style Model fill:#fff3e0
Responsabilidades:
- View: Interfaz de usuario, renderizado de datos, interacción con el usuario
- Controller: Lógica de negocio, validación, procesamiento de requests
- Model: Acceso a datos, consultas SQL, persistencia
3. Arquitectura por Capas
Diagrama de Capas
flowchart TB
subgraph Presentation[" CAPA DE PRESENTACIÓN"]
direction LR
Browser["Browser/PWA"]
Mobile["Mobile App (Capacitor)"]
end
subgraph Application["️ CAPA DE APLICACIÓN"]
direction TB
subgraph Security[" Seguridad"]
Helmet["Helmet.js"]
CORS["CORS"]
RateLimit["Rate Limit"]
end
subgraph API[" API REST"]
Auth["/api/auth"]
Alumnos["/api/alumnos"]
Cursos["/api/cursos"]
Pagos["/api/pagos"]
end
subgraph Realtime[" Real-time"]
SocketIO["Socket.IO Server"]
end
end
subgraph Data[" CAPA DE DATOS"]
Pool["Connection Pool"]
MySQL[(MySQL Database)]
Cloudinary[(Cloudinary CDN)]
end
Presentation --> Application
Application --> Data
style Presentation fill:#e3f2fd
style Application fill:#e8f5e9
style Data fill:#fff3e0
3.1 Capa de Presentación
| Componente |
Tecnología |
Función |
| Páginas Web |
HTML5 |
Estructura y contenido |
| Estilos |
CSS3 + Custom Properties |
Diseño responsive e identidad visual |
| Lógica Cliente |
JavaScript (ES6+) |
Interactividad, fetch API, validaciones |
| PWA |
Service Worker + Manifest |
Instalabilidad, offline capabilities |
| App Móvil |
Capacitor |
Empaquetado nativo Android/iOS |
3.2 Capa de Aplicación
| Componente |
Tecnología |
Función |
| Servidor HTTP |
Node.js + Express |
Manejo de requests, routing |
| API REST |
Express Router |
Endpoints CRUD, lógica de negocio |
| WebSocket |
Socket.IO |
Chat en tiempo real |
| Seguridad |
Helmet, CORS, Rate Limit |
Protección contra ataques |
| Upload |
Multer + Cloudinary |
Gestión de archivos |
3.3 Capa de Datos
| Componente |
Tecnología |
Función |
| RDBMS |
MySQL 8.0 |
Almacenamiento relacional |
| Driver |
mysql2/promise |
Conexión async con pool |
| CDN |
Cloudinary |
Almacenamiento de archivos multimedia |
4. Diagrama de Componentes
Componentes del Sistema
flowchart TB
subgraph Frontend["️ FRONTEND"]
direction TB
Index["index.html
(Landing)"]
Login["login.html
(Auth)"]
DashAdmin["dashboard_admin.html"]
DashAlumno["dashboard_alumno.html"]
DashProf["dashboard_profesor.html"]
Classroom["classroom.html"]
end
subgraph Backend["️ BACKEND (server.js)"]
direction TB
subgraph Middleware["Middleware"]
M1["helmet()"]
M2["cors()"]
M3["rateLimit()"]
M4["morgan()"]
end
subgraph Routes["API Routes"]
R1["authRoutes"]
R2["alumnosRoutes"]
R3["profesoresRoutes"]
R4["cursosRoutes"]
R5["pagosRoutes"]
R6["classroomRoutes"]
R7["chatRoutes"]
end
subgraph Services["Services"]
S1["Chat Server (Socket.IO)"]
S2["File Upload (Multer)"]
end
end
subgraph Database[" DATABASE"]
DB[(MySQL)]
end
Frontend -->|"HTTP/REST"| Backend
Backend -->|"SQL"| Database
style Frontend fill:#e3f2fd
style Backend fill:#e8f5e9
style Database fill:#fff3e0
4.1 Rutas de la API
| Ruta Base |
Archivo |
Descripción |
/api/auth | auth.js | Autenticación y registro |
/api/alumnos | alumnos.js | CRUD de estudiantes |
/api/profesores | profesores.js | CRUD de docentes |
/api/administradores | administradores.js | Gestión de admins |
/api/cursos | cursos.js | Gestión de cursos |
/api/inscripciones | inscripciones.js | Matrículas |
/api/pagos | pagos.js | Gestión financiera |
/api/classroom | classroom.js | Aula virtual |
/api/chat | chat.js | Mensajería |
/api/stats | stats.js | Estadísticas |
/api/idiomas | idiomas.js | Catálogo de idiomas |
/api/niveles | niveles.js | Niveles de curso |
/api/aulas | aulas.js | Espacios físicos |
5. Diagrama de Despliegue
Infraestructura de Despliegue
flowchart TB
subgraph Client[" CLIENTE"]
Browser[" Browser"]
MobileApp[" App Móvil"]
end
subgraph CDN[" CDN"]
Cloudinary["Cloudinary
(Media Assets)"]
end
subgraph Railway["️ RAILWAY PLATFORM"]
subgraph Container["Docker Container"]
Node["Node.js Runtime"]
Express["Express Server
:3000"]
Static["Static Files
/frontend"]
end
end
subgraph DBService[" DATABASE SERVICE"]
MySQL["MySQL 8.0
Railway MySQL"]
end
subgraph DNS[" DNS"]
Domain["cemi.up.railway.app"]
end
Client -->|"HTTPS"| DNS
DNS -->|"Proxy"| Railway
Railway -->|"TCP:3306"| DBService
Railway <-->|"API"| CDN
style Client fill:#e3f2fd
style Railway fill:#e8f5e9
style DBService fill:#fff3e0
style CDN fill:#fce4ec
5.1 Configuración de Railway
| Aspecto |
Configuración |
| Build Command |
npm install |
| Start Command |
npm start |
| Health Check |
/api/health |
| Node Version |
18.x |
| Region |
us-west (Oregon) |
| SSL/TLS |
Automático (Let's Encrypt) |
6. Flujo de Datos
6.1 Request HTTP Típico
Cliente
→
HTTPS
→
️
Middleware
→
Router
→
Controller
→
MySQL
6.2 Flujo de Autenticación
Proceso de Login
sequenceDiagram
participant C as Cliente
participant E as Express Server
participant A as Auth Route
participant B as bcrypt
participant D as MySQL
C->>E: POST /api/auth/login
E->>E: Middleware Security
E->>A: Route Handler
A->>D: SELECT user WHERE username
D-->>A: User Data + Hash
A->>B: Compare password
B-->>A: Resultado validacion
alt Password Valid
A-->>C: 200 OK - Login exitoso
else Password Invalid
A-->>C: 401 Error - Credenciales invalidas
end
7. Arquitectura de Seguridad
Capas de Seguridad
flowchart TB
subgraph Transport[" TRANSPORTE"]
HTTPS["HTTPS/TLS 1.3"]
end
subgraph Application["️ APLICACIÓN"]
Helmet["Helmet.js
(HTTP Headers)"]
CORS["CORS
(Origin Control)"]
Rate["Rate Limiting
(1000 req/15min)"]
end
subgraph Auth[" AUTENTICACIÓN"]
Bcrypt["bcrypt
(Password Hashing)"]
Session["Session Management"]
end
subgraph Data[" DATOS"]
Param["Parameterized Queries"]
Validation["Input Validation"]
end
Transport --> Application
Application --> Auth
Auth --> Data
style Transport fill:#e8f5e9
style Application fill:#e3f2fd
style Auth fill:#fff3e0
style Data fill:#fce4ec
7.1 Medidas de Seguridad
| Amenaza |
Mitigación |
Implementación |
| XSS |
Content Security Policy |
Helmet.js CSP |
| CSRF |
SameSite Cookies |
Cookie configuration |
| SQL Injection |
Consultas parametrizadas |
mysql2 prepared statements |
| Brute Force |
Rate Limiting |
express-rate-limit (1000 req/15min) |
| Password Theft |
Hashing |
bcrypt con salt rounds 10 |
| Man-in-the-Middle |
Cifrado en tránsito |
HTTPS obligatorio (Railway) |
8. Escalabilidad y Rendimiento
8.1 Estrategias de Escalabilidad
| Aspecto |
Estrategia Actual |
Escalabilidad Futura |
| Servidor |
Single instance (Railway) |
Horizontal scaling con load balancer |
| Base de Datos |
Connection Pool (10 conexiones) |
Read replicas, sharding |
| Archivos |
Cloudinary CDN |
Multi-region CDN |
| Sesiones |
LocalStorage (cliente) |
Redis para sesiones distribuidas |
8.2 Métricas de Rendimiento
| Métrica |
Objetivo |
Estado Actual |
| Tiempo de respuesta API |
< 200ms |
~150ms promedio |
| Time to First Byte |
< 500ms |
~300ms |
| Uptime |
99.5% |
99.8% |
| Concurrent Users |
100+ |
Probado hasta 150 |
Recomendaciones Futuras:
- Implementar caching con Redis para consultas frecuentes
- Añadir CDN para assets estáticos
- Considerar microservicios para módulos de alta demanda
- Implementar monitoreo con herramientas como New Relic o Datadog