Kuidas ChatGPT-ga veebirakendust luua

ChatGPT-ga seotud hüppe üks suurimaid väiteid on see, et see võib olla tõhus programmeerimistööriist. Idee on järgmine: kirjeldate loomulikus keeles, mida soovite; vestlusbot genereerib koodi, mis teeb just seda. Aga kui hea on ChatGPT tegelikult seda teha?

Mis oleks parem viis teada saada, kui see proovile panna? Palusime ChatGPT-l luua nullist lihtne veebirakendus. Siin on meie testi tulemus ja juhised, mille abil saate ChatGPT-d kasutades veebisaidi nullist üles ehitada.

1. samm: looge oma veebirakenduse jaoks plaan

Nii nagu teeksite veebirakenduse loomisel mis tahes tööriistaga, peate koostama kava, mida soovite, et teie rakendus näeks välja, ja sammud, mida peate selle loomiseks tegema, enne kui lasete ChatGPT-l käivitada näidata.

Esimese ülesande jaoks palusime ChatGPT-l välja töötada lihtsa vestlusrakenduse kavandi. Selleks kirjeldasime oma veebirakendusele esitatavaid nõudeid ja palusime seejärel vestlusrotil üksikasjalikult koostada rakenduse arendamise plaan.

Pärast ülaltoodud viipa kasutamist saime järgmise tulemuse:

Meile sarnase vooskeemi loomiseks peab teie ChatGPT kontol olema lubatud pistikprogramm "Näita mind". Sa saad installige ja kasutage ChatGPT pistikprogramme vaid mõne sammuga, kuigi vajate lisatasu tellimust.

Ilma pistikprogrammita saate tekstipõhise kavandi või ASCII-pildi vooskeemi. See on ikka okei. Isegi ilma pistikprogrammita peaks ChatGPT siiski pakkuma rakenduse selget kavandit, nagu allolevas näites.

2. samm: plaani jagamine väiksemateks mooduliteks

Nüüd, kui meil on suur pilt paika pandud, palusime ChatGPT-l abi rakenduse jagamisel väiksemateks komponentideks, mida saame eraldi arendada ja seejärel tervikliku veebirakenduse moodustamiseks integreerida. ChatGPT soovitas selle jagada kolmeks komponendiks:

1. Registreerimise moodul
2. Sisselogimismoodul
3. Vestlusmoodul

Meil oli teisi ideid, kuid siin on eesmärk lasta ChatGPT-l ellu kutsuda.

1. Registreerimiskomponendi loomine

Hüppasime kohe registreerimiskomponendi loomise juurde. Palusime ChatGPT-l sobiva algoritmi koostada. Siin sekkusime, täpsustades, et registreerimiseks vajame ainult kasutaja kasutajanime, e-posti aadressi ja avatari. Siin on viip:

Ja siin on tulemus:

Järgmisena palusime ChatGPT-l registreerimiskomponendi koostada.

Kuigi me paroolivälja registreerimisprotsessi osana ei lisanud, tegi ChatGPT õige kõne, lisades selle loodud HTML-koodi. Kopeerisime koodi ilma muudatusteta ja selline näeb see brauseris välja.

Järgmisena palusime ChatGPT-l luua PHP registreerimisskripti. Alguses küsisime: "Kirjutage vormi esitamise käsitlemiseks serveripoolse loogika jaoks PHP-kood." Kuigi loodud skript töötas hästi, oli sellel palju turvaauke.

Puudus paroolide räsimine, vigade käsitlemine ja SQL-i süstimine – ChatGPT tegi ainult miinimumi. Selle parandamine oli suhteliselt lihtne. Palusime lihtsalt ChatGPT-l tuvastada kõik, mis teie äsja loodud koodiga on valesti, ja seejärel kasutage koodi optimeerimiseks tuvastatud punkte." Sellega oli meie PHP registreerimisskript selleks valmis mine.

Teie viipe sõnastus on oluline. Peate olema väga selge ja konkreetne selles, mida peate ChatGPT-d tegema. Kui palusime tal lihtsalt "selle koodiga probleem lahendada", ei lahendanud see enamikku sellest, mida me lootsime. Lisateavet ChatGPT-viipade kirjutamise kohta leiate siit mõned kohad tõhusate viipade kirjutamise õppimiseks.

Järgmisena palusime ChatGPT-l "Kirjutage SQL-kood, et luua andmebaas PHP-skriptis salvestatud andmete jaoks."Siin on saadud SQL-kood:

Ja siin on SQL-i käivitamisel loodud tabel:

Kui andmebaas oli seadistatud, proovisime esimest registreerimist ja see toimis vigadeta.

2. Sisselogimiskomponendi loomine

Kuna registreerimiskomponent oli välja lülitatud, võtsime kasutusele Login komponendi. Üllataval kombel oli seda kõige lihtsam ehitada hoolimata seansihalduse lisaloogikast.

