1С+Firebase. Оперативное отображение информации

06.04.20

Интеграция - WEB-интеграция

Появилась задача по отображению информации из базы в "режиме реального времени" с возможностью масштабирования количества подключенных клиентов (неплохо бы уметь подключаться с мобильных устройств), плавающей нагрузкой и минимальными затратами на разработку без изобретения сложных велосипедов. В уме довольно быстро всплыло "Firebase". Далее небольшой опыт реализации взаимодействия с Firestore для раскрашивания объектов карты.

Скачать исходный код

Наименование Файл Версия Размер
Индексный файл
.html 120,10Kb
2
.html 120,10Kb 2 Скачать
Внешняя обработка для работы с firestore из 1С
.epf 9,01Kb
21
.epf 9,01Kb 21 Скачать

Постановка задачи

Не буду вдаваться в детали реальной задачи, а опишу лишь общий концепт. Есть карта местности от заказчика в растровом представлении. Необходимо реализовать бизнес-логику работы с объектами, включающая в себя оперативную визуализацию элементов на карте.

В зависимости от времени суток нагрузка меняется - в первой половине дня присутствуют пиковые моменты, что наводит на мысли не о самом оптимальном варианте для случая регулярного опроса БД (обновлять HTML-страничку напрямую с HTTP-сервиса базы каждые ~5секунд). Да и ни для кого не секрет, что 1С это не realtime-система.

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

Развертывание проекта Firebase

Точно уже не припомню, откуда мне известно о Firebase (возможно сказался бум статей о сервисе несколько лет назад), но цепочка мыслей web -> realtime -> надежность/масштабируемость -> API заканчивалась именно этим продуктом небезызвестной корпорации.

Пожалуй здесь не будет детального описания всех тонкостей Firebase, но постараюсь пошагово описать создание простого проекта, чтобы вы, дорогой коллега, не рыскали по просторам Интернета.

Создание проекта

Проходим прямиком к консоли Firebase и жмем "Создать проект".

На первом шаге мастер попросит заполнить название. Укажем "ISMapVisualization" (Infostart map visualization). Примем условия использования и перейдем к следующему шагу.

Далее последует вопрос об активации "Аналитики". Для поставленной задачи этот функционал не принципиален. Я сторонник отключать все, что не используется явно, поэтому отключаю эту функцию. Нажмем "Создать проект". После недолгого ожидания проект готов к использованию.

На бесплатном тарифном плане "Spark" доступно 50000 запрос на чтение и 20000 на запись. Для наших целей этого пока более чем достаточно, а впоследствии всегда можно перейти на тариф по факту использования.

Добавление приложения

Карту нужно будет как-то отображать. Для этих целей создадим веб-приложение.

Ссылка на создание веб-приложения firebase

Новый мастер запросит псевдоним. Введем название и установим галочку "Настройте Firebase Hosting для этого приложения". Регистрируем.

На следующем шаге мастер предоставит фрагмент JS-кода для подключения нужных библиотек и файла с настройками. На этот момент пока не обращаем пристального внимания.

Создание базы данных

Перейдем по ссылке Database в меню слева и нажмем "Создать базу данных".

Создание базы данных

Выберем опцию "Запустить в тестовом режиме", чтобы на данном этапе не заморачиваться с настройками доступа. Далее укажем месторасположение (я выбрал одно из стандартных - eur3. Европа к нам все же ближе). Тут можно было бы поздравить нас с тем, какие мы молодцы и сделали свой первый проект с firestore-БД, но ведь это явно не то, к чему стремились - нам этого мало. Идем дальше.

Тут надо создать коллекцию. Прошу прощения, дорогой читатель, я увлекся с понятностью, но ты ведь и без отдельного скриншота разберешься, куда нажать, правда? Свою первую коллекцию я назвал colors (ведь в ней будет содержаться значения цветов фрагментов карты). Что задать в названии первого документа и свойства пока не важно.

