Como criar um aplicativo da Web usando o ChatGPT

Uma das maiores reivindicações em torno do ChatGPT é que ele pode ser uma poderosa ferramenta de programação. A ideia é a seguinte: você descreve o que deseja em linguagem natural; E o chatbot irá gerar um código que faz exatamente isso. Mas quão bom é o ChatGPT para fazer isso?

Que melhor maneira de descobrir do que colocá-lo à prova? Pedimos ao ChatGPT para construir uma aplicação web simples a partir do zero. Aqui está o resultado do teste e as etapas que você pode usar para criar um site do zero com o ChatGPT. nós verificamos Como o ChatGPT pode ajudá-lo a escrever um romance.

Imagem de Como criar uma aplicação web usando ChatGPT | 16Pzzlf0zmhHIEu8A4hd0Aw-DzTechs

Etapa 1: criar um blueprint para o aplicativo da Web

Assim como faria ao criar um aplicativo da Web usando qualquer plataforma personalizada, você precisará definir um esboço de como deseja que seu aplicativo se pareça e as etapas necessárias para criá-lo antes de permitir que o ChatGPT execute a renderização .

Na primeira tarefa, pedimos ao ChatGPT para desenvolver um projeto para um aplicativo de bate-papo simples. Para fazer isso, descrevemos os requisitos do aplicativo da web e, em seguida, pedimos ao chatbot para preparar um plano para desenvolver o aplicativo em detalhes.

Imagem de Como criar uma aplicação web usando ChatGPT | 1H-k6FLaOhdA7q7qETUkO8A-DzTechs

Depois de usar o prompt acima, este é o resultado que obtivemos:

Imagem de Como criar uma aplicação web usando ChatGPT | 1NO7IksV7nG5HT88Ebku2xw-DzTechs

Você precisará habilitar o plug-in “Mostre-me” em sua conta ChatGPT para criar um fluxograma como mostrado acima. Você pode instalar e usar Complementos ChatGPT Em apenas alguns passos, embora você precise de uma assinatura premium.

Sem o plug-in, você obterá um esboço de texto ou fluxograma em arte ASCII. que também pode ser usado. Mesmo sem o plug-in, o ChatGPT ainda deve fornecer uma descrição clara do aplicativo, como no exemplo abaixo.

Imagem de Como criar uma aplicação web usando ChatGPT | 1DSlAujzwsY-g2dRmrgHSYA-DzTechs

Etapa 2: divida o gráfico em unidades menores

Agora que o quadro geral foi desenhado, pedimos ao ChatGPT para ajudar a dividir o aplicativo em componentes menores que podem ser desenvolvidos separadamente e depois combinados para eventualmente formar o aplicativo da web completo. O ChatGPT sugeriu dividi-lo em três componentes:

  1. Componente de registro.
  2. Configurador de login.
  3. Configurador de bate-papo.

Houve outras ideias melhores, mas o objetivo aqui é deixar o ChatGPT assumir o controle e gerenciar este projeto.

1. Crie o componente de registro

Passamos diretamente para o desenvolvimento do componente de registro. Pedimos ao ChatGPT para derivar um algoritmo adequado. Aqui intervimos especificando que só precisamos do nome de usuário, e-mail e avatar do usuário para se registrar. Aqui está a reivindicação:

Imagem de Como criar uma aplicação web usando ChatGPT | 1MaSGm-vXFNt0dC77vV6qIA-DzTechs

Aqui está o resultado:

Imagem de Como criar uma aplicação web usando ChatGPT | 1Yb7gTVbY11qJdGwxM8gdGw-DzTechs

Em seguida, pedimos ao ChatGPT para criar o componente de registro.

Imagem de Como criar uma aplicação web usando ChatGPT | 1wpsNuz0N7z78oyK2Xl0V7Q-DzTechs

Embora não tenhamos incluído o campo de senha como parte do processo de registro, o ChatGPT fez a conexão correta incluindo-o no código HTML gerado. Copiamos o código sem nenhuma modificação e é assim que fica no navegador.

Imagem de Como criar uma aplicação web usando ChatGPT | 136GtD3DLjg00vvZLAKP1bw-DzTechs

Em seguida, pedimos ao ChatGPT para gerar nosso código de registro PHP. A princípio, pedimos para “escrever código PHP lógico do lado do servidor para lidar com o envio de formulários”. Embora o script gerado funcione bem, ele tem muitos pontos fracos.

Não havia hashing de senha, nenhum tratamento de erro e era vulnerável à injeção de SQL - o ChatGPT fazia apenas o mínimo necessário. Consertar isso foi relativamente fácil. Simplesmente pedimos ao ChatGPT para "identificar tudo o que não é compatível no código que você acabou de criar e, em seguida, usar os pontos identificados para melhorar o código". Com isso, o plug-in de registro do PHP estava pronto para funcionar.

Adendo: A formulação de seus prompts de texto é importante. Você precisa ser muito claro e específico sobre o que deseja que o ChatGPT faça. Quando simplesmente pedimos para "consertar 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 Como escrever declarações eficazes.

Em seguida, pedimos ao ChatGPT para "escrever código SQL para criar um banco de dados para armazenar os dados capturados em um script PHP". Aqui está o código SQL resultante:

Imagem de Como criar uma aplicação web usando ChatGPT | 16eQlrlJDzzAAFZi2N8sKTg-DzTechs

E aqui está a tabela criada pela execução do SQL:

Imagem de Como criar uma aplicação web usando ChatGPT | 1Bxzu0655CjHEaIGCZ9M5FA-DzTechs

