IoT & Web: Cree un monitor de semáforos con Zephyr OS, Next.js y WebSocket

En un mundo donde IoT y web convergen cada vez más, la capacidad de crear interfaces de monitoreo en tiempo real se vuelve crucial. A través de este tutorial práctico, exploraremos la creación de un sistema completo de monitoreo de semáforos, combinando el poder de Zephyr OS para IoT con tecnologías web modernas. Este proyecto servirá como ejemplo concreto para entender los desafíos y soluciones del monitoreo IoT en tiempo real.

Nota: Como experto en Zephyr OS, estoy disponible para apoyarte en tus proyectos de desarrollo IoT. No dudes en contactarme por correo electrónico o en LinkedIn o vía GitHub para cualquier pregunta sobre Zephyr OS o para discutir tus necesidades de desarrollo embebido.

El código fuente completo de este proyecto está disponible en GitHub.

Estructura del Artículo

1. Visión General del Proyecto

   • Arquitectura global
   • Tecnologías utilizadas
   • Objetivos de aprendizaje

2. Parte IoT: Controlador de Semáforos

   • Introducción a Zephyr OS
   • Implementación del controlador en C++
   • Comunicación con el servidor

3. Backend: Servidores y Comunicación

   • API HTTP con Bun
   • Servidor WebSocket para tiempo real
   • Gestión de estado con Redis

4. Frontend: Interfaz de Monitoreo

   • Construcción con Next.js 15
   • Componentes React en tiempo real
   • Gestión de estado y actualizaciones

5. Infraestructura y Despliegue

   • Configuración Docker
   • Scripts de desarrollo
   • Despliegue en producción

6. Yendo Más Allá

   • Pruebas y Calidad
   • Monitoreo y Observabilidad
   • Mejoras Funcionales

Introducción

El monitoreo en tiempo real de dispositivos IoT presenta desafíos únicos, desde la gestión del estado hasta la comunicación bidireccional. Nuestro proyecto de semáforos conectados ilustra perfectamente estos problemas: ¿cómo asegurar una sincronización confiable entre dispositivos físicos y una interfaz web mientras se mantiene un rendimiento óptimo?

Objetivos del Proyecto

Este proyecto educativo busca:

• Demostrar la integración entre IoT y tecnologías web modernas
• Explorar patrones de comunicación en tiempo real
• Poner en práctica las mejores prácticas de desarrollo full-stack
• Comprender los desafíos de supervisión IoT

Arquitectura Global

Nuestro sistema está construido alrededor de cuatro componentes principales:

1. Controlador IoT: Desarrollado con Zephyr OS en C++, simula un controlador de semáforos
2. Gateway API: Servidor HTTP para comunicación con controladores
3. Servidor WebSocket: Asegura la distribución en tiempo real de cambios de estado
4. Interfaz Web: Aplicación Next.js para visualización y control

Nota importante sobre simulación: En este proyecto, simulamos el dispositivo IoT en un contenedor Docker con fines educativos. El controlador simplemente registra cambios de estado. En un despliegue real, este controlador estaría instalado en un dispositivo IoT real (como una Raspberry Pi Pico) y controlaría físicamente los semáforos a través de su GPIO.

Ejemplo con Raspberry Pi Pico

La Raspberry Pi Pico es una excelente opción para implementar este proyecto en condiciones reales porque:

• Soporta oficialmente Zephyr OS
• Tiene GPIO para controlar los LEDs del semáforo
• Puede conectarse a la red mediante varios módulos de comunicación de largo alcance (LoRaWAN, NB-IoT, LTE-M) adecuados para despliegues exteriores
• Su costo es muy accesible (alrededor de €5)

Para pasar de nuestra simulación a un despliegue real, necesitarías:

1. Reemplazar los logs por comandos GPIO
2. Adaptar la configuración de red para WiFi o módulos de comunicación de largo alcance (LoRaWAN, NB-IoT, LTE-M) según el contexto de despliegue
3. Gestionar la alimentación eléctrica y resiliencia
4. Agregar carcasa protectora

1. Visión General del Proyecto

Arquitectura Global

Nuestro sistema de monitoreo de semáforos se basa en una arquitectura distribuida moderna, diseñada para asegurar una comunicación confiable en tiempo real entre dispositivos IoT y la interfaz de usuario.

Flujo de Datos

1. Nivel IoT

   • Los controladores de semáforos, basados en Zephyr OS, gestionan los estados de las luces
   • En nuestra implementación, los cambios de estado se transmiten vía HTTP al Gateway API, pero otros protocolos podrían haberse utilizado:
     • MQTT para comunicación IoT más ligera y optimizada
     • CoAP para redes restringidas
     • LoRaWAN para comunicación de largo alcance
     • gRPC para mayor rendimiento
   • Los controladores mantienen una conexión robusta con el servidor

