Kā izveidot lietotni ar vibe coding: no idejas līdz publicētai lietotnei

Lai izveidotu lietotni ar vibe coding, uzrakstiet vienas lappuses aprakstu par pirmo versiju, iedodiet to AI lietotņu veidotājam kā pirmo uzvedni, un tad izaudziet lietotni nelielos, pārbaudītos soļos: dati, pieteikšanās, galvenā darbplūsma, pulēšana, drošības pārskats un visbeidzot publicēšana. Šis ceļvedis seko vienam piemēram, jogas studijas nodarbību rezervēšanas lietotnei, cauri katram posmam, ar uzvednēm, kas izmantotas katrā solī.

Ja neesat nekad ar to ko veidojis, mūsu vibe coding pamācība iesācējiem sākas mazāk. Plašākam pārskatam, kas nav saistīts tikai ar vibe coding, skatiet kā izveidot lietotni ar AI.

Projekts

Iedomājieties jogas studijas īpašnieci Sāru, kas vada astoņas nodarbības nedēļā. Rezervācijas nāk caur WhatsApp; viņa katrai nodarbībai tur papīra sarakstu un bieži pārdod vairāk vietu, nekā ir. Viņa vēlas:

• Studentiem redzēt nedēļas grafiku un rezervēt vietu.
• Katrai nodarbībai ietilpību.
• Sarakstu katrai nodarbībai, ko viņa var pārbaudīt pie durvīm.
• Studentiem atcelt līdz divām stundām iepriekš.

Tas ir viss pirmās versijas apjoms. Nav maksājumu, abonementu, nav lietotņu veikala. Tas nāks vēlāk vai nekad.

1. solis: uzrakstiet vienas lappuses specifikāciju

Pirms atverat jebkuru rīku, uzrakstiet pirmo versiju vienkāršos vārdos. Desmit minūtes šeit ietaupa stundas atkārtotu saskaņošanu. Noderīga forma:

• Kas to lieto: studenti (rezervē un atceļ), Sāra (pārvalda nodarbības, redz sarakstus).
• Ekrāni: grafiks, nodarbības detaļas, mani pieraksti, administratora nodarbības, administratora nodarbību saraksts.
• Dati: nodarbības (nosaukums, pasniedzējs, sākuma laiks, ilgums, ietilpība), rezervācijas (students, nodarbība, statuss), studenti (vārds, e-pasts, tālrunis).
• Noteikumi: nevar rezervēt pilnu nodarbību; viena rezervācija vienam studentam vienā nodarbībā; atcelt līdz divām stundām iepriekš; tikai Sāra redz administratora lappuses.
• Nav v1: maksājumi, nodarbību paketes, gaidīšanas saraksti, atgādinājumi.

Saraksts „nav v1” ir vissvarīgākais. Tas ir tas, kas notur būvēšanu izpildāmu. Mūsu ceļvedis par prasību dokumenta rakstīšanu ar AI ir plašāks, ja vēlaties pilnāku specifikāciju.

2. solis: izvēlieties rīku, kas aptver visu ciklu

Lietotnei ar datubāzi, pieteikšanos un publisku URL izmantojiet AI lietotņu veidotāju, kas palaiž kodu, pievieno datubāzi un publicē, nevis tērzēšanas asistentu, kas jums iedod failus. Mūsu vibe coding rīku salīdzinājums uzskaita iespējas. Šeit izmantosim Mythex, jo tas aptver katru soli vienuviet: tērzēšanu, tiešo priekšskatījumu, īstu datubāzi un failu krātuvi un publicēšanu ar vienu klikšķi.

3. solis: pirmā uzvedne

Pārvērtiet specifikāciju vienā rindkopā. Neielieciet visu dokumentu uzreiz ar katru detaļu; dodiet kodolu un pievienojiet pārējo soļos.

