Diário de bordo digital do veleiro Shivão (HTML standalone + Node/Express + SQLite)
|
|
||
|---|---|---|
| .forgejo/workflows | ||
| app | ||
| mobile | ||
| scripts | ||
| 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.