Dans un monde où l'IoT et le web convergent de plus en plus, la capacité à créer des interfaces de monitoring en temps réel devient cruciale. À travers ce tutoriel pratique, nous allons explorer la création d'un système complet de surveillance de feux tricolores, combinant la puissance de Zephyr OS pour l'IoT avec les technologies web modernes. Ce projet servira d'exemple concret pour comprendre les enjeux et les solutions du monitoring IoT en temps réel.
Note : En tant qu'expert Zephyr OS, je suis disponible pour vous accompagner dans vos projets de développement IoT. N'hésitez pas à me contacter par email ou sur LinkedIn ou encore via GitHub pour toute question sur Zephyr OS ou pour discuter de vos besoins en développement embarqué.
Le code source complet de ce projet est disponible sur GitHub.
Plan de l'Article
-
Vue d'ensemble du projet
- Architecture globale
- Technologies utilisées
- Objectifs pédagogiques
-
Partie IoT : Contrôleur de feux tricolores
- Introduction à Zephyr OS
- Implémentation du contrôleur en C++
- Communication avec le serveur
-
Backend : Serveurs et Communication
- API HTTP avec Bun
- Serveur WebSocket pour le temps réel
- Gestion des états avec Redis
-
Frontend : Interface de monitoring
- Construction avec Next.js 15
- Composants React temps réel
- Gestion de l'état et des mises à jour
-
Infrastructure et Déploiement
- Configuration Docker
- Scripts de développement
- Déploiement en production
-
Pour aller plus loin
- Tests et Qualité
- Monitoring et Observabilité
- Améliorations Fonctionnelles
Introduction
Le monitoring d'appareils IoT en temps réel présente des défis uniques, allant de la gestion des états à la communication bidirectionnelle. Notre projet de feux tricolores connectés illustre parfaitement ces problématiques : comment assurer une synchronisation fiable entre des appareils physiques et une interface web, tout en maintenant des performances optimales ?
Objectifs du Projet
Ce projet pédagogique vise à :
- Démontrer l'intégration entre IoT et technologies web modernes
- Explorer les patterns de communication temps réel
- Mettre en pratique les bonnes pratiques de développement full-stack
- Comprendre les enjeux de la supervision IoT
Architecture Globale
Notre système s'articule autour de quatre composants principaux :
- Contrôleur IoT : Développé avec Zephyr OS en C++, il simule un contrôleur de feux tricolores
- API Gateway : Serveur HTTP pour la communication avec le contrôleur
- Serveur WebSocket : Assure la diffusion en temps réel des changements d'état
- Interface Web : Application Next.js pour la visualisation et le contrôle
Note importante sur la simulation : Dans ce projet, nous simulons le périphérique IoT dans un container Docker pour des raisons pédagogiques. Le contrôleur se contente de logger les changements d'état. Dans un déploiement réel, ce contrôleur serait installé sur un véritable périphérique IoT (comme une Raspberry Pi Pico) et piloterait physiquement les feux tricolores via ses GPIO.
Exemple avec Raspberry Pi Pico
La Raspberry Pi Pico est un excellent choix pour implémenter ce projet en conditions réelles car :
- Elle supporte officiellement Zephyr OS
- Elle dispose de GPIO pour contrôler les LED des feux
- Elle peut être connectée au réseau via différents modules de communication longue portée (LoRaWAN, NB-IoT, LTE-M) adaptés aux déploiements extérieurs
- Son coût est très abordable (environ 5€)
Pour passer de notre simulation à un déploiement réel, il faudrait :
- Remplacer les logs par des commandes GPIO
- Adapter la configuration réseau pour le WiFi ou les modules de communication longue portée (LoRaWAN, NB-IoT, LTE-M) selon le contexte de déploiement
- Gérer l'alimentation et la résilience
- Ajouter un boîtier de protection
1. Vue d'ensemble du projet
Architecture globale
Notre système de monitoring de feux tricolores repose sur une architecture distribuée moderne, conçue pour assurer une communication temps réel fiable entre les appareils IoT et l'interface utilisateur.
Flux de données
-
Niveau IoT
- Les contrôleurs de feux tricolores, basés sur Zephyr OS, gèrent l'état des feux
- Dans notre implémentation, les changements d'état sont transmis via HTTP à l'API Gateway, mais d'autres protocoles auraient pu être utilisés :
- MQTT pour une communication plus légère et optimisée IoT
- CoAP pour les réseaux contraints
- LoRaWAN pour la communication longue portée
- gRPC pour des performances accrues
- Les contrôleurs maintiennent une connexion robuste avec le serveur
-
Niveau Backend
- L'API Gateway reçoit les mises à jour et les stocke dans Redis
- Redis agit comme un store d'état centralisé
- Le serveur WebSocket s'abonne aux événements Redis
- Les changements sont diffusés en temps réel aux clients connectés
-
Niveau Frontend
- L'application Next.js établit une connexion WebSocket
- Les composants React se mettent à jour automatiquement
- L'interface affiche l'état en temps réel des feux
Technologies utilisées
Côté IoT
Backend et Communication
Frontend
Objectifs pédagogiques
Ce projet a été conçu pour couvrir plusieurs aspects essentiels du développement IoT et web modernes :
1. Programmation embarquée
- Utilisation de Zephyr OS pour le développement IoT
- Gestion des états et des transitions en C++
- Communication réseau depuis un appareil embarqué
2. Architecture distribuée
- Communication entre systèmes hétérogènes
- Gestion d'état distribuée avec Redis
- Patterns de messaging temps réel
3. Développement web moderne
- Architecture hexagonale avec Next.js
- Composants React performants
- TypeScript et typage fort
4. DevOps et Infrastructure
- Conteneurisation avec Docker
- Scripts d'automatisation
- Monitoring et logging
Dans les sections suivantes, nous explorerons en détail chaque composant du système, en commençant par le contrôleur IoT basé sur Zephyr OS.
2. Partie IoT : Contrôleur de feux tricolores
Introduction à Zephyr OS
Zephyr OS est un système d'exploitation temps réel (RTOS) open source, particulièrement adapté aux systèmes embarqués et IoT. Dans notre projet, il offre plusieurs avantages clés :
- Gestion temps réel : Parfait pour le contrôle précis des feux tricolores
- Stack réseau robuste : Support natif des protocoles TCP/IP
- Empreinte mémoire réduite : Idéal pour les dispositifs contraints
- Support du C++ moderne : Permet une programmation orientée objet
Implémentation du contrôleur
Notre contrôleur de feux tricolores est implémenté en C++ moderne, utilisant les fonctionnalités de Zephyr OS pour une gestion efficace des états et de la communication.
Structure du code
Gestion des états
Communication avec le serveur
La communication avec le serveur backend est gérée par une classe dédiée utilisant l'API HTTP de Zephyr.
Client HTTP
Logging et Monitoring
Algorithme de gestion des feux
L'algorithme implémenté dans main.cpp gère le cycle des feux tricolores de manière sécurisée et coordonnée. Nous avons opté pour une implémentation simple et démonstrative, qui pourrait être enrichie pour des cas d'usage plus complexes.
-
Initialisation du système
-
Cycle principal
- Le système alterne entre les axes Nord-Sud et Est-Ouest
- Chaque cycle comprend trois phases :
- Vert (30 secondes)
- Jaune (5 secondes)
- Rouge avec délai de sécurité (2 secondes)
-
Gestion des changements d'état
-
Communication asynchrone
- Un thread dédié gère l'envoi HTTP des changements d'état
- Les événements sont mis en file d'attente via
k_msgq
- Le thread HTTP les traite de manière asynchrone
-
Sécurité et robustesse
- Délai de sécurité entre les changements d'axe
- Gestion des erreurs de communication
- Logging des événements pour le monitoring
Pistes d'amélioration
Cette implémentation basique pourrait être enrichie avec :
-
Scénarios personnalisables
- Configuration des durées par plage horaire
- Modes spéciaux (nuit, urgence, événements)
- Adaptation au trafic en temps réel
-
Gestion avancée du trafic
- Détection de présence de véhicules
- Priorité aux transports en commun
- Synchronisation entre carrefours
-
Configuration dynamique
- Interface de paramétrage à distance
- Changement de scénario à la volée
- Apprentissage automatique des patterns de trafic
Pour implémenter ces améliorations, il faudrait :
- Ajouter une couche d'abstraction pour les scénarios
- Implémenter un système de configuration dynamique
- Intégrer des capteurs et des règles métier complexes
- Développer une API de contrôle plus complète
Cette version simple reste néanmoins parfaitement adaptée pour démontrer les concepts de base de l'IoT et de la communication temps réel.
Configuration du projet
Le fichier prj.conf configure les fonctionnalités de Zephyr OS pour notre projet. Cette configuration active :
- Le support du C++ et du standard C++17 pour utiliser les fonctionnalités modernes du langage
- Les capacités réseau avec IPv4 et TCP pour la communication avec le serveur
- Les sockets et le client HTTP pour envoyer les mises à jour d'état
- Le système de logging pour le debugging et le monitoring
Ces options sont essentielles pour que notre contrôleur IoT puisse communiquer sur le réseau et envoyer les changements d'état des feux tricolores au serveur central.
Compilation optimisée avec Zephyr OS
Contrairement à un système d'exploitation traditionnel comme Linux qui embarque de nombreux modules et pilotes par défaut, Zephyr OS utilise une approche minimaliste et hautement configurable. À la compilation, seuls les composants strictement nécessaires sont inclus dans l'image finale :
-
Différence avec les OS traditionnels
- Un Linux embarqué classique fait plusieurs centaines de Mo
- Il inclut de nombreux pilotes et services non utilisés
- Le démarrage charge beaucoup de composants superflus
- La surface d'attaque est plus importante
-
Avantages de l'approche Zephyr
- L'image finale ne fait que quelques centaines de Ko
- Seuls les pilotes et protocoles configurés sont inclus
- Le démarrage est quasi instantané
- La surface d'attaque est minimale
-
Configuration granulaire
- Chaque fonctionnalité est un module Kconfig
- Les dépendances sont résolues automatiquement
- L'optimisation est poussée au maximum
- Les ressources sont allouées statiquement
Cette approche "from scratch" permet d'obtenir un système hautement optimisé et sécurisé, parfaitement adapté aux contraintes de l'IoT :
- Ressources limitées (RAM/Flash)
- Consommation énergétique minimale
- Démarrage rapide
- Surface d'attaque réduite
Compilation et déploiement
Le projet utilise CMake pour la compilation :
Cette implémentation IoT illustre plusieurs concepts avancés :
-
Programmation événementielle
- Utilisation de files de messages pour la communication inter-threads
- Timers pour la gestion des transitions d'état
-
Gestion des ressources
- Utilisation efficace de la mémoire
- Gestion des connexions réseau
-
Robustesse
- Logging détaillé des événements
- Gestion des erreurs de communication
- Reconnexion automatique
Dans la prochaine section, nous verrons comment le backend gère la communication avec ces contrôleurs IoT et distribue les mises à jour aux clients web.
3. Backend : Serveurs et Communication
Notre backend est composé de plusieurs services qui collaborent pour assurer une communication fluide entre les contrôleurs IoT et l'interface web.
API Gateway avec Bun
L'API Gateway est le point d'entrée pour les contrôleurs IoT. Implémentée avec Bun pour ses performances exceptionnelles, elle gère les requêtes HTTP et maintient la cohérence des états.
Gestion des requêtes
Serveur WebSocket
Le serveur WebSocket assure la distribution en temps réel des mises à jour aux clients web connectés.
Implémentation du serveur
Gestion des états avec Redis
Redis joue un rôle central dans notre architecture, servant à la fois de broker de messages et de store d'état.
Configuration Redis
Subscriber Redis
Architecture de Communication
Notre backend implémente plusieurs patterns de communication essentiels :
-
Pattern Pub/Sub
- Redis comme broker de messages
- Découplage des producteurs et consommateurs
- Distribution efficace des mises à jour
-
Pattern Gateway
- Point d'entrée unique pour les appareils IoT
- Validation et transformation des données
- Gestion des erreurs centralisée
-
Pattern Observer
- Notification en temps réel des changements
- Maintien des connexions WebSocket
- Distribution des mises à jour aux clients
Sécurité et Performance
Plusieurs mesures sont mises en place pour assurer la sécurité et les performances :
-
Sécurité
- Validation des données entrantes
- Headers CORS configurés
- Isolation réseau avec Docker
-
Performance
- Utilisation de Bun pour des performances optimales
- Connexions persistantes avec Redis
- Gestion efficace des WebSockets
-
Fiabilité
- Logging des événements
- Gestion des erreurs robuste
- Reconnexion automatique aux services
Dans la prochaine section, nous explorerons l'interface utilisateur développée avec Next.js qui permet de visualiser et interagir avec notre système de feux tricolores.
4. Frontend : Interface de monitoring
L'interface utilisateur de notre système est construite avec Next.js 15, en suivant les meilleures pratiques de développement moderne et une architecture hexagonale.
Architecture du Frontend
Notre application suit une architecture hexagonale (ports et adaptateurs) pour maintenir une séparation claire des responsabilités :
Implémentation de l'Adaptateur
L'adaptateur gère la communication avec le backend via WebSocket :
Composants React
Page Principale
Composant Feu Tricolore
Styles et Configuration
Configuration Tailwind
Optimisations et Bonnes Pratiques
-
Performance
- Utilisation de React Server Components
- Optimisation des re-rendus
- Lazy loading des composants non critiques
-
Accessibilité
- Support du clavier
- Attributs ARIA appropriés
- Contraste des couleurs optimisé
-
Maintenabilité
- Architecture hexagonale
- Typage strict avec TypeScript
- Tests automatisés
Dans la prochaine section, nous aborderons l'infrastructure et le déploiement de notre application.
5. Infrastructure et Déploiement
Notre système utilise Docker pour garantir un déploiement cohérent et reproductible dans tous les environnements.
Configuration Docker
Composition des Services
Scripts de Développement
Script de Gestion des Services
Configuration de l'Environnement de Développement
Image Docker pour Zephyr
Services de Support
Script de Services Docker
Gestion des Dépendances
Configuration Next.js
Bonnes Pratiques de Déploiement
-
Gestion des Secrets
- Utilisation de variables d'environnement
- Séparation des configurations par environnement
- Stockage sécurisé des secrets
-
Monitoring
- Logging centralisé
- Métriques de performance
- Alertes automatisées
-
Sécurité
- Isolation réseau
- Mise à jour régulière des dépendances
- Scan de vulnérabilités
Dans la dernière section, nous aborderons les stratégies de test et le monitoring de notre application.
6. Pour aller plus loin
Pour rendre ce projet plus robuste et prêt pour la production, plusieurs axes d'amélioration peuvent être explorés :
1. Tests et Qualité
Pour assurer la fiabilité du système, nous devrions implémenter :
Tests du Contrôleur IoT
- Tests unitaires pour la machine à états des feux
- Tests d'intégration avec le réseau
- Simulation de conditions d'erreur
- Validation des séquences de feux
Tests Frontend
- Tests des composants React avec Jest et Testing Library
- Tests end-to-end avec Cypress ou Playwright
- Tests de performance avec Lighthouse
- Validation de l'accessibilité
2. Monitoring et Observabilité
Pour un suivi efficace en production, nous devrions ajouter :
-
Performance
- Intégration avec Prometheus/Grafana
- Métriques détaillées des WebSockets
- Monitoring des ressources IoT
-
Fiabilité
- Système de heartbeat pour les contrôleurs
- Détection automatique des anomalies
- Backup automatique des états
-
Sécurité
- Authentification des contrôleurs
- Chiffrement des communications
- Audit des accès
3. Améliorations Fonctionnelles
Le système pourrait être enrichi avec :
-
Interface Avancée
- Mode maintenance
- Historique des changements d'état
- Tableaux de bord personnalisables
-
Gestion des Scénarios
- Programmation horaire
- Modes spéciaux (urgence, événements)
- API pour l'intégration externe
-
Scalabilité
- Support multi-carrefours
- Synchronisation entre intersections
- Répartition de charge
4. Optimisation Énergétique pour Déploiement sur Batterie
Pour les projets nécessitant une autonomie énergétique (sites isolés, zones sans alimentation secteur), plusieurs optimisations seraient nécessaires :
-
Modes de Puissance
- Mode normal pour le fonctionnement standard
- Mode éco pour économiser l'énergie en journée calme
- Mode nuit avec luminosité réduite
- Mode urgence en cas de batterie faible
-
Stratégies d'Économie
- Mise en veille du CPU entre les changements d'état
- Regroupement des transmissions réseau
- Ajustement dynamique de la luminosité des LED
-
Alimentation Solaire
- Dimensionnement adapté des panneaux
- Batteries LiFePO4 pour la durée de vie
- Système de backup
-
Monitoring de la Batterie
Pour un déploiement réussi, il est recommandé de :
- Monitorer en continu la santé de la batterie
- Planifier les remplacements préventifs
- Nettoyer régulièrement les panneaux solaires
- Implémenter des modes dégradés en cas de batterie faible
- Prévoir une signalisation de secours
Conclusion
Ce projet démontre l'intégration réussie de technologies IoT et web modernes pour créer un système de monitoring en temps réel. Les points clés à retenir sont :
-
Architecture Distribuée
- Séparation claire des responsabilités
- Communication efficace entre les composants
- Scalabilité et maintenabilité
-
Technologies Modernes
- Zephyr OS pour l'IoT
- Next.js pour le frontend
- WebSocket pour le temps réel
-
Bonnes Pratiques
- Tests automatisés
- Monitoring complet
- Documentation détaillée
Ce projet peut servir de base pour développer des applications IoT plus complexes, en adaptant l'architecture et les patterns utilisés selon vos besoins spécifiques.
Mettre en pratique
Pour tirer le meilleur parti de ce tutoriel et développer vos propres projets IoT, voici quelques suggestions d'exercices pratiques :
1. Commencez petit
-
Version simplifiée
- Créez d'abord un seul feu tricolore
- Utilisez un simple serveur HTTP sans WebSocket
- Affichez l'état dans une page web basique
-
Simulation IoT
- Commencez sans matériel physique
- Simulez le contrôleur avec un script Node.js
- Testez la logique de communication
2. Évolutions progressives
-
Ajoutez les WebSockets
- Implémentez la mise à jour en temps réel
- Gérez la reconnexion automatique
- Ajoutez des logs pour comprendre le flux
-
Intégrez Redis
- Stockez d'abord des états simples
- Ajoutez la persistence des données
- Implémentez les patterns pub/sub
3. Variations du projet
Voici quelques idées pour créer votre propre version :
-
Autres cas d'usage
- Moniteur de température/humidité
- Système d'éclairage intelligent
- Contrôle d'arrosage automatique
-
Technologies alternatives
- Remplacez Zephyr OS par ESP32/Arduino
- Utilisez MQTT au lieu de WebSockets
- ...
4. Ressources complémentaires
Pour approfondir chaque aspect :
-
Documentation officielle
-
Dépôts d'exemple
-
Communautés
