Kako napraviti aplikaciju vibe kodiranjem: od ideje do objavljene aplikacije

Da biste napravili aplikaciju vibe kodiranjem, napišite opis prve verzije na jednoj strani, dajte ga AI alatu za pravljenje aplikacija kao prvi prompt, pa aplikaciju razvijajte u malim, testiranim koracima: podaci, prijava, glavni tok rada, doterivanje, pregled bezbednosti i na kraju objavljivanje. Ovaj vodič prati jedan primer, aplikaciju za zakazivanje časova za mali studio joge, kroz sve faze, uz prompte korišćene u svakom koraku.

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

Projekat

Zamislite vlasnicu studija joge, Saru, koja drži osam časova nedeljno. Rezervacije stižu preko WhatsApp-a; ona vodi papirnu listu za svaki čas i često primi više prijava nego što ima mesta. Ona želi:

• Da studenti vide raspored za nedelju i rezervišu mesto.
• Da svaki čas ima kapacitet.
• Listu za svaki čas koju može da proveri na vratima.
• Da studenti otkažu najkasnije dva sata pre časa.

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

Korak 1: Napišite specifikaciju na jednoj strani

Pre nego što otvorite bilo koji alat, zapišite prvu verziju običnim rečima. Deset minuta ovde štedi sate naizmeničnog dopisivanja. Koristan oblik:

• Ko koristi: studenti (rezervišu i otkazuju), Sara (vodi časove i gleda liste).
• Ekrani: raspored, detalji časa, moje rezervacije, admin časovi, admin lista časova.
• Podaci: časovi (naziv, nastavnik, početak, trajanje, kapacitet), rezervacije (student, čas, status), studenti (ime, imejl, telefon).
• Pravila: nema rezervacije za pun čas; jedna rezervacija po studentu po času; otkazivanje najkasnije dva sata pre; samo Sara vidi admin stranice.
• Nije u v1: plaćanja, paketi časova, lista čekanja, podsetnici.

Lista „nije u v1“ je najvažnija. Ona održava gradnju izvodljivom. Naš vodič za pisanje zahteva za proizvod uz AI ide dalje ako želite potpuniju specifikaciju.

Korak 2: Izaberite alat koji pokriva ceo tok

Za aplikaciju sa bazom, prijavama i javnom adresom koristite AI alat za pravljenje aplikacija koji pokreće kod, povezuje bazu i objavljuje, a ne chat asistenta koji vam daje fajlove. Naš pregled alata za vibe kodiranje navodi opcije. Ovde koristimo Mythex jer pokriva svaki korak na jednom mestu: chat, živi pregled, pravu bazu i skladište fajlova i objavljivanje jednim klikom.

Korak 3: Prvi prompt

Pretvorite specifikaciju u jedan pasus. Ne lepite odjednom ceo dokument sa svakim detaljem; dajte jezgro, a ostalo dodajte u koracima.

Napravi aplikaciju za zakazivanje časova za moj studio joge. Studenti se prijavljuju imenom, imejlom i telefonom, vide raspored za ovu nedelju i rezervišu mesto u času. Svaki čas ima naziv, nastavnika, početak, trajanje i kapacitet; pun čas prikazuje „Popunjeno“ i ne može da se rezerviše. Studenti vide svoje rezervacije i mogu da otkažu najkasnije dva sata pre časa. Ja sam administrator: mogu da dodajem i menjam časove i da vidim listu onih koji su prijavljeni za svaki. Miran, jednostavan dizajn koji dobro radi na telefonima.

Ako niste sigurni da je alat razumeo, tražite plan pre pisanja koda. U Mythex-u režim Plan postavlja ekrane i podatke pre pisanja koda, a vi ih odobravate.

Korak 4: Osposobite osnovnu petlju

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

1. Prijavite se kao student 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 sa dva studentska naloga i pokušajte treći.

Dva problema se obično pojave u ovom trenutku. Raspored prikazuje vremena u vremenskoj zoni servera, a ne studija. A provera „Popunjeno“ se dešava samo na stranici, pa dvostruki klik brzo napravi dve rezervacije.

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

Proveri kapacitet i duplikate rezervacija na serveru kada se rezervacija kreira, a ne samo na stranici. Ako dva zahteva stignu zajedno za poslednje mesto, samo jedan treba da uspe.

Popravite osnovnu petlju pre nego što dodate bilo šta drugo. Sve ostalo zavisi od nje.

