Jak vytvořit aplikaci pomocí vibe codingu: od nápadu po publikovanou aplikaci

Aplikaci pomocí vibe codingu vytvoříte tak, že napíšete jednostránkový popis první verze, dáte ho nástroji pro tvorbu AI aplikací jako první prompt a pak aplikaci rozvíjíte v malých otestovaných krocích: data, přihlášení, hlavní postup, vyladění, bezpečnostní kontrola a nakonec publikování. Tento průvodce sleduje jeden příklad, aplikaci pro rezervace lekcí malého jógového studia, každou fází a prompty použitými v každém kroku.

Pokud jste nic takto nestavěli, náš návod na vibe coding pro začátečníky začíná menším projektem. Pro širší přehled, který není vázaný na vibe coding, viz jak vytvořit aplikaci pomocí AI.

Projekt

Představte si majitelku studia, Saru, která vede osm lekcí týdně. Rezervace chodí přes WhatsApp; vede papírový seznam pro každou lekci a často dvakrát obsadí jedno místo. Chce, aby:

• studenti viděli rozvrh na týden a rezervovali si místo,
• každá lekce měla kapacitu,
• měla seznam pro každou lekci, který může zkontrolovat u dveří,
• studenti mohli rezervaci zrušit nejpozději dvě hodiny předem.

To je celá první verze. Žádné platby, žádná členství, žádný obchod s aplikacemi. Ty přijdou později, nebo vůbec.

Krok 1: Napište jednostránkovou specifikaci

Předtím, než otevřete jakýkoli nástroj, zapište první verzi prostými slovy. Deset minut tady ušetří hodiny zbytečného dohadování. Užitečná podoba:

• Kdo to používá: studenti (rezervují a ruší), Sara (spravuje lekce, vidí seznamy).
• Obrazovky: rozvrh, detail lekce, moje rezervace, admin lekce, admin seznam lekcí.
• Data: lekce (název, lektor, čas začátku, délka, kapacita), rezervace (student, lekce, stav), studenti (jméno, e-mail, telefon).
• Pravidla: nelze rezervovat plnou lekci; jedna rezervace na studenta a lekci; zrušení nejpozději dvě hodiny předem; admin stránky vidí jen Sara.
• Není v první verzi: platby, permanentky, čekací listiny, připomínky.

Seznam „není v první verzi“ je nejdůležitější. Právě ten udrží stavbu dokončitelnou. Náš průvodce psaním požadavků na produkt s AI jde dále, pokud chcete plnější specifikaci.

Krok 2: Vyberte nástroj, který zvládne celý cyklus

Pro aplikaci s databází, přihlášeními a veřejnou URL použijte nástroj pro tvorbu AI aplikací, který kód spouští, připojí databázi a publikuje, a ne chatovacího asistenta, který vám předá soubory. Náš přehled nástrojů pro vibe coding uvádí možnosti. Zde použijeme Mythex, protože pokrývá každý krok na jednom místě: chat, živý náhled, skutečnou databázi a úložiště souborů a publikování jedním kliknutím.

Krok 3: První prompt

Přeneste specifikaci do jednoho odstavce. Nevkládejte celý dokument najednou se všemi detaily; dejte jádro a zbytek přidávejte po krocích.

Vytvoř aplikaci pro rezervace lekcí pro mé jógové studio. Studenti se registrují jménem, e-mailem a telefonem, vidí rozvrh na tento týden a rezervují si místo v lekci. Každá lekce má název, lektora, čas začátku, délku a kapacitu; plná lekce ukáže „Obsazeno“ a nejde rezervovat. Studenti vidí své rezervace a mohou je zrušit nejpozději dvě hodiny před lekcí. Jsem admin: mohu přidávat a upravovat lekce a vidět seznam, kdo je na každou přihlášen. Klidný, jednoduchý design, který dobře funguje na telefonech.

Pokud si nejste jistí, že nástroj vám rozumí, požádejte nejdřív o plán. V Mythexu režim Plan rozvrhne obrazovky a data před psaním kódu a vy ho schválíte.

Krok 4: Zprovozněte jádro

Jádro je to jediné, kvůli čemu aplikace existuje: student si rezervuje lekci a Sara to vidí. Testujte jen to:

1. Zaregistrujte se jako student a rezervujte lekci.
2. Otevřete admin pohled. Je tam rezervace?
3. Rezervujte stejnou lekci znovu. Mělo by to odmítnout.
4. Nastavte kapacitu lekce na 2, rezervujte ji ze dvou studentských účtů a zkuste třetí.

V tomto bodě se obvykle objeví dva problémy. Rozvrh ukazuje časy v časovém pásmu serveru, ne studia. A kontrola „Obsazeno“ běží jen ve stránce, takže rychlé dvojklik vytvoří dvě rezervace.

Zobrazuj všechny časy lekcí v časovém pásmu studia, [Asia/Dubai], bez ohledu na nastavení zařízení návštěvníka.

Kontroluj kapacitu a duplicitní rezervace na serveru ve chvíli vytvoření rezervace, ne jen ve stránce. Pokud dorazí dva požadavky současně na poslední místo, měl by uspět jen jeden.

