Jinsi ya Kutengeneza App kwa Vibe Coding: Kutoka Wazo hadi App Iliyochapishwa

Ili kutengeneza app kwa vibe coding, andika maelezo ya ukurasa mmoja ya toleo la kwanza, yape AI app builder kama prompt yako ya kwanza, kisha ukuze app kwa hatua ndogo zilizojaribiwa: data, kuingia, mtiririko mkuu wa kazi, umaliziaji, ukaguzi wa usalama, na hatimaye uchapishaji. Mwongozo huu unafuata mradi mmoja wa mfano, app ya kuweka nafasi za madarasa ya yoga kwa studio ndogo, kupitia kila hatua, pamoja na prompt zilizotumika kila mahali.

Ikiwa hujawahi kujenga kitu kwa njia hii, mafunzo ya vibe coding kwa wanaoanza yanaanza kidogo zaidi. Kwa muhtasari mpana zaidi ambao hauhusu vibe coding pekee, angalia jinsi ya kutengeneza app kwa AI.

Mradi wenyewe

Fikiria mmiliki wa studio ya yoga, Sara, anayeendesha madarasa nane kwa wiki. Nafasi huja kupitia WhatsApp; yeye huweka orodha ya karatasi kwa kila darasa na mara nyingi huuza nafasi zaidi ya uwezo. Anataka:

• Wanafunzi waone ratiba ya wiki na waweke nafasi.
• Kila darasa liwe na uwezo wake.
• Orodha ya kila darasa anayoweza kuikagua mlangoni.
• Wanafunzi waweze kughairi hadi saa mbili kabla.

Hiyo ndiyo toleo lote la kwanza. Hakuna malipo, hakuna uanachama, hakuna app store. Hayo yatakuja baadaye, au hayatakuja kabisa.

Hatua ya 1: Andika maelezo ya ukurasa mmoja

Kabla ya kufungua zana yoyote, andika toleo la kwanza kwa maneno rahisi. Dakika kumi hapa zinaokoa saa za kurudiana. Muundo unaofaa:

• Nani anaitumia: wanafunzi (kuweka nafasi na kughairi), Sara (kusimamia madarasa, kuona orodha).
• Skrini: ratiba, maelezo ya darasa, nafasi zangu, orodha ya madarasa ya admin, orodha ya wanafunzi wa darasa.
• Data: madarasa (jina, mwalimu, muda wa kuanza, urefu, uwezo), nafasi (mwanafunzi, darasa, hali), wanafunzi (jina, barua pepe, simu).
• Sheria: hakuna kuweka nafasi darasa lililojaa; nafasi moja kwa mwanafunzi kwa darasa; kughairi hadi saa mbili kabla; ni Sara pekee anayeona kurasa za admin.
• Si katika v1: malipo, vifurushi vya madarasa, orodha za kusubiri, vikumbusho.

Orodha ya "si katika v1" ndiyo muhimu zaidi. Ndiyo inayoweka ujenzi kwenye mstari wa kumaliza. Mwongozo wetu wa kuandika product requirements doc kwa AI unaenda mbali zaidi ikiwa unataka maelezo kamili.

Hatua ya 2: Chagua zana inayoshughulikia mzunguko mzima

Kwa app yenye hifadhidata, kuingia na URL ya umma, tumia AI app builder inayoendesha msimbo, inayoambatisha hifadhidata na kuchapisha, badala ya msaidizi wa chat anayekupa faili. Ulinganisho wetu wa zana za vibe coding unaorodhesha chaguo. Hapa tutatumia Mythex kwa sababu inafunika kila hatua mahali pamoja: chat, preview ya moja kwa moja, hifadhidata halisi na hifadhi ya faili, na uchapishaji kwa kubofya mara moja.

Hatua ya 3: Prompt ya kwanza

Geuza maelezo kuwa aya moja. Usibandike hati nzima mara moja na maelezo yote; weka msingi kisha ongeza mengine hatua kwa hatua.

