Seguidores

sábado, 10 de maio de 2025

Estudo de Caso T2E2: Solução de Problema com IA e MASP - Aplicativo Web

INTRODUÇÃO

Este é o episódio 2 da temporada 2 da série “Estudo de Caso”, com foco na solução de problema em aplicativo Web, utilizando Inteligência Artificial (IA) e o Método de Análise e Solução de Problemas (MASP).

Post anterior: Estudo de Caso T2E1: Solução de Problema com IA e MASP - Serviço de infraestrutura na nuvem


O objetivo deste Post é mostrar um Prompt completo, elaborado com base no MASP, para pedir a um Chatbot de IA, um Plano de Ação para resolver um bug em app Web.



Estudo de Caso

Para este estudo de caso foi criado o Prompt abaixo, que utiliza o MASP para especificar com clareza um problema, a fim de pedir ajuda a um Chatbot de IA na solução.

Objetivo

Solucionar um problema de Tecnologia da Informação (TI), usando o Método de Análise e Solução de Problema (MASP), no contexto abaixo.

Contexto

O contexto é a execução de uma nova versão de um aplicativo Web no ambiente de homologação, no serviço de infraestrutura na nuvem AWS, no servidor S2.

No login, apareceu mensagem de alerta e no console do Chrome apareceram mensagens de erro.

O desenvolvedor testou com sucesso, a mudança no aplicativo, no seu container de desenvolvimento.

Após o teste realizado com sucesso, a máquina apresentou falhas e foi formatada, portanto, o container de desenvolvimentro teve que ser reinstalado e configurado e, em seguida, a nova versão do aplicativo foi publicada no ambiente de homologação.


1 PERSONAGEM

1.1 Qual o papel do Chatbot de IA? Profissional da área de TI especialista em desenvolvimento de aplicativo Web usando o container de desenvolvimento Docker, com Frontend React e Backend Django, usando o serviço de infraestrutura na nuvem AWS.

2 IDENTIFICAÇÃO DO PROBLEMA

Definir claramente o problema (diferença entre o que é e o que deveria ser). Utilizar 5W1H.

2.1 [What?]  - O que aconteceu diferente do esperado?

Apareceu esta mensagem numa janela de alerta:

Login: Aconteceu um erro. Recarregue a página e tente novamente. TypeError: Cannot read properties of undefined (reading 'status')

Apareceram estas mensagens de erro, no console do Chrome:

Access to XMLHttpRequest at 'https://api-dev.votenet.net/api/sair' from origin 'https://homologacao.votenet.net' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.Understand this error

api-dev.votenet.net/api/sair:1 

           Failed to load resource: net::ERR_FAILEDUnderstand this error

client-fa6d1470cc.js:676 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'status')

    at client-fa6d1470cc.js:676:26Understand this error

homologacao.votenet.net/:1 Access to XMLHttpRequest at 'https://api-dev.votenet.net/api/signin?email=xxxxxxxxxxxxxxxxxxx&password=xxxxxxxxxxxxxx' from origin 'https://homologacao.votenet.net' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.Understand this error

api-dev.votenet.net/api/signin?email=xxxxxxxxxxxxxxxxx&password=xxxxxxxxxx:1 

           Failed to load resource: net::ERR_FAILED

2.2 [Who?]   - Quem iniciou a execução? O desenvolvedor

2.3 [When?]  - Evento que iniciou a execução? Login.

2.4 [Where?] - Onde a execução parou? Parou  após digitar usuário e senha e clicar no botão ENTRAR

2.5 [Why?]   - Por que a execução parou? Não sei, mas o fato é que esta é a primeira execução, depois do desacoplamento de Front End (React JS) e Back End (Python/Django). 

2.6 [How?]   - Como é o procedimento, passo a passo, para reproduzir o erro? Na tela de login, preencher usuário e senha, e clicar no botão ENTRAR.

3 OBSERVAÇÃO

Investigar as características específicas do problema com uma visão ampla e sob vários pontos de vista. Utilizar Diagrama de Ishikawa ou Causa e Efeito.

3.1 [Pessoas?] Como este item influencia no problema?

