Назад к курсу

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

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

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

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

Отправка данных на страницы приложения

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

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

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

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

Шаг 1: Создание формы загрузки изображений

Для начала давай создадим форму загрузки изображений и список, который будет их показывать. Для этого добавь на страницу элемент Input – он будет использоваться для того, чтобы пользователи вводили в него название изображения. Поэтому заменим стандартный плейсхолдер на “Название изображения…”

Далее нужно добавить загрузчик изображений – элемент Picture Uploader; и введем “Нажмите, чтобы загрузить изображение” в поле Placeholder.

Последний элемент, который необходимо добавить – это кнопка “Сохранить”. Из предыдущих уроков ты уже знаешь как это сделать.

Шаг 2: Программирование действий для загрузки и сохранения изображений

Итак, теперь нужно сделать нашу форму рабочей. Сперва нужно запрограммировать кнопку – как обычно это делается нажатием на Start/Edit workflow в окне свойств кнопки. Это перенесет нас на вкладку Workflow, где необходимо добавить действие Data (Things) > Create a new thing…

Тип сущности (thing), которую мы будем создавать по нажатию кнопки – это фото; поэтому выбери Photo в меню Type.

Теперь после нажатия кнопки, будет создаваться и сохраняться новая сущность типа Photo.

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

Мы добавили новое текстовое поле, теперь нужно задать что будет в нем храниться. В нашем случае это Title = Input Title’s value. Как обычно в Bubble такие команды собираются одна за одной из выпадающих списков, о чем мы уже упоминали в предыдущих уроках.

Отлично! Теперь по нажатию кнопки “Сохранить” в базу данных будет записываться название изображения, которое пользователь ввел в соответствующее поле ввода.

Аналогичным образом добавим еще одно поле, в котором будет храниться файл с картинкой:

Set another field > Click > Create a new field…

Field name должно быть Picture, а тип поля = image

Значение поля Picture должно быть такое: Input Picture’s value

Последний момент – это сброс формы после успешной загрузки изображения. Для этого, нажми Click here to add an action… > Element Actions > Reset inputs

Итак, подведем промежуточный итог.

  • Пользователь вводит название изображения, загружает его и нажимает кнопку “Сохранить”
  • После нажатия кнопки срабатывает триггер, который выполняет следующие действия
    • создается сущность Photo
    • введенное название сохраняется в переменной Title
    • загруженное изображение сохраняется в переменной Picture
    • форма сбрасывается

Шаг 3: Создание списка загруженных изображений

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

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

Для поля Type of content выбери созданную ранее сущность Photo, т.к. именно это мы будем отображать в списке.

Теперь нам надо уточнить, какой именно контент будет отображаться, поэтому выбери Do a search for в поле Data source и укажи Photo во всплывающем окне.

Как ты помнишь, цель этого урока – научиться отображать различный контент в зависимости от того, что кликнул пользователь. Поэтому давай добавим элемент Link (Ссылка) в контейнер Repeating Group.

Сама ссылка должна быть динамической, т.е. отображать различные данные для каждого изображения, поэтому нажми Insert dynamic data…

В качестве аргумента выбери Current cell’s Photo Title. таким образом само название изображения и будет ссылкой.

Шаг 4: Создание страницы с изображением

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

Теперь надо добавить сами страницы, на которые и будут вести эти ссылки. Для этого выбери Add a new page… в меню страниц в левом верхнем углу редактора.

В качестве названия страницы введи picture_detail и нажми Create.

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

Для этого дважды кликни в любом месте пустой страницы, чтобы открыть редактор свойств (Property Editor), и выбери Type of content = Photo.

Давай также переименуем страницу из My page во что-то более осмысленное, например Изображение.

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

В отличии от предыдущего урока, в котором мы создавали слайдшоу на Bubble, мы не будем загружать изображения вручную. Вместо этого оно будет отображаться автоматически из базы данных. Для этого выбери в полу Dynamic image выбери Insert dynamic data > Current Page Photo > ‘s Picture

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

Шаг 5: Связывание динамической ссылки со страницей с изображением

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

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

Теперь дважды кликни на элемент Link внутри Repeating Group, чтобы начать его редактировать; и выбери picture_details в качестве значения поля Destination page.

Очень важным моментом является то, какую именно картинку будет отображать наша динамическая страница. Поэтому выбери Data to send = Current sell’s Photo

Наконец последний штрих – поставь галочку в поле Open in a new tab, чтобы страница с изображением открывалась в новой вкладке. Таким образом пользователь не будет уходить с основной страницы со списком изображений.

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

Будем рады твоим вопросам или комментариям!

Комментарии

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