Ako vytvoriť aplikáciu pomocou vibe codingu: od nápadu po publikovanú aplikáciu

Ak chcete vytvoriť aplikáciu pomocou vibe codingu, napíšte jednostranový popis prvej verzie, dajte ho nástroju na tvorbu AI aplikácií ako svoj prvý prompt a potom aplikáciu rozširujte v malých otestovaných krokoch: dáta, prihlásenie, hlavný workflow, úpravy, bezpečnostná kontrola a nakoniec publikovanie. Tento sprievodca sleduje jeden príklad, aplikáciu na rezervácie hodín pre malé jogové štúdio, cez všetky fázy, s promptmi použitými v každom kroku.

Ak ste ešte nič podobné nestavali, náš návod na vibe coding pre začiatočníkov začína menej ambiciózne. Širší prehľad, ktorý nie je viazaný na vibe coding, nájdete v článku ako vytvoriť aplikáciu pomocou AI.

Projekt

Predstavte si majiteľku jogového štúdia Saru, ktorá má osem hodín týždenne. Rezervácie chodia cez WhatsApp; ku každej hodine si vedie papierový zoznam a často prekročí kapacitu. Chce:

• Aby študenti videli týždenný rozvrh a mohli si rezervovať miesto.
• Aby mala každá hodina kapacitu.
• Zoznam pre každú hodinu, ktorý môže skontrolovať pri dverách.
• Aby študenti mohli zrušiť najneskôr dve hodiny pred začiatkom.

Toto je celá prvá verzia. Žiadne platby, žiadne permanentky, žiadny obchod s aplikáciami. Tie prídu neskôr, alebo vôbec.

Krok 1: Napíšte jednostranovú špecifikáciu

Pred otvorením akéhokoľvek nástroja zapíšte prvú verziu jednoduchými slovami. Desať minút tu ušetrí hodiny vzájomného dohadovania. Užitočná štruktúra:

• Kto to používa: študenti (rezervujú a rušia), Sara (spravuje hodiny a vidí zoznamy).
• Obrazovky: rozvrh, detail hodiny, moje rezervácie, admin hodiny, admin zoznam hodín.
• Dáta: hodiny (názov, učiteľ, čas začiatku, dĺžka, kapacita), rezervácie (študent, hodina, stav), študenti (meno, e-mail, telefón).
• Pravidlá: nedá sa rezervovať plná hodina; jedna rezervácia na študenta a hodinu; zrušenie najneskôr dve hodiny vopred; admin stránky vidí len Sara.
• Nie je v v1: platby, permanentky, čakacie listiny, pripomienky.

Zoznam „nie je v v1“ je najdôležitejší. Udrží stavbu v reálnych hraniciach. Ak chcete podrobnejšiu špecifikáciu, náš článok o písaní dokumentu s požiadavkami na produkt pomocou AI ide ďalej.

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

Pri aplikácii s databázou, prihlásením a verejnou URL použite nástroj na tvorbu AI aplikácií, ktorý spúšťa kód, pripája databázu a publikuje, nie chatovacieho asistenta, ktorý vám dá súbory. Náš prehľad nástrojov na vibe coding uvádza možnosti. Tu použijeme Mythex, pretože pokrýva každý krok na jednom mieste: chat, živý náhľad, skutočnú databázu a úložisko súborov a publikovanie jedným kliknutím.

Krok 3: Prvý prompt

Premeňte špecifikáciu na jeden odsek. Necpíšte naraz celý dokument so všetkými detailmi; dajte jadro a zvyšok pridajte po krokoch.

Vytvor aplikáciu na rezervácie hodín pre moje jogové štúdio. Študenti sa registrujú menom, e-mailom a telefónom, vidia týždenný rozvrh a rezervujú si miesto v hodine. Každá hodina má názov, učiteľa, čas začiatku, dĺžku a kapacitu; plná hodina zobrazí „Plné“ a nedá sa rezervovať. Študenti vidia svoje rezervácie a môžu ich zrušiť najneskôr dve hodiny pred hodinou. Ja som admin: môžem pridávať a upravovať hodiny a vidieť zoznam, kto je na ktorú hodinu prihlásený. Pokojný, jednoduchý dizajn, ktorý dobre funguje na telefónoch.

Ak si nie ste istí, či nástroj rozumel, najprv si vyžiadajte plán. V Mythex režim Plan pred písaním kódu popíše obrazovky a dáta a vy plán schválite.

Krok 4: Spustite základnú slučku

Základná slučka je jediná vec, pre ktorú aplikácia existuje: študent si rezervuje hodinu a Sara to vidí. Testujte len to:

1. Zaregistrujte sa ako študent a rezervujte hodinu.
2. Otvorte admin zobrazenie. Je tam rezervácia?
3. Rezervujte tú istú hodinu znova. Malo by to odmietnuť.
4. Nastavte kapacitu hodiny na 2, rezervujte ju z dvoch študentských účtov a skúste tretiu.

V tomto bode sa zvyčajne objavia dva problémy. Rozvrh zobrazuje časy v časovom pásme servera, nie štúdia. A kontrola „Plné“ prebieha len na stránke, takže rýchle dvojklikanie vytvorí dve rezervácie.

Zobrazuj všetky časy hodín v časovom pásme štúdia, [Asia/Dubai], bez ohľadu na nastavenie zariadenia návštevníka.

Kontroluj kapacitu a duplicitné rezervácie na serveri pri vytváraní rezervácie, nie len na stránke. Ak prídu dve požiadavky naraz na posledné miesto, uspieť smie len jedna.

