Как да направите приложение с 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.

Въпроси