2. Nivel Backend

   • El Gateway API recibe actualizaciones y las almacena en Redis
   • Redis actúa como almacén centralizado de estado
   • El servidor WebSocket se suscribe a eventos Redis
   • Los cambios se transmiten en tiempo real a los clientes conectados

3. Nivel Frontend

   • La aplicación Next.js establece conexión WebSocket
   • Los componentes React se actualizan automáticamente
   • La interfaz muestra estados de luces en tiempo real

Tecnologías Utilizadas

Lado IoT

cpp

Backend y Comunicación

typescript

Frontend

typescript

Objetivos de Aprendizaje

Este proyecto ha sido diseñado para cubrir varios aspectos esenciales del desarrollo IoT y web moderno:

1. Programación Embebida

• Uso de Zephyr OS para desarrollo IoT
• Gestión de estados y transiciones en C++
• Comunicación en red desde un dispositivo embebido

2. Arquitectura Distribuida

• Comunicación entre sistemas heterogéneos
• Gestión de estado distribuido con Redis
• Patrones de mensajería en tiempo real

3. Desarrollo Web Moderno

• Arquitectura hexagonal con Next.js
• Componentes React performantes
• TypeScript y tipado fuerte

4. DevOps e Infraestructura

• Containerización con Docker
• Scripts de automatización
• Monitoreo y logging

En las siguientes secciones, exploraremos en detalle cada componente del sistema, comenzando con el controlador IoT basado en Zephyr OS.

2. Parte IoT: Controlador de Semáforos

Introducción a Zephyr OS

Zephyr OS es un sistema operativo de tiempo real (RTOS) de código abierto, particularmente adecuado para sistemas embebidos e IoT. En nuestro proyecto, ofrece varias ventajas clave:

• Gestión en tiempo real: Perfecto para control preciso de semáforos
• Stack de red robusto: Soporte nativo de protocolos TCP/IP
• Huella de memoria reducida: Ideal para dispositivos restringidos
• Soporte de C++ moderno: Permite programación orientada a objetos

Implementación del Controlador

Nuestro controlador de semáforos está implementado en C++ moderno, utilizando características de Zephyr OS para una gestión eficiente de estado y comunicación.

Estructura del Código

cpp

Gestión de Estado

cpp

Comunicación con el Servidor

La comunicación con el servidor backend es manejada por una clase dedicada usando la API HTTP de Zephyr.

Cliente HTTP

cpp

Logging y Monitoreo

cpp

Algoritmo de Gestión de Semáforos

El algoritmo implementado en main.cpp gestiona el ciclo de semáforos de manera segura y coordinada. Optamos por una implementación simple y demostrativa que podría mejorarse para casos de uso más complejos.

1. Inicialización del Sistema

   cpp

2. Ciclo Principal

   • El sistema alterna entre ejes Norte-Sur y Este-Oeste
   • Cada ciclo incluye tres fases:
     1. Verde (30 segundos)
     2. Amarillo (5 segundos)
     3. Rojo con retraso de seguridad (2 segundos)

3. Gestión de Cambios de Estado

   cpp

4. Comunicación Asíncrona

   • Un hilo dedicado maneja el envío HTTP de estados
   • Los eventos se encolan vía k_msgq
   • El hilo HTTP los procesa de manera asíncrona

5. Seguridad y Robustez

   • Retraso de seguridad entre cambios de eje
   • Manejo de errores de comunicación
   • Registro de eventos para monitoreo

Caminos de Mejora

Esta implementación básica podría mejorarse con:

1. Escenarios Personalizables

   • Configuración de duraciones basada en tiempo
   • Modos especiales (noche, emergencia, eventos)
   • Adaptación al tráfico en tiempo real

2. Gestión Avanzada de Tráfico

   • Detección de presencia de vehículos
   • Prioridad para transporte público
   • Sincronización entre intersecciones

3. Configuración Dinámica

   • Interfaz de parámetros remota
   • Cambios de escenario en tiempo real
   • Aprendizaje automático de patrones de tráfico

Para implementar estas mejoras, necesitaríamos:

• Agregar una capa de abstracción para escenarios
• Implementar un sistema de configuración dinámica
• Integrar sensores y reglas de negocio complejas
• Desarrollar una API de control más completa

Esta versión simple sigue siendo perfectamente adecuada para demostrar conceptos básicos de IoT y comunicación en tiempo real.

Configuración del Proyecto

El archivo prj.conf configura las características de Zephyr OS para nuestro proyecto. Esta configuración habilita:

• Soporte de C++ y estándar C++17 para usar características modernas del lenguaje
• Capacidades de red con IPv4 y TCP para comunicación con el servidor
• Sockets y cliente HTTP para enviar actualizaciones de estado
• Sistema de logging para depuración y monitoreo

