Image Image

Первый UI плагин (preview)

Создание плагина на основе шаблона

Сейчас мы разработаем базовый UI плагин для публикации на платформе preview MEF.DEV. Для разработки этого плагина необходимы только знания написания кода на Angular

Следуйте инструкциям и узнайте, как создать свой первый плагин, который в дальнейшем может быть дополнен для использования данных Backend плагинов и реализации Вашей бизнес-логики.

Шаг 1. Установка Node.js

Установите LTS-версию Node.js:

  • Загрузите Node.js
  • Откройте командную строку - это терминал в macOS и Linux, или командная строка в Windows.
  • Запустите node -v. Если Вы получаете номер версии как результат, значит был установлен node.js. Это должно выглядеть приблизительно так: v12.18.4

Шаг 2. Настройка IDE

Ми рекомендуем использовать Atom или Visual Code Studio в качестве IDE.

Шаг 3. Сделайте копию тестового проекта из репозитория

// ссылка на репозиторий https://github.com/mef-dev/tutorial-ui-plugin

Шаг 4. Настройка локальной тестовой среды

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

  • Откройте IDE
  • Перейдите в Файл => Открыть
  • Откройте папку tutorial-ui-plugin
  • Перейдите в каталог tutorial-ui-plugin cd / your-dir / tutorial-ui-plugin
  • Запустите npm install, чтобы установить все необходимые пакеты. Это может занять какое-то время
  • Запустите ng serve или npm start для запуска локального тестового веб-сервера, по умолчанию Вы можете увидеть проект в браузере localhost:4200 (если возникнут проблемы с вызовом ng из терминала по причине политики безопасности, то может помочь вызов команды Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy Unrestricted)

Обзор проекта

Структура проекта довольно гибкая, основные файлы проекта находятся в директории plugin. Для запуска проекта локально используется main.ts, для билда плагина перед публикацией main-plugin.ts. Конфигурация angular.json достаточна для всех действий по подготовке и публикации плагина.

Шаг 1. Создание названия плагина

Для початку внесем изменения в файл package.json

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

Шаг 2. Создание страницы плагина

Откройте браузер файлов IDE и перейдите до библиотеки компонент plugin/components.

Создание новой компоненты может быть создано вручную hello-world.component.ts или из терминала ng g c hello-world. Этот файл используется для реализации всей необходимой логики.

В декораторе @Component для корректной работы на платформе используется template и styles для отображения Вашего интерфейса пользователя и стилизации интерфейса пользователя соответственно. Добавьте Вашу ново-созданный компонент в список declarations NgModule , если Вы создавали ее как файл в директории Вашего плагина, если же была использована команда, то компонент автоматически будет добавлен в соответствующий раздел декоратора модуля

Шаг 3. Навигация

Далее мы применим определенную логику для перехода в наш плагин. Ми создадим для этого новый маршрут.

  • Откройте src plugin/plugin-routing.module.ts.
  • Добавьте новый объект в массив children, который принадлежит объекту маршрутов плагина
  • Добавьте свойство path и установите его значение
  • Добавьте свойство компоненты и установите для него значение тип HelloWorldComponent
  • Импортируйте компонент
  • Придерживайтесь указанной структуры, чтобы на платформе были корректно интерпретированы маршруты Вашего плагину.
  • Далее запускаем проект - получаем следующий результат

Шаг 4. Сборка плагина

Теперь можем собрать наш простейший (базовый) плагин и загрузить его на платформу. В терминале вызываем команду npm run build - результатом выполнения этого скрипта будет файл app-hello-world-1.0.0.bundle.js - где app-hello-world - name в package.json, 1.0.0 - version в package.json.

Он находится в директории external_plugins/app-hello-world-1.0.0 в корне проекта.

Публикация UI плагину на платформе

Для этого необходимо быть зарегистрированным пользователем платформы с ролью Developer или Root - если Ви не зарегистрированы, то во время первого входа на платформу по адресу https://preview.mef.dev Вам буде предоставлена возможность пройти регистрацию.

После захода на платформу:

  • Перейдите в список Ваших плагинов, нажмите редактировать – “колесико” на карточке с общей информацией о плагине
  • Выберите для Вашего плагина тип UI

    У Вас появится блок для описания Вашего фронтового плагина.
  • Заполните информацию про Ваш фронтовый плагин

    plugin-uiname - name - з package.json
    modulename название модуля из plugin.module.ts в директории
  • добавьте роут который Вы определили как доступный во время разработки плагина
  • загрузите на платформу app-hello-world-1.0.0.bundle.js
  • После успешной загрузки выберите из списка версию и нажмите “Сохранить”. Плагин появится для предварительного просмотра.