Создание сайтов в Авдеевке, ДНР. Начните с Bubble, инструмента без кода для создания серьезных приложений

 
 

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

В этой статье я познакомлю вас с Bubble. Вы узнаете, что это такое, какие функции он предлагает и какие веб-приложения можно создавать с его помощью. Затем мы сравним его подход к программированию без кода с традиционной разработкой веб-приложений и рассмотрим плюсы и минусы использования Bubble. Наконец, мы создадим приложение с помощью Bubble, чтобы вы могли понять, как с его помощью создавать вещи.

Что такое пузырь?

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

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

Особенности пузыря

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

Конструктор пользовательского интерфейса. С помощью конструктора пользовательского интерфейса Bubble вы можете перетаскивать визуальные элементы, такие как текст, изображения, значки, карты, видео и другие распространенные элементы пользовательского интерфейса, на его холст. Веб-приложения, созданные с помощью Bubble, имеют адаптивный дизайн и могут быть легко локализованы для любого языка.

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

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

Сотрудничество в реальном времени. Bubble дружит с командой. Это позволяет до 40 соавторов.

В этой статье мы рассмотрим только конструктор пользовательского интерфейса.

Что можно построить с Bubble

Благодаря его гибкости вы можете создавать веб-приложения любого типа с помощью Bubble.

CRUD-приложения. Это приложения, которые позволяют пользователям создавать, читать, обновлять и удалять данные. Большинство современных приложений на самом деле представляют собой просто приложения CRUD с добавленными к ним различными функциями. Таким образом, имея возможность создавать приложения CRUD, вы уже можете создавать все виды функций. Вспомните Amazon или YouTube. По своей сути это просто CRUD-приложения.

Приложения реального времени. Это приложения, которые позволяют пользователям общаться или сотрудничать в режиме реального времени через чат, аудио, видеовызов или общий интерфейс. Примеры таких приложений включают Messenger, Discord и Slack.

Приложение, подключенное к API. Идея о том, что «ни один человек не является островом», применима и к приложениям. С помощью Bubble вы можете создавать приложения, использующие сторонние API по всему Интернету. Подумайте о Stripe для обработки платежей или Algolia для обработки поиска. Возможности безграничны с доступом через API. С помощью API вы можете предоставлять любые функции, которых еще нет в Bubble. Это также происходит и наоборот: приложения, которые вы создаете с помощью Bubble, также могут предоставлять API, который могут использовать другие.

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

Прогрессивные веб-приложения. Это веб-приложения, которые можно добавить на главный экран для быстрого доступа. У них не будет доступа к нативным функциям, доступным для нативных приложений Android или iOS, но к ним можно будет получить доступ с главного экрана, и они смогут работать в автономном режиме. Так что это самое близкое к нативному приложению, которое вы можете получить.

Если вы хотите увидеть живые примеры приложений, которые вы можете создавать с помощью Bubble, посетите демонстрационную страницу Bubble. Вы также можете проверить, как создать страницу, чтобы увидеть руководство по созданию приложений, таких как Instagram, Dropbox или TripAdvisor. Обратите внимание, что это не очень подробные руководства; они просто общие, чтобы дать вам представление об общих шагах для создания таких приложений. Вам все равно потребуется некоторый уровень владения Bubble, чтобы иметь возможность создавать эти приложения.

Что нельзя построить с помощью Bubble

Нативные приложения. На момент написания этой статьи Bubble не поддерживает создание собственных приложений для Android или iOS. Bubble говорит в своей документации, что есть план добавить эту функцию к основным функциям, но это еще не запланировано Bubble. Так что мы действительно не знаем, когда он станет доступным. На данный момент единственный возможный вариант — либо создать прогрессивное веб-приложение, либо обернуть веб-приложение в веб-представление с помощью таких инструментов, как React Native, Flutter или Cordova.

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

Программирование без кода в Bubble против традиционной разработки веб-приложений

В этом разделе мы рассмотрим сравнение Bubble с традиционным способом разработки веб-приложений на основе следующих показателей:

контроль над кодом и данными

скорость разработки

стоимость разработки

эксплуатационные расходы

Контроль над кодом и данными

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

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

Скорость разработки