3.1.1 Falta de treinamento adequado da equipe? Sim. O desenvolvedor nunca fez treinamento nessa tecnologia, embora tenha experiência em outros ambientes de TI. Está aprendendo por meio de tutoriais, de acordo com a necessidade, sem participar em cursos formais.

3.1.2 Problemas de comunicação entre membros da equipe? Não.

3.1.3 Ausência de revisões? Não

3.2 [Recurso?] Como este item influencia no problema?

3.2.1 Computador desatualizado? Não

3.2.2 Aplicativo desatualizado ou instável? Não

3.2.3 Configurações do ambiente incorretas ou inconsistentes? É possível, mas não tenho evidências.

3.2.4 Configuração incorreta das variáveis de ambiente? É possível, mas não tenho evidências.

3.2.5 Incompatibilidades no ambiente, ou seja, diferenças entre os ambientes onde o processo é executado? Sim. 

3.2.6 Condições de rede, ou seja, problemas de conectividade que afetam a execução do processo? Não.

3.3 [Método?] Como este item influencia no problema?

3.3.1 Práticas de execução inadequadas? Não.

3.3.2 Falta de documentação do Procedimento Operacional Padrão? Não.

3.3.3 Processo de verificação deficiente, com testes insuficientes ou mal planejados? Sim.

3.4 [Entrada?] Como este item influencia no problema?

3.4.1 Informações de terceiros com falhas ou incompatíveis? Não

3.4.2 Informações de terceiros instáveis ou desatualizadas? Não

3.4.3 Dependências de Informações de terceiros inadequadas ou desatualizadas? Não.

3.5 [Saída?] Como este item influencia no problema?

3.5.1 Resultado incompleto, impreciso ou inválido? Não

3.5.2 Resultado indisponível no local esperado? Sim

3.5.3 Resultado rejeitado por quem vai utilizá-lo? Não

3.6 [Medição?] Como este item influencia no problema?

3.6.1 Falta de monitoramento adequado do desempenho? Não

3.6.2 Falta de métricas claras e consistentes para avaliar a qualidade do processo? Não

3.6.3 Ausência de ferramentas de análise para detectar problemas no processo? Não

4 ANÁLISE

Descobrir as causas fundamentais. Utilizar "5 Porquês".

4.1 Para cada problema encontrado no item 3 OBSERVAÇÃO, perguntar 5 vezes o porquê do problema ou defeito ter ocorrido, a fim de descobrir a sua real causa, ou seja, a causa raiz.

4.1.1 Pessoas: Por que a forma de executar o trabalho influencia no problema? Porque a formatação da máquina com a consequente configuração do container de desenvolvimento é um evento raro, o que pode ter causado falhas, devido à pouca experiência do desenvolvedor na tecnologia.

4.1.2 Recurso: Por que os recursos utilizados podem ter influência no problema? Porque houve mudança na infraestrutura para desacoplar Front End e Back End e, paralelamente, houve mudança no aplicativo. Depois que o teste do aplicativo foi realizado com sucesso no Docker, a máquina do desenvolvedor apresentou falhas e foi formatada, portanto, o container de desenvolvimentro teve que ser reinstalado e configurado e, em seguida, a nova versão do aplicativo foi publicada no ambiente de homologação desacoplado. Foi a primeira vez que uma versão do aplicativo foi publicada para homologação, depois do desacoplamento.

4.1.3 Método: Por que o método de configuração do container de desenvolvimento influencia no problema? Porque a configuração é um evento raro e não é trivial para quem tem pouco conhecimento.

4.1.4 Entrada: Por que a qualidade da informação de entrada influencia no problema? Não influencia

4.1.5 Saída: Por que a qualidade da informação de saída influencia no problema? Não influencia

4.1.6 Medição: Por que o modo de medir o desenvolvimento de atividades influencia no problema? Não influencia

COMANDO PARA O CHATBOT DE IA

Crie um Plano de Ação para resolver o problema especificado acima e, se possível, ensine como executar as ações.

O Plano de Ação deve ter 5 etapas: Iniciação, Planejamento, Execução, Monitoramento e Controle e Encerramento.