Estas opciones son esenciales para que nuestro controlador IoT se comunique por red y envíe cambios de estado de semáforos al servidor central.

conf

Compilación Optimizada con Zephyr OS

A diferencia de sistemas operativos tradicionales como Linux que incluyen muchos módulos y controladores por defecto, Zephyr OS utiliza un enfoque minimalista y altamente configurable. Durante la compilación, solo los componentes estrictamente necesarios se incluyen en la imagen final:

1. Diferencia con OS Tradicional

   • Un Linux embebido clásico ocupa varios cientos de MB
   • Incluye muchos controladores y servicios no utilizados
   • El arranque carga muchos componentes superfluos
   • La superficie de ataque es mayor

2. Ventajas del Enfoque Zephyr

   • La imagen final solo ocupa unos cientos de KB
   • Solo se incluyen controladores y protocolos configurados
   • El arranque es casi instantáneo
   • La superficie de ataque es mínima

3. Configuración Granular

   • Cada característica es un módulo Kconfig
   • Las dependencias se resuelven automáticamente
   • La optimización es máxima
   • Los recursos se asignan estáticamente

Este enfoque "desde cero" permite obtener un sistema altamente optimizado y seguro, perfectamente adaptado a las restricciones IoT:

• Recursos limitados (RAM/Flash)
• Consumo energético mínimo
• Arranque rápido
• Superficie de ataque reducida

Compilación y Despliegue

El proyecto utiliza CMake para la compilación:

cmake

Esta implementación IoT ilustra varios conceptos avanzados:

1. Programación Orientada a Eventos

   • Uso de colas de mensajes para comunicación entre hilos
   • Temporizadores para gestión de transiciones de estado

2. Gestión de Recursos

   • Uso eficiente de memoria
   • Gestión de conexiones de red

3. Robustez

   • Registro detallado de eventos
   • Manejo de errores de comunicación
   • Reconexión automática

En la siguiente sección, veremos cómo el backend maneja la comunicación con estos controladores IoT y distribuye las actualizaciones a los clientes web.

3. Backend: Servidores y Comunicación

Nuestro backend consiste en varios servicios trabajando juntos para asegurar una comunicación fluida entre controladores IoT y la interfaz web.

Gateway API con Bun

El Gateway API es el punto de entrada para los controladores IoT. Implementado con Bun por su rendimiento excepcional, maneja solicitudes HTTP y mantiene la consistencia del estado.

Gestión de Solicitudes

typescript

Servidor WebSocket

El servidor WebSocket asegura la distribución en tiempo real de actualizaciones a los clientes web conectados.

Implementación del Servidor

typescript

Gestión de Estado con Redis

Redis juega un papel central en nuestra arquitectura, sirviendo tanto como broker de mensajes como almacén de estado.

Configuración Redis

yaml

Suscriptor Redis

typescript

Arquitectura de Comunicación

Nuestro backend implementa varios patrones de comunicación esenciales:

1. Patrón Pub/Sub

   • Redis como broker de mensajes
   • Desacoplamiento de productores y consumidores
   • Distribución eficiente de actualizaciones

2. Patrón Gateway

   • Punto único de entrada para dispositivos IoT
   • Validación y transformación de datos
   • Manejo centralizado de errores

3. Patrón Observador

   • Notificación de cambios en tiempo real
   • Mantenimiento de conexiones WebSocket
   • Distribución de actualizaciones a clientes

Seguridad y Rendimiento

Varias medidas están en lugar para asegurar seguridad y rendimiento:

1. Seguridad

   • Validación de datos de entrada
   • Cabeceras CORS configuradas
   • Aislamiento de red con Docker

2. Rendimiento

   • Uso de Bun para rendimiento óptimo
   • Conexiones Redis persistentes
   • Gestión eficiente de WebSocket

3. Fiabilidad

   • Registro de eventos
   • Manejo robusto de errores
   • Reconexión automática de servicios

En la siguiente sección, exploraremos la interfaz de usuario desarrollada con Next.js que permite visualización e interacción con nuestro sistema de semáforos.

4. Frontend: Interfaz de Monitoreo

Nuestra interfaz de usuario está construida con Next.js 15, siguiendo las mejores prácticas de desarrollo moderno y una arquitectura hexagonal.

Arquitectura Frontend

Nuestra aplicación sigue una arquitectura hexagonal (puertos y adaptadores) para mantener una clara separación de preocupaciones:

typescript

Implementación del Adaptador

El adaptador maneja la comunicación con el backend vía WebSocket:

typescript

Componentes React

Página Principal

typescript

Componente Semáforo

typescript

Estilos y Configuración

Configuración Tailwind

typescript

Optimizaciones y Mejores Prácticas

