Jak vytvořit webovou aplikaci pomocí ChatGPT

Jedním z největších tvrzení humbuku kolem ChatGPT je, že to může být efektivní programovací nástroj. Myšlenka je následující: popíšete, co chcete, v přirozeném jazyce; chatbot generuje kód, který dělá právě to. Ale jak dobrý je ChatGPT ve skutečnosti?

Jaký lepší způsob, jak to zjistit, než to otestovat? Požádali jsme ChatGPT, aby vytvořil jednoduchou webovou aplikaci od nuly. Zde je výsledek našeho testu a kroky, které můžete použít k vytvoření webu od nuly pomocí ChatGPT.

Krok 1: Vygenerování návrhu pro vaši webovou aplikaci

Stejně jako byste to udělali při vytváření webové aplikace pomocí jakéhokoli nástroje, musíte si rozvrhnout plán čeho chcete, aby vaše aplikace vypadala, a kroky, které budete potřebovat k jejímu vytvoření, než necháte ChatGPT spustit ukázat.

Pro náš první úkol jsme požádali ChatGPT, aby vytvořil plán pro jednoduchou chatovací aplikaci. Za tímto účelem jsme popsali požadavky na naši webovou aplikaci a poté požádali chatbota o podrobný plán vývoje aplikace.

Po použití výše uvedené výzvy máme výsledek:

Abyste mohli vygenerovat vývojový diagram, jako je ten náš výše, musíte mít na svém účtu ChatGPT povolen plugin „Show Me“. Můžeš nainstalovat a používat pluginy ChatGPT v několika krocích, i když budete potřebovat prémiové předplatné.

Bez pluginu získáte textový plán nebo vývojový diagram ASCII-art. To je ještě v pořádku. I bez pluginu by ChatGPT měl stále poskytovat jasný plán aplikace, jako je příklad níže.

Krok 2: Rozdělení plánu na menší moduly

Nyní, když máme celkový obrázek, požádali jsme ChatGPT o pomoc s rozdělením aplikace na menší součásti, které můžeme vyvinout samostatně a poté je integrovat do kompletní webové aplikace. ChatGPT navrhl rozdělit jej do tří složek:

1. Registrační modul
2. Přihlašovací modul
3. Modul chatu

Měli jsme jiné nápady, ale cílem je nechat ChatGPT, aby střílel.

1. Vytvoření komponenty registrace

Skočili jsme přímo do vytváření registrační komponenty. Požádali jsme ChatGPT, aby nakreslil vhodný algoritmus. Zde jsme zasáhli zadáním, že k registraci potřebujeme pouze uživatelské jméno uživatele, e-mail a avatar. Zde je výzva:

A tady je výsledek:

Dále jsme vyzvali ChatGPT, aby vytvořil registrační komponentu.

Ačkoli jsme do registračního procesu nezahrnuli pole pro heslo, ChatGPT provedl správné volání tím, že jej zahrnul do vygenerovaného HTML kódu. Kód jsme zkopírovali bez jakýchkoli úprav a takto vypadá v prohlížeči.

Dále jsme vyzvali ChatGPT, aby vygeneroval registrační skript PHP. Nejprve jsme vyzvali "Napište kód PHP pro logiku na straně serveru pro zpracování odeslání formuláře." Přestože vygenerovaný skript fungoval dobře, měl spoustu zranitelností.

Neexistovalo žádné hašování hesel, žádné zpracování chyb a byl náchylný k injektování SQL – ChatGPT dělal jen nezbytné minimum. Opravit to bylo relativně snadné. Jednoduše jsme požádali ChatGPT, aby „identifikoval vše špatné s kódem, který jste právě vygenerovali, a pak použijte identifikované body k optimalizaci kódu." S tím byl náš registrační skript PHP připraven jít.

Na znění vaší výzvy záleží. Musíte být velmi jasní a konkrétní v tom, co potřebujete, aby ChatGPT dělal. Když jsme jej jednoduše požádali, aby „opravil problém s tímto kódem“, nevyřešilo to většinu toho, co jsme doufali, že opraví. Další pokyny k psaní výzev ChatGPT naleznete zde na některých místech se dozvíte, jak psát účinné výzvy.

Dále jsme požádali ChatGPT, aby „Napište SQL kód pro vytvoření databáze pro data zachycená v PHP skriptu." Zde je výsledný kód SQL:

A zde je tabulka vytvořená spuštěním SQL:

S nastavenou databází jsme zkusili první registraci a fungovala bez chyb.

2. Vytvoření komponenty přihlášení

S registrační komponentou mimo cestu jsme převzali komponentu Login. Překvapivě to bylo nejjednodušší sestavit i přes další logiku správy relací.

Zde je vygenerovaná přihlašovací stránka. Hlavní předností je, že používá stejné barevné možnosti jako registrační stránka.