Cada etapa do Plano de Ação deve ter 3 grupos de tarefas executáveis: Entrada, Passos, Saída.

Cada Entrada deve especificar, além de dados e recursos disponíveis, as pré-condições, que são os requisitos para iniciar a execução dos passos.

Cada Saída deve especificar, além de dados e recursos disponibilizados, as pós-condições, que são os requisitos para considerar a execução encerrada com sucesso.

Resposta do Chatbot de IA Google Gemini

Link da conversa com o Chatbot de IA Gemini: https://g.co/gemini/share/1fac21a267a3

Olá! Analisando a situação, o problema central parece residir na configuração do ambiente de desenvolvimento após o desacoplamento do frontend e backend, especialmente considerando a inexperiência com as novas tecnologias e a falta de testes abrangentes no ambiente desacoplado.

Como um especialista em desenvolvimento Web com Docker, React, Django e AWS, meu papel aqui é auxiliar na identificação da causa raiz e propor um plano de ação eficaz para solucionar este problema. Vamos criar um plano detalhado para você:

Plano de Ação para Resolução de Erro de Login

Objetivo Principal: Restaurar a funcionalidade de login no ambiente de homologação desacoplado, garantindo a estabilidade e a correta comunicação entre o frontend e o backend.

1. Iniciação

  • Entrada:
    • Descrição detalhada do problema (já fornecida).
    • Acesso aos logs do frontend (React) e backend (Django) no ambiente de homologação da AWS.
    • Acesso às configurações do Docker e do ambiente de desenvolvimento local.
    • Conhecimento das configurações de CORS (Cross-Origin Resource Sharing) no backend.
    • Pré-condições: Ambiente de homologação da AWS acessível, Docker instalado e funcional na máquina de desenvolvimento.
  • Passos:
    1. Revisão da descrição do problema: Garantir o entendimento completo de todos os detalhes e mensagens de erro relatadas.
    2. Formulação da hipótese inicial: Com base nos erros de CORS e TypeError, a hipótese inicial é um problema de configuração de CORS no backend Django e/ou um erro na forma como o frontend React está lidando com a resposta da API.
    3. Definição do escopo do plano de ação: Focar na resolução do erro de login e na garantia da comunicação básica entre frontend e backend.
  • Saída:
    • Entendimento claro do problema e da hipótese inicial.
    • Escopo do plano de ação definido.
    • Pós-condições: Concordância sobre o objetivo e o escopo do plano de ação.