1. Rendimiento

   • Uso de Componentes Servidor React
   • Optimización de renderizado
   • Carga perezosa de componentes no críticos

2. Accesibilidad

   • Soporte de teclado
   • Atributos ARIA apropiados
   • Contraste de color optimizado

3. Mantenibilidad

   • Arquitectura hexagonal
   • Tipado estricto con TypeScript
   • Pruebas automatizadas

En la siguiente sección, cubriremos la infraestructura y despliegue de nuestra aplicación.

5. Infraestructura y Despliegue

Nuestro sistema utiliza Docker para asegurar un despliegue consistente y reproducible en todos los entornos.

Configuración Docker

Composición

yaml

Scripts de Desarrollo

Script de Gestión de Servicios

shell

Configuración del Entorno de Desarrollo

Imagen Docker para Zephyr

dockerfile

Servicios de Soporte

Script de Servicios Docker

shell

Gestión de Dependencias

Configuración Next.js

json

Mejores Prácticas de Despliegue

1. Gestión de Secretos

   • Uso de variables de entorno
   • Separación de configuraciones por entorno
   • Almacenamiento seguro de secretos

2. Monitoreo

   • Logging centralizado
   • Métricas de rendimiento
   • Alertas automatizadas

3. Seguridad

   • Aislamiento de red
   • Actualizaciones regulares de dependencias
   • Escaneo de vulnerabilidades

En la sección final, discutiremos las estrategias de prueba y monitoreo de nuestra aplicación.

6. Yendo Más Allá

Para hacer este proyecto más robusto y listo para producción, se pueden explorar varias áreas de mejora:

1. Pruebas y Calidad

Para asegurar la fiabilidad del sistema, deberíamos implementar:

Pruebas del Controlador IoT

• Pruebas unitarias para la máquina de estados del semáforo
• Pruebas de integración de red
• Simulación de condiciones de error
• Validación de secuencias de luces

Pruebas Frontend

• Pruebas de componentes React con Jest y Testing Library
• Pruebas end-to-end con Cypress o Playwright
• Pruebas de rendimiento con Lighthouse
• Validación de accesibilidad

2. Monitoreo y Observabilidad

Para un monitoreo efectivo en producción, deberíamos agregar:

1. Rendimiento

   • Integración con Prometheus/Grafana
   • Métricas detalladas de WebSocket
   • Monitoreo de recursos IoT

2. Fiabilidad

   • Sistema de heartbeat del controlador
   • Detección automática de anomalías
   • Respaldo automático de estado

3. Seguridad

   • Autenticación de controladores
   • Cifrado de comunicaciones
   • Auditoría de accesos

3. Mejoras Funcionales

El sistema podría mejorarse con:

1. Interfaz Avanzada

   • Modo mantenimiento
   • Historial de cambios de estado
   • Dashboards personalizables

2. Gestión de Escenarios

   • Programación basada en tiempo
   • Modos especiales (emergencia, eventos)
   • API de integración externa

3. Escalabilidad

   • Soporte multi-intersección
   • Sincronización entre intersecciones
   • Balanceo de carga

4. Optimización Energética para Despliegue con Batería

Para proyectos que requieren autonomía energética (sitios aislados, áreas sin energía de red), serían necesarias varias optimizaciones:

1. Modos de Energía

   • Modo normal para operación estándar
   • Modo eco para ahorro de energía durante días tranquilos
   • Modo nocturno con brillo reducido
   • Modo emergencia para batería baja

cpp

2. Estrategias de Ahorro de Energía

   • Suspensión de CPU entre cambios de estado
   • Agrupación de transmisiones de red
   • Ajuste dinámico de brillo LED

cpp

3. Energía Solar

   • Dimensionamiento apropiado de paneles
   • Baterías LiFePO4 para longevidad
   • Sistema de respaldo

4. Monitoreo de Batería

cpp

Para un despliegue exitoso, se recomienda:

• Monitorear continuamente la salud de la batería
• Planificar reemplazos preventivos
• Limpiar regularmente los paneles solares
• Implementar modos degradados para batería baja
• Proporcionar señalización de respaldo

Conclusión

Este proyecto demuestra la integración exitosa de IoT y tecnologías web modernas para crear un sistema de monitoreo en tiempo real. Los puntos clave incluyen:

1. Arquitectura Distribuida

   • Clara separación de responsabilidades
   • Comunicación eficiente entre componentes
   • Escalabilidad y mantenibilidad

2. Tecnologías Modernas

   • Zephyr OS para IoT
   • Next.js para frontend
   • WebSocket para tiempo real

3. Mejores Prácticas

   • Pruebas automatizadas
   • Monitoreo completo
   • Documentación detallada

Este proyecto puede servir como base para desarrollar aplicaciones IoT más complejas adaptando la arquitectura y patrones utilizados según tus necesidades específicas.