Bubble поставляется со всеми инструментами, необходимыми для создания веб-приложения с помощью интерфейса перетаскивания. Это делает процесс разработки быстрее, чем традиционная веб-разработка. Тем не менее, это также связано с кривой обучения, которая зависит от того, что вы хотите построить. Если это простое одностраничное приложение, которое делает только одну или две вещи, вероятно, потребуется несколько часов, чтобы изучить его. Но если это довольно сложное приложение, рассчитывайте потратить от одного до трех месяцев, прежде чем вы сможете стать достаточно продуктивным, чтобы быстро создать приложение.

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

В целом, скорость разработки будет в основном зависеть от вашего уровня опыта. Если вы полный новичок, Bubble будет быстрее. Если у вас уже есть некоторый опыт разработки, обычно быстрее создать приложение традиционным путем. Да, ваш опыт разработки, вероятно, поможет во многих концепциях создания приложений с помощью Bubble. Но кривая обучения для создания довольно сложных приложений все равно будет большой.

Стоимость разработки

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

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

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

Эксплуатационные расходы

Bubble начинается с бесплатного плана. Это позволяет вам изучить платформу и создать приложение с ее помощью. Личный план Баббла будет использоваться в основном для подготовки и тестирования. Когда вы будете готовы запустить свое приложение, вам придется переключиться на профессиональный или производственный план. Вы можете проверить страницу ценообразования Bubble для получения дополнительной информации о том, что вы получаете с каждым планом.

Bubble имеет концепцию, называемую «единицами», которая в основном представляет собой зарезервированную мощность сервера для масштабирования. Дополнительные единицы потребуются, когда ваше приложение приобретет определенное количество активных пользователей. Помимо этого, еще одним ограничивающим фактором является файловое хранилище. Каждому плану назначен общий объем хранилища файлов. Таким образом, вы, скорее всего, достигнете потолка раньше, если ваше приложение хранит много медиафайлов, загруженных пользователями. Существуют плагины для хранения файлов, но они будут стоить больше в месяц.

С другой стороны, запуск вашего приложения традиционным способом будет стоить серверу всего 5 долларов в месяц. Единственным недостатком является то, что вам придется настраивать все с нуля — такие вещи, как веб-сервер, база данных и сервер очередей. Реально говоря, вы не будете просто платить 5 долларов в месяц, поскольку вам также нужно будет предоставить хранилище файлов, отчеты об ошибках и услуги по развертыванию. Это может легко увеличить ваши общие эксплуатационные расходы.

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

Создание приложения с помощью Bubble

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

Если у вас есть учетная запись, создайте новое приложение.

Создать новое приложение

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

Новый помощник по приложениям

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

Функция аутентификации. Это позволит пользователю авторизоваться в системе.

Продукт CRUD. CRUD — это аббревиатура, описывающая приложение, способное обрабатывать наиболее важные функции базы данных для обеспечения интерактивности, и расшифровывается как «создавать, читать, обновлять и удалять», что позволяет пользователю хранить данные о продукте в базе данных.

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

Основы пользовательского интерфейса

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

Пустой экран приложения

Вкладка «Дизайн «— это то, с чего вы обычно начинаете. Поскольку Bubble — визуальный язык программирования, он всегда начинается с пользовательского интерфейса. Вкладка «Дизайн «содержит список визуальных элементов, которые можно перетаскивать или щелкать и рисовать (щелкните элемент, чтобы выбрать его, отпустите, затем нарисуйте элемент) на холст.

Вкладка «Дизайн»

Далее идет вкладка «Рабочий процесс «. Здесь вы найдете все рабочие процессы для конкретной страницы. В Bubble вы используете рабочие процессы, чтобы указать, что делает приложение, когда происходит определенное событие. Например, при нажатии кнопки «Войти «мы хотим, чтобы пользователь вошел в приложение, очистил форму, а затем перенаправил пользователя на страницу администрирования, если учетные данные верны.

Вкладка «Рабочий процесс»

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

Раскрывающееся меню страницы рабочего процесса

На вкладке «Данные «вы увидите базу данных приложения, таблицы в ней и данные в каждой таблице. Он также поставляется с менеджером данных, который позволяет выполнять операции CRUD для каждой строки.

Вкладка «Данные»

Если вы хотите изменить столбцы для каждой таблицы, вы можете сделать это на вкладке Типы данных.

Вкладка «Типы данных»

Наконец, у нас есть вкладка «Стили «. Здесь вы можете настроить общую тему приложения.

