Cum să construiți o aplicație web cu ChatGPT

Una dintre cele mai mari afirmații ale hype-ului din jurul ChatGPT este că poate fi un instrument de programare eficient. Ideea este următoarea: descrii ceea ce vrei în limbaj natural; chatbot-ul generează cod care face exact asta. Dar cât de bun este de fapt ChatGPT să facă asta?

Ce modalitate mai bună de a afla decât să-l testezi? Am cerut ChatGPT să creeze o aplicație web simplă de la zero. Iată rezultatul testului nostru și pașii pe care îi puteți folosi pentru a construi un site web de la zero folosind ChatGPT.

Pasul 1: Generarea planului pentru aplicația dvs. web

La fel cum ați face atunci când creați o aplicație web cu orice instrument, va trebui să stabiliți planul a ceea ce doriți să arate ca aplicația dvs. și pașii de care veți avea nevoie pentru ao crea înainte de a lăsa ChatGPT să ruleze spectacol.

Pentru prima noastră sarcină, am cerut ChatGPT să dezvolte un plan pentru o aplicație simplă de chat. Pentru a face acest lucru, am descris cerințele pentru aplicația noastră web și apoi am cerut chatbot-ului să detalieze un plan pentru dezvoltarea aplicației.

După ce am folosit promptul de mai sus, iată rezultatul pe care l-am obținut:

Ar trebui să aveți pluginul „Arătați-mi” activat în contul dvs. ChatGPT pentru a genera o diagramă de flux ca a noastră de mai sus. Puteți instalați și utilizați pluginuri ChatGPT în doar câțiva pași, deși vei avea nevoie de un abonament premium.

Fără plugin, veți obține un plan bazat pe text sau o diagramă ASCII-art. E încă în regulă. Chiar și fără plugin, ChatGPT ar trebui să ofere totuși un plan clar al aplicației, ca exemplul de mai jos.

Pasul 2: Împărțirea planului în module mai mici

Acum că avem imaginea de ansamblu, am cerut ajutor ChatGPT pentru a împărți aplicația în componente mai mici pe care le putem dezvolta separat și apoi le putem integra pentru a forma aplicația web completă. ChatGPT a sugerat împărțirea acestuia în trei componente:

1. Modul de înregistrare
2. Modul de conectare
3. Modulul de chat

Aveam alte idei, dar scopul aici este să lăsăm ChatGPT să devină decisiv.

1. Construirea componentei de înregistrare

Am sărit direct în construirea componentei de înregistrare. Am cerut ChatGPT să elaboreze un algoritm adecvat. Aici am intervenit specificând că avem nevoie doar de numele de utilizator, e-mailul și avatarul utilizatorului pentru înregistrare. Iată solicitarea:

Și iată rezultatul:

În continuare, am solicitat ChatGPT să creeze componenta de înregistrare.

Deși nu am inclus câmpul pentru parolă ca parte a procesului de înregistrare, ChatGPT a făcut apelul potrivit incluzându-l în codul HTML generat. Am copiat codul fără nicio modificare și iată cum arată într-un browser.

În continuare, am solicitat ChatGPT să genereze scriptul de înregistrare PHP. La început, am solicitat „Scrieți un cod PHP pentru logica serverului pentru gestionarea trimiterii formularului”. Deși scriptul generat a funcționat bine, avea o mulțime de vulnerabilități.

Nu a existat nicio hashing a parolei, nicio gestionare a erorilor și a fost predispus la injectarea SQL - ChatGPT a făcut doar strictul minim. Remedierea acestui lucru a fost relativ ușoară. Pur și simplu am cerut ChatGPT să „identifice totul în neregulă cu codul pe care tocmai l-ai generat și apoi utilizați punctele identificate pentru a optimiza codul.” Cu asta, scriptul nostru de înregistrare PHP a fost gata merge.

Formularea promptului dvs. contează. Trebuie să fii foarte clar și specific cu ceea ce trebuie să faci ChatGPT. Când i-am cerut pur și simplu să „remedieze problema cu acest cod”, nu a remediat majoritatea a ceea ce am sperat că va rezolva. Pentru mai multe îndrumări despre scrierea solicitărilor ChatGPT, aici sunt unele locuri pentru a învăța cum să scrieți prompturi eficiente.

În continuare, am cerut ChatGPT să „Scrieți un cod SQL pentru a crea o bază de date pentru datele capturate în scriptul PHP.„Iată codul SQL rezultat:

Și iată tabelul creat prin executarea SQL:

Cu baza de date configurată, am încercat prima înregistrare și a funcționat fără erori.

2. Construirea componentei de conectare

Cu componenta de înregistrare din drum, am preluat componenta Login. În mod surprinzător, a fost cel mai ușor de construit, în ciuda logicii suplimentare a gestionării sesiunilor.

