Hoe een web-app te bouwen met ChatGPT

Een van de grootste claims van de hype rond ChatGPT is dat het een effectieve programmeertool kan zijn. Het idee gaat als volgt: je beschrijft wat je wilt in natuurlijke taal; de chatbot genereert code die precies dat doet. Maar hoe goed is ChatGPT hier eigenlijk in?

Wat is een betere manier om erachter te komen dan het op de proef te stellen? We hebben ChatGPT gevraagd om vanaf nul een eenvoudige web-app te bouwen. Hier is het resultaat van onze test en de stappen die u kunt gebruiken om een ​​geheel nieuwe website te bouwen met ChatGPT.

Stap 1: de blauwdruk voor uw webapp genereren

Net zoals u zou doen bij het bouwen van een web-app met een willekeurige tool, moet u de blauwdruk opmaken van wat hoe u wilt dat uw app eruitziet en de stappen die u moet nemen om deze te bouwen voordat u ChatGPT de show.

Voor onze eerste taak hebben we ChatGPT gevraagd een blauwdruk te ontwikkelen voor een eenvoudige chat-app. Om dit te doen, hebben we de vereisten voor onze web-app beschreven en vervolgens de chatbot gevraagd om een ​​plan uit te werken voor het ontwikkelen van de app.

Na het gebruik van de bovenstaande prompt, is dit het resultaat dat we hebben gekregen:

U moet de "Show Me"-plug-in hebben ingeschakeld op uw ChatGPT-account om een ​​stroomschema zoals het onze hierboven te genereren. Jij kan installeer en gebruik ChatGPT-plug-ins in slechts een paar stappen, hoewel je een premium abonnement nodig hebt.

Zonder de plug-in krijgt u een op tekst gebaseerde blauwdruk of een ASCII-art-stroomdiagram. Dat is nog steeds oké. Zelfs zonder de plug-in zou ChatGPT nog steeds een duidelijke blauwdruk van de app moeten bieden, zoals in het onderstaande voorbeeld.

Stap 2: de blauwdruk opsplitsen in kleinere modules

Nu we het grote plaatje op een rijtje hebben, hebben we ChatGPT om hulp gevraagd bij het opsplitsen van de app in kleinere componenten die we afzonderlijk kunnen ontwikkelen en vervolgens kunnen integreren om de complete webapp te vormen. ChatGPT stelde voor het op te splitsen in drie componenten:

1. Registratiemodule
2. Inlogmodule
3. Chat-module

We hadden andere ideeën, maar het doel hier is om ChatGPT de touwtjes in handen te laten nemen.

1. De registratiecomponent bouwen

We zijn meteen begonnen met het bouwen van de registratiecomponent. We hebben ChatGPT gevraagd om een ​​passend algoritme uit te werken. Hier kwamen we tussenbeide door te specificeren dat we alleen de gebruikersnaam, e-mail en avatar van de gebruiker nodig hadden voor registratie. Dit is de prompt:

En hier is het resultaat:

Vervolgens hebben we ChatGPT gevraagd om de registratiecomponent te bouwen.

Hoewel we het wachtwoordveld niet hebben opgenomen als onderdeel van het registratieproces, heeft ChatGPT de juiste keuze gemaakt door het op te nemen in de gegenereerde HTML-code. We hebben de code gekopieerd zonder enige aanpassingen, en zo ziet het eruit in een browser.

Vervolgens vroegen we ChatGPT om het PHP-registratiescript te genereren. In eerste instantie vroegen we met "Schrijf een PHP-code voor de server-side logica voor het afhandelen van de formulierverzending." Hoewel het gegenereerde script prima werkte, bevatte het veel kwetsbaarheden.

Er was geen wachtwoordhashing, geen foutafhandeling en was gevoelig voor SQL-injectie - ChatGPT deed alleen het absolute minimum. Dit oplossen was relatief eenvoudig. We hebben ChatGPT simpelweg gevraagd om "alles te identificeren wat er mis is met de code die je zojuist hebt gegenereerd, en dan gebruik de geïdentificeerde punten om de code te optimaliseren." Daarmee was ons PHP-registratiescript klaar om gaan.

De formulering van uw prompt is van belang. U moet heel duidelijk en specifiek zijn met wat u ChatGPT nodig heeft. Toen we het gewoon vroegen om "het probleem met deze code op te lossen", loste het niet het meeste op van wat we hadden gehoopt. Voor meer hulp bij het schrijven van ChatGPT-prompts, hier zijn sommige plaatsen om te leren hoe u effectieve prompts schrijft.

Vervolgens hebben we ChatGPT gevraagd om "Schrijf een SQL-code om een ​​database te maken voor de gegevens die zijn vastgelegd in het PHP-script." Hier is de resulterende SQL-code:

En hier is de tabel die is gemaakt door de SQL uit te voeren:

Met de database opgezet, probeerden we onze eerste registratie en het werkte zonder fouten.

2. De inlogcomponent bouwen

Met de registratiecomponent uit de weg, namen we de Login-component over. Verrassend genoeg was het het gemakkelijkst om te bouwen, ondanks de extra logica van sessiebeheer.

