Kuidas luua rakendus vibe codingu abil: ideest avaldatud rakenduseni

Vibe codingu abil rakenduse loomiseks kirjuta üheleheküljeline kirjeldus esimesest versioonist, anna see AI-rakenduste loojale esimese promptina ja kasva rakendus väikeste testitud sammudega: andmed, sisselogimine, põhitöövoog, viimistlus, turvaülevaade ja lõpuks avaldamine. See juhend järgib ühte näiteprojekti, jooga stuudio klassibroneeringute rakendust, läbi kõigi etappide koos igas etapis kasutatud promptidega.

Kui oled seda tüüpi asju varem ehitanud, alustab meie vibe codingu õpetus algajatele väiksemast. Laiema ülevaate jaoks, mis ei ole seotud ainult vibe codinguga, vaata kuidas ehitada rakendus AI-ga.

Projekt

Kujuta ette jooga stuudio omanikku Sarat, kes korraldab nädalas kaheksa tundi. Broneeringud tulevad WhatsAppi kaudu; ta peab iga tunni kohta paberist nimekirja ja broneerib sageli üle. Ta tahab:

• Õpilastel näha nädala ajakava ja broneerida koht.
• Igal tunnil oleks mahtuvus.
• Nimekirja iga tunni kohta, mida ta saab uksel kontrollida.
• Õpilastel tühistada kuni kaks tundi enne tundi.

See on kogu esimene versioon. Makseid, liikmelisust ega rakendusepoodi ei ole. Need tulevad hiljem või mitte kunagi.

Samm 1: kirjuta üheleheküljeline spetsifikatsioon

Enne ühegi tööriista avamist kirjuta esimene versioon lihtsates sõnades üles. Kümme minutit siin säästavad tunde edasi-tagasi. Kasulik vorm:

• Kes kasutab: õpilased (broneerivad ja tühistavad), Sara (haldab tunde, vaatab nimekirju).
• Ekraanid: ajakava, tunni detailid, minu broneeringud, admin tunnid, admin tunni nimekiri.
• Andmed: tunnid (nimi, õpetaja, algusaeg, kestus, mahtuvus), broneeringud (õpilane, tund, olek), õpilased (nimi, e-post, telefon).
• Reeglid: täit tundi ei broneeri; üks broneering õpilase kohta tunni kohta; tühistada saab kuni kaks tundi ette; ainult Sara näeb admin-lehti.
• Mitte v1-s: maksed, tunnipaketid, ootenimekirjad, meeldetuletused.

Nimekiri "mitte v1-s" on kõige olulisem. See hoiab ehituse lõpetatavana. Meie juhend nõuete dokumendi kirjutamisest AI-ga läheb sügavamale, kui soovid täielikumat spetsifikatsiooni.

Samm 2: vali tööriist, mis katab kogu tsükli

Rakenduse jaoks, millel on andmebaas, sisselogimised ja avalik URL, kasuta AI-rakenduste loojat, mis käitab koodi, lisab andmebaasi ja avaldab, mitte vestlusassistenti, mis annab sulle faile. Meie vibe codingu tööriistade võrdlus loetleb valikud. Kasutame siin Mythexit, sest see katab iga sammu ühes kohas: vestluse, reaalajas eelvaate, päris andmebaasi ja failisalvestuse ning ühe klõpsuga avaldamise.

Samm 3: esimene prompt

Pane spetsifikatsioon ühte lõiku. Ära kleebi kogu dokumenti korraga kõigi detailidega; anna tuum ja lisa ülejäänu sammude kaupa.

Ehita klassibroneeringu rakendus minu jooga stuudiole. Õpilased registreeruvad nime, e-posti ja telefoniga, näevad selle nädala ajakava ja broneerivad koha tunnis. Igal tunnil on nimi, õpetaja, algusaeg, kestus ja mahtuvus; täis tund näitab "Täis" ja seda ei saa broneerida. Õpilased näevad oma broneeringuid ja saavad tühistada kuni kaks tundi enne tundi. Mina olen admin: saan lisada ja muuta tunde ning näha iga tunni broneerijate nimekirja. Rahulik, lihtne disain, mis töötab hästi telefonides.

Kui pole kindel, kas tööriist aru sai, palu esmalt plaan. Mythexis koostab režiim Plan ekraanid ja andmed enne koodi kirjutamist ning sina kiidad need heaks.

Samm 4: saa põhitsükkel tööle

Põhitsükkel on see, milleks rakendus üldse on: õpilane broneerib tunni ja Sara näeb seda. Testi ainult seda:

1. Registreeru õpilasena ja broneeri tund.
2. Ava admin-vaade. Kas broneering on seal?
3. Broneeri sama tund uuesti. See peaks keelduma.
4. Sea tunni mahtuvuseks 2, broneeri see kahelt õpilaselt ja proovi kolmandat.

Kahe probleemi ilmnemine on sel hetkel tavaline: ajakava näitab aegu serveri ajavööndis, mitte stuudio omas, ja "Täis" kontroll toimub ainult lehel, nii et kiire topeltklõps loob kaks broneeringut.

Näita kõiki tunniaegu stuudio ajavööndis, [Asia/Dubai], olenemata sellest, mis on külastaja seadme seadistus.

Kontrolli mahtuvust ja topeltbroneeringuid serveris broneeringu loomisel, mitte ainult lehel. Kui kaks päringut saabuvad koos viimase koha pärast, peaks edukas olema ainult üks.

