Primeri vibe codinga: 10 resničnih vrst aplikacij, pozivi in kaj je šlo narobe

Najpogostejši primeri vibe codinga so majhne, uporabne spletne aplikacije: sledilniki, strani za rezervacije, interna orodja, portali za stranke, pristajalne strani, kvizi, nadzorne plošče in preprosta orodja z AI. Spodaj je deset takih primerov. Pri vsakem boste videli, kdo ga gradi, prvi poziv, kaj se običajno pokvari, in poziv za nadaljevanje, ki to popravi.

To so sestavljeni primeri projektov, ki jih ljudje najpogosteje prinesejo k gradnikom aplikacij z AI, ne študije primera ene osebe. Pozivi so primerni za kopiranje. Napake so tiste, ki se ponavljajo, zato so tudi koristni del. Če je vibe coding za vas nov, začnite s tem, kaj je vibe coding.

1. Osebni sledilnik proračuna

Kdo ga gradi: posamezniki, ki so poskusili z preglednicami in obupali.

Prvi poziv:

Zgradi mesečni sledilnik proračuna. Dodajam stroške z zneskom, kategorijo (hrana, najemnina, prevoz, zabava, drugo), datumom in opombo. Prikaži skupni znesek po kategorijah za ta mesec kot stolpični grafikon in seznam nedavnih stroškov. Za vsako kategorijo lahko nastavim proračun in vidim, koliko je ostalo.

Kaj je šlo narobe: graf je štel vse stroške, ki so bili kdaj vneseni, ne samo tistih za ta mesec, zato so bile do drugega meseca vse kategorije videti preseženo. Poleg tega so bili zneski, vpisani z vejico („1,200“), shranjeni kot 1.

Poziv za popravek:

Graf in skupni zneski naj zajemajo samo stroške izbranega meseca. Na vrhu dodaj izbirnik meseca, privzeto trenutni mesec. Sprejmi tudi zneske, vpisane z vejicami ali presledki, in jih shrani kot številke.

Lekcija: „ta mesec“ je pravilo. Pravila izrecno povejte.

2. Stran za rezervacije za majhen salon

Kdo ga gradi: lastniki malih podjetij, ki jim je dosti rezervacij po telefonu in sporočilih.

Prvi poziv:

Zgradi stran za rezervacije za moj salon. Stranke izberejo storitev, datum in prosti termin, nato vpišejo ime in telefon. Imam zasebno stran za skrbnike za prijavo, ki prikaže rezervacije po dnevih.

Kaj je šlo narobe: dve stranki sta rezervirali isti termin ob 10:00 v razmaku ene minute, ker je stran razpoložljivost preverila samo ob prvem nalaganju. Tudi barvanje, ki traja 90 minut, ni blokiralo naslednjih terminov.

Poziv za popravek:

Ko stranka odda rezervacijo, na strežniku preveri, ali so vsi termini, ki jih zajema, še prosti, in jo zavrni s sporočilom „Ta termin je bil pravkar zaseden“, če niso. Storitev blokira svojo celotno dolžino, zato rezervacija za 90 minut ob 10:00 blokira 10:00, 10:30 in 11:00.

Lekcija: vse, kar lahko dve osebi naredita hkrati, potrebuje preverjanje na strežniku. Za celotno različico glejte kako zgraditi aplikacijo za rezervacije.

3. Restavracijski jedilnik s QR kodo

Kdo ga gradi: lastniki kavarn in restavracij, ki jedilnike tiskajo prepogosto.

Prvi poziv:

Zgradi spletno stran z jedilnikom za mobilne telefone za mojo kavarno. Razdelki za zajtrk, kosilo, pijače in sladice, vsaka jed z imenom, ceno, kratkim opisom in oznakami prehrane (veganska, brez glutena). Potrebujem stran za skrbnike, kjer lahko urejam jedi in označim, da so pošle. Pokaži QR kodo, ki jo lahko natisnem in ki vodi na jedilnik.

Kaj je šlo narobe: nič se ni pokvarilo, vendar je bil jedilnik na Wi-Fi v kavarni počasen, ker so se za vsako jed nalagale polne fotografije iz telefona.

Poziv za popravek:

Fotografije jedilnika so pretežke. Naložene slike zmanjšaj na največ 800 slikovnih pik v širino, jih stisni in nalagaj sproti, ko se obiskovalec pomika.

Lekcija: preizkusite pri počasni povezavi, ne samo v pisarni.

4. Sledilnik opreme ali zalog za ekipo