Opravte jádro, než přidáte cokoli dalšího. Všechno ostatní na něm závisí.

Krok 5: Přidejte zbývající pravidla, po jednom ve zprávě

Teď projděte pravidla ze specifikace jedno po druhém:

Studenti mohou zrušit rezervaci nejpozději dvě hodiny před začátkem lekce. Potom skryj tlačítko zrušit a na serveru zrušení odmítni s jasnou zprávou.

Admin stránky smí otevřít jen můj účet. Ověř to na serveru u každé admin akce, ne jen skrytím menu.

Po každém pravidle otestujte a pokračujte, až když funguje. Pokud změna něco rozbije, vraťte se k poslednímu dobrému checkpointu a zkuste jasnější požadavek, místo abyste na chybu nabalovali další opravy.

Krok 6: Vyladěte to, čeho si skuteční uživatelé všimnou

Skuteční uživatelé si všimnou malých věcí. Krátký seznam pro Sařinu aplikaci:

• Prázdné stavy: „Tento týden zatím žádné lekce“ místo prázdné stránky.
• Potvrzení: „Jste přihlášeni na Vinyasu, úterý 18:00“ po rezervaci.
• Rozložení pro telefon: velká tlačítka, rozvrh čitelný na obrazovce 375 px.
• Volná místa: „3 volná místa“ u každé lekce, aby studenti rezervovali dřív.

U každé karty lekce ukaž volná místa, např. „3 z 12 volných“. Po rezervaci ukaž potvrzení s názvem lekce, dnem a časem a tlačítkem na moje rezervace.

Krok 7: Testujte jako cizí člověk

Než to použije kdokoli jiný, věnujte půl hodiny tomu, abyste to zkusili rozbít:

AI můžete také požádat, aby prošla hraniční případy:

Vypiš deset věcí, které by skutečný student mohl udělat a které by mohly rozbít rezervace nebo zrušení, každou vyzkoušej a oprav, co selže. Řekni mi, co jsi změnil.

Krok 8: Bezpečnostní kontrola

Tato aplikace ukládá jména, e-maily a telefonní čísla, takže krátká bezpečnostní kontrola se vyplatí. Hlavní otázky:

• Může jeden student vidět rezervace nebo kontaktní údaje jiného?
• Jsou nějaké klíče nebo hesla v kódu, který běží v prohlížeči?
• Je registrační formulář chráněn proti botům?
• Existuje záloha dat?

Náš článek o tom, zda je vibe coding bezpečný vysvětluje každou kontrolu a dává prompty pro ně, a bezpečnostní kontrolní seznam pro aplikace vytvořené s AI je dlouhá verze.

Krok 9: Publikujte

Až jádro, pravidla a kontroly projdou, publikujte. Na Mythexu je to jedno kliknutí a aplikace dostane veřejnou URL s databází a hostingem už na místě. Na Pro můžete připojit vlastní doménu, třeba book.sarasyoga.com; viz jak připojit vlastní doménu.

Před rozesláním odkazu publikovanou verzi ještě jednou zkontrolujte. Zarezervujte lekci z telefonu. Produkce a náhled by se měly chovat stejně, ale ověřte to.

Krok 10: První uživatelé a další verze

Dejte odkaz nejdřív pěti pravidelným studentům, ne všem najednou. Požádejte je, ať si přes něj rezervují další lekci, a řeknou vám, co bylo nejasné. Pak opravte tři nejčastější připomínky.

Po několika týdnech skutečného používání se seznam pro v2 u takové aplikace obvykle napíše sám: čekací listina na plné lekce, e-mailové připomínky večer před lekcí a permanentky placené online. Každá věc dostane stejné zacházení: stručně ji specifikujte, zadejte prompt, otestujte, publikujte. O přidání plateb viz jak přidat platby do aplikace. Jak získat první uživatele, viz jak spustit aplikaci a získat první uživatele.

Převod na aplikaci pro telefon

Mnoho studií chce ikonu v telefonech svých studentů. Na Mythex Pro se publikovaná aplikace může změnit na aplikaci pro Android (soubor, který můžete nahrát do Google Play) a na aplikaci pro iPhone odeslanou do TestFlight pomocí vašeho vlastního klíče z App Store Connect, bez Macu. Aplikace pro telefon otevírá publikovanou webovou aplikaci, takže každá vaše aktualizace se dostane i do ní.

Co si z toho odnést

Sama stavba byla krátká část. Aplikaci použitelnou udělalo seznam „není v první verzi“ ze specifikace, testování jádra dřív než čehokoli jiného, pravidla pro kapacitu a přístup na serveru a pět skutečných uživatelů dřív než padesát. Tak vypadá vibe coding, když musí aplikace fungovat pro ostatní lidi.

Chcete zkusit vlastní? Napište jednostránkovou specifikaci, pak první odstavec vložte do nástroje pro tvorbu AI aplikací. Pokud chcete vidět další typy aplikací a prompty za nimi, přečtěte si příklady vibe codingu.

Otázky