Как создать приветствие по времени суток на Bubble

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

Как это работает

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

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

JS Tollbox Plugin

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

Установите этот плагин через магазин Bubble. На той странице, где вы хотите, чтобы возникало приветствие установите элемент JavaScript Bubble. Например у меня — это страница авторизации. Откройте этот элемент и на вкладке Appearance в строке bubble_fn_suffix введите название функции, которая будет вызывать приветствие. Свою функцию я назвал greetings. Запишите себе в блокнот полное название функции. Она Вам еще пригодится.

bubble_fn_greentings 

В строке Value type выберите значение text.

Синим выделены элементы, которые участвуют в процессе.

Создание логики

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

Нажмите на кнопку Войти и перейдите в бэкенд (воркфлоу) для запуска скрипта.

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

В поле Run JavaScript введите выражение и функцию:

let h = (new Date()).getHours();
let message;
if (h > 23 || h < 7) {
 message = ‘Доброй ночи,’;
 }
else if (h > 6 && h < 12) {
 message = ‘Доброе утро,’;
 }
else if (h > 11 && h < 19) {
 message = ‘Добрый день,’;
} 
else if (h > 18 && h < 24) {
 message = ‘Доброго вечера’;
 }
bubble_fn_greetings(message);

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

JavascripttoBubble A’s value Current User’s Имя .
Рады видеть Вас снова.

Мы пишем адрес кубика, который мы вставили изначально на страницу и добавляем имя Current User. Ну и по желанию, что-то дополнительно.

Результат: