1 of 19

UFC 5.0 (Russian)

Инструкция по интеграции оператора

Обратите внимание на то, что отображаемые в данной статье фрагменты кода предназначены для использования исключительно для целей оценки и тестирования. Прежде чем включиться в процесс, напишите по адресу: Integrations@imgarena.com.

Библиотека процесса интеграции

Библиотека процесса интеграции в формате Front Row Seat распространяется со сборкой в виде модуля ES и сборкой UMD. В приведенных ниже примерах для ясности и демонстрации простейших вариантов реализации используется синтаксис UMD.

Пакет распространяется с помощью npm, в котором доступны как сборка в виде модуля ES, так и сборка UMD: https://www.npmjs.com/package/@img-arena/front-row-seat

Сборка UMD доступна на unpkg: https://unpkg.com/@img-arena/front-row-seat

Подробнее о том, как использовать unpkg, см. в их документации: https://unpkg.com

Порядок действий

Чтобы интегрировать Центр мероприятий Абсолютного бойцовского чемпионата (UFC) IMG Arena в свой веб-сайт, вам нужно выполнить следующие действия:

Добавить «контейнерный» HTML DOM элемент туда, где должна отображаться информация о данном Центре мероприятий.
Включить в него сценарий библиотеки процесса интеграции.
Инициализировать библиотеку процесса интеграции.

<!DOCTYPE html>
<html>
  <head>
    <title>IMG Arena Event Centre</title>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="./styles.css" />
  </head>

  <body>
    <div id="img-arena-event-centre"></div>
    <script src="https://unpkg.com/@img-arena/front-row-seat"></script>
    <script>
      const { MessageTopics } = frontRowSeat.eventCentreUtils;
      const eventCentreInstance = frontRowSeat.eventCentre({
        operator: "OPERATOR-NAME",
        sport: "ufc",
        targetModule: "full",
        eventId: "EventID",
        version: "version number",
        targetElementSelector: "#img-arena-event-centre",
        language: "en"
      });

      eventCentreInstance.on(MessageTopics.CONTEXT_UPDATE, msg => {
        console.log(msg);
      });

      eventCentreInstance.on(MessageTopics.HANDSHAKE_FAILED, () => {
        console.log("Handshake failed");
      });
    </script>
  </body>
</html>

Целевой элемент

Могут быть случаи, когда для целевого пункта назначения центра мероприятий предпочтительнее будет вместо строки передать узел элемента.

Свойством targetElementSelector может выступать либо строка выбора DOM-элемента, либо сам узел элемента.

const targetElement = document.querySelector('#img-arena-event-centre');
const eventCentreInstance = frontRowSeat.eventCentre({
  operator: "[OPERATOR-NAME]",
  sport: "ufc",
  version: "latest",
  eventId: "705",
  language: "en",
  targetModule: "full",
  targetElementSelector: targetElement
});

Авторизация

Каждый интегрированный клиент получает собственный уникальный URL-адрес Центра мероприятий IMG Arena. В целях предотвращения потенциального веб-скрапинга мы нередко отслеживаем несанкционированное использование этого URL-адреса и можем заблокировать любое подозрительное использование.

Инициализация

Для выполнения синхронизации Центра мероприятий UFC с вашим сайтом есть два метода, зависящие от возвращаемого значения инициализатора eventCentre: on и emit. При асинхронном обмене сообщениями оба эти метода действуют по шаблону pub/sub. Метод on предназначен для получения сообщений из Центра мероприятий, тогда как метод emit предназначен для отправки сообщений в Центр мероприятий.

Метод on доступен для возвращаемого значения инициализатора eventCentre. Применяется он для оформления подписки на сообщения, отправляемые из Центра мероприятий. Поддерживаемые темы сообщений зависят от области имен eventCentreUtils, eventCentreUtils.MessageTopics, и подробно описаны ниже. С обратным вызовов поступает единственное значение, представляющее собой объект, содержащий в себе соответствующие поля для темы сообщений, на которую оформлена подписка.

Генерирование

// See below the fields to include on object passed for each topic
.emit(MESSAGE_TOPIC_NAME, messageData)

Метод emit доступен для возвращаемого значения инициализатора eventCentre. Применяется он для отправки сообщений в Центр мероприятий. Передаваться в Центр мероприятий будут только сообщения на поддерживаемые темы.

Языки

Как видно из примеров, параметр «язык» задается как переменная. См.: Доступные переводы на другие языки

Тематика

Тематика центра мероприятий можно настроить путем передач значения параметра theme. theme: "dark" активирует отображение темной версии центра мероприятий. Обратите внимание на тот факт, что, если параметр theme вы не передадите, отображаться будет светлая версия центра мероприятий.

Параметры

В поле options могут быть заданы некоторые дополнительные параметры.

Имя параметра

Описание

По умолчанию

Пример

videoPlaybackEnabled

Позволяет просматривать трансляции по мере их доступности

false

true либо false

disablePeopleImages

Отключает изображения людей, показывая вместо них заполнители

false

true либо false

userId

Используется для отслеживания средствами Google Analytics

undefined

"123e4567"

Модули Центра мероприятий UFC

Центр мероприятий поддерживает инициализацию с определенным состоянием пользовательского интерфейса, достигаемым путем передачи в процессе инициализации объекта сообщения «Обновление контекста».

Модульное построение

Центр мероприятий UFC может быть инициализирован в 7 различных модульных конфигурациях. Это осуществляется путем указания имени модуля в поле «targetModule».

Имя модуля

Описание

full

Доступ ко всему Центру мероприятий UFC

fight

Одиночный бой

fightCard

Отображается только в режиме «Fightcard», без возможности навигации

striking

