Hoe een web-app te bouwen met ChatGPT

Hoe een web-app te bouwen met ChatGPT
Lezers zoals jij steunen MUO. Wanneer u een aankoop doet via links op onze site, kunnen we een aangesloten commissie verdienen. Lees verder.

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?





MAAK GEBRUIK VAN DE VIDEO VAN DE DAG SCROLL OM DOOR TE GAAN MET INHOUD

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.





gratis tv online geen aanmelding

Stap 1: de blauwdruk voor uw webapp genereren

Net zoals je zou doen bij het bouwen van een web-app met welke tool dan ook, moet je de blauwdruk opstellen van hoe je wilt dat je app eruitziet en de stappen die je nodig hebt om het te bouwen voordat ChatGPT de show laat lopen.





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.

  ChatGPT-prompt om blauwdruk voor web-app te ontwikkelen

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



  Stroomdiagram of blauwdruk van web-app ontwikkeld door chatgpt

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.

kan geen programma's installeren op Windows 10

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.





  op tekst gebaseerde uitsplitsing van de web-app door ChatGPT

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:

  Vraag voor het bouwen van de registratiecomponent

En hier is het resultaat:

hoe een .dat-bestand te lezen
  Algoritme voor gebruikersregistratie

Vervolgens hebben we ChatGPT gevraagd om de registratiecomponent te bouwen.

  prompt om de registratiecomponent te genereren

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.

  Registratiepagina gegenereerd door ChatGPT

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 wat mis is met de code die je zojuist hebt gegenereerd te identificeren en vervolgens de geïdentificeerde punten te gebruiken om de code te optimaliseren.' Daarmee was ons PHP-registratiescript klaar voor gebruik.