Si të ndërtoni një aplikacion me vibe coding: nga ideja te aplikacioni i publikuar

Për të ndërtuar një aplikacion me vibe coding, shkruani një përshkrim me një faqe të versionit të parë, jepeni një ndërtuesi aplikacionesh me AI si prompt-in tuaj të parë, pastaj rritni aplikacionin në hapa të vegjël të testuar: të dhënat, hyrjen, rrjedhën kryesore të punës, lustrimin, një rishikim sigurie dhe, së fundi, publikimin. Ky udhëzues ndjek një projekt shembull, një aplikacion rezervimi klasash për një studio të vogël yoga, nëpër çdo fazë, me prompt-et e përdorura në çdo hap.

Nëse nuk keni ndërtuar kurrë diçka në këtë mënyrë, udhëzuesi i vibe coding për fillestarë fillon më i vogël. Për një pamje më të gjerë që nuk lidhet vetëm me vibe coding, shihni si të ndërtoni një aplikacion me AI.

Projekti

Imagjinoni një pronare studioje yoge, Sara, që mban tetë klasa në javë. Rezervimet vijnë nëpërmjet WhatsApp; ajo mban një listë letre për çdo klasë dhe shpesh tepron me rezervime. Ajo dëshiron:

• Studentët të shohin orarin e javës dhe të rezervojnë një vend.
• Çdo klasë të ketë një kapacitet.
• Një listë për çdo klasë që ajo mund ta kontrollojë te dera.
• Studentët të anulojnë deri dy orë përpara.

Kjo është e gjithë versioni i parë. Pa pagesa, pa abonime, pa dyqan aplikacionesh. Ato vijnë më vonë, ose asnjëherë.

Hapi 1: Shkruani një specifikim me një faqe

Para se të hapni çdo mjet, shkruajeni versionin e parë me fjalë të thjeshta. Dhjetë minuta këtu kursejnë orë diskutimesh. Një formë e dobishme:

• Kush e përdor: studentët (rezervojnë dhe anulojnë), Sara (menaxhon klasat, shikon listat).
• Ekranet: orari, detajet e klasës, rezervimet e mia, klasat e administratorit, lista e klasave të administratorit.
• Të dhënat: klasat (emri, mësuesi, ora e fillimit, gjatësia, kapaciteti), rezervimet (studenti, klasa, statusi), studentët (emri, email, telefoni).
• Rregullat: asnjë rezervim në klasë të plotë; një rezervim për student për klasë; anulim deri dy orë përpara; vetëm Sara i sheh faqet e administratorit.
• Jo në v1: pagesa, paketa klasash, lista pritjeje, kujtesa.

Lista „jo në v1“ është më e rëndësishmja. Ajo e mban ndërtimin të mundshëm për t’u përfunduar. Udhëzuesi ynë për shkrimin e një dokumenti kërkesash produkti me AI shkon më tej, nëse doni një specifikim më të plotë.

Hapi 2: Zgjidhni një mjet që mbulon gjithë ciklin

Për një aplikacion me bazë të dhënash, hyrje për përdoruesit dhe një URL publike, përdorni një ndërtues aplikacionesh me AI që ekzekuton kodin, lidh një bazë të dhënash dhe publikon, në vend të një asistenti bisede që ju jep skedarë. Krahasimi ynë i mjeteve të vibe coding i liston opsionet. Këtu do të përdorim Mythex, sepse mbulon çdo hap në një vend: bisedën, parashikimin live, një bazë të dhënash dhe ruajtje skedarësh të vërteta, dhe publikim me një klikim.

Hapi 3: Prompt-i i parë

Kthejeni specifikimin në një paragraf. Mos ngjisni të gjithë dokumentin menjëherë me çdo detaj; jepni thelbin dhe shtoni pjesën tjetër në hapa.