2. Planejamento

  • Entrada:
    • Hipótese inicial sobre a causa do problema.
    • Acesso à documentação do Django sobre CORS.
    • Acesso à documentação do AWS sobre configuração de CORS em serviços como API Gateway ou Load Balancer (se aplicável).
    • Conhecimento da estrutura do projeto React e Django.
    • Pré-condições: Hipótese inicial definida, acesso à documentação relevante.
  • Passos:
    1. Investigação da configuração de CORS no Django: Verificar o arquivo de configurações do Django (settings.py) para a presença e correta configuração de middlewares como django.middleware.csrf.CsrfViewMiddleware e bibliotecas como django-cors-headers. Analisar as configurações de CORS_ALLOWED_ORIGINS, CORS_ALLOW_METHODS, CORS_ALLOW_HEADERS, etc.
    2. Investigação da configuração de CORS na AWS (se aplicável): Se um API Gateway ou Load Balancer estiver sendo usado, verificar suas configurações de CORS para garantir que permitam requisições da origem do frontend (https://homologacao.votenet.net).
    3. Análise do código React: Revisar a lógica da função de login no frontend, especialmente a forma como a requisição é feita (método HTTP, headers) e como a resposta da API é tratada. Verificar se há algum tratamento de erro que possa estar falhando antes de acessar a propriedade status.
  • Saída:
    • Identificação das possíveis causas para o erro de CORS.
    • Identificação de possíveis erros no tratamento da resposta da API no frontend.
    • Lista de tarefas específicas para a fase de execução.
    • Pós-condições: Plano detalhado de investigação e correção definido.

3. Execução

  • Entrada:

    • Lista de tarefas específicas identificadas na fase de planejamento.
    • Acesso ao código fonte do frontend (React) e backend (Django).
    • Permissões para modificar e deployar as alterações no ambiente de homologação da AWS.
    • Pré-condições: Plano de execução detalhado, acesso ao código e permissões de deploy.

  • Passos:

    1. Correção da configuração de CORS no Django:
      • Como executar: No arquivo settings.py do seu projeto Django, certifique-se de ter instalado e configurado o django-cors-headers. Adicione 'corsheaders.middleware.CorsMiddleware' ao MIDDLEWARE e configure as variáveis CORS_ALLOWED_ORIGINS para incluir 'https://homologacao.votenet.net'. Se precisar permitir todos os origens para teste (não recomendado para produção), você pode usar CORS_ALLOW_ALL_ORIGINS = True. Certifique-se também de que os métodos HTTP necessários (POST para login, GET para sair) e os headers comuns (Content-Type, Authorization, etc.) estejam permitidos nas configurações de CORS.
      • Exemplo em settings.py:
        Python
        INSTALLED_APPS = [
    # ... outros apps
    'corsheaders',
    # ... outros apps
]

MIDDLEWARE = [
    # ... outros middlewares
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware',
    # ... outros middlewares
    'django.middleware.csrf.CsrfViewMiddleware',
    # ... outros middlewares
]

CORS_ALLOWED_ORIGINS = [
    "https://homologacao.votenet.net",
]

CORS_ALLOW_METHODS = [
    'GET',
    'POST',
    'PUT',
    'DELETE',
    'OPTIONS',
]

CORS_ALLOW_HEADERS = [
    'accept',
    'accept-encoding',
    'authorization',
    'content-type',
    'dnt',
    'origin',
    'user-agent',
    'x-csrftoken',
    'x-requested-with',
]
      • Após a modificação, faça o deploy da nova versão do backend para o ambiente de homologação na AWS (usando seus processos de CI/CD ou manualmente via Docker).
    2. Correção da configuração de CORS na AWS (se aplicável):
      • Como executar: Se você estiver usando um API Gateway, vá para a configuração da sua API, selecione a rota correspondente ao login e à saída e configure as opções de CORS nas respostas HTTP. Certifique-se de que o header Access-Control-Allow-Origin esteja presente e com o valor correto (https://homologacao.votenet.net). O mesmo se aplica a Load Balancers que possam estar interceptando as requisições.
    3. Correção do tratamento da resposta da API no React:
      • Como executar: No seu código React, na função responsável por fazer a requisição de login, adicione verificações para garantir que a resposta da API não seja undefined antes de tentar acessar a propriedade status. Use estruturas condicionais (if, &&, operador ternário) ou mecanismos de tratamento de erro (try...catch) para lidar com respostas inesperadas ou erros de rede.
      • Exemplo (simplificado) em React:
        JavaScript
        fetch('https://api-dev.votenet.net/api/signin', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',
    },
    body: JSON.stringify({ email, password }),
})
.then(response => {
    if (response) { // Verifica se a resposta existe
        if (response.status === 200) {
            return response.json();
        } else {
            // Tratar outros status de erro
            console.error('Erro no login:', response.status);
            alert('Login falhou. Por favor, tente novamente.');
            throw new Error('Erro na autenticação');
        }
    } else {
        console.error('Resposta da API indefinida');
        alert('Ocorreu um erro inesperado. Recarregue a página e tente novamente.');
        throw new Error('Resposta da API indefinida');
    }
})
.then(data => {
    // Processar dados de login bem-sucedido
    console.log('Login bem-sucedido:', data);
    // Redirecionar o usuário, etc.
})
.catch(error => {
    console.error('Erro ao fazer login:', error);
    // Lógica adicional de tratamento de erro
});
      • Da mesma forma, revise a função de logout para garantir o tratamento adequado da resposta da API.
      • Após as modificações, build a nova versão do frontend React e faça o deploy para o ambiente de homologação na AWS (usando seus processos de CI/CD ou manualmente via S3/CloudFront, por exemplo).

  • Saída:

    • Código do backend Django com as configurações de CORS corrigidas e deployado.
    • Configurações de CORS na AWS (se aplicável) ajustadas.
    • Código do frontend React com tratamento robusto da resposta da API e deployado.
    • Pós-condições: Ambientes de homologação do frontend e backend atualizados com as correções.

