W naszej drodze do bycia Full Stack Developerem, backend to dopiero początek. Pora spojrzeć na prompty z innej perspektywy, tj. frontendu i tematów związanych z tworzeniem stron oraz aplikacji internetowych. Podobnie jak w przypadku poprzedniego wpisu, ChatGPT zostanie wykorzystany do pomocy w tematach takich jak tworzenie kodu, wyjaśnianie koncepcji, optymalizacja kodu i sprawdzanie go pod względem możliwych błędów czy tworzenie dokumentacji oraz scenariuszy testowych.

Poniżej lista wszystkich podpowiedzi wraz z odnośnikiem do danej sekcji:

• Wyjaśnienie
• Generowanie kodu
• Przegląd kodu
• Refaktoryzacja kodu
• Uzupełnianie kodu
• Konwersja kodu
• Wykrywanie błędów
• Dokumentacja
• Git oraz GitHub
• Testy i przypadki testowe

W poprzednim cyklu słowa Explain (wyjaśnij) używaliśmy do zrozumienia fenomenu książki. Teraz możemy skupić się na wyjaśnieniu działania algorytmu, który jest dla nas niejasny, fragmentu kodu czy zrozumieniu różnych zagadnień związanych z programowaniem.

Przykładowe prompty, które możemy wykorzystać:

Wyjaśnij pojęcie programowania obiektowego i jego zalety na bazie przykładowych fragmentów kodu do tworzenia stron internetowych

Wyjaśnij koncepcję programowania asynchronicznego w TypeScript i podaj przykłady z fragmentami kodu

Objaśnij proces integracji API z aplikacją React i wyjaśnij wygenerowany kod

Jakiś czas temu przygotowałem cykl dotyczący Angulara, gdzie ostatnim punktem była właśnie integracja z naszym API napisanym w .NET Core. Niebawem ruszamy z cyklem dotyczącym TypeScript - jest to nasz punkt wyjścia do kolejnego cyklu w którym ruszymy z Reactem. Wykorzystajmy zatem ostatni prompt i spójrzmy na poniższą odpowiedź:

Proces generowania kodu znamy doskonale z poprzednich wpisów. ChatGPT pomoże nam jako nasz osobisty asystent: wykona powtarzalne zadania, takie jak generowanie fragmentów kodu potrzebnych do zaimplementowania danej funkcjonalności.

W przypadku tej części wpisu musimy oczywiście wykorzystać odpowiednie prompty pisane z perspektywy frontendu. Spójrzcie na kilka przykładowych:

Wygeneruj fragment kodu, który może automatycznie utworzyć punkty końcowe API z podstawowymi operacjami CRUD (create, read, update, delete) dla danego modelu danych w języku {język programowania}

Napisz komponent w {biblioteka/framework}, który pozwala wyświetlić formularz z polami wejściowymi dla imienia, adresu email i wiadomości. Po kliknięciu przycisku ‘Wyślij’ dane formularza powinny zostać wysłane do serwera za pomocą żądania HTTP

Zaimplementuj funkcję w {język programowania} do wysyłania powiadomienia o danej akcji

Spójrzmy na poniższy przykład wygenerowany dla Reacta:

Code review jest dobrze znany każdemu z nas. Pozwala na zidentyfikowanie potencjalnych błędów przed mergem do głównego repozytorium a także na sprawdzenie nad czym pracujemy i jakie chcemy wdrożyć rozwiązanie. ChatGPT pozwoli nam zidentyfikować wszelkie luki bezpieczeństwa w naszym kodzie lub uczynić go bardziej zoptymalizowanym dając szczegółowe instrukcje dotyczące sugestii poprawek.

Poniżej przykładowe prompty, które możemy wykorzystać:

Przejrzyj poniższy kod napisany w {język programowania} i zasugeruj ulepszenia

Sprawdź czy w poniższym kodzie występują jakiekolwiek luki w zabezpieczeniach

Wszyscy kojarzmy SQL Injections. Jeżeli nie to zerknijcie do poniższego artykułu: C# - Zrozumieć SQL Injection

Ogólnie rzecz biorąc, wstrzykiwanie polega na tym, że atakujący próbuje przejąć dane wejściowe użytkownika. Używając określonych znaków lub ciągów znaków, atakujący może ominąć zabezpieczenia aplikacji i manipulować bazą danych lub uzyskać do niej dostęp. W naszym przypadku, tj. frontend, może dojść do próby przeprowadzenia ataku polegającego na wstrzyknięciu kodu JavaScript do serwera w celu przejęcia nad nim kontroli. Następnie przeglądarka lub środowisko wykonawcze aplikacji błędnie interpretuje ten złośliwy kod jako prawidłowy, ponieważ nie jest w stanie odróżnić obecnego kodu od kodu atakującego. Jest to tzw. Command Injection a my sprawdzimy czy ChatGPT poradzi sobie z rozpoznaniem tej podatności w poniższym kodzie:

Refaktoryzacja kodu to proces zmiany sposobu obecnej implementacji w celu poprawy jego czytelności czy wydajności, ale bez zmiany zachowania kodu, tj. logiki biznesowej. ChatGPT może oszczędzić nam trochę czasu poprzez zasugerowanie poprawek i wprowadzenie modyfikacji (pamiętajcie o polityce firmy dotyczącej udostępniania kodu).

Poniżej kilka przykładowych promptów, które możemy wykorzystać:

Dokonaj refaktoryzacji poniższego kodu napisanego w języku {język programowania} w celu zwiększenia reużywalności

