Post-IA-09

Uso de IA na criação de um webapp – Part 7

Teste dos programas criados

Formato do blog

Prompts em azul

Meus comentários em verde

Soluções da IA em preto

Comentários da IA em marrom

IAs Utilizadas neste Post em preto Fonte: Copilot

Bem, pessoal, agora que todos os programas do nosso app estão prontos — o frontend com os componentes CadastroRosto.jsx e RegistroPonto.jsx, e o backend com a API Flask (app.py) — temos uma base sólida para nosso sistema de registro de ponto com reconhecimento facial.

Neste post, vamos explorar as melhores estratégias para testar essa solução na prática. Vamos abordar os principais desafios que podem surgir durante a implementação, como:

• Compatibilidade com diferentes dispositivos
• Precisão do reconhecimento facial em ambientes variados
• Latência na comunicação entre frontend e backend
• Persistência e segurança dos dados

Então, construímos o seguinte prompt para o Copilot:

Vamos testar a solução que criamos. como você propõe que comecemos?

Excelente, Fabio! Para testar a solução proposta (React no frontend + Flask no backend com persistência em JSON), eu sugiro começar de forma incremental, validando cada parte separadamente antes de integrar tudo. Assim você garante que os erros sejam mais fáceis de identificar e corrigir

🧪 Etapas sugeridas de teste

1. Testar o backend isoladamente Objetivo: garantir que os endpoints /cadastrar e /reconhecer funcionam corretamente. Como fazer: Use ferramentas como Postman ou cURL para enviar requisições manuais.

2. Testar o frontend isoladamente Objetivo: validar se o React + face-api.js capturam o rosto e geram o vetor. Como fazer: Rode o frontend com npm run dev. Abra o CadastroRosto.jsx e veja se o vetor é gerado (pode logar no console). Teste também o RegistroPonto.jsx para ver se o vetor é capturado periodicamente.

3. Testar a integração frontend → backend Objetivo: confirmar que o payload do frontend chega corretamente ao backend. Como fazer: No CadastroRosto, cadastre um usuário e veja se aparece no. No RegistroPonto, tente reconhecer o mesmo usuário e veja se o backend retorna “reconhecido”.

4. Testes de uso real Objetivo: simular o fluxo completo de registro de ponto. Como fazer: Cadastre alguns usuários diferentes. Teste o reconhecimento em condições variadas (iluminação, distância da câmera). Verifique se o backend responde corretamente e se o ponto é registrado.

5. Testes de robustez Objetivo: identificar dificuldades práticas. Como fazer: Testar em dispositivos diferentes (celular, tablet). Testar com múltiplos rostos na câmera. Testar com usuários não cadastrados. Avaliar tempo de resposta e consumo de recursos. 👉 Minha sugestão é começar pelo backend isolado (etapa 1). Assim você garante que a lógica de persistência e comparação está sólida antes de envolver o frontend. Quer que eu prepare um roteiro de testes prático com exemplos de entradas e saídas esperadas para cada etapa? Isso pode servir como guia para validar cada parte do sistema.

Aqui, podemos ver que o copilot deu uma visão geral do plano de teste. E a seguir propõe criar um roteiro com exemplos reais para testar cada parte do sistema. Isso que é admirável na IA, ela sempre propõe os próximos passos para continuar nos ajudando.

sim, prepare um roteiro de testes

🧪 Roteiro de Testes

🔹 Etapa 1 – Testar o backend isolado Objetivo: garantir que os endpoints funcionem corretamente. Teste de cadastro Requisição: curl -X POST http://localhost:5173/cadastrar \ -H “Content-Type: application/json” \ -d ‘{“nome”:”Fabio”,”descriptor”:[0.12, -0.34, 0.56]}’ Resultado esperado: Resposta: {“status”:”ok”} Arquivo usuarios.json atualizado com o novo usuário.

Teste de reconhecimento Requisição: curl -X POST http://localhost:5000/reconhecer \ -H “Content-Type: application/json” \ -d ‘{“descriptor”:[0.12, -0.34, 0.56]}’ Resultado esperado: Resposta: {“status”:”reconhecido”,”nome”:”Fabio”}Teste de erro Enviar payload sem descriptor. deu problemas com dive Resultado esperado: {“status”:”erro”,”mensagem”:”Vetor não fornecido”}

Etapa 2 – Testar o frontend isolado Objetivo: validar captura de rosto e geração de vetor. Rodar npm run dev no frontend. Abrir CadastroRosto.jsx: Inserir nome e capturar rosto. Verificar no console se o vetor facial é gerado. Abrir RegistroPonto.jsx: Conferir se o vetor é capturado periodicamente. Verificar mensagens de status no app.

🔹 Etapa 3 – Testar integração frontend → backend Objetivo: confirmar que o payload chega corretamente ao backend.

