Назад к курсу

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

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

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

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

Сохранение информации пользователей в базу данных

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

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

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

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

Итак, для начала необходимо создать форму ввода данных пользователями, т.е. окно, в которое они будут вводить адреса. Для этого мы будем использовать поле ввода (Input) и кнопку (Button).

Сперва перетащи на страницу элемент Search Box и измени текст внутри окна на “Введите адрес…”

Далее необходимо сделать так, чтобы это поле ввода автоматически подставляло адреса по первым введенным буквам, т.е. включить функцию автозаполнения. Для этого выбери Geographic places в меню Choices style.

Поздравляю! Форма ввода готова. Можешь изменить ее размер и стиль, или перетащить в другое место на странице.

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

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

Шаг 2: Программирование логики работы формы

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

Новое событие (Event) будет добавлено автоматически и оно будет выполняться при нажатии на кнопку Сохранить. Теперь надо добавить действие для этого события. Если ты подзабыл как это делается, то освежить свою память можно в теме “Вкладка Workflow: события и действия“.

Для того, чтобы сохранять введенные пользователями данные, необходимо нажать на кнопку Click here to add an action…, далее выбрать Data (Things) > Create a new thing

Нам нужен будет тип данных Location, поэтому в выпадающем меню Type выбери Create a new type… и введи Location

Итак, теперь когда пользователь нажимает на кнопку мы создаем и сохраняем новый тип данных Location. Далее надо сделать так, чтобы введенный адрес сохранялся в базу данных. Для этого нажми на кнопку Set another field > Click > Create a new field

В появившемся окне добавь название поля (Field name) и выбери его тип (Field type). Название будет Address, а тип geographic address. Нажми кнопку Create когда все будет готово.

Итак, новый тип данных добавлен и теперь нужно связать его с тем, что пользователи будут печатать в форму ввода. Для этого нажми кнопку Click и выбери Input Address’s value

Готово! Теперь введенные пользователями адреса будут сохраняться в базе данных.

Последнее, что нужно сделать – это добавить действие (action), которое будет очищать форму ввода после нажатия кнопки Сохранить. Для этого добавь еще одно действие и выбери Element Actions > Reset inputs.

Итак, алгоритм работы формы закончен! Он состоит в следующем:

  • пользователь вводит данные в форму и нажимает кнопку Сохранить
  • введенный адрес записывается в базу данных в переменную Location
  • после нажатия кнопки форма автоматически очищается

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

Шаг 3: Добавление карты с адресами

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

Так как нам необходимо, чтобы карта отображала все локации, то нужно выбрать List в меню Number of markers.

Далее выбери Location в меню Type of markers. Это необходимо для того, чтобы на карте отображались адреса из переменной Location, которую мы добавили ранее и в которую мы будем сохранять введенные пользователями данные.

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

… и выбери в новом окне Type: Location (это имя переменной, которую мы добавили).

Кстати, ты также можешь поменять стиль карты, чтоб она не выглядела как стандартные вид Гугл карт. Выбери, что тебе больше нравится в меню Map style.

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

Как видишь, создание приложений на Bubble с нуля и без знаний программирования – это просто!

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

Комментарии

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