Привет, Хабр! Я Таня Гладких — разработчик в команде корпоративного мессенджера Rocket.Chat в МКБ (Московском кредитном банке).
Вы когда-нибудь задумывались, сколько корпоративных приложений установлено у вас на смартфоне? Мессенджер, ВКС, букинг, таск-менеджеры — список можно продолжать бесконечно. И ни одно из этих приложений, как правило, не предоставляет доступ к внутренним ресурсам компании, например, Outlook или ServiceDesk.
А теперь представьте SuperApp — единое мобильное приложение, через которое можно зайти в корпоративный мессенджер, новости компании, сервисы ИТ-поддержки и десятки других инструментов. Авторизуетесь всего один раз — и весь корпоративный мир у вас под рукой. Звучит отлично, правда?
В 2022 году в МКБ зародилась идея создания такого приложения: была проведена аналитика, нарисованы макеты… но реалии требовали быстрых решений. Так в банке появился вендорский мессенджер Rocket.Chat, а идеи по разработке SuperApp отправились в бэклог.
В прошлом году все изменилось: была запущена трансформация Rocket.Chat в тот самый SuperApp.
Как из мессенджера сделать SuperApp
В начале 2024 года мы выпустили редизайн Rocket.Chat: он стал визуально единообразным с экосистемой МКБ, получил обновленный UI и… одну маленькую, но важную фичу — кнопку «Новости» на нижней панели.
Кажется, мелочь? На самом деле за этим стоит целая архитектурная перестройка:
Новый механизм отображения интерфейса через Server-Driven UI (SD UI).
Интеграция первого смартапа — модуля, работающего в WebView.
Создание админки для гибкого управления кнопками и смартапами.
Разберем все это подробнее.
Server-Driven UI: когда JSON решает все
SD UI (Server-Driven User Interface) — это подход, в котором интерфейс мобильного приложения определяется JSON-ответом сервера. Кстати, данная технология используется и в клиентском приложении МКБ, об этом коллеги писали тут.
При открытии пользователем приложения Rocket.Chat получает JSON со следующими параметрами:
- уникальный ID кнопки;
- название и порядковый номер кнопки на нижней панели меню;
- route смартапа, который будет открываться по нажатию на кнопку;
- svg-Иконки для активного и неактивного состояния.
Изменили JSON — изменился интерфейс. И все это без необходимости заставлять пользователей ставить обновления!
Админы управляют составом полей JSON'ом через новую панель администратора, которая позволяет добавлять и редактировать кнопки, изменять параметры интерфейса и скрывать отдельные кнопки и смартапы с помощью feature-флагов. Этот функционал завязан на ролевой модели, то есть возможно гибко настраивать интерфейс по-разному для разных ролей.
Пример: когда мы тестировали функционал новостей, доступ к нему был только у сотрудников с определенной специально добавленной ролью. Остальным пользователям данная кнопка не была доступна.
Смартапы: мини-приложения внутри Rocket.Chat
Теперь о ключевом элементе SuperApp — смартапах.
Смартап — это веб-приложение, встроенное в мобильный клиент через WebView. Аналог в вебе — это тег <iframe>, который позволяет открыть одно веб-приложение внутри другого.
Ниже приведена поверхностная схема системы, которая отвечает за новые возможности мессенджера Rocket.Chat.
Первым смартапом в Rocket.Chat стал раздел «Новости». Его код и логика полностью независимы от основного мессенджера. Смартап включает в себя:
- frontend (Single Page Application на React);
- backend корпоративного портала;
- proxy-прослойку (backproxy).
Чтобы обеспечить безопасность при работе с внутренними ресурсами компании, мы внедрили backproxy — небольшую промежуточную прослойку между фронтендом и бэкендом. Её можно отнести к паттерну BFF (Backend-For-Frontend).
В отличие от классических BFF, наша proxy-прослойка решает несколько задач:
Не отдает злоумышленникам статику фронтенда новостей.
Проводит тщательную проверку входящих запросов, чтобы исключить утечки данных.
Алгоритм работы смартапа такой:
Пользователь нажимает кнопку «Новости» в нижнем меню Rocket.Chat.
Мобильное приложение отправляет запрос по http-протоколу на backproxy смартапа. Запрос состоит из роута смартапа, пользовательского ID, timestamp и вычисленным HMAC-хэшем.
Backproxy выполняет ряд проверок: валидирует пользователя, вычисляет и сверяет HMAC-хэши и проверят timestamp (который имеет ограниченный срок жизни).
На следующем шаге есть 2 варианта развития событий:
• если запрос не проходит хотя бы одну из проверок, бекпрокси возвращает клиенту строку «Доступ запрещен» с 403 ошибкой;
• если все проверки пройдены успешно, бекпрокси возвращает статику фронтенда и пользователю открывается лента новостей.
Варианты развития событий после проверки запроса на backproxy
Далее все запросы на бэкенд идут только через backproxy и проходят ряд строгих проверок: допустимы только GET запросы по определенным заранее роутам и с рядом ограничений в query-параметрах.
Админка: тестирование и A/B тесты
Специально для управления новым функционалом Rocket.Chat была написана админка. Помимо управления feature-флагами, в админке есть еще одна интересная штука — функционал preview и тестирования настроек перед применением на пользователей.
Пример: перед включением новостей для всех админ может открыть смартап в модальном окне и убедиться, что все работает корректно. Если куда-то закралась недоработка (опечатка в названии, не тот роут, не нравится порядок кнопок) — админ возвращается на шаг назад, редактирует настройки и затем проверяет заново.
В будущем мы добавим сюда шаблоны для проведения A/B тестирования, чтобы можно было оперативно проверять гипотезы на разных группах пользователей.
Что дальше?
Новости — только первый шаг. Следующая цель — полноценный каталог смартапов.
На тестовых контурах уже работает смартап «Сервисы», так называемый «смартап со смартапами», который объединяет доступ ко множеству корпоративных инструментов. Подключение новых модулей (смартапов) будет доступно админам в пару кликов.
Еще одна важная задача — вынос backproxy в отдельный NPM-пакет. Это позволит ускорить запуск новых смартапов и сократить их time-to-market.
SuperApp становится реальностью
Rocket.Chat уже не просто мессенджер. Мы строим платформу, где можно быстро добавлять корпоративные сервисы, управлять ими без обновлений и гибко управлять пользовательским доступом.
SuperApp — это не фантастика. Это будущее корпоративных коммуникаций, которое мы создаем прямо сейчас.
Спасибо за внимание! Если у вас будут вопросы, с удовольствием готова обсудить детали в комментах.