Tengeneza app ya kuweka nafasi za madarasa kwa studio yangu ya yoga. Wanafunzi hujisajili kwa jina, barua pepe na simu, huona ratiba ya wiki hii, na huweka nafasi katika darasa. Kila darasa lina jina, mwalimu, muda wa kuanza, urefu na uwezo; darasa lililojaa linaonyesha "Imejaa" na haliwezi kuwekwa. Wanafunzi wanaona nafasi zao na wanaweza kughairi hadi saa mbili kabla ya darasa. Mimi ni admin: naweza kuongeza na kuhariri madarasa na kuona orodha ya waliowekwa nafasi kwa kila moja. Muundo tulivu, rahisi unaofanya kazi vizuri kwenye simu.

Ukiwa huna uhakika kama zana imeelewa, omba mpango kwanza. Kwenye Mythex, hali ya Plan hupanga skrini na data kabla ya kuandika msimbo, nawe unaidhinisha.

Hatua ya 4: Fanya mzunguko mkuu ufanye kazi

Mzunguko mkuu ndio jambo moja ambalo app ipo kulifanya: mwanafunzi anaweka nafasi darasani, na Sara anaiona. Jaribu hilo tu:

1. Jisajili kama mwanafunzi, weka nafasi darasani.
2. Fungua mwonekano wa admin. Je, nafasi iko hapo?
3. Weka nafasi darasa lile lile tena. Inapaswa kukataa.
4. Weka uwezo wa darasa kuwa 2, liweke kutoka akaunti mbili za wanafunzi, kisha ujaribu la tatu.

Matatizo mawili huonekana kwa kawaida hapa. Ratiba inaonyesha nyakati kwa saa ya seva, si ya studio. Na ukaguzi wa "Imejaa" hufanyika kwenye ukurasa pekee, kwa hiyo kubofya mara mbili haraka kunaunda nafasi mbili.

Onyesha nyakati zote za madarasa kwenye saa ya studio, [Asia/Dubai], bila kujali saa ya kifaa cha mgeni.

Kagua uwezo na nafasi zilizorudiwa kwenye seva wakati nafasi inapoundwa, si kwenye ukurasa pekee. Maombi mawili yakifika pamoja kwa nafasi ya mwisho, moja pekee lifanikiwe.

Rekebisha mzunguko mkuu kabla ya kuongeza kitu kingine. Kila kitu kingine kinautegemea.

Hatua ya 5: Ongeza sheria zilizobaki, moja kwa ujumbe

Sasa pitia sheria za maelezo moja baada ya nyingine:

Wanafunzi wanaweza kughairi nafasi hadi saa mbili kabla darasa halijaanza. Baada ya hapo, ficha kitufe cha kughairi na ukatae kughairi kwenye seva kwa ujumbe wazi.

Ni akaunti yangu pekee inayoweza kufungua kurasa za admin. Hakikisha hili linakaguliwa kwenye seva kwa kila kitendo cha admin, si kwa kuficha menyu pekee.

Baada ya kila moja, jaribu, na endelea pale tu inapofanya kazi. Ikiwa mabadiliko yanavunja kitu, rudi kwenye checkpoint ya mwisho iliyofanya kazi na ujaribu ombi lilo wazi zaidi badala ya kurundika marekebisho juu ya mengine.

Hatua ya 6: Malizia kile ambacho watumiaji halisi wataona

Watumiaji halisi huona mambo madogo. Orodha fupi kwa app ya Sara:

• Hali tupu: "Hakuna madarasa wiki hii bado" badala ya ukurasa mtupu.
• Uthibitisho: "Umewekewa nafasi ya Vinyasa, Jumanne saa 18:00" baada ya kuweka nafasi.
• Mpangilio wa simu: vitufe vikubwa, ratiba inayosomeka kwenye skrini ya 375px.
• Nafasi zilizobaki: "nafasi 3 zimebaki" kwenye kila kadi ya darasa, ili wanafunzi wawahi kuweka nafasi.

Kwenye kila kadi ya darasa onyesha nafasi zilizobaki, mfano "3 kati ya 12 zimebaki". Baada ya kuweka nafasi, onyesha uthibitisho wenye jina la darasa, siku na muda, na kitufe cha kwenda kwenye nafasi zangu.

Hatua ya 7: Jaribu kama mgeni

