Kako napraviti aplikaciju vibe codingom: od ideje do objavljene aplikacije

Za izradu aplikacije vibe codingom napišite opis prve verzije na jednoj stranici, dajte ga AI alatu za izradu kao svoj prvi upit, a zatim aplikaciju razvijajte u malim testiranim koracima: podaci, prijava, glavni tijek rada, dorada, sigurnosni pregled i na kraju objava. Ovaj vodič prati jedan primjer projekta, aplikaciju za rezervaciju termina na satovima joge za mali studio joge, kroz sve faze, uz upite korištene u svakom koraku.

Ako nikada niste ništa izradili na ovaj način, naš vodič za vibe coding za početnike kreće manje. Za širi pregled koji nije vezan uz vibe coding pogledajte kako napraviti aplikaciju pomoću AI-ja.

Projekt

Zamislite vlasnicu studija joge, Saru, koja vodi osam termina tjedno. Rezervacije stižu preko WhatsAppa; ona za svaki termin vodi papirnati popis i često prijavi previše ljudi. Želi:

• Da polaznici vide tjedni raspored i rezerviraju mjesto.
• Da svaki termin ima kapacitet.
• Popis po terminu koji može provjeriti na ulazu.
• Da polaznici mogu otkazati do dva sata prije.

To je cijela prva verzija. Bez plaćanja, bez članarina, bez trgovine aplikacija. To dolazi kasnije, ili nikada.

Korak 1: Napišite specifikaciju na jednoj stranici

Prije nego otvorite bilo koji alat, zapišite prvu verziju običnim riječima. Deset minuta ovdje štedi sate nepotrebnog dopisivanja. Koristan oblik:

• Tko koristi: polaznici (rezerviraju i otkazuju), Sara (upravlja terminima, vidi popise).
• Zasloni: raspored, detalji termina, moje rezervacije, administracija termina, administrativni popis polaznika.
• Podaci: termini (naziv, učitelj, početak, trajanje, kapacitet), rezervacije (polaznik, termin, status), polaznici (ime, e-pošta, telefon).
• Pravila: nema rezervacije za popunjen termin; jedna rezervacija po polazniku po terminu; otkazivanje do dva sata prije; administrativne stranice vidi samo Sara.
• Nije u v1: plaćanja, paketi termina, liste čekanja, podsjetnici.

Popis „nije u v1” najvažniji je. Upravo on održava gradnju dovršivom. Naš vodič za pisanje dokumenta sa zahtjevima za proizvod uz AI ide dalje ako želite potpuniju specifikaciju.

Korak 2: Odaberite alat koji pokriva cijeli ciklus

Za aplikaciju s bazom podataka, prijavama i javnom adresom koristite AI alat za izradu koji pokreće kod, priključuje bazu podataka i objavljuje, a ne chat asistenta koji vam predaje datoteke. Naš pregled alata za vibe coding navodi opcije. Ovdje koristimo Mythex jer pokriva svaki korak na jednom mjestu: chat, živi pregled, pravu bazu podataka i pohranu datoteka te objavu jednim klikom.

Korak 3: Prvi upit

Pretvorite specifikaciju u jedan odlomak. Nemojte odjednom zalijepiti cijeli dokument sa svim detaljima; dajte bit, a ostalo dodajte u koracima.

Napravi aplikaciju za rezervaciju termina za moj studio joge. Polaznici se registriraju imenom, e-poštom i telefonom, vide raspored za ovaj tjedan i rezerviraju mjesto u terminu. Svaki termin ima naziv, učitelja, vrijeme početka, trajanje i kapacitet; popunjen termin prikazuje „Popunjeno” i ne može se rezervirati. Polaznici vide svoje rezervacije i mogu otkazati do dva sata prije termina. Ja sam administrator: mogu dodavati i uređivati termine i vidjeti popis onih koji su prijavljeni za svaki. Miran, jednostavan dizajn koji dobro radi na telefonima.

Ako niste sigurni je li alat razumio, prvo zatražite plan. U Mythexu način Plan prije pisanja koda opisuje zaslone i podatke, a vi to odobrite.

Korak 4: Neka temeljna petlja radi

Temeljna petlja je jedina stvar zbog koje aplikacija postoji: polaznik rezervira termin, a Sara to vidi. Testirajte samo to:

1. Registrirajte se kao polaznik i rezervirajte termin.
2. Otvorite administrativni prikaz. Je li rezervacija tu?
3. Rezervirajte isti termin ponovno. Trebalo bi odbiti.
4. Postavite kapacitet termina na 2, rezervirajte ga s dva polaznička računa i pokušajte treći.

Na ovoj točki obično se pojave dva problema. Raspored prikazuje vremena u vremenskoj zoni poslužitelja, a ne studija. A provjera „Popunjeno” događa se samo na stranici, pa brzi dvostruki klik stvori dvije rezervacije.

Prikaži sva vremena termina u vremenskoj zoni studija, [Asia/Dubai], bez obzira na postavke uređaja posjetitelja.

Provjeri kapacitet i dvostruke rezervacije na poslužitelju pri stvaranju rezervacije, a ne samo na stranici. Ako dva zahtjeva stignu zajedno za posljednje mjesto, samo jedan smije uspjeti.

