Bubble не просто позиціонує себе як ще один конструктор із перетягуванням. Він стверджує, що ви можете створювати, розгортати й масштабувати повноцінні веб- та мобільні додатки з однієї платформи.
Це смілива заява, і мені було цікаво, чи зможе він надати щось готове до продакшену, чи залишиться лише інструментом для швидкого прототипування.
У цьому огляді Bubble App Builder я проведу вас через свій повний практичний тест, показавши крок за кроком, що сталося від реєстрації до створення мого першого додатку. Ви отримаєте чітке уявлення, чи є Bubble правильним вибором для вашого наступного проекту.
Що таке Bubble App Builder?
Що вирізняє Bubble, так це його можливість виходити за рамки простих прототипів. Ви справді можете запускати та масштабувати реальні продукти, такі як маркетплейси, SaaS-інструменти та внутрішні платформи. Він навіть підтримує нативні мобільні додатки, тож ви можете публікувати їх на iOS і Android з однієї збірки.
Для кого це?
Bubble призначений для;
- Будь-хто, хто хоче перетворити ідею на працюючий додаток без необхідності наймати команду розробників.
- Засновники для швидкої перевірки гіпотез та масштабування стартапів без додаткових витрат на інженерів.
- Фрілансери та агенції для більш швидкої розробки професійних додатків, часто як white-label рішення для клієнтів.
- Корпорації, які використовують його для внутрішніх інструментів та критичних додатків завдяки вбудованій безпеці та масштабованості.
- Окремі творці (люди без досвіду кодування) можуть створювати додатки, такі як маркетплейси, SaaS-платформи або інструменти ШІ, використовуючи редактор перетягуванням та функції ШІ Bubble.
Переваги та недоліки Bubble App Builder
- Зручний редактор з підтримкою перетягування (drag and drop)
- Генерація додатків за допомогою ШІ
- Тисячі доступних плагінів
- Міцна підтримка спільноти
- Немає потреби в кодуванні на старті
- Потужний движок адаптивного дизайну
- Безкоштовний план має обмежені можливості
- Інтеграції API обмежені на безкоштовному рівні
- Крива навчання для розширених опцій
Ключові функції Bubble App Builder
- Графічний редактор з перетягуванням
- Генерація додатків на основі ШІ
- Движок адаптивного дизайну для всіх пристроїв
- Вбудована база даних і моделювання даних
- Автоматизація робочих процесів для логіки додатку
- Аутентифікація користувачів і керування акаунтами
- Конектор API для зовнішніх сервісів
- Маркетплейс плагінів з понад 6 000 опціями
- Контроль версій з підтримкою гілок
- Нативний конструктор мобільних додатків (бета)
- Логи сервера та відстеження навантаження
- Інтегрований налагоджувач для робочих процесів
- Розгортання з середовища розробки у продакшен
Мій практичний досвід з Bubble App Builder: покроковий посібник
Це та частина огляду, яка найбільше мене цікавить, і, мабуть, вас також. Маркетингові сторінки можуть обіцяти багато, але справжнє випробування — це коли ви сідаєте використовувати інструмент. Тому я приділив особливу увагу своєму практичному досвіду.
Від реєстрації до вивчення панелі керування, ці перші кроки дали мені найяскравіше уявлення про те, з чим насправді стикаються нові користувачі.
Початок роботи: реєстрація та перші враження
Я почав із головної сторінки Bubble, де мене зустріла яскрава заява: “BUILD APPS WITH AI, NO CODE REQUIRED.” Вона одразу задала тон, обіцяючи більше, ніж прототипи, і натякнула, що я справді можу запустити працюючий додаток.
Першим моїм кроком було натиснути “Get started” у верхньому правому куті. Сторінка реєстрації завантажилася швидко, і в мене було два чітких варіанти: продовжити через Google або створити акаунт за електронною поштою та паролем. Я обрав поштовий варіант.
Форма виглядала чисто. Поле для пароля містило строгі вимоги й відображало галочки в реальному часі під час введення. Це не було складно.
Після введення моїх даних Bubble запропонував кілька опитувань при онбордингу: “Where did you hear about Bubble?” (я обрав Search) та “How do you plan to use Bubble?” (я вибрав “Build” замість найму кого-небудь). Вони не були набридливими, але трохи уповільнювали процес.
На наступному кроці мене запитали, чи хочу я почати з Web чи Mobile додатку. Я обрав Web, оскільки мобільний варіант досі перебував у бета-версії. Далі Bubble запропонував вибір: перейти безпосередньо до генератора додатків на основі ШІ або одразу в редактор.
Усвідомлено я обрав “Skip and take me to the editor”, бо хотів побачити сирий інтерфейс, перш ніж дати ШІ сформувати щось для мене.
Єдиний момент тертя: перед тим як дозволити мені продовжити, Bubble анонсував 14-денну безкоштовну пробну версію преміум-функцій, що вимагала введення платіжних даних. Я вийшов назад і натомість обрав “Start with basic features”, щоб тестувати на безкоштовному плані.
Таким чином я уникнув негайного введення даних картки. Великий плюс для випадкових тестувальників, як я.
Коли я зайшов всередину, мене зустрів жартівливий екран завантаження з повідомленнями типу “Assembling backend workflows…” і “Initiating handshake with the multiverse…”. Це було дотепно й невимушено, але, на щастя, не зайняло багато часу.
Коли редактор завантажився, моє перше враження було, що Bubble більше схожий на професійне середовище розробки, ніж на легкий інструмент-іграшку. Ліворуч я побачив вкладки Design, Workflow, Data, Styles, Plugins і Settings. У вкладці Design були елементи з перетягуванням: текст, кнопки, групи та навіть більш просунуті опції, такі як спливаючі вікна і повторювані групи.
Перехід до вкладки Workflow показав, що я можу визначати логіку без написання коду, а вкладка Data дозволяла створювати структуровані бази даних із вбудованими правилами приватності.
Створення мого першого додатку з Bubble AI
Після реєстрації я хотів дізнатися, наскільки легко, інтуїтивно та просто насправді створити додаток у Bubble. Саме тут конструктор додатків на основі ШІ показує свою цінність: якщо я можу описати, що мені потрібно, і спостерігати, як система формує робочу основу, тоді він справді виправдовує обіцянку “no-code”.
На моїй панелі Bubble показав картку мого акаунту з уже перерахованим “2 Bubble project” під моїм ім’ям. Щоб почати з чистого аркуша, я натиснув “Create a project.” у верхньому правому куті цієї сторінки.
З’явилося модальне вікно з проханням назвати проєкт і вибрати початкову точку. Я ввів “Personal finance app” і залишився з опцією за замовчуванням — “Start with a web app → Start with AI.”
Перш ніж рухатися далі, Bubble показав ще один екран із пропозицією: “Build with premium features.” Пропонували 14-денну безкоштовну пробну версію з введенням платіжних даних. Оскільки я не хотів зараз передавати дані картки, я натиснув “Start with basic features” і пропустив пробну версію.
Це привело мене до екрана введення запиту для ШІ в темному режимі. Заголовок звучав: “What can we help you build?”, а текстове поле було заповнене таким самим прикладом додатку для ресторану, який я бачив на головній сторінці.
Я очистив його і ввів свій власний детальний запит, який був:
- Додаток з персональними фінансами, що дозволяє власникам малого бізнесу підключати рахунки, відстежувати транзакції, переглядати зведення та навіть отримувати рекомендації щодо заощаджень на основі ШІ.
Надсилання запиту запустило процес генерації ШІ. Bubble відображав серію жартівливих повідомлень про прогрес, таких як “Sketching out user features…” та “Adding polish…”.
Проте приблизно за п’ять хвилин я зіткнувся з першою проблемою. У нижньому куті з’явилося повідомлення про помилку: “There was an error generating your app. Please try again.” Трохи раніше я також помітив примітку унизу: “3rd party APIs are not currently supported.”
Мій початковий запит згадував Stripe і Plaid, тому я підозрюю, що комбінація цих звернень плюс те, що я був на безкоштовному/базовому рівні, спричинила збій генератора.
У той момент я переформулював свій запит, прибравши будь-які згадки про Stripe або Plaid, і зосередивши його на основних функціях додатка без зовнішніх API. Я надіслав його знову, і через ще 5–7 хвилин генерація завершилася успішно.
Коли процес завершився, Bubble повідомив, що мій додаток, “FinEase Pro”, готовий. Я одразу побачив у редакторі структурований багатосторінковий додаток: розділи Dashboard, Accounts, Transactions, Summaries і Subscription, всі з заповненими шаблонними даними та вже налаштованою навігацією.
BubbleBot, вбудований помічник, привітав мене та вказав, що було створено: “A multi-page app, a database with example content, and key workflows.”
Попередній перегляд додатка в новій вкладці дав мені чітке уявлення про результат. У розділі Dashboard відображалися огляди рахунків, останні транзакції, порівняння доходів і витрат, а також заглушка для діаграми витрат.
Натиснувши на Accounts, я міг «додати новий рахунок», тоді як Transactions показував фільтр за категоріями та кнопку для створення записів. Summaries пропонував випадаючі списки для аналізу фінансових даних за місяць чи рік і навіть обіцяв візуалізацію, як-от кругові діаграми витрат і лінійні графіки трендів. Сторінка Subscription демонструвала безкоштовні та платні рівні з опціями для оновлення та скасування.
Від початку до кінця згенерований додаток відповідав структурі, яку я описав. Він був не ідеальним — деякі розділи містили шаблонний текст або демонстраційні дані — але беззаперечно слугував робочою основою.
Як Bubble AI обробляє помилки
Далі я хотів дізнатися, як цей конструктор додатків на основі ШІ справді справляється з помилками всередині редактора. Оскільки це безкодова платформа, я не очікував відлагодження як у розробника з трасуванням стеків і консолями, але мені все одно потрібно було знати: що відбувається, коли щось ламається? Чи можу я це відловити? Чи можу я це залогувати?
А чи дає Bubble достатньо видимості, щоб виправляти проблеми без здогадок?
- Події помилок у робочих процесах
Bubble вбудовує обробку помилок безпосередньо в робочі процеси. Найважливішою є подія “An unhandled error occurs”. Цей універсальний тригер спрацьовує, коли в робочому процесі щось йде не так і ви не налаштували більш конкретний обробник.
Звідси ви можете вирішити, що має відбуватися:
- Показати користувачу дружнє повідомлення замість загадкового повідомлення системи
- Залогувати помилку у вашу базу даних для подальшого аналізу
- Або навіть перенаправити користувачів на власну сторінку з помилкою
Отже, в лівому меню я натиснув Workflows, потім кнопку синього кольору + New. У списку опцій я вибрав “An unhandled error occurs”.
Воно одразу з’явилося як подія робочого процесу в моєму редакторі. З цього місця я міг налаштувати, що саме воно має “ловити”: або будь-яку помилку робочого процесу, або помилки робочих процесів елементів, прив’язані до конкретної кнопки чи поля вводу.
Це дало мені вибір: обробляти все загалом або більш прицільно (наприклад, лише помилки від кнопки реєстрації).
Мені сподобалося, що я міг визначити, що відбувається, коли ця подія спрацьовує. Наприклад, показати користувачу дружнє спливаюче вікно замість стандартного повідомлення Bubble, залогувати помилку в базу або навіть перенаправити користувача на власну сторінку з помилкою. Для людини, яка не пише код, такий рівень контролю над обробкою помилок є вражаюче потужним.
- Обробка помилок API
Bubble також визнає, що сучасні додатки сильно залежать від зовнішніх сервісів. Через API Connector ви можете дозволити продовження робочих процесів навіть при збоях API-запитів.
Це означає, що ви не опинитесь у глухому куті. Ви можете відловити помилку, визначити код стану (наприклад, 404 або 500) і елегантно відреагувати власним повідомленням або запасною дією. Також можна налаштувати бекенд-робочі процеси для логування таких збоїв, створюючи трасу помилок для подальшого налагодження.
- Засоби налагодження та логування
Саме тут Bubble мене справді здивував. Платформа забезпечує вас спеціальним налагоджувачем, який працює поруч із вашим додатком.
За замовчуванням, коли ви натискаєте Preview, щоб відкрити додаток у режимі виконання, налагоджувач активується автоматично. Про це свідчить параметр у URL:
debug_mode=true
Приблизний приклад повного URL для попереднього перегляду:
https://my-bubble-application.bubbleapps.io/version-test?debug_mode=true
Якщо ви коли-небудь захочете вимкнути налагоджувач, ви можете просто видалити параметр із URL (або встановити його у false).
Після активації налагоджувач з’являється як панель унизу вашого додатка. Звідси ви можете перемикатися між режимами виконання Normal, Slow і Step-by-step. Режим Step-by-step — це його справжня сила. Ви можете буквально виконувати по одній дії за раз і перевіряти, що відбувається на кожному кроці.
Я використовував це для тестування, наприклад, робочих процесів підписок, і це дало мені реальну видимість того, які дані передаються, які умови перевіряються і де саме трапляються збої.
Обробка помилок у Bubble: загальний огляд і враження
Мій особистий досвід був змішаним, але в підсумку обнадійливим. Першого разу, коли я намагався згенерувати додаток, я чекав близько семи хвилин, щоб отримати злощасне повідомлення:
Це було дратівливо, особливо після такого довгого очікування. Ще гірше — єдиним натяком була примітка: “3rd party APIs are not currently supported.”
Оскільки мій початковий запит згадував Stripe і Plaid, я припустив, що саме через це він не спрацював.
Проте, коли я підкоригував запит, прибравши API, і надіслав його знову, Bubble відновився без помилок і згенерував додаток ще за 5–7 хвилин. Окрім цієї початкової затримки, мені здалися одними з найсильніших серед засобів no-code платформ вбудовані інструменти Bubble для діагностики помилок.
Поєднання подій помилок у робочих процесах, логів налагоджувача та опцій обробки API дає як початківцям, так і досвідченим користувачам впевненість у можливості вирішити проблеми, а не застрягти.
Налаштування дизайну та макета
А що якщо ви хочете змінити щось у своєму додатку або надати йому відчуття вашого бренду? Bubble дає вражаючий рівень контролю, навіть якщо ваш додаток створено за допомогою ШІ.
Завдяки глобальним стилям, візуальному редактору з перетягуванням і адаптивному движку Bubble не прив’язує вас до шаблону «як усі». Ви можете формувати свій додаток саме так, як забажаєте.
Ліворуч у редакторі розташована вкладка Design — ваш основний центр для налаштування зовнішнього вигляду та стилю додатку. Саме тут я провів більшу частину часу, експериментуючи з елементами, коригуючи макети та вдосконалюючи стилі.
Bubble використовує глобальні стилі та змінні для збереження єдності дизайну. Я міг визначити палітру кольорів і набір шрифтів, і будь-який елемент, пов’язаний з цими змінними, оновлювався автоматично, коли я вносив зміни.
Це означає, що якщо я зміню шрифт заголовка або головний колір бренду, оновлення пошириться на весь додаток. У спеціальних випадках я міг перекривати глобальні стилі для окремих елементів, не порушуючи загальної єдності.
Сам редактор є справжнім what-you-see-is-what-you-get. Я перетягував елементи на полотно, змінював їхній розмір і вирівнював. Клік по будь-чому — наприклад, заголовку Financial Dashboard — відкривав його Property Editor праворуч.
Звідти я міг змінити текст, стиль, межі, кольори або навіть SEO-тег. Наприклад:
- Дерево елементів зліва показувало всі елементи в ієрархії, що було особливо корисно при переміщенні або виправленні проблем із макетом.
- Повторно використовувані елементи, як-от шапки чи підвали, які з’являються на кількох сторінках, Bubble дозволяє створити їх один раз і використовувати скрізь, заощаджуючи багато часу.
- Сучасні додатки мають добре виглядати на будь-якому екрані, і Bubble вирішує це за допомогою вбудованого адаптивного движка. Кожен елемент розташовано в контейнері з правилами макета, подібними до CSS Flexbox.
- Крім того, я міг встановити контейнер так, щоб він поводився як рядок або стовпець, вирівнювати елементи по батьківському контейнеру та визначати, як вони мають поводитися при звуженні екрану. Breakpoints дозволяють вказати, коли макети мають переходити (наприклад, складання стовпців у єдиний вертикальний список на мобільних пристроях).
- Плагіни, такі як Classify, дозволяють призначати CSS-класи елементам або вставляти сирі теги <style> в HTML-блок. Для глобальних змін можна додати CSS у налаштуваннях додатку в розділі SEO & Metatags.
Особливо корисним для мене, як початківця, виявився BubbleBot — асистент, який з’явився після генерації мого додатка. Коли я натиснув Edit my app, він безпосередньо спитав: Which part of your app would you like to work on first?
Вибір Edit the design запустив короткий тур по вкладці дизайну та надав посилання на документацію Bubble. Такий контекстно-залежний супровід зменшив відчуття перевантаження та дав мені чітку точку входу для налаштування додатка.
Мене вразила гнучкість системи дизайну Bubble. Гранулярність контролю відчувалася так, ніби я працюю у повноцінному інструменті для фронтенд-дизайну, а не у спрощеній no-code платформі.
Адаптивний движок є необхідною складовою сучасних додатків, і хоча він потребує деякого навчання, він потужний, щойно ви освоїтеся.
Єдиним застереженням є крива навчання. Property Editor наповнений опціями, і виправлення візуальних проблем (наприклад, вирівнювання на певному breakpoint) може вимагати спроб та помилок.
Але з BubbleBot, який допомагав мені, я ніколи не відчував себе безпорадним.
Публікація додатку та додавання інтеграцій
Коли в мене була робоча версія додатка, я хотів побачити, наскільки далеко я можу зайти, зокрема додавши інтеграції та опублікувавши його в продакшені.
У Bubble інтеграції реалізуються через плагіни. Це доповнення, які розширюють можливості вашого додатка, подібно до встановлення додатків на телефон.
У Bubble є власний маркетплейс плагінів з тисячами безкоштовних і платних опцій, який охоплює все: від платежів Stripe і API Google до невеликих утиліт, як-от завантажувачі файлів чи генератори випадкових користувачів.
У вкладці Plugins редактора я міг натиснути + Add plugins, що відкрило бібліотеку плагінів. Маркетплейс організований за категоріями, такими як Analytics, AI, E-commerce, Payments, Media, Customer Support, Testing тощо (як показано на скріншоті). Також можна фільтрувати за типом (API, Action, Element, Event тощо) і сортувати за найчастішими встановленнями або найвищим рейтингом.
Серед найпопулярніших плагінів, які я помітив:
- Toolbox – безкоштовний плагін для виконання власних скриптів (понад 800 тис. встановлень).
- Stripe – для платежів та підписок.
- Rich Text Editor – для редагування контенту безпосередньо в додатку.
- Classify – для контролю користувацького CSS в елементах.
Що мені сподобалося тут, так це те, що Bubble — не замкнена система. Ви не обмежені тим, що платформа надає «з коробки». Якщо ви не знайдете потрібний плагін, ви навіть можете створити й опублікувати власний плагін у маркетплейсі.
Це робить Bubble набагато більш розширюваним, ніж багато інших no-code конструкторів, які я тестував.
Після додавання плагінів і внесення змін наступним великим кроком є публікація додатка. У Bubble цей процес називається deploying, і він надзвичайно простий.
Додатки Bubble працюють у двох середовищах:
- Development – де ви тестуєте та розробляєте.
- Live – продакшен-версія, доступна реальним користувачам.
Deploying — це по суті перенесення вашого додатка з Development у Live. Для цього я натиснув Deploy button у верхньому правому куті редактора. Bubble перевірив Issue Tracker. Якщо були помічені будь-які помилки, їх потрібно було виправити перед продовженням публікації.
При розгортанні мене попросили додати опис змін, які я вніс. Це може здатися дрібним кроком, але насправді це дуже корисно. Bubble зберігає історію розгортань, тож якщо нова версія принесе баги, ви можете легко повернутися до стабільної версії.
Ще один момент: якщо користувачі вже активні в додатку під час вашого оновлення, Bubble автоматично показує їм банер оновлення у верхній частині сторінки. Після натискання «Refresh» вони миттєво переходять на нову версію.
Користувачі, які не були онлайн у цей момент, при наступному відвідуванні просто завантажать оновлену версію.
Це означає, що оновлення відбуваються плавно і без простоїв, хоча час все ж має значення. Якщо ваш додаток активно використовується, варто розгортати оновлення в непікові години, щоб не переривати поточні сесії.
Ціни та плани Bubble
Система ціноутворення Bubble влаштована так, що ви можете почати безкоштовно і платити лише тоді, коли будете готові до публікації. Я почав на безкоштовному плані і був здивований тим, скільки він пропонує для навчального рівня.
Справжній стрибок відбувається з планом Starter. Цей рівень розблоковує все, що потрібно для виходу в продакшен, включаючи підключення користувацького домену, розгортання живого додатка тощо. Якщо ваш додаток почне набирати обертів, план Growth додає ще більш просунуті функції.
Для більших проєктів і команд план Team включає: п’ять редакторів додатка, субдодатки для мультибрендових або white-label проєктів, двадцять п’ять власних гілок і двадцять днів логів сервера.
На вершині знаходиться Enterprise з індивідуальним ціноутворенням. Він орієнтований на бізнеси, яким потрібен максимальний контроль: виділені сервери, централізоване адміністрування, індивідуальні одиниці навантаження, SLA щодо доступності і пріоритетна підтримка.
Тарифи Bubble Website Builder
| План | Диск | Трафік | Ціна | |
|---|---|---|---|---|
| Starter | Необмежено | Необмежено | 1 290 ₴ | Детальніше |
| Growth | Необмежено | Необмежено | 5 280 ₴ | Детальніше |
| Team | Необмежено | Необмежено | 15 480 ₴ | Детальніше |
Платежі обробляються через Stripe, і Bubble дотримується політики без повернень: будь-який оплачений місяць не повертається і не може бути зарахований на ваш рахунок.
Модель на основі навантаження Bubble також є прозорою. Ви отримаєте листа при досягненні 75% і 100% використання навантаження з можливістю придбати додаткові пакети або встановити ліміт.
Альтернативи Bubble AI App Builder
Bubble пропонує широкий контроль і гнучкість, але має крутішу криву навчання. Хорошою альтернативою для тих, хто ставить на перше місце простоту та передбачуване ціноутворення, особливо для внутрішніх інструментів або порталу клієнтів, є Softr.
Softr працює на вищому рівні абстракції, використовуючи готові налаштовувані блоки для створення додатків із існуючих джерел даних, таких як Airtable або Google Sheets.
Bubble AI vs Softr: коротке порівняння
| Функція | Bubble | Softr |
|---|---|---|
| Зручність використання | Помірна до крутої крива навчання. Візуальне програмування потребує часу. | Дуже легко орієнтуватися. Конструктор на основі блоків скорочує криву навчання. |
| Налаштування | Висока. Піксельна точність UI, складні робочі процеси, тисячі плагінів. | Обмежена. Готові блоки й шаблони менш гнучкі. |
| Бекенд і дані | Вбудована база даних і API Connector для власних інтеграцій. | Інтеграція з Airtable і Google Sheets як основними джерелами даних. |
| Ціноутворення | Модель на основі використання “workload unit”, менш передбачувана при масштабуванні. | Ціноутворення на користувача, прозоре та передбачуване. |
| Тип додатка | Підходить для SaaS, маркетплейсів, багатокористувацьких додатків. | Найкраще для внутрішніх інструментів, порталу клієнта і сайтів із членством. |
| Мобільні пристрої | Нативний конструктор мобільних додатків і підтримка PWA. | Лише веб-додатки та PWA, без нативних додатків. |
Bubble краще підходить, якщо:
- Ви — засновник або розробник, що створює повноцінний SaaS-продукт, маркетплейс або щось, що потребує глибокого налаштування.
- Вам потрібні просунуті робочі процеси, піксельна точність дизайну та вбудований бекенд, здатні витримати навантаження.
Softr ідеально підходить для:
- Малих команд або окремих користувачів, які хочуть щось швидке, лаконічне та просте в обслуговуванні.
- Якщо ваш додаток переважно призначений для відображення чи управління даними з Airtable або Google Sheets, наприклад внутрішній інструмент, портал клієнта або сайт із членством.
Підсумковий вердикт щодо Bubble No-Code App Builder
Bubble — одна з найпотужніших безкодових платформ, які я використовував. Вона пропонує гнучкість і контроль, а також вбудовану базу даних, движок робочих процесів і адаптивний редактор.
Хоча інструмент не найпростіший для освоєння, а модель ціноуторення на основі використання може зробити витрати менш передбачуваними з ростом, це платформа, на яку варто ставити, щоб перетворити ідею на готовий до продакшену додаток.
