Come creare un'app Web con ChatGPT

Una delle maggiori affermazioni dell'hype che circonda ChatGPT è che può essere uno strumento di programmazione efficace. L'idea è la seguente: descrivi ciò che vuoi in linguaggio naturale; il chatbot genera codice che fa proprio questo. Ma quanto è bravo effettivamente ChatGPT a farlo?

Quale modo migliore per scoprirlo che metterlo alla prova? Abbiamo chiesto a ChatGPT di creare da zero una semplice app web. Ecco il risultato del nostro test e i passaggi che puoi utilizzare per creare un sito Web da zero utilizzando ChatGPT.

Passaggio 1: generazione del progetto per la tua app Web

Proprio come faresti quando crei un'app Web con qualsiasi strumento, dovresti definire il progetto di cosa vuoi che la tua app assomigli e i passaggi necessari per crearla prima di consentire a ChatGPT di eseguire il file spettacolo.

Per il nostro primo compito, abbiamo chiesto a ChatGPT di sviluppare un progetto per una semplice app di chat. Per fare ciò, abbiamo descritto i requisiti per la nostra app web e poi abbiamo chiesto al chatbot di dettagliare un piano per lo sviluppo dell'app.

Dopo aver usato il prompt sopra, ecco il risultato che abbiamo ottenuto:

Dovresti avere il plug-in "Mostrami" abilitato sul tuo account ChatGPT per generare un diagramma di flusso come il nostro sopra. Puoi installare e utilizzare i plugin ChatGPT in pochi passaggi, anche se avrai bisogno di un abbonamento premium.

Senza il plug-in, otterrai un progetto basato su testo o un diagramma di flusso ASCII-art. Va ancora bene. Anche senza il plug-in, ChatGPT dovrebbe comunque fornire un chiaro progetto dell'app come nell'esempio seguente.

Passaggio 2: suddividere il progetto in moduli più piccoli

Ora che abbiamo delineato il quadro generale, abbiamo chiesto aiuto a ChatGPT per suddividere l'app in componenti più piccoli che possiamo sviluppare separatamente e quindi integrare per formare l'app Web completa. ChatGPT ha suggerito di suddividerlo in tre componenti:

1. Modulo di registrazione
2. Modulo di accesso
3. Modulo chat

Avevamo altre idee, ma l'obiettivo qui è lasciare che ChatGPT chiami i colpi.

1. Creazione del componente di registrazione

Siamo passati subito alla creazione del componente di registrazione. Abbiamo chiesto a ChatGPT di elaborare un algoritmo appropriato. Qui siamo intervenuti specificando che ci serviva solo il nome utente, l'email e l'avatar dell'utente per la registrazione. Ecco la richiesta:

Ed ecco il risultato:

Successivamente, abbiamo chiesto a ChatGPT di creare il componente di registrazione.

Sebbene non abbiamo incluso il campo della password come parte del processo di registrazione, ChatGPT ha fatto la scelta giusta includendolo nel codice HTML generato. Abbiamo copiato il codice senza alcuna modifica ed ecco come appare su un browser.

Successivamente, abbiamo chiesto a ChatGPT di generare lo script di registrazione PHP. Inizialmente, abbiamo richiesto "Scrivi un codice PHP per la logica lato server per la gestione dell'invio del modulo". Sebbene lo script generato funzionasse correttamente, presentava molte vulnerabilità.

Non c'era hash delle password, nessuna gestione degli errori ed era incline a SQL injection: ChatGPT faceva solo il minimo indispensabile. Risolvere questo problema è stato relativamente facile. Abbiamo semplicemente chiesto a ChatGPT di "identificare tutto ciò che non va nel codice che hai appena generato, e poi usa i punti identificati per ottimizzare il codice." Detto questo, il nostro script di registrazione PHP era pronto per andare.

La formulazione della tua richiesta è importante. Devi essere molto chiaro e specifico su ciò di cui hai bisogno che ChatGPT faccia. Quando gli abbiamo semplicemente chiesto di "risolvere il problema con questo codice", non ha risolto la maggior parte di ciò che speravamo risolvesse. Per ulteriori indicazioni sulla scrittura di prompt ChatGPT, ecco alcuni luoghi per imparare a scrivere suggerimenti efficaci.

Successivamente, abbiamo chiesto a ChatGPT di "Scrivi un codice SQL per creare un database per i dati acquisiti nello script PHP." Ecco il codice SQL risultante:

Ed ecco la tabella creata eseguendo l'SQL:

Con il database configurato, abbiamo provato la nostra prima registrazione e ha funzionato senza errori.

2. Creazione del componente di accesso

Con il componente di registrazione fuori mano, abbiamo preso il componente Login. Sorprendentemente, è stato il più facile da costruire nonostante la logica aggiuntiva della gestione delle sessioni.

Ecco la pagina di login generata. Un aspetto fondamentale è che utilizza le stesse opzioni di colore della pagina di registrazione.