Iată pagina de conectare generată. Un aspect cheie este că folosește aceleași opțiuni de culoare ca și pagina de înregistrare.

După ce am creat un fișier „server.login.php” conform instrucțiunilor ChatGPT și am adăugat script-ul PHP generat, ne-am autentificat cu succes fără modificări sau depanare.

3. Construirea componentei de chat

Construirea componentei de chat a fost partea finală – și probabil cea mai grea – a micului nostru experiment. La început, am cerut pur și simplu ChatGPT să scrie codul pentru componenta de chat. Inutil să spun că a fost un eșec colosal. Pentru componente mai complexe din orice doriți să creați, va trebui să le împărțiți în componente mai mici și să le abordați una după alta.

Am cerut ChatGPT sugestii privind împărțirea componentei de chat și ne-a sugerat să creăm trei pagini:

1. Chat.php
2. Trimite mesaje.php
3. Fetch-messages.php

Atunci când ChatGPT sugerează un nume de fișier, utilizarea unui alt nume în proiectul dvs. poate cauza din neatenție probleme, deoarece chatbot-ul va face referire la același nume în tot codul pe care îl creează în tot proiect. Am aflat pe calea grea. Nu face aceeași greșeală.

Crearea paginii Chat.php

Pentru început, am dat ChatGPT instrucțiuni detaliate despre cum dorim să arate interfața de chat.

După rularea codului HTML generat, am avut o interfață de chat fără o casetă de introducere a mesajului. Pentru a remedia acest lucru, am solicitat pur și simplu ChatGPT să „rescrieți codul pentru a include o casetă de introducere a mesajului și un buton de trimitere.„Iată cum arată codul generat pe un browser în a doua încercare.

Ori de câte ori codul generat nu reușește să ofere rezultatele dorite sau omite o componentă importantă, pur și simplu solicitați ChatGPT să rescrie ultimul cod. Spune-i să includă componenta sau să facă orice nu a fost făcut în codul inițial. Aici sunt câteva sfaturi despre cum să utilizați ChatGPT pentru programare.

Crearea paginii „send-messages.php” și „Fetch-messages”.

Mulțumiți de interfață, am continuat să construim scriptul pentru a gestiona logica chatului. Pentru a putea trimite și prelua mesaje din baza de date, ChatGPT a subliniat pe bună dreptate că vom avea nevoie de un tabel de „mesaje”. Am cerut chatbot-ului să creeze un SQL pentru tabelul de mesaje.

După generarea unui cod SQL, am cerut chatbot-ului să genereze un script PHP pentru a gestiona logica mesageriei.

ChatGPT a generat scriptul atât pentru paginile „send-messages.php”, cât și pentru „fetch-messages.php”. La rularea ambelor scripturi, am avut în sfârșit prima noastră eroare (care a fost ciudat de satisfăcătoare). A ajunge atât de departe în proiect fără a depana o singură linie de cod mi s-a părut puțin prea frumos pentru a fi adevărat, în ciuda simplității sale relative.

Se pare că eroarea a fost cauzată de introducerea de către ChatGPT a unei verificări pentru o variabilă de sesiune nedeclarată ($_SESSION['user_id']) în scenariul nostru. Bănuim că acesta a fost rezultatul unei pauze destul de lungi de la proiect, ceea ce a dus la uitarea ChatGPT de unele dintre contextele și numele variabilelor utilizate în proiect.

Când utilizați ChatGPT pentru a crea o aplicație, asigurați-vă că utilizați același fir de chat și încercați să finalizați componentele aferente cât mai curând posibil. Utilizarea unui nou thread de chat sau luarea unei pauze lungi poate introduce inconsecvențe. ChatGPT tinde să uite unele detalii ale proiectului curent (de exemplu, schema de culori) dacă iei pauze lungi între sesiunile de codare.

Acestea fiind spuse, am remediat eroarea și am implementat codul. Ne-am înregistrat, ne-am autentificat și am încercat funcția de chat. În timp ce am putut să trimitem mesaje de la un utilizator înregistrat la altul, culoarea și aranjamentul bulelor de mesaje au fost puțin dezactivate. Cu toate acestea, pentru o aplicație care a durat o oră și 23 de minute, nu o vom judeca prea aspru.

ChatGPT: Un asistent de codificare excelent

ChatGPT este în mod clar un puternic asistent de codare. Faptul că chatbot-ul poate obține un cod impresionant din instrucțiuni simple și uneori nu atât de clare este o dovadă a priceperii sale de codare.

Sigur, are încă o mulțime de defecte. Problema cu o fereastră de context limitată și capacitatea sa de a lega împreună logica din mai multe componente construite independent este o problemă majoră. Cu toate acestea, chatbot-ul vă poate ajuta să construiți rapid aplicații web destul de complexe dacă vă cunoașteți cum să vă îndreptați.