Vibe coding kezdőknek: hogyan kezdj, lépésről lépésre

A vibe coding kezdőknek öt lépésre bomlik: válassz egy eszközt, amely futtatja az appot helyetted, írj le egy kis appot egyszerű szavakkal, próbáld ki felhasználóként, kérj egyszerre egy javítást, és publikáld, ha működik. Nem kell tudnod programozni. Ez az útmutató minden lépésen végigvezet egy valódi első projekttel, a pontos promptokkal, amiket be kell írnod, és azokkal a hibákkal, amelyeket szinte minden kezdő elkövet az első héten.

Ha előbb a háttérre vagy kíváncsi, hogy honnan jön a kifejezés és miért vitatják, olvasd el a mi a vibe coding oldalt. Ez az oldal a gyakorlati részt viszi.

Mire lesz szükséged, mielőtt elkezdesz

Kevesebbre, mint gondolnád:

• Böngészőre és fiókra egy vibe coding eszköznél. Kezdőknek olyan AI app-építőt válassz, amely megírja a kódot, futtatja és hostolja, nem pedig olyan kódolóasszisztenst, amelynél neked kell kezelni a fájlokat és a szervereket.
• Egy kis ötletre. Nem a startupodra. Egy eszközre egyetlen személynek (neked), egy-két képernyővel.
• Egy-két óra zavarás nélkül. Az első alkalom megtanítja a ritmust.

Ennyi. Nincs telepítés, nincs programozási kurzus, nincs terminál.

Melyik eszközt válaszd kezdőként

Az eszköz kevésbé számít, mint a szokások, de három dolgot tudnia kell: élő előnézetet mutatni építés közben, lehetővé tenni egy rossz változtatás visszavonását, és publikálni egy megosztható linkre. A legjobb vibe coding eszközök összehasonlításunk őszintén bemutatja a fő lehetőségeket. A Mythex is közöttük van: chatben írod le az appot, valódi, teljes stackes appot épít élő előnézettel, adatbázist ad hozzá, amikor az appnak emlékeznie kell valamire, és egy kattintással publikál. A Free csomaghoz nem kell kártya.

1. lépés: Válassz olyan első projektet, amit be tudsz fejezni

A kezdők általában azért buknak meg, mert túl nagyot céloznak. Egy jó első projekt:

• Személyesen hasznos számodra, így alaposan tesztelni fogod.
• Egy-két képernyőre elfér.
• Kevés, saját adatot tárol.
• Nincs benne fizetés, csapat vagy érzékeny személyes adat.

Jó első projektek:

Az útmutató további részében az olvasási listát használjuk.

2. lépés: Írd meg az első promptodat

Az első üzeneted adja meg minden alakját. Mondd meg, kinek szól, mit csinál, és hogyan nézzen ki. Maradj egy rövid bekezdésnél.

Gyenge első prompt:

Csinálj nekem könyvappot.

Jó első prompt:

Építs nekem olvasási listát. Könyvet tudok hozzáadni címmel, szerzővel és állapottal (olvasni akarom, olvasom, befejeztem). A könyvek kártyákon jelenjenek meg állapot szerint csoportosítva, a legújabb legelöl. Az állapotot megváltoztathatom vagy törölhetem. Legyen tiszta és egyszerű: fehér háttér, egy kiemelő szín, működjön a telefonomon. Mentsd el a könyveket, hogy frissítés után is megmaradjanak.

Figyeld meg, mit csinál a második. Felsorolja a mezőket, a műveleteket, az elrendezést és egy szabályt, amelyet a kezdők mindig elfelejtenek: mentsd el az adatokat, hogy frissítés után is megmaradjanak. Ennek a sornak a hiányában sok eszköz olyan oldalt épít, amely késznek látszik, de újratöltéskor mindent elfelejt.

További kiindulópontokért lásd a vibe coding promptok puskáját.

Kérj tervet, ha bizonytalan vagy

Ha nem tudod, hogyan írj le valamit, kérd meg az AI-t, hogy tervezzen, mielőtt épít:

Mielőtt bármit építenél, mondd el egyszerű szavakkal, milyen képernyőket készítenél, milyen adatokat tárolnál, és miben kell döntenem.

A Mythexben ehhez való a Plan mód: az ügynök felvázolja a megközelítést, és te jóváhagyod, mielőtt bármelyik fájl változna.

3. lépés: Teszteld felhasználóként, ne úgy, mint aki építette

Amikor megjelenik az előnézet, ne csak nézd. Használd:

1. Adj hozzá három könyvet, köztük egyet nagyon hosszú címmel.
2. Változtass állapotot. A kártya a jó csoportba kerül?
3. Frissítsd az oldalt. Megvannak még a könyvek?
4. Próbálj könyvet hozzáadni üres címmel. Mi történik?
5. Nyisd meg az előnézetet a telefonodon, vagy szűkítsd a böngészőablakot.

Írd le egyszerű szavakkal, mi a hiba. „A hosszú cím széteseti a kártyát” tökéletes hibajelentés. „Nem működik” nem az.

4. lépés: Egyszerre egy dolgot javíts

Ez az a szokás, amely megkülönbözteti azokat, akik befejezik, azoktól, akik feladják. Küldj egy változtatást, ellenőrizd, aztán küldd a következőt.

