Sistema IoT de Monitoreo Termico y Gases

Resumen Ejecutivo

SMTG (Sistema de Monitoreo Termico y Gases) es una solucion industrial y full-stack diseñada para la supervision automatizada de variables climaticas (temperatura, humedad) y concentraciones de gases nocivos (como CO2 o gas licuado) en espacios internos de un campus universitario. El ecosistema integra microcontroladores fisicos (ESP32 y Raspberry Pi Pico W), clientes de telemetria MQTT en tiempo real, un servidor backend blindado en Express con validaciones estructurales de Zod, y un panel de control SPA en React 19 que implementa la Web Audio API para disparar alarmas fisicas audibles y un simulador de analisis predictivo What-If.

Situacion

Los laboratorios, centros de computo y aulas universitarias a menudo carecen de un monitoreo ambiental unificado. Las fugas de gases nocivos o los picos anomalos de temperatura en salas de servidores representan riesgos criticos de seguridad y fallas en infraestructura. Los sistemas comerciales existentes suelen ser costosos y dificiles de integrar con telemetria de multiples fuentes de hardware (como ESP32 con C++ y Pico W con MicroPython). Ademas, las interfaces de usuario de telemetria comunmente carecen de interactividad instantanea y de alertas dinamicas que capturen la atencion de los operadores sin demoras.

Objetivo

Disenar y desarrollar un sistema de monitoreo termico y de gases de nivel industrial y de codigo abierto. La plataforma debia ser capaz de ingerir datos a alta velocidad mediante protocolos HTTP y MQTT, procesarlos de forma segura en un backend que cumpla con los estandares de seguridad OWASP (mitigacion de inyecciones XSS y NoSQL), y visualizarlos en tiempo real a traves de WebSockets en una UI de estetica premium con soporte para control de accesos basado en roles (RBAC) y alertas criticas auditivas inmediatas.

Arquitectura y Desarrollo

El sistema se estructura bajo un enfoque desacoplado y reactivo:

1. Ingesta de Telemetria Multifuente

El backend de SMTG esta diseñado para procesar eventos provenientes de:

Dispositivos Fisicos: ESP32 programados en C++ y Raspberry Pi Pico W utilizando MicroPython, enviando paquetes JSON de telemetria.
Simulador de Telemetria Solar: Un script en Node.js (simulate-readings.ts) que modela el comportamiento termico diario influenciado por la radiacion solar.
Protocolos de Ingesta: Soporte dual para peticiones HTTP POST (utilizadas por integraciones directas) y suscripciones a brokers MQTT mediante la libreria MQTT.js, garantizando ligereza en la transmision de datos.

2. Backend Blindado (Node.js 22 + TypeScript + Express)

El servidor en Express (app.ts) y Socket.IO (server.ts) actua como el nucleo de procesamiento:

Validacion Estructural: La ingesta de datos y los endpoints REST estan estrictamente validados en tiempo de ejecucion con esquemas de Zod, rechazando inmediatamente cualquier paquete corrupto o mal formateado.
Seguridad OWASP Activa: Implementacion de middlewares personalizados para mitigar vulnerabilidades criticas:
- Filtro contra inyecciones NoSQL (nosql-filter.ts): Inspecciona de forma recursiva payloads y parametros de busqueda, neutralizando operadores nativos de MongoDB (como $eq o $ne) utilizados para saltarse controles de acceso.
- Saneador XSS (xss-sanitizer.ts): Escapa caracteres HTML especiales recursivamente para prevenir inyecciones de scripts maliciosos que puedan ejecutarse en los navegadores de los operadores.
Persistencia: Base de datos NoSQL MongoDB estructurada mediante esquemas de Mongoose (db.ts), permitiendo indexacion rapida y consultas historicas optimas de telemetria.

3. Frontend de Alta Fidelidad (React 19 + Vite + Tailwind CSS)

La interfaz de usuario adopta una estetica dark premium inspirada en paneles financieros de Binance, organizada con componentes de alto rendimiento:

