Наш подход к мультиарендности с ReactJS
В Zyda (www.zyda.com) мы создаем приложение для заказа еды, рестораны регистрируются для использования нашего сервиса, настраивают или импортируют свою информацию и меню, а их клиенты могут заказывать еду прямо из своих ресторанов. Это означает, что у нас есть несколько клиентов, которые ожидают, что у каждого будет запущена и запущена собственная версия приложения, у каждого из которых свое меню, тема и домен.
Традиционный подход заключался в том, чтобы настраивать приложение для каждого ресторана и размещать его в своем домене, но благодаря мультитенантности мы этого не сделали. Википедия сообщает нам, что мультиарендность - это архитектура программного обеспечения, в которой один экземпляр одного и того же программного обеспечения работает на сервере и обслуживает несколько клиентов. арендатор - это группа пользователей, которые имеют общий доступ с определенными привилегиями к экземпляру программного обеспечения. В нашем случае арендатором является ресторан.
Звучит очень красиво и практично. Если вам интересно, как мы сделали нашу версию этого, читайте дальше…
Как мы различаем арендаторов
Прежде всего, нам нужен был способ различать разные рестораны (арендаторов). В нашем случае это URL-адрес, который посещает пользователь, если пользователь обращается к приложению по https: // order .chocolateness. net /, например, приложение будет использовать « шоколадность » для настройки темы, меню и любого дальнейшего взаимодействия с серверной частью, например, размещения заказов.
Это касается таких случаев, как https: // порядок. Шоколад. net / и http: // dipndipkw . zyda.com , это два способа, с помощью которых рестораны могут ссылаться на свои приложения для заказов.
Загрузка данных
Теперь мы знаем, какой ресторан посещает пользователь. Мы могли бы подробнее рассказать о том, как бэкэнд обрабатывает это в будущей статье. На данный момент, однако, все, что мы делаем, это передаем значение subdomain в бэкэнд и запрашиваем информацию о ресторане и меню.
Тематика
Теперь, когда у нас есть данные, нам понадобилась своя тема для каждого ресторана. Мы используем material-ui для нашего презентационного слоя, сейчас мы только настраиваем цветовую палитру в соответствии с цветами темы ресторана.
Мы достигаем этого, имея отдельную тематическую папку для каждого ресторана, который мы обслуживаем. Затем мы используем значение subdomain, которое мы извлекли ранее, чтобы загрузить соответствующую тему для каждого ресторана при загрузке приложения.
Если у ресторана не было настроенной темы, вместо нее загружается резервная тема defaultTheme.
Реагировать шлем
Затем, благодаря нашим друзьям из НФЛ, мы можем делать интересные вещи с заголовком страницы и значком, например, отображать название и логотип ресторана вместо статичного заголовка.
Очень простой.
Локализация
И последнее, но не менее важное: поскольку у нас есть клиенты во многих странах, нам нужно было реализовать многоязычную и валютную поддержку. Подробнее о языковой поддержке я расскажу в этой статье.
Валюта
К счастью, валютная ситуация была намного проще, чем язык для реализации.
Этот метод в основном добавляет суффикс валюты к отображаемой цене, KWD или EGP в нашем случае для Кувейта и Египта. Кроме того, при необходимости он просто возвращает локализованное сообщение «цена при выборе».
Полученные результаты
Теперь у нас есть одно приложение, обслуживающее клиентов нескольких ресторанов в разных странах. Возможности настройки пока несколько ограничены, но мы очень довольны нашим прогрессом. Примеры наших клиентов:
http://dipndipkw.zyda.com
http://www.enabkuwait.com
https: //www.chinagarden. com.kw/
https://order.chocolateness.net/
О наших делах
Разделение кода
В настоящее время мы объединяем все доступные темы в пакет, который предоставляется каждому клиенту. Хотя размер тем ничтожно мал, было бы лучше, если бы каждый клиент загружал только тему ресторана, который они посещают.
Более глубокий стиль
Хотя настройки цветовой палитры на данный момент кажется достаточным, мы планируем предложить немного больше возможностей настройки в будущем. Например, другой макет для меню.
Возможности PWA
Теперь, когда мы можем динамически манипулировать заголовком HTML благодаря React Helmet, мы можем создать ссылку на собственный файл манифеста для каждого ресторана. Это позволит клиентам делать такие крутые вещи, как добавить ресторан на домашний экран и запускать его без браузера.
