Vibe coding za početnike: kako početi, korak po korak

Vibe coding za početnike svodi se na pet koraka: odaberi alat koji aplikaciju pokreće umjesto tebe, opiši jednu malu aplikaciju običnim riječima, isprobaj je kao korisnik, traži po jednu popravku u jednom trenutku i objavi kad radi. Ne moraš znati programirati. Ovaj vodič prolazi kroz svaki korak s pravim prvim projektom, točnim upitima koje upisuješ i greškama koje gotovo svaki početnik napravi u prvom tjednu.

Ako želiš prvo pozadinu, odakle pojam dolazi i zašto se ljudi o njemu svađaju, pročitaj što je vibe coding. Ova stranica je praktična strana.

Što ti treba prije početka

Manje nego što misliš:

• Preglednik i račun kod alata za vibe coding. Početnici trebaju odabrati AI graditelj aplikacija, koji piše kod, pokreće ga i hosta, a ne asistenta za kodiranje koji očekuje da sam upravljaš datotekama i poslužiteljima.
• Jednu malu ideju. Ne tvoj startup. Alat za jednu osobu (tebe) s jednim ili dva ekrana.
• Sat-dva bez prekida. Prva sesija te nauči ritmu.

To je sve. Nema instalacija, nema tečaja programiranja, nema terminala.

Koji alat odabrati kao početnik

Alat je manje važan od navika, ali mora raditi tri stvari: prikazivati živi pregled dok gradi, dopuštati ti da poništiš lošu promjenu i objaviti na poveznicu koju možeš podijeliti. Naša usporedba najboljih alata za vibe coding iskreno pokriva glavne opcije. Mythex je jedna od njih: opišeš aplikaciju u chatu, on izgradi pravu full-stack aplikaciju sa živim pregledom, doda bazu podataka kada aplikacija treba nešto pamtiti i objavi jednim klikom. Paket Free ne traži karticu.

Korak 1: Odaberi prvi projekt koji možeš završiti

Početnici obično propadaju jer ciljaju preveliko. Dobar prvi projekt:

• Korisna je tebi osobno, pa ćeš ga pravilno testirati.
• Stane na jedan ili dva ekrana.
• Sprema malu količinu tvojih vlastitih podataka.
• Nema plaćanja, timova i osjetljivih osobnih podataka.

Dobri prvi projekti:

U ostatku ovog vodiča koristit ćemo popis za čitanje.

Korak 2: Napiši prvi upit

Tvoja prva poruka oblikuje sve ostalo. Reci za koga je, što radi i kako treba izgledati. Neka bude kratak odlomak.

Slab prvi upit:

Napravi mi aplikaciju za knjige.

Dobar prvi upit:

Napravi mi aplikaciju za popis knjiga za čitanje. Mogu dodati knjigu s naslovom, autorom i statusom (želim čitati, čitam, pročitano). Knjige prikazuj kao kartice grupirane po statusu, s najnovijima na vrhu. Mogu promijeniti status knjige ili je obrisati. Neka bude čisto i jednostavno: bijela pozadina, jedna naglasna boja, radi na mom telefonu. Spremi knjige da ostanu tu i nakon osvježavanja.

Primijeti što drugi upit čini. Navodi polja, radnje, raspored i jedno pravilo koje početnici uvijek zaborave: spremi podatke da prežive osvježavanje. Bez te rečenice mnogi alati naprave stranicu koja izgleda gotova, ali pri ponovnom učitavanju zaboravi sve.

Za više polazišnih točaka pogledaj naš cheat sheet s upitima za vibe coding.

Zatraži plan kad nisi siguran

Ako nisi siguran kako nešto opisati, zamoli AI da isplanira prije nego gradi:

Prije nego išta napišeš, opiši običnim riječima koje ćeš ekrane napraviti, koje podatke ćeš spremati i što trebam ja odlučiti.

U Mythexu upravo je za to mod Plan: agent iznese pristup, a ti ga odobriš prije nego se promijeni ijedna datoteka.

Korak 3: Testiraj kao korisnik, a ne kao osoba koja ju je napravila

Kada se pojavi pregled, ne samo se diviti. Koristi ga:

1. Dodaj tri knjige, uključujući jednu s vrlo dugim naslovom.
2. Promijeni status. Prelazi li kartica u pravu grupu?
3. Osvježi stranicu. Jesu li knjige još tu?
4. Pokušaj dodati knjigu s praznim naslovom. Što se događa?
5. Otvori pregled na telefonu ili suzi prozor preglednika.

Zapiši što nije u redu običnim riječima. „Dug naslov kvari raspored kartice“ je savršen prijavak greške. „Ne radi“ nije.

Korak 4: Popravi jednu stvar po poruci

Ovo je navika koja razdvaja one koji završe od onih koji odustanu. Pošalji jednu promjenu, provjeri je, zatim sljedeću.