Poniendo en Práctica

Para aprovechar al máximo este tutorial y desarrollar tus propios proyectos IoT, aquí hay algunas sugerencias de ejercicios prácticos:

1. Comenzar Pequeño

1. Versión Simplificada

   • Primero crear un solo semáforo
   • Usar un servidor HTTP simple sin WebSocket
   • Mostrar el estado en una página web básica

2. Simulación IoT

   • Comenzar sin hardware físico
   • Simular el controlador con un script Node.js
   • Probar la lógica de comunicación

2. Evolución Progresiva

1. Agregar WebSockets

   • Implementar actualizaciones en tiempo real
   • Manejar reconexión automática
   • Agregar logs para entender el flujo

2. Integrar Redis

   • Primero almacenar estados simples
   • Agregar persistencia de datos
   • Implementar patrones pub/sub

3. Variaciones del Proyecto

Aquí hay algunas ideas para crear tu propia versión:

1. Otros Casos de Uso

   • Monitor de temperatura/humedad
   • Sistema de iluminación inteligente
   • Control de riego automático

2. Tecnologías Alternativas

   • Reemplazar Zephyr OS con ESP32/Arduino
   • Usar MQTT en lugar de WebSockets
   • ...

4. Recursos Adicionales

Para profundizar en cada aspecto:

1. Documentación Oficial

   • Zephyr OS Getting Started
   • Next.js Documentation
   • Redis Pub/Sub Guide

2. Repositorios de Ejemplo

   • Zephyr OS Samples
   • Next.js Examples
   • Redis WebSocket Examples

3. Comunidades

   • Discord Zephyr
   • Forum Next.js
   • Reddit r/IOT

1CONFIG_CPP=y
2CONFIG_STD_CPP17=y
3CONFIG_NETWORKING=y
4CONFIG_NET_IPV4=y
5CONFIG_NET_TCP=y
6CONFIG_NET_SOCKETS=y
7CONFIG_HTTP_CLIENT=y
8CONFIG_LOG=y

1// Servidor WebSocket con Bun
2const wsServer = new WebSocketServer({ port: 8001 });
3
4// Suscripción a eventos Redis
5subscriber.subscribe('traffic-lights', (mensaje) => {
6  wsConnections.forEach((ws) => {
7    ws.send(JSON.stringify(JSON.parse(mensaje)));
8  });
9});

1// Componente Next.js con WebSocket
2export function Intersection() {
3  const [luces, setLuces] = useState<EstadoSemaforo[]>([]);
4
5  useEffect(() => {
6    const adaptador = new AdaptadorSemaforo();
7    return adaptador.suscribirActualizaciones((estado) => {
8      setLuces(prev => prev.map(luz =>
9        luz.id === estado.id ? { ...luz, estado: estado.estado } : luz
10      ));
11    });
12  }, []);
13
14  return (/* Renderizado de semáforos */);
15}

1async fetch(req: Request) {
2  const url = new URL(req.url);
3
4  // Cabeceras CORS para todas las respuestas
5  const cabecerasCors = {
6    "Access-Control-Allow-Origin": "*",
7    "Access-Control-Allow-Methods": "GET, POST, OPTIONS",
8    "Access-Control-Allow-Headers": "Content-Type",
9  };
10
11  // Ruta para recibir actualizaciones de semáforos
12  if (req.method === "POST" && url.pathname === "/traffic-light") {
13    try {
14      const datos = await req.json();
15      const { id, estado } = datos;
16
17      // Validación de estado
18      const estadosValidos = ["rojo", "amarillo", "verde"];
19      if (!estadosValidos.includes(estado)) {
20        return new Response("Estado inválido", {
21          status: 400,
22          headers: cabecerasCors
23        });
24      }
25
26      // Publicar estado en Redis
27      await redis.publish("traffic-lights", JSON.stringify({ id, estado }));
28      // Almacenar estado actual
29      await redis.set(`traffic-light:${id}`, estado);
30
31      return new Response(JSON.stringify({ success: true }), {
32        headers: {
33          ...cabecerasCors,
34          "Content-Type": "application/json"
35        }
36      });
37    } catch (error) {
38      console.error("Error:", error);
39      return new Response(JSON.stringify({ error: error.message }), {
40        status: 500,
41        headers: cabecerasCors
42      });
43    }
44  }
45}

1const suscriptor = redis.duplicate();
2await suscriptor.connect();
3
4await suscriptor.subscribe("traffic-lights", (mensaje) => {
5  try {
6    const datos = JSON.parse(mensaje);
7    console.log("Nuevo cambio de semáforo:", datos);
8
9    wsConnections.forEach((ws) => {
10      ws.send(JSON.stringify(datos));
11    });
12  } catch (err) {
13    console.error("Error al analizar mensaje:", err);
14  }
15});

