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

Публикация № 1323739

Разработка - Системная интеграция - Интеграция с WEB

SizovE

Задача: из множества систем (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 в Литве->бэк сервера в СПБ)

 

Надеюсь, моя публикация была Вам полезна и сэкономит Ваше время, ссылка на все публикации SizovE.

Подписывайтесь на мой канал (наверху), будет много интересного бесплатного контента :)

Специальные предложения

Комментарии
В избранное Подписаться на ответы Сортировка: Древо развёрнутое
Свернуть все
1. davdykin 25 11.11.20 10:11 Сейчас в теме
ДОбрый день, спасибо интересная информация, сейчас, как мне кажется актуальность темы получения информации оперативно и не привязано к рабочему месту (телефон, планшет и т.д.), серьезно возрастает.
- Не сочтите за зануду, но 2 дня тоже подходят под определение "а скорость получения им управленческих данных составляет от 0.3 секунды." ))
- editbot - это ваша разработка? Не нашел информации по использованию.
2. SizovE 143 11.11.20 14:20 Сейчас в теме
(1) В среднем скорость получения пользователем готовой страницы 1 секунда, при наличии 3 блоков из разных баз будет около 1 секунды из основной базы и где-то секунда из всех остальных.
Собственно вот реальные примеры отличной скорости работы - https://youtu.be/cp98qtMVMDQ, https://youtu.be/1IFpUXe_VPQ.

Да, это разработка нашей компании, информация публикуется у меня в публикациях на инфостарте )
Оставьте свое сообщение

См. также

.Net в 1С. На примере использования HTTPClient, AngleSharp. Удобный парсинг сайтов с помощью библиотеки AngleSharp, в том числе с авторизацией аля JQuery с использованием CSS селекторов. Динамическая компиляция Промо

Практика программирования WEB v7.7 v8 Бесплатно (free)

Часто приходится парсить сайты, в том числе с авторизацией, перескакивая со страницы на страницу по ссылкам. Тот, кто занимался вэб программированием, знает, как удобно использовать JQuery и CSS селекторы. На .Net написана очень удобная библиотека AngleSharp. Я покажу, как с её помощью можно значительно облегчить себе труд.

10.03.2016    56541    Serginio    33    

Интеграция с API WB (Wildberries). Создание карточки товара (спецификации)

WEB v8 1cv8.cf ИТ-компания Россия Бесплатно (free)

Опыт интеграции с API WB (Wildberries), опыт создания карточки товара, получение токенов API WB.

18.01.2021    668    jenyavp    13    

HTML редактор/editor (Wysiwyg) для WebKit 1С (CMS, B2B), альтернатива TinyMCE и стандартному ФорматированныйДокумент

WEB Интеграция v8 v8::УФ 1cv8.cf Бесплатно (free)

Suneditor - отличная замена HTML редактору TinyMCE (бесплатному), в публикации с открытым кодом подключим его в 1С с WebKit, скачать HTMLeditor обработку можно бесплатно.

28.12.2020    1411    SizovE    13    

Выгрузка HTML описаний с картинками (Base64) товаров на сайт/интернет-магазин/B2B, разберем регулярное выражение получения тега body, ПолучитьHTML, ФорматированныйДокумент

Практика программирования WEB Универсальные функции v8 v8::УФ 1cv8.cf Бесплатно (free)

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

24.11.2020    567    SizovE    0    

Online телефонный справочник из 1С: Зарплата и управление персоналом Промо

WEB Управление персоналом (HRM) Управление персоналом (HRM) v8 ЗУП3.x Россия Бесплатно (free)

В интернете представлено много реализаций online телефонных справочников организаций. Есть справочники, которые использует для хранения информации базу Active Directory (LDAP), есть справочники, которые реализованы с использованием СУБД (например, MySQL). Но я не нашел справочника, который использует информацию из базы 1С. Далее я рассмотрю данную разработку.

10.03.2017    26268    ruha    16    

Как сделать интеграцию (обмен) с интернет-магазином? Пошаговый план действий (Часть 1)

WEB v8 1cv8.cf УУ Бесплатно (free)

C 2011 года я занимаюсь интеграцией с интернет-магазинами и за это время, наверное, повидал все. Делал интеграцию как «культурными», так и «экзотическими» способами. Количество магазинов исчисляется сотнями. В этой серии статей я буду делиться своим опытом, а также выкладывать какие-то полезные наработки.

19.11.2020    1924    markbraer    3    

Чтение вложенных свойств Структур Структуры, Соответствий, свойства через точку, разбор JSON

