Programowanie z AI: przykład aplikacji od briefu do prototypu

Programowanie z AI może pomóc zamienić pomysł w mały, sprawdzalny prototyp. W tym przykładzie aplikacji kalkulatora agendy warsztatu przejdziesz od briefu i kryteriów po prompt, kod, testowanie i ograniczenia. To demonstracja edukacyjna, nie gotowy produkt ani zapis rzeczywistej pracy z klientem.

Programowanie z AI na małym, sprawdzalnym przykładzie

Zamiast prosić o „zbudowanie aplikacji”, określ jedną czynność i prosty rezultat. W tym ćwiczeniu użytkownik wpisuje godzinę rozpoczęcia oraz długość kilku bloków warsztatowych, a prototyp wylicza ich godziny końca. Nie zapisuje danych i nie łączy się z żadnym serwerem.

To fikcyjny scenariusz do nauki. W zależności od używanego narzędzia AI otrzymasz inną propozycję kodu. Nie zakładaj, że poprawnie wyglądający interfejs jest gotowy do publikacji ani że wygenerowane programowanie automatycznie rozwiązuje kwestie bezpieczeństwa, dostępności i jakości.

Sztuczna inteligencja może pomóc programiście analizować wymagania, generować kod i proponować testy. Nie wie jednak automatycznie, jaka funkcjonalność jest potrzebna użytkownikowi ani jak aplikacja ma działać w jego środowisku. Decyzje o zakresie i kontroli pozostają po stronie człowieka.

Krok 1: opisz problem bez wybierania technologii

Zacznij od krótkiego briefu: kto używa prototypu, co wpisuje i jaki wynik ma zobaczyć. Dodaj kryteria akceptacji i jawne wyłączenia. Nie wybieraj frameworka ani biblioteki przed ustaleniem potrzeb; dla prostego, lokalnego ćwiczenia może wystarczyć pojedyncza strona HTML, CSS i JavaScript.

Brief jest wejściem do procesu tworzenia aplikacji, a nie opisem technologii. Zanim wybierzesz platformę lub narzędzia AI, ustal, dla kogo powstaje aplikacja internetowa i jak użytkownik wykona w niej jedno konkretne zadanie. Przy prostym prototypie nie potrzeba integracji, API ani backendu.

Brief do ćwiczenia

Użytkownik prowadzi warsztat i chce szybko rozpisać agendę.\nWpisuje godzinę startu oraz czas trwania kolejnych bloków w minutach.\nPrototyp pokazuje nazwę bloku, godzinę rozpoczęcia i zakończenia.\nPuste, ujemne lub nieliczbowe czasy powinny być odrzucone.\nNie zapisuj danych, nie dodawaj logowania, płatności ani integracji.
Jeśli obliczenie przechodzi przez północ, pokaż oznaczenie „+1 dzień”.

Brief jest przykładowy. Najpierw sprawdź, czy odpowiada rzeczywistej potrzebie użytkownika.

Krok 2: ustal kryteria akceptacji i przypadki brzegowe

Kryteria pomogą ocenić, czy AI stworzyło użyteczny prototyp. Uwzględnij przypadki, które łatwo pominąć: brak bloku, wartość zerowa, tekst zamiast liczby oraz przejście przez północ. Jeśli nie chcesz obsługiwać któregoś przypadku w pierwszej wersji, zapisz to jako ograniczenie zamiast udawać, że problem nie istnieje.

Programista może dodać scenariusze testowania dla wartości brzegowych i sprawdzić, czy prototyp odpowiada na potrzeby użytkownika. Lista kryteriów jest też wskazówką dla narzędzia AI: zamiast prosić o „inteligentną aplikację”, poproś o konkretne zachowanie.

Godzina startu jest wymagana i ma prawidłowy format.
Czas każdego bloku jest dodatnią liczbą minut.
Początek kolejnego bloku wynika z końca poprzedniego.
Nieprawidłowe dane otrzymują czytelny komunikat.
Użytkownik może dodać i usunąć blok.
Jeśli blok kończy się po północy, pokaż godzinę oraz oznaczenie kolejnego dnia.

Krok 3: poproś asystenta AI o plan i pytania

Podziel pracę na plan, minimalny prototyp oraz kontrolę. Poproś wybrane narzędzie AI o ujawnienie założeń i wskazanie brakujących decyzji, zanim wygeneruje kod. Jeśli plan rozbudowuje małą stronę o logowanie, bazę danych czy API, przywróć zakres do briefu.

Rozmawiaj z asystentem jak z pomocnikiem w nauce: poproś o wyjaśnienie każdej części i nie wklejaj danych ani sekretów. Generowanie kodu nie zastępuje zrozumienia, jak uruchomić pliki i sprawdzić działanie.

Możesz użyć ChatGPT do doprecyzowania briefu lub porównania wariantów, a następnie wybranego asystenta do pracy z plikami. Dostępne możliwości zależą od narzędzia i konfiguracji. W tym ćwiczeniu generatywna sztuczna inteligencja pomaga w pisaniu kodu, ale aplikacja sama nie korzysta z modeli AI, nie przetwarza języka naturalnego i nie potrzebuje zewnętrznej usługi.

Prompt na etap planowania

Pomóż mi przygotować mały, lokalny prototyp kalkulatora agendy warsztatu na podstawie briefu poniżej. Najpierw zadaj pytania, jeśli wymagania są niejednoznaczne, a potem przedstaw plan plików i zachowania. Nie pisz jeszcze kodu.\n\nWymagania: [wklej brief]\n\nNie dodawaj logowania, backendu, analityki, integracji ani zapisu danych. Zaproponuj kryteria akceptacji oraz przypadki brzegowe. Wyjaśnij prostym językiem wybór technologii.

