Alkalmazás építése vibe codinggal: az ötlettől a közzétett appig

Egy alkalmazás vibe codinggal történő építéséhez írj le egy oldalnyi leírást az első verzióról, add oda első promptként egy AI-alkalmazásépítőnek, majd nőjön az alkalmazás kis, tesztelt lépésekben: adatok, bejelentkezés, a fő munkafolyamat, csiszolás, biztonsági átnézés, és végül közzététel. Ez az útmutató egy példaprojektet követ végig minden szakaszon: egy jógastúdió órafoglaló appját, az egyes lépéseknél használt promptokkal.

Ha még soha nem építettél ilyet, a kezdőknek szóló vibe coding bemutatónk kisebb lépésekkel indul. Az általánosabb áttekintésért, amely nem kötődik a vibe codinghoz, lásd: hogyan építs alkalmazást AI-val.

A projekt

Képzelj el egy jógastúdió-tulajdonost, Sarát, aki heti nyolc órát tart. A foglalások WhatsAppon érkeznek; óránként papíron vezet listát, és gyakran túlfoglal. Azt szeretné, hogy:

• a diákok lássák a heti órarendet, és foglaljanak helyet;
• minden órának legyen kapacitása;
• minden órához legyen lista, amelyet az ajtónál ellenőrizhet;
• a diákok két órával előtte lemondhassanak.

Ez az egész első verzió. Nincs fizetés, nincs bérlet, nincs áruház. Ezek később jönnek, vagy soha.

1. lépés: Írj egy oldalas specifikációt

Mielőtt bármilyen eszközt megnyitnál, írd le egyszerű szavakkal az első verziót. Tíz perc itt órák fel-alá küldözgetését spórolja meg. Hasznos felépítés:

• Ki használja: a diákok (foglalnak és lemondanak), Sara (kezeli az órákat, látja a listákat).
• Képernyők: órarend, órarészletek, saját foglalásaim, admin órák, admin óralista.
• Adatok: órák (név, oktató, kezdés, hossz, kapacitás), foglalások (diák, óra, állapot), diákok (név, e-mail, telefon).
• Szabályok: teli órára nem lehet foglalni; diákonként egy foglalás óránként; lemondás két órával a kezdés előtt; csak Sara látja az admin oldalakat.
• Nem a v1-ben: fizetések, bérletek, várólisták, emlékeztetők.

A „nem a v1-ben” lista a legfontosabb. Ez tartja befejezhető állapotban az építést. Ha teljesebb specifikációt szeretnél, a termékkövetelmény-dokumentum AI-val történő megírásáról szóló útmutatónk tovább megy.

2. lépés: Válassz olyan eszközt, amely lefedi az egész folyamatot

Adatbázist, bejelentkezést és nyilvános URL-t igénylő alkalmazáshoz olyan AI-alkalmazásépítőt használj, amely futtatja a kódot, csatol adatbázist és közzétesz, nem olyan csevegőasszisztenst, amely fájlokat ad a kezedbe. A vibe coding eszközök összehasonlítása felsorolja a lehetőségeket. Itt a Mythexet használjuk, mert egy helyen fedi le minden lépést: csevegés, élő előnézet, valódi adatbázis és fájltárhely, valamint egykattintásos közzététel.

3. lépés: Az első prompt

Alakítsd a specifikációt egyetlen bekezdéssé. Ne illeszd be egyszerre az egész dokumentumot minden részlettel; add meg a magot, a többit lépésenként.

Építs órafoglaló alkalmazást a jógastúdiómhoz. A diákok név, e-mail és telefon megadásával regisztrálnak, látják a heti órarendet, és helyet foglalnak egy órára. Minden órának van neve, oktatója, kezdési ideje, hossza és kapacitása; a tele óra „Betelt” feliratot mutat, és nem lehet rá foglalni. A diákok látják a saját foglalásaikat, és legfeljebb két órával a kezdés előtt mondhatják le őket. Én vagyok az adminisztrátor: órákat adhatok hozzá és szerkeszthetek, és láthatom, ki van lefoglalva az egyes órákra. Nyugodt, egyszerű dizájn, amely telefonon is jól működik.

Ha nem vagy biztos benne, hogy az eszköz megértette, kérj előbb tervet. A Mythexben a Tervezés mód a képernyőket és az adatokat kódírás előtt felvázolja, és te jóváhagyod.

4. lépés: Működjön az alapciklus

Az alapciklus az, amiért az alkalmazás létezik: egy diák lefoglal egy órát, Sara pedig látja. Csak ezt teszteld:

1. Regisztrálj diákként, és foglalj egy órát.
2. Nyisd meg az admin nézetet. Ott van a foglalás?
3. Foglald le ugyanazt az órát újra. El kell utasítania.
4. Állítsd az óra kapacitását 2-re, foglald le két diák-fiókból, és próbálkozz egy harmadikkal.

Ennél a pontnál jellemzően két probléma jelentkezik. Az órarend a szerver időzónájában mutatja az időpontokat, nem a stúdióéban. A „Betelt” ellenőrzés csak az oldalon fut, így egy gyors dupla kattintás két foglalást hoz létre.

Minden óraidőt a stúdió időzónájában jelenítsd meg, [Asia/Dubai] szerint, függetlenül attól, hogy a látogató eszköze hogyan van beállítva.

Foglaláskor a szerveren ellenőrizd a kapacitást és a duplikált foglalásokat, ne csak az oldalon. Ha két kérés egyszerre érkezik az utolsó helyre, csak az egyik sikerüljön.

Előbb javítsd az alapciklust, mielőtt bármi mást hozzáadnál. Minden más ettől függ.