Dopo aver creato un file "server.login.php" come indicato da ChatGPT e aver aggiunto lo script PHP generato, abbiamo effettuato il nostro primo accesso riuscito senza alcuna modifica o debug.

3. Creazione del componente chat

Costruire il componente della chat è stata la parte finale, e probabilmente la più difficile, del nostro piccolo esperimento. Inizialmente, abbiamo semplicemente chiesto a ChatGPT di scrivere il codice per il componente chat. Inutile dire che è stato un fallimento colossale. Per componenti più complessi di qualsiasi cosa tu voglia creare, dovrai suddividerlo in componenti più piccoli e affrontarli uno dopo l'altro.

Abbiamo chiesto a ChatGPT suggerimenti su come suddividere il componente chat e ci ha suggerito di creare tre pagine:

1. Chat.php
2. Invia-messaggi.php
3. Recupera-messaggi.php

Quando ChatGPT suggerisce un nome di file, l'utilizzo di un nome diverso nel tuo progetto potrebbe inavvertitamente causare problemi poiché il chatbot farà riferimento allo stesso nome in tutto il codice che crea in tutto il progetto. L'abbiamo scoperto nel modo più duro. Non commettere lo stesso errore.

Creazione della pagina Chat.php

Per iniziare, abbiamo fornito a ChatGPT istruzioni dettagliate su come volevamo che fosse l'interfaccia della chat.

Dopo aver eseguito il codice HTML generato, avevamo un'interfaccia di chat senza una casella di immissione dei messaggi. Per risolvere questo problema, abbiamo semplicemente chiesto a ChatGPT di "riscrivere il codice per includere una casella di immissione del messaggio e un pulsante di invio." Ecco come appare il codice generato su un browser durante la seconda prova.

Ogni volta che il codice generato non riesce a dare i risultati desiderati o omette un componente importante, è sufficiente chiedere a ChatGPT di riscrivere l'ultimo codice. Digli di includere il componente o di fare ciò che non è stato fatto nel codice iniziale. Ecco alcuni suggerimenti su come utilizzare ChatGPT per la programmazione.

Creazione della pagina "send-messages.php" e "Fetch-messages".

Soddisfatti dell'interfaccia, abbiamo proceduto alla creazione dello script per gestire la logica della chat. Per poter inviare e recuperare messaggi dal database, ChatGPT ha giustamente evidenziato che avremo bisogno di una tabella "messaggi". Abbiamo chiesto al chatbot di creare un SQL per la tabella dei messaggi.

Dopo aver generato un codice SQL, abbiamo chiesto al chatbot di generare uno script PHP per gestire la logica di messaggistica.

ChatGPT ha generato lo script per entrambe le pagine "send-messages.php" e "fetch-messages.php". Eseguendo entrambi gli script, abbiamo finalmente avuto il nostro primo vero errore (che è stato stranamente soddisfacente). Arrivare così lontano nel progetto senza eseguire il debug di una singola riga di codice sembrava un po' troppo bello per essere vero, nonostante la sua relativa semplicità.

Si scopre che l'errore è stato causato da ChatGPT che ha introdotto un controllo per una variabile di sessione non dichiarata ($_SESSION['user_id']) nel nostro script. Sospettiamo che ciò sia stato il risultato di una pausa piuttosto lunga dal progetto che ha portato ChatGPT a dimenticare alcuni dei contesti e dei nomi delle variabili utilizzate nel progetto.

Quando utilizzi ChatGPT per creare un'app, assicurati di utilizzare lo stesso thread di chat e prova a completare i componenti correlati il ​​prima possibile. L'utilizzo di un nuovo thread di chat o una lunga pausa potrebbero introdurre incoerenze. ChatGPT tende a dimenticare alcuni dettagli del progetto corrente (ad esempio la combinazione di colori) se fai lunghe pause tra le sessioni di codifica.

Detto questo, abbiamo corretto il bug e distribuito il codice. Ci siamo registrati, abbiamo effettuato l'accesso e provato la funzione di chat. Mentre siamo stati in grado di inviare messaggi da un utente registrato a un altro, il colore e la disposizione delle bolle dei messaggi erano un po' fuori posto. Tuttavia, per un'app che ha richiesto un'ora e 23 minuti per essere completata, non la giudicheremo troppo duramente.

ChatGPT: un eccellente assistente di codifica

ChatGPT è chiaramente un potente assistente di codifica. Il fatto che il chatbot possa produrre un codice impressionante da istruzioni semplici e talvolta non così chiare è una testimonianza della sua abilità di codifica.

Certo, ha ancora molti difetti. Il problema con una finestra di contesto limitata e la sua capacità di collegare insieme la logica da più componenti costruiti in modo indipendente è un grosso problema. Tuttavia, il chatbot può aiutarti a creare rapidamente app Web abbastanza complesse se sai come muoverti.