Do Caos ao Prompt T1E1: Transformando Problemas Simples em Soluções Inteligentes com IA - Melhoria em App Web

 INTRODUÇÃO

Este post é o episódio 1 da temporada 1 da série "Do Caos ao Prompt", que tem como objetivo mostrar exemplos reais de utilização da Inteligência Artificial (IA) para resolver problemas do dia a dia.

Saiba mais neste post: Do Caos à Solução: Como o MASP e a IA Transformam Problemas em Oportunidades

Contexto

Home Office de profissional da área de TI, especialista em ReactJS, atuando em programação, executando um serviço da sua rotina diária.

Objetivo

Implementar melhoria em aplicativo Web, do qual o Home Office tem conhecimento técnico.

Informações Adicionais

Este exemplo mostra como especificar um problema por meio de um questionário de 42 perguntas, para solicitar a um Chatbot de IA a criação de um Prompt.

Esse questionário mistura a especificação de um problema, usando as 3 primeiras etapas do MASP (Método de Análise e Solução de Problemas), com um comando para que um Chatbot de IA faça a etapa 4, que é o Plano de Ação.

O texto do questionário não é, de fato, um Prompt bem formado, mas contém informações valiosas para a criação de um Prompt conciso, para que um Chatbot de IA desenvolva uma solução.

Por outro lado, o texto do questionário é uma fonte rica de informações a respeito do problema, que pode ser armazenada numa base de conhecimento.

Descrição do Problema: Identificação, observação e análise com 42 perguntas e respostas

Identificação do Especialista de IA

O Chatbot de IA é um profissional da área de TI, especialista em ReactJS, atuando como programador.

ETAPA 1 - IDENTIFICAÇÃO DO PROBLEMA: Definir claramente o problema (diferença entre o que é e o que deveria ser). Utilizar 5W1H.

1.1 [What?]  - O que aconteceu diferente do esperado? A existência da combobox Distrito está confundindo os usuários.

1.2 [Who?]   - Quem solicitou a mudança? O usuário administrador do aplicativo.

1.3 [When?]  - Evento que inicia a execução? Seleção da funcionalidade “Informação Distrital”.

1.4 [Where?] - Onde o usuário se confundiu? Na seleção do item na combobox Distrito

1.5 [Why?]   - Por que o usuário se confundiu? Porque ele não entendeu a diferença entre Distrito Municipal e Estadual, imaginou que deveria selecionar uma opção e não entendeu que a combobox já apresentava o distrito adequado para ele, por default.

1.6 [How?]   - Como é o procedimento, passo a passo, para reproduzir o erro?

1.6.1 Passo 1: Após o login, selecionar a funcionalidade “Informação Distrital”

1.6.2 Passo 2: Na combobox Distrito, selecionar uma opção

1.6.3 Passo 3: Clicar no botão Pesquisar

ETAPA 2 - 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.

2.1 [Pessoas?] As Pessoas podem ser causa do problema? Não.

2.2 [Recursos?] Os Recursos (Hardware, Sistema Operacional, Softwares básicos) podem ser causa do problema? Não.

2.3 [Métodos?] Os Métodos (Componentes do aplicativo) podem ser causa do problema? Sim

2.4 [Entradas?] As Entradas podem ser causa do problema? Não

2.5 [Saídas?] As Saídas podem ser causa do problema? Não

2.6 [Medições?] As Medições podem ser causa do problema? Não

ETAPA 3 - ANÁLISE: Descobrir as causas fundamentais. Utilizar "5 Porquês".

3.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.

3.1.1 Pessoas: Por quê? Por quê? Por quê? Por quê? Por quê? Não se aplica.

3.1.2 Recursos: Por quê? Por quê? Por quê? Por quê? Por quê? Não se aplica.

3.1.3 Métodos: Por quê? Porque a combobox Distrito não é necessária para o usuário final, portanto, deve ser apresentada, somente se o usuário for Administrador. O atributo do usuário que indica a sua posição de Administrador está na variável this.state.user.is_staff, com valor igual a true.

Então, a regra é apresentar a combobox codificada abaixo, somente se o usuário for Administrador.