Ndërto një aplikacion rezervimi klasash për studion time të yogës. Studentët regjistrohen me emër, email dhe telefon, shohin orarin e javës dhe rezervojnë një vend në një klasë. Çdo klasë ka emër, mësues, orë fillimi, gjatësi dhe kapacitet; një klasë e plotë shfaq „E plotë“ dhe nuk mund të rezervohet. Studentët shohin rezervimet e tyre dhe mund të anulojnë deri dy orë përpara klasës. Unë jam administratorja: mund të shtoj dhe redaktoj klasa dhe të shoh listën e kujt është rezervuar për secilën. Dizajn i qetë, i thjeshtë që funksionon mirë në telefona.

Nëse nuk jeni të sigurt që mjeti e ka kuptuar, kërkoni fillimisht një plan. Në Mythex, modaliteti Plan përshkruan ekranet dhe të dhënat përpara se të shkruhet kodi, dhe ju e miratoni.

Hapi 4: Bëni të funksionojë cikli bazë

Cikli bazë është ajo që ekziston aplikacioni: një student rezervon një klasë, dhe Sara e sheh. Testoni vetëm atë:

1. Regjistrohuni si student, rezervoni një klasë.
2. Hapni pamjen e administratorit. A është rezervimi aty?
3. Rezervoni të njëjtën klasë përsëri. Duhet të refuzohet.
4. Vendosni kapacitetin e një klase në 2, rezervojeni nga dy llogari studentësh, provoni një të tretë.

Në këtë pikë zakonisht shfaqen dy probleme. Orari shfaq orët sipas zonës kohore të serverit, jo të studios. Dhe kontrolli „E plotë“ bëhet vetëm në faqe, kështu që një klikim i shpejtë i dyfishtë krijon dy rezervime.

Shfaq të gjitha orët e klasave sipas zonës kohore të studios, [Asia/Dubai], pavarësisht se si është vendosur pajisja e vizitorit.

Kontrollo kapacitetin dhe rezervimet e dyfishta në server kur krijohet një rezervim, jo vetëm në faqe. Nëse dy kërkesa arrijnë bashkë për vendin e fundit, vetëm një duhet të ketë sukses.

Rregulloni rrjedhën bazë përpara se të shtoni çfarëdo tjetër. Çdo gjë tjetër varet prej saj.

Hapi 5: Shtoni rregullat e mbetura, një për mesazh

Tani kaloni rregullat e specifikimit një nga një:

Studentët mund të anulojnë një rezervim deri dy orë përpara fillimit të klasës. Pas kësaj, fshih butonin e anulimit dhe refuzo anulimin në server me një mesazh të qartë.

Vetëm llogariaime mund të hapë faqet e administratorit. Sigurohu që kjo kontrollohet në server për çdo veprim administrativ, jo vetëm duke fshehur menunë.

Pas çdo njërës, testojeni dhe kaloni te tjetra vetëm kur funksionon. Nëse një ndryshim prish diçka, kthehuni te pika e fundit e mirë e ruajtur dhe provoni një kërkesë më të qartë, në vend që të grumbulloni rregullime mbi rregullime.

Hapi 6: Lustroni atë që do ta vërejnë përdoruesit realë

Përdoruesit realë vërejnë gjëra të vogla. Një listë e shkurtër për aplikacionin e Sarës:

• Gjendjet bosh: „Ende nuk ka klasa këtë javë“ në vend të një faqeje boshe.
• Konfirmimi: „Je i rezervuar për Vinyasa, e martë 18:00“ pas rezervimit.
• Paraqitja në telefon: butona të mëdhenj, orari i lexueshëm në një ekran 375px.
• Vende të lira: „3 vende të lira“ në çdo kartelë klase, që studentët të rezervojnë më shpejt.

Në çdo kartelë klase shfaq vendet e lira, p.sh. „3 nga 12 të lira“. Pas rezervimit, shfaq një konfirmim me emrin e klasës, ditën dhe orën, dhe një buton për te rezervimet e mia.

Hapi 7: Testoni si një i huaj

Para se ta përdorë dikush tjetër, kaloni gjysmë ore duke u përpjekur ta thyeni:

