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

Vibe coding za početnike svodi se na pet koraka: izaberite alat koji pokreće aplikaciju umjesto vas, opišite jednu malu aplikaciju običnim riječima, isprobajte je kao korisnik, tražite jednu popravku po jednu i objavite kad radi. Ne morate znati programirati. Ovaj tutorijal prolazi kroz svaki korak sa stvarnim prvim projektom, tačnim promptima koje treba upisati i greškama koje skoro svaki početnik napravi u prvoj sedmici.

Ako prvo želite pozadinu, gdje je pojam nastao i zašto se o njemu raspravlja, pročitajte šta je vibe coding. Ova stranica je praktični dio.

Šta vam treba prije početka

Manje nego što mislite:

• Pregledač i nalog kod alata za vibe coding. Početnici treba da izaberu AI alat za izradu aplikacija, koji piše kod, pokreće ga i hostuje, a ne asistenta za kodiranje u kojem sami upravljate fajlovima i serverima.
• Jednu malu ideju. Ne vaš startup. Alat za jednu osobu (vas) sa jednim ili dva ekrana.
• Sat ili dva bez prekida. Prva sesija vas nauči ritmu.

To je sve. Nema instalacija, nema kursa programiranja, nema terminala.

Koji alat izabrati kao početnik

Alat je manje važan od navika, ali treba da radi tri stvari: da prikazuje živi pregled dok gradi, da omogućava poništavanje loše promjene i da objavljuje na link koji možete podijeliti. Naše poređenje najboljih alata za vibe coding iskreno pokriva glavne opcije. Mythex je jedna od njih: opišete aplikaciju u chatu, on pravi pravu full-stack aplikaciju sa živim pregledom, dodaje bazu podataka kad aplikaciji treba da pamti stvari i objavljuje jednim klikom. Free plan ne traži karticu.

Korak 1: izaberite prvi projekat koji možete završiti

Početnici obično propadnu jer ciljaju previše. Dobar prvi projekat:

• Korisna je vama lično, pa ćete je pravilno testirati.
• Staje na jedan ili dva ekrana.
• Čuva malu količinu vaših podataka.
• Nema plaćanja, timova i osjetljivih ličnih podataka.

Dobri prvi projekti:

U ostatku tutorijala koristićemo listu za čitanje.

Korak 2: napišite prvi prompt

Vaša prva poruka određuje oblik svega. Recite za koga je aplikacija, šta radi i kako treba da izgleda. Držite je u kratkom pasusu.

Slab prvi prompt:

Napravi mi aplikaciju za knjige.

Dobar prvi prompt:

Napravi aplikaciju za listu za čitanje za mene. Mogu dodati knjigu sa naslovom, autorom i statusom (želim da pročitam, čitam, pročitano). Prikaži knjige kao kartice grupisane po statusu, najnovije prve. Mogu promijeniti status knjige ili je obrisati. Neka bude čisto i jednostavno: bijela pozadina, jedna akcentna boja, radi na mom telefonu. Sačuvaj knjige da ostanu tu i nakon osvježavanja stranice.

Primijetite šta drugi prompt radi. Navodi polja, radnje, raspored i jedno pravilo koje početnici uvijek zaborave: sačuvaj podatke da prežive osvježavanje. Bez te rečenice mnogi alati naprave stranicu koja izgleda završeno, ali sve zaboravi kad je ponovo učitate.

Za više polazišta pogledajte naš spisak promptova za vibe coding.

Zatražite plan kad niste sigurni

Ako niste sigurni kako nešto opisati, zamolite AI da isplanira prije gradnje:

Prije nego što išta napraviš, objasni mi običnim riječima koje ćeš ekrane napraviti, koje podatke ćeš čuvati i šta treba da odlučim ja.

U Mythexu je ovo za režim Plan: agent iznese pristup, a vi ga odobrite prije nego što se fajlovi promijene.

Korak 3: testirajte kao korisnik, a ne kao osoba koja je pravila

Kad se pojavi pregled, nemojte ga samo gledati. Koristite ga:

1. Dodajte tri knjige, uključujući jednu sa veoma dugim naslovom.
2. Promijenite status. Da li se kartica premjestila u pravu grupu?
3. Osvježite stranicu. Da li su knjige i dalje tu?
4. Pokušajte dodati knjigu s praznim naslovom. Šta se dešava?
5. Otvorite pregled na telefonu ili suzite prozor pregledača.

Zapišite šta ne radi, običnim riječima. „Dugi naslov lomi raspored kartice” je savršen izvještaj o grešci. „Pokvareno je” nije.

Korak 4: popravite jednu stvar po poruci

Ovo je navika koja razdvaja one koji završe od onih koji odustanu. Pošaljite jednu promjenu, provjerite je, pa pošaljite sljedeću.