<div className="input-field col m2 hide-on-med-and-fdown "><p>Distrito</p></div>
<div className="input-field col s12 ">
    <select value={this.state.tipo_distrito_id}
            ref="tipodistrito" onChange={this._profileHandleChange.bind(this, 'tipo_distrito_id')}
            className="browser-default"
            style={{width:'300px'}}>
        {this.state.tipos_distrito.map((tipo, index) => {
            return (
                <option value={tipo.id}  key={index}>{tipo.name}</option>
            );
        })}
    </select>
</div>

3.1.4 Entradas: Por quê? Por quê? Por quê? Por quê? Por quê? Não se aplica.

3.1.5 Saídas: Por quê? Por quê? Por quê? Por quê? Por quê? Não se aplica.

3.1.6 Medições: Por quê? Por quê? Por quê? Por quê? Por quê? Não se aplica.

Comando para IA: Criar a "ETAPA 4 - PLANO DE AÇÃO" a fim de resolver o problema especificado acima e, se possível, escrever o código necessário para implementação.

Prompt criado pela IA

Aqui está o Prompt transformado e refinado, contendo apenas o essencial:

Prompt para IA:

Você é um profissional de TI especializado em ReactJS e programador. Analise o problema identificado:

• Problema: A combobox "Distrito" está confundindo usuários finais na funcionalidade "Informação Distrital" do aplicativo, devido à falta de distinção clara entre "Distrito Municipal" e "Estadual".
• Análise: A combobox "Distrito" deve ser visível apenas para usuários Administradores. Um administrador é identificado quando a variável this.state.user.is_staff é true.
• Bloco de Código: 
  <div className="input-field col m2 hide-on-med-and-fdown "><p>Distrito</p></div>
  <div className="input-field col s12 ">
      <select value={this.state.tipo_distrito_id}
              ref="tipodistrito" onChange={this._profileHandleChange.bind(this, 'tipo_distrito_id')}
              className="browser-default"
              style={{width:'300px'}}>
          {this.state.tipos_distrito.map((tipo, index) => {
              return (
                  <option value={tipo.id}  key={index}>{tipo.name}</option>
              );
          })}
      </select>
  </div>

Tarefa: Crie a "ETAPA 4 - PLANO DE AÇÃO" detalhada para resolver esse problema. Inclua, se possível, o código necessário em ReactJS para implementar a solução.

Solução do Problema pela IA

ETAPA 4 - PLANO DE AÇÃO

Objetivo: Garantir que a combobox "Distrito" esteja visível apenas para usuários Administradores, melhorando a usabilidade e a experiência do usuário final.

Passos Detalhados:

1. Análise do Código Atual

   • Revisar o código existente para entender onde a combobox "Distrito" está sendo renderizada.

   • Verificar os pontos do código onde a variável this.state.user.is_staff é definida e utilizada.

2. Alteração no Componente

   • Modificar o componente para que a combobox "Distrito" seja exibida somente se o usuário for Administrador. A condição deve verificar o estado this.state.user.is_staff antes de renderizar a combobox.

3. Implementação do Controle Condicional

   • Adicionar a lógica condicional para renderizar os elementos HTML da combobox somente para usuários com o atributo is_staff igual a true.

4. Teste da Solução

   • Realizar testes para assegurar que a combobox seja exibida apenas para Administradores.

   • Testar também as funcionalidades da combobox com diferentes perfis de usuários (Administrador e usuário comum).

5. Documentação da Alteração

   • Atualizar a documentação do projeto para refletir as mudanças realizadas, incluindo o motivo da alteração e as regras de exibição.

Código Ajustado em ReactJS:

jsx

{this.state.user.is_staff && (
  <div className="input-field col m2 hide-on-med-and-fdown">
    <p>Distrito</p>
  </div>
)}
{this.state.user.is_staff && (
  <div className="input-field col s12">
    <select
      value={this.state.tipo_distrito_id}
      ref="tipodistrito"
      onChange={this._profileHandleChange.bind(this, 'tipo_distrito_id')}
      className="browser-default"
      style={{ width: '300px' }}
    >
      {this.state.tipos_distrito.map((tipo, index) => (
        <option value={tipo.id} key={index}>{tipo.name}</option>
      ))}
    </select>
  </div>
)}