Skôr než pridáte čokoľvek iné, opravte základnú slučku. Všetko ostatné na nej závisí.

Krok 5: Pridajte zostávajúce pravidlá, jedno v každej správe

Teraz prejdite pravidlá zo špecifikácie jedno po druhom:

Študenti môžu zrušiť rezerváciu najneskôr dve hodiny pred začiatkom hodiny. Potom skry tlačidlo zrušenia a zrušenie na serveri odmietni s jasnou správou.

Admin stránky môže otvoriť len môj účet. Over to na serveri pri každej admin akcii, nie len skrytím menu.

Po každom pravidle ho otestujte a pokračujte, až keď funguje. Ak zmena niečo rozbije, vráťte sa k poslednému dobrému kontrolnému bodu a skúste jasnejšiu požiadavku, namiesto toho aby ste na seba nakladali ďalšie opravy.

Krok 6: Vyleštite to, čo skutoční používatelia zbadajú

Skutoční používatelia si všimnú drobnosti. Krátky zoznam pre Sarinu aplikáciu:

• Prázdne stavy: „Tento týždeň zatiaľ žiadne hodiny“ namiesto prázdnej stránky.
• Potvrdenie: „Máš rezerváciu na Vinyasa, utorok 18:00“ po rezervácii.
• Rozloženie na telefóne: veľké tlačidlá, rozvrh čitateľný na obrazovke 375 px.
• Zostávajúce miesta: „3 miesta voľné“ pri každej hodine, aby si študenti rezervovali skôr.

Na karte každej hodiny ukáž zostávajúce miesta, napríklad „3 z 12 voľných“. Po rezervácii zobraz potvrdenie s názvom hodiny, dňom a časom a tlačidlo na moje rezervácie.

Krok 7: Testujte ako cudzinec

Pred tým, ako to začnú používať ostatní, strávte pol hodiny pokusom to rozbiť:

AI sa môžete tiež opýtať, aby prešla okrajové prípady:

Vymenuj desať vecí, ktoré môže skutočný študent urobiť a ktoré by mohli rozbiť rezervácie alebo rušenie, otestuj každú a oprav, čo zlyhá. Povedz mi, čo si zmenila.

Krok 8: Bezpečnostná kontrola

Táto aplikácia ukladá mená, e-maily a telefónne čísla, takže krátka bezpečnostná kontrola sa oplatí. Hlavné otázky:

• Môže jeden študent vidieť rezervácie alebo kontaktné údaje iného?
• Sú nejaké kľúče alebo heslá v kóde, ktorý beží v prehliadači?
• Je registračný formulár chránený pred botmi?
• Existuje záloha dát?

Náš článok o tom, či je vibe coding bezpečný vysvetľuje každú kontrolu a dáva prompty na ne a bezpečnostný kontrolný zoznam pre aplikácie vytvorené s AI je dlhšia verzia.

Krok 9: Publikujte

Keď základná slučka, pravidlá a kontroly prejdú, publikujte. V Mythex je to jedno kliknutie a aplikácia dostane verejnú URL s databázou a hostingom už pripravenými. V Pro môžete pripojiť vlastnú doménu, napríklad book.sarasyoga.com; pozrite si ako pripojiť vlastnú doménu.

Pred odoslaním odkazu ešte raz skontrolujte publikovanú verziu. Rezervujte hodinu z telefónu. Produkcia a náhľad by sa mali správať rovnako, ale overte si to.

Krok 10: Prví používatelia a ďalšia verzia

Odkaz najprv pošlite piatim pravidelným študentom, nie všetkým naraz. Požiadajte ich, aby cez neho rezervovali ďalšiu hodinu a povedali vám, čo bolo nejasné. Potom opravte tri najčastejšie spomínané veci.

Po niekoľkých týždňoch skutočného používania sa zoznam v2 pre takúto aplikáciu zvyčajne napíše sám: čakacia listina pre plné hodiny, e-mailové pripomienky večer pred hodinou a permanentky platené online. Každá položka dostane rovnaké spracovanie: v pár riadkoch ju špecifikujte, zadajte prompt, otestujte a publikujte. O pridávaní platieb pozrite ako pridať platby do aplikácie. O tom, ako dostať aplikáciu k ľuďom, pozrite ako spustiť aplikáciu a získať prvých používateľov.

Premena na aplikáciu do telefónu

Mnohé štúdiá chcú ikonu v telefónoch svojich študentov. V Mythex Pro sa publikovaná aplikácia dá premeniť na Android aplikáciu (súbor, ktorý môžete nahrať do Google Play) a na iPhone aplikáciu odoslanú do TestFlight s vaším vlastným kľúčom App Store Connect, bez Macu. Aplikácia v telefóne otvára publikovanú webovú aplikáciu, takže pri každom publikovaní aktualizácie ju má aj aplikácia v telefóne.

Čo si z toho odniesť

Samotné vytvorenie bolo krátka časť. Aplikáciu použiteľnou urobil zoznam „nie je v v1“ zo špecifikácie, testovanie základnej slučky ako prvej, pravidlá na serveri pre kapacitu a prístup a päť skutočných používateľov skôr než päťdesiat. Takto vyzerá vibe coding, keď musí aplikácia fungovať pre iných ľudí.

Pripravení vyskúšať vlastnú? Napíšte svoju jednostranovú špecifikáciu a prvý odsek vložte do nástroja na tvorbu AI aplikácií. Ak chcete vidieť ďalšie typy aplikácií a prompty, ktoré k nim patria, prečítajte si naše príklady vibe codingu.

Otázky