Primjeri vibe codinga: 10 pravih vrsta aplikacija, upiti i što je pošlo po zlu

Najčešći primjeri vibe codinga su mali, korisni web alati: pratitelji, stranice za rezervacije, interni alati, portali za klijente, landing stranice, kvizovi, nadzorne ploče i jednostavni AI alati. U nastavku je deset njih. Za svaki vidiš tko ga gradi, prvi upit, što obično pođe po zlu i sljedeći upit koji to popravlja.

Riječ je o kompozitima projekata koje ljudi najčešće donose AI graditeljima aplikacija, a ne o studijama slučaja jedne osobe. Upiti se mogu kopirati. Neuspjesi su oni koji se stalno ponavljaju, zato su upravo oni korisni dio. Ako ti je sam vibe coding nov, počni s što je vibe coding.

1. Osobni pratitelj budžeta

Tko ga gradi: pojedinci koji su odustali od tablica.

Prvi upit:

Napravi pratitelj mjesečnog budžeta. Dodajem troškove s iznosom, kategorijom (hrana, stanarina, prijevoz, zabava, ostalo), datumom i bilješkom. Prikaži ukupan iznos ovog mjeseca po kategoriji kao stupčasti grafikon i popis nedavnih troškova. Mogu postaviti budžet po kategoriji i vidjeti koliko je ostalo.

Što je pošlo po zlu: grafikon je zbrajao svaki trošak ikad unesen, a ne samo ovaj mjesec, pa je do drugog mjeseca svaka kategorija izgledala previsoko potrošena. Osim toga, iznosi upisani sa zarezom („1,200“) spremljeni su kao 1.

Upit za popravak:

Grafikon i zbrojevi trebaju uključivati samo troškove iz odabranog mjeseca. Na vrhu dodaj izbornik mjeseca, koji je zadano na tekući mjesec. Također prihvaćaj iznose upisane sa zarezom ili razmakom i spremaj ih kao brojeve.

Pouka: „ovaj mjesec“ je pravilo. Izgovori pravila naglas.

2. Stranica za rezervacije malog salona

Tko ga gradi: vlasnici malih tvrtki kojima je dosta rezervacija telefonom i porukama.

Prvi upit:

Napravi stranicu za rezervacije za moj salon. Kupci biraju uslugu, datum i slobodan termin, zatim upisuju ime i telefon. Imam privatnu admin stranicu iza prijave koja prikazuje rezervacije po danu.

Što je pošlo po zlu: dva kupca rezervirala su isti termin u 10:00 unutar minute jedan od drugoga, jer je stranica dostupnost provjeravala samo pri prvom učitavanju. Rezervacija bojanja od 90 minuta također nije blokirala termine nakon nje.

Upit za popravak:

Kada kupac pošalje rezervaciju, na poslužitelju provjeri je li svaki termin koji ona pokriva još slobodan i odbij je porukom „Taj termin je upravo zauzet“ ako nije. Usluga blokira punu duljinu, pa rezervacija od 90 minuta u 10:00 blokira 10:00, 10:30 i 11:00.

Pouka: sve što dvije osobe mogu raditi istovremeno traži provjeru na poslužitelju. Za cijelu verziju pogledaj kako napraviti aplikaciju za rezervacije.

3. Restoranski jelovnik s QR kodom

Tko ga gradi: vlasnici kafića i restorana koji prečesto tiskaju jelovnike.

Prvi upit:

Napravi web stranicu s jelovnikom za mobitel za moj kafić. Odjeljci za doručak, ručak, pića i deserte, svaka stavka s nazivom, cijenom, kratkim opisom i oznakama prehrane (veganski, bez glutena). Trebam admin stranicu za uređivanje stavki i označavanje da je nešto rasprodano. Prikaži QR kod koji mogu ispisati i koji vodi na jelovnik.

Što je pošlo po zlu: ništa se nije srušilo, ali jelovnik je bio spor na Wi-Fiju u kafiću jer su se za svaku stavku učitavale fotografije s telefona pune veličine.

Upit za popravak:

Fotografije u jelovniku su prevelike. Smanji učitane slike na najviše 800 px širine, komprimiraj ih i učitavaj tek kada posjetitelj skroluje.

