Vibe coding арқылы қолданба қалай жасау керек: идеядан жарияланған қолданбаға дейін

Vibe coding арқылы қолданба жасау үшін бірінші нұсқаның бір беттік сипаттамасын жазыңыз, оны AI қолданба құрастырушысына бірінші промпт ретінде беріңіз, содан кейін қолданбаны шағын сынақтан өткен қадамдармен өсіріңіз: деректер, логин, негізгі жұмыс үдерісі, әдемілеу, қауіпсіздік тексеруі және соңында жариялау. Бұл нұсқаулық бір мысал жобаны — шағын йога студиясының сабаққа жазылу қолданбасын — әр кезеңде қолданылған промптармен бірге көрсетеді.

Мұндай жұмысты бірінші рет істеп көрсеңіз, біздің жаңадан бастаушыларға арналған vibe coding оқулығы шағын қадамнан басталады. Vibe coding-ке байланысты емес кеңірек шолу үшін AI көмегімен қолданба қалай жасау керек мақаласын қараңыз.

Жоба

Сара есімді йога студиясының иесін елестетіңіз: ол аптасына сегіз сабақ өткізеді. Жазылулар WhatsApp арқылы келеді; ол әр сабаққа қағаз тізім ұстайды және жиі артық жазылып қалады. Ол мынаны қалайды:

• Студенттер аптаның кестесін көріп, орын брондай алсын.
• Әр сабақтың сыйымдылығы болсын.
• Әр сабақ үшін тізім болып, есікте тексеруге болсын.
• Студенттер сабақтан екі сағат бұрын бас тарта алсын.

Бұл бүкіл бірінші нұсқа. Төлем жоқ, абонемент жоқ, қолданба дүкені жоқ. Олар кейінірек келеді, немесе мүлде келмейді.

1-қадам: Бір беттік спецификация жазыңыз

Кез келген құралды ашпас бұрын бірінші нұсқаны қарапайым сөздермен жазып алыңыз. Мұнда он минут жұмсау сағаттаған хабар алмасудан үнемдейді. Пайдалы құрылым:

• Кім пайдаланады: студенттер (брондау және бас тарту), Сара (сабақтарды басқару, тізімдерді көру).
• Экрандар: кесте, сабақ мәліметі, менің брондауларым, әкімші сабақтар, әкімші сабақ тізімі.
• Деректер: сабақтар (атауы, мұғалім, басталу уақыты, ұзақтығы, сыйымдылығы), брондаулар (студент, сабақ, күйі), студенттер (аты, электрондық пошта, телефон).
• Ережелер: толып қалған сабаққа брондауға болмайды; бір студент бір сабаққа бір рет жазылады; сабақтан екі сағат бұрын бас тартуға болады; әкімші беттерін тек Сара көреді.
• v1-де жоқ: төлемдер, сабақ пакеттері, күту тізімдері, еске салғыштар.

Жұмыс мақсатқа жетуі үшін «v1-де жоқ» тізімі ең маңызды. Ол құрылысты аяқтауға болатын етіп ұстайды. Толық спецификация үшін өнім талаптар құжатын AI көмегімен жазу мақаласын қараңыз.

2-қадам: Бүкіл циклді өңдейтін құрал таңдаңыз

Деректер қорымен, логиндермен және жалпыға ашық URL-мен жұмыс істейтін қолданба үшін кодты іске қосатын, дерекқор қосатын және жариялайтын AI қолданба құрастырушысын пайдаланыңыз, файлдарды беретін чат көмекшіні емес. Vibe coding құралдарын салыстыру мақаласында нұсқалар бар. Біз бұл жерде Mythex-ті қолданамыз, себебі ол әр қадамды бір жерде қамтиды: чат, тірі алдын ала қарау, нақты дерекқор мен файл сақтау және бір басумен жариялау.

3-қадам: Бірінші промпт

Спецификацияны бір абзацқа айналдырыңыз. Барлық құжатты бірден барлық мәліметімен қоймаңыз; негізін беріңіз де, қалғанын қадаммен қосыңыз.

