Sådan bygger du en webapp med ChatGPT

En af de største påstande fra hypen omkring ChatGPT er, at det kan være et effektivt programmeringsværktøj. Ideen lyder som følger: du beskriver, hvad du vil i naturligt sprog; chatbotten genererer kode, der gør netop det. Men hvor god er ChatGPT egentlig til at gøre dette?

Hvilken bedre måde at finde ud af end at prøve det? Vi bad ChatGPT om at bygge en simpel webapp fra bunden. Her er resultatet af vores test og de trin, du kan bruge til at bygge et websted fra bunden ved hjælp af ChatGPT.

Trin 1: Generering af Blueprint til din webapp

Ligesom du ville gøre, når du bygger en webapp med et hvilket som helst værktøj, skal du lægge en plan for, hvad du vil have din app til at se ud, og de trin, du skal bruge for at bygge den, før du lader ChatGPT køre at vise.

Til vores første opgave bad vi ChatGPT om at udvikle en plan for en simpel chat-app. For at gøre dette beskrev vi kravene til vores webapp og bad derefter chatbotten om at detaljere en plan for udvikling af appen.

Efter at have brugt prompten ovenfor, her er resultatet, vi fik:

Du skal have "Vis mig"-pluginet aktiveret på din ChatGPT-konto for at generere et flowchart som vores ovenfor. Du kan installere og bruge ChatGPT-plugins med få trin, selvom du skal bruge et premium-abonnement.

Uden plugin'et får du et tekstbaseret plan eller et ASCII-art flowchart. Det er stadig okay. Selv uden plugin'et bør ChatGPT stadig give en klar plan for appen som eksemplet nedenfor.

Trin 2: Opdeling af Blueprint i mindre moduler

Nu hvor vi har lagt det store billede ud, bad vi ChatGPT om hjælp til at opdele appen i mindre komponenter, som vi kan udvikle separat og derefter integrere til at danne den komplette webapp. ChatGPT foreslog at dele det op i tre komponenter:

1. Registreringsmodul
2. Login modul
3. Chat modul

Vi havde andre ideer, men målet her er at lade ChatGPT tage fat.

1. Opbygning af registreringskomponenten

Vi gik direkte i gang med at bygge registreringskomponenten. Vi bad ChatGPT om at tegne en passende algoritme. Her greb vi ind ved at specificere, at vi kun havde brug for brugerens brugernavn, e-mail og avatar til registrering. Her er prompten:

Og her er resultatet:

Dernæst bad vi ChatGPT om at bygge registreringskomponenten.

Selvom vi ikke inkluderede adgangskodefeltet som en del af registreringsprocessen, lavede ChatGPT det rigtige opkald ved at inkludere det i den genererede HTML-kode. Vi kopierede koden uden ændringer, og sådan ser den ud i en browser.

Dernæst bad vi ChatGPT om at generere PHP-registreringsscriptet. Først spurgte vi med "Skriv en PHP-kode til logikken på serversiden til håndtering af formularindsendelsen." Selvom det genererede script fungerede fint, havde det mange sårbarheder.

Der var ingen hashing med adgangskoder, ingen fejlhåndtering og var tilbøjelig til SQL-injektion - ChatGPT gjorde kun det absolutte minimum. Det var relativt nemt at løse dette. Vi bad ganske enkelt ChatGPT om at "identificere alt galt med den kode, du lige har genereret, og derefter bruge de identificerede punkter til at optimere koden." Med det var vores PHP-registreringsscript klar til gå.

Ordlyden af ​​din prompt har betydning. Du skal være meget klar og specifik med, hvad du skal bruge ChatGPT til at gøre. Da vi blot bad den om at "løse problemet med denne kode", fik den ikke det meste af det, vi havde håbet, den ville løse. For mere vejledning om at skrive ChatGPT-prompter, her er nogle steder at lære, hvordan man skriver effektive prompter.

Dernæst bad vi ChatGPT om at "Skriv en SQL-kode for at oprette en database for de data, der er fanget i PHP-scriptet."Her er den resulterende SQL-kode:

Og her er tabellen oprettet ved at udføre SQL:

Med databasen sat op prøvede vi vores første registrering, og det fungerede uden fejl.

2. Opbygning af login-komponenten

Med registreringskomponenten ude af vejen, tog vi login-komponenten på. Overraskende nok var det den nemmeste at bygge på trods af den ekstra logik i sessionsstyring.

Her er den genererede login-side. Et vigtigt højdepunkt er, at det bruger de samme farveindstillinger som registreringssiden.

