Muitas pessoas proclamaram que o ChatGPT pode escrever nossos ensaios, pintar nossas fotos e responder às nossas consultas de pesquisa. Mas pode codificar também?

Uma das maiores reivindicaçõ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 deseja em linguagem natural; o chatbot gera um código que faz exatamente isso. Mas quão bom é o ChatGPT em fazer isso?

Que melhor maneira de descobrir do que colocá-lo à prova? Pedimos ao ChatGPT para criar um aplicativo da web simples do zero. Aqui está o resultado do nosso teste e as etapas que você pode usar para criar um site do zero usando o ChatGPT.

Etapa 1: Gerando o Blueprint para seu aplicativo da Web

Assim como faria ao criar um aplicativo da Web com qualquer ferramenta, você precisaria definir o projeto do que você deseja que seu aplicativo se pareça e as etapas necessárias para criá-lo antes de permitir que o ChatGPT execute o mostrar.

Para nossa primeira tarefa, pedimos ao ChatGPT para desenvolver um projeto 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 o desenvolvimento do aplicativo.

Depois de usar o prompt acima, aqui está o resultado que obtivemos:

Você precisa ter o plug-in "Mostre-me" ativado em sua conta ChatGPT para gerar um fluxograma como o nosso acima. Você pode instalar e usar plugins ChatGPT em apenas alguns passos, embora você precise de uma assinatura premium.

Sem o plug-in, você obterá um projeto baseado em texto ou um fluxograma de arte ASCII. Tudo bem. Mesmo sem o plug-in, o ChatGPT ainda deve fornecer um plano claro do aplicativo, como no exemplo abaixo.

Passo 2: Dividindo o Blueprint em Módulos Menores

Agora que temos o quadro geral definido, pedimos ajuda ao ChatGPT para dividir o aplicativo em componentes menores que podemos desenvolver separadamente e, em seguida, integrar para formar o aplicativo da web completo. O ChatGPT sugeriu dividi-lo em três componentes:

  1. módulo de registro
  2. módulo de login
  3. módulo de bate-papo

Tínhamos outras ideias, mas o objetivo aqui é deixar o ChatGPT dar as cartas.

1. Construindo o componente de registro

Passamos 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 registro. Aqui está o prompt:

E aqui está o resultado:

A seguir, solicitamos ao ChatGPT para criar o componente de registro.

Embora não tenhamos incluído o campo de senha como parte do processo de registro, o ChatGPT acertou ao incluí-lo no código HTML gerado. Copiamos o código sem nenhuma modificação e é assim que ele fica em um navegador.

A seguir, solicitamos ao ChatGPT que gere o script de registro do PHP. Inicialmente, solicitamos "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 hashing de senha, nenhum tratamento de erro e era propenso a injeção de SQL - o ChatGPT fazia apenas o mínimo. Consertar isso foi relativamente fácil. Simplesmente pedimos ao ChatGPT para "identificar tudo de 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 ir.

A redação do seu prompt é importante. Você precisa ser muito claro e específico com o que precisa que o ChatGPT faça. Quando simplesmente pedimos para "corrigir o problema com este código", ele não corrigiu a maior parte do que esperávamos. Para obter mais orientações sobre como escrever prompts do ChatGPT, aqui estão alguns lugares para aprender a escrever prompts eficazes.

A seguir, 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 executando o SQL:

Com o banco de dados configurado, tentamos nosso primeiro cadastro, e funcionou sem nenhum erro.

2. Construindo o Componente de Login

Com o componente de registro resolvido, assumimos o componente de 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 ele 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 com sucesso sem nenhuma modificação ou depuração.

3. Construindo o componente de bate-papo

Construir o componente de bate-papo foi a parte final - e provavelmente a mais difícil - de nosso pequeno experimento. No início, simplesmente pedimos ao ChatGPT para escrever o código do componente de bate-papo. Desnecessário dizer que foi um fracasso colossal. Para componentes mais complexos de qualquer coisa que você deseja criar, você precisará dividi-lo em componentes menores e resolvê-los um após o outro.

Pedimos ao ChatGPT sugestões sobre como dividir o componente de bate-papo e ele sugeriu que criássemos três páginas:

  1. chat.php
  2. Send-messages.php
  3. Buscar-mensagens.php

Quando o ChatGPT sugere um nome de arquivo, usar um nome diferente em seu projeto pode causar inadvertidamente problemas, pois o chatbot fará referência ao mesmo nome em todo o código que ele criar 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 de bate-papo parecesse.

Depois de executar o código HTML gerado, tivemos uma interface de chat sem uma caixa de entrada de mensagens. Para corrigir isso, simplesmente instruímos o ChatGPT a "reescrever o código para incluir uma caixa de entrada de mensagem e um botão enviar." Veja como o código gerado aparece em um navegador na segunda tentativa.

Sempre que o código gerado não fornecer os resultados desejados ou omitir um componente importante, basta solicitar ao ChatGPT que reescreva o último código. Diga a ele 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, passamos a construir o script para lidar com a lógica do chat. Para poder enviar e buscar mensagens do banco de dados, o ChatGPT destacou com razão que precisaremos de uma tabela de "mensagens". Pedimos ao chatbot para criar um SQL para a tabela de mensagens.

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 os dois scripts, finalmente tivemos nosso primeiro erro (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 introduzindo uma verificação para uma variável de sessão não declarada ($_SESSION['user_id']) em nosso script. Suspeitamos que isso foi resultado de uma longa pausa 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 apresentar 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. Registramos, efetuamos login e experimentamos o recurso de bate-papo. Embora pudéssemos 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

ChatGPT é claramente um poderoso assistente de codificação. O fato de o chatbot poder gerar 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, 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 ajudá-lo a criar aplicativos da Web bastante complexos rapidamente, se você souber o que fazer.