Jak zbudować aplikację metodą vibe coding: od pomysłu do opublikowanej aplikacji

Aby zbudować aplikację metodą vibe coding, napisz jednostronicowy opis pierwszej wersji, przekaż go kreatorowi aplikacji AI jako pierwszy prompt, a potem rozwijaj aplikację małymi, przetestowanymi krokami: dane, logowanie, główny proces, dopracowanie, przegląd bezpieczeństwa i na końcu publikacja. Ten przewodnik prowadzi jeden przykładowy projekt, aplikację do rezerwacji zajęć dla małego studia jogi, przez wszystkie etapy, z promptami użytymi na każdym z nich.

Jeśli nigdy nie budowałeś czegoś w ten sposób, nasz samouczek vibe coding dla początkujących zaczyna od mniejszych kroków. Szerszy przegląd, niezwiązany wyłącznie z vibe codingiem, znajdziesz w jak zbudować aplikację z AI.

Projekt

Wyobraź sobie właścicielkę studia jogi, Sarę, która prowadzi osiem zajęć tygodniowo. Rezerwacje przychodzą przez WhatsApp; prowadzi papierową listę dla każdych zajęć i często przyjmuje za dużo osób. Chce, żeby:

• Kursanci widzieli tygodniowy plan i rezerwowali miejsce.
• Każde zajęcia miały limit miejsc.
• Była lista osób na każde zajęcia, którą może sprawdzić przy wejściu.
• Kursanci mogli anulować rezerwację najpóźniej dwie godziny przed zajęciami.

To cała pierwsza wersja. Bez płatności, karnetów, aplikacji w sklepie. Te rzeczy przyjdą później albo wcale.

Krok 1: Napisz jednostronicową specyfikację

Zanim otworzysz jakiekolwiek narzędzie, zapisz pierwszą wersję zwykłymi słowami. Dziesięć minut tutaj oszczędza godziny poprawek. Przydatny schemat:

• Kto korzysta: kursanci (rezerwują i anulują), Sara (zarządza zajęciami i widzi listy).
• Ekrany: plan tygodnia, szczegóły zajęć, moje rezerwacje, admin – zajęcia, admin – lista osób.
• Dane: zajęcia (nazwa, instruktor, czas rozpoczęcia, długość, liczba miejsc), rezerwacje (kursant, zajęcia, status), kursanci (imię, e-mail, telefon).
• Zasady: nie można zarezerwować pełnych zajęć; jedna rezerwacja na kursanta na zajęcia; anulowanie najpóźniej na dwie godziny przed; tylko Sara widzi strony admina.
• Nie w wersji 1: płatności, karnety, listy oczekujących, przypomnienia.

Lista „nie w wersji 1” jest najważniejsza. To ona pozwala doprowadzić budowę do końca. Jeśli chcesz pełniejszej specyfikacji, nasz przewodnik jak napisać dokument wymagań produktu z AI idzie dalej.

Krok 2: Wybierz narzędzie, które obsługuje cały cykl

Dla aplikacji z bazą danych, logowaniem i publicznym adresem URL wybierz kreator aplikacji AI, który uruchamia kod, podłącza bazę danych i publikuje aplikację, a nie asystenta czatowego, który przekazuje Ci pliki. Nasze porównanie narzędzi do vibe codingu wymienia opcje. Tutaj użyjemy Mythex, bo obejmuje każdy krok w jednym miejscu: czat, podgląd na żywo, prawdziwą bazę danych i magazyn plików oraz publikację jednym kliknięciem.

Krok 3: Pierwszy prompt

Zamień specyfikację w jeden akapit. Nie wklejaj od razu całego dokumentu ze wszystkimi szczegółami; podaj rdzeń, a resztę dodawaj w krokach.