Вкладка «Стили»

Мы не рассмотрели еще три вкладки: плагины, настройки и журналы. Мы не будем их рассматривать, так как мы не будем использовать их в приложении, которое мы создаем здесь.

Аутентификация

Теперь, когда мы рассмотрели пользовательский интерфейс Bubble, давайте приступим к реализации функции аутентификации.

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

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

Страница входа

Сначала в разделе «Контейнеры «на вкладке «Дизайн «нажмите «Группа», затем нарисуйте квадрат на холсте. Это будет контейнер входа в систему.

Затем щелкните элемент Text, отпустите, затем нарисуйте его внутри только что созданного контейнера. Когда вы это сделаете, вы увидите красную рамку вокруг контейнера.

Нажмите, отпустите и рисуйте

После того, как элемент будет нарисован, появится плавающая рамка. Это позволяет соответствующим образом настроить элемент. В этом случае все, что нам нужно сделать, это изменить метку.

Ярлык электронной почты

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

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

Выберите элемент

После того, как метки нарисованы, вы можете приступить к рисованию соответствующих элементов ввода. Просто прокрутите вниз до раздела «Формы ввода «и нажмите «Ввод «. Затем нарисуйте элемент, как обычно. Также измените заполнитель, поскольку именно его мы будем использовать для идентификации элемента позже. После этого формат содержимого также должен быть изменен на соответствующий тип данных, который мы ожидаем. После этого Bubble выполнит для вас проверку типа данных.

Входная конфигурация

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

Кнопка входа

Мы закончили рисовать все элементы страницы входа. Следующим шагом является добавление функции входа в систему. Нажмите кнопку «Пуск/редактирование рабочего процесса «в поле настройки кнопки входа в систему. Это перенаправит вас на вкладку Рабочий процесс при нажатии кнопки входа. Щелкните поле под действием, наведите указатель мыши на «Учетная запись «и нажмите «Войти пользователя в систему «.

Выберите рабочий процесс кнопки входа

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

Выберите соответствующий элемент

Сделайте то же самое для пароля. После этого ваш экран должен выглядеть так.

Последний экран для настройки рабочего процесса входа в систему

Далее мы хотим убрать за собой, очистив форму. Щелкните поле с надписью Щелкните здесь, чтобы добавить действие, наведите указатель мыши на элемент Действия, затем щелкните Сбросить данные.

Добавить действие сброса данных

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

Сбросить контейнер входа

Затем добавьте еще одно действие для перенаправления на страницу администратора.

Перейти на страницу

В раскрывающемся списке назначения выберите Создать новую страницу... Затем установите имя страницы на admin. Затем Bubble создаст эту страницу для вас. После создания он будет отображаться в раскрывающемся списке назначения, поэтому теперь вы можете его выбрать.

Перейти на страницу администратора

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

Страница регистрации

Чтобы создать новую страницу, щелкните раскрывающийся список с надписью page: index. Затем нажмите Добавить новую страницу...

Создать новую страницу

Это должно показать то же самое модальное окно, которое вы видели ранее, когда создавали страницу администратора. Введите «регистрация» и нажмите «Создать «.

На этой только что созданной странице перетащите те же элементы, которые мы использовали ранее на странице входа. Измените только метку кнопки регистрации на Sign Up. В качестве ярлыка вы даже можете скопировать и вставить со страницы входа на страницу регистрации. Просто скопируйте групповой контейнер, и он перенесет все элементы внутри себя вместе с ним. Оттуда все, что вам нужно сделать, это изменить метку кнопки.

Страница регистрации

Затем нажмите кнопку «Зарегистрироваться» и отредактируйте рабочий процесс так же, как мы делали это ранее с кнопкой входа. Выберите Аккаунт, затем Зарегистрируйте пользователя.

Подпишите действие пользователя

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

Установить значение электронной почты и пароля

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

Регистрация

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

Ссылка для регистрации

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

Ссылка для предварительного просмотра

Страница администратора

Теперь приступим к странице администратора. Выберите администратора из раскрывающегося списка селектора страниц в верхней левой части экрана. Оказавшись там, нажмите на вкладку Рабочий процесс. Мы не хотим, чтобы кто-либо обращался к этой странице, если они не вошли в систему, поэтому мы должны проверить, вышел ли пользователь из системы.

Проверьте, вышел ли пользователь

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

