ПЛАТФОРМА «1С: ПРЕДПРИЯТИЕ» КАК СЕРВЕРНАЯ ЧАСТЬ WEB-ПРИЛОЖЕНИЯ

АННОТАЦИЯ

В статье рассматривается вариант использования платформы «1С: Предприятие» в качестве серверной части для web-приложения. Реализовано взаимодействие клиентской части web-приложения на библиотеке React.js с платформой «1С: Предприятие».

Ключевые слова: Платформа «1С: Предприятие», HTTP-сервис, REST API, React.js, WEB-приложение.

Актуальность темы.

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

Большое количество компаний работает в приложениях, построенных на платформе «1С: Предприятие», но не в качестве серверной части web-приложения. Платформа 1С изначально была ориентирована для решения задач хранения и обработки данных. Языком программирования в данной платформе является встроенный язык программирования 1С. Платформа 1С умеет работать с веб-сервером Apache и IIS для публикации конфигурации в сеть.

Для работы с HTTP-запросами в платформе есть функционал HTTP сервисов, который появился в платформе версии 8.3.5. Также в анонсе от 06 октября 2021 года сообщили [1]., что в версии платформы 8.3.21 будет добавлена возможность асинхронной отправки HTTP-запросов во всех типах клиентов (веб, тонкий, толстый, мобильный). Следовательно, актуальные версии платформы «1С: Предприятие 8» смогут решать задачи серверной части с помощью объекта метаданных типа «HTTP-сервисы».

Основные преимущества использования платформы «1С: Предприятие» в разработке web-приложения:

- скорость разработки, создания базы данных, связи между таблицами;

- выполнение запросов на уровне ORM;

- возможность администрирования приложения в desktop-приложении;

- аутентификация / регистрация пользователей;

- создание ролей, ограничений доступа на уровне платформы;

- наличие HTTP и WEB сервисов.

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

Демонстрация работоспособности данной архитектуры

Для проверки работоспособности данной архитектуры разрабатываются следующие приложения: отдельная конфигурация, отвечающая на HTTP-запрос и само приложение, построенное на библиотеке React.js.

1. Для начала создается база данных в любой СУБД (PostgreSQL, MSSQL, Oracle DB);

2. Далее в соответствующей базе данных создается конфигурация 1С;

3. С помощью Apache, IIS происходит публикация http-сервисов;

4. Создается web-приложение на библиотеке React на Node V8.

К примеру, информационной базе необходимо оперативно обмениваться с web-приложением. После выполнения каких-либо действий web-приложение может делать запрос к информационной базе на платформе 1С и получать необходимую информацию в JSON формате. А платформа при помощи HTTP-сервисов принимает запросы и возвращает данные.

Для запуска HTTP-сервисов на стороне платформе требуется веб-сервер, настроенный на работу с «1С: Предприятием 8». Браузер клиента взаимодействует с веб-сервером по протоколу HTTP или HTTPS. WEB-сервер, в свою очередь, взаимодействует с «1С: Предприятием 8» в файловом или клиент-серверном варианте работы. В качестве веб-сервера используется Apache или IIS.

Рисунок 1. Схема архитектуры

В результате React-приложение запрашивает данные при помощи GET запроса из информационной базы 1С и отображает их в приложении. Для записи web-приложение отправляет POST-запрос с данными, а запись и контроль и происходит в конфигурации 1С.

Конфигуратор платформы 1С

Для демонстрации архитектуры создано новостное приложение, где платформа 1С будет хранить данные, а React-приложение будет отображать их.

В конфигураторе создается объект news c типом данных Catalogs. Объект news имеет следующие поля:

Author – string (для хранения автора)

Date – date (для хранения даты)

Title – string (для хранения заголовка)

NewsText – string (для хранения содержимого новости)

Затем в конфигурации создается объект типа HTTP-сервис с названием NewsService. В это объекте создается шаблон «news» и подчиненный ему метод «getNews» с типом запроса GET. Далее к созданному методу реализуется «обработчик события» для обработки запроса клиента:

Function getNews(Request)

  Response = New HTTPServiceResponse(200);

  fixCORS(Request, Response);

  setHeaders(Response)

  Response.SetBodyFromString(requestNewsFromBase(), TextEncoding.UTF8); 

  Return Response;

