Um dashboard IoT em tempo real não é simplesmente uma página web com gráficos. É um sistema completo que envolve ingestão de dados, processamento, armazenamento, transmissão e renderização, tudo otimizado para que os dados cheguem do sensor ao olho do utilizador em menos de um segundo.
Neste guia explico como construir um desde zero, baseando-me na experiência real de os ter construído para clientes como Spherag (monitorização agrícola 24/7), InfoAdex (55M+ registos publicitários) e Orquest (gestão de força laboral).
Stack técnico recomendado
Frontend
| Tecnologia | Para quê |
|---|---|
| React 18+ | Framework UI com Concurrent Features |
| Recharts ou Visx | Gráficos de séries temporais performantes |
| D3.js | Visualizações custom complexas |
| TanStack Query | Gestão de estado servidor + cache |
| Socket.IO ou native WebSocket | Dados em tempo real |
| Tailwind CSS | Estilos rápidos e consistentes |
Backend
| Tecnologia | Para quê |
|---|---|
| Node.js + Fastify | API REST + WebSocket server |
| Redis | Cache + pub/sub para broadcast |
| TimescaleDB | Base de dados de séries temporais |
| PostgreSQL | Metadados, configurações, utilizadores |
| MQTT broker (EMQX/Mosquitto) | Receção de dados de dispositivos |
Arquitetura de dados
O padrão chave é separar dados históricos de dados em vivo:
- Dados históricos: Quando o utilizador carrega a página ou muda o intervalo temporal, consultam-se dados armazenados em TimescaleDB via API REST
- Dados em vivo: Uma vez carregada a vista, os novos dados chegam via WebSocket e adicionam-se ao gráfico sem recarregar
Otimizações de desempenho
- Throttling de atualizações: Agrupar atualizações a cada 200ms
- Virtualização de listas: Renderizar apenas as filas visíveis
- Web Workers: Para processamento pesado no frontend
- Canvas em vez de SVG: Para mais de 5.000 pontos de dados
Conclusão
Os pontos chave:
- Separe dados históricos (API REST + TimescaleDB) de dados em vivo (WebSocket + Redis pub/sub)
- Implemente downsampling automático segundo o intervalo temporal
- Use throttling para não saturar o frontend com atualizações
- Desenhe o sistema de alertas como componente independente
- Monitorize o próprio dashboard como qualquer sistema em produção
Se precisa de ajuda a construir o seu dashboard em tempo real ou a sua plataforma IoT industrial, na Soamee levamos anos a fazê-lo. Agende uma consultoria gratuita e vemos o seu caso.