Назад к курсу

Приложения и сайты на Bubble с нуля

0% завершено
0/0 шагов
  • Подпишись, чтобы первым получать уведомления о новых статьях и бесплатных курсах!

    Обещаем не спамить!

Модуль 3, Тема 3
В процессе

Работа с информацией в базе данных

Прогресс модуля
0% завершено

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

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

Таким образом ты сможешь лучше понять принцип работы с базами данных в Bubble, что является ключевым компонентом в любом приложении!

Шаг 1: Создание формы ввода городов

Для начала давай создадим форму через которую пользователи будут вводить названия городов. Для этого перетащи на страницу поле ввода (Input) и кнопку (Button). Назовем их “Введите название города…” и “Отправить” соответственно.

Шаг 2: Добавление новых городов по нажатию кнопки

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

Как ты уже знаешь, для этого необходимо нажать Start/Edit workflow в окне свойств кнопки.

После того, как откроется вкладка Workflow, давай добавим действие Data (Things) > Create a new thing…

… и создадим тип новой сущности с названием City

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

Следующий шаг – добавим еще одно поле, в которое будет записываться название города. Это делается с помощью кнопки Set another field > Click > Create a new field. Тип переменной должен быть text.

Данные для этой переменной будут браться из формы ввода, поэтому настроим City равным Input City’s value

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

Далее необходимо добавить еще одно поле, в котором будет храниться информация о рейтинге города, т.е. количество голосов отданных за тот или иной город. Для этого выбери Set another field > Click > Create a new field… еще раз, назови поле Votes (голоса) и выбери для него тип number.

Далее введи число 1 как стартовое значение для переменно Votes.

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

Click here to add an action… > Element Actions > Reset inputs

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

Шаг 3: Отображение списка городов

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

Для начала вернись на вкладку Дизайн и добавь элемент Repeating Group из раздела Containers. Расположи его под окном ввода городов и сделай его достаточно большим, чтоб он занял бОльшую часть страницы.

Далее выбери City для типа отображаемого контента (Type of content).

Итак, теперь мы можем выводить список городов из переменной City.

Следующий шаг – необходимо выбрать какие именно города отображать и в каком порядке. Для этого в разделе Data Source выбери Do a search for, а в открывшемся окне выбери тип City…

… и отсортируй значения по количеству голосов (Votes)…

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

Готов! Теперь введенные пользователями города будут отображать на странице и сортироваться в зависимости от количества “проголосовавших” за них от большего к меньшему.

Давай теперь настроим визуального оформления списка городов. Например, измени количество отображаемых строк (Rows), добавь границу (Border style = Solid), поменяй цвет фона, добавь тень и так далее. В общем, можно “поиграться” с настройками.

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

Теперь поставь курсор в текстовое поле и выбери Insert dynamic data

Так как каждая ячейка элемента Repeating Group должна отображать город, то нам нужно выбрать следующее выражении в качестве динамических данных: Current cell’s City’s City.

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

Для этого повтори предыдущие шаги: поставь курсор в область ввода > нажми Insert dynamic data > Current cell’s City > ‘s Votes.

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

Для этого перетащи элемент Icon в Repeating Group и расположи его рядом с элементом Text в самой первой ячейке. Давай выберем иконку “сердечко” или “палец вверх”, изменим размер и выберем другой цвет. Попробуй сделать это все сам, результат должен выглядеть примерно вот так:

Шаг 4: Программируем логику голосования при нажатии на иконку

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

Для начала нажми Start/Edit workflow в окне свойств иконки, чтобы перейти на вкладку Workflow. В одном из предыдущих шагов мы уже добавили поле Votes в переменную City, поэтому действие при нажатии на иконку должно изменять это значение. Для этого выберем Data (Things) > Make changes to thing…

… т.к. основная переменная, которую мы будем изменять называется City, то выбери Things to change > Current cell’s City; потом нажми Change another field и выбери Votes = Current cell’s City’s Votes + 1

Теперь при клике на иконку “сердечко” значение Votes у текущего города будет увеличиваться на 1.

Ура! Все готово! Жми кнопку Preview и тестируй свое приложение.

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

Остались вопросы? Смело пиши в комментариях ниже!

Комментарии

Ваш адрес email не будет опубликован. Обязательные поля помечены *