Hier is de gegenereerde inlogpagina. Een belangrijk hoogtepunt is dat het dezelfde kleuropties gebruikt als de registratiepagina.

Nadat we een "server.login.php"-bestand hadden gemaakt volgens de instructies van ChatGPT en het gegenereerde PHP-script hadden toegevoegd, maakten we onze eerste succesvolle login zonder enige aanpassingen of foutopsporing.

3. De chatcomponent bouwen

Het bouwen van de chatcomponent was het laatste - en waarschijnlijk het moeilijkste - van ons kleine experiment. In eerste instantie vroegen we ChatGPT gewoon om de code voor de chatcomponent uit te schrijven. Onnodig te zeggen dat het een enorme mislukking was. Voor complexere componenten van alles wat je wilt maken, moet je het opsplitsen in kleinere componenten en ze een voor een aanpakken.

We vroegen ChatGPT om suggesties voor het opsplitsen van de chatcomponent, en het stelde voor om drie pagina's te maken:

1. Chat.php
2. Stuur-berichten.php
3. Fetch-berichten.php

Wanneer ChatGPT een bestandsnaam voorstelt, kan het gebruik van een andere naam in uw project onbedoeld leiden tot problemen omdat de chatbot naar dezelfde naam zal verwijzen in alle code die hij gedurende het hele proces aanmaakt projecteren. We kwamen er op de harde manier achter. Maak niet dezelfde fout.

De Chat.php-pagina maken

Om te beginnen hebben we ChatGPT gedetailleerde instructies gegeven over hoe we wilden dat de chatinterface eruit zou zien.

Nadat we de gegenereerde HTML-code hadden uitgevoerd, hadden we een chatinterface zonder een invoervak ​​voor berichten. Om dit op te lossen, hebben we ChatGPT gewoon gevraagd om "herschrijf de code om een ​​berichtinvoervak ​​en een verzendknop op te nemen." Zo ziet de gegenereerde code eruit in een browser tijdens de tweede proefperiode.

Wanneer de gegenereerde code niet de gewenste resultaten geeft of een belangrijk onderdeel weglaat, vraagt ​​u ChatGPT gewoon om de laatste code te herschrijven. Vertel het om het onderdeel op te nemen of te doen wat niet in de oorspronkelijke code is gedaan. Hier zijn enkele tips voor het gebruik van ChatGPT voor programmeren.

De pagina "send-messages.php" en "Fetch-messages" maken

Tevreden met de interface, gingen we verder met het bouwen van het script om de chatlogica te verwerken. Om berichten uit de database te kunnen verzenden en ophalen, benadrukte ChatGPT terecht dat we een "berichten"-tabel nodig hebben. We hebben de chatbot gevraagd om een ​​SQL te maken voor de berichtentabel.

Nadat we een SQL-code hadden gegenereerd, vroegen we de chatbot om een ​​PHP-script te genereren om de berichtenlogica te verwerken.

ChatGPT genereerde het script voor zowel de "send-messages.php" als de "fetch-messages.php" pagina's. Bij het uitvoeren van beide scripts hadden we eindelijk onze allereerste fout (wat vreemd genoeg bevredigend was). Zo ver in het project komen zonder een enkele regel code te debuggen, leek een beetje te mooi om waar te zijn, ondanks de relatieve eenvoud.

Het blijkt dat de fout werd veroorzaakt doordat ChatGPT een controle introduceerde voor een niet-gedeclareerde sessievariabele ($_SESSION['user_id']) in ons script. We vermoeden dat dit het resultaat was van een vrij lange pauze van het project, waardoor ChatGPT enkele contexten en namen van de variabelen die in het project werden gebruikt, vergat.

Wanneer u ChatGPT gebruikt om een ​​app te bouwen, zorg er dan voor dat u dezelfde chatthread gebruikt en probeer gerelateerde onderdelen zo snel mogelijk af te ronden. Het gebruik van een nieuwe chatthread of het nemen van een lange pauze kan leiden tot inconsistenties. ChatGPT heeft de neiging om enkele details van het huidige project te vergeten (bijvoorbeeld het kleurenschema) als u lange pauzes neemt tussen codeersessies.

Dat gezegd hebbende, we hebben de bug verholpen en de code geïmplementeerd. We hebben ons geregistreerd, ingelogd en de chatfunctie geprobeerd. Hoewel we berichten van de ene geregistreerde gebruiker naar de andere konden sturen, waren de kleur en opstelling van de berichtballonnen een beetje afwijkend. Voor een app die een uur en 23 minuten nodig had om te voltooien, zullen we deze echter niet al te hard beoordelen.

ChatGPT: een uitstekende codeerassistent

ChatGPT is duidelijk een krachtige codeerassistent. Dat de chatbot indrukwekkende code kan maken uit eenvoudige en soms niet zo duidelijke instructies, getuigt van zijn codeervaardigheid.

Natuurlijk heeft het nog steeds veel gebreken. Het probleem met een beperkt contextvenster en de mogelijkheid om de logica van meerdere onafhankelijk gebouwde componenten aan elkaar te koppelen, is een groot probleem. De chatbot kan u echter helpen om snel vrij complexe web-apps te bouwen als u de weg kent.