Йога студиям үшін сабаққа жазылу қолданбасын жасаңыз. Студенттер аты, электрондық пошта және телефонымен тіркеледі, осы аптаның кестесін көреді және сабаққа орын брондайды. Әр сабақтың атауы, мұғалімі, басталу уақыты, ұзақтығы және сыйымдылығы болады; толған сабақта «Full» көрсетіледі және оған брондауға болмайды. Студенттер өз брондауларын көріп, сабақтан екі сағат бұрын бас тарта алады. Мен әкімшімін: сабақтарды қосып, өңдей аламын және әр сабаққа кім жазылғанын көре аламын. Тыныш, қарапайым дизайн, телефонда жақсы жұмыс істейтін болсын.

Құрастырушы дұрыс түсінгеніне көз жеткізбесеңіз, алдымен жоспар сұраңыз. Mythex-те Plan режимі код жазар алдында экрандар мен деректерді сипаттайды, сіз оны бекітесіз.

4-қадам: Негізгі циклді жұмыс істетіңіз

Негізгі цикл — қолданба соның үшін бар: студент сабаққа жазылады, ал Сара оны көреді. Тек соны сынаңыз:

1. Студент ретінде тіркеліп, сабаққа жазылыңыз.
2. Әкімші көрінісін ашыңыз. Брондау сонда ма?
3. Сол сабаққа қайта жазылыңыз. Бас тарту керек.
4. Сабақ сыйымдылығын 2-ге қойып, оған екі студент аккаунтымен жазылыңыз, үшіншісін көріңіз.

Осы кезеңде әдетте екі мәселе шығады. Кесте уақытты студия уақыт белдеуінде емес, сервердің уақыт белдеуінде көрсетеді. Ал «Full» тексеруі тек бетте жұмыс істейді, сондықтан жылдам екі рет басу екі брондау жасайды.

Барлық сабақ уақыттарын құрылғы баптауына қарамастан студияның уақыт белдеуінде, [Asia/Dubai], көрсетіңіз.

Сыйымдылық пен қайталанатын брондауларды бетте ғана емес, брондау жасалғанда серверде тексеріңіз. Егер соңғы орынға бір уақытта екі сұраныс келсе, тек біреуі сәтті болуы керек.

Басқа нәрсе қосар алдында негізгі циклді түзетіңіз. Бәрі соған тәуелді.

5-қадам: Қалған ережелерді бір хабарламада бір-бірден қосыңыз

Енді спецификацияның ережелерін бірден бір өтіңіз:

Студенттер сабақ басталғанға дейін екі сағатқа дейін брондауын бас тарта алады. Одан кейін бас тарту батырмасын жасырып, серверде бас тартуды анық хабармен қабылдамаңыз.

Әкімші беттерін тек менің аккаунтым аша алады. Мұны әр әкімші әрекетінде серверде тексеріңіз, тек мәзірді жасыру арқылы емес.

Әр өзгерістен кейін сынаңыз және тек жұмыс істегенде ғана жалғастырыңыз. Егер өзгеріс бірдеңені бұзса, соңғы жақсы checkpoint-ке қайтыңыз да, түзетулерді үстіне жинамай, анығырақ сұрауды қайталаңыз.

6-қадам: Нақты пайдаланушылар байқайтын нәрселерді жетілдіріңіз

Нақты пайдаланушылар шағын нәрселерді байқайды. Сара қолданбасы үшін қысқа тізім:

• Бос күйлер: бос бетгорағанда «Осы аптада әлі сабақтар жоқ» деген хабар.
• Растау: брондаудан кейін «Сіз Vinyasa сабағына жазылдыңыз, сейсенбі, 18:00».
• Телефон орналасуы: үлкен батырмалар, кесте 375px экранда оқылатын.
• Қалған орындар: әр сабақ карточкасында «3 орын қалды», студенттер тезірек жазылсын.

Әр сабақ карточкасында қалған орындарды көрсетіңіз, мысалы «12-нің 3-і бос». Брондағаннан кейін сабақ атауы, күні мен уақытын көрсететін растау және менің брондауларыма өтетін батырма көрсетіңіз.

7-қадам: Бөгде адам сияқты сынаңыз

Басқа адам пайдаланбас бұрын, оны бұзуға жарты сағат жұмсаңыз:

