Diário de bordo digital do veleiro Shivão (HTML standalone + Node/Express + SQLite)
d1a2401048
Implementa requisitos pra uso em áreas remotas: OFFLINE REAL (Service Worker em server/public/sw.js) - Pré-cache de shell (HTML, manifest, icon, Leaflet, fontes Google) - Cache-first pra map tiles OSM (offline em alto-mar com tiles já visitados) - Network-first pra Windy/Open-Meteo (com fallback ao cache) - /api/* passa direto (não interferir em sync, heartbeat, auth) - Skip-waiting + claim pra ativar imediatamente após install SENSORES (sensor widget flutuante canto superior direito) - Bússola via DeviceOrientationEvent (suporta iOS webkitCompassHeading + Android alpha) - iOS: pede permission via gesture do usuário (botão 'Ativar bússola') - Barômetro via Generic Sensor API (Android com sensor real, fallback gracioso) - Tendência de pressão (subindo/caindo/estável) baseada em janela móvel - Indicador de online/offline sempre visível PRÉ-CACHE DE MAPA - Botão 'Pré-cachear mapa' baixa tiles ~50km de raio (zooms 8-13, ~200 tiles) - Comunicação page→SW via MessageChannel - Limit 6 conexões paralelas (respeitando OSM tile policy) DOCUMENTAÇÃO TERMÔMETRO: API web não tem termômetro de ambiente. Solução: usar dado da Windy (já implementado) + cache offline via SW. Sincronizado em app/ e server/public/ — single-file HTML preservado. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> |
||
|---|---|---|
| app | ||
| server | ||
| .gitignore | ||
| API.md | ||
| ARCHITECTURE.md | ||
| BACKLOG.md | ||
| CONTRIBUTING.md | ||
| DEPLOY.md | ||
| HANDOFF.md | ||
| PROJECT_CONTEXT.md | ||
| README.md | ||
Shivao · Diário de Bordo
Aplicativo web para registro de viagens, manutenções e segurança de um veleiro (em uso pelo veleiro Shivao), com recursos de GPS, vigia de fundeio com alarme remoto, geofencing, sincronização na nuvem e notificações automáticas.
Estrutura do projeto
shivao-projeto/
├── README.md ← este arquivo (visão geral)
├── HANDOFF.md ← estado atual + pendências para o time
├── DEPLOY.md ← guia de deploy no Coolify (Hetzner VPS)
├── API.md ← referência completa da API REST
├── ARCHITECTURE.md ← decisões técnicas e fluxos
├── BACKLOG.md ← melhorias futuras sugeridas
├── CONTRIBUTING.md ← convenções, como rodar localmente
│
├── app/
│ └── diario-bordo.html ← FRONTEND completo (HTML standalone, ~200 KB)
│
└── server/
├── Dockerfile ← imagem Node 20 alpine
├── docker-compose.yml
├── package.json
├── .env.example ← template de variáveis de ambiente
├── README.md ← documentação focada no backend
├── public/
│ └── index.html ← cópia do frontend (servido pelo backend)
└── src/
├── index.js ← entrypoint Express
├── db.js ← SQLite (better-sqlite3)
└── notifications.js ← Telegram, ntfy, e-mail, Twilio, webhook
Visão geral em 30 segundos
O frontend é um único arquivo HTML que funciona offline-first e pode ser "instalado" no Android via "Adicionar à tela inicial" do Chrome. Armazena tudo em localStorage (dados estruturados) e IndexedDB (mídias).
O backend opcional é um servidor Node.js com SQLite que provê:
- Sincronização na nuvem dos dados entre dispositivos
- Dead-man switch: se o app pára de mandar heartbeat enquanto fundeado, o servidor dispara o alarme sozinho
- Notificações fan-out: uma chamada de alarme do app → e-mail, Telegram, ntfy, SMS, WhatsApp para todos os contatos configurados
- Compartilhamento público: link temporário que mostra a posição do barco ao vivo num mapa para a tripulação em terra
- Mídia: upload e armazenamento de fotos/áudios/vídeos do app
Funcionalidades implementadas
Navegação e segurança
- ⛵ Registro de travessias com tripulação, datas, horímetro, vento, distância, observações
- 🛰 Rastreio GPS em tempo real com mapa Leaflet, distância em milhas náuticas, velocidade em nós
- ⚓ Vigia de fundeio com âncora + centro de giro independente, raio editável, auto-recentro, alarme sonoro (Web Audio) + vibração + tela vermelha em caso de deriva
- 🚧 Geofencing com zonas de proibição (alarme) e atenção (aviso), detecção em tempo real
- 📍 Compartilhamento público com URL temporária para a tripulação ver no mapa
Manutenção
- 🔧 Registro de reparos com horímetro, custo, prestador, fotos, notas fiscais
- 📋 Lista de pendências com data prevista OU horímetro alvo, prioridades, custo estimado
- 🔔 Alertas automáticos quando manutenção está próxima ou atrasada
- 📋 Checklists customizáveis (segurança, motor, vela, fundeio, travessia longa)
Mídia
- 📷 Foto da câmera (input com
capture) - 🎙 Áudio com gravador embutido (MediaRecorder)
- 🎥 Vídeo da câmera ou galeria
- Visualização em tela cheia, download, exclusão
Tempo
- 🌬 Windy Point Forecast API (chave premium) para vento, ondas, temperatura
- 🌊 Fallback para Open-Meteo (grátis, sem chave)
- ⚡ Modo economia de energia que ajusta GPS conforme nível de bateria
Cloud
- ☁️ Sync automático com servidor próprio
- 🔄 Webhooks diretos do app: Telegram, Discord, genérico
- 🚨 Dead-man switch via servidor
- 📤 Compartilhamento de posição em tempo real
Import/export
- 📥 Importar GPX de chartplotter, Navionics, Garmin, etc.
- 📤 Exportar GPX de cada travessia
- 📦 Backup/restore JSON completo (com mídias em base64)
- 📊 Export CSV de viagens, manutenções, pendências
- 🖨 Imprimir/PDF
UX
- Design maritime editorial (Fraunces serif itálico + Manrope + JetBrains Mono)
- Paleta pergaminho/marinha/latão envelhecido
- Mobile-first, instalável como PWA
- Suporte a viewport seguro (safe-area-inset)
Próximo passo
Ver HANDOFF.md para o estado atual e o que falta para entrar em produção.
Projeto pessoal — uso interno do veleiro Shivao.