Отображается только в режиме просмотра «Striking», без возможности навигации

stats

Отображается только в режиме просмотра «Stats», без возможности навигации

matchup

Отображается только в режиме просмотра «Matchup», без возможности навигации

tape

Отображается только в режиме просмотра «Tape», без возможности навигации

Темы сообщений

Во всех приведенных ниже таблицах подробно описаны поля данных, представленные в объектах данных сообщений, которые отправляются и принимаются по каждой теме сообщений.

Рукопожатие не состоялось

Специальная тема, указывающая на то, что рукопожатие между Центром мероприятий и вашим сайтом выполнить не удалось. Эта тема генерируется интеграционной библиотекой. Генерировать ее вам не нужно, а нужно лишь оформить на нее подписку.

Поле

Тип

Описание

Обязательно

timestamp

число

временная метка unix с момента неудачи

✅

Обновление контекста

Тема, посвященная общим обновлениям состояния пользовательского интерфейса через объект «initialContext», например, вследствие навигации к конкретному файткарду либо бою

Поле

Описание

view

Определяет режим просмотра, в котором должен загружаться центр мероприятий. Возможные значения: «Fightcard» / «Fight» / «Striking» / «Stats» / «Tape» / «Matchup»

eventId

Идентификатор мероприятия, определяемый функцией DDE.

fightId

Идентификатор боя, определяемый функцией DDE. Доступен для режима просмотра = «fight» / «striking» / «stats» / «tape» / «matchup»

Весь файткард

Чтобы встроить весь Центр мероприятий UFC, вы должны заполнить такие, характерные для своей сборки, поля.

Поле

Значение

operator

ваш уникальный идентификатор оператора

sport

"ufc"

eventId

Идентификатор мероприятия файткарда

version

Версия Центра мероприятий UFC.

theme

по умолчанию = светлая версия

"light" = светлая версия

"dark" = темная версия

параметр «targetModule» указывает на то, должно ли приложение отображать в режиме всего файткарда, одиночного боя, «fightcard», «striking», «matchup», «stats» or «tape».
параметр «eventId» относится к файткарду/мероприятию UFC, которые вы хотите отобразить.

Весь Центр мероприятий

Ниже приведен порядок действий по имплементации Центра мероприятий со всеми функциями.

Действия по имплементации всего Центра мероприятий:

Добавьте свой уникальный идентификатор оператора.
Задайте в параметре «targetModule» значение «full»
Введите «eventId», обратите внимание на необходимость использовать уникальный идентификатор файткарда, т.е. UFC 254, идентификатор мероприятия – «625».

      const { MessageTopics } = frontRowSeat.eventCentreUtils;
      const eventCentreInstance = frontRowSeat.eventCentre({
        operator: "operatorIDName",
        sport: "ufc",
        targetModule: "full",
        eventId: "eventID",
        version: "latest",
        targetElementSelector: "#img-arena-event-centre",
        language: "en"
      });

Таким образом будет предоставлен полный доступ к файткарду UFC

Центр мероприятий в режиме «Fight»

Ниже приведен порядок действий по имплементации Центра мероприятий в объеме конкретного боя, как с навигацией, так и без нее.

Добавьте свой уникальный идентификатор оператора.
Задайте в параметре «targetModule» значение «iframe».
Введите «eventId», обратите внимание на необходимость использовать уникальный идентификатор файткарда, т.е., UFC FIGHT NIGHT, идентификатор мероприятия – «707».
Найдите уникальный «fightID», к которому вы бы хотели переходить при первоначальной загрузке центра мероприятий, т.е., в данном случае «fightID» – «6667»
Добавьте параметр «initialContext», состоящий из «fightId»
- значение параметра «View» должен быть: «Fight», дабы обеспечить возможность перехода к режиму всего файткарда
- параметр «fightId» данного боя.

initialContext: {
          view: "Fight",
          fightId: "fightID"
        }

Образец кода:

const { MessageTopics } = frontRowSeat.eventCentreUtils;
const eventCentreInstance = frontRowSeat.eventCentre({
        operator: "operatorIDName",
        sport: "ufc",
        targetModule: "full",
        eventId: "eventID",
        version: "version number",
        targetElementSelector: "#img-arena-event-centre",
        language: "en",
        initialContext: {
          view: "Fight",
          fightId: "fightID"
        }
      });

Обратите внимание на тот факт, что, если вы не хотите разрешать навигацию, а хотите ограничить режим просмотр только определенным боем, это можно сделать, передав параметр «targetModule:» со значением «fight».

Обратите внимание на тот факт, что в указанном выше центре мероприятий отсутствует кнопка «Назад».

Образец кода:

const { MessageTopics } = frontRowSeat.eventCentreUtils;
const eventCentreInstance = frontRowSeat.eventCentre({
        operator: "operatorIDName",
        sport: "ufc",
        targetModule: "fight",
        eventId: "681",
        version: "dev/beac4ea5",
        targetElementSelector: "#img-arena-event-centre",
        language: "en",
        initialContext: {
          view: "Fight",
          fightId: "6667"
        }
      });

Центр мероприятий в режиме «Fightcard»

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

Действия по встраиванию только файткарда, без возможности навигации

Добавьте свой уникальный идентификатор оператора.
Задайте в параметре «targetModule» значение «fightCard» (с учетом регистра).
Введите «eventId», обратите внимание на необходимость использовать уникальный идентификатор параметра «fightCard», т.е., UFC Fight Night, идентификатор мероприятия – «707».

Образец кода:

const { MessageTopics } = frontRowSeat.eventCentreUtils;
const eventCentreInstance = frontRowSeat.eventCentre({
        operator: "operatorIDName",
        sport: "ufc",
        targetModule: "fightCard",
        eventId: "eventID",
        version: "version number",
        targetElementSelector: "#img-arena-event-centre",
        language: "en"
      });