1async function main() {
2    const redis = createClient({
3        url: "redis://localhost:6379"
4    });
5
6    redis.on("error", err => console.error("Error Redis:", err));
7    redis.on("connect", () => console.log("Conectado a Redis"));
8
9    await redis.connect();
10
11    const suscriptor = redis.duplicate();
12    await suscriptor.connect();
13
14    await suscriptor.subscribe("traffic-lights", (mensaje) => {
15        try {
16            const datos = JSON.parse(mensaje);
17            console.log("Nuevo cambio de semáforo:", datos);
18        } catch (err) {
19            console.error("Error al analizar mensaje:", err);
20        }
21    });
22}

1export interface EstadoSemaforo {
2  id: string;
3  estado: "rojo" | "amarillo" | "verde";
4}
5
6export interface PuertoSemaforo {
7  obtenerEstadosIniciales(): Promise<EstadoSemaforo[]>;
8  suscribirActualizaciones(callback: (estado: EstadoSemaforo) => void): () => void;
9}

1export class AdaptadorSemaforo implements PuertoSemaforo {
2  async obtenerEstadosIniciales(): Promise<EstadoSemaforo[]> {
3    try {
4      const respuestas = await Promise.all(
5        ["Norte", "Sur", "Este", "Oeste"].map((id) =>
6          fetch(`${API_URL}/traffic-light/${id}`).then((res) => res.json())
7        )
8      );
9
10      return respuestas.map((respuesta) => ({
11        id: respuesta.id,
12        estado: respuesta.estado,
13      }));
14    } catch (error) {
15      console.error("Error al obtener estados:", error);
16      return [
17        { id: "Norte", estado: "rojo" },
18        { id: "Sur", estado: "rojo" },
19        { id: "Este", estado: "rojo" },
20        { id: "Oeste", estado: "rojo" },
21      ];
22    }
23  }
24
25  suscribirActualizaciones(callback: (estado: EstadoSemaforo) => void): () => void {
26    const ws = new WebSocket(WS_URL);
27
28    ws.onmessage = (evento) => {
29      try {
30        const datos = JSON.parse(evento.data);
31        callback(datos);
32      } catch (error) {
33        console.error("Error al procesar mensaje WebSocket:", error);
34      }
35    };
36
37    return () => ws.close();
38  }
39}

1import { Interseccion } from "@/interfaces/components/traffic-lights/intersection";
2
3export default function Home() {
4  return (
5    <div className="min-h-screen flex flex-col items-center justify-center p-8">
6      <h1 className="text-2xl font-bold mb-8">Monitor de Semáforos</h1>
7      <Interseccion />
8    </div>
9  );
10}

1"use client";
2
3interface PropiedadesSemaforo extends EstadoSemaforo {
4  orientacion?: "vertical" | "horizontal";
5}
6
7export function Semaforo({
8  id,
9  estado,
10  orientacion = "vertical",
11}: PropiedadesSemaforo) {
12  const luces = ["rojo", "amarillo", "verde"];
13
14  return (
15    <div className="flex flex-col gap-2 items-center">
16      <h3 className="text-sm font-semibold">{id}</h3>
17      <div
18        className={`bg-gray-800 p-2 rounded-lg flex ${
19          orientacion === "horizontal" ? "flex-row" : "flex-col"
20        } gap-2`}
21      >
22        {luces.map((luz) => (
23          <div
24            key={luz}
25            className={`w-8 h-8 rounded-full ${
26              estado === luz
27                ? {
28                    rojo: "bg-red-500",
29                    amarillo: "bg-yellow-500",
30                    verde: "bg-green-500",
31                  }[luz]
32                : "bg-gray-700"
33            }`}
34          />
35        ))}
36      </div>
37    </div>
38  );
39}

1export default {
2  content: [
3    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
4    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
5    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
6    "./src/interfaces/**/*.{js,ts,jsx,tsx,mdx}",
7  ],
8  theme: {
9    extend: {
10      colors: {
11        background: "var(--background)",
12        foreground: "var(--foreground)",
13      },
14      borderSpacing: {
15        'road': '16px'
16      },
17      backgroundImage: {
18        'dashed-white': 'repeating-linear-gradient(90deg, white 0 12px, transparent 12px 32px)',
19        'dashed-white-vertical': 'repeating-linear-gradient(0deg, white 0 12px, transparent 12px 32px)',
20      }
21    },
22  },
23  plugins: [],
24}

1cmake_minimum_required(VERSION 3.20.0)
2
3set(CONF_FILE "prj.conf")
4set(BOARD qemu_x86)
5
6enable_language(C CXX)
7set(CMAKE_CXX_STANDARD 17)
8
9find_package(Zephyr REQUIRED HINTS $ENV{ZEPHYR_BASE})
10project(traffic-lights-orcherstrator)
11
12target_sources(app PRIVATE
13    src/main.cpp
14    src/logger.cpp
15    src/http_client.cpp
16)