Pouka: testiraj na sporoj vezi, a ne samo u uredu.

4. Pratitelj opreme ili zaliha za tim

Tko ga gradi: ljudi iz operative koji zamjenjuju zajedničku tablicu.

Prvi upit:

Napravi interni alat za skladišni tim. Stavke imaju naziv, šifru (SKU), količinu, lokaciju i minimalnu razinu. Osoblje se prijavljuje i može dodati zalihe, ukloniti zalihe uz razlog i vidjeti popis stavki ispod minimuma označen crveno. Čuvaj povijest svake promjene i tko ju je napravio.

Što je pošlo po zlu: povijest je pokazivala „korisnik 3“ umjesto imena, a uklanjanje više zaliha nego što ih ima dovelo je količinu u minus.

Upit za popravak:

U povijesti prikaži ime osobe, a ne njezin ID. Ne dopuštaj uklanjanje koje bi spustilo količinu ispod nule; umjesto toga prikaži „Samo 4 na zalihi“.

Pouka: opiši što mora biti nemoguće, a ne samo što treba biti moguće. Naš vodič za izradu aplikacije za upravljanje zalihama pokriva ostalo.

5. Portal za klijente freelancera ili studija

Tko ga gradi: dizajneri, računovođe, konzultanti i agencije.

Prvi upit:

Napravi portal za klijente. Klijente pozivam e-poštom. Svaki klijent se prijavljuje i vidi samo svoje projekte, datoteke i račune te može ostavljati komentare. Ja se prijavljujem kao admin i vidim sve.

Što je pošlo po zlu: ovo je najvažniji neuspjeh na popisu. Stranice su svakom klijentu prikazivale samo njegove projekte, ali poslužitelj je vratio bilo koji projekt ako bi se promijenio broj u adresnoj traci. Klikanje kao jedan klijent nikada to nije otkrilo.

Upit za popravak:

Provjeri svaku rutu na poslužitelju koja vraća projekte, datoteke, komentare ili račune. Svaka mora potvrditi da prijavljeni klijent posjeduje zapis, a inače vratiti „nije pronađeno“. Zatim testiraj: prijavi se kao klijent A i pokušaj otvoriti projekt klijenta B preko njegova ID-a.

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

6. Landing stranica s listom čekanja

Tko ga gradi: osnivači koji testiraju ideju prije nego je izgrade.

Prvi upit:

Napravi landing stranicu za aplikaciju koja pomaže instruktorima zakazivati sate i naplaćivati uplate. Naslov, podnaslov, prijava e-poštom, tri prednosti, odjeljak kako radi i FAQ. Spremaj prijave u bazu s datumom i omogući mi preuzimanje popisa kao CSV s privatne stranice.

Što je pošlo po zlu: za nekoliko dana popis se napunio smećem, prijavama botova, a stranica nije imala naslov ni opis pa su podijeljene poveznice prikazivale prazan pregled.

Upit za popravak:

Dodaj osnovnu zaštitu od botova na obrazac za prijavu (skrito polje mamac i ograničenje od 5 prijava po IP adresi na sat). Dodaj naslov stranice, meta opis i sliku za dijeljenje na društvenim mrežama.

Pouka: javni obrazac će biti pronađen. Pogledaj kako napraviti stranicu s listom čekanja.

7. Aplikacija za kvizove za učitelja

Tko je gradi: učitelji i treneri koji žele nešto lakše od LMS-a.

Prvi upit:

Napravi aplikaciju za kvizove za moj razred. Kvizove kreiram s pitanjima s više ponuđenih odgovora i jednim točnim odgovorom. Učenici se pridružuju šifrom i svojim imenom, odgovaraju na pitanja i na kraju vide svoj rezultat. Ja vidim tablicu rezultata po kvizu.

Što je pošlo po zlu: točni odgovori slali su se pregledniku zajedno s pitanjima, pa je znatiželjan učenik mogao pročitati ih u izvornom kodu stranice. Učenici su također mogli ponovno slati odgovore dok ne dobiju 100 %.

Upit za popravak:

Ne šalji točne odgovore pregledniku. Provjeri odgovore na poslužitelju nakon slanja. Dopusti jedno slanje po imenu učenika za svaki kviz i pokaži učitelju ako netko pokuša ponovno.

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