Paranda põhitsükkel enne midagi lisamist. Kõik muu sõltub sellest.

Samm 5: lisa ülejäänud reeglid, üks sõnum korraga

Nüüd käi spetsifikatsiooni reeglid üksteise järel läbi:

Õpilased saavad broneeringu tühistada kuni kaks tundi enne tunni algust. Pärast seda peida tühistamisnupp ja keeldu tühistamisest serveris selge teatega.

Ainult minu konto saab avada admin-lehti. Veendu, et see kontrollitakse serveris iga admin-tegevuse puhul, mitte ainult menüü peitmisega.

Pärast igat ühte testi ja liigu edasi ainult siis, kui see töötab. Kui muudatus midagi katkestab, too viimane hea kontrollpunkt tagasi ja proovi selgemat päringut, mitte ära kuhja parandusi peale.

Samm 6: viimistle, mida päris kasutajad märkavad

Päris kasutajad märkavad väikesi asju. Lühike nimekiri Sara rakenduse jaoks:

• Tühjad olekud: "Sel nädalal veel tunde pole", mitte tühi leht.
• Kinnitus: "Oled broneeritud tundi Vinyasa, teisipäev kell 18:00" pärast broneerimist.
• Telefoni paigutus: suured nupud, ajakava loetav 375-pikslisel ekraanil.
• Vabad kohad: "3 kohta vaba" igal tunnikaardil, et õpilased broneeriksid kiiremini.

Näita igal tunnikaardil vabu kohti, nt "3 / 12 vaba". Pärast broneerimist näita kinnitust tunni nime, päeva ja kellaajaga ning nuppu minu broneeringute juurde.

Samm 7: testi nagu võõras

Enne kui keegi muu seda kasutab, kuluta pool tundi selle purustamisele:

Samuti saad paluda AI-l läbi käia äärmuslikud juhud:

Loetle kümme asja, mida päris õpilane võiks teha, mis võiksid broneerimist või tühistamist katkestada, testi igaüht ja paranda, mis ebaõnnestub. Ütle mulle, mida muutsid.

Samm 8: turvaülevaade

See rakendus salvestab nimesid, e-posti aadresse ja telefoninumbreid, seega on lühike turvaülevaade väärt. Põhiküsimused:

• Kas üks õpilane näeb teise broneeringuid või kontaktandmeid?
• Kas mõni võti või parool on koodis, mis jookseb brauseris?
• Kas registreerimisvorm on robotite vastu kaitstud?
• Kas andmetest on varukoopia?

Meie leht kas vibe coding on ohutu selgitab iga kontrolli ja annab nende jaoks promptid ning AI-ga ehitatud rakenduste turvakontrollnimekiri on pikem versioon.

Samm 9: avalda

Kui põhitsükkel, reeglid ja kontrollid läbivad, avalda. Mythexis on see üks klõps ning rakendus saab avaliku URL-i, mille andmebaas ja hosting on juba paigas. Pro-paketis saad ühendada oma domeeni, näiteks book.sarasyoga.com; vaata kuidas ühendada kohandatud domeen.

Enne lingi saatmist vaata avaldatud versiooni veel kord üle. Broneeri tund oma telefonist. Tootmine ja eelvaade peaksid käituma ühtmoodi, kuid kinnita seda.

Samm 10: esimesed kasutajad ja järgmine versioon

Anna link kõigepealt viiele tavalisele õpilasele, mitte kõigile korraga. Palu neil broneerida järgmine tund sellest ja öelda, mis oli segane. Seejärel paranda kolm asja, mida nad kõige sagedamini mainivad.

Pärast mõnda nädalat päris kasutust kirjutab selline rakendus v2 nimekirja peaaegu ise: ootenimekiri täitunud tundidele, e-posti meeldetuletus õhtul enne tundi ja tunnipaketid, mida makstakse veebis. Igale neist tuleb sama lähenemine: kirjelda paari reaga, promptida, testida, avaldada. Maksete lisamise kohta vaata kuidas lisada oma rakendusse makseid. Sõna levitamiseks vaata kuidas käivitada rakendus ja saada esimesed kasutajad.

Muutmine telefonirakenduseks

Paljud stuudiod tahavad ikooni oma õpilaste telefonides. Mythex Pro-paketis saab avaldatud rakendusest teha Androidi rakenduse (faili, mille saab Google Plaisse üles laadida) ja iPhone'i rakenduse, mis saadetakse TestFlighti sinu enda App Store Connecti võtmega, ilma Macita. Telefonirakendus avab avaldatud veebirakenduse, seega iga kord, kui avaldad uuenduse, on see ka telefonirakenduses.

Mida sellest kaasa võtta

Ehitus ise oli lühike osa. Rakenduse kasutatavaks muutis spetsifikatsiooni nimekiri "mitte v1-s", põhitsükli testimine enne kõike muud, serveripoolsed reeglid mahtuvuse ja ligipääsu jaoks ning viis päris kasutajat enne viitkümmet. Nii näeb vibe coding välja, kui rakendus peab töötama teiste inimeste jaoks.

Kas oled valmis proovima oma? Kirjuta üheleheküljeline spetsifikatsioon ja kleebi esimene lõik AI-rakenduste loojasse. Kui soovid näha rohkem rakenduse tüüpe ja nende taga olevaid prompte, loe meie vibe codingu näiteid.

Küsimused