Izveidojiet nodarbību rezervēšanas lietotni manai jogas studijai. Studenti reģistrējas ar vārdu, e-pastu un tālruni, redz šīs nedēļas grafiku un rezervē vietu nodarbībā. Katrai nodarbībai ir nosaukums, pasniedzējs, sākuma laiks, ilgums un ietilpība; pilna nodarbība rāda „Pilna” un nav rezervējama. Studenti redz savas rezervācijas un var atcelt līdz divām stundām pirms nodarbības. Esmu administrators: varu pievienot un rediģēt nodarbības un redzēt, kas ir rezervējis katru no tām. Mierīgs, vienkāršs dizains, kas labi darbojas uz tālruņiem.

Ja neesat pārliecināts, vai rīks saprata, izmantojiet Plan režīmu, kas pirms koda rakstīšanas izklāsta ekrānus un datus, un jūs to apstiprināt.

4. solis: panākt, lai galvenā cilpa darbojas

Galvenā cilpa ir viena lieta, kāpēc lietotne eksistē: students rezervē nodarbību, un Sāra to redz. Testējiet tikai to:

1. Reģistrējieties kā students un rezervējiet nodarbību.
2. Atveriet administratora skatu. Vai rezervācija ir tur?
3. Rezervējiet to pašu nodarbību vēlreiz. Tai vajadzētu noraidīt.
4. Iestatiet nodarbības ietilpību uz 2, rezervējiet to no diviem studentu kontiem un pamēģiniet trešo.

Šajā brīdī parasti parādās divas problēmas. Grafiks rāda laikus servera laika joslā, nevis studijas laika joslā, un „Pilna” pārbaude notiek tikai lapā, tāpēc ātrs dubultklikšķis izveido divas rezervācijas.

Rādiet visus nodarbību laikus studijas laika joslā, [Asia/Dubai], neatkarīgi no tā, kā apmeklētāja ierīce ir iestatīta.

Pārbaudiet ietilpību un dublētas rezervācijas serverī, kad rezervācija tiek izveidota, nevis tikai lapā. Ja divi pieprasījumi pienāk kopā par pēdējo vietu, tikai vienam jāizdodas.

Labojiet galveno cilpu, pirms pievienojat jebko citu. Viss pārējais no tās ir atkarīgs.

5. solis: pievienojiet atlikušos noteikumus, pa vienam ziņojumā

Tagad izejiet cauri specifikācijas noteikumiem pa vienam:

Studenti var atcelt rezervāciju līdz divām stundām pirms nodarbības sākuma. Pēc tam paslēpiet atcelšanas pogu un serverī noraidiet atcelšanu ar skaidru ziņojumu.

Tikai mans konts var atvērt administratora lappuses. Pārbaudiet to serverī katrai administratora darbībai, nevis tikai paslēpjot izvēlni.

Pēc katra pārbaudiet to, un virzieties tālāk tikai tad, kad tas darbojas. Ja izmaiņa kaut ko salauž, atgriezieties pie pēdējā labā kontrolpunkta un mēģiniet skaidrāku pieprasījumu, nevis uzkraujiet labojumus virsū.

6. solis: pulējiet to, ko īsti lietotāji pamanīs

Reāli lietotāji pamana mazas lietas. Īss saraksts Sāras lietotnei:

• Tukšie stāvokļi: „Šonedēļ vēl nav nodarbību” nevis tukša lapa.
• Apstiprinājums: „Jūs esat pierakstīts uz Vinyasa, otrdien plkst. 18:00” pēc rezervācijas.
• Izkārtojums tālrunim: lielas pogas, grafiks lasāms 375 px ekrānā.
• Atlikušās vietas: „Atlikušas 3 vietas” katrā nodarbības kartītē, lai studenti rezervētu ātrāk.

Katrā nodarbības kartītē rādiet atlikušās vietas, piemēram, „Atlikušas 3 no 12”. Pēc rezervēšanas parādiet apstiprinājumu ar nodarbības nosaukumu, dienu un laiku un pogu uz manām rezervācijām.

7. solis: testējiet kā svešinieks