8. Mali AI alat

Tko ga gradi: marketinški stručnjaci, pisci i osnivači koji žele usmjerenog AI pomoćnika.

Prvi upit:

Napravi alat koji opis proizvoda pretvara u pet objava za društvene mreže u različitim tonovima (prijateljski, stručni, razigrani, kratki, dugi). Koristi AI API. Zalijepim opis, odaberem platformu i dobijem objave s gumbima za kopiranje.

Što je pošlo po zlu: prva verzija zvala je AI servis izravno iz preglednika s API ključem unutar stranice, pa ga je svatko mogao kopirati i potrošiti tvoj račun.

Upit za popravak:

Premjesti AI poziv na poslužitelj. Spremi API ključ kao tajnu, nikada u kod frontenda. Ograniči svakog posjetitelja na 20 generiranja dnevno.

Pouka: ključevi pripadaju tajnama na poslužitelju. Pogledaj kako čuvati API ključeve na sigurnom i kako dodati AI značajke u svoju aplikaciju.

9. Dvojezična arapsko-engleska poslovna web stranica

Tko je gradi: tvrtke u Zaljevu i široj arapskoj regiji koje služe dva jezika.

Prvi upit:

Napravi web stranicu za moju tvrtku za dizajn interijera na arapskom i engleskom, s prebacivanjem jezika. Stranice: početna, usluge, portfelj, o nama i kontakt. Arapski treba biti potpuno zdesna nalijevo.

Što je pošlo po zlu: arapski tekst bio je poravnat udesno, ali raspored nije bio zrcaljen: strelice su i dalje pokazivale krivo, a izbornik je bio s krive strane. Neki telefonski brojevi također su se prikazivali unatrag.

Upit za popravak:

Na arapskom zrcali cijeli raspored: postavi smjer stranice zdesna nalijevo, stavi izbornik s desne strane, okreni ikone usmjerene u smjeru i drži telefonske brojeve i e-poštu slijeva nadesno unutar arapskog teksta.

Pouka: pisanje zdesna nalijevo je raspored, a ne poravnanje. Mythex podržava arapski i druge jezike sa smjerom zdesna nalijevo, a možeš upitati izravno na arapskom.

10. Pratitelj koji postaje aplikacija za telefon

Tko ga gradi: treneri, teretane i zajednice čiji korisnici žive na telefonima.

Prvi upit:

Napravi dnevnik treninga za svoje klijente osobnog treninga. Svaki klijent se prijavljuje, vidi plan koji sam mu dodijelio za tjedan, označava vježbe i bilježi težine. Ja vidim napredak svakog klijenta na grafikonu.

Što je pošlo po zlu: web aplikacija je radila, ali na telefonima su gumbi bili premali za dodir usred treninga, a grafikon nečitljiv.

Upit za popravak:

Dizajniraj to za korištenje jednom rukom na telefonu: velike površine za dodir pri dnu ekrana, jedna vježba po ekranu s velikim gumbima Dalje i Gotovo te jednostavan tjedni grafikon napretka.

Pouka: ako će ljudi koristiti na telefonu, dizajniraj prvo za telefon. Na Mythex Pro objavljena aplikacija zatim može postati Android aplikacija za Google Play i iPhone aplikacija poslana na TestFlight; aplikacija za telefon otvara tvoju objavljenu aplikaciju, pa svaka objava osvježava i nju. Pogledaj stranicu graditelja mobilnih aplikacija.

Obrasci iza ovih primjera

Kroz svih deset neuspjeha padaju u nekoliko skupina:

Ništa od ovoga ne traži da čitaš kod. Traži da testiraš kao znatiželjan, pomalo neprijateljski korisnik i da precizno opišeš što vidiš.

Isprobaj sam

Odaberi primjer koji je najbliži tvojoj ideji, kopiraj njegov prvi upit i promijeni detalje. Zatim upit za popravak koristi kao popis provjere prije dijeljenja. Naš cheat sheet s upitima za vibe coding ima još 30, a kako napraviti aplikaciju vibe codingom prolazi jedan projekt od ideje do objavljene aplikacije. Kada budeš spreman, pokreni ga u AI graditelju aplikacija ili pogledaj predloške za brži početak.

Pitanja