EndFunction

Procedure setHeaders(Response)

              Response.Headers.Insert("Content-Type", "application/json; charset=utf-8");

  Response.Headers.Insert("Access-Control-Allow-Headers", "Authorization,Content-type");

  Response.Headers.Insert("Access-Control-Allow-Methods", "GET, PUT, POST, DELETE, HEAD, OPTIONS");

  Response.Headers.Insert("Access-Control-Allow-Credentials", "true");

  Response.Headers.Insert("Access-Control-Allow-Headers", "X-Requested-With, origin, content-type, accept");

EndProcedure

Procedure fixCORS(Request, Response)

              Origin = Request.Headers.Get("Origin");

  IF Origin = Undefined THEN

              Response.Headers.Insert("Access-Control-Allow-Origin", "*");

  ELSE

              Response.Headers.Insert ("Access-Control-Allow-Origin", Origin);

  ENDIF;

EndProcedure

Function requestNewsFromBase()

  JSONObject = New JSONWriter;

  JSONObject.SetString();

  Query = New Query;

  Query.Text =

              "SELECT

              |           News.Date AS Date,

              |           News.Title AS Title,

              |           News.NewsText AS NewsText,

              |           News.Author AS Author

              |FROM

              |           Catalog.News AS News";

  QueryResult = Query.Execute();

  SelectionDetailRecords = QueryResult.Select();

  ObjArray = New Array;

  StructureObj = New Structure("Date, Title, NewsText, Author");

  While SelectionDetailRecords.Next() Do

                                      StructureObj.Insert("Date", SelectionDetailRecords.Date);

              StructureObj.Insert("Title", SelectionDetailRecords.Title);

              StructureObj.Insert("NewsText", SelectionDetailRecords.NewsText);

              StructureObj.Insert("Author", SelectionDetailRecords.Author);

                                      ObjArray.Add(StructureObj);

  EndDo;

  WriteJSON(JSONObject, ObjArray);

  Return JSONObject.Close();

EndFunction

Данный обработчик события при обращении к нему будет возвращать JSON-объект с данными по новостям. В функции setHeaders() заполняются стандартные для HTTP-запросов заголовки, в функции requestNewsFromBase() выполняется запрос в базу данных, формируется массив структур, после конвертируется в JSON для отправки на клиент. И хотелось бы заострить внимание на функцию fixCORS(). Данная функция проверяет источник отправляющий запрос, и добавляет заголовок с адресом источника. В дальнейшем можно подкорректировать проверку на определенные домены. Без данного заголовка сервер не будет отвечать на клиентские запросы, а клиент будет получать ошибку “Blocked by CORS policy!”.

Публикация HTTP-сервиса

После разработки HTTP-сервиса необходимо опубликовать данный HTTP-сервис на веб сервере. Публикацию веб сервера можно при помощи Apache или IIS. В своей разработке я буду использовать Apache, так как данная технология бесплатная и не требует лицензии.

Для этого в конфигурационный файл веб-сервера Apache httpd.conf был дописан следующий код:

# 1c publication

Alias "/crm_system_1c" "E:/Projects/publish_1c/"

<Directory "E:/Projects/publish_1c/">

    AllowOverride All

    Options None

    Require all granted

    SetHandler 1c-application

    ManagedApplicationDescriptor "E:/Projects/publish_1c/default.vrd"

</Directory>

В данном файле конфигурации указывается путь к файлу публикации HTTP-сервиса, чтобы web-сервер Apache смог опубликовать его в сеть.

А в файл default.vrd для публикации HTTP-сервиса на веб-сервере был введен следующий код:

<?xml version="1.0" encoding="UTF-8"?>

<point xmlns="http://v8.1c.ru/8.2/virtual-resource-system"

              xmlns:xs="http://www.w3.org/2001/XMLSchema"

              xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

              base="/crm_system"

              ib="File=&quot;E:\Projects\master thesis\1C\base&quot;;Usr=exchange;Pwd=1">

  <httpServices>

              <service name="HTTPService"

                                      rootUrl="test"

                                      enable="true"

                                      reuseSessions="autouse"

                                      sessionMaxAge="20"

                                      poolSize="10"

                                      poolTimeout="5"/>

  </httpServices>

