Kilka promptów i własna aplikacja w przeglądarce. Ćwiczenie, dzięki któremu poczujesz moc

Jeszcze niedawno wydawało mi się, że tworzenie własnych aplikacji to świat zarezerwowany dla programistów. A mimo to dziś regularnie tworzę własne narzędzia z pomocą AI.

Największy efekt „wow” pojawił się jednak dużo wcześniej niż budowa mojego systemu do obsługi firmy. Ty też możesz tego doświadczyć.

Możesz się zdziwić, ale wystarczy dosłownie kilka minut. Tylko tyle, by wpisać proste polecenie do sztucznej inteligencji (np. ChatGPT), a potem zobaczyć w przeglądarce działającą aplikację.

Bez instalowania programów, bez znajomości programowania. Bez pisania kodu. Po prostu trzeba opisać, czego potrzebujesz. Jeśli jeszcze nigdy nie próbowałeś tworzyć własnych narzędzi z pomocą AI, zrób poniższe ćwiczenie. Naprawdę warto.

Ćwiczenie: stwórz własną mini-aplikację

Krok 1 — otwórz ChatGPT

Wejdź na stronę ChatGPT (albo innej swojej ulubionej sztucznej inteligencji) i zaloguj się na swoje konto. Na początek spokojnie wystarczy darmowa wersja. Przykład pokażę na bazie ChatGPT.

Krok 2 — wpisz prosty prompt

Wymyśl opis prostej aplikacji, na której Ci zależy. Dodaj, że ma być uruchamiana w przeglądarce internetowej. A dla uproszczenia najlepiej skopiuj poniższy tekst i wklej go do ChatGPT:

„Przygotuj mi prostą aplikację do uruchomienia w przeglądarce, dzięki której będę mógł policzyć mój zysk ze sprzedaży książki. Jestem właścicielem księgarni internetowej i sprzedaję różne książki. Chcę, by w kalkulatorze można było wpisać tytuł książki, osobno cenę sprzedaży netto, osobno cenę zakupu. Niech wyjdzie zysk jednostkowy na jedną książkę. Pod spodem niech będzie pole do wpisania różnych kosztów zbiorczych (np. marketing, dystrybucja, pracownicy), jak również miejsce do wpisania liczby sprzedanych książek. Potem niech będzie wyliczany zysk ze sprzedaży tych wszystkich książek, przy uwzględnieniu kosztów. Aplikacja niech będzie kolorowa z nazwą mojej firmy „ZrobProgram”. Niech będzie widoczna od razu w tym czacie jako podgląd, bym w jak najprostszy sposób mógł ją zobaczyć.”

Tak — to naprawdę może być aż tak proste.

Krok 3 — obserwuj, co zacznie robić AI

Po chwili zobaczysz coś, co na pierwszy rzut oka może Cię przerazić: ChatGPT zacznie generować kod. Pojawią się długie linijki kompletnie niezrozumiałych znaków. Mogą wyglądać mniej więcej tak:

Ale uwaga: nie przejmuj się tym, że nic z tego nie rozumiesz. Ja też na początku nie rozumiałem praktycznie nic. Co więcej – nawet teraz, po stworzeniu całego systemu do obsługi mojej firmy, ten kod ciągle mnie nie interesuje i w ogóle nie muszę go rozumieć.

To właśnie AI zajmuje się kodem. Ty opisujesz tylko efekt, który chcesz osiągnąć.

W praktyce ChatGPT tworzy kod strony internetowej — najczęściej HTML, CSS czy JavaScript. To właśnie dzięki temu aplikacja może działać bezpośrednio w przeglądarce internetowej. Nie musisz jednak znać tych technologii, by zacząć tworzyć własne narzędzia. Na tę chwilę ta wiedza w ogóle może nie być dla Ciebie istotna.

Krok 4 — zobacz gotową aplikację w okienku po prawej stronie

Po krótkiej chwili generowanie kodu zakończy się i powinieneś zobaczyć działającą aplikację bezpośrednio w oknie rozmowy, z reguły z prawej strony. Jeśli jej nie widzisz, poszukaj przycisku „podgląd” obok kodu albo linku do kliknięcia, który pokaże Ci ChatGPT w rozmowie z Tobą.

Tadam! Tak wygląda moja aplikacja w okienku po prawej stronie ChatGPT:

Co najważniejsze, ona działa! Możesz wpisywać realne wartości, a aplikacja wyświetli prawdziwe wyliczenia.