Pirms to izmanto citi, pavadiet pusstundu, mēģinot to salauzt:

Jūs varat arī lūgt AI izskriet cauri malas gadījumiem:

Uzskaitiet desmit lietas, ko reāls students varētu darīt, kas varētu salauzt rezervēšanu vai atcelšanu, pārbaudiet katru un labojiet to, kas neizdodas. Pastāstiet, ko mainījāt.

8. solis: drošības pārskats

Šī lietotne glabā vārdus, e-pastus un tālruņu numurus, tāpēc īss drošības pārskats ir vērts laika. Galvenie jautājumi:

• Vai viens students var redzēt cita studenta rezervācijas vai kontaktinformāciju?
• Vai kāda atslēga vai parole ir kodā, kas darbojas pārlūkā?
• Vai reģistrācijas forma ir pasargāta no botiem?
• Vai datiem ir dublējums?

Mūsu lappuse par to, vai vibe coding ir drošs izskaidro katru pārbaudi un dod uzvednes tām, un drošības pārbaudes saraksts AI veidotām lietotnēm ir garākā versija.

9. solis: publicējiet

Kad galvenā cilpa, noteikumi un pārbaudes darbojas, publicējiet. Mythex to izdara ar vienu klikšķi, un lietotne saņem publisku URL ar jau iestrādātu datubāzi un hostingu. Pro plānā varat pieslēgt savu domēnu, piemēram, book.sarasyoga.com; skatiet kā pieslēgt pielāgotu domēnu.

Pirms saites nosūtīšanas vēlreiz pārbaudiet publicēto versiju. Rezervējiet nodarbību no sava tālruņa. Ražošanas un priekšskatījuma versijām jāuzvedas vienādi, bet pārliecinieties.

10. solis: pirmie lietotāji un nākamā versija

Dodiet saiti sākumā pieciem regulārajiem studentiem, nevis visiem. Lūdziet viņus rezervēt nākamo nodarbību caur to un pastāstīt, kas bija neskaidrs. Tad labojiet trīs galvenās lietas, ko viņi min.

Pēc dažām nedēļām reālas lietošanas v2 saraksts lietotnei šāda tipa parasti uzrakstās pats: gaidīšanas saraksts pilnām nodarbībām, e-pasta atgādinājumi nodarbības vakarā un nodarbību paketes, kas apmaksājamas tiešsaistē. Katra no tām saņem to pašu apstrādi: īsi aprakstīt specifikācijā, uzvednēt, pārbaudīt, publicēt. Maksājumu pievienošanai skatiet kā pievienot maksājumus lietotnei. Vārda izplatīšanai kā palaist lietotni un iegūt pirmos lietotājus.

Pārvēršana tālruņa lietotnē

Daudzas studijas vēlas ikonu studentu tālruņos. Mythex Pro publicēta lietotne var kļūt par Android lietotni (failu, ko var augšupielādēt Google Play) un par iPhone lietotni, kas nosūtīta uz TestFlight ar jūsu pašu App Store Connect atslēgu, bez Mac. Tālruņa lietotne atver publicēto tīmekļa lietotni, tāpēc katru reizi, kad publicējat atjauninājumu, arī tālruņa lietotnē tas ir.

Ko no tā paņemt

Pati būvēšana bija īsākā daļa. Lietotni noderīgu padarīja specifikācijas saraksts „nav v1”, galvenās cilpas pārbaude pirms visa pārējā, servera puses noteikumi ietilpībai un piekļuvei, un pieci reāli lietotāji pirms piecdesmit. Tas ir tas, kā vibe coding izskatās, kad lietotnei jādarbojas citiem cilvēkiem.

Gatavi izmēģināt savu? Uzrakstiet vienas lappuses specifikāciju, tad ielīmējiet pirmo rindkopu AI lietotņu veidotājā. Ja vēlaties redzēt vairāk lietotņu tipu un uzvedņu, kas aiz tiem stāv, izlasiet mūsu vibe coding piemērus.

Jautājumi