esp/plan.md

382 lines
15 KiB
Markdown

# Plan de Desarrollo - Sistema ESP Admin
## Progreso reciente (2025-10-03)
- **Rediseño completo de UI** con paleta moderna verde esmeralda
- Variables CSS globales en `layouts/layout.php` para coherencia visual
- Paleta: verde esmeralda (#10b981) como primario, grises slate para fondos
- Gradientes y transiciones suaves en toda la aplicación
- **Sistema de cards** para listado de dispositivos (`paginas/index.php`)
- Reemplazó tabla por grid responsive de cards (1/2/3 columnas)
- Fondos dinámicos: verde claro (online), gris (offline)
- Estados en tiempo real vía SSE con indicadores visuales
- Mejor UX en móviles con diseño touch-friendly
- **Menú responsive moderno** (`layouts/layout.php`)
- Slide-in desde derecha en móviles (264px)
- Animación hamburguesa → X suave
- Avatar circular con gradiente y inicial del usuario
- Dropdown mejorado con animaciones scale y fade
- Overlay con backdrop-blur para enfoque
- **Login modernizado** (`paginas/login.php`)
- Fondo con gradiente animado (15s loop)
- Glassmorphism en card de login
- Logo flotante con animación de levitación
- Inputs con íconos internos y focus states
- Botón con efecto glow pulsante
- **Página de Programación Visual** (`paginas/programacion.php`) ⭐ NUEVO
- Layout de 3 columnas: Entradas | Reglas | Salidas
- Panel de entradas con cards en grilla responsive
- Panel de salidas con control manual ON/OFF
- Editor avanzado de reglas con modal
- Triggers: cambio de entrada, timer, manual
- Condiciones múltiples con operadores (==, !=, AND, OR)
- Acciones múltiples (set, delay)
- Estados en tiempo real vía SSE
- Guardado persistente por dispositivo
- **API de Reglas** (`api/api_reglas.php`) ⭐ NUEVO
- Endpoints: get_reglas, save_reglas, delete_regla, toggle_regla
- Almacenamiento en `data/reglas.json` por chipid
- Validación de estructura de reglas
- Respuestas JSON estructuradas
- **Rutas y navegación**
- Agregada ruta `/programacion` en `index.php` y `.htaccess`
- Enlaces en menú desktop y móvil
- Integración completa con sistema de autenticación
## Progreso reciente (2025-09-17)
- UI Login (`paginas/login.php` + `assets/js/auth.js`)
- Agregado checkbox "Recordar" con Tailwind. Si está activo, se guardan cookies `remember_user` y `remember_pass` por 10 años (SameSite=Lax, Secure en HTTPS) y se prellenan en el siguiente acceso.
- Nota de seguridad: almacenar contraseña en cookies no es recomendado; a futuro se puede migrar a token persistente.
- Sistema de íconos SVG
- `assets/iconos.json` centraliza SVG de la UI.
- `layouts/layout.php` carga y aplica íconos con `window.loadIcons()` y `window.applyIcons()`; se ampliaron mapeos (`icon-back`, `icon-add`, `icon-assign`, `icon-chart`, `icon-bolt`, etc.).
- `paginas/dashboard.php` reemplaza emojis por spans con clases de íconos.
- Dashboard (`paginas/dashboard.php`)
- Se preserva la IP entre refresh utilizando `lastKnownIP` (no se borra al actualizar y se reinyecta al llegar por SSE `ip`).
- Se añadió botón "Mqtt" y modal Tailwind que muestra JSON del dispositivo (estado SSE, IP, pines y firmware si está disponible).
- Firmware y Flasheo
- `data/dispositivos.json`: se añadió el campo `firmware` por dispositivo.
- `paginas/flash.php`: se lee `version` desde `assets/flash/esp8266-manifest.json`. Tras una OTA exitosa (detectada por SSE `reboot` del chipid objetivo), se persiste `firmware` vía `POST /api/edit_dispositivo`.
## Progreso reciente (2025-09-12)
- API Puertos: compatibilidad legacy para dispositivos existentes
- Se agregó soporte de acceso directo legacy para lectura de puertos sin pasar por el router:
- Nuevo endpoint: `api/get_puertos.php` que responde a `GET /api/get_puertos.php?chipid=<chipid>` y devuelve el mismo JSON que `get_puertos`.
- `api/api_puertos.php` también soporta invocación directa con `?chipid=<chipid>` (sin `$route`) para compatibilidad.
- UI: Crear Dispositivo
- Corrección: el combo de sectores en el modal “Crear nuevo dispositivo” ahora se llena correctamente (antes solo llenaba el del modal de edición).
- Se implementó el handler de envío del formulario `#form-add` para invocar `POST /api/index.php?r=add_dispositivo`, cerrar el modal y refrescar el listado.
- Listado de Dispositivos (`paginas/index.php`)
- Eliminado el uso del campo `ip` persistido; la columna IP ahora se muestra como placeholder y se actualiza en tiempo real mediante SSE (evento `ip`).
- Se mantiene el estado de conexión por SSE; se unificó el consumo con el resto del sistema.
- Dashboard (`paginas/dashboard.php`)
- La IP ya no se lee del JSON; se muestra por SSE (evento `ip`).
- Se agregó visualización del `ChipID` en la tarjeta de “Estado de Conexión”.
- Normalización del estado recibido por SSE (acepta `online/offline`, `1/0`, `true/false`).
- Se evitó que un refresh del dashboard muestre `Offline` por defecto: ahora se conserva el estado previo recibido por SSE o se muestra “Desconocido” hasta recibir evento.
- Backend (`api/api_dispositivos.php`)
- En `get_dispositivos`, se omite el atributo `ip` en la respuesta (IP ahora viene por SSE).
Notas:
- CORS y cabeceras JSON siguen centralizadas en `api/bootstrap.php`.
- Las rutas `login` y `sse_states` están abiertas según diseño; el resto requiere sesión.
## Resumen del Proyecto
Este es un sistema completo de administración para dispositivos ESP8266/ESP32 que permite gestionar dispositivos IoT de forma centralizada. El sistema incluye una interfaz web administrativa, API REST, comunicación MQTT, y firmware para los dispositivos ESP.
## Progreso reciente (2025-09-11)
- Instalado Python 3.12 vía winget y PlatformIO Core vía pip (usuario actual).
- Corregida configuración de PlatformIO: `src_dir` movido a sección `[platformio]` en `firmware/platformio.ini`.
- Arreglado error de compilación en `firmware/framework_4/framework_4.ino` (comillas en `<a href='/'>`).
- Mejorado `tools/build_firmware.ps1` para detectar `pio.exe` en rutas típicas de Windows (APPDATA/LocalAppData).
- Compilado firmware para `env:nodemcuv2` con éxito.
- Artefactos generados:
- `firmware/.pio/build/nodemcuv2/firmware.bin`
- `firmware/firmware.bin` (copia rápida)
- `assets/flash/firmware/esp8266-nodemcuv2-YYYYMMDD-HHMMSS.bin`
## Arquitectura del Sistema
### 1. Frontend Web (PHP + JavaScript)
- **Framework**: PHP con Bootstrap 5.3.2 y jQuery 3.7.1
- **Autenticación**: Sistema de sesiones PHP con JWT
- **Interfaz**: Responsive design con tema claro fijo
- **Comunicación**: AJAX con API REST + Server-Sent Events (SSE)
### 2. Backend API (PHP)
- **Router**: Sistema de rutas basado en parámetro `?r=`
- **Autenticación**: sesiones PHP para la web (con login); endpoints críticos tras autenticación.
- **Almacenamiento**: Archivos JSON en directorio `/data/`
- **Comunicación**: MQTT para control de dispositivos
### 3. Dispositivos ESP (Arduino/C++)
- **Plataforma**: ESP8266 con PlatformIO
- **Conectividad**: WiFi + MQTT
- **Funcionalidades**: OTA updates, configuración web, monitoreo de pines
- **Comunicación**: Bidireccional vía MQTT
## Estructura de Archivos
```
esp/
├── index.php # Controlador principal con ruteo
├── composer.json # Dependencias PHP
├── .env.example # Variables de entorno
├── .htaccess # Configuración Apache
├── paginas/ # Vistas del frontend
│ ├── index.php # Dashboard principal
│ ├── puertos.php # Gestión de puertos/pines
│ ├── flash.php # Flasheo de firmware
│ └── login.php # Página de login
├── layouts/ # Plantillas HTML
│ ├── layout.php # Layout principal (autenticado)
│ └── layout_login.php # Layout para login
├── api/ # API REST
│ ├── index.php # Router de API
│ ├── bootstrap.php # Configuración común
│ ├── api_dispositivos.php # CRUD dispositivos
│ ├── api_puertos.php # Gestión de puertos
│ ├── api_sectores.php # Gestión de sectores
│ ├── login.php # Autenticación
│ ├── mqtt_publish.php # Publicación MQTT
│ └── sse_states.php # Server-Sent Events
├── assets/ # Recursos estáticos
│ ├── css/layout.css # Estilos principales
│ └── js/ # JavaScript
│ ├── apiClient.js # Cliente API
│ ├── auth.js # Autenticación
│ └── layout.js # Funcionalidad común
├── data/ # Almacenamiento JSON
│ ├── dispositivos.json # Registro de dispositivos
│ ├── puertos.json # Configuración de pines
│ ├── entidades.json # Tipos de entidades
│ ├── placas.json # Definición de placas
│ └── sectores.json # Sectores/ubicaciones
├── firmware/ # Código para ESP
│ ├── platformio.ini # Configuración PlatformIO
│ ├── framework_3/
│ │ └── framework_3.ino
│ └── framework_4/
│ └── framework_4.ino # Firmware actualmente en uso
├── assets/
│ └── flash/
│ └── firmware/ # Artefactos .bin para OTA/flasheo
└── tools/ # Herramientas
├── postman/ # Colección Postman
├── make_backup.* # Scripts de backup
└── build_firmware.ps1 # Build automatizado con PlatformIO
```
## Funcionalidades Principales
### 1. Gestión de Dispositivos
- **Registro**: Agregar dispositivos por ChipID
- **Configuración**: Tag, modelo, ciudad, sector
- **Monitoreo**: Estado online/offline en tiempo real
- **Control**: Reinicio remoto vía MQTT
### 2. Gestión de Puertos/Pines
- **Configuración**: Asignación de pines por tipo de placa
- **Entidades**: Asociación de pines con entidades (Motor, Relé, Sensor, etc.)
- **Modos**: INPUT, OUTPUT, INPUT_PULLUP
- **Monitoreo**: Estado en tiempo real de entradas/salidas
### 3. Comunicación MQTT
- **Topics**:
- `dispositivo/{chipid}/state` - Estado del dispositivo
- `dispositivo/{chipid}/comando` - Comandos al dispositivo
- `dispositivo/{chipid}/valores/{pin}` - Valores de pines
- `dispositivo/{chipid}/comando/reboot` - Reinicio
- **Broker**: Configurado en .env (mqtt.penki.com.ar:8883)
### 4. Firmware ESP
- **Configuración**: Web interface para WiFi y MQTT
- **OTA**: Actualizaciones over-the-air
- **Sincronización**: Descarga automática de configuración de puertos
- **Monitoreo**: Publicación automática de cambios en pines
### 5. Flasheo de Firmware
- **Web Serial**: Interfaz para flashear via USB
- **ESP Web Tools**: Integración con herramientas estándar
- **Manifesto**: Configuración en `/assets/flash/esp8266-manifest.json`
## Tecnologías Utilizadas
### Backend
- **PHP 7.4+** con extensiones: json, session, curl
- **Composer** para dependencias:
- firebase/php-jwt: ^6.11
- php-mqtt/client: 1.8
- vlucas/phpdotenv: 5.6
### Frontend
- **Bootstrap 5.3.2** para UI
- **jQuery 3.7.1** para AJAX
- **Server-Sent Events** para tiempo real
- **Web Serial API** para flasheo
### Dispositivos
- **ESP8266** (NodeMCU v2)
- **Arduino Framework** con PlatformIO
- **Librerías**:
- ArduinoJson ^6.21.3
- PubSubClient ^2.8
- ESP8266-OTA
## Configuración del Entorno
### Variables de Entorno (.env)
```env
# MQTT Broker
MQTT_HOST=mqtt.penki.com.ar
MQTT_PORT=8883
MQTT_TLS=true
MQTT_USERNAME=penki
MQTT_PASSWORD=Penki615
# API Authentication
API_BASIC_USER=api
API_BASIC_PASS=API#2025
# CORS
CORS_ALLOW_ORIGIN=*
```
### Estructura de Datos
#### Dispositivos (dispositivos.json)
```json
{
"id_disp": 1,
"chipid": "69A0FC",
"tag": "Vivero1",
"nombre": "Wemos D1 mini",
"ciudad": "Rosario",
"sector": "Vivero",
"start_time": "2025-07-02 15:34:53"
}
```
#### Puertos (puertos.json)
```json
{
"69A0FC": {
"D0": {
"gpio": 16,
"disp": "Interruptor",
"modo": "INPUT_PULLUP",
"notas": "Entrada botón"
}
}
}
```
## Plan de Mejoras y Desarrollo
### Fase 1: Estabilización (Corto Plazo)
1. **Seguridad**
- [ ] Implementar validación de entrada más robusta
- [ ] Agregar rate limiting a la API
- [ ] Mejorar manejo de errores y logging
2. **Usabilidad**
- [ ] Agregar confirmaciones para acciones destructivas
- [ ] Mejorar feedback visual en operaciones
- [ ] Implementar búsqueda y filtros en listas
3. **Monitoreo**
- [ ] Dashboard con métricas de dispositivos
- [ ] Historial de estados y eventos
- [ ] Alertas por dispositivos offline
### Fase 2: Funcionalidades Avanzadas (Mediano Plazo)
1. **Automatización**
- [ ] Sistema de reglas y triggers
- [ ] Programación de tareas
- [ ] Escenarios predefinidos
2. **Escalabilidad**
- [ ] Migración a base de datos (MySQL/PostgreSQL)
- [ ] API REST más robusta con OpenAPI
- [ ] Implementar caching (Redis)
3. **Interfaz**
- [ ] Migrar a framework moderno (Vue.js/React)
- [ ] PWA para uso móvil
- [ ] Tema oscuro opcional
### Fase 3: Integración y Expansión (Largo Plazo)
1. **Integraciones**
- [ ] Home Assistant integration
- [ ] Google Assistant/Alexa
- [ ] Webhooks para servicios externos
2. **Dispositivos**
- [ ] Soporte para ESP32
- [ ] Soporte para otros microcontroladores
- [ ] Sensores especializados
3. **Análisis**
- [ ] Gráficos y tendencias
- [ ] Machine Learning para predicciones
- [ ] Reportes automatizados
## Consideraciones de Seguridad
### Actuales
- Autenticación básica implementada
- Sesiones PHP con configuración segura
- HTTPS requerido para funciones críticas
### Recomendaciones
- Implementar 2FA
- Audit logs completos
- Encriptación de datos sensibles
- Firewall rules específicas
- Regular security updates
## Deployment y Mantenimiento
### Requisitos del Servidor
- **PHP 7.4+** con extensiones requeridas
- **Apache/Nginx** con mod_rewrite
- **MQTT Broker** accesible
- **SSL Certificate** para HTTPS
### Backup Strategy
- Scripts automatizados en `/tools/`
- Backup de archivos JSON
- Versionado de configuraciones
- Restore procedures documentados
### Monitoreo
- Logs de aplicación en `/api/logs/`
- Monitoreo de dispositivos vía MQTT
- Health checks automatizados
- Alertas por email/SMS
## Conclusión
El sistema ESP Admin es una solución completa y funcional para la gestión de dispositivos IoT basados en ESP8266. La arquitectura modular permite escalabilidad y mantenimiento eficiente, mientras que las tecnologías elegidas proporcionan una base sólida para el desarrollo futuro.
El plan de desarrollo propuesto asegura la evolución continua del sistema, priorizando la estabilidad y seguridad en el corto plazo, y expandiendo funcionalidades en fases posteriores.