Ինչպես կառուցել հավելված vibe coding-ով. գաղափարից մինչև հրապարակված հավելված

Vibe coding-ով հավելված կառուցելու համար գրեք մեկ էջանոց նկարագիր առաջին տարբերակի մասին, տվեք այն AI հավելվածների կառուցողին որպես առաջին prompt, ապա աճեցրեք հավելվածը փոքր, փորձարկված քայլերով․ տվյալներ, մուտք, հիմնական աշխատանքային հոսք, կատարելագործում, անվտանգության անցում և, ի վերջո, հրապարակում։ Այս ուղեցույցը հետևում է մեկ օրինակելի նախագծի՝ փոքր յոգայի ստուդիայի դասերի ամրագրման հավելվածին, բոլոր փուլերով և յուրաքանչյուր քայլի prompt-երով։

Եթե երբեք այս կերպ բան չեք կառուցել, մեր vibe coding-ի ձեռնարկը սկսնակների համար-ը սկսում է ավելի փոքր։ Ավելի լայն ակնարկի համար, որը կապված չէ միայն vibe coding-ի հետ, տե՛ս ինչպես կառուցել հավելված AI-ով։

Նախագիծը

Պատկերացրեք յոգայի ստուդիայի սեփականատեր Սառային, որը շաբաթական ութ դաս է վարում։ Ամրագրումները գալիս են WhatsApp-ով. նա յուրաքանչյուր դասի համար պահում է թղթե ցուցակ և հաճախ գերամրագրում է։ Նա ուզում է.

• Որ ուսանողները տեսնեն շաբաթվա դասացուցակը և ամրագրեն տեղ։
• Որ յուրաքանչյուր դաս ունենա տարողություն։
• Որ դռան մոտ կարողանա ստուգել յուրաքանչյուր դասի ցուցակը։
• Որ ուսանողները կարողանան չեղարկել մինչև երկու ժամ առաջ։

Այսքանն է առաջին տարբերակը։ Վճարումներ չկան, անդամակցություն չկա, ծրագրերի խանութ չկա։ Դրանք կգան հետո, կամ երբեք։

Քայլ 1. Գրեք մեկ էջանոց նկարագիր

Մինչև որևէ գործիք բացելը, գրեք առաջին տարբերակը պարզ բառերով։ Տասը րոպե այստեղ խնայում է ժամեր հետ-ու-առաջ շփումից։ Օգտակար ձև.

• Ո՞վ է օգտագործում. ուսանողները (ամրագրում և չեղարկում), Սառան (կառավարում է դասերը, տեսնում է ցուցակները)։
• Էկրաններ. դասացուցակ, դասի մանրամասներ, իմ ամրագրումները, ադմին դասեր, ադմին դասի ցուցակ։
• Տվյալներ. դասեր (անուն, ուսուցիչ, սկսվելու ժամ, տևողություն, տարողություն), ամրագրումներ (ուսանող, դաս, կարգավիճակ), ուսանողներ (անուն, էլ․ փոստ, հեռախոս)։
• Կանոններ. լիքը դասի ամրագրում չի թույլատրվում. մեկ ուսանող՝ մեկ ամրագրում յուրաքանչյուր դասի համար. չեղարկում մինչև երկու ժամ առաջ. միայն Սառան է տեսնում ադմին էջերը։
• Չկա v1-ում. վճարումներ, դասերի փաթեթներ, սպասման ցուցակներ, հիշեցումներ։

Ցուցակը «չկա v1-ում» մասը ամենակարևորն է։ Այն է, որ պահում է կառուցումը ավարտելի։ Եթե ձեզ ավելի մանրամասն նկարագիր է պետք, պահանջների փաստաթուղթը AI-ով գրելու ուղեցույցը ավելի առաջ է գնում։

Քայլ 2. Ընտրեք գործիք, որը ծածկում է ամբողջ ցիկլը

Տվյալների բազա, մուտք և հանրային URL ունեցող հավելվածի համար օգտագործեք AI հավելվածների կառուցող, որն աշխատեցնում է կոդը, կցում է տվյալների բազա և հրապարակում, այլ ոչ թե չաթի օգնական, որը ձեզ ֆայլեր է տալիս։ Մեր vibe coding գործիքների համեմատությունը-ը թվարկում է տարբերակները։ Մենք այստեղ կօգտագործենք Mythex-ը, քանի որ այն ծածկում է յուրաքանչյուր քայլ մեկ տեղում՝ չաթ, կենդանի նախադիտում, իրական տվյալների բազա և ֆայլերի պահոց, և մեկ սեղմումով հրապարակում։

Քայլ 3. Առաջին prompt-ը

Փոխեք նկարագիրը մեկ պարբերության։ Մի տեղադրեք ամբողջ փաստաթուղթը մեկ անգամ բոլոր մանրամասներով. տվեք հիմքը, իսկ մնացածը ավելացրեք քայլերով։

