Primeri vibe coding-a: 10 pravih tipova aplikacija, upiti i šta je pošlo po zlu

Najčešći primeri vibe coding-a su male, korisne web aplikacije: praćenje, stranice za rezervacije, interni alati, portali za klijente, landing stranice, kvizovi, kontrolne table i jednostavni AI alati. U nastavku je deset njih. Za svaki ćete videti ko ga pravi, prvi upit, šta obično pođe po zlu i naredni upit koji to popravlja.

Ovo su kompozicije projekata koje ljudi najčešće donose AI alatima za pravljenje aplikacija, a ne studije slučaja jedne osobe. Upiti se mogu kopirati. Greške su one koje se ponavljaju iznova, zato su upravo korisni deo. Ako vam je sam vibe coding nov, počnite sa šta je vibe coding.

1. Lični budžet za praćenje troškova

Ko ga pravi: pojedinci koji su probali tabele i odustali.

Prvi upit:

Napravi mesečni pregled budžeta. Unosim troškove sa iznosom, kategorijom (hrana, stanarina, prevoz, zabava, ostalo), datumom i napomenom. Prikaži ukupno za ovaj mesec po kategorijama kao stubični grafikon i listu poslednjih troškova. Mogu da postavim budžet po kategoriji i vidim koliko je ostalo.

Šta je pošlo po zlu: grafikon je brojao svaki trošak ikada unet, a ne samo ovaj mesec, pa su do drugog meseca sve kategorije izgledale prekoračene. Iznosi unešeni sa zarezom („1,200“) sačuvani su kao 1.

Upit za popravku:

Grafikon i ukupni iznosi treba da obuhvataju samo troškove iz izabranog meseca. Dodaj birač meseca na vrhu, koji podrazumevano pokazuje tekući mesec. Takođe prihvati iznose unete sa zarezima ili razmacima i sačuvaj ih kao brojeve.

Pouka: „ovaj mesec“ je pravilo. Izgovorite pravila naglas.

2. Stranica za rezervacije za mali salon

Ko ga pravi: vlasnici malih firmi kojima je dosta rezervisanja telefonom i porukama.

Prvi upit:

Napravi stranicu za rezervacije za moj salon. Klijenti biraju uslugu, datum i slobodan termin, a zatim unose ime i telefon. Imam privatnu admin stranicu iza prijave koja prikazuje rezervacije po danima.

Šta je pošlo po zlu: dve mušterije su rezervisale isti termin u 10:00 u razmaku od minut, jer je stranica proveravala dostupnost samo pri prvom učitavanju. Rezervacija u boji od 90 minuta takođe nije blokirala termine posle nje.

Upit za popravku:

Kada klijent pošalje rezervaciju, na serveru proveri da su svi termini koje ona obuhvata i dalje slobodni, a ako nisu, odbij je porukom „Taj termin je upravo zauzet“. Usluga blokira celo svoje trajanje, pa rezervacija od 90 minuta u 10:00 blokira 10:00, 10:30 i 11:00.

Pouka: sve što dvoje ljudi mogu da urade istovremeno zahteva proveru na serveru. Pogledajte kako napraviti aplikaciju za rezervacije za punu verziju.

3. Restoran meni sa QR kodom

Ko ga pravi: vlasnici kafića i restorana koji prečesto štampaju jelovnike.

Prvi upit:

Napravi mobilni sajt sa menijem za moj kafić. Odeljci za doručak, ručak, pića i deserte, a svaka stavka ima naziv, cenu, kratak opis i oznake za ishranu (veganski, bez glutena). Treba mi admin stranica za izmenu stavki i označavanje da je rasprodato. Prikaži QR kod koji mogu da odštampam i koji vodi na meni.

Šta je pošlo po zlu: ništa se nije slomilo, ali je meni bio spor na Wi-Fi-ju u kafiću, jer su se za svaku stavku učitavale fotografije sa telefona pune veličine.

Upit za popravku:

Fotografije u meniju su pretežke. Smanji otpremljene slike na najviše 800 px širine, sažmi ih i učitavaj lenjo dok posetilac skroluje.

Pouka: testirajte na sporoj vezi, a ne samo u kancelariji.

4. Praćenje opreme ili zaliha za tim