Sprawdź plan i zdecyduj, czy prototyp ma być dla przeglądarki, telefonu czy innego środowiska.

Krok 4: zbuduj najmniejszą wersję

Po zaakceptowaniu planu poproś o prosty prototyp, który da się uruchomić i przetestować. Ustal strukturę plików, sposób walidacji i komunikaty dla użytkownika. Poproś o małe kroki oraz komentarze tylko tam, gdzie rzeczywiście pomagają zrozumieć kod.

Jeśli generujesz stronę, sprawdź semantyczne etykiety formularza, obsługę klawiatury, czytelność na małym ekranie i kontrast. Sztuczna inteligencja może zasugerować rozwiązanie, ale to ty porównujesz je z kryteriami.

Prompt na implementację prototypu

Na podstawie zatwierdzonego planu przygotuj minimalny prototyp w osobnym folderze. Użyj tylko wybranych, uzasadnionych plików. Dodaj walidację, komunikaty błędów i możliwość dodawania oraz usuwania bloku. Nie zapisuj danych i nie dodawaj usług zewnętrznych. Po kodzie wyjaśnij, jak uruchomić stronę i które wymagania nie są jeszcze spełnione.

Przed użyciem sprawdź każdą instrukcję uruchomienia i każdą zmianę w plikach.

Krok 5: samodzielnie sprawdź działanie

Uruchom prototyp lokalnie zgodnie z instrukcją, przeczytaj komunikaty terminala i przejdź przez scenariusze testowe. Nie polegaj wyłącznie na tym, że model AI twierdzi, iż wszystko działa. Sprawdź ręcznie poprawne dane, brakujące wartości, błędny format, dodawanie wierszy i usuwanie bloków.

Jeżeli generowane oprogramowanie zachowuje się niezgodnie z briefem, opisz jeden błąd na raz i dodaj oczekiwany wynik. Zapisz, co dokładnie zmieniło się w kodzie, po czym powtórz kontrolę. Mały prototyp powinien być możliwy do wyjaśnienia przez osobę, która go rozwija.

Nie traktuj ukończenia prototypu jako wdrożenia aplikacji. Zanim udostępnisz ją użytkownikom, zaplanuj osobny przegląd jakości kodu, bezpieczeństwa, dostępności, testów oraz hostingu. Sprawdź także, czy zastosowane narzędzia do tworzenia i ich komponenty mają właściwe licencje.

Wpisz trzy bloki o różnych długościach i sprawdź godziny końca.
Spróbuj wpisać tekst zamiast minut oraz wartość ujemną.
Użyj godziny startu bliskiej północy i sprawdź zachowanie.
Użyj godziny startu bliskiej północy i sprawdź, czy wynik poprawnie pokazuje „+1 dzień”.

Co AI może pominąć w takim prototypie?

Prototyp nie jest automatycznie gotowy do użycia przez klientów. Może nie obsługiwać różnych stref czasowych, przerw, dni, przejścia przez północ, ograniczeń dostępności lub zapisu. To przykładowa aplikacja bez trwałego przechowywania danych.

Przed publikacją potrzebujesz dodatkowego przeglądu kodu, bezpieczeństwa i dostępności. Zależności oraz licencje sprawdź osobno. Nie umieszczaj kluczy API w kodzie front-endu i nie zbieraj danych użytkowników, jeśli projekt nie ma zaplanowanej ochrony.

Jak rozbudowywać projekt bez utraty kontroli?

Dodawaj jedną funkcję na iterację. Najpierw sformułuj nowy cel, kryteria oraz przypadki testowe; potem poproś AI o plan i ograniczoną zmianę. Po każdej iteracji przejrzyj różnice w kodzie i sprawdź wcześniejsze zachowanie, żeby nowa funkcja nie zepsuła poprzedniej.

Zapisuj krótkie decyzje projektowe i ograniczenia. Współpraca z AI jest skuteczniejsza, gdy kontekst jest konkretny, ale nie zawiera danych poufnych. Jeśli nie potrafisz wytłumaczyć zmiany, zatrzymaj się i poproś o prostsze wyjaśnienie albo wróć do podstaw programowania.

Dla kogo to dobre pierwsze ćwiczenie?

Kalkulator agendy pozwala przećwiczyć planowanie, promptowanie, edycję kilku plików i ręczne testy bez kont użytkowników ani integracji z zewnętrznym systemem. Początkujący może zobaczyć cały cykl: od briefu do uruchomienia prototypu, jednocześnie ucząc się pojęć związanych z kodem.

Jeśli chcesz użyć AI do projektu firmowego, zacznij od rozmowy o celu i ograniczeniach, a nie od wygenerowania całej aplikacji. Dopasowanie narzędzia i zakresu do zespołu wymaga uwzględnienia jego wiedzy, danych i środowiska pracy.

Czy do takiego prototypu potrzebujesz AI w samej aplikacji?

Nie. W tym przykładzie AI wspiera proces tworzenia, ale gotowa strona działa lokalnie i nie wysyła danych do modeli. To rozróżnienie pomaga kontrolować integracje, koszty, prywatność i ryzyko. Funkcje oparte na sztucznej inteligencji, takie jak chatbot, analiza danych czy rekomendacje, są osobnymi wymaganiami i nie powinny pojawiać się bez konkretnego uzasadnienia.

Jeśli rozważasz platformy no-code lub gotowy kreator, porównaj je z prostym kodem pod kątem możliwości, eksportu, utrzymania i ograniczeń. Nie wybieraj technologii dlatego, że model wymienił ją jako pierwszą rekomendację.