O exemplo 1 de uso do MASP (Método de Análise e Solução de Problemas), com IA (Inteligência Artificial) em TI (Tecnologia da Informação), apresenta os efeitos colaterais de uma certa mudança que implementei num aplicativo, com pouco conhecimento da linguagem de programação, sem ter feito revisão de código e sem teste de regressão, para garantir que o que estava funcionando, continuará funcionando.
A correção do bug foi realizada com a utilização do MASP com IA.
O MASP foi utilizado para especificação de um Prompt com o propósito de garantir a integridade das informações fornecidas à IA.
A IA foi utilizada para implementar as mudanças no código fonte, necessárias para corrigir o bug com rapidez.
Sobrou para mim, que fui a causa raíz do bug, o esforço de especificar o Prompt, encaminhar à IA, editar o código fonte para registrar as mudanças, revisar e testar.
A lição aprendida é que, mesmo que a mudança seja simples, o risco de introdução de bugs num aplicativo sempre será alto, se o desenvolvedor não for um especialista na linguagem de programação em que esse aplicativo foi implementado. Isto é óbvio.
Felizmente, hoje em dia temos os Chatbots de IA, que são especialistas em qualquer linguagem de programação existente.
Portanto, atualmente, um trabalho de valor do desenvolvedor é fornecer aos Chatbots de IA especificações completas, precisas e válidas. Para isso, podemos contar com o MASP, que pode ser usado para qualquer tipo de problema.
Exemplo de Prompt estruturado com MASP
1CONTEXTO
1.1 Correção de bug no app VoteNet, na Beta v2.28i
1.1.1 Descrição do bug: No ambiente de Homologação, a janela modal aberta ao clicar no botão CONVIDE AGORA está aparecendo sem os rótulos completos dos botões de convite por E-mail e por Whatsapp.
1.1.2 Frontend:
1.1.2.1 ReactJS v15.6.1
1.1.2.2 Node v6.17.1
1.1.2.3 NPM v3.10.10
1.1.3 Axios v.0.26.0: comunicação via API, chamando funções do arquivo ajax_utils.js.
1.1.4 Backend: Django v4.2.3
1.1.4.1 Aplicação: N/a
1.1.4.2 model: N/a
1.1.4.3 views: N/a
1.1.5 Infraestrutura: AWS
2IDENTIFICAÇÃO DO PROBLEMA
Um problema é caracterizado pela diferença entre o que é e o que deveria ser.
As perguntas abaixo (5W1H) ajudarão a caracterizar o problema, com detalhes do cenário.
[What?] O que está acontecendo?
Está acontecendo um bug no aplicativo VoteNet.
[Who?] Quem está envolvido?
Quem está envolvido é o usuário responsável pela homologação.
[When?] Quando ocorreu?
Ocorreu quando o usuário clicou no botão CONVIDE AGORA, que está na página de sua rede de confiança.
[Where?] Onde aconteceu?
Aconteceu na janela modal aberta ao clicar no botão CONVIDE AGORA, que está implementada no componente SectionInvites.jsx.
[Why?] Por que isso é um problema?
Porque o teste passou no ambiente de desenvolvimento, na máquina do desenvolvedor, e deveria passar, também, no ambiente de homologação.
[How?] Como surgiu?
Surgiu após o clique no botão CONVIDE AGORA, que fez aparecer uma janela modal que tem dois botões, um para convidar por email, com rótulo CONVIDAR POR EMAIL, e outro para convidar por whatsapp, com rótulo CONVIDAR POR WHATSAPP, mas os rótulos apareceram apenas com CONVIDAR e CONVITE, respectivamente.
3OBSERVAÇÃO
Investigue características específicas do problema usando o Diagrama de Ishikawa (Causa e Efeito). Registre “SIM”, “NÃO” ou “NÃO SEI”, para fatores como:
3.1. Método (A Lógica)
Regras de Negócio: O algoritmo está aplicando a regra correta? NÃO
Fluxo do Processo: Existe algum "nó" na sequência da automação (ex: um passo que tenta rodar antes do anterior terminar)? NÃO SEI
Tratamento de Erros: O código sabe o que fazer quando recebe uma resposta inesperada? NÃO SEI
3.2. Máquina (Infraestrutura/Software)
Ambiente: O erro ocorre em produção, mas não em homologação? NÃO
Recursos: Há falta de memória, timeout de servidor ou falha na conexão com o banco de dados? NÃO SEI
Versões: Bibliotecas ou frameworks desatualizados estão gerando conflitos? NÃO SEI, mas esta é uma hipótese a ser analisada.
3.3. Mão de Obra (Intervenção Humana)
Desenvolvimento: Houve falha na escrita do código ou falta de revisão (code review)? SIM (falta de revisão)
Testes: O cenário que gerou o bug foi previsto no plano de testes? NÃO
Operação: Alguém alterou uma configuração manualmente que quebrou a automação? NÃO SEI
3.4. Medida (Dados e Monitoramento)
Input de Dados: O bug é causado por um caractere especial ou campo vazio que a automação não esperava? NÃO
Logs: O sistema está gerando registros suficientes para rastrear onde o erro começa? SIM
Métricas: O erro acontece após um número X de execuções (vazamento de memória)? NÃO
3.5. Material (Integrações/APIs)
Dependências Externas: Uma API de terceiros mudou o formato do JSON ou está fora do ar? NÃO SEI
Qualidade dos Dados: A base de dados que alimenta a automação contém informações corrompidas? NÃO (é a mesma que foi usada no teste do desenvolvedor)
3.6. Meio Ambiente (Contexto de Execução)
Conectividade: Instabilidade na rede afetou a troca de pacotes? NÃO SEI
Simultaneidade: Outro processo automatizado está tentando acessar o mesmo recurso ao mesmo tempo? NÃO SEI
4ANÁLISE
Para cada fator identificado na etapa anterior, utilize os “5 Porquês” para encontrar a causa raiz.
4.1 Método (A Lógica)
Por quê? NÃO SEI
4.2 Máquina (Infraestrutura/Software)
Por quê? NÃO SEI
4.3 Mão de Obra (Intervenção Humana)
Por quê? NÃO SEI
4.4 Medida (Dados e Monitoramento)
Por quê? NÃO SEI
4.5 Material (Integrações/APIs)
Por quê? NÃO SEI
4.6 Meio Ambiente (Contexto de Execução)
Por quê? NÃO SEI
5COMANDO
Atue como um Especialista em Qualidade de Software e Metodologia MASP (Método de Análise e Solução de Problemas).
Estou analisando um bug em um processo automatizado dentro do aplicativo VoteNet, implementado no componente SectionInvites.jsx, em anexo.
Com base nas 3 primeiras etapas do MASP especificadas acima, elabore a etapa 4 de "Plano de Ação" (formato 5W2H) focando no bloqueio e correção definitiva das causas.
Resultado do Prompt estruturado com MASP
Os botões dentro do componente SectionInvites.jsx estão alocados em colunas restritas (col s5).
Abaixo está o detalhamento da Etapa 4 do MASP e, em seguida, a correção do código.
Plano de Ação (5W2H)
Correção no Código (ReactJS v15.6.1)
Para solucionar a causa raiz garantindo total compatibilidade com a versão React 15.6.1, localize o bloco de renderização do formulário modal dentro do arquivo SectionInvites.jsx (por volta da linha 318) e substitua a estrutura das colunas e os textos dos botões.
Código Anterior (Com problema de truncamento):
JavaScript
<div className="row center">
<div className="col s5 center"><a onClick={() => this.setInviteBy("e-mail")} className="btn light-blue darken-2" style={{ fontSize: '9px' }}>CONVIDAR POR EMAIL</a></div>
<div className="col s2"><h6>ou</h6></div>
<div className="col s5 center"><a onClick={() => this.setInviteBy("Whatsapp")} className="btn green darken-2" style={{ fontSize: '9px' }}>CONVITE POR WHATSAPP</a></div>
</div>
Novo Código (Corrigido e Responsivo):
JavaScript
<div className="row center">
{/* Ajustado para s12 (empilha em telas pequenas) e m5 (lado a lado em telas médias+). Adicionado width 100% e whiteSpace normal. */}
<div className="col s12 m5 center" style={{ marginBottom: '10px' }}>
<a onClick={() => this.setInviteBy("e-mail")}
className="btn light-blue darken-2 waves-effect waves-light"
style={{ fontSize: '10px', width: '100%', whiteSpace: 'normal', height: 'auto', padding: '5px' }}>
CONVIDAR POR EMAIL
</a>
</div>
<div className="col s12 m2"><h6>ou</h6></div>
<div className="col s12 m5 center" style={{ marginBottom: '10px' }}>
<a onClick={() => this.setInviteBy("Whatsapp")}
className="btn green darken-2 waves-effect waves-light"
style={{ fontSize: '10px', width: '100%', whiteSpace: 'normal', height: 'auto', padding: '5px' }}>
CONVIDAR POR WHATSAPP
</a>
</div>
</div>
O que mudou na implementação:
Grade Responsiva (col s12 m5): Em telas pequenas (como as frequentemente emuladas em testes de homologação de UI), os botões agora ocuparão a linha inteira (s12), empilhando-se um sobre o outro. Em telas maiores, eles voltam ao comportamento original lado a lado (m5).
Propriedades CSS Inline: O whiteSpace: 'normal' em conjunto com height: 'auto' anula a propriedade padrão do Materialize que força o texto em uma única linha. Se, por acaso, a tela for muito estreita, o texto quebrará de forma elegante em duas linhas, mantendo a legibilidade completa, em vez de ocultar as palavras finais.
Correção Semântica: O rótulo do WhatsApp foi ajustado para corresponder exatamente à especificação exigida.
Após compilar o build dessa correção, o especialista de infraestrutura poderá promover a atualização no ambiente AWS sem risco de regressão nos layouts desktop.
Do Problema à Solução - Infográfico
Do Problema à Solução - Áudio
Do Problema à Solução - Vídeo
"Na Minha Máquina Funciona": O Enigma dos Rótulos Cortados e a Fragilidade do "Pixel Perfect" no VoteNet v2.28i
Todo desenvolvedor experiente conhece o frio na espinha que surge quando uma funcionalidade, impecável em ambiente local, desmorona ao cruzar a fronteira da homologação.
No caso do VoteNet (versão Beta v2.28i) , o "fantasma" não foi uma falha de lógica catastrófica ou um servidor caído, mas um erro visual sutil e traiçoeiro na janela modal de convites.
O que parecia perfeito no monitor ultrawide do desenvolvedor tornou-se um labirinto ilegível para o usuário de teste, revelando que a distância entre o sucesso e a falha de um deploy é medida pela robustez dos nossos métodos de análise.
A Armadilha da Rigidez: Quando o Framework se Torna uma Prisão
A causa técnica do problema no componente SectionInvites.jsx ilustra uma ironia comum no desenvolvimento frontend: utilizamos frameworks responsivos como o Materialize CSS , mas, por vezes, anulamos sua inteligência com implementações rígidas.
Ao utilizar a classe col s5 para os botões de convite, o layout impôs uma reserva de espaço fixa que ignorava as variações de viewport.
O golpe de misericórdia veio da propriedade padrão do Materialize, white-space: nowrap, que proíbe terminantemente a quebra de linha.
O resultado? Em telas menores ou janelas redimensionadas — cenários típicos de homologação — o texto era sumariamente executado pela borda da coluna.
"O diagnóstico foi visualmente óbvio, mas tecnicamente sutil: os rótulos apareceram apenas como CONVIDAR e CONVITE , omitindo o meio de contato (E-mail ou Whatsapp) e confundindo completamente o usuário final sobre a ação que estava prestes a realizar."
O MASP como Bússola: Curando a Doença, não apenas o Sintoma
Muitas vezes, diante de um bug visual, a reação instintiva do desenvolvedor é "brincar" com o CSS até que pareça certo.
No entanto, o MASP (Método de Análise e Solução de Problemas) nos ensina que o bug é apenas o sintoma; a verdadeira doença reside no processo.
Sem uma metodologia estruturada, o time correria em círculos.
Através da Observação (Diagrama de Ishikawa) , identificamos que a causa raiz não estava na infraestrutura da AWS, mas em dois pilares críticos:
Mão de Obra: O erro foi "silenciado" por uma falha de code review . O foco excessivo na entrega individual impediu que um segundo par de olhos detectasse a rigidez do grid.
Testes: O plano de testes original era míope, não prevendo cenários de resoluções variadas, confiando cegamente no comportamento do ambiente de desenvolvimento.
A Anatomia da Solução: O Plano de Ação 5W2H
Para garantir que o erro não retornasse como um zumbi em versões futuras, a solução foi traçada através do framework 5W2H , com intervenções diretas no arquivo SectionInvites.jsx.
O objetivo era substituir a rigidez pela fluidez:
Estratégia Mobile-First: Substituímos col s5 por col s12 m5 . Agora, em telas pequenas, os botões ocupam 100% da largura (empilhamento vertical), retornando ao layout original lado a lado apenas em telas médias e grandes.
Quebra Inteligente: Forçamos o CSS com whiteSpace: 'normal' e height: 'auto' . Se o espaço acabar, o texto quebra elegantemente em duas linhas em vez de desaparecer no limbo do overflow.
Consistência Semântica: Corrigimos o rótulo de "CONVITE POR WHATSAPP" para "CONVIDAR POR WHATSAPP" . No storytelling da interface, a consistência verbal entre "CONVIDAR POR EMAIL" e seu par é vital para a fluidez cognitiva do usuário.
O Desafio do Legado e o Custo da Qualidade
Trabalhar com uma stack composta por ReactJS v15.6.1 , Node v6.17.1 e Django v4.2.3 exige uma disciplina redobrada.
Diferente das facilidades de flexbox e grid automáticos das versões modernas, o ambiente legado do VoteNet demanda que cada ajuste de interface seja cirúrgico para não causar regressões.
No nosso 5W2H, o fator "How Much" (Quanto custa) foi claro: o investimento não foi em novas ferramentas, mas no tempo alocado do desenvolvedor para a correção técnica e do especialista de infraestrutura para garantir que o novo build na AWS refletisse as mudanças sem traumas.
A sinergia entre quem escreve o código e quem gerencia o ambiente é o que transforma um "ajuste de CSS" em uma atualização de sistema bem-sucedida.
Conclusão: O Próximo Deploy
O caso da Beta v2.28i nos lembra que a qualidade de software não é um acidente, mas o resultado de métodos rigorosos de análise.
O uso do MASP e do 5W2H elevou uma simples correção de layout ao nível de aprendizado organizacional sobre revisão de código e resiliência de interface.
Ao fechar o editor hoje, fica a provocação: Você confia que a sua interface sobreviverá ao rigor do mundo real, ou ela é apenas um castelo de cartas que só se sustenta na resolução do seu monitor de desenvolvimento?
Nenhum comentário:
Postar um comentário