Ko ga pravi: ljudi iz operativa koji zamenjuju zajedničku tabelu.

Prvi upit:

Napravi alat za inventar za naš magacinski tim. Stavke imaju naziv, šifru (SKU), količinu, lokaciju i minimalnu količinu. Zaposleni se prijavljuju i mogu da dodaju zalihe, da skidaju zalihe uz razlog i da vide listu stavki ispod minimuma označenih crveno. Čuvaj istoriju svake izmene i ko ju je napravio.

Šta je pošlo po zlu: istorija je prikazivala „korisnik 3“ umesto imena, a skidanje više zaliha nego što ih ima dovodilo je količinu u minus.

Upit za popravku:

U istoriji prikaži ime osobe, a ne njen ID. Ne dozvoli skidanje koje bi spustilo količinu ispod nule; umesto toga prikaži „Na stanju je samo 4“.

Pouka: opišite šta treba da bude nemoguće, a ne samo šta treba da bude moguće. Naš vodič o pravljenju aplikacije za inventar pokriva ostalo.

5. Portal za klijente za freelensera ili studio

Ko ga pravi: dizajneri, računovođe, konsultanti i agencije.

Prvi upit:

Napravi portal za klijente. Pozivam klijente mejlom. Svaki klijent se prijavljuje i vidi samo svoje projekte, fajlove i fakture i može da ostavlja komentare. Ja se prijavljujem kao admin i vidim sve.

Šta je pošlo po zlu: ovo je najvažnija greška na listi. Stranice su svakom klijentu prikazivale samo njegove projekte, ali je server vraćao bilo koji projekat ako biste promenili broj u adresnoj traci. Klikanje kroz aplikaciju kao jedan klijent to nikada nije otkrilo.

Upit za popravku:

Proveri svaku serversku rutu koja vraća projekte, fajlove, komentare ili fakture. Svaka mora da potvrdi da je prijavljeni klijent vlasnik zapisa, a inače da vrati „nije pronađeno“. Zatim testiraj: prijavi se kao klijent A i pokušaj da otvoriš projekat klijenta B preko njegovog ID-a.

Pouka: sakriti nešto na ekranu nije isto što i zaštititi to. Više o tome u tekstu da li je vibe coding bezbedan.

6. Stranica za najavu sa listom čekanja

Ko ga pravi: osnivači koji testiraju ideju pre nego što je naprave.

Prvi upit:

Napravi landing stranicu za aplikaciju koja pomaže predavačima da zakazuju časove i naplaćuju uplate. Naslov, podnaslov, prijava mejlom, tri prednosti, odeljak kako radi i FAQ. Sačuvaj prijave u bazi sa datumom i omogući mi da ih preuzmem kao CSV sa privatne stranice.

Šta je pošlo po zlu: za nekoliko dana lista se napunila lažnim prijavama od botova, a stranica nije imala naslov ni opis, pa su podeljeni linkovi prikazivali prazan pregled.

Upit za popravku:

Dodaj osnovnu zaštitu od botova na formular za prijavu (skriveno polje kao zamka i ograničenje od 5 prijava po IP adresi na sat). Dodaj naslov stranice, meta opis i sliku za deljenje na društvenim mrežama.

Pouka: javni formular se pronalazi. Pogledajte kako napraviti stranicu sa listom čekanja.

7. Aplikacija za kviz za nastavnika

Ko ga pravi: nastavnici i treneri koji žele nešto lakše od LMS-a.

Prvi upit:

Napravi aplikaciju za kviz za moj razred. Pravim kvizove sa pitanjima višestrukog izbora i tačno jednim tačnim odgovorom. Učenici se pridružuju šifrom i svojim imenom, odgovaraju na pitanja i na kraju vide rezultat. Ja vidim tabelu rezultata za svaki kviz.

Šta je pošlo po zlu: tačni odgovori su bili poslati pregledaču zajedno sa pitanjima, pa je radoznali učenik mogao da ih pročita u izvornom kodu stranice. Učenici su takođe mogli da predaju ponovo sve dok ne dobiju 100%.

Upit za popravku:

Ne šalji tačne odgovore pregledaču. Proveri odgovore na serveru posle predaje. Dozvoli jednu predaju po imenu učenika za svaki kviz i pokaži predavaču ako neko pokuša ponovo.