AI-ден шеткі жағдайларды аралауын да сұрауға болады:

Нақты студент брондау немесе бас тартуды бұзуы мүмкін он әрекетті тізіп, әр бірін тексеріңіз және сәтсіз болғанын түзетіңіз. Не өзгерткеніңізді айтыңыз.

8-қадам: Қауіпсіздік тексеруі

Бұл қолданба аты-жөнін, электрондық поштасын және телефон нөмірлерін сақтайды, сондықтан қысқа қауіпсіздік тексеруі пайдалы. Негізгі сұрақтар:

• Бір студент басқа студенттің брондауларын немесе байланыс мәліметтерін көре ала ма?
• Браузерде жұмыс істейтін кодта кілттер немесе құпия сөздер бар ма?
• Тіркелу формасы боттардан қорғалған ба?
• Деректердің резерв көшірмесі бар ма?

Vibe coding қауіпсіз бе беті әр тексеруді түсіндіреді және олар үшін промпттар береді, ал AI көмегімен жасалған қолданбаларға арналған қауіпсіздік тізімі — ұзақ нұсқасы.

9-қадам: Жариялау

Негізгі цикл, ережелер және тексерулер өткенде, жариялаңыз. Mythex-те бұл бір басу, және қолданба дерекқоры мен хостингі дайын жалпыға ашық URL алады. Pro-да өз доменіңізді қоса аласыз, мысалы book.sarasyoga.com; теңшелген доменді қалай қосу керек мақаласын қараңыз.

Сілтемені жібермес бұрын, жарияланған нұсқаны тағы бір рет тексеріңіз. Телефоныңыздан сабаққа жазылып көріңіз. Өндірістік және алдын ала қарау нұсқалары бірдей жұмыс істеуі керек, бірақ растап алыңыз.

10-қадам: Алғашқы пайдаланушылар және келесі нұсқа

Сілтемені алдымен бес тұрақты студентке беріңіз, барлығына емес. Олардан келесі сабақтарын осы арқылы брондауын сұраңыз және не түсініксіз болғанын айтуын өтіңіз. Содан кейін олар айтқан үш жақсартуды түзетіңіз.

Бірнеше апта нақты пайдаланудан кейін осындай қолданба үшін v2 тізімі өздігінен құрылады: толған сабақтар үшін күту тізімі, алдынғы кеште электрондық пошта еске салғыштары және онлайн төленетін сабақ пакеттері. Әрқайсысына бірдей тәсіл қолданылады: бірнеше жолмен сипаттаңыз, промпт жазыңыз, сынаңыз, жариялаңыз. Төлем қосу туралы қолданбаға төлемдерді қалай қосу керек мақаласын қараңыз. Хабар тарату туралы — қолданбаны іске қосып, алғашқы пайдаланушыларды қалай табу керек.

Телефон қолданбасына айналдыру

Көп студия иелері студенттерінің телефонында белгіше болғанын қалайды. Mythex Pro-да жарияланған қолданба Android қолданбасына (Google Play-ге жүктеуге болатын файл) және өз App Store Connect кілтіңізбен TestFlight-қа жіберілетін iPhone қолданбасына, Mac-сыз айнала алады. Телефон қолданбасы жарияланған веб-қолданбаны ашады, сондықтан әр жаңартуды жариялаған кезде телефон қолданбасында да сол нұсқа болады.

Осыдан не алу керек

Құрастыру өзі — қысқа бөлік. Қолданбаны пайдалануға жарамды еткен нәрсе: спецификацияның «v1-де жоқ» тізімі, брондауды ең алдымен сынау, сыйымдылық пен қатынауға арналған серверлік ережелер және елудің алдында бес нақты пайдаланушы. Басқа адамдар үшін жұмыс істеуі керек қолданба болғанда, vibe coding осылай көрінеді.

Өзіңіздікін байқап көруге дайынсыз ба? Бір беттік спецификацияңызды жазып, бірінші абзацты AI қолданба құрастырушысына қойыңыз. Басқа қолданба түрлерін және олардың артындағы промпттарды көргіңіз келсе, vibe coding мысалдарын оқыңыз.

Сұрақтар