1services:
2  redis:
3    image: redis:latest
4    ports:
5      - "6379:6379"
6    volumes:
7      - redis-data:/data
8    command: redis-server --appendonly yes
9    networks:
10      zephyr-net:
11        ipv4_address: 10.5.0.3

1servicios:
2  traffic-lights-monitor:
3    image: oven/bun:latest
4    working_dir: /traffic-lights-monitor
5    volumes:
6      - ./traffic-lights-monitor/:/traffic-lights-monitor
7    command: sh -c "bun install && bun run build && bun run start"
8    ports:
9      - "3000:3000"
10    environment:
11      - NEXT_PUBLIC_API_URL=http://zephyr-dev:8000
12      - NEXT_PUBLIC_WS_URL=ws://localhost:8001
13    networks:
14      zephyr-net:
15        ipv4_address: 10.5.0.5
16
17  redis:
18    image: redis:latest
19    ports:
20      - "6379:6379"
21    volumes:
22      - redis-data:/data
23    command: redis-server --appendonly yes
24    networks:
25      zephyr-net:
26        ipv4_address: 10.5.0.3
27
28volumes:
29  redis-data:
30
31networks:
32  zephyr-net:
33    driver: bridge
34    ipam:
35      config:
36        - subnet: 10.5.0.0/24

1#!/bin/bash
2
3# Colores para mensajes
4ROJO='\033[0;31m'
5VERDE='\033[0;32m'
6AMARILLO='\033[1;33m'
7NC='\033[0m'
8
9# Función para verificar si los contenedores están ejecutándose
10verificar_contenedores() {
11    if ! docker compose ps --quiet &>/dev/null; then
12        echo -e "${ROJO}Los contenedores no están ejecutándose.${NC}"
13        echo -e "${AMARILLO}Iniciando contenedores...${NC}"
14        docker compose up -d
15    fi
16}
17
18# Función para iniciar contenedores
19iniciar() {
20    echo -e "${AMARILLO}Construyendo imagen Docker si es necesario...${NC}"
21    docker compose build
22    echo -e "${AMARILLO}Iniciando contenedores...${NC}"
23    docker compose up -d
24    echo -e "${VERDE}Contenedores iniciados exitosamente${NC}"
25}
26
27# Función para detener contenedores
28detener() {
29    echo -e "${AMARILLO}Deteniendo contenedores...${NC}"
30    docker compose down
31    echo -e "${VERDE}Contenedores detenidos exitosamente${NC}"
32}

1#!/bin/bash
2
3/workdir/tools/net-tools/loop-socat.sh & > /dev/null 2>&1
4/workdir/tools/net-tools/loop-slip-tap.sh & > /dev/null 2>&1
5cd /gateway-http-server-redis && bun run main.ts
6/bin/bash

1FROM ghcr.io/zephyrproject-rtos/zephyr-build:latest
2
3USER root
4
5RUN apt-get update
6RUN apt-get install -y \
7    net-tools \
8    uml-utilities \
9    bridge-utils \
10    nftables
11
12RUN apt-get install -y qemu-system-x86
13RUN apt-get install -y iputils-ping curl
14RUN apt-get install -y --no-install-recommends git cmake ninja-build gperf \
15    ccache dfu-util device-tree-compiler wget \
16    python3-dev python3-pip python3-setuptools python3-tk python3-wheel xz-utils file \
17    make gcc gcc-multilib g++-multilib libsdl2-dev libmagic1
18
19RUN west init -m https://github.com/zephyrproject-rtos/zephyr --mr main .
20RUN west update
21RUN west zephyr-export
22
23RUN cd /workdir/tools/net-tools && make
24
25RUN curl -fsSL https://bun.sh/install | bash
26ENV PATH="/root/.bun/bin:${PATH}"
27
28COPY gateway-http-server-redis /gateway-http-server-redis
29RUN cd /gateway-http-server-redis && bun install
30
31EXPOSE 8000
32
33USER root

1{
2  "name": "traffic-lights-monitor",
3  "version": "0.1.0",
4  "private": true,
5  "scripts": {
6    "dev": "next dev --turbopack",
7    "build": "next build",
8    "start": "next start",
9    "lint": "next lint"
10  },
11  "dependencies": {
12    "react": "^19.0.0",
13    "react-dom": "^19.0.0",
14    "next": "15.1.3"
15  },
16  "devDependencies": {
17    "typescript": "^5.7.2",
18    "@types/node": "^22.10.2",
19    "@types/react": "^19.0.2",
20    "@types/react-dom": "^19.0.2",
21    "postcss": "^8.4.49",
22    "tailwindcss": "^3.4.17",
23    "eslint": "^9.17.0"
24  }
25}

