Как создать приветствие по времени суток на Bubble
Приложения многих платформ не только здороваются с клиентом по имени, но подбирают персональное приветствие для него. Я решил реализовать такой подход в своей системе учета данных, которую разрабатываю на Bubble.
Как это работает
После входа в систему возникает алерт с персональными приветствием.
Вы можете реализовать это по своему. Для начала я создал два алерта. Один на всю страницу большой. Я залил его градиентом, чтобы было интересно. И второй прозрачный в котором будет размещено само персональное приветствие.
JS Tollbox Plugin
Это незаменимый инструмент для всех разработчиков Bubble. Плагин позволяет выполнять серверный код или JavaScript прямо в сценарии веб приложения.
Установите этот плагин через магазин Bubble. На той странице, где вы хотите, чтобы возникало приветствие установите элемент JavaScript Bubble. Например у меня — это страница авторизации. Откройте этот элемент и на вкладке Appearance в строке bubble_fn_suffix введите название функции, которая будет вызывать приветствие. Свою функцию я назвал greetings. Запишите себе в блокнот полное название функции. Она Вам еще пригодится.
bubble_fn_greentings
В строке Value type выберите значение text.
Создание логики
Задача, которую я поставил себе вывести приветствие при успешном входе в систему для пользователя. При не успешном входе запускаются другие механизмы. Т.е. когда пользователь введет верный логин и пароль и нажмет кнопку Войти. Будет запущен алерт, где отобразиться имя пользователя и приветствие по времени суток.
Нажмите на кнопку Войти и перейдите в бэкенд (воркфлоу) для запуска скрипта.
В поле 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. Ну и по желанию, что-то дополнительно.