Po vytvoření souboru "server.login.php" podle pokynů ChatGPT a přidání vygenerovaného PHP skriptu jsme provedli první úspěšné přihlášení bez jakýchkoli úprav a ladění.

3. Vytvoření komponenty chatu

Vytvoření komponenty chatu byla poslední – a pravděpodobně nejtěžší část – našeho malého experimentu. Nejprve jsme jednoduše požádali ChatGPT, aby napsal kód pro komponentu chatu. Netřeba dodávat, že to bylo kolosální selhání. Pro složitější součásti čehokoli, co chcete vytvořit, budete muset rozdělit na menší součásti a řešit je jednu po druhé.

Požádali jsme ChatGPT o návrhy na rozdělení chatovací komponenty a navrhl, abychom vytvořili tři stránky:

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

Když ChatGPT navrhne název souboru, použití jiného názvu ve vašem projektu může neúmyslně způsobit problémy, protože chatbot bude odkazovat na stejné jméno v celém kódu, který vytvoří projekt. Zjistili jsme to těžce. Neudělejte stejnou chybu.

Vytvoření stránky Chat.php

Pro začátek jsme dali ChatGPT podrobné pokyny, jak chceme, aby rozhraní chatu vypadalo.

Po spuštění vygenerovaného HTML kódu jsme měli chatovací rozhraní bez pole pro vkládání zpráv. Abychom to napravili, jednoduše jsme vyzvali ChatGPT, aby "přepište kód tak, aby obsahoval pole pro zadání zprávy a tlačítko pro odeslání." Takto vypadá vygenerovaný kód v prohlížeči při druhé zkoušce.

Kdykoli vygenerovaný kód neposkytne požadované výsledky nebo vynechá důležitou součást, jednoduše požádejte ChatGPT, aby přepsal poslední kód. Řekněte mu, aby zahrnul komponentu nebo udělal cokoli, co nebylo provedeno v počátečním kódu. Tady jsou několik tipů, jak používat ChatGPT pro programování.

Vytvoření stránek "send-messages.php" a "Fetch-messages".

Spokojeni s rozhraním jsme přistoupili k sestavení skriptu pro zpracování logiky chatování. Abychom mohli odesílat a načítat zprávy z databáze, ChatGPT správně zdůraznil, že budeme potřebovat tabulku „zprávy“. Požádali jsme chatbota, aby vytvořil SQL pro tabulku zpráv.

Po vygenerování kódu SQL jsme chatbota požádali, aby vygeneroval PHP skript pro zpracování logiky zasílání zpráv.

ChatGPT vygeneroval skript pro stránky „send-messages.php“ a „fetch-messages.php“. Při spuštění obou skriptů jsme nakonec měli úplně první chybu (což bylo kupodivu uspokojivé). Dostat se tak daleko do projektu bez ladění jediného řádku kódu se zdálo být až příliš dobré na to, aby to byla pravda, navzdory jeho relativní jednoduchosti.

Ukázalo se, že chyba byla způsobena tím, že ChatGPT zavedl kontrolu nedeklarované proměnné relace ($_SESSION['user_id']) do našeho skriptu. Domníváme se, že to byl důsledek poměrně dlouhé přestávky v projektu, což vedlo k tomu, že ChatGPT zapomněl některé kontexty a názvy proměnných použitých v projektu.

Když používáte ChatGPT k sestavení aplikace, ujistěte se, že používáte stejné vlákno chatu a snažte se dokončit související komponenty co nejdříve. Použití nového vlákna chatu nebo dlouhá přestávka může způsobit nesrovnalosti. ChatGPT má tendenci zapomenout na některé detaily aktuálního projektu (např. barevné schéma), pokud mezi programovacími relacemi děláte dlouhé přestávky.

To znamená, že jsme chybu opravili a nasadili kód. Zaregistrovali jsme se, přihlásili a vyzkoušeli funkci chatu. Zatímco jsme mohli posílat zprávy od jednoho registrovaného uživatele druhému, barva a uspořádání bublin zpráv byly trochu mimo. Nicméně aplikaci, jejíž dokončení trvalo hodinu a 23 minut, to nebudeme posuzovat příliš přísně.

ChatGPT: Vynikající asistent kódování

ChatGPT je jednoznačně výkonný asistent kódování. To, že chatbot dokáže vytvořit působivý kód z jednoduchých a někdy ne tak jasných instrukcí, je důkazem jeho kódovací schopnosti.

Jasně, má to ještě spoustu chyb. Problém s omezeným kontextovým oknem a jeho schopností spojit logiku z více nezávisle sestavených komponent je hlavním problémem. Chatbot vám však může pomoci rychle vytvořit poměrně složité webové aplikace, pokud se v tom vyznáte.