Центр мероприятий в режиме «Matchup»

Ниже приведен порядок действий по имплементации Центра мероприятий в объеме просмотра конкретной пары, без возможности навигации.

Действия по отображению в режиме просмотра «Matchup», без возможности навигации

Добавьте свой уникальный идентификатор оператора.
Задайте в параметре «targetModule» значение «matchup» (с учетом регистра).
Введите «eventId», обратите внимание на необходимость использовать уникальный идентификатор файткарда
Найдите уникальный «fightID», к которому вы бы хотели переходить при первоначальном отображении центра мероприятий, например, 7121
Добавьте параметр «initialContext», состоящий из «view» и «fightId»
- параметр «view» должен иметь значение «matchup», чтобы отображать файткард в режиме просмотра «matchup»
- параметр «fightId» данного боя.

Образец кода:

const { MessageTopics } = frontRowSeat.eventCentreUtils;
const eventCentreInstance = frontRowSeat.eventCentre({
        operator: "operatorIDName",
        sport: "ufc",
        targetModule: "matchup",
        eventId: "eventID",
        version: "version number",
        targetElementSelector: "#img-arena-event-centre",
        language: "en",
        initialContext: {
          view: "matchup",
          fightId: "fightID"
        }
      });

Центр мероприятий в режиме «Tape»

Ниже приведен порядок действий по имплементации Центра мероприятий в объеме просмотра конкретного послужного списка, без возможности навигации.

Действия по отображению в режиме просмотра «Tape», без возможности навигации

Добавьте свой уникальный идентификатор оператора.
Задайте в параметре «targetModule» значение «tape» (с учетом регистра).
Введите «eventId», обратите внимание на необходимость использовать уникальный идентификатор файткарда
Найдите уникальный «fightID», к которому вы бы хотели переходить при первоначальном отображении центра мероприятий, например, 7121
Добавьте параметр «initialContext», состоящий из «view» и «fightId»
- параметр «view» должен иметь значение «tape», чтобы отображать файткард в режиме просмотра «tape»
- параметр «fightId» данного боя.

Образец кода:

const { MessageTopics } = frontRowSeat.eventCentreUtils;
const eventCentreInstance = frontRowSeat.eventCentre({
        operator: "operatorIDName",
        sport: "ufc",
        targetModule: "tape",
        eventId: "eventID",
        version: "version number",
        targetElementSelector: "#img-arena-event-centre",
        language: "en",
        initialContext: {
          view: "tape",
          fightId: "fightID"
        }
      });

Центр мероприятий в режиме «Stats»

Действия по отображению в режиме просмотра «Stats», без возможности навигации

Добавьте свой уникальный идентификатор оператора.
Задайте в параметре «targetModule» значение «stats» (с учетом регистра).
Введите «eventId», обратите внимание на необходимость использовать уникальный идентификатор файткарда
Найдите уникальный «fightID», к которому вы бы хотели переходить при первоначальном отображении центра мероприятий, например, 7121
Добавьте параметр «initialContext», состоящий из «view» и «fightId»
- параметр «view» должен иметь значение «stats», чтобы отображать файткард в режиме просмотра «stats»
- параметр «fightId» данного боя.

Образец кода:

const { MessageTopics } = frontRowSeat.eventCentreUtils;
const eventCentreInstance = frontRowSeat.eventCentre({
        operator: "operatorIDName",
        sport: "ufc",
        targetModule: "stats",
        eventId: "eventID",
        version: "version number",
        targetElementSelector: "#img-arena-event-centre",
        language: "en",
        initialContext: {
          view: "stats",
          fightId: "fightID"
        }
      });

Центр мероприятий в режиме «Striking»

Ниже приведен порядок действий по имплементации Центра мероприятий в объеме просмотра конкретных ударов, без возможности навигации.

Добавьте свой уникальный идентификатор оператора.
Задайте в параметре «targetModule» значение «striking» (с учетом регистра).
Введите «eventId», обратите внимание на необходимость использовать уникальный идентификатор файткарда
Найдите уникальный «fightID», к которому вы бы хотели переходить при первоначальном отображении центра мероприятий, например, 7121
Добавьте параметр «initialContext», состоящий из «view» и «fightId»
- параметр «view» должен иметь значение «striking», чтобы отображать файткард в режиме просмотра «striking»
- параметр «fightId» данного боя.

Образец кода:

const { MessageTopics } = frontRowSeat.eventCentreUtils;
const eventCentreInstance = frontRowSeat.eventCentre({
        operator: "operatorIDName",
        sport: "ufc",
        targetModule: "striking",
        eventId: "eventID",
        version: "version number",
        targetElementSelector: "#img-arena-event-centre",
        language: "en",
        initialContext: {
          view: "striking",
          fightId: "fightID"
        }
      });

Аутентификация запросов потокового видео

Описание страницы (необязательно)

Обзор процесса аутентификации запросов видео

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

