Uma das maiores alegações do hype em torno do ChatGPT é que ele pode ser uma ferramenta de programação eficaz. A ideia é a seguinte: você descreve o que quer em linguagem natural; o chatbot gera um código que faz exatamente isso. Mas quão bom o ChatGPT realmente é em fazer isso?
Qual melhor maneira de descobrir do que colocar à prova? Pedimos ao ChatGPT para construir um aplicativo web simples do zero. Aqui está o resultado do nosso teste e as etapas que você pode usar para construir um site do zero usando o ChatGPT.
Etapa 1: Gerando o Blueprint para seu aplicativo da Web
Assim como você faria ao criar um aplicativo da web com qualquer ferramenta, você precisaria definir o modelo de como deseja que seu aplicativo fique e as etapas necessárias para criá-lo antes de deixar o ChatGPT comandar o show.
Para nossa primeira tarefa, pedimos ao ChatGPT para desenvolver um blueprint para um aplicativo de bate-papo simples. Para fazer isso, descrevemos os requisitos para nosso aplicativo da web e, em seguida, pedimos ao chatbot para detalhar um plano para desenvolver o aplicativo.
Depois de usar o prompt acima, aqui está o resultado que obtivemos:
Você precisa ter o plugin “Show Me” habilitado na sua conta ChatGPT para gerar um fluxograma como o nosso acima. Você pode instalar e usar plugins ChatGPT em apenas alguns passos, embora precise de uma assinatura premium.
Sem o plugin, você obterá um blueprint baseado em texto ou um fluxograma ASCII-art. Ainda está tudo bem. Mesmo sem o plugin, o ChatGPT ainda deve fornecer um blueprint claro do aplicativo, como no exemplo abaixo.
Etapa 2: Dividir o Blueprint em módulos menores
Agora que temos o panorama geral definido, pedimos ajuda ao ChatGPT para dividir o aplicativo em componentes menores que podemos desenvolver separadamente e, então, integrar para formar o aplicativo web completo. O ChatGPT sugeriu dividi-lo em três componentes:
- Módulo de registro
- Módulo de login
- Módulo de bate-papo
Tínhamos outras ideias, mas o objetivo aqui é deixar o ChatGPT tomar as decisões.
1. Construindo o Componente de Registro
Nós pulamos direto para a construção do componente de registro. Pedimos ao ChatGPT para desenhar um algoritmo apropriado. Aqui, intervimos especificando que precisávamos apenas do nome de usuário, e-mail e avatar do usuário para o registro. Aqui está o prompt:
E aqui está o resultado:
Em seguida, solicitamos que o ChatGPT criasse o componente de registro.
Embora não tenhamos incluído o campo de senha como parte do processo de registro, o ChatGPT fez a escolha certa ao incluí-lo no código HTML gerado. Copiamos o código sem nenhuma modificação, e aqui está como ele aparece em um navegador.
Em seguida, solicitamos ao ChatGPT que gerasse o script de registro PHP. Primeiro, solicitamos com “Escreva um código PHP para a lógica do lado do servidor para lidar com o envio do formulário.” Embora o script gerado funcionasse bem, ele tinha muitas vulnerabilidades.
Não havia hash de senha, nem tratamento de erros, e era propenso a injeção de SQL — o ChatGPT fazia apenas o mínimo necessário. Corrigir isso foi relativamente fácil. Simplesmente pedimos ao ChatGPT para “identificar tudo o que estava errado com o código que você acabou de gerar e, em seguida, usar os pontos identificados para otimizar o código”. Com isso, nosso script de registro PHP estava pronto para uso.
A formulação do seu prompt importa. Você precisa ser muito claro e específico com o que precisa que o ChatGPT faça. Quando simplesmente pedimos para ele “consertar o problema com este código”, ele não consertou a maior parte do que esperávamos que ele consertasse. Para mais orientações sobre como escrever prompts do ChatGPT, aqui estão alguns lugares para aprender como escrever prompts eficazes.
Em seguida, pedimos ao ChatGPT para “Escreva um código SQL para criar um banco de dados para os dados capturados no script PHP.”Aqui está o código SQL resultante:
E aqui está a tabela criada pela execução do SQL:
Com o banco de dados configurado, tentamos nosso primeiro registro e funcionou sem erros.
2. Construindo o componente de login
Com o componente de registro fora do caminho, assumimos o componente Login. Surpreendentemente, foi o mais fácil de construir, apesar da lógica adicional de gerenciamento de sessão.
Aqui está a página de login gerada. Um destaque importante é que ela usa as mesmas opções de cores da página de registro.
Depois de criar um arquivo “server.login.php” conforme instruído pelo ChatGPT e adicionar o script PHP gerado, fizemos nosso primeiro login bem-sucedido sem nenhuma modificação ou depuração.
3. Construindo o componente de bate-papo
Construir o componente de chat foi a parte final — e provavelmente a mais difícil — do nosso pequeno experimento. No começo, simplesmente pedimos ao ChatGPT para escrever o código para o componente de chat. Nem preciso dizer que foi um fracasso colossal. Para componentes mais complexos de qualquer coisa que você queira criar, você precisará dividi-lo em componentes menores e lidar com eles um após o outro.
Pedimos sugestões ao ChatGPT sobre como dividir o componente de bate-papo, e ele sugeriu que criássemos três páginas:
- Bate-papo.php
- Enviar-mensagens.php
- Buscar-mensagens.php
Quando o ChatGPT sugere um nome de arquivo, usar um nome diferente no seu projeto pode inadvertidamente causar problemas, pois o chatbot fará referência ao mesmo nome em todo o código que ele cria ao longo do projeto. Descobrimos da maneira mais difícil. Não cometa o mesmo erro.
Criando a página Chat.php
Para começar, demos ao ChatGPT instruções detalhadas sobre como queríamos que a interface do chat fosse.
Após executar o código HTML gerado, tínhamos uma interface de chat sem uma caixa de entrada de mensagem. Para consertar isso, simplesmente solicitamos ao ChatGPT para “reescreva o código para incluir uma caixa de entrada de mensagem e um botão de envio.“Veja como o código gerado aparece em um navegador no segundo teste.
Sempre que o código gerado falhar em dar os resultados desejados ou omitir um componente importante, simplesmente peça ao ChatGPT para reescrever o último código. Diga para incluir o componente ou fazer o que não foi feito no código inicial. Aqui estão algumas dicas sobre como usar o ChatGPT para programação.
Criando a página “send-messages.php” e “Fetch-messages”
Satisfeitos com a interface, prosseguimos para construir o script para lidar com a lógica de bate-papo. Para poder enviar e buscar mensagens do banco de dados, o ChatGPT corretamente destacou que precisaremos de uma tabela “messages”. Pedimos ao chatbot para criar um SQL para a tabela messages.
Depois de gerar um código SQL, pedimos ao chatbot para gerar um script PHP para lidar com a lógica de mensagens.
O ChatGPT gerou o script para as páginas “send-messages.php” e “fetch-messages.php”. Ao executar ambos os scripts, finalmente tivemos nosso primeiro erro (o que foi estranhamente satisfatório). Chegar tão longe no projeto sem depurar uma única linha de código parecia bom demais para ser verdade, apesar de sua relativa simplicidade.
Acontece que o erro foi causado pelo ChatGPT ao introduzir uma verificação de uma variável de sessão não declarada ($_SESSÃO[‘user_id’]) em nosso script. Suspeitamos que isso foi resultado de uma pausa bastante longa no projeto, resultando no ChatGPT esquecendo alguns dos contextos e nomes das variáveis usadas no projeto.
Ao usar o ChatGPT para criar um aplicativo, certifique-se de usar o mesmo tópico de bate-papo e tente concluir os componentes relacionados o mais rápido possível. Usar um novo tópico de bate-papo ou fazer uma longa pausa pode introduzir inconsistências. O ChatGPT tende a esquecer alguns detalhes do projeto atual (por exemplo, o esquema de cores) se você fizer longas pausas entre as sessões de codificação.
Dito isso, corrigimos o bug e implantamos o código. Nós nos registramos, efetuamos login e testamos o recurso de bate-papo. Embora tenhamos conseguido enviar mensagens de um usuário registrado para outro, a cor e a disposição dos balões de mensagem estavam um pouco erradas. No entanto, para um aplicativo que levou uma hora e 23 minutos para ser concluído, não o julgaremos com muita severidade.
ChatGPT: Um excelente assistente de codificação
O ChatGPT é claramente um poderoso assistente de codificação. O fato de o chatbot conseguir criar códigos impressionantes a partir de instruções simples, e às vezes não tão claras, é uma prova de sua proeza de codificação.
Claro, ele ainda tem muitas falhas. O problema com uma janela de contexto limitada e sua capacidade de unir a lógica de vários componentes construídos independentemente é um grande problema. No entanto, o chatbot pode ajudar você a construir aplicativos da web razoavelmente complexos rapidamente se você souber como lidar com isso.
Apoie o nosso trabalho ❤️
Se você gostou deste artigo, considere deixar uma gorjeta para nos ajudar a continuar publicando conteúdo de qualidade.
