Kako izgraditi web aplikaciju pomoću ChatGPT-a

Jedna od najvećih tvrdnji pompe oko ChatGPT-a je da može biti učinkovit alat za programiranje. Ideja je sljedeća: ono što želite opisujete prirodnim jezikom; chatbot generira kod koji radi upravo to. Ali koliko je ChatGPT zapravo dobar u tome?

Ima li boljeg načina da to saznate od testiranja? Zatražili smo od ChatGPT-a da napravi jednostavnu web-aplikaciju od nule. Evo rezultata našeg testa i koraka koje možete koristiti za izradu web stranice od nule koristeći ChatGPT.

Korak 1: Generiranje nacrta za vašu web-aplikaciju

Baš kao što biste učinili kada izrađujete web-aplikaciju s bilo kojim alatom, trebali biste postaviti nacrt onoga što želite da vaša aplikacija izgleda tako i korake koje ćete trebati izraditi prije nego što pustite ChatGPT da je pokrene pokazati.

Za naš prvi zadatak, zamolili smo ChatGPT da razvije nacrt za jednostavnu aplikaciju za chat. Kako bismo to učinili, opisali smo zahtjeve za našu web-aplikaciju, a zatim zatražili od chatbota da detaljno razradi plan za razvoj aplikacije.

Nakon korištenja gornjeg upita, evo rezultata koji smo dobili:

Morate imati omogućen dodatak "Pokaži mi" na svom ChatGPT računu da biste generirali dijagram toka poput našeg gore. Možeš instalirati i koristiti ChatGPT dodatke u samo nekoliko koraka, iako će vam trebati premium pretplata.

Bez dodatka, dobit ćete tekstualni nacrt ili ASCII-art dijagram toka. To je još uvijek u redu. Čak i bez dodatka, ChatGPT bi i dalje trebao pružati jasan nacrt aplikacije kao što je primjer u nastavku.

Korak 2: Dijeljenje nacrta na manje module

Sada kada imamo širu sliku, zatražili smo pomoć od ChatGPT-a u dijeljenju aplikacije na manje komponente koje možemo zasebno razvijati i zatim integrirati u cjelovitu web-aplikaciju. ChatGPT je predložio razbijanje na tri komponente:

1. Registracijski modul
2. Modul za prijavu
3. Modul za chat

Imali smo drugih ideja, ali ovdje je cilj dopustiti ChatGPT-u da odlučuje.

1. Izgradnja registracijske komponente

Odmah smo krenuli s izgradnjom registracijske komponente. Zamolili smo ChatGPT da nacrta odgovarajući algoritam. Ovdje smo intervenirali navodeći da nam za registraciju trebaju samo korisničko ime, e-mail i avatar. Evo upute:

I evo rezultata:

Zatim smo tražili od ChatGPT-a da izgradi komponentu registracije.

Iako nismo uključili polje za zaporku kao dio procesa registracije, ChatGPT je učinio pravu odluku uključivši ga u generirani HTML kod. Kod smo kopirali bez ikakvih izmjena, a evo kako izgleda u pregledniku.

Zatim smo tražili od ChatGPT-a da generira PHP skriptu za registraciju. Isprva smo tražili "Napišite PHP kod za logiku na strani poslužitelja za rukovanje slanjem obrasca." Iako je generirana skripta dobro radila, imala je puno ranjivosti.

Nije bilo raspršivanja lozinki, rukovanja pogreškama i bio je sklon ubacivanju SQL-a—ChatGPT je učinio samo minimum. Popraviti ovo bilo je relativno lako. Jednostavno smo zamolili ChatGPT da "identificira sve što nije u redu s kodom koji ste upravo generirali, a zatim koristiti identificirane točke za optimizaciju koda." S tim je naša PHP skripta za registraciju bila spremna za ići.

Tekst vašeg upita je bitan. Morate biti vrlo jasni i konkretni s onim što vam ChatGPT treba. Kada smo ga jednostavno zamolili da "popravi problem s ovim kodom," nije popravio većinu onoga čemu smo se nadali da će riješiti. Za više smjernica o pisanju ChatGPT upita, ovdje su neka mjesta da naučite kako pisati učinkovite upute.

Sljedeće, tražili smo od ChatGPT-a da "Napišite SQL kod za stvaranje baze podataka za podatke snimljene u PHP skripti." Evo rezultirajućeg SQL koda:

A ovo je tablica stvorena izvršavanjem SQL-a:

S postavljenom bazom podataka, pokušali smo s prvom registracijom i radila je bez ikakvih grešaka.

2. Izrada komponente prijave

Nakon što smo uklonili komponentu za registraciju, preuzeli smo komponentu za prijavu. Začudo, bilo ga je najlakše izgraditi unatoč dodatnoj logici upravljanja sesijom.

