Kako narediti aplikacijo z vibe codingom: od ideje do objavljene aplikacije

Za izdelavo aplikacije z vibe codingom napišite enostranski opis prve različice, ga dajte graditelju aplikacij z umetno inteligenco kot svoj prvi poziv in nato aplikacijo razvijajte v majhnih, preizkušenih korakih: podatki, prijava, glavni potek dela, poliranje, varnostni pregled in nazadnje objava. Ta vodnik spremlja en primer projekta, rezervacijsko aplikacijo za majhen studio joge, skozi vse faze, s pozivi, ki so bili uporabljeni na vsaki stopnji.

Če še nikoli niste ničesar zgradili na ta način, se naš vodnik z vibe codingom za začetnike začne z manjšim korakom. Za širši pregled, ki ni vezan samo na vibe coding, glejte kako narediti aplikacijo z AI.

Projekt

Zamislite si lastnico studia joge Saro, ki vodi osem vadb na teden. Rezervacije prihajajo prek WhatsAppa; za vsak razred vodi papirnati seznam in pogosto prodaja preveč mest. Želi, da:

• učenci vidijo urnik tedna in rezervirajo mesto,
• ima vsak razred kapaciteto,
• ima seznam za vsak razred, ki ga lahko preveri na vratih,
• učenci lahko odpovedo do dve uri pred vadbo.

To je celotna prva različica. Brez plačil, brez članarin, brez trgovine z aplikacijami. Te pridejo pozneje ali nikoli.

1. korak: napišite enostranski opis

Preden odprete katero koli orodje, prvo različico zapišite z običajnimi besedami. Deset minut tu prihrani ure pogovarjanja naprej in nazaj. Uporabna oblika:

• Kdo uporablja: učenci (rezervirajo in odpovedujejo), Sara (upravlja razrede, pregleduje sezname).
• Zasloni: urnik, podrobnosti razreda, moje rezervacije, admin razredi, admin seznam razredov.
• Podatki: razredi (ime, učitelj, začetek, trajanje, kapaciteta), rezervacije (učenec, razred, stanje), učenci (ime, e-pošta, telefon).
• Pravila: ni rezervacije polnega razreda; ena rezervacija na učenca na razred; odpoved do dve uri pred vadbo; admin strani vidi samo Sara.
• Ni v prvi različici: plačila, paketi vadb, čakalne vrste, opomniki.

Seznam „ni v prvi različici“ je najpomembnejši. Prav on omogoča, da gradnjo dokončate. Naš vodnik za pisanje zahtev za izdelek z AI gre dlje, če želite obsežnejši opis.

2. korak: izberite orodje, ki obvlada celoten cikel

Za aplikacijo z bazo podatkov, prijavami in javnim naslovom uporabite graditelja aplikacij z AI, ki zažene kodo, poveže bazo in objavi, ne pa klepetalnega asistenta, ki vam preda datoteke. Naša primerjava orodij za vibe coding navaja možnosti. Tu bomo uporabili Mythex, ker pokriva vsak korak na enem mestu: klepet, živi predogled, pravo bazo in shrambo datotek ter objavo z enim klikom.

3. korak: prvi poziv

Opis spremenite v en odstavek. Ne prilepite celotnega dokumenta naenkrat z vsako podrobnostjo; dajte jedro, ostalo dodajte v korakih.

Zgradi aplikacijo za rezervacije vadb za mojo študio joge. Učenci se registrirajo z imenom, e-pošto in telefonom, vidijo urnik tega tedna in rezervirajo mesto v razredu. Vsak razred ima ime, učitelja, začetek, trajanje in kapaciteto; poln razred pokaže „Polno“ in ni mogoče rezervirati. Učenci vidijo svoje rezervacije in lahko odpovejo do dve uri pred vadbo. Jaz sem administrator: lahko dodajam in urejam razrede ter vidim seznam, kdo je rezerviran za vsakega. Miren, preprost dizajn, ki dobro deluje na telefonih.

Če niste prepričani, ali je orodje razumelo, zahtevajte najprej načrt. V Mythexu način Načrt pred pisanjem kode pripravi zaslone in podatke, vi pa ga odobrite.

4. korak: deluj osrednja zanka

Osrednja zanka je tisto, zaradi česar aplikacija obstaja: učenec rezervira vadbo, Sara pa to vidi. Preizkusite samo to:

1. Registrirajte se kot učenec in rezervirajte vadbo.
2. Odprite administratorski pogled. Ali je rezervacija tam?
3. Rezervirajte isto vadbo še enkrat. Zavrniti bi jo morala.
4. Nastavite kapaciteto razreda na 2, rezervirajte ga iz dveh učenčevih računov in poskusite tretjo rezervacijo.

Na tej točki se običajno pokažeta dve težavi. Urnik prikazuje čas v časovnem pasu strežnika, ne studia. Preverjanje „Polno“ se izvede samo na strani, zato dvojni klik hitro ustvari dve rezervaciji.

Vse čase vadb prikaži v časovnem pasu studia, [Asia/Dubai], ne glede na to, kako je nastavljena naprava obiskovalca.

Preverjanje kapacitete in podvojenih rezervacij naj se izvede na strežniku ob ustvarjanju rezervacije, ne samo na strani. Če dve zahtevi prideta skupaj za zadnje mesto, naj uspe samo ena.