Siin on loodud sisselogimisleht. Peamine esiletõst on see, et see kasutab samu värvivalikuid kui registreerimislehel.

Pärast ChatGPT juhiste järgi faili "server.login.php" loomist ja loodud PHP skripti lisamist tegime oma esimese eduka sisselogimise ilma muudatuste ja silumiseta.

3. Vestluskomponendi loomine

Vestluskomponendi loomine oli meie väikese katse viimane ja ilmselt kõige raskem osa. Alguses palusime lihtsalt ChatGPT-l vestluskomponendi koodi välja kirjutada. Ütlematagi selge, et see oli kolossaalne ebaõnnestumine. Millegi keerukamate komponentide jaoks, mida soovite luua, peate need väiksemateks komponentideks jagama ja neid üksteise järel käsitlema.

Küsisime ChatGPT-lt soovitusi vestluskomponendi osadeks jagamiseks ja see soovitas meil luua kolm lehte:

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

Kui ChatGPT soovitab failinime, võib mõne muu nime kasutamine projektis kogemata põhjustada probleeme, kuna vestlusbot viitab samale nimele kogu koodis, mille ta loob projekt. Saime teada raskel teel. Ärge tehke sama viga.

Chat.php lehe loomine

Alustuseks andsime ChatGPT-le üksikasjalikud juhised selle kohta, kuidas soovisime vestlusliidese väljanägemist.

Pärast loodud HTML-koodi käivitamist oli meil vestlusliides ilma sõnumi sisestuskastita. Selle parandamiseks palusime ChatGPT-l lihtsalt "kirjutage kood ümber, et lisada sõnumi sisestuskast ja saatmisnupp." Siin on, kuidas genereeritud kood teisel prooviversioonil brauseris välja näeb.

Kui loodud kood ei anna soovitud tulemusi või jätab mõne olulise komponendi välja, paluge ChatGPT-l viimane kood ümber kirjutada. Öelge, et see sisaldaks komponenti või tehke seda, mida esialgses koodis ei tehtud. Siin on mõned näpunäited selle kohta, kuidas ChatGPT-d programmeerimiseks kasutada.

Lehtede "send-messages.php" ja "Fetch-messages" loomine

Olles liidesega rahul, jätkasime vestlusloogika käsitlemiseks skripti koostamist. Andmebaasist sõnumite saatmiseks ja toomiseks rõhutas ChatGPT õigesti, et vajame "sõnumite" tabelit. Palusime vestlusrotil luua sõnumitabeli jaoks SQL.

Pärast SQL-koodi genereerimist palusime vestlusrotil luua sõnumsideloogika käsitlemiseks PHP-skript.

ChatGPT genereeris skripti nii lehtede "send-messages.php" kui ka "fetch-messages.php" jaoks. Mõlema skripti käivitamisel ilmnes lõpuks esimene viga (mis oli veidralt rahuldust pakkuv). Projekti nii kaugele jõudmine ilma ühtegi koodirida silumata tundus oma suhtelisest lihtsusest hoolimata pisut liiga hea, et tõsi olla.

Selgub, et vea põhjustas ChatGPT, mis kontrollis deklareerimata seansimuutujat ($_SESSION['kasutaja_id']) meie skripti. Arvame, et selle põhjuseks oli projektis üsna pikk paus, mille tulemusena unustas ChatGPT mõned projektis kasutatud kontekstid ja muutujate nimed.

Kui kasutate rakenduse koostamiseks ChatGPT-d, kasutage kindlasti sama vestluslõime ja proovige seotud komponendid võimalikult kiiresti lõpule viia. Uue vestluslõime kasutamine või pika pausi tegemine võib põhjustada ebakõlasid. ChatGPT kipub unustama mõned praeguse projekti üksikasjad (nt värviskeemi), kui teete kodeerimisseansside vahel pikki pause.

See tähendab, et parandasime vea ja juurutasime koodi. Registreerusime, logisime sisse ja proovisime vestlusfunktsiooni. Kui meil oli võimalik saata sõnumeid ühelt registreeritud kasutajalt teisele, siis sõnumimullide värvus ja paigutus olid veidi viltu. Kuid rakenduse puhul, mille valmimiseks kulus tund ja 23 minutit, me ei hinda seda liiga karmilt.

ChatGPT: suurepärane kodeerimisassistent

ChatGPT on selgelt võimas kodeerimisassistent. See, et vestlusbot suudab lihtsatest ja mõnikord mitte nii selgetest juhistest välja tuua muljetavaldava koodi, annab tunnistust selle kodeerimisoskusest.

Muidugi on sellel veel palju vigu. Piiratud kontekstiakna ja selle võimega siduda kokku mitme iseseisvalt ehitatud komponendi loogika on suur probleem. Vestlusbot võib aga aidata teil kiiresti luua üsna keerulisi veebirakendusi, kui teate oma suunda.