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

Vibe coding za začetnike se zvede na pet korakov: izberite orodje, ki aplikacijo požene namesto vas, z navadnimi besedami opišite eno majhno aplikacijo, preizkusite jo kot uporabnik, zahtevajte po eno popravilo naenkrat in objavite, ko deluje. Kodirati ni treba znati. Ta vadnica vas vodi skozi vsak korak z resničnim prvim projektom, točnimi pozivi, ki jih vpišete, in napakami, ki jih skoraj vsak začetnik naredi v prvem tednu.

Če najprej želite ozadje – od kod izraz prihaja in zakaj se ljudje o njem prepirajo – preberite kaj je vibe coding. Ta stran je praktični del.

Kaj potrebujete, preden začnete

Manj, kot mislite:

• Brskalnik in račun pri orodju za vibe coding. Začetniki naj izberejo gradnik aplikacij z AI, ki napiše kodo, jo požene in gosti, namesto pomočnika za kodiranje, ki pričakuje, da datoteke in strežnike upravljate sami.
• Eno majhno idejo. Ne vašega zagonskega podjetja. Orodje za eno osebo (vas) z enim ali dvema zaslonoma.
• Eno ali dve uri brez motenj. Prva seja vas nauči ritma.

To je vse. Brez namestitev, brez tečaja programiranja, brez terminala.

Katero orodje izbrati kot začetnik

Orodje je manj pomembno kot navade, vendar mora opraviti tri stvari: med gradnjo prikazati živi predogled, omogočiti razveljavitev slabe spremembe in objaviti na povezavo, ki jo lahko delite. Naša primerjava najboljših orodij za vibe coding pošteno pokrije glavne možnosti. Mythex je med njimi: aplikacijo opišete v klepetu, zgradi pravo celovito aplikacijo z živim predogledom, doda podatkovno bazo, ko aplikacija potrebuje shranjevanje, in objavi z enim klikom. Brezplačni paket ne zahteva kartice.

Korak 1: izberite prvi projekt, ki ga lahko dokončate

Začetniki običajno odpovejo, ker cilja preveč visoko. Dober prvi projekt:

• Je uporaben vam osebno, zato ga boste resno preizkusili.
• Se prilega na en ali dva zaslona.
• Shrani majhno količino vaših lastnih podatkov.
• Nima plačil, ekip in občutljivih osebnih podatkov.

Dobri prvi projekti:

V preostanku te vadnice bomo uporabili seznam knjig za branje.

Korak 2: napišite prvi poziv

Vaše prvo sporočilo določi obliko vsega. Povejte, za koga je, kaj počne in kako naj izgleda. Ohranite ga v kratkem odstavku.

Šibek prvi poziv:

Naredi mi aplikacijo za knjige.

Dober prvi poziv:

Zgradi zame aplikacijo seznama knjig za branje. Knjigo lahko dodam z naslovom, avtorjem in stanjem (želim prebrati, berem, prebrano). Knjige prikaži kot kartice, razvrščene po stanju, najnovejše na vrhu. Stanje knjige lahko spremenim ali jo izbrišem. Naj bo čisto in preprosto: belo ozadje, ena naglasna barva, deluje na mojem telefonu. Shrani knjige, da bodo ostale tudi po osvežitvi strani.

Opazite, kaj naredi drugi. Našteva polja, dejanja, postavitev in eno pravilo, ki ga začetniki vedno pozabijo: shrani podatke tako, da preživijo osvežitev. Brez te vrstice veliko orodij zgradi stran, ki je videti končana, ob ponovnem nalaganju pa pozabi vse.

Za več izhodišč glejte naš pregled pozivov za vibe coding.

Prosite za načrt, če niste prepričani

Če niste prepričani, kako nekaj opisati, prosite AI, naj pred gradnjo načrtuje:

Preden kar koli zgradiš, mi z navadnimi besedami povej, katere zaslone boš naredil, katere podatke boš shranjeval in kaj moram odločiti jaz.

V Mythexu je za to namenjen način Plan: agent predstavi pristop, vi pa ga odobrite, preden se spremenijo datoteke.

Korak 3: preizkusite kot uporabnik, ne kot oseba, ki je gradila

Ko se prikaže predogled, ga ne le občudujte. Uporabite ga:

1. Dodajte tri knjige, med njimi eno z zelo dolgim naslovom.
2. Spremenite stanje. Ali se kartica premakne v pravilno skupino?
3. Osvežite stran. So knjige še vedno tam?
4. Poskusite dodati knjigo s praznim naslovom. Kaj se zgodi?
5. Odprite predogled na telefonu ali zožite okno brskalnika.

Zapišite, kaj ne deluje, z navadnimi besedami. „Dolg naslov pokvari postavitev kartice“ je odlično poročilo o napaki. „Pokvarjeno je“ ni.

Korak 4: popravite eno stvar na sporočilo

To je navada, ki loči ljudi, ki dokončajo, od tistih, ki obupajo. Pošljite eno spremembo, jo preverite, nato pošljite naslednjo.

Dolg naslov „Avtostoperski vodnik po galaksiji: celotna trilogija“ gre čez kartico. Dolge naslove prelomi v dve vrstici, ostalo pa odreži z „…“.