Kdo ga gradi: ljudje iz operative, ki nadomeščajo skupno preglednico.

Prvi poziv:

Zgradi orodje za popis zalog za našo skladiščno ekipo. Predmeti imajo ime, šifro SKU, količino, lokacijo in najmanjšo zalogo. Zaposleni se prijavijo in lahko dodajo zalogo, odvzamejo zalogo z razlogom ter vidijo seznam predmetov pod najmanjšo zalogo, označen z rdečo. Hrani zgodovino vsake spremembe in kdo jo je naredil.

Kaj je šlo narobe: zgodovina je kazala „uporabnik 3“ namesto imen, odvzem več zalog, kot jih je bilo na voljo, pa je povzročil negativno količino.

Poziv za popravek:

V zgodovini prikaži ime osebe, ne njenega ID-ja. Ne dovoli odvzema, ki bi količino spravil pod nič; namesto tega prikaži „Na zalogi so samo 4“.

Lekcija: opišite, kaj naj bo nemogoče, ne samo, kaj naj bo mogoče. Naš vodnik o gradnji aplikacije za upravljanje zalog pokrije ostalo.

5. Portal za stranke za samostojnega podjetnika ali studio

Kdo ga gradi: oblikovalci, računovodje, svetovalci in agencije.

Prvi poziv:

Zgradi portal za stranke. Stranke povabim po e-pošti. Vsaka stranka se prijavi in vidi samo svoje projekte, datoteke in račune ter lahko pušča komentarje. Kot skrbnik se prijavim in vidim vse.

Kaj je šlo narobe: to je najpomembnejša napaka na seznamu. Strani so vsaki stranki pokazale samo njene projekte, vendar je strežnik vrnil katerikoli projekt, če je bila številka v naslovni vrstici spremenjena. Klikanje po strani kot ena stranka tega ni nikoli razkrilo.

Poziv za popravek:

Preveri vsako strežniško pot, ki vrača projekte, datoteke, komentarje ali račune. Vsaka mora potrditi, da prijavljena stranka lastnik zapisa, sicer vrne „ni najdeno“. Nato preizkusi: prijavi se kot stranka A in poskusi odpreti projekt stranke B z njegovim ID-jem.

Lekcija: skrivanje nečesa na zaslonu ni isto kot zaščita. Več o tem v ali je vibe coding varen?.

6. Pristajalna stran s čakalnim seznamom

Kdo ga gradi: ustanovitelji, ki preizkušajo idejo, preden jo zgradijo.

Prvi poziv:

Zgradi pristajalno stran za aplikacijo, ki učiteljem pomaga načrtovati ure in zbirati plačila. Naslov, podnaslov, prijava z e-pošto, tri prednosti, razdelek o tem, kako deluje, in pogosta vprašanja. Prijave shrani v bazo s datumom in mi jih na zasebni strani omogoči prenesti kot CSV.

Kaj je šlo narobe: v nekaj dneh se je seznam napolnil z neresnimi prijavami botov, stran pa ni imela naslova ali opisa, zato so bile deljene povezave prazne.

Poziv za popravek:

Dodaj osnovno zaščito pred boti na obrazec za prijavo (skryto polje, ki ga botje napolnijo, in omejitev na 5 prijav na IP naslov na uro). Dodaj naslov strani, opis za iskalnike in sliko za deljenje na družbenih omrežjih.

Lekcija: javni obrazec bo nekdo našel. Glejte kako zgraditi stran s čakalnim seznamom.

7. Kvizna aplikacija za učitelja

Kdo ga gradi: učitelji in trenerji, ki želijo nekaj lažjega od sistema za e-učenje.

Prvi poziv:

Zgradi kvizno aplikacijo za moj razred. Ustvarim kvize z vprašanji z več izbirami in po enim pravilnim odgovorom. Dijaki se pridružijo s kodo in svojim imenom, odgovorijo na vprašanja in ob koncu vidijo svoj rezultat. Vidim tabelo rezultatov za vsak kviz.

Kaj je šlo narobe: pravilni odgovori so bili poslani v brskalnik skupaj z vprašanji, zato jih je radovedni dijak lahko prebral v izvorni kodi strani. Dijaki so lahko oddajali znova, dokler niso dosegli 100 %.

Poziv za popravek:

Pravilnih odgovorov ne pošiljaj v brskalnik. Odgovore preveri na strežniku po oddaji. Dovoli eno oddajo na ime dijaka za vsak kviz in učitelju pokaži, če nekdo poskusi znova.

