Passo a passo para transformar este acervo num aplicativo web mobile offline-first, onde cada colmeia cápsula tem um número identificador e toda a gestão é registrada e rastreável. Inclui os prompts para gerar o design (Claude) e o código (Fable 5).
Um PWA (Progressive Web App): abre no navegador do celular, instala como app (ícone na tela) e funciona offline — essencial para o meliponário no mato, sem sinal. Os dados ficam no próprio aparelho e, numa fase futura, sincronizam para a nuvem (backup + multiusuário/multiestado).
Princípios: rápido de usar no campo (poucos toques, câmera para QR e fotos), tolerante a offline, e fiel à identidade "Colmeia Cápsula" (fundo branco, preto, botões por tema, o logo do cilindro).
Cada colmeia recebe um número lógico gerado pelo app, que codifica espécie, tamanho, cronologia e origem (matriz ou filha, com a genealogia). Ele é impresso em QR code (colado na cápsula/casca) e é a chave de tudo no app.
Formato proposto
ESP-TAM-AA-NNN-O[REF]
| Exemplo | Leitura |
|---|---|
JAT-P-26-014-M | Jataí, tamanho P, origem 2026, colônia 014, é matriz. |
JAT-P-26-047-F014 | Filha nº 047 (2026), gerada por divisão da matriz 014. |
JAT-P-27-003-F047 | Neta: filha nº 003 (2027) da colônia 047. |
SP1.BOR-GG-26-002-M | Com prefixo de meliponário (SP1): borá GG, 2026, matriz 002. |
O QR code guarda o ID completo (ou uma rota interna, ex.: colmeia/JAT-P-26-014-M). Ao escanear, o app abre direto a ficha daquela colônia.
Códigos de espécie (inicial, extensível)
As entidades que o app guarda (offline, no aparelho). Repare que os campos de manejo/coleta já existem nas ferramentas HTML atuais — o app reaproveita esse dicionário.
Fluxo pensado para o celular:
Onboarding / instalarDashboard (KPIs + alertas)Lista de colmeias (busca + filtros)Escanear QRNova colmeia (gera o número)Detalhe da colmeia (timeline)Registrar manejoRegistrar mediçãoRegistrar colheitaRegistrar divisão (cria filha)Árvore genealógicaSaúde & alertasRelatórios / exportarMeliponários / mapaConfigurações
A tela de detalhe é o coração: mostra a ficha da colônia, uma linha do tempo de todos os manejos/medições/colheitas, o status de saúde, a genealogia e um botão grande "＋ Registrar".
Construa uma fase de cada vez. Em cada uma: primeiro o design (telas e componentes) com o Claude; depois o código com o Fable 5. Sempre anexando a pasta do projeto como contexto.
Esqueleto do app instalável e offline, com a identidade visual e o banco local vazio.
Você é meu designer de produto. Anexei a pasta do projeto "Colmeia Cápsula" (identidade visual, logo do cilindro com 5 cortes, cores por tema, ficha da hipótese e ferramentas HTML). Desenhe o DESIGN SYSTEM de um app mobile (PWA) de gestão de colmeias de abelhas sem ferrão, fiel a essa identidade: fundo branco, texto/traços pretos, botões coloridos por tema, tipografia serifada nos títulos. Entregue: paleta e tokens, tipografia, componentes base (botão, card, campo, tab bar inferior, cabeçalho, chip/badge, estado vazio, toast), e o layout do shell do app (tab bar com Dashboard, Colmeias, Escanear, Relatórios, Ajustes). Estilo minimalista, alto contraste, alvos de toque grandes (uso no campo). Mostre em telas de 390px de largura.
Usando o design system aprovado (anexo) e a pasta do projeto como referência, gere o esqueleto de um PWA com React + Vite + TypeScript + Tailwind, instalável e offline-first. Configure: manifest.json e service worker (cache do app shell); Dexie.js com as tabelas colmeia, manejo, medicao, colheita, saude, evidencia (schemas conforme o modelo de dados do roadmap anexo); tema Tailwind com as cores da identidade; tab bar inferior fixa (Dashboard, Colmeias, Escanear, Relatórios, Ajustes) e o cabeçalho com o logo. Sem backend. Entregue estrutura de pastas, arquivos e instruções para rodar (npm run dev) e instalar como app.
Gerador do número lógico e leitura/geração de QR.
Desenhe as telas do "identificador da colmeia": (1) formulário de nova colmeia que monta o número no formato ESP-TAM-AA-NNN-O[REF] (seleção de espécie por lista com código de 3 letras, tamanho PP–GG, origem matriz/filha; se filha, escolher a matriz-mãe); (2) tela do QR gerado, grande, com botão imprimir/compartilhar; (3) tela de escanear QR (câmera em tela cheia com moldura). Mostre o número sendo montado em tempo real. Fiel à identidade.
Implemente o gerador de identificador no formato ESP-TAM-AA-NNN-O[REF] (regras no roadmap anexo): função que monta e valida o número, controla a sequência NNN por ano, e vincula filha à matriz. Gere o QR com a lib "qrcode" (conteúdo = o id) e a leitura com "html5-qrcode" abrindo a ficha da colmeia correspondente. Salve a colmeia no Dexie. Inclua a tabela de códigos de espécie (editável). Reaproveite os componentes do design system.
Desenhe a tela "Colmeias": lista de cards (número, espécie, tamanho, status de saúde por cor, última ação e data), com busca por número/espécie e filtros (espécie, tamanho, status, meliponário). Botão flutuante "＋ Nova colmeia" e atalho para escanear QR. Inclua o estado vazio. Mobile, 390px.
Implemente a listagem de colmeias lendo do Dexie, com busca e filtros reativos, cards com indicador de saúde, e navegação para o detalhe. Ordenação por última atividade. Tudo offline. Use o design aprovado.
Desenhe a tela de DETALHE da colmeia: cabeçalho com número, QR pequeno, espécie/tamanho e status; abas ou seções para Linha do tempo (manejos, medições, colheitas em ordem cronológica com ícones), Saúde, Genealogia e Fotos; botão grande "＋ Registrar" que abre um menu (manejo, medição, colheita, divisão). Layout claro e escaneável no campo.
Implemente a tela de detalhe: carrega a colmeia e agrega manejos, medições e colheitas numa timeline única ordenada por data; seções de Saúde e Genealogia; ação "＋ Registrar" roteando para os formulários. Dados do Dexie, offline.
Reaproveite os campos das ferramentas Diário, Protocolo e Coleta já existentes na pasta.
Desenhe os formulários de "Registrar manejo" (tipo, data, observações, fotos) e "Registrar medição" (peso, mel, recuperação, mortalidade, forídeos, infestações, temperatura, voo) — os campos são os das ferramentas de Diário e Coleta anexas. Otimize para toque rápido no campo: campos grandes, teclado numérico, câmera para foto, salvar com 1 toque. Mostre confirmação (toast).
Implemente os formulários de manejo e medição gravando no Dexie, vinculados ao id da colmeia, com captura de foto (input câmera) salva localmente. Use exatamente os campos das ferramentas HTML de Diário e Coleta anexas. Validação simples e salvamento offline.
Desenhe a tela de "Colheita": escolher produto (mel / samburá / geoprópolis), quantidade e unidade (melgueira, L, g), data e lote; e uma tela de "Estoque/Lotes" com o total por produto e a rastreabilidade (de qual colmeia veio cada lote, com QR do produto). Fiel à identidade.
Implemente o registro de colheita no Dexie (vinculado à colmeia), o cálculo de estoque por produto e a geração de QR do lote (rastreável até a colmeia de origem). Offline.
Desenhe o painel de "Saúde & alertas": lista de colmeias que precisam de atenção (ex.: sem inspeção há X dias, forídeos registrados, sinal de umidade), com nível (ok / atenção / crítico) por cor e a ação sugerida. No Dashboard, um resumo dos alertas.
Implemente regras simples de alerta a partir dos registros (dias desde a última inspeção; forídeos > 0; observações marcadas). Gere a lista de pendências e os contadores do Dashboard. Offline, recalculado ao abrir.
Desenhe a "Árvore genealógica" de uma colmeia: a matriz no topo e as filhas/netas derivadas por divisão, em formato de árvore vertical tocável (cada nó abre a colmeia). Mostre ano e número de cada nó. Simples e legível no celular.
Implemente a árvore genealógica a partir do vínculo filha→matriz (campo REF do id). Monte a árvore recursivamente e renderize nós tocáveis que navegam para cada colmeia. Offline.
Desenhe o Dashboard: KPIs (nº de colmeias por espécie/tamanho, colheita total por produto no período, alertas abertos, divisões no ano) e gráficos simples; e uma tela de Relatórios com exportação (CSV/PDF) filtrável por período/espécie — para alimentar a pesquisa. Fiel à identidade.
Implemente o Dashboard com KPIs e gráficos (Recharts) a partir do Dexie, e a exportação para CSV e PDF filtrável. Offline. Estrutura pronta para, no futuro, sincronizar com a nuvem.
Quando o MVP estiver validado no campo: adicionar login, sincronização e backup para operar em múltiplos meliponários e estados.
Adicione sincronização opcional com Supabase (auth + Postgres + storage) mantendo o offline-first: fila de sincronização, resolução de conflitos por timestamp, e upload das fotos. Multiusuário por meliponário. Não quebrar o uso offline existente.
Prompt-mestre (cole no início de cada sessão)
Contexto: estou construindo um PWA offline-first de gestão de colmeias de abelhas sem ferrão, chamado "Colmeia Cápsula". Anexei a pasta do projeto (identidade visual, logo, ficha da hipótese, ferramentas HTML e o roadmap do app). O app deve herdar a identidade (fundo branco, preto, botões por tema, logo do cilindro com 5 cortes) e os campos de manejo já definidos. Cada colmeia tem um número no formato ESP-TAM-AA-NNN-O[REF]. Foco do MVP: rastreabilidade da minha pesquisa (offline). Vamos trabalhar UMA fase por vez.
Colmeia Cápsula · Roadmap do app v1.0 ·