Pular para o conteúdo
Todos os projetos

Aplicação web mobile-first · Coleta de dados em campo

RAR-AI

Relatório de análise de risco preenchido no celular durante a visita técnica, com rascunho salvo no próprio aparelho, mesmo sem sinal, e um motor de regras que calcula o nível de risco automaticamente

Projeto privado — sem link público

Cliente
Segurança institucional · setor público
Cargo
Engenheiro de Software Full-stack
Ano
2026
Tecnologias
  • Next.js 16
  • React 19
  • TypeScript
  • Tailwind CSS 4
  • Zustand
  • Zod
  • IndexedDB
  • Web Speech API

Contexto

Aplicação web mobile-first para analistas de segurança institucional registrarem a visita técnica e produzirem o Relatório de Análise de Risco de Áreas e Instalações (RAR-AI) no modelo oficial — o “AI” do nome vem de Áreas e Instalações, não de inteligência artificial. A coleta acontece no celular, em campo, em locais com conexão instável. Por trás do formulário há uma lógica de domínio considerável, mantida sob sigilo: a metodologia de análise e as regras de negócio não são descritas aqui, e as telas mostram um relatório fictício.

Desafio

Converter um modelo oficial extenso — vários eixos de análise, checklists obrigatórios e cálculo de risco — em um fluxo rápido de preencher no celular, sem perda de dados quando a conexão cai e sem que o analista precise calcular à parte ou redigitar o que já registrou.

Resultados

etapas do cabeçalho à revisão, navegáveis em qualquer ordem
11
dos dados de campo (rascunho, fotos e áudios) guardados no próprio aparelho, sem servidor
100%
de alvo de toque nos controles principais do design system próprio
44 px

Principais entregas

  1. 01Desenvolvi com Next.js 16, React 19 e TypeScript um formulário mobile-first de 11 etapas com navegação livre, progresso e lista de pendências por etapa e relatório gerado no modelo oficial, pronto para imprimir ou salvar em PDF.
  2. 02Implementei em TypeScript um motor de regras determinístico e confidencial: ele calcula automaticamente o nível de risco, monta o checklist obrigatório conforme o perfil da unidade e gera o rascunho da conclusão a partir das vulnerabilidades e recomendações registradas.
  3. 03Criei um design system mobile-first em Tailwind CSS 4 — tokens de cor semântica, botões, chips de seleção sobre radios nativos, stepper e campos, com alvos de toque de 44 px nos controles principais — reutilizado por todos os eixos de análise.
  4. 04Integrei notas de voz a todos os campos de texto longo com MediaRecorder e Web Speech API: o áudio fica salvo e, quando o navegador oferece, a fala é transcrita em pt-BR direto no campo.
  5. 05Implementei persistência local com Zustand (localStorage) e IndexedDB (idb-keyval) para rascunho, fotos e áudios, e exportação/importação de pacote JSON validado por Zod, para o analista seguir preenchendo sem sinal, retomar de onde parou e continuar o relatório em outro aparelho, sem backend.

Telas e componentes

  1. Coleta em campo

    Sem sinal, o indicador passa para offline e o preenchimento continua, com cada item avaliado em um toque. Cada vulnerabilidade recebe fotos numeradas, e a nota de voz fica salva como áudio, com transcrição parcial quando o navegador oferece.

    • Etapa de avaliação sem conexão: indicador Salvo · 11:32 · offline no topo, itens avaliados com chips de conceito e a situação encontrada descrita no campo de texto, com o botão Gravar áudio.
      Etapa de avaliação sem conexão: indicador Salvo · 11:32 · offline no topo, itens avaliados com chips de conceito e a situação encontrada descrita no campo de texto, com o botão Gravar áudio.
    • Registro de uma vulnerabilidade: chips de impacto selecionados, interruptor Evidência não se aplica desligado, duas fotos ilustrativas numeradas 03 e 04 vinculadas e botões Fotografar, Galeria e Usar existente.
      Registro de uma vulnerabilidade: chips de impacto selecionados, interruptor Evidência não se aplica desligado, duas fotos ilustrativas numeradas 03 e 04 vinculadas e botões Fotografar, Galeria e Usar existente.
    • Gravação de nota de voz em um item da etapa de avaliação: conceito selecionado, situação encontrada no campo de texto, indicador Gravando 00:41, botão Parar e a transcrição parcial em itálico abaixo.
      Gravação de nota de voz em um item da etapa de avaliação: conceito selecionado, situação encontrada no campo de texto, indicador Gravando 00:41, botão Parar e a transcrição parcial em itálico abaixo.

  2. A mesma base no computador

    No computador, a mesma base ganha uma barra lateral com o status de cada etapa: concluída, em andamento ou não iniciada.

    Formulário no computador, com 47% do relatório preenchido: barra lateral com o status de cada etapa (concluída, em andamento ou não iniciada), itens da etapa avaliados com chips de conceito, a situação encontrada no campo de texto e uma nota de voz de 42 segundos.
    Formulário no computador, com 47% do relatório preenchido: barra lateral com o status de cada etapa (concluída, em andamento ou não iniciada), itens da etapa avaliados com chips de conceito, a situação encontrada no campo de texto e uma nota de voz de 42 segundos.

  3. Revisão e transferência

    A revisão lista o que falta em cada etapa, com atalho para abrir a etapa e completar. Sem servidor, o relatório viaja entre aparelhos como pacote JSON, com ou sem fotos e áudios.

    • Revisão de um relatório em andamento: cartão Situação do relatório com 47% e 17 pendências em aberto, barra de progresso e lista das etapas com status Concluída, Em andamento ou Não iniciada, as pendências de cada uma e o botão Abrir.
      Revisão de um relatório em andamento: cartão Situação do relatório com 47% e 17 pendências em aberto, barra de progresso e lista das etapas com status Concluída, Em andamento ou Não iniciada, as pendências de cada uma e o botão Abrir.
    • Etapa de revisão: cartão Gerar o RAR-AI com o botão Visualizar e imprimir (PDF) e cartão Salvar e transferir com 4 fotos e 4 notas de voz, opção de incluir mídias e botões Exportar pacote (.json), Importar pacote e Novo relatório.
      Etapa de revisão: cartão Gerar o RAR-AI com o botão Visualizar e imprimir (PDF) e cartão Salvar e transferir com 4 fotos e 4 notas de voz, opção de incluir mídias e botões Exportar pacote (.json), Importar pacote e Novo relatório.