A „The Hitchhiker's Guide to the Galaxy: The Complete Trilogy” hosszú cím kilóg a kártyából. Tördeld a hosszú címeket két sorba, a többit pedig vágd le „…” jellel.

Majd:

Ha üres címmel küldöm be az űrlapot, semmi nem történik, és nincs üzenet. Mutass „Adj meg címet” üzenetet a mező alatt, és ne mentsd el a könyvet.

Miért egyesével? Ha öt változtatást kérsz egy üzenetben, az AI lehet, hogy négyet jól csinál, és közben csendben elront valami mást, és nem fogod tudni, melyik változtatás okozta. A kis lépések a visszavonást is hasznossá teszik: ha egy változtatás rosszul sül el, térj vissza az előző verzióhoz, és próbálj világosabb kérést.

Ha valami elromlik

Elromlik. Minden építő hibázik. Másold ki a pontos hibaszöveget, vagy írd le pontosan, mire kattintottál és mit láttál, és illeszd vissza:

Amikor a kártyán a Törlés gombra kattintok, ezt látom: „Valami nem sikerült”, és a könyv marad. Derítsd ki, miért, és javítsd. Mondd meg, mi volt az ok.

Az ok kérése számít. Megtanít arra, hogyan működnek az appok, és megakadályozza, hogy az AI találgasson. Az AI-építette app hibakeresése útmutatónk mélyebbre megy.

5. lépés: Tedd magadévá

Amikor működik, ugyanazokkal a kis lépésekkel javítsd tovább:

• „Adjon hozzá 1–5 csillagos értékelést, amely a befejezett könyveknél látszik.”
• „Adjunk egy keresőmezőt a kártyák fölé, amely címre vagy szerzőre szűr.”
• „Használj meleg, törtfehér hátteret és sötétzöld kiemelést.”
• „Adjunk egy számlálót a tetejére: az idén befejezett könyvek száma.”

Mindegyik egyetlen, tesztelhető változtatás.

6. lépés: Publikáld és oszd meg

Amikor azt csinálja, amire szükséged van, publikáld. A Mythexben ez egy kattintás, és nyilvános URL-t kapsz, amelyet bármilyen eszközön megnyithatsz, vagy elküldhetsz egy barátnak. Ha később saját domaint szeretnél, az a Pro csomag funkciója, és a egyedi domain csatlakoztatásáról szóló útmutatónk elmagyarázza.

Mielőtt néhány baráton túl bármit megosztanál, olvasd el: biztonságos-e a vibe coding?. Egy személyes olvasási listánál a kockázat alacsony. Olyan appnál, ahol idegenek regisztrálnak és adatot tárolnak, előbb ellenőrzéseket kell végezni.

Kezdők gyakori hibái

• Mindent egyszerre kérni. A „Csinálj nekem Goodreadst” impozánsnak látszó, de rosszul működő dolgot ad. Kezdd a legkisebb hasznos változattal.
• Nem tesztelni a frissítést. Az újratöltéskor eltűnő adat a legnagyobb kezdő meglepetés.
• Minden alkalommal a kérést elölről megírni. Mondd meg, mit változtass és mit tartsál meg: „Tartsd az elrendezést, csak a színeket módosítsd.”
• Megbízni abban, hogy „javítva van”. Az AI gyakran mondja, hogy egy hiba javítva van. Mindig ellenőrizd magad.
• Jelszavakat vagy API-kulcsokat beilleszteni a chatbe. Ha az appodnak kulcs kell egy külső szolgáltatáshoz, az eszköz titkok beállításaiba tedd, soha nem üzenetbe vagy kódba. Lásd hogyan őrizd biztonságban az API-kulcsokat.
• Az első hibánál feladni. A hibák normálisak. Illeszd vissza őket, és kérdezd meg az okot.

Amit menet közben tanulj meg

Nem kell kurzus, de néhány fogalom élesebbé teszi minden kérésed. Kérd meg az AI-t, hogy magyarázza el őket a saját appod kontextusában:

• Frontend és backend: mi fut a látogató böngészőjében, és mi a szerveren. (Frontend vs backend)
• Adatbázis: hol tárolja az app az adatait. (Mi az adatbázis?)
• Hitelesítés: hogyan tudja az app, ki az adott személy.
• Titkok: privát kulcsok, amelyeket az app használ, és a látogatóknak soha nem szabad látniuk.

Erre jó prompt: „Magyarázd el, hogyan menti el a könyvemet az olvasási lista, a Hozzáadás gombra kattintástól addig, amíg az adat tárolódik. Egyszerű szavakkal, a tényleges fájlokra hivatkozva.”

A második és harmadik projekt

Az első app után válassz egy lépéssel nehezebbet. Szokáskövető heti diagrammal. Foglalási űrlap, amely e-mailt küld. Kis irányítópult, amely egy Google Táblázatból olvas. A vibe coding példák valódi appfajtákat mutatnak be a mögöttes promptokkal és a hibákkal, a hogyan építs appot vibe codinggal pedig egy nagyobb projektet visz végig az ötlettől a publikált, felhasználókkal rendelkező appig.

Amikor készen állsz, nyisd meg az AI app-építőt, illeszd be az olvasási lista promptot, és cseréld ki a saját ötletedre.

Kérdések