Как создать приложение методом вайб-кодинга: от идеи до опубликованного приложения

Чтобы создать приложение методом вайб-кодинга, напишите описание первой версии на одной странице, передайте его ИИ-конструктору приложений как первый промпт, а затем наращивайте приложение небольшими протестированными шагами: данные, вход, основной сценарий, доработка, проверка безопасности и, наконец, публикация. В этом руководстве один пример проекта, система записи на занятия для небольшой студии йоги, проходит все этапы, и на каждом шаге приведены использованные промпты.

Если вы никогда ничего не создавали таким способом, наш учебник по вайб-кодингу для начинающих начинается с более простых шагов. Более общий обзор, не привязанный к вайб-кодингу, см. в как создать приложение с ИИ.

Проект

Представьте владелицу студии йоги Сару, которая проводит восемь занятий в неделю. Записи приходят через WhatsApp; она ведёт бумажный список на каждое занятие и часто переполняет группы. Ей нужно:

• Чтобы ученики видели расписание на неделю и записывались на место.
• Чтобы у каждого занятия была вместимость.
• Список на каждое занятие, который она может проверить на входе.
• Чтобы ученики отменяли запись не позднее чем за два часа.

Вот и вся первая версия. Без платежей, абонементов и магазина приложений. Это появится позже или не появится вовсе.

Шаг 1: напишите описание на одной странице

Прежде чем открывать какой-либо инструмент, запишите первую версию простыми словами. Десять минут здесь экономят часы переписки. Полезная структура:

• Кто пользуется: ученики (записываются и отменяют запись), Сара (управляет занятиями и смотрит списки).
• Экраны: расписание, карточка занятия, мои записи, админ-занятия, админ-список участников.
• Данные: занятия (название, преподаватель, время начала, длительность, вместимость), записи (ученик, занятие, статус), ученики (имя, email, телефон).
• Правила: нельзя записаться на заполненное занятие; одна запись на ученика на занятие; отмена не позднее чем за два часа; админ-страницы видит только Сара.
• Нет в v1: платежи, пакеты занятий, листы ожидания, напоминания.

Самое важное — список «нет в v1». Именно он позволяет довести сборку до конца. Наше руководство по написанию требований к продукту с ИИ подробнее, если нужна полная спецификация.

Шаг 2: выберите инструмент, который закрывает весь цикл

Для приложения с базой данных, входом и публичным адресом используйте ИИ-конструктор, который запускает код, подключает базу данных и публикует приложение, а не чат-ассистент, который отдаёт вам файлы. В нашем сравнении инструментов вайб-кодинга перечислены варианты. Здесь мы используем Mythex, потому что он покрывает каждый шаг в одном месте: чат, живое превью, настоящую базу данных и файловое хранилище, публикацию в один клик.

Шаг 3: первый промпт

Превратите описание в один абзац. Не вставляйте сразу весь документ со всеми деталями; дайте основу, а остальное добавляйте по шагам.

Создай приложение для записи на занятия для моей студии йоги. Ученики регистрируются с именем, email и телефоном, видят расписание на эту неделю и записываются на место на занятие. У каждого занятия есть название, преподаватель, время начала, длительность и вместимость; заполненное занятие показывает «Мест нет» и не может быть забронировано. Ученики видят свои записи и могут отменить их не позднее чем за два часа до занятия. Я админ: я могу добавлять и редактировать занятия и видеть список записанных на каждое из них. Спокойный простой дизайн, который хорошо работает на телефонах.

Если вы не уверены, что инструмент понял задачу, попросите сначала план. В Mythex режим Plan описывает экраны и данные до написания кода, и вы их утверждаете.

Шаг 4: заставьте основной сценарий работать

Основной сценарий — то, ради чего существует приложение: ученик записывается на занятие, а Сара это видит. Проверяйте только его:

1. Зарегистрируйтесь как ученик и запишитесь на занятие.
2. Откройте админ-вид. Есть ли там запись?
3. Запишитесь на то же занятие ещё раз. Система должна отказать.
4. Установите вместимость занятия 2, запишите двух учеников с двух аккаунтов и попробуйте третьего.

На этом этапе обычно проявляются две проблемы. Расписание показывает время в часовом поясе сервера, а не студии. И проверка «Мест нет» происходит только на странице, поэтому быстрый двойной клик создаст две записи.

Показывай время всех занятий в часовом поясе студии, [Asia/Dubai], независимо от настроек устройства посетителя.

Проверяй вместимость и повторные записи на сервере в момент создания записи, а не только на странице. Если два запроса на последнее место придут одновременно, должен пройти только один.