Funcionalidades e as dores que resolvem

Cada funcionalidade nasceu de um problema real da operação.

  1. 01

    Salvamento offline no aparelho

    Dor
    A coleta acontece em locais com conexão instável. Qualquer dependência de rede no meio da vistoria arrisca perder o que já foi registrado.
    Solução
    Cada alteração é gravada na hora: o relatório vai para o localStorage e fotos e áudios para o IndexedDB, para não esbarrar no limite de ~5 MB do localStorage. Um indicador mostra “Salvo · hora” e avisa quando o aparelho está offline, sem interromper o preenchimento, e o relatório reabre de onde parou.

    Impacto: Salvo a cada alteração, sem botão de salvar

  2. 02

    Motor de regras sob sigilo

    Dor
    O relatório depende de uma lógica de domínio extensa — nível de risco, checklists obrigatórios e uma conclusão coerente com o que foi encontrado — que, fora do app, exigia cálculo à parte, memória do analista e redigitação.
    Solução
    Um motor de regras determinístico em TypeScript calcula automaticamente o nível de risco, monta o checklist obrigatório conforme o perfil da unidade e gera o rascunho da conclusão a partir das vulnerabilidades e recomendações registradas. A metodologia e as regras são confidenciais e não são detalhadas aqui.

    Impacto: Cálculo de risco coberto por testes automatizados

  3. 03

    Etapas com status e pendências

    Dor
    O analista percorre a unidade na ordem que o local impõe, não na do modelo, e num relatório com dezenas de campos é fácil entregar algo incompleto sem perceber.
    Solução
    O modelo virou 11 etapas abertas em qualquer ordem, com uma barra que mostra o status de cada uma e lista pendências específicas (ex.: “Vulnerabilidade 02: descrição, impacto e evidência”). A revisão reúne tudo com atalho para a etapa e avisa antes de gerar o relatório.

    Impacto: A revisão só fica concluída com as outras 10 etapas completas

  4. 04

    Notas de voz com transcrição

    Dor
    Os campos de texto longo são muitos, e digitar no celular durante a visita é lento.
    Solução
    Cada campo de texto longo tem um gravador: o áudio fica salvo como nota, com reprodução e “Inserir no texto”. Quando o navegador oferece a Web Speech API e há conexão, a fala é transcrita em pt-BR direto no campo.

    Impacto: Voz em todos os campos de texto longo, da avaliação à conclusão

  5. 05

    Evidências fotográficas numeradas

    Dor
    O modelo exige que cada vulnerabilidade aponte sua evidência fotográfica, numerada no relatório.
    Solução
    A foto sai da câmera traseira ou da galeria, é comprimida e numerada automaticamente (“Imagem 01”), e pode ser reaproveitada em outra vulnerabilidade. Sem foto nem “evidência não se aplica”, a vulnerabilidade continua como pendência.

  6. 06

    Avaliação padronizada dos eixos

    Dor
    O modelo oficial pede conceito e situação encontrada para dezenas de itens; no celular, isso vira rolagem e consulta constante.
    Solução
    Todos os eixos seguem o mesmo padrão: situação encontrada por item e, nos itens de controle, conceito em um toque, com os parâmetros de avaliação à mão; depois, vulnerabilidades registradas a partir dos próprios itens avaliados e recomendações escolhidas de uma lista pré-definida.

  7. 07

    Conclusão pré-redigida

    Dor
    A conclusão repete vulnerabilidades e medidas já registradas nos eixos, o que obrigava o analista a redigitar o mesmo conteúdo.
    Solução
    Os campos da conclusão que repetem o que foi registrado nos eixos têm um botão que insere, para edição, um rascunho montado por regras a partir desse registro. Não há IA: o texto sai apenas do que o analista registrou.

  8. 08

    Relatório oficial em PDF

    Dor
    O relatório final reúne tabelas, resultados e evidências fotográficas que, sem o app, sairiam de anotações e arquivos separados.
    Solução
    A página do relatório monta o documento na estrutura do modelo oficial a partir do que foi preenchido, com os resultados do motor de regras e as evidências fotográficas, e estilo de impressão próprio para Imprimir → Salvar como PDF.

  9. 09

    Pacote de transferência (.json)

    Dor
    O analista coleta no celular, mas revisa e fecha o relatório no computador, ou passa a visita a um colega. Sem servidor, o rascunho ficaria preso ao aparelho em que foi iniciado.
    Solução
    O relatório é exportado como pacote JSON, com ou sem fotos e áudios embutidos, e importado em outro aparelho. A importação é validada pelo mesmo schema Zod do estado e aponta o campo incompatível quando o arquivo não serve.