Перейти на страницу входа

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

Сначала перетащите текстовый элемент в правый верхний угол экрана. Это отобразит приветствие для пользователя. Для этого просто введите слово «Hello», затем нажмите «Вставить динамические данные «. Оттуда выберите Current User’s, а затем по электронной почте.

Показать приветствие пользователя

Затем мы создаем форму продукта, которая включает в себя следующее:

загрузчик изображений

название (текст)

цена (текст, только цифры)

количество (целое число)

Кнопка Сохранить

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

В итоге у вас должно получиться что-то похожее на картинку ниже.

Форма продукта

Затем добавьте рабочий процесс к кнопке «Сохранить «. Выберите «Данные (Вещи) «, затем «Создать новую вещь...».

Рабочий процесс кнопки «Сохранить»

В раскрывающемся списке типов выберите «Создать новый тип...» и установите для него значение «продукт».

Создать новый тип

Нажмите кнопку «Установить другое поле «, чтобы добавить каждое поле по одному. Эти поля должны соответствовать полям, которые вы перетащили на форму товара ранее.

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

Создать поле изображения

Заполните остальные поля, нажав кнопку Установить другое поле:

название (текст)

цена (количество)

кол-во (число)

К концу вы должны увидеть что-то вроде того, что показано ниже.

Поля продукта

Следующим шагом является установка его значения в соответствующие поля формы.

Присвоить значения

Но сейчас мы в затруднительном положении, так как цена, кажется, имеет ошибку. В Bubble задачи отображаются в правом верхнем углу экрана (справа от значка подарка). Нажмите на это, чтобы увидеть, в чем проблема.

Несоответствие типа данных

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

Чтобы решить эту проблему, нам нужно вместо этого установить тип данных цены в текст. Перейдите на вкладку «Данные «и выберите таблицу «Продукт «(она была создана, когда мы добавили новый тип). На самом деле невозможно обновить типы данных в Bubble, поэтому мы должны удалить существующий и вместо этого создать новый с правильным типом данных.

Удаление существующего поля цены

После удаления создайте новое поле цены.

Создать новое поле цены

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

Назначение правильного поля цены

Затем сбросьте форму продукта.

Сбросить форму продукта

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

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

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

После того, как вы заполнили все поля и все сохранили, вернитесь в редактор Bubble. На вкладке «Данные «нажмите «Данные приложения «, затем нажмите «Все продукты «. Это должно показать продукт, который вы только что сохранили.

Данные о продуктах

Прохладный! Теперь мы получаем где-то! Следующим шагом является отображение всех продуктов, которые хранятся в базе данных. Для этого нам нужно использовать контейнер RepeatingGroup. Перетащите его на холст. Пока вы там, также перетащите текстовое поле. Когда вы закончите, это должно выглядеть примерно так, как на картинке ниже. Это чуть ниже формы продукта.

Повторяющаяся группа и поле поиска

Затем нажмите на повторяющуюся группу и установите для нее тип контента product. Источник данных должен быть установлен на Выполнить поиск... → продукт.

Установите тип содержимого повторяющейся группы и источник данных

Вы также можете отсортировать данные по дате создания.

Сортировать по дате создания

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

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

Заголовок таблицы

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

Изображение продукта

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

По сути, вы просто перетаскиваете или рисуете текстовый элемент внутри повторяющейся группы, перетаскиваете его контейнер, чтобы в нем было место для продуктов с особенно длинными заголовками. Затем для содержимого нажмите «Вставить динамические данные «→ «Текущая ячейка» → «Продукт» → «Заголовок «.

Название продукта

Сделайте то же самое для цены и количества. Я буду ждать.

Когда вы закончите, у вас должно получиться что-то похожее на это.

Список продуктов

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

Функциональность поиска

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

Для этого вам нужно добавить условное выражение в повторяющуюся группу. Условие позволяет добавить фильтр к результатам поиска при соблюдении определенных условий. В этом случае нам нужны всего два условия:

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

Когда поле поиска не пусто, мы применяем фильтр к источнику данных.

В поле настройки повторяющейся группы щелкните вкладку Условно. Затем нажмите кнопку «Определить другое условие «.

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

Установить значение условия

Щелкните поле источника данных и выберите Выполнить поиск.

Выполните поиск

Установите тип продукта и отсортируйте его по дате создания в порядке убывания.