1// Ejemplo de código Zephyr OS
2void cambiar_estado_semaforo(const char* id, const char* estado) {
3    // Enviar estado vía HTTP
4    http_client.enviar_estado_semaforo(id, estado);
5    // Registro de eventos
6    LOG_INF("Semáforo %s: %s", id, estado);
7}

1enum class EstadoLuz
2{
3    ROJO,
4    AMARILLO,
5    VERDE
6};
7
8struct Semaforo
9{
10    const char *nombre;
11    EstadoLuz estado;
12    k_timer temporizador;
13};
14
15struct EventoCambioEstado
16{
17    int indice_luz;
18    EstadoLuz nuevo_estado;
19};

1void cambiar_estado_eje(int indice_luz1, int indice_luz2, EstadoLuz nuevo_estado, uint32_t duracion_ms)
2{
3    EventoCambioEstado evt1 = {indice_luz1, nuevo_estado};
4    EventoCambioEstado evt2 = {indice_luz2, nuevo_estado};
5
6    k_msgq_put(&cola_cambio_estado, &evt1, K_NO_WAIT);
7    k_msgq_put(&cola_cambio_estado, &evt2, K_NO_WAIT);
8
9    if (duracion_ms > 0)
10    {
11        k_timer_start(&luces[indice_luz1].temporizador, K_MSEC(duracion_ms), K_NO_WAIT);
12        k_timer_start(&luces[indice_luz2].temporizador, K_MSEC(duracion_ms), K_NO_WAIT);
13    }
14}

1void ClienteHttp::enviar_estado_semaforo(const char *id, const char *estado)
2{
3    // Preparación de solicitud HTTP
4    struct http_request req;
5    memset(&req, 0, sizeof(req));
6
7    const char *cabeceras[] = {
8        "Content-Type: application/json\r\n",
9        longitud_contenido,
10        NULL
11    };
12
13    req.method = HTTP_POST;
14    req.url = "/traffic-light";
15    req.host = DIRECCION_SERVIDOR;
16    req.protocol = "HTTP/1.1";
17    req.header_fields = cabeceras;
18    req.payload = carga;
19    req.payload_len = strlen(carga);
20}

1#include <zephyr/logging/log.h>
2
3LOG_MODULE_REGISTER(semaforos, LOG_LEVEL_INF);
4
5void registrar_estado_luz(const char *nombre, const char *estado)
6{
7    LOG_INF("Semáforo %s: %s", nombre, estado);
8}

1void inicializar_sistema_trafico() {
2    // Inicialización de temporizadores para cada luz
3    for (auto &luz : luces) {
4        k_timer_init(&luz.temporizador, callback_expiracion_temporizador, nullptr);
5    }
6    // Creación de hilo HTTP para comunicación
7    id_hilo_http = k_thread_create(&datos_hilo_http, ...);
8}

1void cambiar_estado_eje(int indice_luz1, int indice_luz2,
2                       EstadoLuz nuevo_estado, uint32_t duracion_ms) {
3    // Enviar eventos de cambio de estado
4    EventoCambioEstado evt1 = {indice_luz1, nuevo_estado};
5    EventoCambioEstado evt2 = {indice_luz2, nuevo_estado};
6
7    // Programación de temporizador si se especifica duración
8    if (duracion_ms > 0) {
9        k_timer_start(&luces[indice_luz1].temporizador, ...);
10        k_timer_start(&luces[indice_luz2].temporizador, ...);
11    }
12}

1enum class ModoEnergia {
2    NORMAL,     // Operación estándar
3    ECO,        // Modo ahorro de energía
4    NOCTURNO,   // Modo nocturno
5    EMERGENCIA  // Modo emergencia (batería baja)
6};

1void entrar_modo_bajo_consumo() {
2    // Reducción de frecuencia de CPU
3    pm_device_action_run(cpu_dev, PM_DEVICE_ACTION_RESUME);
4
5    // Configuración de temporizador de despertar
6    k_timer_start(&temporizador_despertar, K_SECONDS(duracion_estado), K_NO_WAIT);
7
8    // Entrar en modo suspensión
9    k_sleep(K_FOREVER);
10}

1struct MetricasEnergia {
2    float voltaje_bateria;
3    float consumo_corriente;
4    float temperatura;
5    uint32_t tiempo_activo;
6};
7
8MetricasEnergia obtenerMetricasActuales() {
9    MetricasEnergia metricas;
10    metricas.voltaje_bateria = adc_leer_bateria();
11    metricas.consumo_corriente = adc_leer_corriente();
12    metricas.temperatura = leer_temperatura();
13    metricas.tiempo_activo = k_uptime_get();
14    return metricas;
15}