Kako zgraditi spletno aplikacijo s ChatGPT

Ena največjih trditev v zvezi s ChatGPT je, da je lahko učinkovito orodje za programiranje. Ideja je naslednja: v naravnem jeziku opišete, kar želite; chatbot ustvari kodo, ki naredi prav to. Toda kako dober je ChatGPT pri tem?

Kaj je boljši način, da ugotovite, kot da ga preizkusite? ChatGPT smo prosili, da iz nič izdela preprosto spletno aplikacijo. Tukaj je rezultat našega preizkusa in koraki, ki jih lahko uporabite za izdelavo spletnega mesta iz nič z uporabo ChatGPT.

1. korak: Ustvarjanje načrta za vašo spletno aplikacijo

Tako kot bi naredili pri izdelavi spletne aplikacije s katerim koli orodjem, bi morali pripraviti načrt, kaj želite, da vaša aplikacija izgleda tako, in korake, ki jih boste morali izdelati, preden dovolite ChatGPT zagnati pokazati.

Za našo prvo nalogo smo prosili ChatGPT, da razvije načrt za preprosto aplikacijo za klepet. Da bi to naredili, smo opisali zahteve za našo spletno aplikacijo in nato prosili klepetalnega robota, da podrobno predstavi načrt za razvoj aplikacije.

Po uporabi zgornjega poziva je rezultat, ki smo ga dobili:

Če želite ustvariti diagram poteka, kot je naš zgoraj, bi morali imeti v vašem računu ChatGPT omogočen vtičnik »Pokaži mi«. Ti lahko namestite in uporabite vtičnike ChatGPT v samo nekaj korakih, čeprav boste potrebovali premium naročnino.

Brez vtičnika boste dobili besedilni načrt ali umetniški diagram poteka ASCII. To je še v redu. Tudi brez vtičnika bi moral ChatGPT še vedno zagotavljati jasen načrt aplikacije, kot je spodnji primer.

2. korak: razdelitev načrta na manjše module

Zdaj, ko imamo postavljeno veliko sliko, smo ChatGPT prosili za pomoč pri razdelitvi aplikacije na manjše komponente, ki jih lahko razvijemo ločeno in nato integriramo v celotno spletno aplikacijo. ChatGPT je predlagal razdelitev na tri komponente:

1. Registracijski modul
2. Modul za prijavo
3. Modul za klepet

Imeli smo druge ideje, vendar je cilj tukaj prepustiti ChatGPT-ju.

1. Gradnja registracijske komponente

Takoj smo se lotili gradnje registracijske komponente. ChatGPT smo prosili, da pripravi ustrezen algoritem. Tu smo posredovali tako, da smo določili, da za registracijo potrebujemo samo uporabnikovo uporabniško ime, e-pošto in avatar. Tukaj je poziv:

In tukaj je rezultat:

Nato smo pozvali ChatGPT, naj zgradi komponento za registracijo.

Čeprav nismo vključili polja za geslo kot del registracijskega postopka, je ChatGPT naredil pravi klic, tako da ga je vključil v ustvarjeno kodo HTML. Kodo smo kopirali brez kakršnih koli sprememb in tako je videti v brskalniku.

Nato smo ChatGPT pozvali, naj ustvari registracijski skript PHP. Sprva smo pozvali z "Napišite kodo PHP za strežniško logiko za obdelavo oddaje obrazca." Čeprav je ustvarjeni skript deloval dobro, je imel veliko ranljivosti.

Ni bilo zgoščevanja gesel, nobene obravnave napak in je bil nagnjen k vbrizgavanju SQL – ChatGPT je naredil le najmanjši minimum. Popravljanje tega je bilo relativno enostavno. Preprosto smo prosili ChatGPT, naj "prepozna vse, kar je narobe s kodo, ki ste jo pravkar ustvarili, in nato uporabite identificirane točke za optimizacijo kode." S tem je bil naš registracijski skript PHP pripravljen pojdi.

Besedilo vašega poziva je pomembno. Morate biti zelo jasni in natančni glede tega, kaj potrebujete za ChatGPT. Ko smo ga preprosto prosili, naj "odpravi težavo s to kodo," ni popravil večine tega, kar smo upali, da bo popravilo. Za več navodil o pisanju pozivov ChatGPT so tukaj nekaj mest, kjer se lahko naučite pisati učinkovite pozive.

Nato smo ChatGPT prosili, da "Napišite kodo SQL, da ustvarite bazo podatkov za podatke, zajete v skriptu PHP." Tukaj je nastala koda SQL:

In tukaj je tabela, ustvarjena z izvajanjem SQL:

Z vzpostavljeno bazo smo poskusili s prvo registracijo, ki je delovala brez napak.

2. Gradnja komponente prijave

Ko smo odstranili komponento za registracijo, smo prevzeli komponento za prijavo. Presenetljivo ga je bilo najlažje zgraditi kljub dodatni logiki upravljanja sej.