Поиск продуктов

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

Затем нажмите «Определить другое условие «. На этот раз мы хотим установить условие, противоположное тому, что мы делали ранее: Input search productÆs → value → is empty. Свойство для изменения по-прежнему является источником данных с продуктом в качестве типа и датой создания в качестве сортировки. Но на этот раз нажмите кнопку «Добавить новое ограничение «. В появившемся новом поле выберите заголовок → содержит → введите продукт поиска → значение. Это эффективно создает фильтр для поля заголовка.

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

Функциональность обновления

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

Редактировать пользовательский интерфейс

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

Всплывающее окно продукта

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

Обновить форму продукта

Далее вам нужно указать, какое начальное значение вы хотите отобразить. Для загрузчика изображений вы указываете это как значение поля динамического изображения. Для текстовых полей это исходное содержимое. Просто нажмите на вставку динамических данных, выберите продукт родительской группы → img. Это должно отображать изображение продукта нажатой кнопки «Изменить «по умолчанию. Сделайте то же самое для заголовка, цены и количества — на этот раз указав значение для начального содержания.

Показать динамическое изображение

Вы можете спросить, откуда Bubble знает продукт родительской группы. Ответ в том, что мы установили тип содержимого всплывающего окна для продукта. Помните, что всплывающее окно классифицируется как контейнер, а контейнеры отвечают за группировку всего внутри них. Это то, что дало нам возможность родительской группы. Это по-прежнему не объясняет, как Bubble может загружать именно тот продукт, который щелкнул пользователь. Вы узнаете ответ, если будете продолжать следовать дальше.

Теперь нам нужно добавить способ открытия всплывающего окна. Но в то же время нам также необходимо загрузить данные продукта, чья кнопка «Редактировать «была нажата. Для этого мы добавляем рабочий процесс к кнопке «Изменить «. Щелкните контейнер, чтобы добавить новое действие, затем выберите Действия элемента → Отобразить данные.

Данные отображения элемента

Установите элемент как всплывающий продукт, а отображаемые данные — это продукт текущей ячейки. Это недостающая часть из ранее. Вот как Bubble узнает, какой именно продукт нужно загрузить во всплывающем окне. Довольно антиклиматический, несмотря на всю неопределенность. Но это все, что нужно сделать.

Данные дисплея

Затем, чтобы отобразить всплывающее окно, добавьте еще одно действие, выберите «Элементы «, затем «Показать». Затем выберите всплывающее окно в качестве значения поля «Элемент».

На этом этапе вы сможете проверить, что всплывающее окно загружает данные о продукте, когда вы нажимаете кнопку «Изменить «.

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

Далее нам нужно добавить фактическую функциональность обновления. Для этого — вы угадали! — добавить рабочий процесс на кнопку «Обновить «. Добавьте действие и выберите Данные (Вещи) → Внести изменения в вещь...

Внести изменения в вещь

Установите Вещь для изменения на Продукт родительской группы. Если вы помните, это то же самое, что мы использовали для отображения данных о текущем продукте. Нажмите «Изменить другое поле», чтобы добавить поле для изменения. Может немного запутаться, какие поля вы должны выбрать, но вы можете использовать родительскую группу в качестве ключевого слова. Любые поля, содержащие это ключевое слово в начале, перетаскиваются во всплывающее окно. Остальные — из формы создания продукта. К концу у вас должно получиться что-то вроде этого.

Изменить поля

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

Обновить действие кнопки

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

Удалить функциональность

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

Самый простой способ использовать функцию удаления — просто использовать всплывающее окно. Таким образом, у нас уже есть доступ к выбранному продукту. Перетащите кнопку «Удалить «под кнопку «Обновить».

Удалить пользовательский интерфейс

Вы уже должны знать упражнение. На этот раз выберите Данные (Вещи) → Удалить вещь...

Удалить рабочий процесс

В поле Удалить еще раз выберите продукт родительской группы. Вот и все! Просто добавьте еще одно действие для закрытия всплывающего окна, и все готово.

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

Стиль приложения

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

Страница авторизации

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

Дизайн страницы входа

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

Размер ссылки для регистрации

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

Коробка настройки

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

Центрирование вещей

Если это все еще не исправило выравнивание, убедитесь, что непосредственный контейнер имеет фиксированную ширину.

Фиксированная ширина

