AI для кодинга поруч із Bubble: які задачі віддавати, а які робити руками
Практичний гід для фаундерів без технічного бекграунду: як безпечно поєднувати Bubble зі сторонніми AI-інструментами, що віддавати на генерацію, а що налаштовувати тільки вручну в редакторі.
Коли треба швидко перевірити бізнес-ідею, запустити MVP, зібрати перші відгуки клієнтів або зацікавити ангельських інвесторів, усе вирішує швидкість. Фаундеру без глибокого технічного бекграунду зв'язка no-code інструментів і вайбкодінгу здається ідеальним рішенням. Виглядає так, ніби будь-яку проблему чи навичку, якої бракує, можна просто «згодувати» асистенту. Схожий розбір: Claude Code 2.1.287: що фаундеру.
Тут і починаються проблеми. Bubble — це не звичайна текстова кодова база. Це структурована екосистема з власним візуальним рушієм, серверною базою даних і суворими правилами безпеки. Якщо повністю довірити AI збирати застосунок, часто виходять дірки в безпеці, поламані робочі процеси й витік даних ще до першого публічного релізу. Щоб тримати темп і не зламати продукт, я ділю задачі на три кошики. Схожий розбір: Workflow engine alpha: «кінець вересня». Схожий розбір: Bubble MCP: контрольний список першого.
1. Що варто делегувати: генерація чернеток і допоміжні структури
Сторонній помічник добре справляється з ізольованими текстовими й логічними фрагментами. Переносить їх у проєкт уже людина.
- Скелети для плагінів (Plugin Editor): Якщо для MVP бракує стандартних можливостей Bubble, кастомний JavaScript пишуть у редакторі плагінів. Початкову структуру елементів (функції
initialize,update,run_action) або клієнтських чи серверних дій (run_client,run_server) можна віддати асистенту. Якщо ви ніколи не писали плагін з нуля, так стартувати значно швидше. - Приклади JSON-тіла та запитів для API: Я даю зовнішньому інструменту документацію платіжного сервісу чи CRM і прошу зібрати тестовий приклад JSON-корисного навантаження (payload) або команду
curl. Уже потім вручну вношу це в Bubble. - Текстовий аудит бізнес-сценаріїв: Опишіть логіку оформлення замовлення чи онбордингу звичайними словами й попросіть знайти логічні прогалини. Такий ai кодинг у форматі псевдокоду показує неочевидні глухі кути ще до того, як ви почнете збирати ланцюжки дій.
- Генерація граничних випадків (edge cases): AI добре складає списки неочевидних вхідних даних: нетипові формати номерів телефонів, порожні значення, спецсимволи. Ними зручно тестувати умови у воркфлоу.
2. Що робити виключно руками у візуальному редакторі Bubble
Усе, що впливає на внутрішній стан платформи та її цілісність, я створюю безпосередньо в інтерфейсі Bubble.
- Візуальні воркфлоу (Page та Backend Workflows): Ланцюжки дій, прив'язку до подій інтерфейсу, навігацію між сторінками й покрокові реакції проєктуйте в редакторі, дія за дією. Візуальний контекст платформи не імпортуєш згенерованим шматком тексту.
- Архітектура бази даних: Типи даних (Data Types), поля й зв'язки між сутностями потребують розуміння специфіки Bubble. Якщо генерувати реляційні таблиці за звичними SQL-шаблонами, пошукові запити на сторінках часто ускладнюються.
- Налаштування та ініціалізація API Connector: Кнопка «Initialize call» відправляє реальний живий запит до стороннього сервісу. Bubble автоматично парсить відповідь і створює внутрішню схему даних, яка зберігається в коді застосунку. Цей крок я контролюю тільки вручну: тестові значення не повинні перезаписати живі дані, а секретні токени не повинні осісти у вихідному коді.
- Динамічні вирази та верстка: Властивості візуальних елементів, фільтри пошуку (
Do a search for) і операції з поточними даними сторінки ефективно збираються лише в нативному композиторі виразів.
3. Зони критичного ризику: обов'язкова ручна верифікація
Тут автоматична помилка коштує найдорожче: від витоку персональних даних до блокування акаунта через перевантаження серверів.
- Правила приватності (Privacy Rules): Це серверні правила на вкладці Data, і Bubble називає їх головним захистом конфіденційної інформації. Жоден ai агент для кодинга не повинен змінювати ці налаштування без контролю. Для проєктів із чутливими даними офіційна документація рекомендує режим суворого пошуку (Strict search privacy mode). Одна помилка в умовах дозволів — і конфіденційні поля бачать усі відвідувачі застосунку.
- Бекенд-воркфлоу та прапорець «Ignore privacy rules»: Серверні робочі процеси у Workflow API, на відміну від звичайних воркфлоу сторінки, можуть повністю ігнорувати правила приватності. Відкривати такі ендпоінти без обов'язкової авторизації або з широким ігноруванням обмежень вкрай небезпечно.
- Сторонні бібліотеки (npm-пакети) у серверних діях: У згенерованому коді часто трапляються вигадані назви пакетів (hallucinated dependencies). Такі пакети можуть бути незахищеними або несумісними із середовищем виконання.
- Вставки JavaScript через елемент HTML або Toolbox: Скрипти в елементі HTML виконуються лише в режимі перегляду (run mode), а не в редакторі. Сторонні плагіни на кшталт Community Toolbox (
Run javascript,Javascript to Bubble) не входять до офіційного ядра Bubble. Вхідні дані користувачів, що проходять через них, треба ретельно санітизувати. - Жорсткі ліміти платформи: Серверні дії плагінів та API мають ліміт часу виконання (workflow timeout) і жорстке обмеження на розмір відповіді — 50 MB. Генеративні моделі про це зазвичай «забувають». Поруч із цим: Як вчитися ai для кодинга.
Чек-лист перевірки перед вставкою в проєкт
Перш ніж переносити будь-яку згенеровану чернетку в робочий застосунок, я проходжу цей список:
- Відповідність поверхні Bubble: Цей фрагмент призначений для плагіна, чи його помилково згенерували як скрипт для візуального воркфлоу?
- Сумісність із Plugin API v4: Якщо це код плагіна, чи використовує він сучасні асинхронні конструкції (
async/awaitта Promise), як вимагає актуальна версія Bubble API? - Безпека параметрів API: Чи були параметри під час ініціалізації виклику знеособленими й тестовими, щоб реальні ключі або чутливі дані не потрапили в схему застосунку?
- Принцип найменших привілеїв: Ви вручну перевірили, що правила приватності закривають конфіденційні поля для неавторизованих ролей?
- Аудит залежностей та лімітів: Кожен сторонній npm-пакет перевірено вручну на офіційному ресурсі? Обмеження на таймаути й розмір пакетів (50 MB) не порушуються?
- Ізольоване тестування: Функціонал протестовано в тестовій версії (Development/Test) до розгортання на Live-версію для перших реальних користувачів? Схожий розбір: Vibe coding проти інженерії: 5. Схожий розбір: IT Brew: vibe-coding у бізнесі.