Mund t’i kërkoni edhe AI të kalojë rastet kufitare:

Listo dhjetë gjëra që një student real mund t’i bëjë dhe që mund të prishin rezervimin ose anulimin, testo secilën dhe rregullo ato që dështojnë. Më thuaj çfarë ndryshove.

Hapi 8: Një rishikim sigurie

Ky aplikacion ruan emra, email-e dhe numra telefoni, kështu që një rishikim i shkurtër sigurie vlen. Pyetjet kryesore:

• A mund një student të shohë rezervimet ose të dhënat e kontaktit të një tjetri?
• A ndodhet ndonjë çelës ose fjalëkalim në kodin që ekzekutohet në shfletues?
• A është formulari i regjistrimit i mbrojtur nga bot-et?
• A ekziston një kopje rezervë e të dhënave?

Faqja jonë për nëse vibe coding është i sigurt shpjegon çdo kontroll dhe jep prompt-e për ta, dhe lista e sigurisë për aplikacionet e ndërtuara me AI është versioni i gjatë.

Hapi 9: Publikoni

Kur cikli bazë, rregullat dhe kontrollet kalojnë, publikoni. Në Mythex është një klikim, dhe aplikacioni merr një URL publike me bazën e të dhënave dhe hostimin e vendosur. Në Pro mund të lidhni domenin tuaj, si book.sarasyoga.com; shihni si të lidhni një domen të personalizuar.

Para se të dërgoni lidhjen, kontrolloni një herë të fundit versionin e publikuar. Rezervoni një klasë nga telefoni juaj. Prodhimi dhe parashikimi duhet të sillen njësoj, por konfirmojeni.

Hapi 10: Përdoruesit e parë dhe versioni tjetër

Jepni lidhjen fillimisht pesë studentëve të rregullt, jo të gjithëve. Kërkojuni të rezervojnë klasën e tyre të ardhshme përmes saj dhe t’ju thonë çfarë ishte e paqartë. Pastaj rregulloni tre gjërat kryesore që përmendin.

Pas disa javësh përdorimi real, një listë v2 për një aplikacion të tillë zakonisht shkruhet vetvetiu: një listë pritjeje për klasat e plota, kujtesa me email një natë përpara, dhe paketa klasash të paguara online. Secila merr të njëjtin trajtim: specifikohet në disa rreshta, i jepet prompt, testohet, publikohet. Për shtimin e pagesave, shihni si të shtoni pagesa në aplikacionin tuaj. Për t’i bërë të njohur, si të lansoni një aplikacion dhe të merrni përdoruesit e parë.

Kthimi në aplikacion telefoni

Shumë studio duan një ikonë në telefonin e studentëve. Në Mythex Pro, aplikacioni i publikuar mund të bëhet një aplikacion Android (një skedar që mund ta ngarkoni në Google Play) dhe një aplikacion iPhone i dërguar në TestFlight me çelësin tuaj App Store Connect, pa Mac. Aplikacioni i telefonit hap aplikacionin web të publikuar, kështu që çdo herë që publikoni një përditësim, e ka edhe aplikacioni i telefonit.

Çfarë të merrni me vete

Vetë ndërtimi ishte pjesa e shkurtër. Ajo që e bëri aplikacionin të përdorshëm ishte lista „jo në v1“ e specifikimit, testimi i ciklit bazë përpara çdo gjëje tjetër, rregullat në server për kapacitetin dhe hyrjen, dhe pesë përdorues realë përpara pesëdhjetë. Kjo është pamja e vibe coding kur aplikacioni duhet të funksionojë për njerëz të tjerë.

Jeni gati të provoni të tuajin? Shkruajeni specifikimin me një faqe, pastaj ngjiteni paragrafin e parë te ndërtuesi i aplikacioneve me AI. Nëse dëshironi të shihni më shumë lloje aplikacionesh dhe prompt-et pas tyre, lexoni shembujt e vibe coding.

Pyetje