Hur man bygger en webbapp med ChatGPT

Ett av de största påståendena av hypen kring ChatGPT är att det kan vara ett effektivt programmeringsverktyg. Tanken går så här: du beskriver vad du vill på naturligt språk; chatboten genererar kod som gör just det. Men hur bra är egentligen ChatGPT på att göra detta?

Finns det något bättre sätt att ta reda på det än att testa det? Vi bad ChatGPT att bygga en enkel webbapp från grunden. Här är resultatet av vårt test och stegen du kan använda för att bygga en webbplats från grunden med ChatGPT.

Steg 1: Skapa ritningen för din webbapp

Precis som du skulle göra när du bygger en webbapp med vilket verktyg som helst, måste du lägga ut ritningen för vad du vill att din app ska se ut och de steg du behöver för att bygga den innan du låter ChatGPT köra show.

För vår första uppgift bad vi ChatGPT att utveckla en plan för en enkel chattapp. För att göra detta beskrev vi kraven för vår webbapp och bad sedan chatboten att detaljera en plan för att utveckla appen.

Efter att ha använt prompten ovan, här är resultatet vi fick:

Du måste ha insticksprogrammet "Visa mig" aktiverat på ditt ChatGPT-konto för att skapa ett flödesschema som vårt ovan. Du kan installera och använda ChatGPT-plugins på bara några få steg, även om du behöver ett premiumabonnemang.

Utan plugin får du en textbaserad ritning eller ett ASCII-art flödesschema. Det är fortfarande okej. Även utan plugin, bör ChatGPT fortfarande ge en tydlig ritning av appen som exemplet nedan.

Steg 2: Dela upp ritningen i mindre moduler

Nu när vi har lagt ut helheten bad vi ChatGPT om hjälp med att dela upp appen i mindre komponenter som vi kan utveckla separat och sedan integrera för att bilda den kompletta webbappen. ChatGPT föreslog att dela upp det i tre komponenter:

1. Registreringsmodul
2. Inloggningsmodul
3. Chattmodul

Vi hade andra idéer, men målet här är att låta ChatGPT slå ut.

1. Bygga registreringskomponenten

Vi hoppade direkt in i att bygga registreringskomponenten. Vi bad ChatGPT att dra fram en lämplig algoritm. Här ingrep vi genom att specificera att vi endast behövde användarens användarnamn, e-postadress och avatar för registrering. Här är uppmaningen:

Och här är resultatet:

Därefter uppmanade vi ChatGPT att bygga registreringskomponenten.

Även om vi inte inkluderade lösenordsfältet som en del av registreringsprocessen, gjorde ChatGPT rätt anrop genom att inkludera det i den genererade HTML-koden. Vi kopierade koden utan några ändringar, och så här ser den ut i en webbläsare.

Därefter uppmanade vi ChatGPT att generera PHP-registreringsskriptet. Till en början frågade vi "Skriv en PHP-kod för logiken på serversidan för att hantera formulärinlämningen." Även om det genererade skriptet fungerade bra, hade det många sårbarheter.

Det fanns ingen hashning av lösenord, ingen felhantering och var benägen till SQL-injektion – ChatGPT gjorde bara det absoluta minimum. Att fixa detta var relativt enkelt. Vi bad helt enkelt ChatGPT att "identifiera allt fel med koden du just genererade, och sedan använd de identifierade punkterna för att optimera koden." Med det var vårt PHP-registreringsskript redo att gå.

Ordalydelsen i din uppmaning spelar roll. Du måste vara väldigt tydlig och specifik med vad du behöver ChatGPT för att göra. När vi bara bad den att "fixa problemet med den här koden" fixade den inte det mesta av det vi hade hoppats att det skulle fixa. För mer vägledning om hur du skriver ChatGPT-meddelanden finns här några ställen där du kan lära dig hur man skriver effektiva uppmaningar.

Därefter bad vi ChatGPT att "Skriv en SQL-kod för att skapa en databas för data som fångas i PHP-skriptet."Här är den resulterande SQL-koden:

Och här är tabellen skapad genom att köra SQL:

Med databasen inställd testade vi vår första registrering och det fungerade utan några fel.

2. Bygga inloggningskomponenten

Med registreringskomponenten ur vägen tog vi på oss inloggningskomponenten. Överraskande nog var det det enklaste att bygga trots den extra logiken i sessionshantering.

Här är den genererade inloggningssidan. En viktig höjdpunkt är att den använder samma färgalternativ som registreringssidan.

