Как использовать Bubble: пошаговое руководство в 2025 году

Хотите создать приложение, но думаете, что для этого нужно знать огромное количество кода?

Это большая проблема.

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

Они хотят использовать функции ИИ и учиться делать то, что нужно, просматривая видеоуроки, но всё это кажется слишком далёким будущим.

А вот и решение: пузырь. 

Мы покажем вам, как использовать пузырьки.

Пузырь

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

Попробуйте Bubble бесплатно Прочитать полный обзор

Настройка вашей учетной записи Bubble

Как попасть на сайт Bubble

Первый шаг к созданию вашего приложения — это посещение веб-сайта Bubble.

Откройте свой любимый веб-браузер — это программа, которую вы используете для просмотра веб-сайтов.

Наиболее распространённые браузеры — Chrome, Firefox, Safari или Edge. В адресной строке вверху введите «bubble.io» и нажмите Enter.

Это перенаправит вас прямо на главную страницу Bubble.

Поищите кнопку с надписью типа «Зарегистрироваться», «Начать» или «Создать учетную запись».

Это ваш билет, чтобы начать строительство.

Регистрация бесплатного аккаунта

Нажатие этой кнопки запускает процесс регистрации.

Как и при создании учетной записи для электронной почты или игры, вам потребуется предоставить некоторую информацию.

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

Выберите надежный пароль — лучше всего, это будет комбинация букв, цифр и символов — и запишите его в надежном месте, чтобы не забыть.

Bubble может задать вам еще несколько вопросов, например, для чего вы планируете использовать Bubble.

Не волнуйтесь; просто выберите вариант, который кажется наиболее подходящим для того, что вы хотите сделать.

Понимание интерфейса пузырьков

После входа в систему вы увидите интерфейс Bubble.

Это главный экран, на котором вы будете создавать своё приложение. На первый взгляд он может показаться немного перегруженным, но он организован по разделам.

Наиболее важные части:

• Вкладка «Дизайн»: Здесь вы визуально создаете страницы своего приложения. Вы будете перетаскивать элементы, такие как кнопки, текст на этой области размещаются коробки и изображения.
• Вкладка «Рабочий процесс»: Здесь вы указываете своему приложению, что делать. Вы создаете «рабочие процессы», которые представляют собой инструкции для вашего приложения, которым оно должно следовать, когда кто-то нажимает кнопку или что-то вводит.
• Вкладка «Данные»: Здесь вы управляете базой данных вашего приложения. База данных — это как цифровой картотечный шкаф, где вы храните информацию.
• Древо элементов: Здесь отображаются все элементы, которые вы добавили на свою страницу, в виде списка.
• Редактор раздела «Недвижимость»: При щелчке по элементу в этой области отображаются все способы изменения его внешнего вида и поведения.

Создание первой страницы вашего приложения

Знакомство с визуальным редактором

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

Это как чистый холст. В левой части экрана вы увидите набор инструментов, называемых «элементами».

Это элементы, которые вы можете перетаскивать на свою страницу. Представьте их как цифровые строительные блоки.

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

Добавление текста и кнопок

Давайте начнём с чего-нибудь простого.

Чтобы добавить текст, щелкните по элементу «Текст» и перетащите его в середину страницы.

Теперь вы можете ввести в него все, что захотите. 

Возможно, что-то вроде «Добро пожаловать в мое приложение!» или «Нажмите кнопку ниже».

Далее добавим кнопку.

Щелкните по элементу «Кнопка» и перетащите его под текст. Вы можете изменить текст на кнопке, введя его в текстовое поле внутри кнопки.

Попробуйте что-нибудь вроде «Старт» или «Нажмите здесь».

Разработка макета страницы

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

Не волнуйтесь, мы это исправим. Вы можете перетаскивать элементы мышью, чтобы перемещать их.

Видите эти синие линии, которые появляются при перетаскивании?

Они помогут вам всё выровнять. 

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

Вы также можете изменить размер элементов, щелкнув по маленьким квадратикам в углах и перетащив их. Увеличьте или уменьшите размер текста, или растяните кнопку.

Добавление базовой функциональности

Понимание рабочих процессов

Итак, мы сделали наше приложение привлекательным.

Но как нам это сделать? делать что-нибудь?

Вот тут-то и пригодятся рабочие процессы. Рабочий процесс — это как набор инструкций.

Это указывает вашему приложению, что делать, когда кто-то нажимает кнопку или совершает другое действие.

Как заставить кнопку делать что-либо

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

Нажмите на созданную вами кнопку. Затем найдите вкладку с названием «Рабочий процесс».

Нажмите на это. Теперь вы увидите кнопку с надписью «Нажмите здесь, чтобы добавить событие».

«Ан» событие Это запускает рабочий процесс. Нажмите на эту кнопку.

Выберите «Действия с элементами», затем «Щелкните».

Теперь нам нужно указать приложению, что делать при нажатии кнопки.

Давайте сделаем так, чтобы отображалось сообщение. Нажмите «Добавить действие».

Вы увидите список функций вашего приложения. Найдите и нажмите на «Alert». В текстовом поле введите сообщение, которое хотите отобразить. Например, «Вы нажали кнопку!»

Теперь, когда кто-то нажмет кнопку, появится небольшое окошко с вашим сообщением. Это ваш первый рабочий процесс!

Добавление полей ввода

Поля ввода — это места, куда пользователи могут вводить информацию.

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

Чтобы добавить поле ввода, щелкните по элементу «Ввод» и перетащите его на страницу.

Как и в случае с текстом и кнопками, вы можете перемещать его и изменять его размер.

Вы также можете изменить тип информации, которую ожидает ввести поле ввода.