4. Monitoramento e Controle

  • Entrada:
    • Ambientes de homologação atualizados.
    • Instruções claras para testar a funcionalidade de login e logout.
    • Acesso aos logs do frontend e backend no ambiente de homologação.
    • Ferramentas de monitoramento da AWS (CloudWatch Logs, etc.).
    • Pré-condições: Deploy das correções realizado.
  • Passos:
    1. Testes de login e logout: Realizar testes completos da funcionalidade de login e logout no ambiente de homologação, utilizando diferentes navegadores e cenários (sucesso, falha de credenciais, etc.).
    2. Verificação dos logs: Analisar os logs do frontend e backend em busca de quaisquer erros ou mensagens relevantes durante o processo de login e logout. Verificar se as requisições estão sendo feitas corretamente e se as respostas estão sendo recebidas sem erros de CORS.
    3. Monitoramento da rede: Utilizar as ferramentas de desenvolvedor do navegador para inspecionar as requisições e respostas HTTP, verificando os headers de CORS (Access-Control-Allow-Origin, Origin, etc.) e o status das respostas.
  • Saída:
    • Relatório de testes com os resultados da validação do login e logout.
    • Logs do frontend e backend analisados.
    • Dados de monitoramento da rede confirmando a ausência de erros de CORS e o tratamento correto das respostas da API.
    • Pós-condições: Funcionalidade de login e logout operando corretamente no ambiente de homologação, sem erros de CORS ou TypeError.

5. Encerramento

  • Entrada:
    • Relatório de testes bem-sucedido.
    • Logs do sistema sem erros relacionados ao problema.
    • Confirmação de que o problema foi resolvido.
    • Pré-condições: Monitoramento e controle confirmam a resolução do problema.
  • Passos:
    1. Documentação da solução: Registrar as alterações realizadas nas configurações de CORS do Django e da AWS (se aplicável), bem como as modificações no código React para tratamento da resposta da API.
    2. Revisão do processo de deploy: Analisar o processo de deploy para identificar oportunidades de melhoria e garantir que as configurações corretas sejam mantidas em futuras implementações.
    3. Lições aprendidas: Documentar as lições aprendidas durante a resolução deste problema, especialmente em relação à importância da configuração de CORS em ambientes desacoplados e da necessidade de testes abrangentes.
  • Saída:
    • Documentação da solução implementada.
    • Recomendações para melhorias no processo de deploy.
    • Registro das lições aprendidas.
    • Pós-condições: Problema resolvido, solução documentada e lições aprendidas para evitar recorrências.

Lembre-se que a chave para resolver este tipo de problema reside em uma investigação sistemática e na análise cuidadosa das mensagens de erro e das configurações do ambiente. Seguindo este plano de ação, você estará bem encaminhado para restaurar a funcionalidade de login e garantir a estabilidade da sua aplicação Web. Boa sorte!

CONCLUSÃO

A utilização do MASP, com suas 42 perguntas, foi importante para o desenvolvedor relembrar, coletar e registrar no Prompt fatos e dados importantes para solicitar ajuda ao Chatbot de IA.

Assim que o plano de ação for executado com sucesso, a solução do problema será relatada no próximo tópico.

Solução do problema

O desenvolvedor resolveu o bug.

A explicação da solução, feita pelo Gemini, está nesse post: Estudo de Caso T2E6: Solução de Problema com IA e MASP - Correção T2E2

Demais Episódios da Temporada:



às
Marcadores: , , ,

Nenhum comentário:

Postar um comentário

Assinar: Postar comentários (Atom)

Entendendo a Metáfora "Home Office é Moto Boy"

Dashboard de Produtividade Pessoal T1E14: RESOLVIDO BugCT1-5 Erro 400 no login

INTRODUÇÃO Post anterior:  Dashboard de Produtividade Pessoal T1E13: BugCT1-5 Erro 400 no login O objetivo deste post é apresentar um prompt...