Практика программирования WEB Интеграция Универсальные функции v8 Бесплатно (free)

JSON: {user.device.type} - как получить значение {type}? А если вложенность значительно глубже? Как проверить, что оно заполнено или удалить его - всё это в публикации с открытым кодом и даже без рекурсии. Бонусом разбор дерева значений - ДанныеФормыЭлементДерева, СтрокаДереваЗначений.

17.11.2020    1431    SizovE    2    

Отладка модуля ДиадокПро

WEB v8 1cv8.cf Бесплатно (free)

В обработке ДиадокПро все дополнительные модули встроены во внешние обработки, которые хранятся в макетах. Это усложняет процесс самостоятельной интеграции, так как теряется возможность попасть в них в режиме отладки. Но не всё так страшно, поэтому ниже инструкция)

30.10.2020    1531    Максим-777    10    

Кэширование COM-соединения. Три способа Промо

Практика программирования Перенос данных из 1С7.7 в 1C8.X Внешние источники данных WEB v8 Россия Бесплатно (free)

Статья о трех способах кэширования COM-соединения в 1С:Предприятии 8.x.

11.04.2013    41885    YPermitin    41    

JSON примеры меню B2B web-приложения "Личный кабинет" на движке EDIbot для телефона/десктопа

WEB v8 Бесплатно (free)

Рассмотрим на примерах работу движка EDIbot при организации меню B2B "Личного кабинета" (мобильная версия, версия десктоп) грузовладельца WMS-системы.

29.10.2020    777    SizovE    0    

Обмен с сайтом посредством Post-запроса, json

WEB v8 1cv8.cf Бесплатно (free)

Задача - передавать на сайт объекты с наименованием и уникальным идентификатором (УИ), которые изменяются в 1С. Также нужно сохранять историю отправленных пакетов.

29.10.2020    3901    John_d    26    

Организация HTTP публикации каталога товаров используя PostgREST

WEB v8 1cv8.cf Бесплатно (free)

В статье опишу порядок установки настройки и использования PostgREST на примере организации каталога товаров.

05.10.2020    790    malikov_pro    2    

Заготовка для загрузки файлов по ftp Промо

WEB Перенос данных из 1C8 в 1C8 v8 1cv8.cf Бесплатно (free)

3 процедуры и 1 макет

03.06.2013    30688    anig99    6    

Интеграционная прослойка(middleware) на Golang. Часть 5 - Обмен с 1С через HTTP-сервисы платформы

WEB v8 Бесплатно (free)

В этой статье научим прослойку отправлять данные в 1С, для этого используем HTTP-сервисы платформы. Обменяемся данными с новым справочником Клиенты. Но главное создадим HTTP-сервис для получения сообщений из очереди RabbitMQ.

28.09.2020    1238    dmitry-irk38    4    

Отладка http сервиса

WEB v8 Бесплатно (free)

При разработке http сервиса возникает ситуация, а как протестировать http сервис? Создали мы сервис, настроили шаблоны, передали, если нужно параметры, открываем браузер заполняем строку подключения и БАХ, ошибка. Что делать?

23.09.2020    2383    hpi    10    

Учимся создавать http сервисы (часть вторая). Передача параметра в http сервис

WEB v8 1cv8.cf Бесплатно (free)

Пошаговое руководство по созданию http-сервиса (часть вторая). Передача параметра в http сервис.

22.09.2020    4967    hpi    6    

Организация данных и вариант обработки для организации обмена с сайтом

WEB v8 1cv8.cf Бесплатно (free)

В статье опишу вариант организации данных и обработки для обмена с сайтом.

22.09.2020    1271    malikov_pro    4    

Формирование списка документов и скачивание печатной формы документа через веб-сайт с использованием HTTP-сервиса, плюс особенности авторизации

Практика программирования Обмен данными 1С WEB v8 1cv8.cf Бесплатно (free)

В статье показан пример, как реализовать формирование списка документов клиента/пользователя по коду, а затем скачать его (документа) печатную форму по ссылке

18.09.2020    954    R_o_n_n_y    3    

Формирование HTTP запроса формата multipart/form-data с двоичными данными, используя ПотокВПамяти

WEB v8 1cv8.cf Бесплатно (free)

В статье опишу вариант формирования запроса

11.09.2020    2859    malikov_pro    11    

Ферма приложений на Kubernetes

WEB v8 Бесплатно (free)

