Удаленная конфигурация Firebase для Интернета
Прошло некоторое время с тех пор, как я написал свою Packt Cookbook о Firebase, тогда в 2017 году я писал о конфигурации Firebase Remote, и о том, что это очень подходящий вариант для функциональных возможностей, основанных на спросе, и это именно то, что делает задание Remote Config Это позволяет вам контролировать способ демонстрации данных / функций в вашем приложении на основе многих факторов, чтобы поддерживать любую бизнес-логику по вашему выбору.
В качестве варианта использования вы можете изменить значения этих переменных или конфигурацию из консоли Firebase, чтобы продемонстрировать новые всплывающие окна со скидками в электронной коммерции или разрешить новый тип функций в вашем приложении, которое было создано, но еще не активировано по какой-либо причине, таким образом, эта функциональность в основном присутствовала исключительно на мобильной платформе Android / iOS, но недавно мы получили такой же потрясающий контроль, на этот раз в Интернете! так что давайте изучим это вместе.
PS: Remote Config on Web все еще находится в стадии бета-тестирования, поэтому используйте его на свой страх и риск для реализации на уровне производства.
Репо 🤓
Как всегда, я создал небольшое репо для нашей демонстрации, которое вы можете - и, конечно, - клонировать / форкнуть и играть в своем пространстве:
Также используя Power of firebase Hosting, я развернул там приложение: https://awesome-d5da4.web.app/, так что вы тоже можете играть с ним вживую 🙏🏻
Сценарий 🎬
Идея состоит в том, чтобы просто показать модальное окно скидки, которое будет продемонстрировано, чтобы сообщить нашим постоянным пользователям, что мы предлагаем им скидку 50% на их следующую покупку, это модальное окно не будет отображаться по умолчанию, скорее, он будет только видимым, когда мы захотим вознаградить наших пользователей с помощью Firebase Remote Config.
Конечный результат 🙈
Нашим конечным результатом будет что-то похожее на изображение волны, простую HTML-страницу, работающую на Bootstrap v4, и некоторый код сценария VanilaJS, который будет приводить в действие логику получения событий и связанную с Firebase, довольно просто.
И это будет дерево кода приложения:
├── ЛИЦЕНЗИЯ
├── README.md
├── assets
│ ├── images
│ │ └── config.png
│ └── стили
│ └── bootstrap.min.css
├── firebase.json
├── index. html
├── package.json
└── yarn.lock
Как видите, у нас будут некоторые ресурсы и изображения, связанные с нашим стилем кода, конфигурациями Firebase над файлом firebase.json, который будет обрабатывать в основном его часть развертывания, простой пакет .json для некоторых метаданных, где наша основная логика будет в файле index.html.
PS: Все в репо 😉
Давайте код 💪
У нас будет простое модальное окно, которое будет выглядеть так:
Наши импортированные скрипты, вот где вещь станет интересной, как вы могли или не знали, хостинг Firebase также может обрабатывать конфигурацию в вашем приложении за вас, только и только если вы решите, что вы будете размещать свое приложение в Служба хостинга Firebase, которая также будет обрабатывать доставку библиотек или часть импорта CDN для библиотек JS на основе Firebase, что означает, что нам не нужно загружать скрипт локально и импортировать их, а скорее сделаем следующее:
Обратите внимание, что часть «/ __ /» в исходном URL-адресе зарезервирована, что означает, что firebase автоматически распознает это и доставит его позже, как только приложение будет запущено локально или размещено.
Кроме того, вы можете спросить, где находится объект конфигурации Firebase и его инициализация? , ну, они вам не понадобятся, если вы используете службу хостинга Firebase, все будет обслуживаться автоматически, потому что Firebase просто сопоставит размещенный проект с его учетными данными, что автоматически означает большую безопасность для вашего приложения. Подробнее об этом можно прочитать здесь.
Теперь откройте тег Script и давайте начнем код:
В прошлых фрагментах мы выполняли плавный переход:
1 - Запуск одноэлементного объекта Remote Config.
2 - Передача некоторых параметров, таких как fetchTimeMillis, который установит время ожидания для процесса извлечения из Firebase Console, и minimumFetchIntervalMillis, которое установит время истечения срока действия значения поля, означает, что один раз срок действия поля истек, он, скорее всего, будет обновлен в ближайшее время, установка очень короткого времени необходима на тот случай, если вы хотите поддерживать свои локальные переменные в актуальном состоянии.
Далее всегда рекомендуется добавлять удаленное значение переменной, для этого мы можем использовать следующее:
Что-то, что я также считаю полезным для моего рассудка, - это правильно назвать вашу переменную и иметь внутригрупповые или самостоятельно используемые схемы переменных, которые будут иметь больше смысла для вашей команды и вашего приложения, вы поблагодарите меня позже, когда у вас будут висеть сотни переменных около 🙈
Далее начинается захватывающая часть: мы определяем способ, которым мы хотим использовать Получить и Активировать значения. Давайте разберемся, что это означает:
Fetch: возьмите конфигурацию Remote Config из консоли и кэшируйте ее в одноэлементном объекте Remote config, который мы создали ранее.
Активировать: готовит наши значения к получению или к использованию.
Объект Firebase Remote Config будет иметь эти значения по отдельности, но также будет иметь функцию fetchAndActivate, которая будет делать обе вещи одновременно и возвращать обещание, которое вы разрешаете, это обещание будет иметь значение результата типа Boolean, которое будет иметь следующее значение:
true: если выбранный вызов был активирован.
false: если мы используем уже загруженную конфигурацию.
Так что теперь вы можете определить желаемое поведение и что продемонстрировать, если у нас появятся новые данные.
Затем нам нужно будет получить данные, для этого у нас будет функция getValue, которая будет захватывать любое значение в консоли по ключу, потому что, как вы увидите, в Remote Config Консоль, все на основе ключа / значения.
Итак, поскольку мы точно знаем, что наше значение будет логическим и никаким другим, Firebase API дает нам возможность анализировать его таким образом, для этого мы можем использовать функцию asBoolean () для получения нашего значение из консоли как логическое, но в зависимости от типа переменной у вас могут быть разные функции, такие как asNumber (), asString (), которые я считаю более удобными для моего использования .
Однажды, если я убедился, что мое значение истинно, я просто демонстрирую модальное окно Discount, которое будет нашим определением выполненного в соответствии с общим сценарием 🥳
А теперь самое интересное, давайте перейдем к нашей консоли Firebase, чтобы проверить, как мы можем добавлять / изменять наши данные.
Как видите, в моей консоли Firebase у нас есть два значения, и одно из них представляет нашу замечательную переменную скидки, которую я установил, не шучу, изменить тип / значение переменной или даже добавить / удалить довольно просто, так что я позволю тебе поиграть с 🤓
После того, как вы закончите их настройку, в правом верхнем углу страницы у вас появится красивая кнопка с надписью «Опубликовать изменение», подобная этой:
После того, как вы опубликуете, все ваши пользователи будут иметь возможность почти в реальном времени, и они обязательно получат вашу потрясающую щедрую скидку.
Технически это запись, обновление везде 💪 !!
Не забудьте передать нам свое 👏 на случай, если оно вам пригодится 🙈
Если вам понравилась эта статья, не стесняйтесь проверять другие мои статьи и подписываться на меня через Средний:
Заранее спасибо 😇!