Zbuduj aplikację do rezerwacji zajęć dla mojego studia jogi. Kursanci zakładają konto z imieniem i nazwiskiem, e-mailem i telefonem, widzą plan tego tygodnia i rezerwują miejsce na zajęciach. Każde zajęcia mają nazwę, instruktora, godzinę rozpoczęcia, długość i liczbę miejsc; pełne zajęcia pokazują „Brak miejsc” i nie da się ich zarezerwować. Kursanci widzą swoje rezerwacje i mogą je anulować najpóźniej na dwie godziny przed zajęciami. Jestem administratorem: mogę dodawać i edytować zajęcia oraz widzieć listę osób zapisanych na każde z nich. Spokojny, prosty projekt, który dobrze działa na telefonach.

Jeśli nie masz pewności, czy narzędzie zrozumiało zadanie, poproś najpierw o plan. W Mythex tryb Plan rozpisuje ekrany i dane przed napisaniem kodu, a Ty go zatwierdzasz.

Krok 4: Uruchom podstawową pętlę

Podstawowa pętla to jedyna rzecz, dla której aplikacja istnieje: kursant rezerwuje zajęcia, a Sara to widzi. Testuj tylko to:

1. Zarejestruj się jako kursant i zarezerwuj zajęcia.
2. Otwórz widok administratora. Czy rezerwacja tam jest?
3. Zarezerwuj te same zajęcia ponownie. System powinien odmówić.
4. Ustaw limit miejsc na 2, zarezerwuj zajęcia z dwóch kont kursantów i spróbuj trzeciej rezerwacji.

Na tym etapie zwykle wychodzą dwa problemy. Plan pokazuje godziny w strefie czasowej serwera, a nie studia. Sprawdzenie „Brak miejsc” działa tylko na stronie, więc szybkie podwójne kliknięcie tworzy dwie rezerwacje.

Pokazuj wszystkie godziny zajęć w strefie czasowej studia, [Asia/Dubai], niezależnie od ustawienia urządzenia odwiedzającego.

Sprawdzaj limit miejsc i duplikaty rezerwacji na serwerze w chwili tworzenia rezerwacji, a nie tylko na stronie. Jeśli dwa żądania przyjdą jednocześnie na ostatnie miejsce, powinno się udać tylko jedno.

Napraw podstawową pętlę, zanim dodasz cokolwiek innego. Wszystko inne od niej zależy.

Krok 5: Dodaj pozostałe zasady, po jednej w wiadomości

Teraz przejdź po zasadach ze specyfikacji po kolei:

Kursanci mogą anulować rezerwację najpóźniej na dwie godziny przed rozpoczęciem zajęć. Później ukryj przycisk anulowania i odrzuć anulowanie na serwerze z jasnym komunikatem.

Tylko moje konto może otwierać strony administratora. Sprawdź to na serwerze przy każdej akcji administracyjnej, a nie tylko przez ukrycie menu.

Po każdej zmianie przetestuj ją i przechodź dalej tylko wtedy, gdy działa. Jeśli zmiana coś zepsuje, przywróć ostatni dobry punkt kontrolny i spróbuj jaśniejszego polecenia, zamiast nakładać poprawki na poprawki.

Krok 6: Dopracuj to, co zauważą prawdziwi użytkownicy

Prawdziwi użytkownicy zauważają drobiazgi. Krótka lista dla aplikacji Sary:

• Puste stany: „Brak zajęć w tym tygodniu” zamiast pustej strony.
• Potwierdzenie: „Jesteś zapisany na Vinyasa, wtorek 18:00” po rezerwacji.
• Układ na telefonie: duże przyciski, plan czytelny na ekranie 375 px.
• Wolne miejsca: „Zostały 3 miejsca” na karcie zajęć, żeby kursanci rezerwowali szybciej.

Na karcie każdych zajęć pokaż liczbę wolnych miejsc, np. „Zostały 3 z 12”. Po rezerwacji pokaż potwierdzenie z nazwą zajęć, dniem i godziną oraz przycisk do moich rezerwacji.

Krok 7: Testuj jak obcy

