Zbuduj z AI swoją pierwszą przydatną aplikację

Krok 1: Opisz problem własnymi słowami

Zakupy robi prawie każdy, dlatego lista zakupów to idealny pierwszy projekt. Nie musisz znać się na programowaniu, żeby ocenić, czy lista zakupów działa: wpisujesz chleb, mleko i jajka, widzisz sumę i odhaczasz rzeczy, gdy je kupujesz. Z wyniku możesz naprawdę korzystać już w tym tygodniu.

Zanim otworzysz jakiekolwiek narzędzie AI, dokończ na kartce albo w notatce te trzy zdania. To najważniejsza umiejętność programistyczna w całej książce: zamiana życzenia w konkretne reguły.

1. Muszę zapisać… (na przykład: każdą pozycję, ile sztuk potrzebuję i cenę za sztukę).
2. Chcę, żeby program obliczył… (na przykład: cenę każdego wiersza i sumę za całe zakupy).
3. Będę wiedzieć, że program działa, gdy… (na przykład: dwie pozycje po 25 zł dają 50 zł, a odhaczenie pozycji nie zmienia sumy).

Krok 2: Zbuduj pierwszą małą wersję

Pierwsza wersja to jeden plik, który otwiera się w przeglądarce internetowej. Nie trzeba instalować żadnego środowiska programistycznego, nie potrzebujesz serwera ani logowania. Skopiuj poniższy prompt do swojego asystenta AI (Claude, ChatGPT lub podobnego) dokładnie w tej postaci.

Pomóż mi zbudować moją pierwszą prostą aplikację. Jestem zupełnie początkujący.

Utwórz listę zakupów w jednym pliku o nazwie zakupy.html, który otworzę w przeglądarce internetowej. Umieść wszystkie style i cały JavaScript w tym jednym pliku, bez zewnętrznych bibliotek.

Chcę wpisać nazwę pozycji, liczbę sztuk i cenę za jedną sztukę. Przycisk dodaje pozycję do listy. Pokaż cenę każdego wiersza, a na dole sumę za całe zakupy. Pozwól mi usunąć pozycję i oznaczyć ją jako kupioną. Oznaczenie pozycji jako kupionej nie może zmieniać sumy.

Odrzucaj pustą nazwę, nieprawidłowe liczby, ujemną cenę oraz liczbę sztuk równą zero lub mniejszą. W cenie akceptuj zarówno kropkę, jak i przecinek dziesiętny.

Najpierw krótko wyjaśnij plan. Potem napisz kompletny kod i dokładne kroki, jak zapisać i otworzyć plik. Na razie nie dodawaj żadnych innych funkcji.

1. Skopiuj kod. Użyj przycisku kopiowania w odpowiedzi AI, żeby mieć cały kod, od pierwszej do ostatniej linii.
2. Zapisz go jako zakupy.html. Otwórz zwykły edytor tekstu (Notepad w Windows, TextEdit w trybie zwykłego tekstu na Macu), wklej kod i zapisz go jako zakupy.html. Jako typ pliku wybierz „Wszystkie pliki”, a nie „Dokument tekstowy”.
3. Otwórz go w przeglądarce. Kliknij plik dwukrotnie albo przeciągnij go do okna przeglądarki. Powinieneś zobaczyć swoją listę zakupów, a nie stronę pełną kodu.

Krok 3: Sprawdź, czy to nie tylko ładny obrazek

Aplikacja, która dobrze wygląda, to jeszcze nie aplikacja, która działa. Przejdź przez tę tabelę wiersz po wierszu i porównaj to, co widzisz, z poprawnym wynikiem. To twój pierwszy prawdziwy test.

Jeśli któryś wiersz nie przejdzie, nie poprawiaj jeszcze kodu ręcznie. Powiedz AI dokładnie, który wiersz zawiódł, co wpisałeś i co zobaczyłeś zamiast tego, i poproś, żeby naprawiła tylko ten jeden problem.

Krok 4: Wprowadź jedną zmianę samodzielnie

Teraz wprowadź pierwszą zmianę, nie pozwalając, żeby AI napisała ją za ciebie. Zapytaj AI: „Gdzie w moim kodzie jest nagłówek aplikacji?” Wskaże ci linię, która wygląda mniej więcej tak: <h1>Lista zakupów</h1>.

1. Znajdź nagłówek. Otwórz zakupy.html w edytorze tekstu i znajdź linię, którą wskazała AI.
2. Zmień tekst. Zastąp słowa między <h1> a </h1> własnym tytułem, na przykład „Sobotnie zakupy”. Nie usuwaj nawiasów ostrych.
3. Zapisz i odśwież. Zapisz plik, wróć do przeglądarki i odśwież stronę. Powinien pojawić się twój nowy tytuł.

Potem poproś AI, żeby wyjaśniła twój własny plik w trzech częściach, używając twojego kodu jako przykładu. Zobaczysz, że każda aplikacja internetowa składa się z tych samych trzech warstw:

Krok 5: Naucz aplikację nowej umiejętności

Prawdziwe programy rosną małymi krokami. Dodaj jedną nową funkcję, a potem znowu testuj. Wyślij AI w tej samej rozmowie taki kolejny prompt:

Dodaj budżet do mojej listy zakupów. Pozwól mi wpisać kwotę, którą chcę wydać. Pokaż, ile zostało. Jeśli suma przekroczy budżet, pokaż wyraźne ostrzeżenie z kwotą, o jaką go przekroczyłem. Wszystko inne ma działać dokładnie tak jak dotąd. Pokaż mi cały zaktualizowany plik.

Właśnie zbudowałeś, uruchomiłeś, przetestowałeś i zmieniłeś prawdziwą aplikację. To jeszcze nie całe programowanie, ale to proces, który będziesz powtarzać w każdej kolejnej lekcji: jasno opisz, pozwól AI wygenerować, sprawdź z oczekiwanymi wynikami i zmieniaj jedną rzecz naraz.