При эксплуатации большого количества информационных систем 1С, предоставляющих интернет-сервисы, возникают проблемы, связанные с зависимостью от производительности и стабильности веб-сервера. Как объединить отдельно стоящие веб-сервера с помощью платформы Kubernetes для централизованного мониторинга всех опубликованных интернет-сервисов на конференции Infostart Event 2019 Inception рассказал программист компании BIA Technologies Владимир Кирбаба.

24.08.2020    1312    ComboBoy    0    

Использование шаблонного процессора для формирования HTML страниц

WEB v8 1cv8.cf Бесплатно (free)

В статье опишу использование шаблонного процессора Handlebars запущенного на Node.js

24.08.2020    1573    malikov_pro    26    

Загрузка или обновление файла на яндекс диске через rest-api

Практика программирования Файловые протоколы обмена, FTP WEB v8 Бесплатно (free)

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

12.08.2020    2333    pavelpribytkin96    10    

Самый простой парсинг и обработка веб-страниц в 1С

WEB Универсальные функции v8 1cv8.cf Бесплатно (free)

Рассмотрим самый простой парсинг веб-страниц средствами платформы 1С и еще некоторые полезные приемы работы с веб-страницами.

07.08.2020    6168    YPermitin    18    

Загрузка или обновление файла на гугл диске

Практика программирования Файловые протоколы обмена, FTP WEB v8 1cv8.cf Бесплатно (free)

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

06.08.2020    1563    pavelpribytkin96    6    

Использование Yandex Translate (Яндекс.Переводчик)

WEB v8 1cv8.cf Бесплатно (free)

В статье опишу вариант подключения и использования Yandex Translate.

08.07.2020    3808    malikov_pro    8    

Когда хотим знать IP клиента...

WEB v8 Бесплатно (free)

В процессе разработки web приложения на 1С, и это не шутка))), а пожелание заказчика, возникла ситуации когда понадобилось знать, с какого IP подключался клиент.

03.07.2020    5259    IMihalev    10    

Ограничение доступа к HTTP публикациям 1С сервера используя NGINX

WEB v8 1cv8.cf Бесплатно (free)

В статье опишу вариант ограничения доступа к HTTP публикациям 1С сервера используя NGINX.

02.07.2020    6967    malikov_pro    7    

Структура обработки загрузки цен и остатков поставщика с примерами и комментариями

Внешние источники данных WEB v8 1cv8.cf Россия Бесплатно (free)

В статье опишу структуру обработки по загрузке цен и остатков от поставщика с примерами.

27.06.2020    1816    malikov_pro    0    

Вариант использования документа "Операция по Яндекс.Кассе" для других сервисов по оплате через интернет

WEB v8 1cv8.cf Россия Бесплатно (free)

В статье рассмотрю организацию эквайринга в УТ 11.4 и доработки для создания заказов на оплату к стороннему сервису, как пример Сбербанк.

24.06.2020    1425    malikov_pro    3    

Работа с AliExpress через API

WEB v8 Бесплатно (free)

В публикации опишу подход работы с API AliExpress и примеры кода.

23.06.2020    5238    malikov_pro    23    

История создания успешной системы чат-ботов на 1С

WEB v8 Бесплатно (free)

Использование чат-ботов в мессенджерах позволяет автоматизировать многие сложные бизнес-процессы путем диалога с системой через виртуального собеседника. О том, как создать универсальную систему ботов с бэкендом на 1С, работающую в Telegram, Viber и Facebook Messenger одновременно, на конференции Infostart Event 2019 Inception рассказал программист-фрилансер Константин Гейнрих.

21.05.2020    8026    CyberCerber    15    

Парсинг html страниц с выводом информации через JavaScript с использованием Selenium

WEB v8 1cv8.cf Бесплатно (free)

Есть девочки как девочки, есть мальчики как мальчики, есть сайтики как сайтики, но странички их обманщики. В целях сохранить информацию, от автоматизированного сбора, многие ресурсы пытаются защитить ее. Один из таких способов - вывод информации на странице через JavaScript. При получении такой страницы в 1С, JavaScript не успевает вывести необходимые данные, и в 1с получаем практически пустую страницу. В статье приведу пример разработки, для парсинга таких страниц, без регистрации и смс.

20.05.2020    5052    platonov.e    25    

Интеграция 1С и CMS WordPress посредством Rest API сайта. Шаг третий, WooCommerce, публикация категорий товаров

WEB v8 1cv8.cf Бесплатно (free)

Интеграция 1С и CMS WordPress посредством функционала Rest API. Используем только язык программирования 1С и штатный функционал Rest API предоставляемый CMS, без дополнительных библиотек и плагинов. Процедуры и функции публикации категорий товаров в магазин WooCommerce, с комментариями внутри.

