Отправить запрос к внешнему веб-сервису и обработать на странице результат его выполнения

Средний
PDF

Пример. На странице записи пользовательского раздела Http Client Service вызвать внешний веб-сервис coindesk.com. Отобразить текущий курс BTC к USD.

1. Настроить интерфейс страницы 

  1. Используя шаблон Данные и бизнес-процессы (Records & business processes), создайте пользовательское приложение Http Client Service. Для этого воспользуйтесь инструкцией, которая приведена в статье Создать пользовательское приложение.
  2. В рабочей области страницы приложения Http Client Service откройте страницу Страница записи Http Client Service (Http Client Service form page).
  3. Удалите поле Название (Name), которое по умолчанию добавлено на страницу Страница записи Http Client Service (Http Client Service form page).
  4. Добавьте надпись курса BTC к USD.

    1. В рабочую область Freedom UI дизайнера добавьте компонент типа Надпись (Label).
    2. На панели действий Freedom UI дизайнера нажмите на кнопку и на панели настройки заполните свойства надписи:

      • Заголовок (Title) — "Курс BTC к USD" ("BTC to USD exchange rate").
      • Стиль (Style) — выберите "Описание" ("Caption").
      • Цвет текста (Text color) — выберите серый цвет.
  5. Добавьте надпись, которая содержит значение курса BTC к USD.

    1. В рабочую область Freedom UI дизайнера добавьте компонент типа Надпись (Label).
    2. На панели действий Freedom UI дизайнера нажмите на кнопку и на панели настройки заполните свойства надписи:

      • Заголовок (Title) — "Курс BTC к USD (значение)" ("BTC to USD exchange rate (value)").
      • Стиль (Style) — выберите "Обычный текст" ("Body text").
  6. На панели действий Freedom UI дизайнера нажмите на кнопку . После сохранения настроек страницы открывается исходный код страницы Freedom UI.

2. Настроить отправку запроса к веб-сервису и обработать результат его выполнения 

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

  1. Подключите сервис отправки HTTP-запросов sdk.HttpClientService. Для этого добавьте в AMD-модуль зависимость @creatio/sdk.

    Зависимости AMD-модуля
    /* Объявление AMD-модуля. */
    define("UsrAppHttpClientServ_FormPage", /**SCHEMA_DEPS*/["@creatio/sdk"] /**SCHEMA_DEPS*/, function/**SCHEMA_ARGS*/(sdk)/**SCHEMA_ARGS*/ {
            ...
        };
    });
    
  2. В секцию viewModelConfig добавьте атрибут BtcToUsd, который хранит информацию о курсе биткоина к доллару.

    Секция viewModelConfig
    viewModelConfig: /**SCHEMA_VIEW_MODEL_CONFIG*/{
        "attributes": {
            ...,
            /* Атрибут, который хранит курс биткоина к доллару. */
            "BtcToUsd": {}
        }
    }/**SCHEMA_VIEW_MODEL_CONFIG*/,
    
  3. В секции viewConfigDiff привяжите свойство caption элемента BtcToUsdExchangeRateValue к атрибуту $BtcToUsd модели. Свойство caption отвечает за текст, который содержит элемент.

    Секция viewConfigDiff
    viewConfigDiff: /**SCHEMA_VIEW_CONFIG_DIFF*/[
        ...,
        {
            "operation": "insert",
            "name": "BtcToUsdExchangeRateValue",
            "values": {
                ...,
                /* Привязка атрибута BtcToUsd к свойству caption. */
                "caption": "$BtcToUsd",
                ...
            },
            ...
        }
    ]/**SCHEMA_VIEW_CONFIG_DIFF*/,
    
  4. В секции handlers добавьте пользовательскую реализацию обработчика системного запроса crt.HandlerViewModelInitRequest. Обработчик выполняется при инициализации View модели.

    1. Создайте экземпляр http-клиента из @creatio/sdk.
    2. Укажите URL для получение текущего курса. Используйте внешний веб-сервис coindesk.com.
    3. Отправьте GET-запрос.
    4. Получите из тела ответа курс и запишите его в атрибут BtcToUsd.
    Секция handlers
    handlers: /**SCHEMA_HANDLERS*/[
        {
            request: "crt.HandlerViewModelInitRequest",
            /* Пользовательская реализация обработчика системного запроса. */
            handler: async (request, next) => {
                /* Создает экземпляр http-клиента из @creatio/sdk. */
                const httpClientService = new sdk.HttpClientService();
                /* Указывает URL для получение текущего курса. Используется внешний сервис coindesk.com. */
                const endpoint = "https://api.coindesk.com/v1/bpi/currentprice/USD.json";
                /* Отправляет GET-запрос. HTTP-клиент автоматически преобразовывает тело ответа из формата JSON в JS-объект. */
                const response = await httpClientService.get(endpoint);
                /* Получает из тела ответа курс и записывает его в атрибут BtcToUsd. */
                request.$context.BtcToUsd = response.body.bpi.USD.rate;
                /* Вызывает следующий обработчик, если он присутствует, и возвращаем его результат. */
                return next?.handle(request);
            },
        },
    ] /**SCHEMA_HANDLERS*/,
    
    Полный исходный код схемы страницы
  5. На панели инструментов дизайнера клиентского модуля нажмите Сохранить (Save).

Результат выполнения примера 

Чтобы посмотреть результат выполнения примера:

  1. Перейдите на страницу приложения Http Client Service и нажмите Запустить приложение (Run app).
  2. На панели инструментов приложения Http Client Service нажмите Добавить (New).

В результате выполнения примера на странице записи пользовательского раздела Http Client Service отображается текущий курс BTC к USD. Значение получено из внешнего веб-сервиса coindesk.com.