Kabla ya mtu mwingine yeyote kuitumia, tumia nusu saa ukijaribu kuivunja:

Unaweza pia kumwomba AI apitie kesi za pembeni:

Orodhesha mambo kumi ambayo mwanafunzi halisi anaweza kufanya yanayoweza kuvunja kuweka nafasi au kughairi, jaribu kila moja na urekebishe yanayoshindwa. Niambie ulichobadilisha.

Hatua ya 8: Ukaguzi wa usalama

App hii huhifadhi majina, barua pepe na namba za simu, kwa hiyo ukaguzi mfupi wa usalama unafaa. Maswali makuu ni:

• Je, mwanafunzi mmoja anaweza kuona nafasi au maelezo ya mawasiliano ya mwingine?
• Je, kuna key au nenosiri lolote kwenye msimbo unaoendeshwa kwenye kivinjari?
• Je, fomu ya usajili inalindwa dhidi ya bots?
• Je, kuna nakala rudufu ya data?

Ukurasa wetu kuhusu kama vibe coding ni salama unaeleza kila ukaguzi na kutoa prompt zake, na orodha ya ukaguzi wa usalama kwa app zilizojengwa na AI ndiyo toleo refu.

Hatua ya 9: Chapisha

Mzunguko mkuu, sheria na ukaguzi vikipita, chapisha. Kwenye Mythex ni kubofya mara moja, na app inapata URL ya umma ikiwa na hifadhidata na uendeshaji tayari. Kwenye Pro unaweza kuunganisha domeni yako mwenyewe, kama book.sarasyoga.com; angalia jinsi ya kuunganisha domeni maalum.

Kabla ya kutuma kiungo, kagua toleo lililochapishwa mara moja zaidi. Weka nafasi ya darasa kutoka kwenye simu yako. Production na preview zinapaswa kufanya kazi sawa, lakini thibitisha.

Hatua ya 10: Watumiaji wa kwanza na toleo lijalo

Mpe kiungo wanafunzi watano wa kawaida kwanza, si wote. Waombe waweke nafasi ya darasa lao lijalo kupitia hapo na waniambie kilichochanganya. Kisha rekebisha mambo matatu makuu wanayoyataja.

Baada ya wiki chache za matumizi halisi, orodha ya v2 kwa app kama hii huandikika yenyewe: orodha ya kusubiri kwa madarasa yaliyojaa, vikumbusho vya barua pepe jioni kabla, na vifurushi vya madarasa vinavyolipwa mtandaoni. Kila moja hupitia matibabu yale yale: andika maelezo mafupi, toa prompt, jaribu, chapisha. Kwa kuongeza malipo, angalia jinsi ya kuongeza malipo kwenye app yako. Kwa kueneza habari na kupata watumiaji wa kwanza, angalia jinsi ya kuzindua app na kupata watumiaji wa kwanza.

Kuigeuza kuwa app ya simu

Studio nyingi zinataka aikoni kwenye simu za wanafunzi wao. Kwenye Mythex Pro, app iliyochapishwa inaweza kuwa app ya Android (faili unaloweza kupakia Google Play) na app ya iPhone inayotumwa TestFlight ukitumia ufunguo wako wa App Store Connect, bila Mac. App ya simu hufungua app ya wavuti iliyochapishwa, kwa hiyo kila unapochapisha sasisho, app ya simu nayo inalipata.

Mambo ya kuchukua kutoka hapa

Ujenzi wenyewe ulikuwa sehemu fupi. Kilichofanya app iwe ya kutumika ni orodha ya "si katika v1" ya maelezo, kujaribu mzunguko mkuu kabla ya kitu kingine, sheria za upande wa seva kwa uwezo na ufikiaji, na watumiaji watano halisi kabla ya hamsini. Hivyo ndivyo vibe coding inavyoonekana app inapohitaji kufanya kazi kwa watu wengine.

Uko tayari kujaribu yako? Andika maelezo yako ya ukurasa mmoja, kisha ubandike aya ya kwanza kwenye AI app builder. Ikiwa ungependa kuona aina zaidi za app na prompt zilizo nyuma yake, soma mifano ya vibe coding.

Maswali