Hosting

Веб-страничку нужно будет публиковать. Создадим для этого настройки хостинга по аналогии с созданием новой БД. На первом же шаге мастер предложит установить консольное приложение для управления проектом с использованием npm. Я не знаток семейств ПО мира JavaScript, поэтому просто установил с официального сайта NodeJS для Windows (включает в себя пакетный менеджер).

Далее выполняем команду из мастера:

$ npm install -g firebase-tools

Дальше ничего сложного - установщик сделает всю грязную работу. А потом следуем инструкциям мастера: сначала залогинимся, а потом инициализируем проект (нужно находиться в этот момент в директории размещения проекта). Настройки можно применить все стандартные, разве что при выборе нужных функций указать hosting:

Подготовка странички

Дело за малым: осталось отредактировать индексный HTML-файл, заполнить с его помощью firestore и можно переходить к экспериментам с раскрашиванием в реальном времени.

В качестве карты будем использовать векторное представление нашей Родины, любезно предоставленное Интернету дизайн-студией Дмитрия Склярова (не реклама, просто не упомянуть было бы ханжеством).

Не буду мучить тонкостями верстки (ух и намаялся я со стилями, которые более-менее удобоваримо масштабируют интегрированную картинку SVG) и прикреплю готовый в конце публикации.

Картинку можно взять любую. Открываем SVG-файл в любимом текстовом редакторе, копируем содержимое и вставляем в индексный внутри тега div с id isMap. У областей типа rect или path нас прежде всего интересуют свойства id и fill. По id мы будем обращаться к элементу, а значением fill его закрашивать.

В месте подключения библиотек javascript важно заменить путь к настройкам на свой

<script defer src="https://[имя_вашего_проекта].web.app/__/firebase/init.js"></script>

Все, можно публиковать:

$ firebase deploy

После выполнения будет выдан адрес опубликованной странички. Перейдем - откроется наша карта. В индексном файле уже содержится небольшой фрагмент JS-кода, который позволит заполнить коллекцию. Нажмем "Заполнить Firestore".

После этого в разделе database уже можно лицезреть заполненную коллекцию:

Взаимодействие с Firestore из 1С

А далее, пожалуй, начинается все самое интересное. Запускаем обработку из публикации (можно хоть из пустой конфигурации - кода минимум и весь клиентский).

Параметры заполняем из настроек проекта (в консоли firebase) или прямиком из init.js. Жмем "Прочитать данные firestore". Таблица заполнится содержимым Firestore

id фрагмента карты можно подглядеть прям на странице публикации в любом современном браузере, вызвав консоль (обычно F12) и жмакнув по элементу. А в одинэсине находим в списке, задаем новый цвет (red или lime для наглядности) и жмем "Отправить".

Все дальнейшие действия отдаю на откуп фантазии читателя. Самые смышленые могут играть прям с моим проектом.

Приятного времяпровождения!

Версия конфигурации и платформы

Обработка разрабатывалась на пустой конфигурации с минимумом зависимостей и платформе 1С:Предприятие 8.3 (8.3.15.1830). Подойдут и более ранние, с появления объектов работы с HTTP (HTTPСоединение и HTTPЗапрос) и расширенных функций работы со строками (СтрРазделить() и др.)

firestore google realtime внешняя обработка отображение

См. также

Интеграция Альфа Авто 5 / Альфа Авто 6 и AUTOCRM / Инфотек

Сайты и интернет-магазины WEB-интеграция Платформа 1С v8.3 Конфигурации 1cv8 1С:Управление торговлей 11 Автомобили, автосервисы Россия Управленческий учет Платные (руб)

Интеграционный модуль обмена между конфигурацией Альфа Авто 5 и Альфа Авто 6 и порталом AUTOCRM. Данный модуль универсален. Позволяет работать с несколькими обменами AUTOCRM разных брендов в одной информационной базе в ручном и автоматическом режиме.