Nato:

Če obrazec oddam s praznim naslovom, se nič ne zgodi in ni nobenega sporočila. Pod polje prikaži „Dodajte naslov“ in knjige ne shrani.

Zakaj eno naenkrat? Ko zahtevate pet sprememb v enem sporočilu, lahko AI štiri naredi dobro, pri tem pa tiho nekaj drugega pokvari, vi pa ne veste, katera sprememba je povzročila težavo. Majhni koraki tudi naredijo razveljavitev uporabno: če ena sprememba gre narobe, se vrnite na različico tik pred njo in poskusite z jasnejšo zahtevo.

Ko nekaj odpove

Bo. Vsak gradnik naleti na napake. Skopirajte točno besedilo napake ali opišite natančno, na kaj ste kliknili in kaj ste videli, ter ga prilepite nazaj:

Ko kliknem Izbriši na kartici, se prikaže „Nekaj je šlo narobe“, knjiga pa ostane. Ugotovi, zakaj, in popravi. Povej mi, kaj je bil vzrok.

Pomembno je vprašati za vzrok. Nauči vas, kako aplikacije delujejo, in preprečuje, da AI samo ugiba. Naš vodnik o odpravljanju napak v aplikaciji, zgrajeni z AI, gre globlje.

Korak 5: naredite jo za svojo

Ko deluje, jo izboljšajte v enakih majhnih korakih:

• „Dodaj ocenjevanje z 1–5 zvezdicami, ki se prikaže pri prebranih knjigah.“
• „Dodaj iskalno polje nad karticami, ki filtrira po naslovu ali avtorju.“
• „Uporabi topel svetlo bel odtenek ozadja in temno zeleno naglasno barvo.“
• „Dodaj števec na vrhu: knjige, prebrane letos.“

Vsaka je ena sama sprememba, ki jo lahko preizkusite.

Korak 6: objavite in delite

Ko naredi, kar potrebujete, jo objavite. Na Mythexu je to en klik in dobite javni naslov URL, ki ga lahko odprete na katerikoli napravi ali pošljete prijatelju. Če kasneje želite svojo domeno, je to funkcija paketa Pro, naša vodnik o povezovanju domene po meri pa to razloži.

Preden kaj delite širše od nekaj prijateljev, preberite ali je vibe coding varen?. Pri osebnem seznamu knjig je tveganje majhno. Pri aplikaciji, kjer se nepoznani ljudje prijavljajo in shranjujejo podatke, morate prej opraviti preglede.

Napake začetnikov, ki se jim je treba izogniti

• Zahtevanje vsega naenkrat. „Naredi mi Goodreads“ ustvari nekaj, kar je videti impresivno, a slabo deluje. Začnite z najmanjšo uporabno različico.
• Nepreverjanje osvežitve. Podatki, ki po ponovnem nalaganju izginejo, so najpogostejše presenečenje za začetnike.
• Ponovno pisanje zahteve od začetka vsakič. Povejte, kaj spremeniti in kaj ohraniti: „Ohrani postavitev, spremeni samo barve.“
• Zaupanje v „je popravljeno“. AI bo pogosto rekel, da je napaka popravljena. Vsakič preverite sami.
• Lepljenje gesel ali ključev API v klepet. Če vaša aplikacija potrebuje ključ za zunanjo storitev, ga dajte v nastavitve skrivnosti orodja, nikoli v sporočilo ali v kodo. Glejte kako varno hraniti ključe API.
• Odnehanje po prvi napaki. Napake so normalne. Prilepite jih nazaj in vprašajte za vzrok.

Kaj se naučiti sproti

Tečaja ne potrebujete, nekaj pojmov pa bo naredilo vsako zahtevo ostrejšo. Prosite AI, naj jih razloži v kontekstu vaše lastne aplikacije:

• Frontend in backend: kaj teče v brskalniku obiskovalca in kaj na strežniku. (Frontend vs backend)
• Podatkovna baza: kje aplikacija hrani svoje podatke. (Kaj je podatkovna baza?)
• Avtentikacija: kako aplikacija ve, kdo je nekdo.
• Skrivnosti: zasebni ključi, ki jih aplikacija uporablja in jih obiskovalci nikoli ne smejo videti.

Dober poziv za to: „Razloži, kako moj seznam knjig shrani knjigo, od klika na Dodaj do shranjenja podatkov. Uporabi navadne besede in se sklicuj na dejanske datoteke.“

Vaš drugi in tretji projekt

Po prvi aplikaciji izberite nekaj za en korak težje. Sledilnik navad s tedenskim grafikonom. Obrazec za rezervacije, ki vam pošlje e-pošto. Majhno nadzorno ploščo, ki bere iz Google Sheeta. Naši primeri vibe codinga prikazujejo prave vrste aplikacij s pozivi in napakami, kako zgraditi aplikacijo z vibe codingom pa vodi večji projekt od ideje do objavljene aplikacije z uporabniki.

Ko ste pripravljeni začeti, odprite gradnik aplikacij z AI, prilepite zgornji poziv za seznam knjig in ga spremenite v svojo idejo.

Vprašanja