13.05.2020    3484    osivv    3    

Интеграция 1С и CMS WordPress посредством Rest API сайта. Шаг второй, публикация картинок

WEB v8 Бесплатно (free)

Интеграция 1С и CMS WordPress посредством функционала Rest API. Используем только язык программирования 1С и штатный функционал Rest API предоставляемый CMS, без дополнительных библиотек и плагинов. Процедуры и функции передачи фото из 1С, с комментариями внутри.

13.05.2020    2354    osivv    0    

Интеграция Camunda BPM и 1С

WEB Интеграция v8 Бесплатно (free)

Быстрый старт. Только практические примеры. Установка, запуск и публикация бизнес-процесса на сервере Camunda BPM. Управление бизнес-процессами из 1С при помощи Camunda REST API.

12.05.2020    4210    zhichkin    22    

Интеграция 1С и CMS WordPress посредством Rest API сайта. Первый шаг

WEB v8 Россия Бесплатно (free)

Интеграция 1С и CMS WordPress посредством функционала Rest API. Используем только язык программирования 1С и штатный функционал Rest API предоставляемый CMS, без дополнительных библиотек и плагинов. Процедуры и функции 1С с комментариями внутри.

28.04.2020    5203    osivv    23    

Выразительный Web API

WEB v8 Бесплатно (free)

Теория разработки Web API с ожидаемым поведением, за который не будет стыдно за пределами мира 1С.

27.04.2020    7276    nbeliaev    22    

Хранение статистики публикаций автора сообщества Инфостарт ® (мобильное приложение И ++)

Мобильная разработка WEB v8 1cv8.cf Бесплатно (free)

Инфостарт ® достаточно удобный в плане работы со своим личным кабинетом сайт. Но программисты тем и отличаются от большинства людей, что им хочется знать больше. Поэтому появилась конфигурация 1С (она же мобильное приложение 1С) для более подробного учета статистики публикаций: рейтинг, количество просмотров, количество комментариев в динамике и в разрезах.

24.04.2020    2411    capitan    15    

Интеграция УАТ с топливными сервисами

WEB v8 1cv8.cf Автомобили, автосервисы Бесплатно (free)

Интеграция конфигурации Управление автотранспортом с топливными веб-сервисами.

21.04.2020    7538    RPGrigorev    2    

Интеграция 1С с веб-сервисами Лукойл ЛИКАРД

WEB v8 1cv8.cf Россия Бесплатно (free)

Описание интерфейса взаимодействия сервиса Лукойл- ЛИКАРД с информационной системой 1С.

20.04.2020    5560    RPGrigorev    0    

Ошибка инициализации модуля: HTTPСервис

WEB v8 1cv8.cf Узбекистан Бесплатно (free)

Решение проблемы "Ошибка при работе с HTTP сервисом 500. Ошибка инициализации модуля".

13.04.2020    4222    VipDim    10    

COVID-19. Динамика эпидемии

WEB v8 v8::СКД 1cv8.cf Бесплатно (free)

Весной 2020 практически все ждут, «когда же это закончится», когда эпидемия пойдет на спад. Специалисты призывают «сгладить кривую». Как понять, в какой точке мы сейчас? Данные университета Джонса Хопкинса в любой 1С.

01.04.2020    3398    Alejandro_V    6    

Как я собрал для себя высокопроизводительный и бесплатный облачный бекенд для 1С на PosgreSQL + PostgREST

Производительность и оптимизация (HighLoad) WEB Интеграция Мобильная разработка Администрирование веб-серверов v8 Бесплатно (free)

В этой статье я расскажу о проблемах бека для мобильных приложений или другого фронта, который требует производительности, быстрой реакции и отказоустойчивости, и как я решил это благодаря opensource проекту PostgREST и СУБД Postgre SQL 12. Проведу простой тест производительности для сравнения 1С с данным решением. Это может быть полезно всем, кто разрабатывает мобильные приложения либо фронтсайд-приложения для 1С на чем угодно - на мобильной платформе или на нативном языке или на Simple UI. И также обзор новых функций SimpleUI для связи с этим бекендом.

31.03.2020    13978    informa1555    35    

Коронавирус COVID-19. Статистика по странам

WEB v8 Бесплатно (free)

В связи с COVID-19 люди поделились на две категории: те, кто осознал, и те кто ЕЩЕ не осознал. Единственное наше преимущество перед Коронавирусом заключается в том, что информация распространяется быстрее, чем расползается "невидимка".

25.03.2020    7131    Evgen.Ponomarenko    60