Kako napraviti aplikaciju vibe kodiranjem: od ideje do objavljene aplikacije

Da biste napravili aplikaciju vibe kodiranjem, napišite jednostran opis prve verzije, dajte ga AI alatu za izradu aplikacija kao prvi prompt, pa aplikaciju razvijajte u malim testiranim koracima: podaci, prijava, glavni tok rada, doterivanje, sigurnosni pregled i na kraju objava. Ovaj vodič prati jedan primjer kroz sve faze: aplikaciju za rezervacije časova za malo studio joge, uz prompte koji su korišteni u svakom koraku.

Ako nikada niste ništa pravili na ovaj način, naš vodič za vibe kodiranje za početnike kreće s manjim koracima. Za širi pregled koji nije vezan za vibe kodiranje, pogledajte kako napraviti aplikaciju uz AI.

Projekat

Zamislite vlasnicu studija joge, Saru, koja drži osam časova sedmično. Rezervacije stižu preko WhatsAppa; ona vodi papirnu listu za svaki čas i često prodaje više mjesta nego što ih ima. Ona želi:

• Da polaznici vide raspored za sedmicu i rezervišu mjesto.
• Da svaki čas ima kapacitet.
• Listu za svaki čas koju može provjeriti na vratima.
• Da polaznici mogu otkazati najkasnije dva sata prije.

To je cijela prva verzija. Bez plaćanja, bez članarina, bez store-a za aplikacije. To dolazi kasnije, ili nikada.

Korak 1: Napišite jednostranu specifikaciju

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

• Ko koristi: polaznici (rezervišu i otkazuju), Sara (upravlja časovima, vidi liste).
• Ekrani: raspored, detalji časa, moje rezervacije, admin časovi, admin lista časova.
• Podaci: časovi (naziv, nastavnik, početak, trajanje, kapacitet), rezervacije (polaznik, čas, status), polaznici (ime, e-pošta, telefon).
• Pravila: nema rezervacije za pun čas; jedna rezervacija po polazniku po času; otkazivanje najkasnije dva sata prije; samo Sara vidi admin stranice.
• Nije u v1: plaćanja, paketi časova, lista čekanja, podsjetnici.

Lista „nije u v1“ je najvažnija. Ona održava build dovršivim. Naš vodič o pisanju dokumenta sa zahtjevima proizvoda uz AI ide dalje ako želite opširniju specifikaciju.

Korak 2: Izaberite alat koji pokriva cijeli tok

Za aplikaciju s bazom podataka, prijavama i javnom URL adresom koristite AI alat za izradu aplikacija koji pokreće kod, priključuje bazu i objavljuje, umjesto chat asistenta koji vam predaje datoteke. Naš pregled alata za vibe kodiranje 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 prompt

Pretvorite specifikaciju u jedan paragraf. Nemojte odjednom lijepiti cijeli dokument sa svim detaljima; dajte suštinu, a ostalo dodajte u koracima.

Napravi aplikaciju za rezervacije časova za moje studio joge. Polaznici se registruju s imenom, e-poštom i telefonom, vide raspored za ovu sedmicu i rezervišu mjesto u času. Svaki čas ima naziv, nastavnika, vrijeme početka, trajanje i kapacitet; pun čas prikazuje „Popunjeno“ i ne može se rezervisati. Polaznici vide svoje rezervacije i mogu otkazati najkasnije dva sata prije časa. Ja sam admin: mogu dodavati i uređivati časove i vidjeti listu onih koji su rezervisali svaki čas. Miran, jednostavan dizajn koji dobro radi na telefonima.

Ako niste sigurni da je alat razumio, zatražite prvo plan. U Mythexu režim Plan prije pisanja koda postavlja ekrane i podatke, a vi odobravate.

Korak 4: Postavite osnovnu petlju

Osnovna petlja je jedina stvar zbog koje aplikacija postoji: polaznik rezerviše čas, a Sara to vidi. Testirajte samo to:

1. Registrujte se kao polaznik i rezervišite čas.
2. Otvorite admin prikaz. Da li je rezervacija tu?
3. Rezervišite isti čas ponovo. Trebalo bi da odbije.
4. Postavite kapacitet časa na 2, rezervišite ga s dva polaznička naloga i pokušajte treći.

Dva problema se obično pojave u ovoj fazi. Raspored prikazuje vremena u vremenskoj zoni servera, a ne studija, i provjera „Popunjeno“ se dešava samo u stranici, pa brzi dvostruki klik napravi dvije rezervacije.

Prikaži sva vremena časova u vremenskoj zoni studija, [Asia/Dubai], bez obzira na to kako je postavljen uređaj posjetioca.

Provjeri kapacitet i duple rezervacije na serveru kad se rezervacija kreira, a ne samo u stranici. Ako dva zahtjeva stignu zajedno za posljednje mjesto, samo jedan treba da uspije.

Popravite osnovnu petlju prije dodavanja bilo čega drugog. Sve ostalo zavisi od nje.