Pred dodajanjem česarkoli popravite osrednjo zanko. Vse ostalo je odvisno od nje.

5. korak: dodajte preostala pravila, eno na sporočilo

Zdaj pravila iz opisa obdelajte eno za drugim:

Učenci lahko odpovejo rezervacijo do dve uri pred začetkom vadbe. Po tem skrijte gumb za odpoved in odpoved na strežniku zavrnite z jasnim sporočilom.

Samo moj račun lahko odpre administratorske strani. Preverite to na strežniku pri vsakem administratorskem dejanju, ne samo tako, da skrijete meni.

Po vsakem pravilu ga preizkusite in nadaljujte šele, ko deluje. Če sprememba nekaj pokvari, se vrnite na zadnji dobri kontrolni vmesnik in poskusite z jasnejšo zahtevo, namesto da bi popravke kopičili drug na drugega.

6. korak: poliranje tega, kar bodo pravi uporabniki opazili

Pravi uporabniki opazijo majhne stvari. Kratek seznam za Sarino aplikacijo:

• Prazna stanja: „Ta teden še ni razredov“ namesto prazne strani.
• Potrditev: „Rezervirani ste za Vinyasa, torek ob 18.00“ po rezervaciji.
• Postavitev za telefon: veliki gumbi, urnik berljiv na zaslonu široko 375 slikovnih točk.
• Preostala mesta: „Še 3 mesta“ na vsaki kartici razreda, da učenci rezervirajo hitreje.

Na vsaki kartici razreda prikaži preostala mesta, npr. „Še 3 od 12“. Po rezervaciji pokaži potrditev z imenom razreda, dnevom in časom ter gumb za moje rezervacije.

7. korak: testirajte kot tujec

Preden jo uporabi kdo drug, pol ure poskušajte aplikacijo zlomiti:

Umetno inteligenco lahko tudi prosite, naj preizkusi robne primere:

Naštej deset stvari, ki jih lahko naredi pravi učenec in ki bi lahko zlomile rezervacijo ali odpoved, preizkusi vsako in popravi, kar ne deluje. Povej mi, kaj si spremenil.

8. korak: varnostni pregled

Ta aplikacija shranjuje imena, e-poštne naslove in telefonske številke, zato se kratek varnostni pregled splača. Glavna vprašanja:

• Ali lahko en učenec vidi rezervacije ali kontaktne podatke drugega?
• Ali so ključi ali gesla v kodi, ki se izvaja v brskalniku?
• Ali je obrazec za registracijo zaščiten pred botimi?
• Ali obstaja varnostna kopija podatkov?

Naša stran o tem, ali je vibe coding varen, razlaga vsako preverjanje in ponuja pozive zanje, kontrolni seznam varnosti za aplikacije, zgrajene z AI, pa je daljša različica.

9. korak: objava

Ko osrednja zanka, pravila in preverjanja delujejo, objavite. V Mythexu gre za en klik, aplikacija pa dobi javni naslov, z bazo podatkov in gostovanjem že na mestu. Na Pro lahko povežete svojo domeno, na primer book.sarasyoga.com; glejte kako povezati lastno domeno.

Preden pošljete povezavo, še enkrat preglejte objavljeno različico. Rezervirajte vadbo s telefona. Produkcija in predogled bi se morala obnašati enako, vendar to preverite.

10. korak: prvi uporabniki in naslednja različica

Povezavo najprej pošljite petim rednim učencem, ne vsem naenkrat. Prosite jih, naj prek nje rezervirajo naslednjo vadbo in vam povedo, kaj je bilo zmedeno. Nato popravite tri stvari, ki jih največkrat omenijo.

Po nekaj tednih uporabe se seznam za v2 za takšno aplikacijo pogosto napiše sam: čakalna vrsta za polne razrede, e-poštni opomniki zvečer pred vadbo in paketi vadb, plačani na spletu. Vsaka stvar dobi enako obravnavo: na kratko jo opišite, napišete poziv, preizkusite in objavite. Za dodajanje plačil glejte kako dodati plačila v vašo aplikacijo. Za oglaševanje in pridobivanje prvih uporabnikov glejte kako lansirati aplikacijo in pridobiti prve uporabnike.

Pretvorba v aplikacijo za telefon

Mnogi studii želijo ikono na telefonih svojih učencev. Na Mythex Pro lahko objavljena aplikacija postane aplikacija za Android (datoteka, ki jo lahko naložite v Google Play) in aplikacija za iPhone, poslana v TestFlight z vašim ključem App Store Connect, brez Maca. Aplikacija za telefon odpre objavljeno spletno aplikacijo, zato ima vsaka posodobitev, ki jo objavite, tudi telefonska aplikacija.

Kaj iz tega odnesti

Sama gradnja je bil kratek del. Aplikacijo uporabno naredita seznam „ni v prvi različici“ v opisu, testiranje osrednje zanke pred vsem drugim, pravila za kapaciteto in dostop na strežniku ter pet pravih uporabnikov, preden jih je petdeset. Tako izgleda vibe coding, kadar mora aplikacija delovati za druge ljudi.

Pripravljeni preizkusiti svojo? Napišite svoj enostranski opis in prvi odstavek prilepite v graditelja aplikacij z AI. Če želite videti več vrst aplikacij in pozive za njih, preberite naše primere vibe codinga.

Vprašanja