Կառուցիր դասերի ամրագրման հավելված իմ յոգայի ստուդիայի համար։ Ուսանողները գրանցվում են անունով, էլ․ փոստով և հեռախոսով, տեսնում են այս շաբաթվա դասացուցակը և ամրագրում տեղ դասում։ Յուրաքանչյուր դաս ունի անուն, ուսուցիչ, սկսվելու ժամ, տևողություն և տարողություն. լիքը դասը ցուցադրում է «Full» և չի կարող ամրագրվել։ Ուսանողները տեսնում են իրենց ամրագրումները և կարող են չեղարկել մինչև երկու ժամ առաջ դասից։ Ես ադմինն եմ. կարող եմ ավելացնել և խմբագրել դասեր և տեսնել յուրաքանչյուր դասի ամրագրածների ցուցակը։ Հանգիստ, պարզ դիզայն, որը լավ է աշխատում հեռախոսներում։

Եթե չեք համոզված, որ գործիքը հասկացել է, խնդրեք նախ պլան։ Mythex-ում Plan ռեժիմը ստեղծում է էկրանները և տվյալները՝ նախքան կոդ գրելը, և դուք հաստատում եք այն։

Քայլ 4. Աշխատեցրեք հիմնական ցիկլը

Հիմնական ցիկլը այն մեկ բանն է, որի համար հավելվածը գոյություն ունի. ուսանողը ամրագրում է դաս, իսկ Սառան տեսնում է այն։ Փորձարկեք միայն դա.

1. Գրանցվեք որպես ուսանող, ամրագրեք դաս։
2. Բացեք ադմին տեսքը։ Ամրագրումը այնտեղ է՞։
3. Ամրագրեք նույն դասը նորից։ Այն պետք է մերժի։
4. Սահմանեք դասի տարողությունը 2, ամրագրեք այն երկու ուսանողի հաշիվներից, փորձեք երրորդը։

Այս փուլում սովորաբար երևում են երկու խնդիր։ Դասացուցակը ժամերը ցույց է տալիս սերվերի ժամային գոտում, ոչ թե ստուդիայի։ Եվ «Full» ստուգումը միայն էջում է կատարվում, ուստի արագ կրկնակի սեղմումը ստեղծում է երկու ամրագրում։

Ցույց տուր բոլոր դասերի ժամերը ստուդիայի ժամային գոտում՝ [Asia/Dubai], անկախ այցելուի սարքի կարգավորումից։

Ստուգիր տարողությունը և կրկնակի ամրագրումները սերվերի վրա, երբ ամրագրում է ստեղծվում, ոչ միայն էջում։ Եթե երկու հարցում միաժամանակ է գալիս վերջին տեղի համար, միայն մեկը պետք է հաջողվի։

Մինչև որևէ բան ավելացնելը շտկեք հիմնական ցիկլը։ Ամեն ինչ դրա վրա է կախված։

Քայլ 5. Ավելացրեք մնացած կանոնները, մեկ հաղորդագրությամբ

Հիմա անցեք նկարագրի կանոնների միջով՝ մեկ առ մեկ.

Ուսանողները կարող են չեղարկել ամրագրումը մինչև երկու ժամ առաջ դասի սկսվելը։ Դրանից հետո թաքցրու չեղարկման կոճակը և մերժիր չեղարկումը սերվերի վրա՝ հստակ հաղորդագրությամբ։

Միայն իմ հաշիվը կարող է բացել ադմին էջերը։ Համոզվիր, որ սա ստուգվում է սերվերի վրա յուրաքանչյուր ադմին գործողության համար, ոչ միայն թաքցնելով ընտրացանկը։

Յուրաքանչյուրից հետո փորձարկեք և անցեք հաջորդին միայն այն դեպքում, երբ այն աշխատում է։ Եթե փոփոխությունը որևէ բան կոտրի, վերադարձեք վերջին լավ ստուգակետին և փորձեք ավելի հստակ խնդրանք, այլ ոչ թե վրան շերտեր դնել։

Քայլ 6. Կատարելագործեք այն, ինչ իրական օգտատերերը կնկատեն

Իրական օգտատերերը նկատում են փոքր բաներ։ Սառայի հավելվածի համար կարճ ցուցակ.

• Դատարկ վիճակներ. «Այս շաբաթ դեռ դասեր չկան» այն բանի փոխարեն, որ դատարկ էջ լինի։
• Հաստատում. «Դուք ամրագրված եք Vinyasa-ի համար, երեքշաբթի 18:00» ամրագրումից հետո։
• Հեռախոսային դասավորություն. մեծ կոճակներ, դասացուցակը ընթեռնելի 375px էկրանին։
• Մնացած տեղեր. «3 տեղ է մնացել» յուրաքանչյուր դասի վրա, որ ուսանողները շուտ ամրագրեն։

Յուրաքանչյուր դասի քարտի վրա ցույց տուր մնացած տեղերը, օրինակ՝ «3 of 12 left»։ Ամրագրումից հետո ցույց տուր հաստատում՝ դասի անունով, օրով և ժամով, և կոճակ դեպի իմ ամրագրումները։

Քայլ 7. Փորձարկեք այնպես, ինչպես օտարը

Մինչև ուրիշ որևէ մեկը օգտագործի, ծախսեք կես ժամ՝ փորձելով կոտրել այն.

