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

06.04.20

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

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

Скачать файл

ВНИМАНИЕ: Файлы из Базы знаний - это исходный код разработки. Это примеры решения задач, шаблоны, заготовки, "строительные материалы" для учетной системы. Файлы ориентированы на специалистов 1С, которые могут разобраться в коде и оптимизировать программу для запуска в базе данных. Гарантии работоспособности нет. Возврата нет. Технической поддержки нет.

Наименование По подписке [?] Купить один файл
Индексный файл
.html 120,10Kb
3
3 Скачать (1 SM) Купить за 1 850 руб.
Внешняя обработка для работы с firestore из 1С
.epf 9,01Kb
25
25 Скачать (1 SM) Купить за 1 850 руб.

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

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

В зависимости от времени суток нагрузка меняется - в первой половине дня присутствуют пиковые моменты, что наводит на мысли не о самом оптимальном варианте для случая регулярного опроса БД (обновлять 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 внешняя обработка отображение

См. также

WEB-интеграция Администрирование веб-серверов Платные (руб)

Веб-портал обеспечивает удобный доступ к конфигурации 1С:ITIL(ИТИЛ), 1С:ITILIUM, Управление IT-отделом 8 через интернет с любого устройства посредством браузера, увеличивая эффективность работы пользователей и снижая нагрузку на сервер. Быстрая инсталляция портала за пару часов, удобный и интуитивно понятный интерфейс и безопасность данных помогут упростить работу с порталом и ускорить выполнение бизнес-процессов компании.

128000 руб.

19.12.2023    2878    3    0    

11

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

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

60000 руб.

07.05.2019    34951    68    45    

27

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

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

57600 руб.

26.11.2024    2634    2    3    

5

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

Модуль "Экспортер" — это расширение для 1С, предназначенное для автоматизации процессов выгрузки данных. Оно позволяет эффективно извлекать, преобразовывать и передавать данные из систем 1С в интеграционную платформу Spot2D. Подсистема упрощает настройку, снижает количество ручных операций и обеспечивает удобный контроль данных.

14400 руб.

20.12.2024    993    5    2    

7

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

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

36000 руб.

03.08.2020    19219    23    22    

20

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

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

12000 руб.

02.02.2021    18990    54    50    

31

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

Расширение значительно упрощает написание API на 1С. Веб программисты получают простой и понятный доступ к 1С. Описание API создаётся автоматически и представляется в виде удобном как для человека, так и для программной обработки.

24000 руб.

27.09.2024    4466    3    2    

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

{
"error": {
"code": 403,
"message": "Missing or insufficient permissions.",
"status": "PERMISSION_DENIED"
}
}
4. user619560 06.05.24 22:25 Сейчас в теме
Подскажите, где именно в Firestore взять Api key ?
5. user619560 26.05.24 14:10 Сейчас в теме
"Api key" это "Web API Key" из настройки проекта
Оставьте свое сообщение