Cadastro via frontend Usar CadastroRosto.jsx para cadastrar um usuário. Resultado esperado: Mensagem: “✅ Rosto de Fabio cadastrado com sucesso no servidor.” Usuário aparece no usuarios.json.Reconhecimento via frontend Usar RegistroPonto.jsx com o mesmo usuário. Resultado esperado: Mensagem: “✅ Rosto reconhecido: Fabio” Registro de ponto confirmado.

🔹 Etapa 4 – Testes de uso real Objetivo: simular o fluxo completo. Distância da câmera Diferentes dispositivos (tablet, celular) Resultado esperado: Usuários cadastrados são reconhecidos corretamente. Usuários não cadastrados retornam “❌ Rosto não reconhecido.”

🔹 Etapa 5 – Testes de robustez Objetivo: identificar dificuldades práticas. Cadastrar múltiplos usuários. Testar reconhecimento em diferentes condições: Iluminação forte/fraca Testar com mais de um rosto na câmera. Testar latência da API (tempo de resposta). Testar persistência após reiniciar o servidor (dados continuam no usuarios.json). Testar falhas de rede (simular backend offline).

📌 Conclusão Esse roteiro garante que você valide: Backend (persistência e comparação) Frontend (captura e envio de vetores) Integração (fluxo completo de cadastro e registro de ponto) 👉 Quer que eu prepare também um checklist de problemas comuns (ex: câmera não abre, vetor não é gerado, JSON corrompido) com soluções rápidas para facilitar seus testes?

Vamos começar pela etapa 1

Etapa 1 – Testar o backend isolado Objetivo: garantir que os endpoints funcionem corretamente. Teste de cadastro Requisição: curl -X POST http://localhost:5173/cadastrar \ -H “Content-Type: application/json” \ -d ‘{“nome”:”Fabio”,”descriptor”:[0.12, -0.34, 0.56]}’ Resultado esperado: Resposta: {“status”:”ok”} Arquivo usuarios.json atualizado com o novo usuário.

Teste de reconhecimento Requisição: curl -X POST http://localhost:5000/reconhecer \ -H “Content-Type: application/json” \ -d ‘{“descriptor”:[0.12, -0.34, 0.56]}’ Resultado esperado: Resposta: {“status”:”reconhecido”,”nome”:”Fabio”}Teste de erro Enviar payload sem descriptor.deu problemas com dive Resultado esperado: {“status”:”erro”,”mensagem”:”Vetor não fornecido”}

O curl é um comando mais adequado ao linux e é manhoso para tratar os caracteres -,/,”no windows. Decidimos não usá-lo nos testes. Ao invés criamos um programa testRequest.py que simula requisições no próprio python. Começamos então com um folder chamado backend. Neste diretório criamos a seguinte estrutura:

Backend api.py testRequest.py usuarios.jsonAbaixo segue o programa testRequest.py

Para rodar os testes, a primeira vez o arquivo usuarios.json não deve existir. Ou precisa ter algum conteúdo. O sistema não aceita arquivos usuarios.json vazio. Uma sugestão minha importante é que, embora o sistema funcione sem a criação de um virtual environment (venv), recomendo que se crie uma venv, para estes programas em python, evitando conflitos de bibliotecas. Existem vários blogs na internet sobre como criar e utilizar venvs que podem ser consultados em caso de dúvidas sobre virtual environments

Começando então: No testRequest.py Substituímos a variável data={…} pelo objeto: [ { data =

abrimos dois terminais no vscode: Terminal da API (onde chamamos a api.py Terminal das requisições testRequest.py onde emitimos as requisições de teste E dessa forma, o teste da api de inclusão de novo objeto está concluida OK se no arquivo usuarios.json estiver carregado os objetos enviados por testRequest.py

Agora , vamos ao teste de reconhecimento. Para isso vamos enviar um request de reconhecimento, fazendo as seguintes alterações em testRequest.py E a resposta veio correta, indicando que os valores na propriedade description do objeto data foram encontrados no banco de dados JSON JSON Response: {‘nome’: ‘Fabio’, ‘status’: ‘reconhecido’} Para terminar os testes da api, precisamos agora tentar reconhecer uma description que não existe no BD JSON. Para isso vamos enviar um request de reconhecimento, fazendo as seguintes alterações em testRequest.py

E veio a resposta ✅ JSON Response: {‘nome’: ‘Fabio’, ‘status’: ‘reconhecido’} OOpps ele reconheceu como Fabio uma pessoa com uma descrição diferente!!!!!! Isso foi porque a variável LIMIAR RECONHECIMENTO no api.py estava muito alta 0.6 …..mudamos para 0.0 e Tcham ✅ JSON Response: {‘status’: ‘nao_reconhecido’}Com isso terminamos os testes da Etapa 1 Testes do backend isolado. Trabalhao não é? Mas é assim mesmo, na maioria das vezes dá muito mais trabalho testar direito do que programar….. Mas fiquem tranquilos, pois agora pegamos o jeito e no próximo Post concluiremos os testes. Até lá