Lekcija: brskalnik pripada uporabniku. Vse, kar je tam, je mogoče prebrati.

8. Majhno orodje z AI

Kdo ga gradi: trženjski strokovnjaki, pisci in ustanovitelji, ki želijo osredotočenega pomočnika z AI.

Prvi poziv:

Zgradi orodje, ki opis izdelka spremeni v pet objav za družbena omrežja v različnih tonih (prijazno, strokovno, igrivo, kratko, dolgo). Uporabi API za AI. Prilepim opis, izberem platformo in dobim objave z gumbi za kopiranje.

Kaj je šlo narobe: prva različica je klicala storitev AI neposredno iz brskalnika, s ključem API v strani, kjer ga je lahko kdorkoli kopiral in povzročil visok račun.

Poziv za popravek:

Premakni klic AI na strežnik. Ključ API shrani kot skrivnost, nikoli v kodo za sprednji del. Vsakemu obiskovalcu omeji na 20 generiranj na dan.

Lekcija: ključi sodijo v skrivnosti na strežniku. Glejte kako varno hraniti ključe API in kako dodati funkcije AI v svojo aplikacijo.

9. Poslovna spletna stran v arabščini in angleščini

Kdo ga gradi: podjetja v zalivskih državah in širšem arabskem svetu, ki komunicirajo v dveh jezikih.

Prvi poziv:

Zgradi spletno stran za moje podjetje za notranjo opremo v arabščini in angleščini, s preklopom jezika. Strani: domov, storitve, portfelj, o nas in kontakt. Arabščina naj bo v celoti od desne proti levi.

Kaj je šlo narobe: arabsko besedilo je bilo poravnano desno, postavitev pa ni bila zrcaljena: puščice so kazale v napačno smer, meni pa je bil na napačni strani. Telefonske številke so bile mestoma tudi prikazane v napačnem vrstnem redu.

Poziv za popravek:

V arabščini zrcali celotno postavitev: nastavi smer strani od desne proti levi, meni postavi na desno, obrni smerne ikone in telefonske številke ter e-poštne naslove ohrani od leve proti desni znotraj arabskega besedila.

Lekcija: postavitev od desne proti levi ni poravnava, ampak celotna zasnova. Mythex podpira arabščino in druge postavitve od desne proti levi, poziv pa lahko napišete neposredno v arabščini.

10. Sledilnik, ki postane aplikacija za telefon

Kdo ga gradi: trenerji, fitnes centri in skupnosti, katerih uporabniki živijo na telefonih.

Prvi poziv:

Zgradi dnevnik vadbe za moje osebne vadbene stranke. Vsaka stranka se prijavi, vidi načrt, ki sem ji ga dodelil za teden, označi vaje in zapiše uteži. Napredek vsake stranke vidim na grafikonu.

Kaj je šlo narobe: spletna aplikacija je delovala, vendar so bili na telefonih gumbi med vadbo premajhni za dotik, grafikon pa nečitljiv.

Poziv za popravek:

Oblikuj to za uporabo z eno roko na telefonu: velike površine za dotik na dnu zaslona, ena vaja na zaslon z velikima gumboma Naprej in Opravljeno ter preprost tedenski grafikon napredka.

Lekcija: če bodo ljudje uporabljali na telefonu, najprej oblikujte za telefon. Na paketu Mythex Pro se lahko objavljena aplikacija nato spremeni v aplikacijo za Android za Google Play in v aplikacijo za iPhone, poslano v TestFlight; aplikacija za telefon odpre vašo objavljeno aplikacijo, zato jo vsaka objava posodobi. Glejte stran gradnika mobilnih aplikacij.

Vzorci za vsemi temi primeri

Pri vseh desetih napake spadajo v nekaj skupin:

Nobena od teh stvari ne zahteva branja kode. Zahteva preizkušanje kot radoveden, malo sovražen uporabnik in natančen opis tega, kar vidite.

Poskusite sami

Izberite primer, ki je najbližje vaši ideji, kopirajte njegov prvi poziv in spremenite podrobnosti. Nato uporabite poziv za popravek kot kontrolni seznam, preden jo delite. Naš pregled pozivov za vibe coding ima 30 dodatnih, kako zgraditi aplikacijo z vibe codingom pa vodi en projekt od ideje do objavljene aplikacije. Ko ste pripravljeni, ga začnite v gradniku aplikacij z AI ali za hiter začetek poglejte predloge.

Vprašanja