Как стать автором
Поиск
Написать публикацию
Обновить

Фантастические смартапы, и где они обитают

Уровень сложностиПростой
Время на прочтение4 мин
Количество просмотров1K

Привет, Хабр! Я Таня Гладких — разработчик в команде корпоративного мессенджера 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 — изменился интерфейс. И все это без необходимости заставлять пользователей ставить обновления! 

Управление нижней панелью мобильного приложения с использованием технологии SD UI
Управление нижней панелью мобильного приложения с использованием технологии SD UI

Админы управляют составом полей 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-прослойка решает несколько задач: 

  1. Не отдает злоумышленникам статику фронтенда новостей.

  2. Проводит тщательную проверку входящих запросов, чтобы исключить утечки данных. 

Алгоритм работы смартапа такой: 

  1. Пользователь нажимает кнопку «Новости» в нижнем меню Rocket.Chat. 

  2. Мобильное приложение отправляет запрос по http-протоколу на backproxy смартапа. Запрос состоит из роута смартапа, пользовательского ID, timestamp и вычисленным HMAC-хэшем. 

  3. Backproxy выполняет ряд проверок: валидирует пользователя, вычисляет и сверяет HMAC-хэши и проверят timestamp (который имеет ограниченный срок жизни). 

  4. На следующем шаге есть 2 варианта развития событий:
    • если запрос не проходит хотя бы одну из проверок, бекпрокси возвращает клиенту строку «Доступ запрещен» с 403 ошибкой;
    • если все проверки пройдены успешно, бекпрокси возвращает статику фронтенда и пользователю открывается лента новостей.

    Варианты развития событий после проверки запроса на backproxy
    Варианты развития событий после проверки запроса на backproxy

Далее все запросы на бэкенд идут только через backproxy и проходят ряд строгих проверок: допустимы только GET запросы по определенным заранее роутам и с рядом ограничений в query-параметрах.

Админка: тестирование и A/B тесты

Специально для управления новым функционалом Rocket.Chat была написана админка. Помимо управления feature-флагами, в админке есть еще одна интересная штука — функционал preview и тестирования настроек перед применением на пользователей. 

Модальное окно, в котором доступно сравнение текущего и измененного состояний интерфейса мобильного приложения
Модальное окно, в котором доступно сравнение текущего и измененного состояний интерфейса мобильного приложения

Пример: перед включением новостей для всех админ может открыть смартап в модальном окне и убедиться, что все работает корректно. Если куда-то закралась недоработка (опечатка в названии, не тот роут, не нравится порядок кнопок) — админ возвращается на шаг назад, редактирует настройки и затем проверяет заново. 

В будущем мы добавим сюда шаблоны для проведения A/B тестирования, чтобы можно было оперативно проверять гипотезы на разных группах пользователей. 

Что дальше?

Новости — только первый шаг. Следующая цель — полноценный каталог смартапов.

На тестовых контурах уже работает смартап «Сервисы», так называемый «смартап со смартапами», который объединяет доступ ко множеству корпоративных инструментов. Подключение новых модулей (смартапов) будет доступно админам в пару кликов. 

Еще одна важная задача — вынос backproxy в отдельный NPM-пакет. Это позволит ускорить запуск новых смартапов и сократить их time-to-market. 

SuperApp становится реальностью

Rocket.Chat уже не просто мессенджер. Мы строим платформу, где можно быстро добавлять корпоративные сервисы, управлять ими без обновлений и гибко управлять пользовательским доступом. 

SuperApp — это не фантастика. Это будущее корпоративных коммуникаций, которое мы создаем прямо сейчас. 

Спасибо за внимание! Если у вас будут вопросы, с удовольствием готова обсудить детали в комментах.

Теги:
Хабы:
Всего голосов 5: ↑3 и ↓2+4
Комментарии5

Публикации

Информация

Сайт
mkb.ru
Дата регистрации
Дата основания
Численность
5 001–10 000 человек
Местоположение
Россия
Представитель
Chitanava