5. lépés: A többi szabály, üzenetenként egy

Most menj végig a specifikáció szabályain egyesével:

A diákok legfeljebb két órával az óra kezdése előtt mondhatják le a foglalásukat. Utána rejtsd el a lemondás gombot, és a szerveren utasítsd el a lemondást egy világos üzenettel.

Csak az én fiókom nyithatja meg az admin oldalakat. Ellenőrizd ezt a szerveren minden admin műveletnél, ne csak a menü elrejtésével.

Minden egyes után teszteld, és csak akkor lépj tovább, ha működik. Ha egy változtatás elrontja valami mást, állj vissza az utolsó jó checkpointhoz, és fogalmazz pontosabban, ahelyett hogy újabb javításokat halmoznál egymásra.

6. lépés: Csiszold azt, amit a valódi felhasználók észrevesznek

A valódi felhasználók az apró dolgokat is észreveszik. Rövid lista Sara alkalmazásához:

• Üres állapotok: „Erre a hétre még nincs óra” egy üres oldal helyett.
• Visszaigazolás: „Foglalásod van: Vinyasa, kedd 18:00” a foglalás után.
• Telefonos elrendezés: nagy gombok, az órarend olvasható 375 pixel széles képernyőn.
• Szabad helyek: „3 hely maradt” minden órakártyán, hogy a diákok hamarabb foglaljanak.

Minden órakártyán jelenítsd meg a szabad helyeket, pl. „12-ből 3 szabad”. Foglalás után mutass visszaigazolást az óra nevével, napjával és időpontjával, valamint egy gombot a saját foglalásaimhoz.

7. lépés: Teszteld úgy, mint egy idegen

Mielőtt bárki más használná, tölts el fél órát azzal, hogy megpróbálod eltörni:

Kérheted az AI-t is, hogy járja végig a szélsőséges eseteket:

Sorolj fel tíz dolgot, amit egy valódi diák tehet, és ami elronthatja a foglalást vagy a lemondást, teszteld mindegyiket, és javítsd, ami elbukik. Mondd meg, mit változtattál.

8. lépés: Biztonsági átnézés

Ez az alkalmazás neveket, e-mail-címeket és telefonszámokat tárol, ezért megéri egy rövid biztonsági átnézés. A fő kérdések:

• Láthat-e egy diák más diák foglalásait vagy elérhetőségeit?
• Van-e kulcs vagy jelszó olyan kódban, amely a böngészőben fut?
• Védve van-e a regisztrációs űrlap a botok ellen?
• Van-e biztonsági mentés az adatokról?

A vibe coding biztonságáról szóló oldalunk minden ellenőrzést elmagyaráz, és promptokat ad hozzájuk, a biztonsági ellenőrzőlista AI-val épített alkalmazásokhoz pedig a hosszú változat.

9. lépés: Közzététel

Amikor az alapciklus, a szabályok és az ellenőrzések átmennek, tedd közzé. A Mythexen ez egy kattintás, és az alkalmazás nyilvános URL-t kap, az adatbázisával és a tárhelyével együtt. Pro csomagban saját domaint is csatolhatsz, például book.sarasyoga.com; lásd: hogyan csatlakoztass egyedi domaint.

Mielőtt kiküldöd a linket, ellenőrizd még egyszer a közzétett verziót. Foglalj egy órát a telefonodról. Az éles és az előnézeti verziónak egyformán kell viselkednie, de ezt is nézd meg.

10. lépés: Első felhasználók és a következő verzió

Először öt rendszeres diákodnak küldd el a linket, ne mindenkinek. Kérd meg őket, hogy a következő óra foglalását ezen keresztül intézzék, és mondják el, mi volt zavaró. Utána javítsd a három legfontosabb dolgot, amit említenek.

Néhány hét valódi használat után egy ilyen alkalmazás v2-listája általában magától összeáll: várólista a tele órákra, e-mail-emlékeztető az előző estére, és online fizetett bérletek. Mindegyiket ugyanúgy kezeld: írd le néhány sorban, prompttald, teszteld, tedd közzé. A fizetések hozzáadásához lásd: hogyan adj fizetést az alkalmazásodhoz. Az alkalmazás ismertetéséhez és az első felhasználók szerzéséhez: hogyan indíts útjára egy alkalmazást és szerezz első felhasználókat.

Átalakítás telefonos alkalmazássá

Sok stúdió szeretné, ha ikon lenne a diákok telefonján. A Mythex Pro csomagban a közzétett alkalmazásból Android-alkalmazás lehet (Google Playre feltölthető fájl), és iPhone-alkalmazás, amelyet a saját App Store Connect-kulcsoddal TestFlightra küldhetsz, Mac nélkül. A telefonos alkalmazás a közzétett webalkalmazást nyitja meg, így minden frissítésnél, amelyet közzéteszel, a telefonos alkalmazás is megkapja.

Mit vigyél magaddal?

Az építés maga volt a rövid rész. Azt tette használhatóvá az alkalmazást, hogy a specifikáció „nem a v1-ben” listája volt, az alapciklust tesztelték először minden mást előtt, a kapacitás- és hozzáférési szabályok a szerveren futottak, és öt valódi felhasználó volt, mielőtt ötven lett volna. Így néz ki a vibe coding, amikor az alkalmazásnak más embereknek kell működnie.

Kész kipróbálni a sajátodat? Írd meg az egyoldalas specifikációdat, majd illeszd be az első bekezdést az AI-alkalmazásépítőbe. Ha több alkalmazástípust és az azokhoz tartozó promptokat szeretnél látni, olvasd el a vibe coding példáinkat.

Kérdések