frontRowSeat.eventCentre({
  ..
  options: {
    videoPlaybackEnabled: true/false
  }
)

также есть возможность обновления данного значения в ходе выполнения

.emit(OptionsUpdate: {
  videoPlaybackEnabled: true/false
})

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

.on(VideoPlaybackAuthRequest, {
  messageType: 'VideoPlaybackAuthRequest'
})

Оператор должен отправить в ответ маркер аутентификации, руководствуясь при этом существующими рекомендациями, изложенными в документации по потоковой передаче IMG ALC Streaming (IMG ALC Streaming documentation). Важно, чтобы идентификатор оператора и временная отметка совпадали с идентификатором оператора и временной отметкой, которые использовались для создания указанного маркера. Для выполнения интеграции на территории США см. документацию по потоковой передаче IMG ALC US Streaming (IMG ALC US Streaming documentation).

.emit(VideoPlaybackAuthResponse, {
  messageType: 'VideoPlaybackAuthResponse',
  operatorId: '<OPERATOR-ALC-ID>'.
  auth: '<OPERATOR-ALC-TOKEN>',
  timestamp: 1576339325918
})

Матрица поддержки устройств/браузеров

Please find the link below to our Device Browser Support Matrix

https://docs.imgarena.com/event-centres-common-docs/event-centres-common-docs/device-browser-support-matrix

Статические данные

Сначала вам нужно будет создать базу данных либо сформировать перечень «файткардов» (перечень мероприятий) и связанных с соответствующим файткардом/мероприятием боев.

Заголовки, необходимые для использования наших конечных точек:

Чтобы получить перечень «файткардов» либо мероприятий, нажмите на конечную точку файткарда UFC от IMG:

https://dde-api.data.imgarena.com/mma/fightcards

Обратите внимание на значения ключевых параметров, необходимые для данной конечной точки:

Если вы хотите просмотреть только информацию по конкретному файткарду, вы можете передать соответствующий идентификатор мероприятия, например:

https://dde-api.data.imgarena.com/mma/fightcards/{id}

Получить по запросу данные по «файткардам» для заданного диапазона дат можно, передав параметры «dateFrom» и «dateTo». Оба параметра должны представлять собой дату в формате YYYY-mm-dd.

Кроме того, вам понадобится получить перечень связанных с соответствующим файткардом/мероприятием боев. Это можно сделать, передав параметр «EventId» по файткарду через конечную точку «Расписание» по мероприятиям UFC на IMG Arena.

https://dde-api.data.imgarena.com/mma/fightcards/{id}/schedule

Обратите внимание на значения ключевых параметров, необходимые для конечной точки:

Конечная точка расписания файткардов

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

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

URL-адреса конечных точек

Обязательные заголовки

Параметры запроса

Данная конечная точка не требует никаких параметров

Модель ответа:

Объект «Расписание файткарда»

Объект «Время начала»

Объект «Весовая категория»

Объект «Рефери»

Объект «Регалии»

Объект «Красная команда»

Объект «Боец 1»

Объект Показатели

Объект «Синяя команда»

Объект «Тип боя»

Объект «Статус бронирования»

Образец ответа

    {
        "startTime": {
            "status": "EstimatedStart",
            "time": "04:00Z"
        },
        "weightClass": {
            "weight": "156-170",
            "description": "Welterweight",
            "id": 16,
            "obsolete": false,
            "abbreviation": "WW"
        },
        "referee": null,
        "startTimeText": "Follows Previous",
        "fightOrder": 1,
        "fightcardId": 758,
        "accolades": null,
        "fightSeq": 13,
        "redTeam": {
            "fighter1": {
                "reach": 75.0,
                "dob": "1994-05-01",
                "fightsOutOf": "Chechnya, RUS",
                "height": 74,
                "country": "RUS",
                "age": 28,
                "weighInWeight": null,
                "lastName": "Chimaev",
                "stance": "ORTHODOX",
                "firstName": "Khamzat",
                "nickName": "Borz",
                "id": 3457,
                "born": "Benoy-Yurt, Chechnya, RUS",
                "record": {
                    "wins": 11,
                    "losses": 0,
                    "draws": 0,
                    "noContests": 0
                }
            },
            "rank": 3,
            "accolades": null
        },
        "date": "2022-09-10",
        "blueTeam": {
            "fighter1": {
                "reach": 76.0,
                "dob": "1985-04-16",
                "fightsOutOf": "Stockton, California, USA",
                "height": 72,
                "country": "USA",
                "age": 37,
                "weighInWeight": null,
                "lastName": "Diaz",
                "stance": "SOUTHPAW",
                "firstName": "Nate",
                "nickName": null,
                "id": 274,
                "born": "Stockton, California, USA",
                "record": {
                    "wins": 21,
                    "losses": 13,
                    "draws": 0,
                    "noContests": 0
                }
            },
            "rank": null,
            "accolades": null
        },
        "status": "Upcoming",
        "cardSegment": "main",
        "fightId": 7399,
        "fightType": {
            "possibleRounds": 5,
            "description": "5 Rnd (5-5-5-5-5)"
        },
        "bookingStatus": {
            "status": "AutoBooked"
        }
    },

Частота передачи данных по конечным точкам (RESTful)

Чтобы обеспечить себе наличие неизменно актуальной информации, рекомендуем отправлять запросы REST со указанной ниже частотой:

Вид спорта

Конечная точка REST

Частота

UFC

dde-api.data.imgarena.com/mma/fightcards

Каждые 12 часов

UFC

https://dde-api.data.imgarena.com/mma/fightcards/{id}/schedule

Ежечасно, если это касается ожидаемого в ближайшее время файткарда

Обратите внимание на тот факт, что через конечную точку файткрадов UFC будут доступны только следующие 3 или 4 будущих мероприятия. Это связано с тем, что UFC все еще организовывает проходящие бои.

Управление выпусками

Центры мероприятий

Центры мероприятий напрямую интегрированы в веб-сайты и приложения спортивных букмекерских контор. Процесс производства выпусков IMG Arena предназначен для сокращения объема текущей работы по интеграции, о выполнении которой мы просим своих партнеров, с одновременным сохранением возможности поддержки спортивных букмекеров, желающих сделать обновления частью своего внутреннего процесса контроля качества.

Версионирование

Все выпуски публикуются с использованием SEMVER и по шаблону:

<major>.<minor>.<patch>

major: Содержит в себе либо критические изменения, либо существенные обновления пользовательского интерфейса, по которым может потребоваться проверка.

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

patch: Важные исправления ошибок, необходимые только для правильной работы приложения

Спортивная букмекерская контора может встроить ту или иную версию центра мероприятий, которая связана с маршрутом, SEMVER, например,

5.2.1 привязана к тому или иному patch-выпуску, без возможности внесения каких-либо изменений. [не рекомендуется]

5.2.x не предусматривает незначительных изменений, но в качестве обновления включает в себя важные patch-выпуски

5.x не предусматривает серьезных (критических) изменений, но в качестве обновления включает в себя улучшения функций и важные patch-выпуски. [не рекомендуется]

Есть несколько специальных тегов, позволяющих создавать ярлыки для последних версий:

latest последний стабильный выпуск приложения

beta экспериментальное ответвление, используемое для предварительного просмотра предстоящего крупного выпуска (нестабильно)

dev разработческое ответвление (нестабильно)

База поддержки

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

Все изменения будут публиковаться с подробными примечаниями к выпуску.

major (или крупные) выпуски можно ожидать раз в квартал, и с каждым внедрением такового выпуска начинается отсчет 3-месячного срока службы предыдущего.

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

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

Собственная интеграция

Реализация на базе iOS

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

import UIKit
import SwiftUI
import PlaygroundSupport
import WebKit
 
class MyViewController : UIViewController, WKUIDelegate, WKScriptMessageHandler {
    
    var webView: WKWebView!
    var embed = """
    <!DOCTYPE html>
      <html>
        <body>
          <div id="img-arena-event-centre" style="height:400px;width:100%;"></div>
 
          <script src="https://unpkg.com/@img-arena/front-row-seat@0.x/dist/index.umd.js"></script>
 
              <script>
                const { MessageTopics } = frontRowSeat.eventCentreUtils;
                const eventCentreInstance = frontRowSeat.eventCentre({
                  operator: "operatorId",
                  sport: "ufc",
                  targetModule: "full",
                  eventId: "668",
                  version: "4.1.1",
                  targetElementSelector: "#img-arena-event-centre",
                  language: "en"
                });
 
                eventCentreInstance.on(MessageTopics.CONTEXT_UPDATE, function (msg) {
                        // send message to native controls
                    window.webkit.messageHandlers.contextUpdate.postMessage(msg);
                });
              </script>
        </body>
      </html>
    """
    
    
    override func loadView() {
        let webConfiguration = WKWebViewConfiguration()
        webConfiguration.preferences.javaScriptEnabled = true
        webConfiguration.userContentController.add(self, name: "contextUpdate")
        
        webView = WKWebView(frame: .zero, configuration: webConfiguration)
        webView.uiDelegate = self
        let view = webView
        
        self.view = view
    }
    
    override func viewDidLoad() {
        super.viewDidLoad()
        webView.loadHTMLString(embed, baseURL: nil)
    }
    
    func userContentController(_ userContentController:
        WKUserContentController, didReceive message: WKScriptMessage) {
        
        if (message.name == "contextUpdate") {
            // handle update
            print(message.body)
        }
    }
}
 
PlaygroundPage.current.liveView = MyViewController()

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

В приведенном ниже перечне показаны доступные в настоящее время иноязычные версии. По требованию мы можем добавить любую другую иноязычную версию.

Языки

Английский (en_GB)
Болгарский (bg)
Упрощенный китайский (zh_CN)
Традиционный китайский (zh_TW)
Хорватский (hr)
Чешский (cs)
Датский (da)
Нидерландский (nl)
Эстонский (et)
Французский (fr)
Немецкий (de)
Греческий (el)
Хинди (hi)
Венгерский (hu)
Индонезийский (id)
Итальянский (it)
Японский (ja)
Корейский (ko)
Норвежский (no)
Польский (pl)
Португальский (pt)
Португальский (бразильский вариант) (pt_BR)
Румынский/молдавский (ro)
Русский (ru)
Словацкий (sk)
Словенский
Испанский, кастильский вариант (es)
Испанский, латиноамериканский вариант (es_419)
Шведский (sv)
Телугу (te)
Тайский (th)
Вьетнамский (vi)

Часто задаваемые вопросы

Ознакомьтесь с приведенным ниже перечнем часто задаваемых вопросов. Надеемся, он поможет вам более эффективно интегрировать центр мероприятий UFC:

С чего мне начать процесс интеграции?

Рекомендуем вам сначала попытаться подключиться к конечной точке /fightcard и получить данные по параметру «identifier», т.е., идентификатор мероприятия, а также по связанному с ним параметру «fightcardName», т.е., имя мероприятия по eventID.

Т.е., вы можете подключиться к конечной точке /fightcard и передать диапазон дат для соответствующего года. https://dde-api.imggaming.com/mma/fightcards?dateFrom=2022-01-01&dateTo=2022-12-31

Т.е, «identifier»: 703 - «fightcardName»: «UFC 271: Adesanya vs. Whittaker»

Как мне загрузить центр мероприятий UFC через песочницу:

Подключитесь к конечной точке /fightcard, и она предоставит по запросу перечень мероприятий в диапазоне +/- 7 дней, получите «identifier» по мероприятию, для которого вы хотите загрузить центр мероприятий. Затем обновите в интеграционной библиотеке eventId со значением «identifier»,

т.е., при передаче идентификатора мероприятия: 703 загружается UFC 271: Адесанья против Уиттакера.

Пример песочницы:

https://codesandbox.io/s/full-fight-card-forked-ow2mmu

Как мне сформировать статические данные?

Рекомендуем сначала запросить данные с конечной точки /fightcard и просмотреть их. Обратите внимание на необходимость передать данные по параметрам «dateFrom» и «dateTo», чтобы получить в ответ информацию о мероприятиях, проходящих в пределах определенного диапазона дат, т.е., получить в ответ информацию обо всех мероприятиях UFC, начиная с 2022 года и заканчивая 2022 годом, т.е., https://dde-api.imggaming.com/mma/fightcards?dateFrom=2022-01-01&dateTo=2022-12-31

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

После этого вы сможете приступить к сопоставлению мероприятий.

Как мне сопоставить идентификатор IMG Arena с внутреними системами?

Для выполнения сопоставления на уровне мероприятия рекомендуем вам запросить данные с конечной точки /fightcard и использовать параметры «fightcardName», «startDate», «city», а также применить анализатор нечеткой логики для согласования мероприятий, поскольку имя файткарда и дата начала будут универсальными. Обратите внимание на необходимость сохранить «identifier» в ваших системах, так как данный идентификатор будет использоваться в качестве EventID в интеграционной библиотеке.

После выполнения сопоставления на уровне файткарда вы можете приступить к выполнению сопоставления на уровне боя. Это можно сделать, запросив данные с конечной точки /schedule, т.е., https://dde-api.imggaming.com/mma/fightcards/703/schedule С данной конечно точки рекомендуем запрашивать данные по параметрам «fightId», «fightOrder», «fightSeq», а также «redTeam» и «blueTeam»

Какие статические данные мне следует сохранять и зачем?

с конечной точки /fightcard:

Параметр

Определение

Цель

fightcardName

Название файткарда/мероприятия

Название мероприятия является универсальным и поможет при выполнении сопоставления с внутренними системами.

identifier

уникальный идентификатор мероприятия

Данный идентификатор будет использоваться в качестве «eventId» в интеграционной библиотеке.

venue

название стадиона, где проходит мероприятие

Полезная информация

startDate

дата начала турнира

Вы можете использовать это для выполнения сопоставления соответствующего мероприятия

startTime

время начала турнира/первого боя.

Помочь с определением того, когда на вашем веб-сайте должен отображаться центр мероприятий.

--> формируемые статические данные:

-Название мероприятия, -Когда оно стартует -Уникальный идентификатор мероприятия от IMG Arena

Получив эту информацию, вы можете приступить к формированию статических данных для конкретного мероприятия:

С конечной точки /fightcard/{}/schedule

Параметр

Определение

Цель

startTime

ожидаемое время начала боя.

Обратите внимание, что для указания времени используются заполнители.

weightClass

весовая категория боя

Полезная информация, которая поможет при выполнении сопоставления.

fightSeq

предоставляет в ответ данные по порядковому номеру, под которым запланирован бой, т.е., «fightSeq»: 1 будет указывать на то, что это будет первый бой вечера

Помогает с упорядочиванием боев

cardSegment

определяет, в какой части файткарда находится бой

Полезная информация, которая поможет при выполнении сопоставления

redTeam

Кто находится в красном углу

Полезная информация, которая поможет при выполнении сопоставления

blueTeam

Кто находится на синем углу

Полезная информация, которая поможет при выполнении сопоставления

fightId

уникальный идентификатор боя

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

--> формируемые статические данные:

-Порядок проведения боев в течение вечера -Состав на мероприятие, т.е., RedTeam (красная команда) против blueTeam (синей командой), и его уникальный идентификатор боя (fightID)

Как мне узнать, когда стартует мероприятие?

Для того, чтобы определить, когда стартует соответстующее, вы можете использовать параметр /startTime, получаемый по запросу с конечной точки /fightcard.

Когда у меня появиться возможность отображения центра мероприятий UFC?

В зависимости от производимой вами интеграции и того, какие еще продукты функционируют на вашем веб-сайте, возможность отображения центра мероприятий у вас появится либо в начале недели перед мероприятием, т.е., в понедельник, либо, если у вас есть раздел «в игре», в момент, когда стартует мероприятий. Это действительно зависит от вашего веб-сайта.

Когда мне следует прекратить отображение центра мероприятий UFC?

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

Как мне узнать, производится ли по мероприятию потоковая передача:

Потоковая передача нами производится по всем мероприятиям UFC.

Когда начинается и заканчивается потоковая передача боя?

На данный момент для UFC осуществляеся 1 длительная потоковая передача. Для центра мероприятий она разбивается на отдельные бои. Потоковая передача начнется в тот момент, когда будут выходить участники, и прервется, когда будет объявлен победитель.

Как мне передавать проблемы для решения на более высоком уровне?

Со всеми вопросами, возникающими в процессе интеграции, обращайтесь в отдел по вопросам интеграции/CSM.

Как только вы выйдете в рабочий режим: обращайтесь со всеми вопросами в нашу службу поддержки: support@openbet.com.

Наша служба поддержки работает круглосуточно 365 дней в году

Какие есть договорные уровни обслуживания?

В части оперативности оказания поддержки:

15 минут по первому ответу
15 минут по последующему обновлению
30-минутные интервалы по любым дальнейшим обновлениям после этого

Каковы поддерживаемые размеры iframe?

Рекомендуем вам использовать минимальную высоту в 362 пикселя и ширину в 320 пикселей. Уменьшение высоты может привести к смещению текста и кнопок.

Каково качество потока?

В настоящее время с учетом имеющегося права на трансляцию все наши потоковые данные передаются в формате 360p (728 Кбит/с)

Как мне выполнить геоблокировку потоковой передачи?

Геоблокировка потоковой передачи осуществляется на уровне оператора со стороны IMG Arena. Для получения дополнительной информации по данному вопросу советуем вам поговорить со своим персональным менеджером по разработке клиентских решений.

Каким образом мне протестировать потоковую передачу?

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

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

Можно ли получить перечень бойцов?

У нас есть база данных, в которой содержится основная информацию по всем бойцам. Получить эти данные вы можете через доступ к следующей конечной точке: https://dde-api.imggaming.com/mma/fighters

Если вам понадобится дополнительная информация, свяжитесь с отделом по вопросам интеграции IMG Arena.

Какие параметры я могу настраивать в iframe?

Нет, настраивать параметры центра мероприятий UFC мы не разрешаем, поскольку придерживаемся официального брендинга UFC. Мы поддерживаем темную и светлую тематику.

Часто задаваемые вопросы

С чего мне начать процесс интеграции?

Т.е, «identifier»: 703 - «fightcardName»: «UFC 271: Adesanya vs. Whittaker»

Как мне загрузить центр мероприятий UFC через песочницу:

т.е., при передаче идентификатора мероприятия: 703 загружается UFC 271: Адесанья против Уиттакера.

Пример песочницы:

https://codesandbox.io/s/full-fight-card-forked-ow2mmu

Как мне сформировать статические данные?

После этого вы сможете приступить к сопоставлению мероприятий.

Как мне сопоставить идентификатор IMG Arena с внутреними системами?

Какие статические данные мне следует сохранять и зачем?

с конечной точки /fightcard:

Параметр

Определение

Цель

fightcardName

Название файткарда/мероприятия

identifier

уникальный идентификатор мероприятия

Данный идентификатор будет использоваться в качестве «eventId» в интеграционной библиотеке.

venue

название стадиона, где проходит мероприятие

Полезная информация

startDate

дата начала турнира

Вы можете использовать это для выполнения сопоставления соответствующего мероприятия

startTime

время начала турнира/первого боя.

Помочь с определением того, когда на вашем веб-сайте должен отображаться центр мероприятий.

--> формируемые статические данные:

-Название мероприятия, -Когда оно стартует -Уникальный идентификатор мероприятия от IMG Arena

Получив эту информацию, вы можете приступить к формированию статических данных для конкретного мероприятия:

С конечной точки /fightcard/{}/schedule

Параметр

Определение

Цель

startTime

ожидаемое время начала боя.

Обратите внимание, что для указания времени используются заполнители.

weightClass

весовая категория боя

Полезная информация, которая поможет при выполнении сопоставления.

fightSeq

Помогает с упорядочиванием боев

cardSegment

определяет, в какой части файткарда находится бой

Полезная информация, которая поможет при выполнении сопоставления

redTeam

Кто находится в красном углу

Полезная информация, которая поможет при выполнении сопоставления

blueTeam

Кто находится на синем углу

Полезная информация, которая поможет при выполнении сопоставления

fightId

уникальный идентификатор боя

--> формируемые статические данные:

Как мне узнать, когда стартует мероприятие?

Когда у меня появиться возможность отображения центра мероприятий UFC?

Когда мне следует прекратить отображение центра мероприятий UFC?

Как мне узнать, производится ли по мероприятию потоковая передача:

Потоковая передача нами производится по всем мероприятиям UFC.

Когда начинается и заканчивается потоковая передача боя?

Как мне передавать проблемы для решения на более высоком уровне?

Со всеми вопросами, возникающими в процессе интеграции, обращайтесь в отдел по вопросам интеграции/CSM.

Как только вы выйдете в рабочий режим: обращайтесь со всеми вопросами в нашу службу поддержки: support@openbet.com.

Наша служба поддержки работает круглосуточно 365 дней в году

Какие есть договорные уровни обслуживания?

В части оперативности оказания поддержки:

15 минут по первому ответу
15 минут по последующему обновлению
30-минутные интервалы по любым дальнейшим обновлениям после этого

Каковы поддерживаемые размеры iframe?

Каково качество потока?

Как мне выполнить геоблокировку потоковой передачи?

Каким образом мне протестировать потоковую передачу?

Можно ли получить перечень бойцов?

Если вам понадобится дополнительная информация, свяжитесь с отделом по вопросам интеграции IMG Arena.

Какие параметры я могу настраивать в iframe?

Конечная точка файткардов

Данная конечная точка позволяет получить информацию обо всех файткардах, как прошлых так и нынешних.

URL-адреса конечных точек

Все турниры:

https://dde-api.data.imgarena.com/mma/fightcards

Если вы хотите просмотреть только информацию по конкретному файткарду:

https://dde-api.data.imgarena.com/mma/fightcards/{id}

Обязательные заголовки

Ключевой параметр

Значение

application/vnd.imggaming.dde.api+json;version=1

Content-Type

application/json

Authorization

Bearer eyvhaoudfgpdfgo*

Параметры запроса

Если направить запрос на данную конечную точку с одновременным указанием параметров «dateFrom» и «dateTo», то в овтет будут получены данные только по файткардам, входящим в пределы определенного диапазона дат. Оба параметра должны представлять собой дату в формате YYYY-mm-dd.

Модель ответа

Объект «турнир»

Имя поля

Тип

Описание

fightcardName

строка

название файткарда

identifier

целое число

идентификатор файткарда

countryCode

строка

код страны, в которой проходит файткард

location

строка

страна, в которой проходит файткард

state

строка

штат/провинция, где проходит файткард

city

строка

город, в котором проходит файткард

venue

строка

название места, в котором проходит файткард

venueId

целое число

идентификатор места, в котором проходит файткард

startDate

дата

дата начала файткарда

endDate

дата

дата окончания файткарда

startTime

время

время, когда стартует файткард, в формате местного времени + смещение от всемирного координированного времени (UTC)

utcOffset

целое число

смещение от UTC часового пояса, в котором проходит файткард

year

целое число

год, в котором проходит файткард

sport

строка

вид спорта, связанный с файткардом, в данном случае ММА

numberOfFights

целое число

количество боев по файткарду

scheduleResource

строка

ссылка на URL-адрес API, по которому доступно расписание данного файткарда

status

строка

статус данного файткарда.

Возможные значения: «active» / «canceled».

booking Status

объект

информация о том, забронирован ли файткард

comments

массив

последние комментарии к статусу файткарда

numberOfFightsBookedToday

целое число

количество боев, забронированных с помощью функции DDE в соответствии с вашим лицензионным соглашением

eventSummary

объект

сводные данные по предварительным и основным кардам, т.е., начало и количество боев

attendance

целое число

общее число присутствующих болельщиков

competitions

массив

Объект «Сводные данные по боям»

Каждый файткард будет разбит на три карда; «main», «prelims1» и «prelims 2». Данный объект будет сообщать дату боя и три указанных карда.

Имя поля

Тип

Описание

fights

целое число

количество боев в данном конкретном файткарде

startTime

время

предполагаемое время старта данного конкретного карда

Объект «Статус бронирования»

Имя поля

Тип

Описание

status

строка

Текущий статус бронирования мероприятия с помощью функции DDE

Объект «Состязания»

Имя поля

Тип

Описание

organisation

строка

организация, проводящая данный конкретный файткард

startDate

дата

дата начала файткарда

endDate

дата

дата завершения файткарда

licensingProperty

строка

DDE-объект, лицензирующий данный конкретный файткард

Образец ответа

{
    "city": "Las Vegas",
    "startTime": "22:00",
    "location": "USA",
    "endDate": "2022-09-10",
    "fightcardName": "UFC 279: Chimaev vs. Diaz",
    "state": "Nevada",
    "identifier": 758,
    "numberOfFightsBookedToday": 13,
    "year": 2022,
    "sport": "MMA",
    "venueId": "50",
    "scheduleResource": "/mma/fightcards/758/schedule",
    "countryCode": "USA",
    "status": "active",
    "numberOfFights": 13,
    "eventsSummary": {
        "2022-09-10": {
            "prelims1": {
                "fights": 4,
                "startTime": "00:00"
            },
            "prelims2": {
                "fights": 4,
                "startTime": "22:00"
            },
            "main": {
                "fights": 5,
                "startTime": "02:00"
            }
        }
    },
    "utcOffset": 0,
    "attendance": null,
    "startDate": "2022-09-10",
    "bookingStatus": {
        "status": "AutoBooked"
    },
    "venue": "T-Mobile Arena",
    "competitions": [
        {
            "organisation": "UFC",
            "startDate": "2022-09-10",
            "endDate": "2022-09-10"
        }
    ],
    "comments": []
}

UFC 5.0 (Russian)

Инструкция по интеграции оператора

Библиотека процесса интеграции

Порядок действий

Целевой элемент

Авторизация

Инициализация

Подписка

Генерирование

Языки

Тематика

Параметры

Модули Центра мероприятий UFC

Модульное построение

Темы сообщений

Рукопожатие не состоялось

Обновление контекста

Весь файткард

Весь Центр мероприятий

Действия по имплементации всего Центра мероприятий:

Центр мероприятий в режиме «Fight»

Центр мероприятий в режиме «Fightcard»

Действия по встраиванию только файткарда, без возможности навигации

Центр мероприятий в режиме «Matchup»

Действия по отображению в режиме просмотра «Matchup», без возможности навигации

Центр мероприятий в режиме «Tape»

Действия по отображению в режиме просмотра «Tape», без возможности навигации

Центр мероприятий в режиме «Stats»

Действия по отображению в режиме просмотра «Stats», без возможности навигации

Центр мероприятий в режиме «Striking»

Аутентификация запросов потокового видео

Обзор процесса аутентификации запросов видео

Матрица поддержки устройств/браузеров

Статические данные

Конечная точка расписания файткардов

URL-адреса конечных точек

Обязательные заголовки

Параметры запроса

Модель ответа:

Объект «Расписание файткарда»

Объект «Время начала»

Объект «Весовая категория»

Объект «Рефери»

Объект «Регалии»

Объект «Красная команда»

Объект «Боец 1»

Объект Показатели

Объект «Синяя команда»

Объект «Тип боя»

Объект «Статус бронирования»

Образец ответа

Частота передачи данных по конечным точкам (RESTful)

Управление выпусками

Центры мероприятий

Версионирование

База поддержки

Собственная интеграция

Реализация на базе iOS

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

Часто задаваемые вопросы

С чего мне начать процесс интеграции?

Как мне загрузить центр мероприятий UFC через песочницу:

Как мне сформировать статические данные?

Как мне сопоставить идентификатор IMG Arena с внутреними системами?

Какие статические данные мне следует сохранять и зачем?

с конечной точки /fightcard:

С конечной точки /fightcard/{}/schedule

Как мне узнать, когда стартует мероприятие?

Когда у меня появиться возможность отображения центра мероприятий UFC?

Когда мне следует прекратить отображение центра мероприятий UFC?

Как мне узнать, производится ли по мероприятию потоковая передача:

Когда начинается и заканчивается потоковая передача боя?

Как мне передавать проблемы для решения на более высоком уровне?

Какие есть договорные уровни обслуживания?

Каковы поддерживаемые размеры iframe?

Каково качество потока?

Как мне выполнить геоблокировку потоковой передачи?

Каким образом мне протестировать потоковую передачу?

Можно ли получить перечень бойцов?

Какие параметры я могу настраивать в iframe?