36000 руб.

03.08.2020    15931    13    18    

13

Интеграция 1С — Битрикс24. Обмен задачами

Сайты и интернет-магазины Интеграция WEB-интеграция Платформа 1С v8.3 Конфигурации 1cv8 Управленческий учет Платные (руб)

Интеграция 1С и Битрикс24. Разработка имеет двухстороннюю синхронизацию 1С и Битрикс24 задачами. Решение позволяет создавать пользователя в 1С из Битрикс24 и наоборот. Данная разработка технически подходит под все основные конфигурации линейки продуктов 1С:Предприятие 8.3 (8.3.18.1289). При приобретении предоставляется 1 месяц бесплатных обновлений разработки. Доступна демо-версия продукта с подключением Вашего Битрикс24

5040 руб.

04.05.2021    17883    6    15    

13

Заполнение по ИНН или наименованию реквизитов контрагента по данным сайта ФНС

Обмен с ГосИС WEB-интеграция Платформа 1С v8.3 Управляемые формы 1С:Комплексная автоматизация 1.х 1С:Бухгалтерия 2.0 1С:Управление торговлей 10 1С:Управление производственным предприятием 1С:Управление нашей фирмой 1.6 1С:Бухгалтерия государственного учреждения 1С:Документооборот 1С:ERP Управление предприятием 2 1С:Бухгалтерия 3.0 1С:Управление торговлей 11 1С:Комплексная автоматизация 2.х Платные (руб)

Обработка является альтернативой механизму, разработанному фирмой 1С и заполняющему реквизиты контрагента по ИНН или наименованию. Не требуется действующей подписки ИТС. Вызывается как внешняя дополнительная обработка, т.е. используется, непосредственно, из карточки контрагента. Заполнение по ИНН или наименованию реквизитов контрагента по данным сайта ФНС (egrul.nalog.ru) для БП 2.0, БП 3.0, БГУ 1.0, БГУ 2.0, УТ 10.3, УТ 11.x, КА 1.1, КА 2.x, УПП 1.x, ERP 2.x, УНФ 1.5, УНФ 1.6, УНФ 3.0, ДО 2.1

2400 руб.

28.04.2016    88928    163    216    

318

[Расширение] БОР-Навигатор.Культура

Зарплата Бюджетный учет WEB-интеграция Обмен с ГосИС Платформа 1С v8.3 Сложные периодические расчеты 1С:Зарплата и кадры государственного учреждения 3 Государственные, бюджетные структуры Россия Бюджетный учет Платные (руб)

Расширение конфигурации, включающее в себя объекты, необходимые для подготовки и сдачи отчета "Штатная численность" системы "БОР-Навигатор.Культура" в программе "1С:Зарплата и кадры государственного учреждения", редакция 3.1.

8400 руб.

01.02.2019    25872    9    0    

7

Интеграция с сервисом vetmanager

WEB-интеграция Платформа 1С v8.3 Бухгалтерский учет 1С:Бухгалтерия 3.0 Бытовые услуги, сервис Платные (руб)

Внешняя обработка разрабатывалась для загрузки документов из Ветменеджер в 1С: Бухгалтерия 3.0

12000 руб.

02.02.2021    16478    42    49    

23
Комментарии
Подписаться на ответы Инфостарт бот Сортировка: Древо развёрнутое
Свернуть все
1. пользователь 23.07.20 20:00
Сообщение было скрыто модератором.
...
2. 1cspec 117 08.11.21 10:55 Сейчас в теме
Здравствуйте, а откуда в "console.firebase.google" брать "Api key" и "App id" ?
+
3. 1cspec 117 08.11.21 14:54 Сейчас в теме
(2) вставил из созданного Веб-приложения, но вот такая ошибка

{
"error": {
"code": 403,
"message": "Missing or insufficient permissions.",
"status": "PERMISSION_DENIED"
}
}
+
Оставьте свое сообщение