SAP + ReactJS

Опубликовано автором

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

В данной заметке рассмотрим тестовое приложение на UI5 веб компонентах, задеплоим его в систему и добавим приложение на лаунчпад.

Стоит просто посмотреть на эту картинку, чтобы понять причину набирающего обороты процесса миграции с SapUI5 на ReactJS:

процент вопросов на Stack Overflow в разрезе фраемворков

Ребята из SAP’а тоже прекрасно понимают эту тенденцию и разрабатывают свою библиотеку веб-компонентов для разных фреймворков, в число которых входит и ReactJS. Посмотрим что она из себя представляет!

Настроим окружение для разработки под ReactJS.

1. Visual Studio Code.

В качестве редактора для разработки будем использовать VS Code. Скачаем его по ссылке https://code.visualstudio.com/ и установим.

Скачиваем VS Code

2. Node.js

Для расширения возможностей JavaScript скачаем последнюю версию Node.js — https://nodejs.org/.

Скачиваем Node.js

Установим.

3. Yarn

Так же нам понадобиться менеджер пакетов Yarn.

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

npm install --global yarn

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

yarn -v
yarn -v

4. Git

Скачаем и установим Git — https://git-scm.com/downloads.

Git

Ты молодец!

Создадим простое React приложение.

Лучший способ создать свое первое приложение на React — Create React App!

Запустим create react app в терминале:

npx create-react-app nickcode-react

По итогу получим сообщение об успешной установке create react app:

Happy hacking!

Перейдем в папку с проектом:

cd nickcode-react

И запустим проект:

yarn start

В браузере должна открыться страничка http://localhost:3000:

React App

Добавим в проект UI5 Web Components.

Добавим ранее созданный проект nickcode-react в рабочую область VS Code:

Откроем файл /src/App.js:

App.js

В терминале запускаем установку пакета веб-компонентов:

yarn add @ui5/webcomponents --save

Если получаем ошибку:

Невозможно загрузить файл C:\Users\Nick\AppData\Roaming\npm\yarn.ps1, так как выполнение сценариев отключено в этой системе:

то запускаем в терминале команду:

Set-ExecutionPolicy RemoteSigned

И повторяем:

yarn add @ui5/webcomponents --save

После успешной установки в App.js импортируем кнопку:

import "@ui5/webcomponents/dist/Button.js";

И используем эту кнопку для вывода на экран:

<ui5-button>Hello world from Nickcode!</ui5-button>

Смотрим что получилось на странице:

UI5 button

Отлично, вот и наша кнопка!

Посмотрим на UI5 Web Components React Sample Application.

Давайте пойдем чуть дальше и запустим у себя так называемое UI5 Web Components React Sample Application приложение. Это обычный todo list с использованием ui5 веб компонентов.

Скопируем приложение с репозитария https://github.com/SAP-samples/ui5-webcomponents-sample-react:

git clone https://github.com/SAP-samples/ui5-webcomponents-sample-react.git

Перейдем в папку с проектом:

cd ui5-webcomponents-sample-react

Установим все зависимости, для этого выполним команду:

yarn

И после загрузки пакетов запускаем приложение:

yarn start

Откроется UI5 Web Components React Sample Application:

UI5 Web Components React Sample Application

Перенесем ReactJS приложение в SAP

А теперь самое интересное — задеплоим react приложение в Sap!

В качестве системы я запущу свой локальный sap.

В консоле запускаем создание билда приложения:

yarn build

В папке с проектом появится новая папка build с нашим приложением:

build UI5 Web Components React Sample Application

Запустим SAP Web IDE.

Создадим новый проект:

Совершенно не имеет значения как проект назвать. В моем случае назову его Main.

После создания удаляем из папки проекта всё кроме Component.js и manifest.json:

Перенесем содержимое папки build (всё кроме файла manifest.json) в папку webapp (можно найти в папке с SAP Web IDE. Например, webide\eclipse\serverworkspace\Ni\Nick\OrionContent\Main\webapp):

И задеплоим получившийся проект в систему:

Деплоим новое приложение
Выбираем название и пакет, пишем описание
Новый запрос

После деплоя запустим приложение по адресу https://vhcalnplci:44300/sap/bc/ui5_ui5/sap/z_todo_react/index.html:

React приложение запустили в SAP

Добавим плитку для React приложения

Для более полноценного окончания этой статьи сделаем еще одну вещь — добавим плитку на лаунчпад для только что залитого react приложения.

Идем в транзакцию SE93, где запускаем транзакцию LPD_CUST:

LPD_CUST
Редактировать
Создадим новую папку (New Folder) React

В новой папке создадим новое приложение (New Application):

Обратим внимание на выделенные красным поля:

  • Link Text — Название приложения.
  • Application Type — URL.
  • URL — Укажем путь до нашей BSP (/sap/bc/ui5_ui5/sap/z_todo_react/index.html).
  • Application Alias — Придумаем название для приложение, которое потом будем использовать в выводе плитки.
  • Additional Information — Запишем в поле значение managed=FioriWave1, что позволит открывать приложение внутри Shell лаунчпада, иначе приложение будет открываться точно так же по прямой ссылке, как мы делали чуть выше.
  • Navigation Mode — INPLACE.

Сохраняем. Идем в транзакцию SE93, где выполняем транзакцию /UI2/FLPD_CUST:

/UI2/FLPD_CUST

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

В Каталогах ищем нужный каталог, в моем случае это SAP_BASIS_BC_EPM_PUR_TEST, переходим на вкладку TargetMapping (присвоение) и жмем кнопку Create Target Mapping (создать присвоение цели):

Заполняем поля в соответствии с тем, как мы заполняли поля в транзакции LPD_CUST.

  • Semantic Object — CustomApplication.
  • Action — ui5Components.
  • Application Type — выбираем SAP Fiori App using LPD_CUST.
  • Launchpad Role — DEMO
  • Launchpad Instance — DEMO_APP
  • Application Alias — UI5_COMPONENTS

Жмем внизу кнопочку Save.

Переходим на вкладку Tiles (плитки) и жмем Create Tile (создать плитку):

Create Tile

На следующем экране выбираем App Launcher — Static:

И заполняем форму создания плитки в соответствии с тем, как мы заполняли форму создания присвоения :

  • Title — Заголовок для плитки.
  • Semantic Object — CustomApplication.
  • Action — ui5Components.

Жмем кнопочку Save.

Переходим в группы, находим свою группу, в моем случае это Sample Applications (BCG_EPM_PUR_TEST), и жмем на иконку «добавить плитку»:

В поле поиска уже будет отображаться наш каталог. Нам надо просто добавить плитку, нажав под ней на иконку «плюсик»:

Видим сообщение, что плитка успешно добавлена: Tile ‘UI5 Web Components Test’ added successfully!

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

Добавили плитку React приложения

Попробуем перейти по ней:

Happy hacking! 😉