Како да изградите апликација со vibe coding: од идеја до објавена апликација

За да изградите апликација со vibe coding, напишете опис на една страница за првата верзија, дајте го на AI градител на апликации како ваш прв промпт, па растете ја апликацијата во мали тестирани чекори: податоци, најава, главниот работен тек, дотерување, безбедносен преглед и на крајот објавување. Овој водич ја следи една пример-апликација, систем за резервации на час за мало студио за јога, низ сите фази, со промптите што се користат во секоја.

Ако никогаш не сте граделе на овој начин, нашиот водич за vibe coding за почетници почнува поскромно. За поширок преглед што не е врзан само за vibe coding, видете како да изградите апликација со AI.

Проектот

Замислете сопственичка на студио за јога, Сара, која држи осум часа неделно. Резервациите доаѓаат преку WhatsApp; таа води хартиена листа по час и често презакажува. Таа сака:

• Студентите да го видат неделниот распоред и да резервираат место.
• Секој час да има капацитет.
• Листа по час што таа може да ја провери на вратата.
• Студентите да можат да откажат до два часа порано.

Тоа е целата прва верзија. Без плаќања, без членства, без продавница на апликации. Тоа доаѓа подоцна, или никогаш.

Чекор 1: Напишете спецификација на една страница

Пред да отворите која било алатка, запишете ја првата верзија со обични зборови. Десет минути овде заштедуваат часови наизменично праќање пораки. Корисна форма:

• Кој ја користи: студентите (резервираат и откажуваат), Сара (ги управува часовите и гледа листи).
• Екрани: распоред, детали за час, мои резервации, администраторски часови, администраторска листа на часови.
• Податоци: часови (име, наставник, почеток, времетраење, капацитет), резервации (студент, час, статус), студенти (име, е-пошта, телефон).
• Правила: нема резервација за полн час; една резервација по студент по час; откажување до два часа пред; само Сара ги гледа администраторските страници.
• Не во v1: плаќања, пакети часови, листи на чекање, потсетници.

Списокот „не во v1“ е најважен. Тој ја одржува изградбата завршлива. Нашиот водич за пишување документ за барања за производ со AI оди подалеку ако сакате поцелосна спецификација.

Чекор 2: Изберете алатка што ја покрива целата постапка

За апликација со база, најави и јавна URL адреса, користете AI градител на апликации што го извршува кодот, приклучува база и објавува, наместо чет-асистент што ви дава датотеки. Нашата споредба на алатки за vibe coding ги наведува опциите. Овде ќе користиме Mythex, бидејќи ги покрива сите чекори на едно место: чет, жив преглед, вистинска база и складиште за датотеки и објавување со еден клик.

Чекор 3: Првиот промпт

Претворете ја спецификацијата во еден пасус. Не ја залепувајте целата документација одеднаш со секој детал; дајте го јадрото и додавајте го остатокот по чекори.

Изгради апликација за резервации на часови за мојот студио за јога. Студентите се регистрираат со име, е-пошта и телефон, го гледаат распоредот за оваа недела и резервираат место во час. Секој час има име, наставник, почеток, времетраење и капацитет; полн час покажува „Полно“ и не може да се резервира. Студентите ги гледаат своите резервации и можат да откажат до два часа пред часот. Јас сум администратор: можам да додавам и уредувам часови и да ја видам листата на тоа кој е резервиран за секој. Смирен, едноставен дизајн што добро работи на телефони.

Ако не сте сигурни дека алатката ве разбрала, побарајте прво план. Во Mythex, режимот Plan ги поставува екраните и податоците пред да се напише код, а вие го одобрувате.

Чекор 4: Направете го јадрото да работи

Јадрото е единственото нешто заради кое апликацијата постои: студент резервира час, а Сара го гледа. Тестирајте само тоа:

1. Регистрирајте се како студент и резервирајте час.
2. Отворете го администраторскиот поглед. Дали резервацијата е таму?
3. Резервирајте го истиот час повторно. Треба да одбие.
4. Поставете капацитет на час на 2, резервирајте го од два студентски налози и обидете се со трет.

Во оваа фаза обично се појавуваат два проблеми. Распоредот ги прикажува времињата во временската зона на серверот, а не на студиото. И проверката „Полно“ се прави само во страницата, па брз двоен клик создава две резервации.

Прикажувај ги сите времиња на часовите во временската зона на студиото, [Asia/Dubai], без оглед на поставката на уредот на посетителот.

Проверувај го капацитетот и дупликатните резервации на серверот при создавање на резервацијата, не само во страницата. Ако две барања пристигнат заедно за последното место, само едно треба да успее.

