Каталог решений - Web Dashboard (мобильная и десктопная версия): оптимальная схема организации взаимодействия с зоопарком систем

Web Dashboard (мобильная и десктопная версия): оптимальная схема организации взаимодействия с зоопарком систем

Web Dashboard (мобильная и десктопная версия): оптимальная схема организации взаимодействия с зоопарком систем

В наличии

Задача: из множества систем (1С:ERP, 1C:CRM, Кронос:WMS, 1С:Розница, 1С:УПП…) оперативно и онлайн осуществлять мониторинг на телефоне/десктопе/планшете/телевизоре бизнес-аналитику в дашборде для директора. Рассмотрим в статье, как правильно интегрировать между собой все базы, какие для этого инструменты использовать.

Категория:

Описание

Исходя из постановки задачи, мы видим, что требуется построить схему взаимодействия таким образом, чтобы нужная информация оперативно попадала на веб-дашборд из разных систем. Идеально для такой ситуации подходит микросервисная архитектура, где каждая база данных будет иметь сервис, позволяющий Dashboard получить нужную информацию в нужный момент. Кроме оперативности, не забудем и про безопасность — необходимо учесть авторизацию пользователя, аутентификацию запросов на уровне микросервисов, использование протокола https. 

Как приятно, что 1С поддерживает организацию сервисов не только по SOAP технологии, но и REST, который не обернут дополнительными данными, поэтому заложим в схему именно его использование. 

Схему нарисуем по стандартам UML (диаграмма последовательности), отобразив порядок основного сценария взаимодействия (схему читаем сверху вниз, справа налево):

Схема Dashboard/дашборд на EdiBot - 1C ERP, 1С УТ, Кронос: WMS

В качестве основного узла на схеме у нас выбрана база данных 1С:ERP, как база, которая обладает максимально необходимой для руководителя аналитикой. Специально исключены лишние звенья в виде шин/брокеров сообщений для увеличения скорости получения данных, сервер EDIbot также по сути ничего не делает с данными и не хранит их, данные напрямую из источника попадают потребителю. 

Рассмотрим нашу схему по порядку действий:

1. Руководитель/директор вводит в браузере URL Dashboard’а (с любого устройства — рабочая станция/планшет/мобильник, любой ОС).

2. REST-запрос попадает в сервис нашей основной базы — 1С:ERP.  Сервис 1C:ERP видит, что в запросе нет аутентификационных данных и поэтому в ответном сообщение отправляет только информацию об ожидаемом способе авторизации. 

3. Пользователь вносит необходимые данные авторизации и отправляет запрос повторно.

4. Получив запрос с аутентификационными данными, сервис 1C:ERP проверяет подлинность пользователя, уровень его доступа, готовит и отправляет запрошенную страницу дашборда. При этом страница содержит не только информацию из базы 1C:ERP, а также указание на наличие блоков информации с данными из других сервисов баз данных. Уже на данном этапе директор/руководитель видит страницу dashboard с основной частью аналитики/виджетов.

5. Далее, браузер незаметно для пользователя в автоматическом режиме делает асинхронные запросы во все необходимые сервисы, получая информацию и обновляя соответствующие блоки на странице Dashboard.

Таким образом, страница отображает все данные, которые хотел увидеть пользователь, может их автоматически по отдельности в асинхронном режиме обновлять, делая повторные запросы в сервисы. 

При такой архитектуре базы данных backend-систем могут располагаться в разных локальных сетях, разбросанных по миру, бэк-сервисы могут быть созданы как для 1С-баз, так и для любых других. Руководитель не привязан к устройству, а скорость получения им управленческих данных составляет от 0.3 секунды. При этом нужная информация может выведена и на телевизоры, EDIbot автоматически отмасштабирует контент под его размер. 

 

А теперь давайте рассмотрим возможные примеры типов аналитических блоков/виджетов нашего дашборда:

1. Вывод различных Диаграмм на Web-Dashboard. Фреймворк EDIbot использует все мощности аналитики amCharts в качестве основной библиотеки диаграмм, но при этом можно использовать и диаграммы 1С (картинки форматов svg, png).

Вот ссылка  https://jsonwebapp.com/diagram/json на пример для телефона/рабочей станции. Интерактивное меню оптимизировано для работы на разных размерах экранов. 

Ссылка на JSON файл для песочницы (в публикации Личный кабинет я рассказывал о ней), скрин-шот примера:

Web-Dashboard Edibot, диаграммы отгрузки/отбор Кронос: WMS

 

 

2. Вывод на веб-дашборд табличных/блочных или текстовых данных.

Например, Табло текущей работы склада из WMS-системы в виде таблицы с автомасштабом под экран устройства (тег table) https://jsonwebapp.com/tablo/json  доступно с смартфона/десктопа.

Ссылка на JSON для песочницы, скрин-шот примера:WebApp EdiBot, табло работы склада Кронос: WMS

Или вот в таком виде (Flexbox columns) может быть доступна общая картина по складу с мобильника/рабочей станции/телевизора https://jsonwebapp.com/statestore/json.

Ссылка на JSON для песочницы, скрин-шот примера:

Web-Dashboard Edibot, общее состояние склада

 

EDIbot создан на базе React и является полноценным прогрессивным веб-приложением (PWA) — возможность доступа к данным в режиме оффлайн ("полёт"), push-уведомления, установка приложения на рабочий стол телефона/десктопа, для примера настроил https://jsonwebapp.com/diagram/json, в браузере chrome это выглядит вот так: 

 

 

UPD: Выкладываю видео реальной скорости работы в продакшне:

(Я в сети ростелекома СПБ->сервер EDIbot в Литве->бэк сервера в СПБ)

has been added to your cart:
Оформление заказа