Вы также можете выбрать несколько элементов и выровнять их по вертикали.

Выровнять вертикальные центры

Вот еще один пример использования повторяющейся группы.

Центральная повторяющаяся группа

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

Распределить по вертикали

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

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

Дополнительная кнопка

Для кнопки удаления мы можем создать новый стиль.

Создать новый стиль

Назовите стиль Danger.

опасный стиль

После создания нажмите «Редактировать стиль» и настройте его по своему усмотрению.

Настроить стиль

Когда вы закончите редактирование стиля, вернитесь на вкладку «Дизайн «, и вы увидите, что к кнопке «Удалить «теперь применен новый стиль.

Применен новый стиль

Заключение

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

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

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

3D-печать5GABC-анализAndroidAppleAppStoreAsusCall-центрChatGPTCRMDellDNSDrupalExcelFacebookFMCGGoogleHuaweiInstagramiPhoneLinkedInLinuxMagentoMicrosoftNvidiaOpenCartPlayStationPOS материалPPC-специалистRuTubeSamsungSEO-услугиSMMSnapchatSonyStarlinkTikTokTwitterUbuntuUp-saleViasatVPNWhatsAppWindowsWordPressXiaomiYouTubeZoomАвдеевкаАктивные продажиАкцияАлександровск ЛНРАлмазнаяАлчевскАмвросиевкаАнализ конкурентовАнализ продажАнтимерчандайзингАнтрацитАртемовскАртемовск ЛНРАссортиментная политикаБелгородБелицкоеБелозерскоеБердянскБизнес-идеи (стартапы)БрендБрянкаБукингВахрушевоВендорВидеоВикипедияВирусная рекламаВирусный маркетингВладивостокВнутренние продажиВнутренний маркетингВолгоградВолновахаВоронежГорловкаГорнякГорскоеДебальцевоДебиторкаДебиторская задолженностьДезинтермедитацияДзержинскДивизионная система управленияДизайнДимитровДирект-маркетингДисконтДистрибьюторДистрибьюцияДобропольеДокучаевскДоменДружковкаЕкатеринбургЕнакиевоЖдановкаЗапорожьеЗимогорьеЗолотоеЗоринскЗугрэсИжевскИловайскИрминоКазаньКалининградКировскКировскоеКомсомольскоеКонстантиновкаКонтент-маркетингКонтент-планКопирайтингКраматорскКрасноармейскКрасногоровкаКраснодарКраснодонКраснопартизанскКрасный ЛиманКрасный ЛучКременнаяКураховоКурскЛисичанскЛуганскЛутугиноМакеевкаМариупольМаркетингМаркетинговая информацияМаркетинговые исследованияМаркетинговый каналМаркетинг услугМаркетологМарьинкаМедиаМелекиноМелитопольМенеджментМерчандайзерМерчандайзингМиусинскМолодогвардейскМоскваМоспиноНижний НовгородНиколаевНиколаевкаНишевой маркетингНовоазовскНовогродовкаНоводружескНовосибирскНумерическая дистрибьюцияОдессаОмскОтдел маркетингаПартизанский маркетингПервомайскПеревальскПетровскоеПлата за кликПоисковая оптимизацияПопаснаяПравило ПаретоПривольеПрогнозирование продажПродвижение сайтов в ДонецкеПроизводство видеоПромоПромоушнПрямой маркетингРабота для маркетологаРабота для студентаРазработка приложенийРаспродажаРегиональные продажиРекламаРеклама на асфальтеРемаркетингРетро-бонусРибейтРитейлРовенькиРодинскоеРостов-на-ДонуРубежноеСамараСанкт-ПетербургСаратовСватовоСвердловскСветлодарскСвятогорскСевастопольСеверодонецкСеверскСедовоСейлз промоушнСелидовоСимферопольСинергияСколковоСлавянскСнежноеСоздание сайтов в ДонецкеСоледарСоциальные сетиСочиСтаробельскСтаробешевоСтахановСтимулирование сбытаСуходольскСчастьеТелемаркетингТельмановоТираспольТорговый представительТорезТрейд маркетингТрейд промоушнТюменьУглегорскУгледарУкраинскХабаровскХарцызскХерсонХостингЦелевая аудиторияЦифровой маркетингЧасов ЯрЧелябинскШахтерскЮжно-СахалинскЮнокоммунаровскЯндексЯсиноватая