Com o banco de dados configurado, tentamos o primeiro processo de registro e funcionou sem erros. Verificar Melhores maneiras fáceis de obter experiência em SQL antes do seu primeiro emprego.

2. Crie o componente de login

Com o componente de cadastro bem feito, passamos para a criação do componente de login. Surpreendentemente, foi o mais fácil de desenvolver, apesar da lógica adicional de gerenciamento de sessão.

Imagem de Como criar uma aplicação web usando ChatGPT | 1LMahQSFFn99_HXGQykdKxg-DzTechs

Aqui está a página de login criada. Uma de suas características mais proeminentes é que ele usa as mesmas opções de cores da página de registro.

Imagem de Como criar uma aplicação web usando ChatGPT | 1ovI0ElpV0LvmzwoCkBHrew-DzTechs

Depois de criar o 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. Crie o bloco de chat

Desenvolver o plug-in de bate-papo foi a última – e talvez a mais difícil – parte de nosso pequeno experimento. No início, simplesmente pedimos ao ChatGPT para escrever o código apropriado para nosso plug-in de bate-papo. Escusado será dizer que foi um fracasso abismal. Para poder desenvolver os componentes mais complexos de qualquer coisa que você queira construir, você precisará dividi-lo em componentes menores e processá-los um por um.

Pedimos ao ChatGPT sugestões sobre como dividir o componente de bate-papo e ele sugeriu a criação de três páginas:

  1. Bate-papo. php
  2. Enviar-mensagens. php
  3. Buscar-mensagens.php

Adendo: Quando o ChatGPT sugere um nome de arquivo, usar um nome diferente em seu projeto pode causar problemas inadvertidamente, pois o chatbot se referirá ao mesmo nome em todo o código gerado ao longo do projeto. Descobrimos isso da maneira mais difícil. Não cometa o mesmo erro.

Criar uma página Chat.php

Para começar, fornecemos instruções passo a passo do ChatGPT sobre a aparência da sua interface de bate-papo.

Imagem de Como criar uma aplicação web usando ChatGPT | 1f9ELLmtSppIXySWSvcozsA-DzTechs

Depois de executar o código HTML gerado, temos uma interface de chat sem uma caixa de entrada de mensagens. Para corrigir isso, simplesmente pedimos ao ChatGPT para "reescrever o código para incluir uma caixa de entrada de mensagem e um botão de envio". Veja como o código gerado ficará no navegador na segunda versão beta.

Imagem de Como criar uma aplicação web usando ChatGPT | 1px2vk7q8PLzMAXr1yIy2nw-DzTechs

Adendo: Quando o código gerado não produzir os resultados desejados ou perder um componente importante, basta pedir ao ChatGPT para reescrever o último código. Peça a ele para incluir o componente ou fazer qualquer coisa que não tenha sido feita no código bruto. Aqui estão algumas dicas sobre Como usar o ChatGPT na programação.

Criar páginas "send-messages.php" e "fetch-messages"

Depois de 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 realmente destacou que precisaríamos de uma tabela de "mensagens". Pedimos ao chatbot para criar a tabela de mensagens usando SQL.

Imagem de Como criar uma aplicação web usando ChatGPT | 1Z4b8uAJHampbCITAPCU9Pw-DzTechs

Depois de gerar o código SQL, pedimos ao chatbot para gerar um script PHP para lidar com a lógica de mensagens.

Imagem de Como criar uma aplicação web usando ChatGPT | 1WOYluceu9R0q78ziR-yOrQ-DzTechs

O ChatGPT gerou o script para as páginas “send-messages.php” e “fetch-messages.php”. Executando os dois scripts, finalmente encontramos o primeiro erro (que foi estranhamente satisfatório). Chegar até aqui em um projeto sem depurar uma única linha de código parece muito bom, apesar de sua relativa simplicidade.

Acontece que o erro foi causado pelo ChatGPT inserindo uma verificação para uma variável de sessão não declarada ($_SESSION['user_id']) no script. Suspeitamos que isso ocorreu devido a uma longa pausa no projeto que fez com que o ChatGPT esquecesse alguns contextos e nomes de variáveis ​​usados ​​no projeto.

Adendo: Ao usar o ChatGPT para criar um aplicativo, certifique-se de usar o mesmo tópico de bate-papo e tente concluir os componentes relevantes o mais rápido possível. Usar um novo tópico ou fazer uma longa pausa pode levar a inconsistências. O ChatGPT tende a esquecer alguns detalhes do projeto atual (como o esquema de cores) se você fizer longas pausas entre as sessões de programação.

No entanto, corrigimos o bug e publicamos o código. Nós nos inscrevemos, 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 eram um pouco inconsistentes. No entanto, para um aplicativo que levou 23 hora e XNUMX minutos para ser concluído, não o julgaríamos com tanta severidade.

ChatGPT: Um excelente auxiliar para programação

ChatGPT é claramente um poderoso assistente de programação. A capacidade do chatbot de gerar um código impressionante a partir de prompts simples, às vezes não totalmente óbvios, é uma prova de sua capacidade de codificação.

Claro, ainda existem muitas desvantagens. A janela de contexto limitada e sua capacidade de vincular a lógica de vários componentes criados independentemente é um grande problema. No entanto, um chatbot pode ajudá-lo a criar aplicativos da Web bastante complexos rapidamente, se você souber o que fazer. Você pode ver agora Maneiras de usar o ChatGPT como ajudante de cozinha.

Ir para o botão superior