Popravite temeljnu petlju prije nego što dodate bilo što drugo. Sve ostalo ovisi o njoj.

Korak 5: Dodajte preostala pravila, jedno po poruci

Sada prođite pravila iz specifikacije jedno po jedno:

Polaznici mogu otkazati rezervaciju do dva sata prije početka termina. Nakon toga sakrij gumb za otkazivanje i na poslužitelju odbij otkazivanje s jasnom porukom.

Samo moj račun može otvoriti administrativne stranice. Provjerite to na poslužitelju za svaku administrativnu radnju, a ne samo skrivanjem izbornika.

Nakon svakog testirajte i prijeđite dalje tek kada radi. Ako promjena nešto pokvari, vratite se na posljednju dobru kontrolnu točku i pokušajte s jasnijim zahtjevom umjesto da gomilate popravke jednu na drugu.

Korak 6: Doradite ono što će stvarni korisnici primijetiti

Stvarni korisnici primijete sitnice. Kratak popis za Sarinu aplikaciju:

• Prazna stanja: „Još nema termina ovaj tjedan” umjesto prazne stranice.
• Potvrda: „Rezervirani ste za Vinyasu, utorak u 18:00” nakon rezervacije.
• Raspored za telefon: veliki gumbi, raspored čitljiv na zaslonu od 375 px.
• Preostala mjesta: „Preostala 3 mjesta” na svakoj kartici termina, da polaznici rezerviraju prije.

Na svakoj kartici termina prikaži preostala mjesta, npr. „Preostalo 3 od 12”. Nakon rezervacije prikaži potvrdu s nazivom termina, danom i vremenom te gumb za moje rezervacije.

Korak 7: Testirajte kao nepoznata osoba

Prije nego ga itko drugi počne koristiti, provedite pola sata pokušavajući ga srušiti:

AI također možete zamoliti da prođe kroz rubne slučajeve:

Navedi deset stvari koje stvarni polaznik može učiniti, a koje bi mogle pokvariti rezervaciju ili otkazivanje, testiraj svaku i ispravi ono što ne prolazi. Reci mi što si promijenio.

Korak 8: Sigurnosni pregled

Ova aplikacija pohranjuje imena, e-poštu i brojeve telefona, pa se kratak sigurnosni pregled isplati. Glavna pitanja:

• Može li jedan polaznik vidjeti tuđe rezervacije ili kontaktne podatke?
• Jesu li neki ključevi ili lozinke u kodu koji se izvodi u pregledniku?
• Je li obrazac za registraciju zaštićen od botova?
• Postoji li sigurnosna kopija podataka?

Na stranici o je li vibe coding siguran objašnjena je svaka provjera s upitima za nju, a sigurnosna lista za aplikacije izrađene uz AI je duga verzija.

Korak 9: Objavite

Kada temeljna petlja, pravila i provjere prođu, objavite. Na Mythexu to je jedan klik, a aplikacija dobiva javnu adresu s bazom podataka i hostingom već postavljenima. Na Pro planu možete povezati vlastitu domenu, primjerice book.sarasyoga.com; pogledajte kako povezati prilagođenu domenu.

Prije nego pošaljete poveznicu, još jednom provjerite objavljenu verziju. Rezervirajte termin s telefona. Produkcija i pregled trebaju se ponašati jednako, ali to potvrdite.

Korak 10: Prvi korisnici i sljedeća verzija

Poveznicu najprije dajte pet redovitih polaznika, a ne svima odjednom. Zamolite ih da kroz nju rezerviraju sljedeći termin i da vam kažu što im je bilo nejasno. Zatim popravite prve tri stvari koje spomenu.

Nakon nekoliko tjedana stvarne upotrebe popis za v2 za ovakvu aplikaciju obično se sam napiše: lista čekanja za popunjene termine, e-podsjetnici večer prije i paketi termina plaćeni online. Svaka stavka dobiva isti tretman: ukratko je specificirajte, zatražite je upitom, testirajte i objavite. Za dodavanje plaćanja pogledajte kako dodati plaćanja u svoju aplikaciju. Za širenje glasa, kako pokrenuti aplikaciju i dobiti prve korisnike.

Pretvaranje u aplikaciju za telefon

Mnogi studiji žele ikonu na telefonima svojih polaznika. Na Mythex Pro planu objavljena aplikacija može postati Android aplikacija (datoteka koju možete učitati na Google Play) i iPhone aplikacija poslana na TestFlight s vlastitim ključem App Store Connecta, bez Maca. Aplikacija za telefon otvara objavljenu web aplikaciju, pa kada objavite ažuriranje, aplikacija za telefon ga također ima.

Što iz ovoga izvući

Sama izrada bila je kratki dio. Ono što je aplikaciju učinilo upotrebljivom bio je popis „nije u v1” iz specifikacije, testiranje temeljne petlje prije svega ostalog, pravila na poslužiteljskoj strani za kapacitet i pristup te pet stvarnih korisnika prije pedeset. Tako izgleda vibe coding kada aplikacija mora raditi za druge ljude.

Spremni ste isprobati vlastitu? Napišite specifikaciju na jednoj stranici, zatim zalijepite prvi odlomak u AI alat za izradu aplikacija. Ako želite vidjeti više vrsta aplikacija i upite iza njih, pročitajte naše primjere vibe codinga.

Pitanja