Pular para o conteúdo principal

Fluxo web (Painel Web) — Visão clara e contextual

Esta página descreve o que o Painel Web faz, quais telas existem, e fornece fluxos operacionais e de troubleshooting. O objetivo é separar responsabilidades do Web UI (o que o usuário opera) e ações do backend/middleware.

Sumário rápido:

  • O Painel Web é a interface operacional (login, gerenciamento de leitores, modos, actions e simulador de APIs).
  • O Middleware backend recebe sockets dos leitores (DA-APP), aplica regras, persiste em SQLite e envia events para endpoints configurados.

Objetivo deste documento​

Deixar claro o que acontece no Web UI, descrever as telas principais e fornecer fluxos práticos para:

  • teste sem hardware (simulador);
  • criar e validar actions;
  • configurar modos de leitura (manual, por GPI, contínuo);
  • checagem rápida em campo (checklist).

Tela: Login​

Rota: /login

Tela de login

Contexto (o que é no web): formulário de autenticação. Após login bem-sucedido o front salva authToken e redireciona para /leitores.

Pontos importantes:

  • validação de credenciais no backend (POST /login);
  • feedback visual (loading, erro);
  • suporte a "lembrar usuário" no localStorage.

Tela: Lista de leitores / Leitor selecionado​

Rota: /leitores

Painel com leitor selecionado

Contexto (o que é no web): lista os leitores conhecidos (reais e simuladores). Ao selecionar um leitor, o painel mostra:

  • cartões de status (Radio, Leituras, Modo salvo, Tempo restante);
  • configuração de leitura (antenas, intervalos, GPI/GPO, filtros);
  • painel de leituras em tempo real.

O Web UI consome GET /leitores para preencher a lista e GET /leitores/:id/status/GET /leitores/:id/reads para info dinâmica.

Adicionar leitor simulador

Contexto (o que é no web): modal para criar leitores virtuais — útil para demonstrações e homologação sem hardware.

Campos/ações:

  • nome do leitor, número de antenas;
  • estado inicial das GPIs;
  • importar CSV (formato antena,epc);
  • ao criar, o leitor aparece na lista como simulador e pode iniciar leituras.

Uso rápido:

  1. Abra "Adicionar leitor simulador".
  2. Cole ou importe o CSV com EPCs.
  3. Criar leitor simulador → selecione e inicie leitura.

Configuração de leitura e status (antenas / GPI / GPO)​

Status e configuração do leitor

Contexto (o que é no web): painel onde o operador define modos, antenas ativas, potências, filtros, comportamento de GPI/GPO e parâmetros de debounce/duração.

Modos suportados (UI):

  • Start/Stop manual — controle direto pelo operador;
  • Start manual + stop por tempo — inicia manualmente, para automaticamente;
  • Start por GPI + stop por tempo — sensor inicia, tempo encerra;
  • Start por GPI + stop por GPI — dois sinais controlam janela;
  • Contínuo — leituras e envio periódicos.

Campos chave:

  • Antenas: habilitar/desabilitar e potencia;
  • Intervalo EPC: tempo entre leituras repetidas;
  • Filtros: prefixo/sufixo e RSSI minimo;
  • GPI: porta, sinal (HIGH/LOW), debounce (ms);
  • GPO: ações durante/apos envio.

Cadastro de Actions (construção de body)​

Cadastro de actions

Contexto (o que é no web): CRUD para saídas configuráveis — cada action define método, URL, headers, autenticação, filtros por antena e corpo (body) a ser enviado.

Notas práticas:

  • Use o construtor de body para testar formatos (uma tag por linha no preview);
  • Cadeia de actions: permita dependência entre actions (executar somente se anterior OK);
  • Configure GPOs de sucesso/erro como resposta a execução da action.

Simulador visual de APIs​

Simulador de APIs

Rota: /simulador-apis

Contexto (o que é no web): recebe chamadas geradas por actions (ou por envio manual) e mostra bodies, headers e respostas simuladas — ideal para validar integrações antes de apontar para APIs reais.

Uso:

  • Execute uma action apontando para o simulador para verificar o JSON final e headers;
  • Simule status differentes para testar comportamentos de erro.

Fluxos comuns (passo-a-passo)​

  1. Homologação sem hardware (rápido):
  • Criar leitor simulador (modal) → importar CSV;
  • Selecionar leitor e aplicar modo desejado;
  • Criar action apontando para /simulador-apis e testar;
  • Verificar bodies no simulador de APIs.
  1. Teste de GPI start/stop:
  • Configure modo "Start por GPI e stop por tempo" no painel;
  • Ajuste porta/sinal/debounce; salve;
  • No simulador, altere GPI para HIGH/LOW e observe início/parada de leitura.
  1. Validação de Actions em cadeia:
  • Criar Action A (POST) e Action B (executa somente se A OK);
  • Use simulador para forçar status 200/500 e ver resposta de cada etapa.

Troubleshooting rápido (Web UI)​

  • MDX/image not found: confirme que a imagem está em static/img/pages/middleware-rfid/ e o nome NÃO contém acentos inesperados.
  • Front não carrega: verifique console do navegador para erros JS e network para chamadas que retornam 4xx/5xx.
  • Leitor não aparece: confirme DA-APP conecta ao middleware via HIOT_TCP_PORT e o backend lista leitores.
  • Actions não disparam: verifique logs do middleware e o simulador de APIs para receber o pedido.

Checklist rápido antes de validar em campo​

  • Painel acessível em http://IP_DO_SERVIDOR:PORT;
  • Login funcional (credenciais padrão ou definidas);
  • DA-APP conectado ao HIOT_TCP_PORT e leitor aparece na lista;
  • Status de antenas, GPI/GPO visíveis no painel;
  • Start/Stop e modos temporizados funcionam;
  • Action recebe body no /simulador-apis e GPOs reagem conforme configurado.

Se quiser, eu posso:

  • executar localmente npm run build / npm start e trazer os logs do servidor (se autorizar), ou
  • varrer o diretório static/img/pages/middleware-rfid para garantir que os nomes das imagens batem exatamente com as referências.