Як створити застосунок методом вайб-кодингу: від ідеї до опублікованого застосунку

Щоб створити застосунок методом вайб-кодингу, напишіть односторінковий опис першої версії, передайте його ШІ-конструктору застосунків як перший промпт, а потім нарощуйте застосунок невеликими перевіреними кроками: дані, вхід, основний робочий процес, доопрацювання, перевірка безпеки і, нарешті, публікація. Цей гайд веде один приклад проєкту, застосунок для запису на заняття невеликої студії йоги, через кожен етап і з промптами, які використовувалися на кожному кроці.

Якщо ви ніколи не створювали нічого таким способом, наш посібник з вайб-кодингу для початківців починає з простішого. Для ширшого огляду, який не прив'язаний до вайб-кодингу, дивіться як створити застосунок за допомогою ШІ.

Проєкт

Уявіть власницю студії йоги Сару, яка проводить вісім занять на тиждень. Записи приходять через WhatsApp; вона веде паперовий список для кожного заняття і часто перепродає місця. Їй потрібно:

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

Це вся перша версія. Без оплати, без абонементів, без магазину застосунків. Це з'явиться пізніше або ніколи.

Крок 1: напишіть односторінковий опис

Перш ніж відкривати будь-який інструмент, запишіть першу версію простими словами. Десять хвилин тут заощаджують години переписки. Корисна структура:

• Хто користується: студенти (записуються і скасовують), Сара (керує заняттями, бачить списки).
• Екрани: розклад, сторінка заняття, мої записи, адмін-сторінка занять, адмін-список учасників.
• Дані: заняття (назва, викладач, час початку, тривалість, місткість), записи (студент, заняття, статус), студенти (ім'я, email, телефон).
• Правила: не можна записатися на повне заняття; один запис на студента на заняття; скасування за дві години до початку; адмін-сторінки бачить лише Сара.
• Немає у v1: оплата, пакети занять, листи очікування, нагадування.

Список «немає у v1» найважливіший. Саме він дозволяє завершити збірку. Наш гайд щодо написання документа з вимогами до продукту за допомогою ШІ розглядає повніші специфікації, якщо вони вам потрібні.

Крок 2: оберіть інструмент, який охоплює весь цикл

Для застосунку з базою даних, входом і публічною URL-адресою використовуйте ШІ-конструктор, який запускає код, підключає базу даних і публікує застосунок, а не чат-асистента, який видає вам файли. Наш порівняльний огляд інструментів вайб-кодингу перелічує варіанти. Тут ми використаємо Mythex, бо він покриває кожен крок в одному місці: чат, живий попередній перегляд, справжню базу даних і файлове сховище та публікацію одним клацанням.

Крок 3: перший промпт

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

Створи застосунок для запису на заняття для моєї студії йоги. Студенти реєструються з іменем, email і телефоном, бачать розклад на цей тиждень і записуються на місце на занятті. Кожне заняття має назву, викладача, час початку, тривалість і місткість; повне заняття показує «Немає місць» і не можна на нього записатися. Студенти бачать свої записи і можуть скасувати їх за дві години до заняття. Я адмін: можу додавати і редагувати заняття та бачити список записаних на кожне з них. Спокійний, простий дизайн, зручний на телефонах.

Якщо ви не певні, що інструмент правильно зрозумів, попросіть спершу план. У Mythex режим Plan описує екрани і дані, перш ніж писати код, і ви затверджуєте план.

Крок 4: налагодьте основний цикл

Основний цикл це одна річ, заради якої існує застосунок: студент записується на заняття, а Сара це бачить. Тестуйте лише його:

1. Зареєструйтеся як студент і запишіться на заняття.
2. Відкрийте адмін-вигляд. Чи є там запис?
3. Запишіться на те саме заняття знову. Система має відмовити.
4. Встановіть місткість заняття 2, запишіть його з двох студентських акаунтів і спробуйте третій.

На цьому етапі зазвичай з'являються дві проблеми. Розклад показує час у часовому поясі сервера, а не студії. І перевірка «Немає місць» відбувається лише на сторінці, тож швидке подвійне клацання створює два записи.

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

Перевіряй місткість і дублікати записів на сервері під час створення запису, а не лише на сторінці. Якщо два запити приходять одночасно на останнє місце, має вдатися лише один.

Налагодьте основний цикл до того, як додавати що-небудь інше. Усе інше залежить від нього.

Крок 5: додайте решту правил, по одному в повідомленні

Тепер пройдіть правила зі специфікації по одному:

Студенти можуть скасувати запис за дві години до початку заняття. Після цього приховай кнопку скасування і відхиляй скасування на сервері з чітким повідомленням.

Лише мій акаунт може відкривати адмін-сторінки. Переконайся, що це перевіряється на сервері для кожної адмін-дії, а не лише прихованням меню.

Після кожного тестуйте і переходьте далі, лише коли воно працює. Якщо зміна щось зламала, поверніться до останньої робочої контрольної точки і сформулюйте запит чіткіше, замість того щоб накладати виправлення одне на одне.

Крок 6: відшліфуйте те, що помітять реальні користувачі

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

• Порожні стани: «Цього тижня ще немає занять» замість порожньої сторінки.
• Підтвердження: «Ви записані на Vinyasa, вівторок о 18:00» після запису.
• Розмітка для телефону: великі кнопки, розклад читається на екрані 375 пікселів.
• Вільні місця: «3 місця вільні» на кожній картці заняття, щоб студенти записувалися раніше.

На кожній картці заняття показуй вільні місця, наприклад «3 з 12 вільних». Після запису показуй підтвердження з назвою заняття, днем і часом і кнопкою переходу до моїх записів.

Крок 7: тестуйте як сторонній користувач

Перш ніж його побачить хтось інший, витратьте півгодини, намагаючись його зламати:

Ви також можете попросити ШІ перевірити крайні випадки:

Перелічи десять речей, які реальний студент міг би зробити, що може зламати запис або скасування, перевір кожну і виправ те, що не працює. Розкажи, що саме ти змінив.

Крок 8: перевірка безпеки

Цей застосунок зберігає імена, email і телефони, тож коротка перевірка безпеки варта зусиль. Основні питання:

• Чи може один студент побачити записи або контактні дані іншого?
• Чи є ключі або паролі в коді, який виконується в браузері?
• Чи захищена форма реєстрації від ботів?
• Чи є резервна копія даних?

Наша сторінка про чи безпечний вайб-кодинг пояснює кожну перевірку і дає промпти для них, а чекліст безпеки для застосунків, створених за допомогою ШІ, є довшою версією.

Крок 9: публікація

Коли основний цикл, правила та перевірки пройдені, публікуйте. У Mythex це одне клацання: застосунок отримує публічну URL-адресу з уже налаштованими базою даних і хостингом. На Pro можна підключити власний домен, наприклад book.sarasyoga.com; див. як підключити власний домен.

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

Крок 10: перші користувачі та наступна версія

Спершу дайте посилання п'ятьом постійним студентам, а не всім. Попросіть їх записатися на наступне заняття через нього і розповісти, що було незрозуміло. Потім виправте три головні речі, які вони назвуть.

Після кількох тижнів реального використання список v2 для такого застосунку зазвичай складається сам собою: список очікування для повних занять, нагадування електронною поштою ввечері напередодні та пакети занять з онлайн-оплатою. Кожна функція проходить той самий цикл: коротко описати специфікацію, сформулювати промпт, протестувати, опублікувати. Про додавання платежів дивіться як додати платежі до вашого застосунку. Про те, як розповісти про застосунок, дивіться як запустити застосунок і знайти перших користувачів.

Перетворення на застосунок для телефону

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

Що з цього взяти

Сама збірка була найкоротшою частиною. Що зробило застосунок придатним до використання: список «немає у v1» зі специфікації, тестування основного циклу раніше за все інше, правила місткості та доступу на сервері і п'ять реальних користувачів раніше за п'ятдесят. Так виглядає вайб-кодинг, коли застосунок має працювати для інших людей.

Готові спробувати власний? Напишіть односторінковий опис, а потім вставте перший абзац в ШІ-конструктор застосунків. Якщо хочете побачити більше типів застосунків і промпти до них, прочитайте наші приклади вайб-кодингу.

Запитання