Посмотрите на редактор свойств. Вы можете выбрать, для чего он предназначен: для текста, цифр, адресов электронной почты или паролей.

Соединение страниц и навигация

Создание нескольких страниц

В большинстве приложений есть более одной страницы.

У вас может быть главная страница, страница профиля или страница настроек.

Чтобы создать новую страницу, найдите кнопку или ссылку с надписью «Новая страница» или аналогичной.

Нажмите на него, и откроется новая, пустая страница.

Дайте ему имя, например, «Профиль» или «Настройки».

Связывание страниц с помощью кнопок

Теперь давайте сделаем так, чтобы люди могли перемещаться между страницами.

Это можно сделать с помощью кнопок. Вернитесь на первую страницу.

Перетащите кнопку на страницу. В рабочем процессе кнопки добавьте новое действие.

На этот раз выберите «Навигация», затем «Перейти на страницу».

Затем выберите страницу, на которую вы хотите перенаправить пользователей с помощью этой кнопки. 

Теперь, когда кто-то нажмет на эту кнопку, он перейдет на другую страницу.

Создание навигационного меню

Если у вас много страниц, наличие навигационного меню может оказаться полезным.

Это просто ряд кнопок вверху или внизу вашего приложения, позволяющий пользователям легко перемещаться между страницами.

Чтобы создать навигационное меню, добавьте элемент «Group» в верхнюю часть страницы.

Затем добавьте несколько кнопок внутрь группы.

Сделайте так, чтобы каждая кнопка вела на отдельную страницу, как мы делали раньше. Теперь у вас есть простой способ перемещаться по приложению.

Передача данных между страницами

Иногда возникает необходимость перенести информацию с одной страницы на другую.

Например, если у вас есть страница профиля, вы можете захотеть перенести имя пользователя с главной страницы на страницу профиля.

Для этого необходимо использовать так называемые «параметры страницы».

При создании кнопки, ведущей на другую страницу, вы можете добавить параметр в URL-адрес. 

Это как добавление небольшого тега, который указывает странице, какую информацию отображать.

На странице, на которую вы отправляете данные, вы можете использовать этот параметр для отображения информации.

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

Теперь на странице профиля будет отображаться правильное имя.

Тестирование и предварительный просмотр вашего приложения

Как предварительно просмотреть свою работу

Хорошо, вы создали несколько страниц и добавили несколько действий. 

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

Bubble упрощает этот процесс. Найдите кнопку с надписью «Предварительный просмотр» или что-то подобное.

Обычно это выглядит как кнопка воспроизведения.

Нажмите на него, и Bubble откроет новую вкладку в вашем браузере, отображающую ваше приложение.

Это как увидеть свое приложение вживую. Вы можете нажимать кнопки, вводить текст в поля и проверять, все ли работает так, как вы планировали.

Тестирование различных сценариев

При предварительном просмотре приложения не стоит просто наугад кликать по ссылкам.

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

Нажмите на каждую кнопку. Введите текст во все поля. Посмотрите, что произойдет, если вы сделаете разные действия.

Например, если у вас есть страница входа, попробуйте ввести неверный пароль.

Проверьте, не выдает ли ваше приложение сообщение об ошибке.

Если у вас есть кнопка для сохранения данных, проверьте свою базу данных, чтобы убедиться, что данные сохраняются корректно.

Отладка распространенных проблем

Иногда что-то идёт не так. И это нормально.

Это случается со всеми. Когда вы обнаруживаете проблему, она называется «багом». Чтобы исправить ошибку, нужно её «отладить».

В Bubble есть несколько инструментов, которые могут помочь вам найти ошибки.

Найдите инструмент под названием «Отладчик».

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

К числу распространенных проблем относятся:

• Кнопки ничего не делают.
• Данные сохраняются некорректно.
• Страницы не загружаются.
• Сообщения об ошибках.

Альтернативы Bubble

Ищу что-то другое Альтернативы мыльным пузырям В сфере разработки приложений без кода и с минимальным использованием кода?

Вот несколько популярных вариантов:

• Софтр: Эта платформа отлично подходит для быстрого преобразования ваших электронных таблиц и баз данных (таких как Airtable и Google Sheets) в веб-приложения и клиентские порталы. Она известна своей простотой использования и готовыми шаблонами.
• Баззи: Мощная платформа без кода, позволяющая создавать сложные веб-приложения с высокой степенью кастомизации. Она обладает развитой экосистемой плагинов, но может потребовать некоторого времени на освоение.
• Скольжение: This tool focuses on simplicity, allowing you to create mobile apps directly from Google Sheets. It’s great for быстро creating internal tools and simple applications.
• Softgen: Эта платформа на базе искусственного интеллекта призвана упростить разработку приложений, интерпретируя описания пользователей и генерируя приложения. Она разработана для быстрого прототипирования и итеративной доработки.
• Адало: Платформа без кода, ориентированная на создание нативных мобильных приложений с простым в использовании интерфейсом перетаскивания и маркетплейсом готовых компонентов.

Заключение

У вас получилось! Теперь вы понимаете, как использовать основные функции Bubble.

Это руководство дало вам краткий курс, но вы еще многое можете сделать.

Вам не понадобится ни одной строчки кода.

Если вы хотите сразу же приступить к своему следующему проекту, помните эти советы: постоянно практикуйтесь.

Не бойтесь искать. YouTube или посмотрите обучающие материалы Bubble.io для получения более подробных инструкций.

Вы можете найти множество ресурсов и лучших практик для начинающих.

Торговая площадка Bubble — отличное место для поиска помощи.

Часто задаваемые вопросы