Поправете го јадрото пред да додавате што било друго. Сè друго зависи од него.

Чекор 5: Додајте ги преостанатите правила, по една порака

Сега поминете низ правилата од спецификацијата едно по едно:

Студентите можат да откажат резервација до два часа пред почетокот на часот. По тоа, сокријте го копчето за откажување и одбијте го откажувањето на серверот со јасна порака.

Само мојата сметка може да ги отвора администраторските страници. Проверете го ова на серверот за секоја администраторска акција, не само со скривање на менито.

По секоја, тестирајте ја и преминете понатаму само кога ќе работи. Ако промената расипе нешто, вратете се на последната добра контролна точка и обидете се со појасно барање, наместо да наслојувате поправки.

Чекор 6: Дотерајте го она што вистинските корисници ќе го забележат

Вистинските корисници забележуваат ситни работи. Кратка листа за апликацијата на Сара:

• Празни состојби: „Уште нема часови оваа недела“ наместо празна страница.
• Потврда: „Резервирани сте за Vinyasa, вторник 18:00“ по резервацијата.
• Распоред за телефон: големи копчиња, распоредот читлив на екран од 375 пиксели.
• Слободни места: „Уште 3 места“ на секоја картичка за час, за студентите да резервираат побрзо.

На секоја картичка за час покажи слободни места, на пример „3 од 12 слободни“. По резервацијата, прикажи потврда со име на часот, ден и време и копче до моите резервации.

Чекор 7: Тестирајте како непознат

Пред некој друг да ја користи, поминете половина час обидувајќи се да ја скршите:

Можете и да ја замолите AI да поминат граничните случаи:

Наведи десет работи што вистински студент може да ги направи и што би можеле да ги скршат резервирањето или откажувањето, тестирај секоја и поправи го она што не функционира. Кажи ми што си променил.

Чекор 8: Безбедносен преглед

Оваа апликација чува имиња, е-пошти и телефонски броеви, па краток безбедносен преглед вреди. Главните прашања:

• Може ли еден студент да ги види резервациите или контакт-податоците на друг?
• Има ли клучеви или лозинки во кодот што работи во прелистувачот?
• Дали формата за регистрација е заштитена од ботови?
• Постои ли резервна копија на податоците?

Нашата страница за тоа дали е безбедно vibe coding ја објаснува секоја проверка и дава промпти за нив, а листата за безбедност за апликации изградени со AI е подолгата верзија.

Чекор 9: Објавете

Кога јадрото, правилата и проверките ќе поминат, објавете. Кај Mythex е со еден клик, а апликацијата добива јавна URL адреса со базата и хостингот веќе поставени. На Pro можете да поврзете свој домен, како book.sarasyoga.com; видете како да поврзете сопствен домен.

Пред да ја испратите врската, уште еднаш проверете ја објавената верзија. Резервирајте час од вашиот телефон. Продукцијата и прегледот треба да се однесуваат исто, но потврдете.

Чекор 10: Први корисници и следната верзија

Прво дајте ја врската на пет редовни студенти, а не на сите одеднаш. Замолете ги да го резервираат следниот час преку неа и да ви кажат што било збунувачко. Потоа поправете ги трите најважни работи што ги спомнуваат.

По неколку недели вистинска употреба, листата за v2 за апликација како оваа обично се пишува сама: листа на чекање за полни часови, е-пошта потсетник вечерта пред, и пакети часови платени онлајн. Секоја минува низ истиот третман: спецификација во неколку линии, промпт, тест, објавување. За додавање плаќања видете како да додадете плаќања во вашата апликација. За ширење на вести, како да ја лансирате апликацијата и да добиете први корисници.

Претворање во телефонска апликација

Многу студија сакаат икона на телефоните на своите студенти. На Mythex Pro, објавената апликација може да стане Android апликација (датотека што можете да ја качите во Google Play) и iPhone апликација испратена во TestFlight со ваш App Store Connect клуч, без Mac. Телефонската апликација ја отвора објавената веб апликација, па секогаш кога ќе објавите ажурирање, и телефонската апликација го добива.

Што да земете од ова

Самото градење беше краткиот дел. Она што ја направи апликацијата употреблива беше листата „не во v1“ во спецификацијата, тестирањето на јадрото пред сè друго, правилата за капацитет и пристап на серверот и пет вистински корисници пред педесет. Тоа е како изгледа vibe coding кога апликацијата мора да функционира за други луѓе.

Подготвени сте да пробате своја? Напишете ја спецификацијата на една страница, па залепете го првиот пасус во AI градителот на апликации. Ако сакате да видите повеќе типови апликации и промптите зад нив, прочитајте ги нашите примери за vibe coding.

Прашања