Efter att ha skapat en "server.login.php"-fil enligt instruktionerna från ChatGPT och lagt till det genererade PHP-skriptet, gjorde vi vår första framgångsrika inloggning utan några ändringar eller felsökning.

3. Bygga chattkomponenten

Att bygga chattkomponenten var den sista – och förmodligen tuffaste delen – av vårt lilla experiment. Först bad vi helt enkelt ChatGPT att skriva ut koden för chattkomponenten. Det behöver inte sägas att det var ett kolossalt misslyckande. För mer komplexa komponenter av allt du vill skapa, måste du dela upp det i mindre komponenter och ta itu med dem en efter en.

Vi bad ChatGPT om förslag på att dela upp chattkomponenten, och det föreslog att vi skulle skapa tre sidor:

1. Chat.php
2. Skicka-meddelanden.php
3. Fetch-messages.php

När ChatGPT föreslår ett filnamn, kan användning av ett annat namn i ditt projekt oavsiktligt orsaka problem eftersom chatboten kommer att referera till samma namn i all kod den skapar i hela projekt. Vi fick reda på den hårda vägen. Gör inte samma misstag.

Skapar Chat.php-sidan

Till att börja med gav vi ChatGPT detaljerade instruktioner om hur vi ville att chattgränssnittet skulle se ut.

Efter att ha kört den genererade HTML-koden hade vi ett chattgränssnitt utan en meddelanderuta. För att fixa detta uppmanade vi helt enkelt ChatGPT att "skriv om koden för att inkludera en meddelanderuta och en skicka-knapp."Så här ser den genererade koden ut i en webbläsare vid den andra testversionen.

Närhelst genererad kod inte ger önskat resultat eller utelämnar en viktig komponent, be bara ChatGPT att skriva om den sista koden. Säg till den att inkludera komponenten eller göra vad som helst som inte gjordes i den ursprungliga koden. Här är några tips om hur man använder ChatGPT för programmering.

Skapar sidan "send-messages.php" och "Hämta-meddelanden".

Nöjda med gränssnittet fortsatte vi med att bygga skriptet för att hantera chattlogiken. För att kunna skicka och hämta meddelanden från databasen, betonade ChatGPT med rätta att vi kommer att behöva en "meddelandetabell". Vi bad chatboten att skapa en SQL för meddelandetabellen.

Efter att ha genererat en SQL-kod bad vi chatboten att generera ett PHP-skript för att hantera meddelandelogiken.

ChatGPT genererade skriptet för både "send-messages.php" och "fetch-messages.php"-sidorna. När vi körde båda skripten fick vi äntligen vårt allra första fel (vilket var konstigt tillfredsställande). Att komma så långt in i projektet utan att felsöka en enda kodrad verkade lite för bra för att vara sant, trots dess relativa enkelhet.

Det visar sig att felet orsakades av att ChatGPT införde en kontroll för en odeklarerad sessionsvariabel ($_SESSION['user_id']) i vårt manus. Vi misstänker att detta var ett resultat av att ha tagit en ganska lång paus från projektet vilket resulterade i att ChatGPT glömde några av sammanhangen och namnen på variablerna som användes i projektet.

När du använder ChatGPT för att bygga en app, se till att använda samma chattråd och försök att slutföra relaterade komponenter så snart som möjligt. Att använda en ny chattråd eller ta en lång paus kan skapa inkonsekvenser. ChatGPT tenderar att glömma vissa detaljer om det aktuella projektet (t.ex. färgschemat) om du tar långa pauser mellan kodningssessionerna.

Som sagt, vi fixade buggen och distribuerade koden. Vi registrerade oss, loggade in och testade chattfunktionen. Medan vi kunde skicka meddelanden från en registrerad användare till en annan, var färgen och arrangemanget på meddelandebubblorna lite fel. Men för en app som tog en timme och 23 minuter att slutföra kommer vi inte att bedöma den för hårt.

ChatGPT: En utmärkt kodningsassistent

ChatGPT är helt klart en kraftfull kodningsassistent. Att chatboten kan visa imponerande kod från enkla, och ibland inte så tydliga, instruktioner är ett bevis på dess kodningsförmåga.

Visst, den har fortfarande många brister. Problemet med ett begränsat sammanhangsfönster och dess förmåga att knyta samman logiken från flera oberoende byggda komponenter är ett stort problem. Chatboten kan dock hjälpa dig att snabbt bygga ganska komplexa webbappar om du vet hur du går.