57 lines
3.3 KiB
Markdown
Executable File
57 lines
3.3 KiB
Markdown
Executable File
|
|
# Analyse Technique - MQTT Web Explorer
|
|
|
|
## 1. Vision Globale
|
|
L'objectif est de créer un outil de monitoring MQTT robuste capable de maintenir la continuité des données (via un backend Go persistant) tout en offrant une expérience utilisateur fluide et élégante (Inspiré de MQTT Explorer, thème Monokai).
|
|
|
|
## 2. Dessin ASCII de l'Interface (Desktop)
|
|
|
|
```text
|
|
+----------------------------------------------------------------------------------+
|
|
| [M] MQTT EXPLORER | Profil: Production v1 | Status: [ CONNECTED ] [Settings]|
|
|
+----------------------------------------------------------------------------------+
|
|
| RECHERCHE: [ sensors/.* ] [X] Retained [X] JSON [X] Active | TOPIC SELECTIONNÉ|
|
|
+----------------------------------------------------------------------------------+
|
|
| EXPLORATEUR (Arbre CLI) | DÉTAILS DU MESSAGE (sensors/kitchen/temp) |
|
|
| ▾ sensors | ------------------------------------------ |
|
|
| ▾ kitchen | [ RAW ] [ PRETTY ] [ DIFF ] [ GRAPH ] |
|
|
| ▸ light | ------------------------------------------ |
|
|
| ▸ temp (3 msgs/s) | { |
|
|
| ▾ livingroom | "value": 21.4, |
|
|
| ▸ door | "unit": "°C", |
|
|
| ▾ devices | "timestamp": "2023-10-27T10:00:00Z" |
|
|
| ▸ bridge-01 | } |
|
|
| | ------------------------------------------ |
|
|
| | IMAGES DÉTECTÉES: [ Image Preview ] |
|
|
+-----------------------------------+- ------------------------------------------ |
|
|
| [ GRAPH DOCK: | \/\/\/\/\ | Value: 21.4 | Max: 22.0 | Min: 20.1 ] |
|
|
+----------------------------------------------------------------------------------+
|
|
```
|
|
|
|
## 3. Architecture Logicielle
|
|
|
|
### Backend (Go + Gin)
|
|
- **MQTT Manager**: Service singleton gérant les connexions Paho MQTT.
|
|
- **Persistence Layer**: SQLite pour le stockage des messages (Index sur Topic+Timestamp).
|
|
- **TTL Manager**: Routine de purge automatique (Nettoyage des messages > N jours).
|
|
- **WebSocket Hub**: Streaming en temps réel vers le frontend React.
|
|
- **API REST**: Configuration des profils, tests réseau, historique paginé.
|
|
|
|
### Frontend (React + TypeScript)
|
|
- **State Management**: Context API / Hooks pour l'état de l'arbre.
|
|
- **Rendering**: Composant d'arbre récursif optimisé "CLI style".
|
|
- **Theming**: Système de variables CSS (Monokai Pro).
|
|
- **Charts**: Recharts pour la visualisation des séries temporelles.
|
|
|
|
## 4. Plan de Développement
|
|
1. **Phase 1: Backend Core** (Go, SQLite, MQTT loop).
|
|
2. **Phase 2: WebSocket & API** (Hub de messages, endpoints profils).
|
|
3. **Phase 3: UI Layout** (Shell responsive, Thème Monokai).
|
|
4. **Phase 4: Explorateur de Topics** (Arbre récursif, filtres).
|
|
5. **Phase 5: Payload & Historique** (Pretty JSON, Diff, SQLite Fetch).
|
|
6. **Phase 6: Fonctionnalités Avancées** (Images, Graphes, Dockerisation).
|
|
|
|
## 5. Icônes & Ressources
|
|
- **Icônes**: Utilisation de Lucide-React (Antenna, Share2, Search, Settings, Trash, Image, LineChart).
|
|
- **Polices**: JetBrains Mono pour les données techniques, Inter pour l'UI.
|