Назад к курсу

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

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

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

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

Создание системы регистрации пользователей

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

Одна из самых важных опцию любого приложения или сайта – это возможность создавать пользовательские аккаунты. Компании типа Facebook или Google покупают стартапы и приложения за огромные деньги, хотя они при этом убыточны. Все это потому, что такие компании часто покупают не технологию, а пользователей!

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

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

И начнем мы с самых базовых моментов – создания формы, которая будет содержать поля для ввода email и пароля.

Первое, что нужно сделать – это добавить поле ввода пароля, для чего используется элемент Input. В поле Placeholder введи Email.

Таким же образом добавь элемент Input и измени Placeholder для пароля

Далее давай добавим две кнопки: одну для регистрации и одну для входа. Для этого перетащи на форму два элемента Button и замени текст на Регистрация и Вход соответственно.

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

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

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

Действие, которое будет выполняться по нажатии кнопки – это Account > Sign the user up.

Далее в настройках действия выбери откуда будут браться данные для переменных Email и Password. Алгоритм добавления источника данных тебе уже известен: Click > Input Email > ‘s value.

Проделай то же самое и для поля Пароль.

Итак, теперь ты создал логику работы для кнопки Регистрации, а именно:

  • пользователь вводит адрес почты и пароль
  • при нажатии кнопки сохранить данные записываются в базу данных
  • система создает нового пользователя со статусом Current User (текущий пользователь)

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

Шаг 3: Программирование логики работы кнопки входа

Давай создадим новое событие по нажатию кнопки Вход. Для этого выбери Click here to add an event… > Elements > An element is clicked

В качестве элемента выбери Button Login. Кстати, Bubble покажет тебе во всплывающем окне какой именно элемент ты сейчас добавляешь и как он выглядит в приложении.

Следом нужно добавить действие Account > Log the user in

Здесь проделываем ту же операцию, что и с кнопкой регистрации – указываем откуда брать данные для переменных Email и Password. Кроме этого, в поле Stay logged in выбери “yes”.

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

Шаг 4: Отображение email адреса пользователя после входа в аккаунт

Следующим логичным шагом будет отображать email вошедшего в аккаунт пользователя и кнопку Выход. Для этого вернемся на вкладку Design и добавим Группу (Containers > Group). Поместим ее в правой части экрана.

Теперь давай добавим элемент Text для отображения электронной почты пользователя. Для этого перетащи его в созданный ранее элемент Group. Убедись, что Text находится внутри Group (границы элемента будут красными).

Далее поставь курсор в после ввода и кликни Insert dynamic data.

В выпадающем списке нужно добавить выбрать сначала Current User, а затем ‘s email. Ты уже знаком с подобной логикой добавления данных.

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

Шаг 5: Добавление кнопки Выход

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

Добавь элемент Button и размести его рядом с текстовым полем для отображения email, которое ты добавил на прошлом шаге. Измени текст на кнопке на “Выход”.

После этого нажми на Start/Edit workflow, чтобы добавить логику работы кнопки. Действие, которое будет происходить по нажатию кнопки – это Account > Log the user out

Шаг 6: Отображение информации для вошедших пользователей

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

Для этого добавим еще одно событие из раздела General > User is logged in …

… и свяжем его с действием Element Actions > Show …

… а далее выбери Group Logged In в списке элементов.

Аналогичным образом нужно создать еще один набор действий, который будет прятать группу Email + Выход после того, как пользователь выйдет из аккаунта. Последовательность действий будет такая же, только событие будет User is logged out, а действие Hide an element вместо Show an element. Попробуй добавить этот workflow самостоятельно.

Готово! Теперь форма регистрации, входа и выхода полностью готова. Скорее жми Preview, чтобы посмотреть как это все работает.

Итак, ты научился создавать простую форму регистрации пользователей с помощью no-code инструмента Bubble. Оказывается, это совсем не сложно!

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

Комментарии

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