Создание расширения

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

В этом руководстве вы скомпилируете пример расширения из исходного кода и загрузите его в Azot.

Что вы узнаете

После завершения этого руководства вы сможете:

• Настроить окружение для разработки расширений Azot.
• Скомпилировать расширение из исходного кода.
• Перезагрузить расширение после внесения в него изменений.

Предварительные требования

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

• Git, установленный на вашем локальном компьютере.
• Локальное окружение для разработки на Node.js.
• Редактор кода, например Visual Studio Code.

INFO

Предполагается, что вы уже знакомы с JavaScript и TypeScript. Не беспокойтесь, вам не нужно быть экспертом. Если вам нужна помощь с основами, ознакомьтесь с Руководством по TypeScript и Руководством по JavaScript от Mozilla.

Шаг 1: Загрузите пример расширения

На этом шаге вы загрузите пример расширения.

Пример расширения, который вы будете использовать в этом руководстве, доступен в репозитории GitHub.

1. Откройте окно терминала и перейдите в рабочий каталог вашего проекта.

   cd path/to/projects

2. Клонируйте пример расширения с помощью Git.

   git clone https://github.com/azot-labs/azot-extension-example.git

   Шаблонный репозиторий GitHub

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

   Не забудьте использовать URL вашего собственного репозитория при клонировании примера расширения.

Шаг 2: Сборка расширения

На этом шаге вы скомпилируете пример расширения, чтобы Azot мог его загрузить.

1. Перейдите в каталог расширения.

   cd azot-extension-example

2. Установите зависимости.

   npm install

3. Скомпилируйте исходный код. Следующая команда будет постоянно выполняться в терминале и пересобирать расширение при изменении исходного кода.

   npm run dev

Обратите внимание, что в каталоге расширения теперь есть файл dist/main.js, который содержит скомпилированную версию расширения.

Шаг 3: Включите расширение

Чтобы загрузить расширение в Azot, его сначала нужно установить.

В Azot CLI выполните следующую команду для установки расширения.

azot install /path/to/azot-extension-example

INFO

Если вы используете Azot CLI v4 или старше, вам следует вызывать streamyx вместо azot.

Теперь вы готовы использовать расширение в Azot. Далее мы внесем некоторые изменения в расширение.

Шаг 4: Обновите информацию о расширении

На этом шаге вы переименуете расширение, обновив информацию о нем в файле package.json. Файл package.json содержит информацию о вашем расширении, такую как его имя и описание.

1. Откройте package.json в вашем редакторе кода.
2. Измените name на уникальный идентификатор, например, "hello-world".
3. Измените config.title на понятное для человека название, например, "Привет мир".
4. Измените config.icon на ссылку с иконкой вашего расширения.
5. Заполните также поля author и funding вашими личными данными.
6. Переименуйте папку расширения, чтобы она соответствовала его имени (уникальному идентификатору).
7. Переустановите расширение, чтобы загрузить новые изменения из папки расширения.

azot uninstall /path/to/azot-extension-example
azot install /path/to/hello-world

Отобразите установленные расширения и обратите внимание, что имя расширения было обновлено в соответствии с внесенными вами изменениями.

azot extensions

Шаг 5: Обновите исходный код

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

1. Откройте main.ts в вашем редакторе кода.

2. Используя Azot из глобального контекста, предоставляемого Azot API, добавьте следующий код.

export default defineExtension({
  // ...

  async fetchContentMetadata(url, options) {
    const { streamFormat } = await Azot.prompt({
      fields: { streamFormat: { label: 'Введите желаемый формат потока (MPD/M3U8)' } },
    });
    // ...
  },
});

В Azot CLI выполните команду с URL-адресом, который может обработать расширение.

azot https://bitmovin.com/demos/stream-test

Теперь вы можете видеть прогресс скачивания после получения метаданных.

Заключение

В этом руководстве вы создали свое первое расширение для Azot, используя TypeScript API. Вы изменили расширение и перезагрузили его, чтобы отразить изменения внутри Azot.