Comunicacion en Tiempo Real: Recepcion instantanea de lecturas de sensores mediante un hook de conexion custom de WebSockets (useSocket.ts).
Gestion de Estado: Zustand maneja el estado global del sistema de forma atomica en useIoTStore.ts, logrando renders eficientes sin la sobrecarga de contextos tradicionales.
Visualizaciones Dinamicas: Graficos de area interactivos y lineas de tendencia historica implementados con Recharts, con refresco visual en tiempo real.
Sistema RBAC: Control de acceso por roles (Admin, Operator, Guest) con permisos declarativos (permissions.ts) que ocultan opciones visuales del menu lateral (sidebar-navigation.tsx) y protegen las rutas en el enrutador de React Router 7.

Modulos Especiales del Dashboard

1. Sirena de Emergencia (Web Audio API)

Cuando un sensor reporta concentraciones de gases o lecturas termicas que exceden el perfil de umbral maximo configurado por el administrador, el frontend ejecuta de forma local una alarma acustica persistente mediante buzzer-service.ts. Utiliza osciladores nativos de la Web Audio API para generar la onda sonora de emergencia directamente en el navegador del operador, asegurando una advertencia sonora ineludible sin necesidad de archivos de audio locales.

2. Analisis What-If Predictivo

El componente what-if-analytics.tsx permite a los operadores realizar simulaciones en caliente. Al desplazar selectores interactivos, el panel calcula dinamicamente el impacto termico teorico y de acumulacion de gases basandose en la cantidad de personas simuladas en una sala y el estado de los sistemas de ventilacion, ayudando en la planificacion de mitigaciones preventivas.

3. Mapa de Calor (Campus Heatmap)

Un plano interactivo (campus-heatmap.tsx) colorea de forma dinamica los pabellones universitarios y laboratorios de acuerdo con su temperatura promedio actual (verde para optimo, naranja para advertencia, rojo para peligro termico), ofreciendo una visualizacion espacial instantanea al personal de mantenimiento.

Ciclo de Vida del Dato y Alertas

Recoleccion: El sensor lee temperatura, humedad y gases (MQ-135/DHT22).
Transmision: Envia JSON via MQTT a un broker Mosquitto (o HTTP POST).
Ingesta y Validacion: El backend recibe el evento, valida el JSON con Zod, escapa XSS y limpia inyecciones NoSQL.
Analisis de Umbrales: Contrasta la lectura con los perfiles de confort en cache (thresholdprofiles). Si se violan los limites, escribe un registro en alerts.
Transmision en Tiempo Real: Socket.IO emite la nueva lectura e historial a los clientes conectados.
Reaccion en la UI: El navegador del operador reproduce la sirena de emergencia a traves de la Web Audio API y pinta las alertas en rojo parpadeante.
Historico y Auditoria: Las lecturas se almacenan en MongoDB y los cambios de configuracion quedan registrados en la bitacora de auditoria de seguridad (audit_logs).

Stack Tecnologico Completo

Capa	Tecnologias
Backend Core	Node.js 22, Express, TypeScript 5.8, Mongoose, Zod 3.24, JWT
Ingesta e IoT	MQTT (MQTT.js), Socket.IO 4.8, HTTP REST
Frontend UI	React 19, Vite 6.2, Tailwind CSS 3.4, Zustand 5.0, Recharts 2.15, React Router 7.2
Seguridad	Hashing Bcrypt, Filtros recursivos NoSQL e inyecciones XSS, HTTPS, CORS, Sentry
Buzzer Audio	Web Audio API (sintesis de frecuencia)
Logging	Winston (rotacion de archivos log diaria)

Resultados y Logros

Telemetria de Baja Latencia: Actualizacion de graficos e indicadores termicos en menos de 100 milisegundos gracias al enrutamiento WebSocket Socket.IO.
Alertas Auditivas Integradas: Sintesis de sirena de emergencia sin consumo de ancho de banda y con disparos automaticos de alta frecuencia ante anomalias de gas o calor.
Proteccion Estricta: Sanitizacion en tiempo real de cadenas de entrada y consultas, bloqueando ataques de cross-site scripting y secuestro de base de datos NoSQL.
Control RBAC Completo: Proteccion en rutas front-end y endpoints backend, limitando la consola de seguridad y perfiles de umbral exclusivamente a cuentas administradoras.
Simulador What-If de Utilidad Practica: Facilita la toma de decisiones al modelar de forma instantanea el impacto climatico de eventos masivos de ocupacion en el campus.