Korak 5: Dodajte preostala pravila, jedno po poruci

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

Studenti mogu da otkažu rezervaciju najkasnije dva sata pre početka časa. Posle toga sakrij dugme za otkazivanje i odbij otkazivanje na serveru uz jasnu poruku.

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

Posle svakog, testirajte i idite dalje tek kada radi. Ako izmena nešto pokvari, vratite se na poslednji dobar checkpoint i pokušajte jasniji zahtev umesto da gomilate ispravke jednu preko druge.

Korak 6: Doterajte ono što će pravi korisnici primetiti

Pravi korisnici primete sitnice. Kratka lista za Sarinu aplikaciju:

• Prazna stanja: „Još nema časova za ovu nedelju“ umesto prazne stranice.
• Potvrda: „Rezervisani ste za Vinyasu, utorak u 18:00“ posle rezervacije.
• Raspored za telefon: veliki dugmići, raspored čitljiv na ekranu od 375 piksela.
• Preostala mesta: „Još 3 mesta“ na svakoj kartici časa, da studenti rezervišu ranije.

Na svakoj kartici časa prikaži preostala mesta, npr. „3 od 12 slobodna“. Posle rezervacije prikaži potvrdu sa nazivom časa, danom i vremenom i dugme za moje rezervacije.

Korak 7: Testirajte kao nepoznat korisnik

Pre nego što je neko drugi koristi, provedite pola sata pokušavajući da je slomite:

Možete i da zamolite AI da prođe kroz granične slučajeve:

Navedi deset stvari koje pravi student može da uradi, a da pokvari rezervaciju ili otkazivanje, testiraj svaku i popravi ono što ne radi. Reci mi šta si promenio.

Korak 8: Bezbednosni pregled

Ova aplikacija čuva imena, imejlove i brojeve telefona, pa se kratak bezbednosni pregled isplati. Glavna pitanja:

• Može li jedan student da vidi tuđe rezervacije ili kontakt podatke?
• Ima li ključeva ili lozinki u kodu koji se izvršava u pregledaču?
• Da li je formular za registraciju zaštićen od botova?
• Postoji li rezervna kopija podataka?

Naša stranica o tome da li je vibe kodiranje bezbedno objašnjava svaku proveru i daje prompte za njih, a bezbednosna lista za aplikacije pravljene uz AI je duža verzija.

Korak 9: Objavite

Kada osnovna petlja, pravila i provere prođu, objavite. Na Mythex-u je to jedan klik, a aplikacija dobija javnu adresu sa bazom i hostingom već postavljenim. Na Pro planu možete povezati sopstveni domen, na primer book.sarasyoga.com; pogledajte kako povezati prilagođeni domen.

Pre nego što pošaljete link, još jednom proverite objavljenu verziju. Zakažite čas sa telefona. Produkcija i pregled treba da se ponašaju isto, ali to proverite.

Korak 10: Prvi korisnici i sledeća verzija

Link najpre pošaljite pet redovnih studenata, a ne svima. Zamolite ih da kroz njega zakažu sledeći čas i da vam kažu šta im je bilo nejasno. Zatim popravite prve tri stvari koje pomenu.

Posle nekoliko nedelja stvarne upotrebe, lista za v2 za ovakvu aplikaciju obično se sama napiše: lista čekanja za pune časove, imejl podsetnici večer pre časa i paketi časova plaćeni onlajn. Svaka stavka dobija isti tretman: ukratko opišete je, zatražite je promptom, testirate i objavite. Za dodavanje plaćanja pogledajte kako dodati plaćanja u aplikaciju. Za dobijanje prvih korisnika, kako lansirati aplikaciju i dobiti prve korisnike.

Pretvaranje u aplikaciju za telefon

Mnogi studiji žele ikonicu na telefonima svojih studenata. Na Mythex Pro planu objavljena aplikacija može postati Android aplikacija (fajl koji možete otpremiti na Google Play) i iPhone aplikacija poslata na TestFlight sa vašim sopstvenim App Store Connect ključem, bez Mac-a. Aplikacija za telefon otvara objavljenu veb aplikaciju, pa kada objavite izmenu, i aplikacija za telefon je dobija.

Šta izvući iz ovoga

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

Spremni da probate sopstvenu? Napišite specifikaciju na jednoj strani, pa prvi pasus zalepite u AI alat za pravljenje aplikacija. Ako želite da vidite još tipova aplikacija i prompte iza njih, pročitajte naše primere vibe kodiranja.

Pitanja