Перший UI плагін (preview)

Створення плагіну на підставі шаблону

Зараз ми розробимо базовий UI плагін для публікації на платформі preview MEF.DEV. Для розробки цього плагіна необхідні лише знання щодо написання коду на Angular

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

Крок 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 - якщо Ви не зареєстровані то під час логіну до платформи за адресою https://preview.mef.dev Вам буде надано можливості здійснити реєстрацію.

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

  • Перейдіть до переліку ваших плагінів, натисніть редагувати - коліщатко на картці з загальною інформацію про плагін
  • Оберіть для вашого плагіну тип UI

    У вас з’явиться блок для опису вашого плагіну для фронта.
  • Заповніть інформацію про ваш фронтовий плагін

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