Jak zbudować aplikację internetową za pomocą ChatGPT

Jednym z największych twierdzeń szumu wokół ChatGPT jest to, że może być skutecznym narzędziem programistycznym. Idea jest następująca: opisujesz to, czego chcesz, w języku naturalnym; chatbot generuje kod, który właśnie to robi. Ale jak dobry jest w tym ChatGPT?

Czy jest lepszy sposób, aby się o tym przekonać, niż poddanie się testowi? Poprosiliśmy ChatGPT o zbudowanie od podstaw prostej aplikacji internetowej. Oto wynik naszego testu i kroki, które możesz wykonać, aby zbudować stronę internetową od podstaw za pomocą ChatGPT.

Krok 1: Generowanie planu dla Twojej aplikacji internetowej

Podobnie jak w przypadku tworzenia aplikacji internetowej za pomocą dowolnego narzędzia, musisz opracować plan tego, co chcesz, aby Twoja aplikacja wyglądała, i kroki, które musisz wykonać, zanim pozwolisz ChatGPT uruchomić pokazywać.

W ramach naszego pierwszego zadania poprosiliśmy ChatGPT o opracowanie planu prostej aplikacji do czatu. W tym celu opisaliśmy wymagania dla naszej aplikacji internetowej, a następnie poprosiliśmy chatbota o szczegółowy plan rozwoju aplikacji.

Po skorzystaniu z powyższego monitu, oto wynik, który otrzymaliśmy:

Musisz mieć włączoną wtyczkę „Pokaż mi” na swoim koncie ChatGPT, aby wygenerować schemat blokowy podobny do naszego powyżej. Możesz zainstalować i używać wtyczek ChatGPT w zaledwie kilku krokach, chociaż będziesz potrzebować subskrypcji premium.

Bez wtyczki otrzymasz plan tekstowy lub schemat blokowy ASCII-art. To nadal jest w porządku. Nawet bez wtyczki ChatGPT powinien nadal zapewniać przejrzysty plan aplikacji, jak na poniższym przykładzie.

Krok 2: Podział planu na mniejsze moduły

Teraz, gdy mamy już ogólny obraz, poprosiliśmy ChatGPT o pomoc w podziale aplikacji na mniejsze komponenty, które możemy opracować osobno, a następnie zintegrować, tworząc kompletną aplikację internetową. ChatGPT zasugerował podzielenie go na trzy komponenty:

1. Moduł rejestracji
2. Moduł logowania
3. Moduł czatu

Mieliśmy inne pomysły, ale naszym celem jest pozwolenie ChatGPT na decydowanie.

1. Tworzenie komponentu rejestracji

Od razu przystąpiliśmy do tworzenia komponentu rejestracji. Poprosiliśmy ChatGPT o narysowanie odpowiedniego algorytmu. Tutaj interweniowaliśmy, określając, że do rejestracji potrzebujemy tylko nazwy użytkownika, adresu e-mail i awatara. Oto monit:

A oto wynik:

Następnie poprosiliśmy ChatGPT o zbudowanie komponentu rejestracji.

Chociaż nie uwzględniliśmy pola hasła w ramach procesu rejestracji, ChatGPT wykonał właściwą rozmowę, umieszczając je w wygenerowanym kodzie HTML. Skopiowaliśmy kod bez żadnych modyfikacji, a oto jak wygląda w przeglądarce.

Następnie poprosiliśmy ChatGPT o wygenerowanie skryptu rejestracyjnego PHP. Na początku poprosiliśmy o „Napisz kod PHP dla logiki po stronie serwera do obsługi przesyłania formularzy”. Chociaż wygenerowany skrypt działał dobrze, miał wiele luk.

Nie było mieszania haseł, obsługi błędów i był podatny na iniekcje SQL — ChatGPT wykonał tylko absolutne minimum. Naprawienie tego było stosunkowo łatwe. Po prostu poprosiliśmy ChatGPT, aby „zidentyfikował wszystko, co jest nie tak z właśnie wygenerowanym kodem, a następnie użyj zidentyfikowanych punktów do optymalizacji kodu.” Dzięki temu nasz skrypt rejestracyjny PHP był gotowy Iść.

Treść Twojego monitu ma znaczenie. Musisz bardzo jasno i konkretnie określić, do czego potrzebujesz ChatGPT. Kiedy po prostu poprosiliśmy go, aby „naprawił problem z tym kodem”, nie naprawił większości tego, co mieliśmy nadzieję naprawić. Więcej wskazówek dotyczących pisania monitów ChatGPT znajdziesz tutaj kilka miejsc, w których można dowiedzieć się, jak pisać skuteczne podpowiedzi.

Następnie poprosiliśmy ChatGPT o „Napisz kod SQL, aby utworzyć bazę danych dla danych przechwyconych w skrypcie PHP." Oto wynikowy kod SQL:

A oto tabela utworzona przez wykonanie SQL:

Po skonfigurowaniu bazy danych wypróbowaliśmy naszą pierwszą rejestrację i zadziałała bez żadnych błędów.

2. Tworzenie komponentu logowania

Po usunięciu komponentu rejestracji zajęliśmy się komponentem logowania. Co zaskakujące, pomimo dodatkowej logiki zarządzania sesją było to najłatwiejsze do zbudowania.