Korak 5: Dodajte preostala pravila, jedno po poruci

Sada prođite kroz pravila iz specifikacije jedno po jedno:

Polaznici mogu otkazati rezervaciju najkasnije dva sata prije početka časa. Nakon toga sakrij dugme za otkazivanje i odbij otkazivanje na serveru uz jasnu poruku.

Samo moj nalog može otvoriti admin stranice. Provjeri to na serveru za svaku admin radnju, a ne samo sakrivanjem menija.

Nakon svakog, testirajte, pa idite dalje tek kad radi. Ako promjena nešto pokvari, vratite se na posljednji dobar checkpoint i pokušajte jasniji zahtjev umjesto da gomilate popravke jednu na drugu.

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

Stvarni korisnici primijete male stvari. Kratka lista za Sarinu aplikaciju:

• Prazna stanja: „Još nema časova za ovu sedmicu“ umjesto prazne stranice.
• Potvrda: „Rezervisani ste za Vinyasa, utorak 18:00“ nakon rezervacije.
• Raspored na telefonu: veliki dugmad, raspored čitljiv na ekranu od 375 px.
• Slobodna mjesta: „Još 3 mjesta“ na svakoj kartici časa, da polaznici rezervišu ranije.

Na svakoj kartici časa prikaži slobodna mjesta, npr. „Još 3 od 12“. Nakon rezervacije prikaži potvrdu s nazivom časa, danom i vremenom te dugme za moje rezervacije.

Korak 7: Testirajte kao nepoznat korisnik

Prije nego što je iko drugi koristi, provedite pola sata pokušavajući je slomiti:

Možete i zatražiti od AI-ja da prođe kroz rubne slučajeve:

Navedi deset stvari koje stvarni polaznik može uraditi a da pokvari rezervaciju ili otkazivanje, testiraj svaku i popravi ono što ne radi. Reci mi šta si promijenio.

Korak 8: Sigurnosni pregled

Ova aplikacija čuva 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 kontakt podatke?
• Ima li ključeva ili lozinki u kodu koji se izvršava u pregledaču?
• Da li je forma za registraciju zaštićena od botova?
• Postoji li sigurnosna kopija podataka?

Naša stranica o tome da li je vibe kodiranje sigurno objašnjava svaku provjeru i daje prompte za njih, a sigurnosna lista za aplikacije izrađene uz AI je duža verzija.

Korak 9: Objavite

Kada osnovna petlja, pravila i provjere prođu, objavite. Na Mythexu je to jedan klik: aplikacija dobija javnu URL adresu s već postavljenom bazom podataka i hostingom. Na Pro planu možete povezati svoj domen, npr. book.sarasyoga.com; pogledajte kako povezati prilagođeni domen.

Prije nego pošaljete link, provjerite objavljenu verziju još jednom. Rezervišite čas s telefona. Produkcija i pregled treba da se ponašaju isto, ali to potvrdite.

Korak 10: Prvi korisnici i sljedeća verzija

Link dajte prvo pet redovnih polaznika, a ne svima. Zamolite ih da rezervišu sljedeći čas preko njega i da vam kažu šta im je bilo nejasno. Zatim popravite tri najvažnije stvari koje spominju.

Nakon nekoliko sedmica stvarne upotrebe, lista za v2 za ovakvu aplikaciju obično se sama napiše: lista čekanja za pune časove, podsjetnici e-poštom večer prije i paketi časova plaćeni online. Svaka stavka dobija isti tretman: u nekoliko redova specifikacija, prompt, testiranje, objava. Za dodavanje plaćanja pogledajte kako dodati plaćanja u aplikaciju. Za širenje glasa, kako lansirati aplikaciju i dobiti prve korisnike.

Pretvaranje u aplikaciju za telefon

Mnogi studiji žele ikonu na telefonima svojih polaznika. Na Mythex Pro-u objavljena aplikacija može postati Android aplikacija (datoteka koju možete otpremiti na Google Play) i iPhone aplikacija poslana na TestFlight s vašim vlastitim App Store Connect ključem, bez Mac-a. Aplikacija za telefon otvara objavljenu web aplikaciju, pa svaka vaša nova objava znači da je i aplikacija za telefon ima.

Šta ponijeti sa sobom

Izrada sama po sebi bila je kratak dio. Ono što je aplikaciju učinilo upotrebljivom bila je lista „nije u v1“ iz specifikacije, testiranje osnovne petlje prije svega ostalog, pravila za kapacitet i pristup na serveru, te pet stvarnih korisnika prije pedeset. Tako izgleda vibe kodiranje kada aplikacija mora da radi za druge ljude.

Spremni da isprobate svoju? Napišite jednostranu specifikaciju, pa zalijepite prvi paragraf u AI alat za izradu aplikacija. Ako želite vidjeti više tipova aplikacija i promptove iza njih, pročitajte naše primjere vibe kodiranja.

Pitanja