Efter at have oprettet en "server.login.php"-fil som instrueret af ChatGPT og tilføjet det genererede PHP-script, lavede vi vores første succesfulde login uden nogen ændringer eller fejlretning.

3. Opbygning af chatkomponenten

Opbygningen af ​​chat-komponenten var den sidste – og sandsynligvis sværeste del – af vores lille eksperiment. Først bad vi blot ChatGPT om at skrive koden til chat-komponenten. Det er overflødigt at sige, at det var en kolossal fiasko. For mere komplekse komponenter af noget, du vil oprette, skal du dele det op i mindre komponenter og tackle dem en efter en.

Vi bad ChatGPT om forslag til opdeling af chat-komponenten, og det foreslog, at vi oprettede tre sider:

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

Når ChatGPT foreslår et filnavn, kan brug af et andet navn i dit projekt utilsigtet forårsage problemer, da chatbotten vil referere til det samme navn i al den kode, den opretter i hele projekt. Vi fandt ud af det på den hårde måde. Gør ikke den samme fejl.

Oprettelse af Chat.php-siden

Til at starte med gav vi ChatGPT detaljerede instruktioner om, hvordan vi ønskede, at chatgrænsefladen skulle se ud.

Efter at have kørt den genererede HTML-kode, havde vi en chatgrænseflade uden en beskedindtastningsboks. For at rette op på dette bad vi blot ChatGPT om at "omskriv koden til at inkludere en beskedindtastningsboks og en send-knap."Sådan ser den genererede kode ud i en browser i den anden prøveversion.

Når den genererede kode ikke giver de ønskede resultater eller udelader en vigtig komponent, skal du blot bede ChatGPT om at omskrive den sidste kode. Bed den om at inkludere komponenten eller gøre hvad der ikke blev gjort i den oprindelige kode. Her er nogle tips til, hvordan man bruger ChatGPT til programmering.

Oprettelse af siden "send-messages.php" og "Fetch-messages".

Tilfredse med grænsefladen fortsatte vi med at bygge scriptet til at håndtere chatlogikken. For at kunne sende og hente beskeder fra databasen, fremhævede ChatGPT med rette, at vi har brug for en "meddelelses"-tabel. Vi bad chatbotten om at oprette en SQL til meddelelsestabellen.

Efter at have genereret en SQL-kode bad vi chatbotten om at generere et PHP-script til at håndtere beskedlogikken.

ChatGPT genererede scriptet til både "send-messages.php" og "fetch-messages.php" siderne. Da vi kørte begge scripts, fik vi endelig vores allerførste fejl (hvilket mærkeligt var tilfredsstillende). At komme så langt ind i projektet uden at fejlsøge en enkelt linje kode virkede lidt for godt til at være sandt, på trods af dets relative enkelhed.

Det viser sig, at fejlen var forårsaget af ChatGPT, der introducerede en check for en ikke-erklæret sessionsvariabel ($_SESSION['bruger_id']) i vores script. Vi formoder, at dette var et resultat af at have taget en ret lang pause fra projektet, hvilket resulterede i, at ChatGPT glemte nogle af sammenhængene og navnene på de variabler, der blev brugt i projektet.

Når du bruger ChatGPT til at bygge en app, skal du sørge for at bruge den samme chattråd og prøve at færdiggøre relaterede komponenter så hurtigt som muligt. Brug af en ny chattråd eller at tage en lang pause kan forårsage uoverensstemmelser. ChatGPT har en tendens til at glemme nogle detaljer om det aktuelle projekt (f.eks. farveskemaet), hvis du holder lange pauser mellem kodningssessioner.

Når det er sagt, fik vi rettet fejlen og implementerede koden. Vi registrerede os, loggede ind og prøvede chatfunktionen. Mens vi var i stand til at sende beskeder fra én registreret bruger til en anden, var farven og arrangementet af beskedboblerne lidt forkerte. For en app, der tog en time og 23 minutter at færdiggøre, vil vi dog ikke dømme den for hårdt.

ChatGPT: En fremragende kodningsassistent

ChatGPT er helt klart en kraftfuld kodningsassistent. At chatbotten kan vise imponerende kode fra enkle, og nogle gange ikke-så-klare, instruktioner er et vidnesbyrd om dens kodningsevner.

Selvfølgelig har den stadig mange fejl. Problemet med et begrænset kontekstvindue og dets evne til at binde sammen logikken fra flere uafhængigt byggede komponenter er et stort problem. Chatbotten kan dog hjælpe dig med at bygge ret komplekse webapps hurtigt, hvis du kender din vej rundt.