Oto wygenerowana strona logowania. Kluczową atrakcją jest to, że wykorzystuje te same opcje kolorów, co strona rejestracji.

Po utworzeniu pliku „server.login.php” zgodnie z instrukcją ChatGPT i dodaniu wygenerowanego skryptu PHP, dokonaliśmy pierwszego udanego logowania bez żadnych modyfikacji i debugowania.

3. Tworzenie komponentu czatu

Tworzenie komponentu czatu było ostatnią — i prawdopodobnie najtrudniejszą — częścią naszego małego eksperymentu. Na początku po prostu poprosiliśmy ChatGPT o napisanie kodu komponentu czatu. Nie trzeba dodawać, że była to kolosalna porażka. Aby uzyskać bardziej złożone komponenty wszystkiego, co chcesz stworzyć, musisz podzielić to na mniejsze komponenty i zająć się nimi jeden po drugim.

Poprosiliśmy ChatGPT o sugestie dotyczące podziału komponentu czatu i zasugerowaliśmy utworzenie trzech stron:

1. Czat.php
2. Wyślij-wiadomości.php
3. Pobierz wiadomości.php

Kiedy ChatGPT sugeruje nazwę pliku, użycie innej nazwy w twoim projekcie może nieumyślnie spowodować problemów, ponieważ chatbot będzie odwoływał się do tej samej nazwy w całym tworzonym przez siebie kodzie projekt. Dowiedzieliśmy się tego w bolesny sposób. Nie popełniaj tego samego błędu.

Tworzenie strony Chat.php

Na początek daliśmy ChatGPT szczegółowe instrukcje dotyczące wyglądu interfejsu czatu.

Po uruchomieniu wygenerowanego kodu HTML otrzymaliśmy interfejs czatu bez pola wprowadzania wiadomości. Aby to naprawić, po prostu poprosiliśmy ChatGPT o „przepisz kod, aby zawierał pole wprowadzania wiadomości i przycisk wysyłania.„ Oto jak wygenerowany kod wygląda w przeglądarce podczas drugiej wersji próbnej.

Ilekroć wygenerowany kod nie daje pożądanych wyników lub pomija ważny komponent, po prostu poproś ChatGPT o przepisanie ostatniego kodu. Powiedz mu, aby włączył komponent lub zrobił wszystko, czego nie zrobiono w początkowym kodzie. Tu są kilka wskazówek, jak używać ChatGPT do programowania.

Tworzenie stron „send-messages.php” i „Fetch-messages”.

Zadowoleni z interfejsu przystąpiliśmy do budowania skryptu obsługującego logikę czatu. Aby móc wysyłać i pobierać wiadomości z bazy danych, ChatGPT słusznie podkreślił, że będziemy potrzebować tabeli „wiadomości”. Poprosiliśmy chatbota o utworzenie kodu SQL dla tabeli wiadomości.

Po wygenerowaniu kodu SQL poprosiliśmy chatbota o wygenerowanie skryptu PHP do obsługi logiki przesyłania wiadomości.

ChatGPT wygenerował skrypt zarówno dla stron „send-messages.php”, jak i „fetch-messages.php”. Po uruchomieniu obu skryptów w końcu mieliśmy nasz pierwszy błąd (co było dziwnie satysfakcjonujące). Przejście tak daleko w projekcie bez debugowania ani jednego wiersza kodu wydawało się zbyt piękne, aby mogło być prawdziwe, pomimo jego względnej prostoty.

Okazuje się, że błąd został spowodowany przez ChatGPT, który wprowadził sprawdzanie niezadeklarowanej zmiennej sesji ($_SESSION['identyfikator_użytkownika']) do naszego skryptu. Podejrzewamy, że było to wynikiem dość długiej przerwy w projekcie, w wyniku której ChatGPT zapomniał niektórych kontekstów i nazw zmiennych używanych w projekcie.

Używając ChatGPT do tworzenia aplikacji, upewnij się, że korzystasz z tego samego wątku czatu i staraj się jak najszybciej ukończyć powiązane komponenty. Korzystanie z nowego wątku na czacie lub zrobienie długiej przerwy może wprowadzić niespójności. ChatGPT ma tendencję do zapominania niektórych szczegółów bieżącego projektu (np. schematu kolorów), jeśli robisz długie przerwy między sesjami kodowania.

To powiedziawszy, naprawiliśmy błąd i wdrożyliśmy kod. Zarejestrowaliśmy się, zalogowaliśmy i wypróbowaliśmy funkcję czatu. Chociaż mogliśmy wysyłać wiadomości od jednego zarejestrowanego użytkownika do drugiego, kolor i układ bąbelków wiadomości były nieco inne. Jednak w przypadku aplikacji, której ukończenie zajęło godzinę i 23 minuty, nie będziemy jej oceniać zbyt surowo.

ChatGPT: doskonały asystent kodowania

ChatGPT jest wyraźnie potężnym asystentem kodowania. To, że chatbot może wygenerować imponujący kod z prostych, a czasem nie tak jasnych instrukcji, jest świadectwem jego umiejętności kodowania.

Oczywiście, wciąż ma wiele wad. Problem z ograniczonym oknem kontekstowym i jego zdolnością do łączenia logiki z wielu niezależnie zbudowanych komponentów jest poważnym problemem. Jednak chatbot może pomóc w szybkim tworzeniu dość złożonych aplikacji internetowych, jeśli znasz się na tym.