Evo generirane stranice za prijavu. Ključni naglasak je da koristi iste opcije boja kao stranica za registraciju.

Nakon što smo kreirali datoteku "server.login.php" prema uputama ChatGPT-a i dodali generiranu PHP skriptu, napravili smo našu prvu uspješnu prijavu bez ikakvih izmjena ili otklanjanja pogrešaka.

3. Izrada komponente chata

Izrada komponente chata bila je posljednji — i vjerojatno najteži dio — našeg malog eksperimenta. Isprva smo jednostavno tražili od ChatGPT-a da napiše kod za komponentu chata. Nepotrebno je reći da je to bio kolosalan neuspjeh. Za složenije komponente bilo čega što želite stvoriti, morat ćete to podijeliti na manje komponente i uhvatiti se u koštac s njima jednu za drugom.

Pitali smo ChatGPT za prijedloge o podjeli komponente chata, a on je predložio da stvorimo tri stranice:

1. Razgovaraj.php
2. Pošalji-poruke.php
3. Fetch-messages.php

Kada ChatGPT predloži naziv datoteke, korištenje drugog naziva u vašem projektu može nenamjerno uzrokovati problema jer će chatbot upućivati ​​na isto ime u cijelom kodu koji stvara projekt. Saznali smo na teži način. Nemojte napraviti istu grešku.

Izrada stranice Chat.php

Za početak smo ChatGPT-u dali detaljne upute o tome kako želimo da izgleda sučelje za chat.

Nakon pokretanja generiranog HTML koda, imali smo sučelje za chat bez okvira za unos poruke. Da bismo to popravili, jednostavno smo tražili od ChatGPT-a da "prepišite kod tako da uključuje okvir za unos poruke i gumb za slanje." Evo kako generirani kod izgleda u pregledniku u drugoj probi.

Kad god generirani kod ne uspije dati željene rezultate ili izostavi važnu komponentu, jednostavno zatražite od ChatGPT-a da ponovno napiše posljednji kod. Recite mu da uključi komponentu ili učini ono što nije učinjeno u početnom kodu. Ovdje su nekoliko savjeta o tome kako koristiti ChatGPT za programiranje.

Stvaranje stranice "send-messages.php" i "Fetch-messages".

Zadovoljni sučeljem, nastavili smo s izradom skripte za rukovanje logikom razgovora. Kako bismo mogli slati i dohvaćati poruke iz baze podataka, ChatGPT je s pravom istaknuo da će nam trebati tablica "poruke". Zatražili smo od chatbota da izradi SQL za tablicu poruka.

Nakon generiranja SQL koda, tražili smo od chatbota da generira PHP skriptu za rukovanje logikom slanja poruka.

ChatGPT je generirao skriptu za stranice "send-messages.php" i "fetch-messages.php". Prilikom pokretanja obje skripte, konačno smo imali prvu pogrešku (koja je bila neobično zadovoljavajuća). Ući ovako daleko u projekt bez otklanjanja pogrešaka u ijednom retku koda činilo se previše dobrim da bi bilo istinito, unatoč relativnoj jednostavnosti.

Ispostavilo se da je pogrešku uzrokovao ChatGPT koji je uveo provjeru nedeklarisane varijable sesije ($_SESSION['user_id']) u našu skriptu. Sumnjamo da je to rezultat prilično duge stanke u projektu što je rezultiralo time da je ChatGPT zaboravio neke od konteksta i imena varijabli korištenih u projektu.

Kada koristite ChatGPT za izradu aplikacije, pobrinite se da koristite istu nit za chat i pokušajte dovršiti povezane komponente što je prije moguće. Korištenje nove niti za chat ili uzimanje duge pauze može dovesti do nedosljednosti. ChatGPT ima tendenciju zaboraviti neke detalje trenutnog projekta (npr. shemu boja) ako pravite duge stanke između sesija kodiranja.

Ipak, popravili smo grešku i implementirali kôd. Registrirali smo se, prijavili i isprobali značajku chata. Iako smo mogli slati poruke od jednog registriranog korisnika do drugog, boja i raspored oblačića s porukama bili su pomalo netočni. Međutim, za aplikaciju za koju je trebalo sat i 23 minute da se završi, nećemo je suditi prestrogo.

ChatGPT: izvrstan pomoćnik kodiranja

ChatGPT je očito moćan pomoćnik kodiranja. To što chatbot može prikazati impresivan kod iz jednostavnih, a ponekad i ne tako jasnih uputa, dokaz je njegove vještine kodiranja.

Naravno, još uvijek ima puno nedostataka. Problem s ograničenim kontekstnim prozorom i njegovom sposobnošću povezivanja logike iz više neovisno izgrađenih komponenti veliki je problem. Međutim, chatbot vam može pomoći da brzo izradite prilično složene web-aplikacije ako se snalazite.