Pouka: pregledač pripada korisniku. Sve što je tamo može se pročitati.

8. Mali AI alat

Ko ga pravi: marketinški stručnjaci, pisci i osnivači kojima treba fokusiran AI pomoćnik.

Prvi upit:

Napravi alat koji pretvara opis proizvoda u pet objava za društvene mreže u različitim tonovima (prijateljski, stručni, razigrani, kratak, dugačak). Koristi AI API. Nalepim opis, izaberem platformu i dobijem objave sa dugmadima za kopiranje.

Šta je pošlo po zlu: prva verzija je AI servis pozivala direktno iz pregledača, sa API ključem u samoj stranici, gde je svako mogao da ga kopira i potroši vaš budžet.

Upit za popravku:

Premesti AI poziv na server. Čuvaj API ključ kao tajnu, nikada u kodu za frontend. Ograniči svakog posetioca na 20 generisanja dnevno.

Pouka: ključevi pripadaju tajnama na serveru. Pogledajte kako čuvati API ključeve bezbednim i kako dodati AI funkcije u svoju aplikaciju.

9. Sajt na arapskom i engleskom za posao

Ko ga pravi: firme u Zalivu i široj arapskoj regiji koje rade na dva jezika.

Prvi upit:

Napravi sajt za moju firmu za enterijer na arapskom i engleskom, sa prebacivanjem jezika. Stranice: početna, usluge, portfolio, o nama i kontakt. Arapski treba da bude potpuno zdesna nalevo.

Šta je pošlo po zlu: arapski tekst je bio poravnat udesno, ali raspored nije bio ogledan: strelice su i dalje pokazivale pogrešno, a meni je bio sa pogrešne strane. Brojevi telefona su se mestimično prikazivali unazad.

Upit za popravku:

Na arapskom ogledaj ceo raspored: postavi smer stranice zdesna nalevo, stavi meni desno, okreni ikone sa smerom i zadrži brojeve telefona i mejlove sleva nadesno unutar arapskog teksta.

Pouka: raspored sa desna na levo je raspored, a ne samo poravnanje. Mythex podržava arapski i druge rasporede sa desna na levo, a upite možete pisati direktno na arapskom.

10. Praćenje koje postaje aplikacija za telefon

Ko ga pravi: treneri, teretane i grupe u zajednici čiji korisnici žive na telefonu.

Prvi upit:

Napravi dnevnik treninga za moje klijente u personalnom treningu. Svaki klijent se prijavljuje, vidi plan koji sam mu dodelio za nedelju, štiklira vežbe i beleži težine. Ja vidim napredak svakog klijenta na grafikonu.

Šta je pošlo po zlu: web aplikacija je radila, ali su na telefonima dugmad bila premala da bi se dodirnula usred treninga, a grafikon nečitljiv.

Upit za popravku:

Dizajniraj ovo za upotrebu jednom rukom na telefonu: velika dugmad pri dnu ekrana, jedna vežba po ekranu sa velikim dugmadima Next i Done i jednostavan nedeljni grafikon napretka.

Pouka: ako će ljudi da koriste na telefonu, prvo dizajnirajte za telefon. Na Mythex Pro planu objavljena aplikacija može zatim postati Android aplikacija za Google Play i iPhone aplikacija poslata na TestFlight; aplikacija za telefon otvara vašu objavljenu aplikaciju, pa svako Publish ažurira i nju. Pogledajte stranicu alata za mobilne aplikacije.

Obrasci iza ovih primera

U svih deset, greške spadaju u nekoliko grupa:

Nijedna od ovih ne zahteva da čitate kod. Potrebno je da testirate kao radoznali, pomalo neprijateljski korisnik i da precizno opišete šta vidite.

Probajte sami

Izaberite primer koji je najbliži vašoj ideji, kopirajte njegov prvi upit i promenite detalje. Zatim koristite upit za popravku kao listu provere pre nego što podelite aplikaciju. Naš spisak upita za vibe coding ima još 30, a kako napraviti aplikaciju vibe coding-om prolazi kroz jedan projekat od ideje do objavljene aplikacije. Kada budete spremni, pokrenite ga u AI alatu za pravljenje aplikacija ili pogledajte šablone za brži start.

Pitanja