Dugi naslov „The Hitchhiker’s Guide to the Galaxy: The Complete Trilogy” prelazi preko kartice. Prelomi duge naslove u dva reda i ostatak skrati sa „…”.

Zatim:

Ako pošaljem formular s praznim naslovom, ništa se ne dešava i nema poruke. Prikaži „Dodaj naslov” ispod polja i nemoj sačuvati knjigu.

Zašto jedna po jedna? Kad u jednoj poruci tražite pet promjena, AI može četiri da uradi dobro, a jednu tiho pokvari, i nećete znati koja promjena je uzrokovala problem. Mali koraci takođe čine poništavanje korisnim: ako jedna promjena pođe loše, vratite se na verziju prije nje i pokušajte jasniji zahtjev.

Kad nešto pukne

Hoće. Svaki alat za izradu nailazi na greške. Kopirajte tačan tekst greške ili opišite tačno šta ste kliknuli i šta ste vidjeli, pa to nalijepite nazad:

Kad kliknem Obriši na kartici, vidim „Nešto je pošlo po zlu” i knjiga ostane. Pronađi zašto se to dešava i popravi. Reci mi koji je bio uzrok.

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

Korak 5: prilagodite je sebi

Kad radi, unaprijedite je istim malim koracima:

• „Dodaj ocjenu od 1 do 5 zvjezdica koja se prikazuje na završenim knjigama.”
• „Dodaj polje za pretragu iznad kartica koje filtrira po naslovu ili autoru.”
• „Koristi toplu bijelu pozadinu i tamno zelenu akcentnu boju.”
• „Dodaj brojač na vrhu: knjige završene ove godine.”

Svaka je jedna promjena koju je moguće testirati.

Korak 6: objavite i podijelite

Kad radi ono što trebate, objavite. Na Mythexu je to jedan klik i dobijate javni URL koji možete otvoriti na bilo kom uređaju ili poslati prijatelju. Ako kasnije želite svoj domen, to je funkcija Pro plana, a naš vodič o povezivanju prilagođenog domena to objašnjava.

Prije nego što išta podijelite širem krugu od nekoliko prijatelja, pročitajte da li je vibe coding siguran?. Za ličnu listu za čitanje rizik je nizak. Za aplikaciju u koju se nepoznati ljudi prijavljuju i čuvaju podatke, prije toga treba uraditi provjere.

Greške koje početnici treba da izbjegnu

• Traženje svega odjednom. „Napravi mi Goodreads” daje nešto što izgleda impresivno a radi loše. Počnite s najmanjom korisnom verzijom.
• Nepravljenje testa osvježavanja. Podaci koji nestanu pri ponovnom učitavanju su najčešće iznenađenje za početnike.
• Ponovno pisanje zahtjeva od nule svaki put. Recite šta treba promijeniti i šta treba zadržati: „Zadrži raspored, promijeni samo boje.”
• Vjerovanje u „popravljeno je”. AI će često reći da je greška popravljena. Provjerite sami svaki put.
• Lijepljenje lozinki ili API ključeva u chat. Ako vaša aplikacija treba ključ za spoljašnji servis, stavite ga u postavke tajni alata, nikad u poruku ili u kod. Pogledajte kako čuvati API ključeve.
• Odustajanje nakon prve greške. Greške su normalne. Nalijepite ih nazad i tražite uzrok.

Šta učiti usput

Ne treba vam kurs, ali nekoliko ideja će učiniti svaki zahtjev jasnijim. Zamolite AI da ih objasni na primjeru vaše aplikacije:

• Frontend i backend: šta se izvršava u pregledaču posjetioca, a šta na serveru. (Frontend naspram backenda)
• Baza podataka: gdje vaša aplikacija čuva podatke. (Šta je baza podataka?)
• Autentifikacija: kako aplikacija zna ko je neko.
• Tajne: privatni ključevi koje aplikacija koristi, a posjetioci ih nikad ne smiju vidjeti.

Dobar prompt za ovo: „Objasni kako moja lista za čitanje čuva knjigu, od klika na Dodaj do pohranjivanja podataka. Koristi obične riječi i pozovi se na stvarne fajlove.”

Drugi i treći projekat

Nakon prve aplikacije izaberite nešto za jedan korak teže. Tracker navika sa sedmičnim grafikonom. Formular za rezervaciju koji vam šalje email. Mali dashboard koji čita iz Google tabele. Naši primjeri vibe codinga prikazuju stvarne tipove aplikacija sa promptima i greškama koje su se javile, a kako napraviti aplikaciju vibe codingom vodi većim projektom od ideje do objavljene aplikacije s korisnicima.

Kad budete spremni da počnete, otvorite AI alat za izradu aplikacija, nalijepite prompt za listu za čitanje i promijenite ga u svoju ideju.

Pitanja