Исправьте основной сценарий до добавления чего-либо ещё. Всё остальное зависит от него.

Шаг 5: добавьте оставшиеся правила, по одному в сообщении

Теперь пройдите правила из описания по одному:

Ученики могут отменить запись не позднее чем за два часа до начала занятия. После этого скрой кнопку отмены и отклоняй отмену на сервере с понятным сообщением.

Открывать админ-страницы может только мой аккаунт. Проверяй это на сервере для каждого админ-действия, а не только скрытием меню.

После каждого правила проверяйте его и переходите дальше, только когда оно работает. Если изменение что-то сломало, откатитесь к последней удачной контрольной точке и сформулируйте запрос яснее, вместо того чтобы накладывать исправления друг на друга.

Шаг 6: доведите то, что заметят реальные пользователи

Реальные пользователи замечают мелочи. Короткий список для приложения Сары:

• Пустые состояния: «На этой неделе занятий пока нет» вместо пустой страницы.
• Подтверждение: «Вы записаны на Vinyasa, вторник, 18:00» после записи.
• Раскладка для телефона: крупные кнопки, расписание читается на экране 375 px.
• Оставшиеся места: «Осталось 3 места» на каждой карточке занятия, чтобы ученики записывались быстрее.

На каждой карточке занятия показывай количество свободных мест, например «осталось 3 из 12». После записи покажи подтверждение с названием занятия, днём и временем и кнопкой перехода к моим записям.

Шаг 7: тестируйте как посторонний

Прежде чем кто-либо другой начнёт пользоваться приложением, потратьте полчаса на попытки его сломать:

Можно также попросить ИИ пройтись по граничным случаям:

Перечисли десять действий, которые может совершить реальный ученик и которые могут сломать запись или отмену, проверь каждое и исправь то, что не работает. Расскажи, что ты изменил.

Шаг 8: проверка безопасности

Это приложение хранит имена, email и телефоны, поэтому короткая проверка безопасности стоит времени. Основные вопросы:

• Может ли один ученик увидеть записи или контакты другого?
• Есть ли ключи или пароли в коде, который выполняется в браузере?
• Защищена ли форма регистрации от ботов?
• Есть ли резервная копия данных?

На нашей странице о том, безопасен ли вайб-кодинг, объясняется каждая проверка и даются промпты для них, а чек-лист безопасности для приложений, созданных с помощью ИИ — это полная версия.

Шаг 9: публикация

Когда основной сценарий, правила и проверки пройдены, публикуйте. В Mythex это одно нажатие: приложение получает публичный адрес, а база данных и хостинг уже настроены. На Pro можно подключить собственный домен, например book.sarasyoga.com; см. как подключить собственный домен.

Прежде чем отправлять ссылку, ещё раз проверьте опубликованную версию. Запишитесь на занятие с телефона. Рабочая и предварительная версии должны вести себя одинаково, но убедитесь в этом.

Шаг 10: первые пользователи и следующая версия

Сначала дайте ссылку пяти постоянным ученикам, а не всем сразу. Попросите их записаться на следующее занятие через неё и рассказать, что было непонятно. Затем исправьте три главных замечания.

После нескольких недель реального использования список v2 для такого приложения обычно складывается сам собой: лист ожидания для заполненных занятий, напоминания по email накануне вечером и пакеты занятий с оплатой онлайн. Каждый пункт проходит тот же путь: опишите в нескольких строках, дайте промпт, протестируйте, опубликуйте. Чтобы добавить платежи, см. как добавить платежи в приложение. Чтобы привлечь первых пользователей, см. как запустить приложение и найти первых пользователей.

Превращаем в приложение для телефона

Многим студиям хочется иконку на телефонах учеников. На Mythex Pro опубликованное приложение можно превратить в приложение для Android (файл, который можно загрузить в Google Play) и в приложение для iPhone, отправленное в TestFlight с вашим собственным ключом App Store Connect, без Mac. Приложение для телефона открывает опубликованное веб-приложение, поэтому каждое обновление, которое вы публикуете, сразу доступно и в нём.

Что из этого вынести

Сама сборка была самой короткой частью. Приложение стало пригодным для использования благодаря списку «нет в v1» из описания, тестированию основного сценария раньше всего остального, правилам на сервере для вместимости и доступа и пяти реальным пользователям до пятидесяти. Так выглядит вайб-кодинг, когда приложение должно работать для других людей.

Готовы попробовать своё? Напишите описание на одной странице, затем вставьте первый абзац в ИИ-конструктор приложений. Если хотите посмотреть другие типы приложений и промпты, которые за ними стоят, прочитайте наши примеры вайб-кодинга.

Вопросы