Դուք կարող եք նաև խնդրել AI-ին անցնել եզրային դեպքերով.

Թվարկիր տասը բան, որ իրական ուսանողը կարող է անել և որ կարող է կոտրել ամրագրումը կամ չեղարկումը, փորձիր յուրաքանչյուրը և շտկիր այն, ինչ չի աշխատում։ Ասա, թե ինչ ես փոխել։

Քայլ 8. Անվտանգության անցում

Այս հավելվածը պահում է անուններ, էլ․ փոստեր և հեռախոսահամարներ, ուստի կարճ անվտանգության անցումը արժե։ Հիմնական հարցերը.

• Կարո՞ղ է մի ուսանող տեսնել մյուսի ամրագրումները կամ կոնտակտային տվյալները։
• Կա՞ արդյոք բանալիներ կամ գաղտնաբառեր բրաուզերում աշխատող կոդում։
• Պաշտպանված է արդյոք գրանցման ձևը բոտերից։
• Կա՞ արդյոք տվյալների պահուստ։

Մեր ինչ է vibe coding-ը և արդյոք այն անվտանգ է էջը բացատրում է յուրաքանչյուր ստուգում և տալիս է դրանց prompt-եր, իսկ անվտանգության ստուգաթերթը AI-ով կառուցված հավելվածների համար-ը երկար տարբերակն է։

Քայլ 9. Հրապարակեք

Երբ հիմնական ցիկլը, կանոնները և ստուգումները անցնեն, հրապարակեք։ Mythex-ում դա մեկ սեղմում է, և հավելվածը ստանում է հանրային URL իր տվյալների բազայով և հոստինգով։ Pro-ում կարող եք միացնել ձեր սեփական դոմենը, օրինակ՝ book.sarasyoga.com․ տե՛ս ինչպես միացնել անհատական դոմեն։

Մինչև հղումն ուղարկելը, նորից ստուգեք հրապարակված տարբերակը։ Ամրագրեք դաս ձեր հեռախոսից։ Նախադիտումը և արտադրական տարբերակը պետք է նույն կերպ աշխատեն, բայց հաստատեք դա։

Քայլ 10. Առաջին օգտատերերը և հաջորդ տարբերակը

Հղումը նախ տվեք հինգ կանոնավոր ուսանողի, ոչ թե բոլորին։ Խնդրեք նրանց ամրագրել իրենց հաջորդ դասը դրա միջոցով և ասել ձեզ, թե ինչն էր անհասկանալի։ Ապա շտկեք այն երեք բանը, որ նրանք ամենից շատ են նշում։

Իրական օգտագործման մի քանի շաբաթից հետո այս տիպի հավելվածի v2 ցուցակը սովորաբար ինքն իրեն է գրվում. սպասման ցուցակ լիքը դասերի համար, էլ․ փոստով հիշեցումներ դասից առաջ երեկոյան և դասերի փաթեթներ, որոնք վճարվում են առցանց։ Յուրաքանչյուրը ստանում է նույն մշակումը. մի քանի տողով նկարագրեք, գրեք prompt, փորձարկեք, հրապարակեք։ Վճարումներ ավելացնելու համար տե՛ս ինչպես ավելացնել վճարումներ ձեր հավելվածին։ Մարդկանց իմանալու համար՝ ինչպես գործարկել հավելված և ստանալ առաջին օգտատերերին։

Դարձնել հեռախոսային հավելված

Շատ ստուդիաներ ցանկանում են պատկերակ ունենալ իրենց ուսանողների հեռախոսներում։ Mythex Pro-ում հրապարակված հավելվածը կարող է դառնալ Android հավելված (ֆայլ, որը կարող եք վերբեռնել Google Play-ում) և iPhone հավելված, որը ուղարկվում է TestFlight-ին ձեր սեփական App Store Connect բանալիով, առանց Mac-ի։ Հեռախոսային հավելվածը բացում է հրապարակված վեբ հավելվածը, ուստի յուրաքանչյուր թարմացում, որ հրապարակում եք, հասնում է նաև հեռախոսային հավելվածին։

Ինչ վերցնել սրանից

Ուղղակի կառուցումը կարճ մասն էր։ Այն, ինչը հավելվածը օգտագործելի դարձրեց, նկարագրի «չկա v1-ում» ցուցակն էր, հիմնական ցիկլի փորձարկումը նախքան ամեն ինչ, սերվերային կանոնները տարողության և մուտքի համար, և հինգ իրական օգտատեր՝ նախքան հիսունը։ Սա է vibe coding-ի տեսքը, երբ հավելվածը պետք է աշխատի ուրիշների համար։

Պատրա՞ստ եք փորձել ձեր սեփականը։ Գրեք ձեր մեկ էջանոց նկարագիրը, ապա տեղադրեք առաջին պարբերությունը AI հավելվածների կառուցողում։ Եթե ուզում եք տեսնել ավելի շատ հավելվածի տեսակներ և դրանց հետևող prompt-երը, կարդացեք մեր vibe coding-ի օրինակները։

Հարցեր