Dugi naslov „The Hitchhiker's Guide to the Galaxy: The Complete Trilogy“ izlazi iz kartice. Prelomi duge naslove u dva reda i odreži ostatak s „…“.

Zatim:

Ako pošaljem obrazac s praznim naslovom, ništa se ne događa i nema poruke. Ispod polja prikaži „Dodaj naslov“ i nemoj spremiti knjigu.

Zašto jedno po jedno? Kada u jednoj poruci zatražiš pet promjena, AI može četiri napraviti dobro i tiho pokvariti nešto drugo, a ti nećeš znati koja promjena je to izazvala. Mali koraci čine poništavanje korisnim: ako jedna promjena pođe krivo, vrati se na verziju prije nje i pokušaj jasnijim zahtjevom.

Kada nešto pukne

Hoće. Svi graditelji naiđu na greške. Kopiraj točan tekst greške ili opiši točno što si kliknuo i što si vidio, pa to zalijepi natrag:

Kada kliknem Obriši na kartici, vidim „Nešto je pošlo po zlu“ i knjiga ostaje. Pronađi zašto i popravi. Reci mi što je bio uzrok.

Traženje uzroka je važno. Uči te kako aplikacije rade i sprječava AI da nagađa. Naš vodič o tome kako ispraviti grešku u aplikaciji napravljenoj AI-jem ide dublje.

Korak 5: Prilagodi je sebi

Kada radi, poboljšavaj je u istim malim koracima:

• „Dodaj ocjenu od 1 do 5 zvjezdica koja se prikazuje na pročitanim knjigama.“
• „Dodaj polje za pretragu iznad kartica koje filtrira po naslovu ili autoru.“
• „Koristi topli pozadinski ton i tamnozelenu naglasnu boju.“
• „Dodaj brojač na vrhu: knjige pročitane ove godine.“

Svaka je jedna promjena koju se može testirati.

Korak 6: Objavi i podijeli

Kada radi ono što treba, objavi je. Na Mythexu je to jedan klik i dobiješ javnu URL adresu koju možeš otvoriti na bilo kojem uređaju ili poslati prijatelju. Ako kasnije želiš vlastitu domenu, to je značajka paketa Pro, a naš vodič o povezivanju prilagođene domene to objašnjava.

Prije nego išta podijeliš izvan nekolicine prijatelja, pročitaj je li vibe coding siguran?. Za osobni popis za čitanje rizik je nizak. Za aplikaciju u kojoj nepoznati ljudi se prijavljuju i spremaju podatke, postoje provjere koje moraš prvo napraviti.

Greške koje početnici čine

• Traženje svega odjednom. „Napravi mi Goodreads“ proizvodi nešto što izgleda impresivno, a radi loše. Počni s najmanjom korisnom verzijom.
• Nepotvrđivanje osvježavanja. Podaci koji nestaju pri ponovnom učitavanju najčešće su iznenađenje za početnike.
• Ponovno pisanje zahtjeva od nule svaki put. Reci što promijeniti i što zadržati: „Zadrži raspored, promijeni samo boje.“
• Vjerovanje „popravljeno je“. AI će često reći da je greška popravljena. Provjeri sam svaki put.
• Lijepljenje lozinki ili API ključeva u chat. Ako ti aplikacija treba ključ vanjske usluge, stavi ga u postavke tajni alata, nikada u poruku ili u kod. Pogledaj kako čuvati API ključeve na sigurnom.
• Odustajanje nakon prve greške. Greške su normalne. Zalijepi ih natrag i traži uzrok.

Što učiti usput

Ne treba ti tečaj, ali nekoliko pojmova čini svaki zahtjev oštrijim. Zamoli AI da ih objasni na primjeru tvoje aplikacije:

• Frontend i backend: što se izvodi u pregledniku posjetitelja, a što na poslužitelju. (Frontend vs backend)
• Baza podataka: gdje aplikacija čuva podatke. (Što je baza podataka?)
• Autentikacija: kako aplikacija zna tko je netko.
• Tajne: privatni ključevi koje aplikacija koristi, a posjetitelji ih nikada ne smiju vidjeti.

Dobar upit za to: „Objasni kako moj popis za čitanje sprema knjigu, od klika na Dodaj do pohrane podatka. Koristi običan jezik i navedi stvarne datoteke.“

Tvoj drugi i treći projekt

Nakon prve aplikacije odaberi nešto korak teže. Pratitelj navika s tjednim grafikonom. Obrazac za rezervacije koji ti šalje e-poštu. Mala nadzorna ploča koja čita iz Google tablice. Naši primjeri vibe codinga prikazuju stvarne vrste aplikacija s upitima iza njih i onim što je pošlo po zlu, a kako napraviti aplikaciju vibe codingom vodi veći projekt od ideje do objavljene aplikacije s korisnicima.

Kada budeš spreman za početak, otvori AI graditelj aplikacija, zalijepi gornji upit za popis za čitanje i promijeni ga u svoju ideju.

Pitanja