Быстрый старт

В данном разделе представлена пошаговая инструкция по развертыванию проекта кастомизации системы с минимальным количеством действий. Все изменения выполняются на чистом JavaScript и подключаются напрямую к приложению, что позволяет быстро ознакомиться с SDK и протестировать собственные решения. Если есть необходимость использовать TypeScript, JSX и механизмы сборки, то следует обратиться к разделу Продвинутый старт

В качестве примера будет реализован проект, добавляющий декларацию точки расширения Universe.App.UERightHeaderItem в продуктовое приложение.

Шаг 1. Настройка окружения

1. Установить необходимое окружение:

   • Docker — для запуска приложения пользовательского интерфейса в docker-контейнере

2. Выполнить вход в Docker-репозиторий:

   docker login repository.universe-data.ru
   Копировать

   Совет

   Для получения имени пользователя и пароля для доступа к Docker-репозиторию необходимо обратиться в службу поддержки

Шаг 2. Создание проекта

Проект будет содержать простую структуру файлов:

<project-root>
├─ customer.json
└─ custom.js
Копировать

1. Создать внешний модуль <project-root>/custom.js:

   const {Platform, Vendor} = window.Universe;
   const {Uikit, Locale} = Platform;
   
   Locale.i18n.addResourceBundle(Locale.Locales.Ru, {HeaderButton: {text: 'Нажми меня!'}});
   Locale.i18n.addResourceBundle(Locale.Locales.En, {HeaderButton: {text: 'Click me!'}});
   
   export class HeaderButton extends Vendor.React.Component {
       render() {
           return (
               Vendor.React.createElement(
                   Uikit.Button,
                   {intent: Uikit.INTENT.DANGER},
                   Locale.i18n.t('HeaderButton>text')
               )
           );
       }
   }
   
   export default {
       userExits: [
           {
               type: 'RightHeaderItem',
               moduleId: 'uniqueId',
               active:true,
               system: false,
               resolver: () => true,
               meta: {
                   order: 1,
               },
               component: HeaderButton,
           }
       ]
   };
   Копировать

2. Создать конфигурационный файл <project-root>/customer.json:

   {
       "APP_TYPE": [],
       "serverUrl": "/universe-backend/api/",
       "EXTERNAL_MODULES": [
           "./CUX/custom.js"
       ]
   }
   Копировать

   В свойстве EXTERNAL_MODULE указываются пути к внешним модулям, относительно корневой директории приложения в docker-контейнере: /usr/share/nginx/html/.

Шаг 3. Запуск

1. Запустить docker-контейнер приложения:

   docker run repository.universe-data.ru/dis/unidata-dg/frontend:v2.15.0 \
       -p '80:80' \
       -v ./customer.json:/usr/share/nginx/html/customer.json \
       -v ./custom.js:/usr/share/nginx/html/CUX/custom.js\
       -e BACKEND_ADDRESS=$BACKEND_ADDRESS 
   Копировать

   Где $BACKEND_ADDRESS - Адрес запущенного бэкенда системы (например: http://localhost:8080)

   Внутри docker-контейнера:

   • /usr/share/nginx/html/customer.json - Путь к файлу конфигурации приложения
   • /usr/share/nginx/html/CUX/ - Рекомендуемая директория для расположения внешних модулей

2. Приложение будет доступно по адресу: http://localhost. После запуска приложения, добавленную точку расширения можно увидеть в правом углу шапки.