Resultados Esperados:

• A combobox "Distrito" será exibida apenas para usuários Administradores, eliminando a confusão para os usuários finais.

• O sistema se tornará mais intuitivo e funcional.

Se precisar de mais apoio para essa implementação ou para os testes, estou aqui!

Da complexidade à simplicidade

Este problema do exemplo foi simples.

E se o problema for complexo?

Quando o problema for complexo, o primeiro passo é decompor em partes menores e mais gerenciáveis.

Essa técnica consiste em identificar quais partes do problema já possuem soluções conhecidas ou podem ser resolvidas de imediato, descartando-as do foco principal.

Depois, concentre-se nos elementos restantes, dividindo-os ainda mais se necessário.

Ao final, você terá transformado um problema que parecia intimidante em um conjunto de problemas simples e solucionáveis.

Essa abordagem não apenas facilita a resolução, mas também ajuda a organizar e priorizar o esforço necessário.

Construindo uma Base de Conhecimento

Construindo Sabedoria: Crie uma Base de Conhecimento Estruturada com o MASP e as Tags 5W1H e 6M

Este tópico destaca o aspecto estratégico e organizado da idéia de transformar especificações de problemas com MASP em Prompt de IA.

Além disso, chama atenção ao valor de criar uma base sólida de aprendizado e referência.

Este tópico transmite claramente a essência da idéia de criar Prompt a partir das 42 perguntas e respostas do MASP, enquanto mantém uma abordagem atraente para o leitor experimentar.

Imagine todos os problemas sendo especificados e resolvidos com IA, deixando informações disponíveis de cada problema com 42 perguntas e com as tags do 5W1H e do Diagrama de Ishikawa (6M).

Trata-se de criar uma base de conhecimento baseada de Perguntas e Respostas, separadas por categoria e com tags para facilitar as pesquisas.

A categoria poderia ser criada por agrupamento de um conjunto de problemas com alguma característica comum. 

CONCLUSÃO

Para motivar ainda mais o leitor a adotar a decomposição de problemas, podemos destacar os seguintes pontos:

1. Redução do Estresse Enfrentar um problema complexo muitas vezes pode ser intimidante. Dividindo-o em partes menores, o processo se torna mais manejável, reduzindo o estresse e aumentando a confiança na resolução.
2. Facilidade na Colaboração Problemas menores e bem definidos são mais fáceis de compartilhar com colegas ou equipes, promovendo uma colaboração mais eficiente e a possibilidade de soluções criativas vindas de diferentes perspectivas.
3. Incrementos Sustentáveis Resolver partes do problema uma de cada vez cria um senso de progresso constante. Cada pequena solução implementada é um passo visível em direção ao objetivo maior, o que é extremamente motivador.
4. Precisão na Solução Com a IA respondendo rapidamente a cada subproblema, há mais espaço para experimentar soluções alternativas e ajustar detalhes, o que geralmente resulta em soluções mais precisas e bem pensadas.
5. Aumento do Conhecimento A cada parte resolvida, o usuário compreende melhor as nuances do problema geral. Isso aumenta a capacidade de identificar padrões e prever possíveis dificuldades em projetos futuros.

Por fim, podemos reforçar que decompor problemas em unidades menores não é apenas uma estratégia eficiente, mas também uma forma de evoluir continuamente no aprendizado, na produtividade e na confiança.

Transformar o complexo em simples é uma habilidade poderosa!

Veja este Post sobre Solução de Problemas: Abordagens para identificação de problema durante a utilização do MASP

Próximo Post da Série "Do Caos ao Prompt": Do Caos ao Prompt T1E2: Transformando Problemas Simples em Soluções Inteligentes com IA – Teste de App Web

Demais Episódios da Temporada

• Série Do Caos ao Prompt
• Temporada T1Transformando Problemas Simples em Soluções Inteligentes com IA
• Episódio E2 Teste de App Web
• Episódio E3 Instalação de App Windows
• Episódio E4 Instalação de App Android (Wi-Fi)