Tukaj je ustvarjena stran za prijavo. Ključni poudarek je, da uporablja iste barvne možnosti kot registracijska stran.

Po ustvarjanju datoteke "server.login.php" po navodilih ChatGPT in dodajanju ustvarjenega PHP skripta smo izvedli prvo uspešno prijavo brez kakršnih koli sprememb ali odpravljanja napak.

3. Gradnja komponente klepeta

Gradnja komponente klepeta je bila zadnji – in verjetno najtežji del – našega malega poskusa. Sprva smo preprosto prosili ChatGPT, naj napiše kodo za komponento klepeta. Ni treba posebej poudarjati, da je bil to gromozanski neuspeh. Za bolj zapletene komponente česar koli želite ustvariti, boste morali to razdeliti na manjše komponente in se jih lotiti eno za drugo.

ChatGPT smo prosili za predloge o razdelitvi komponente klepeta in predlagal je, da ustvarimo tri strani:

1. Chat.php
2. Send-messages.php
3. Fetch-messages.php

Ko ChatGPT predlaga ime datoteke, lahko uporaba drugega imena v vašem projektu nenamerno povzroči težave, saj se bo chatbot skliceval na isto ime v vsej kodi, ki jo ustvari projekt. Ugotovili smo na težji način. Ne delajte iste napake.

Ustvarjanje strani Chat.php

Za začetek smo ChatGPT dali podrobna navodila o tem, kako želimo videti vmesnik za klepet.

Po zagonu ustvarjene kode HTML smo imeli vmesnik za klepet brez polja za vnos sporočila. Da bi to popravili, smo preprosto pozvali ChatGPT, da "prepišite kodo, da bo vključevala polje za vnos sporočila in gumb za pošiljanje." Evo, kako je ustvarjena koda videti v brskalniku v drugem poskusu.

Kadarkoli ustvarjena koda ne daje želenih rezultatov ali izpusti pomembno komponento, preprosto pozovite ChatGPT, da ponovno napiše zadnjo kodo. Povejte mu, naj vključi komponento ali naredi tisto, kar ni bilo narejeno v začetni kodi. Tukaj so nekaj nasvetov o uporabi ChatGPT za programiranje.

Ustvarjanje strani "send-messages.php" in "Fetch-messages".

Zadovoljni z vmesnikom smo nadaljevali z izdelavo skripta za obvladovanje logike klepeta. Da bi lahko pošiljali in pridobivali sporočila iz baze podatkov, je ChatGPT pravilno poudaril, da bomo potrebovali tabelo "sporočila". Klepetalni robot smo prosili, naj ustvari SQL za tabelo s sporočili.

Po generiranju kode SQL smo od klepetalnega robota zahtevali, da ustvari skript PHP za obravnavo logike sporočanja.

ChatGPT je ustvaril skript za strani "send-messages.php" in "fetch-messages.php". Pri izvajanju obeh skriptov smo končno naleteli na prvo napako (ki je bila nenavadno zadovoljiva). Priti tako daleč v projekt brez odpravljanja napak v eni sami vrstici kode se je kljub relativni preprostosti zdelo preveč dobro, da bi bilo res.

Izkazalo se je, da je napako povzročil ChatGPT, ki je uvedel preverjanje neprijavljene spremenljivke seje ($_SESSION['user_id']) v naš skript. Sumimo, da je bilo to posledica precej dolgega premora pri projektu, zaradi česar je ChatGPT pozabil nekatere kontekste in imena spremenljivk, uporabljenih v projektu.

Ko uporabljate ChatGPT za ustvarjanje aplikacije, zagotovite, da uporabljate isto nit klepeta in poskusite dokončati povezane komponente čim prej. Uporaba nove niti klepeta ali daljši odmor lahko povzroči nedoslednosti. ChatGPT ponavadi pozabi nekatere podrobnosti trenutnega projekta (npr. barvno shemo), če med sejami kodiranja delate dolge premore.

Kljub temu smo odpravili napako in uvedli kodo. Registrirali smo se, prijavili in preizkusili funkcijo klepeta. Medtem ko smo lahko pošiljali sporočila od enega registriranega uporabnika do drugega, sta bili barva in razporeditev oblačkov sporočil nekoliko napačni. Aplikacije, ki je trajala eno uro in 23 minut, pa je ne bomo ocenjevali prestrogo.

ChatGPT: odličen pomočnik pri kodiranju

ChatGPT je očitno močan pomočnik pri kodiranju. To, da lahko klepetalni robot ustvari impresivno kodo iz preprostih in včasih ne tako jasnih navodil, je dokaz njegove sposobnosti kodiranja.

Seveda ima še vedno veliko pomanjkljivosti. Težava z omejenim kontekstnim oknom in njegovo sposobnostjo povezovanja logike iz več neodvisno zgrajenih komponent je velika težava. Vendar pa vam lahko chatbot pomaga hitro zgraditi dokaj zapletene spletne aplikacije, če se dobro poznate.