Zanim ktokolwiek inny z tego skorzysta, poświęć pół godziny na próbę złamania aplikacji:

Możesz też poprosić AI o przejście przez przypadki brzegowe:

Wypisz dziesięć rzeczy, które prawdziwy kursant mógłby zrobić i które mogłyby zepsuć rezerwację lub anulowanie, przetestuj każdą i napraw to, co nie działa. Napisz, co zmieniłeś.

Krok 8: Przegląd bezpieczeństwa

Ta aplikacja przechowuje imiona, e-maile i numery telefonów, więc krótki przegląd bezpieczeństwa się opłaca. Główne pytania:

• Czy jeden kursant może zobaczyć rezerwacje lub dane kontaktowe innego?
• Czy jakiekolwiek klucze lub hasła znajdują się w kodzie uruchamianym w przeglądarce?
• Czy formularz rejestracji jest chroniony przed botami?
• Czy istnieje kopia zapasowa danych?

Nasza strona o tym, czy vibe coding jest bezpieczny wyjaśnia każdą kontrolę i podaje prompty do nich, a lista kontrolna bezpieczeństwa dla aplikacji zbudowanych z AI jest wersją rozszerzoną.

Krok 9: Publikacja

Kiedy podstawowa pętla, zasady i kontrole przechodzą testy, opublikuj. W Mythex to jedno kliknięcie: aplikacja dostaje publiczny adres URL, a baza danych i hosting są już na miejscu. W planie Pro możesz podłączyć własną domenę, na przykład book.sarasyoga.com; zobacz jak podłączyć własną domenę.

Zanim wyślesz link, sprawdź opublikowaną wersję jeszcze raz. Zarezerwuj zajęcia z telefonu. Wersja produkcyjna i podgląd powinny działać tak samo, ale to potwierdź.

Krok 10: Pierwsi użytkownicy i kolejna wersja

Najpierw wyślij link pięciu stałym kursantom, a nie wszystkim naraz. Poproś ich, żeby zarezerwowali przez niego kolejne zajęcia, i powiedz, co było niejasne. Potem napraw trzy rzeczy, które wskażą najczęściej.

Po kilku tygodniach prawdziwego użycia lista v2 dla takiej aplikacji zwykle pisze się sama: lista oczekujących na pełne zajęcia, przypomnienia e-mailem wieczorem przed zajęciami i karnety płatne online. Każda z tych rzeczy przechodzi ten sam proces: opisz ją w kilku zdaniach, wpisz prompt, przetestuj, opublikuj. Dodawanie płatności opisuje jak dodać płatności do aplikacji. Jak dotrzeć do ludzi, opisuje jak uruchomić aplikację i zdobyć pierwszych użytkowników.

Zamiana w aplikację na telefon

Wielu właścicieli studiów chce mieć ikonę na telefonach kursantów. W Mythex Pro opublikowaną aplikację można przekształcić w aplikację na Androida (plik, który wgrywasz do Google Play) oraz w aplikację na iPhone wysłaną do TestFlight z Twoim kluczem App Store Connect, bez Maca. Aplikacja na telefon otwiera opublikowaną aplikację webową, więc każda Twoja aktualizacja publikacji trafia też do niej.

Co z tego wynika

Sama budowa była krótką częścią. To, co sprawiło, że aplikacja była użyteczna, to lista „nie w wersji 1” w specyfikacji, testowanie podstawowej pętli przed wszystkim innym, zasady po stronie serwera dla limitu miejsc i dostępu oraz pięciu prawdziwych użytkowników przed pięćdziesiątką. Tak wygląda vibe coding, gdy aplikacja ma działać dla innych ludzi.

Gotowy, by spróbować z własnym projektem? Napisz jednostronicową specyfikację, a potem wklej pierwszy akapit do kreatora aplikacji AI. Jeśli chcesz zobaczyć więcej typów aplikacji i prompty, które za nimi stoją, przeczytaj nasze przykłady vibe codingu.

Pytania