Zoptymalizuj wydajności poniższego kodu przez refaktoryzację

Dostosuj poniższy kod komponentu napisanego w języku/bibliotece {język/biblioteka} w celu zapewnienia responsywności na wielu urządzeniach, tj. zarówno mobilnych jak i stacjonarnych

Spójrzmy na poniższą odpowiedź:

Uzupełnianie kodu czy pisanie brakujących funkcji to naprawdę duża pomoc ze strony ChatGPT, która po pierwsze, pozwala zaoszczędzić sporo czasu a po drugie, pisać kod wydajniej i dokładniej.

Spójrzmy na kilka przykładowych promptów:

Napisz fragment kodu sortujący liczby całkowite w porządku malejącym przy użyciu {język programowania}

Napisz fragment kodu analizujący plik CSV i pobierający z niego dane wykorzystując {język programowania}

Utwórz punkt końcowy RESTful API w {języku programowania}, który pobiera dane z bazy danych i zwraca je jako JSON.

Spójrzmy na poniższy przykład:

Jak już doskonale wiecie z poprzedniego wpisu, ChatGPT może nam pomóc w konwersji kodu z jednego języka programowania na inny. Umożliwia to nam pracę z preferowanym językiem i dostosowanie się do istniejącego kodu. Przykłady napiszemy oczywiście z perspektywy frontendu. Spójrzcie poniżej:

Przekonwertuj poniższy fragment kodu z {język programowania} na {język programowania}

Przetłumacz poniższy kod z {framework} na {framework}

Przekształć poniższy kod {język programowania} na {język programowania}

Spójrzmy na konwersję fragmentu kodu z Angular na React: I wszystko naprawdę dobrze wyjaśnione.

Aplikacje internetowe są szczególnie narażone na błędy, zwłaszcza, gdy piszemy w JavaScript, który nie ma etapu kompilacji. Zamiast tego interpreter w przeglądarce odczytuje kod JavaScript, interpretuje każdą linię i ją uruchamia. Efektem tego są błędy często widoczne dopiero w trakcie działania programu. Pewnym rozwiązaniem jest TypeScript i jego statyczna analiza typów w trakcie kompilacji (już niebawem nowy cykl na temat TypeScript). My w między czasie możemy wykorzystać ChatGPT i sprawdzić potencjalne błędy w kodzie JavaScript (lub oczywiście innych językach).

Spójrzmy na poniższe, przykładowe prompty:

Rozwiąż błąd w poniższym kodzie napisanym w {język programowania}, aby uzyskać oczekiwane dane wyjściowe zgodne z działaniem funkcji

Sprawdź poniższy kod napisany w {język programowania} i sprawdź przyczynę błędu: Null Reference Exception

Zidentyfikuj błąd w kodzie napisanym w {język programowania}, która uniemożliwia zmianę wielkości czcionki danego elementu

Spójrzmy na poniższy przykład:

Prowadzenie dokumentacji projektu jest istotną częścią pracy programistów. Dokumentacja pomaga w utrzymaniu, zrozumieniu i łatwej współpracy nad projektami z różnymi zespołami. ChatGPT może pomóc w generowaniu dokumentacji w różnych jej aspektach.

Spójrzmy na poniższe przykłady promptów:

Wygeneruj dokumentację dla biblioteki {nazwa biblioteki} a także dołącz przykłady i odniesienia do API

Dodaj komentarze do poniższego fragmentu kod, aby był łatwiejszy w zrozumieniu

Spójrzmy na poniższy przykład:

Git oraz GitHub to narzędzia, które są często używane w rozwoju oprogramowania do kontroli wersji i pracy zespołowej nad projektami. ChatGPT może pomóc w pracy z tymi narzędziami.

Sprawdźmy kilka popularnych poleceń:

Napisz polecenie git, aby wypchnąć istniejące repozytorium

Wyjaśnij następujące polecenie Git: {podaj polecenie}

Jak utworzyć nowe repozytorium w GitHub?

Spójrzmy na poniższy przykład:

ChatGPT może zostać wykorzystany do pisania przypadków testowych i dokumentacji testów a także do pisania testów jednostkowych. Może dostarczyć nam danych testowych do przygotowanych formularzy i sprawdzić czy wszystkie dane zostały poprawnie wysłane albo weryfikować inne scenariusze i sprawdzać czy zachowanie aplikacji jest zgodne z oczekiwaniami.

Sprawdźmy na kilka poniższych poleceń:

Wygeneruj przypadki testowe w celu sprawdzenia poprawności przygotowanego formularza rejestracyjnego

Wygeneruj przypadki testowe dla przygotowanej funkcji wyszukiwarki w celu sprawdzenia czy wskazane produkty są zwracane poprawnie

Przygotuj przypadki testowe w celu sprawdzenia czy dana aplikacja internetowa będzie wyświetlała się poprawnie w różnych przeglądarkach i różnych jej wersjach.

Spójrzmy na poniższą odpowiedź dla jednego z powyższych przypadków:

Bardzo ważnym i niezwykle pomocnym aspektem działania ChatGPT jest jego zdolność do wyjaśnienia danego zagadnienia. Po pierwsze, zwykle dostajemy jedno czy dwa zdania, które dają nam obraz działania danego mechanizmu, np. hook useState w React. Jeżeli dany temat nas interesuje, możemy iść dalej. Ten sposób odkrywania i zdobywania nowej wiedzy bardzo mi się podoba i przyznam szczerze, że coraz rzadziej sięgam do wyszukiwarek w celu poszukiwania informacji.