</point>

В этом коде указаны пути к конфигурации 1С, HTTP-сервису и заполнены некоторые параметры. Особо важными параметрами являются: ib="File=&quot; E:\Projects\master thesis\1C\base&quot;; Usr=exchange; Pwd=1">, а именно указание логина и пароля пользователя. Это необходимо для авторизации при обращении к HTTP-сервису. Иначе клиент при обращении получит статус код 401-Not Authorized. Для этого в информационной базе создается служебный пользователь exchange с правом доступа к HTTP-сервисам. А авторизацию пользователя можно выполнять поверх служебного пользователя.

Клиентское приложение React.js

После публикации HTTP-сервиса на web-сервере Apache, нужно отобразить данные на клиентском части с помощью фреймворк-библиотеки React.js.

Создается стандартное React приложение с помощью npm команды:

npx create-react-app.

После окончания сборки шаблона приложения начинается разработка web-интерфейса клиентской части.

Для получения данных написан модуль “./NewsAPI/NewsAPI.js” выполняющий запрос и возвращающий JSON компоненту для его отображения.

import React from 'react'

async function getNews() {

    let news = {}

    await fetch('crm_system_1c/hs/NewsService/news/getNews')

        .then(res => res.json())

        .then(result => {

            news = result

        })

        .catch(error => console.log(error))

    return news

}

export default { getNews }

Для формирования записи новостей создается следующий React-компонент “TableRow” со следующим телом:

import React from "react";

import classNames from "classnames";

import "./TableRow.css";

export function TableRow({

  Title,

  Date,

  NewsText,

  Author

}) {

  return (

    <>

      <div className={classNames("row")}>

        <p className="title">{Title}</p>

        <p className="title">{Date}</p>

        <p className="title">{NewsText}</p>

        <p className="title">{Author}</p>

      </div>

    </>

  );

}

Данный компонент принимает на вход одну запись из JSON и возвращает компонент для одной записи.

Для отображения интерфейса всего приложения и объединения различных компонентов и модулей разработан следующий главный компонент:

import React from "react";

import ReactDOM from "react-dom";

import NewsAPI from "./API/NewsAPI";

import { TableRow } from "./TableRow";

import "./styles.css";

function App() {

  const [news, setNews] = React.useState({})

    useEffect(()=> {

        NewsAPI.getNews().then(data => {

            setNews(data.actions)

        })

    }, [])

  return (

    <div className="App">

      <div className="heading">

        <h5 className="title">Title</h5>

        <h5 className="title">Date</h5>

        <h5 className="title">News text</h5>

        <h5 className="title">Author</h5>

      </div>

      <div className="body">

        {news.map(el => {

          return <TableRow {...el}/>;

        })}

      </div>

    </div>

  );

}

const rootElement = document.getElementById("root");

ReactDOM.render(<App />, rootElement);

В данном блоке кода происходит обращение к модулю NewsAPI, который обращается к HTTP-сервису на 1С. После выполнения этот модуль возвращает основному компоненту JSON с данными о новостях. Далее в основном компоненте при помощи хука setNews() заполняется state news, и начинается рендер интерфейса. А именно шапка интерфейса, и на каждой итерации JSON, вызывается компонент TableRow, возвращающий верстку новости.

В итоге на клиенте формируется интерфейс с данными, полученными от сервера. Что говорит о том, что данная архитектура работает.

Вывод.  Выполненная разработка показывает, как возможно использовать платформу 1C для серверной части для веб-приложения с любыми front-end фреймворками и библиотеками или как дополнительный сервис к уже написанному web-приложению. При этом важно отметить высокую скорость разработки, легкость поддерживания, возможность аутентификации посредством платформы, возможность администрировании приложения через толстый клиент, работающий автоматически из платформы.

Список литературы:

1. Расширение поддержки работы с НТТР-запросами [электронный ресурс] URL: https://wonderland.v8.1c.ru/blog/rasshirenie-podderzhki-raboty-s-nttr-zaprosami/ (дата    обращения 05.12.2021).