Uwaga - nie przejmuj się, jeśli nie zobaczysz działającej aplikacji nawet po klikaniu na „podgląd” lub wyświetlany link. Czasami może się zdarzyć, że ChatGPT pogubi się i trzeba będzie go skorygować. Gdy ostatnio robiłem to ćwiczenie, tak właśnie się stało. Wtedy wystarczy w kolejnej wiadomości do ChatGPT napisać, że podgląd u Ciebie nie działa. Sztuczna inteligencja wprowadzi poprawki i wszystko powinno funkcjonować bez zarzutu.

Krok 5 — zobacz gotową aplikację na całym ekranie

Chcesz zobaczyć swoją aplikację na całym ekranie? Możesz się spytać ChatGPT, jak to zrobić albo po prostu:

• w prawym okienku z aplikacją, na górze, kliknij na ikonkę strzałki w górę „udostępnij”

• następnie wybierz „kopiuj link” - link do Twojej aplikacji zostanie zapisany do schowka w Twoim komputerze

• otwórz nową stronę internetową w Twojej przeglądarce i w okienku z adresem wklej tam link. Zobaczysz wtedy podgląd aplikacji w całym oknie. U mnie tak to wyglądało:
  

U Ciebie pewnie będzie to trochę inaczej wyglądać. W porządku! Baw się aplikacją. To Twoje prawdziwe dzieło, gratulacje!

Co zrobić dalej?

Pamiętam chwilę, w której w ten sposób samodzielnie zrobiłem swoją pierwszą aplikację. Nie wierzyłem, że jest to możliwe. Byłem pod ogromnym wrażeniem.

Bo nagle okazało się, że osoba bez doświadczenia informatycznego może w kilka minut stworzyć własne narzędzie działające w przeglądarce.

Najlepsze jest jednak to, że na jednej wersji aplikacji wszystko się nie kończy. Możesz dalej pisać kolejne prompty i rozwijać narzędzie. Na przykład:

• zmienić kolory,

• dodać nowe pola,

• poprawić wygląd,

• dodać kolejne funkcje,

• zmienić sposób liczenia,

• uprościć interfejs.

W praktyce wygląda to trochę jak rozmowa z programistą — z tą różnicą, że odpowiada Ci AI.

Możesz też zapisać swoją aplikację na komputer, by potem w prosty sposób otwierać ją z pliku – może to być banalnie proste, ale też nieco bardziej skomplikowane. Wyjaśnię to w innym artykule.

Ważne: pierwsza wersja nie zawsze będzie idealna

To jest całkowicie normalne. Czasem coś się źle policzy, aplikacja nie będzie wyglądać tak, jak chcesz albo AI źle zrozumie część polecenia.

To nie oznacza, że „AI się nie nadaje”. Najczęściej wystarczy doprecyzować polecenie dla AI (prompt) albo napisać kolejną wiadomość. Im lepszy prompt, tym lepszy efekt. O najlepszych promptach również przygotuję odrębny artykuł.

Uwaga — najprawdopodobniej u Ciebie efekt będzie nieco inny

To bardzo ciekawe, ale jeśli wykonasz dokładnie to samo ćwiczenie za kilka minut, możesz otrzymać nieco inną aplikację. No i założę się, że Twoja aplikacja będzie wyglądać nieco inaczej niż moja.

AI nie działa według jednego sztywnego schematu. Nawet przy identycznych promptach potrafi tworzyć różne wersje wyglądu czy sposobu działania aplikacji. Różnić się może praktycznie wszystko.

Co więcej — ten sam prompt może dać inny efekt w ChatGPT, a inny w innych modelach AI, takich jak np. Claude czy Gemini. Ten temat również może być bardzo interesujący i podejrzewam, że opiszę go dokładniej w osobnym artykule na konkretnych przykładach.

To dopiero początek

Oczywiście taki kalkulator to bardzo prosty przykład. W ten sposób nie zbudujesz od razu ogromnego systemu komputerowego. Ale to ćwiczenie pokazuje coś dużo ważniejszego: bariera wejścia do świata własnych rozwiązań informatycznych dramatycznie spadła. Dlatego polecam Ci jedno: nie analizuj tego godzinami.

Po prostu wykonaj powyższe ćwiczenie i zobacz efekt na własne oczy.

Bo chwila, w której po kilku promptach widzisz własną działającą aplikację, naprawdę potrafi zmienić sposób myślenia o technologii i własnych możliwościach.