SAP + ReactJS
![](https://nickcode.ru/wp-content/uploads/2022/07/2020-03-09_22-59-54.png)
До сих пор на страницах этого блога в качестве инструмента для разработки фронта рассматривался только фраемворк SapUI5. Но технологии меняются и все больше и больше компаний переходят на ReactJS.
В данной заметке рассмотрим тестовое приложение на UI5 веб компонентах, задеплоим его в систему и добавим приложение на лаунчпад.
Стоит просто посмотреть на эту картинку, чтобы понять причину набирающего обороты процесса миграции с SapUI5 на ReactJS:
![](https://nickcode.ru/wp-content/uploads/2022/07/изображение-2.png)
Ребята из SAP’а тоже прекрасно понимают эту тенденцию и разрабатывают свою библиотеку веб-компонентов для разных фреймворков, в число которых входит и ReactJS. Посмотрим что она из себя представляет!
Настроим окружение для разработки под ReactJS.
1. Visual Studio Code.
В качестве редактора для разработки будем использовать VS Code. Скачаем его по ссылке https://code.visualstudio.com/ и установим.
![](https://nickcode.ru/wp-content/uploads/2022/07/изображение-4.png)
2. Node.js
Для расширения возможностей JavaScript скачаем последнюю версию Node.js — https://nodejs.org/.
![](https://nickcode.ru/wp-content/uploads/2022/07/изображение-3.png)
Установим.
3. Yarn
Так же нам понадобиться менеджер пакетов Yarn.
Для его установки откроем терминал и выполним команду:
npm install --global yarn
После установки убедимся что все установилось корректно. Для этого выполним команду:
yarn -v
![](https://nickcode.ru/wp-content/uploads/2022/07/изображение-5.png)
4. Git
Скачаем и установим Git — https://git-scm.com/downloads.
![](https://nickcode.ru/wp-content/uploads/2022/07/изображение-14.png)
Ты молодец!
Создадим простое React приложение.
Лучший способ создать свое первое приложение на React — Create React App!
Запустим create react app в терминале:
npx create-react-app nickcode-react
По итогу получим сообщение об успешной установке create react app:
![](https://nickcode.ru/wp-content/uploads/2022/07/изображение-6.png)
Перейдем в папку с проектом:
cd nickcode-react
И запустим проект:
yarn start
В браузере должна открыться страничка http://localhost:3000:
![](https://nickcode.ru/wp-content/uploads/2022/07/изображение-7.png)
Добавим в проект UI5 Web Components.
Добавим ранее созданный проект nickcode-react в рабочую область VS Code:
![](https://nickcode.ru/wp-content/uploads/2022/07/изображение-8.png)
![](https://nickcode.ru/wp-content/uploads/2022/07/изображение-9.png)
Откроем файл /src/App.js:
![](https://nickcode.ru/wp-content/uploads/2022/07/изображение-11.png)
В терминале запускаем установку пакета веб-компонентов:
yarn add @ui5/webcomponents --save
Если получаем ошибку:
Невозможно загрузить файл C:\Users\Nick\AppData\Roaming\npm\yarn.ps1, так как выполнение сценариев отключено в этой системе:
![](https://nickcode.ru/wp-content/uploads/2022/07/изображение-10.png)
то запускаем в терминале команду:
Set-ExecutionPolicy RemoteSigned
И повторяем:
yarn add @ui5/webcomponents --save
После успешной установки в App.js импортируем кнопку:
import "@ui5/webcomponents/dist/Button.js";
И используем эту кнопку для вывода на экран:
<ui5-button>Hello world from Nickcode!</ui5-button>
![](https://nickcode.ru/wp-content/uploads/2022/07/изображение-12.png)
Смотрим что получилось на странице:
![](https://nickcode.ru/wp-content/uploads/2022/07/изображение-13.png)
Отлично, вот и наша кнопка!
Посмотрим на 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
![](https://nickcode.ru/wp-content/uploads/2022/07/изображение-15.png)
Перейдем в папку с проектом:
cd ui5-webcomponents-sample-react
![](https://nickcode.ru/wp-content/uploads/2022/07/изображение-16.png)
Установим все зависимости, для этого выполним команду:
yarn
И после загрузки пакетов запускаем приложение:
yarn start
Откроется UI5 Web Components React Sample Application:
![](https://nickcode.ru/wp-content/uploads/2022/07/изображение-17.png)
Перенесем ReactJS приложение в SAP
А теперь самое интересное — задеплоим react приложение в Sap!
В качестве системы я запущу свой локальный sap.
В консоле запускаем создание билда приложения:
yarn build
В папке с проектом появится новая папка build с нашим приложением:
![](https://nickcode.ru/wp-content/uploads/2022/07/изображение-18.png)
Запустим SAP Web IDE.
Создадим новый проект:
![](https://nickcode.ru/wp-content/uploads/2022/07/изображение-19.png)
![](https://nickcode.ru/wp-content/uploads/2022/07/изображение-20.png)
Совершенно не имеет значения как проект назвать. В моем случае назову его Main.
После создания удаляем из папки проекта всё кроме Component.js и manifest.json:
![](https://nickcode.ru/wp-content/uploads/2022/07/изображение-22.png)
Перенесем содержимое папки build (всё кроме файла manifest.json) в папку webapp (можно найти в папке с SAP Web IDE. Например, webide\eclipse\serverworkspace\Ni\Nick\OrionContent\Main\webapp):
![](https://nickcode.ru/wp-content/uploads/2022/07/изображение-23.png)
И задеплоим получившийся проект в систему:
![](https://nickcode.ru/wp-content/uploads/2022/07/изображение-24.png)
![](https://nickcode.ru/wp-content/uploads/2022/07/изображение-25.png)
![](https://nickcode.ru/wp-content/uploads/2022/07/изображение-26.png)
После деплоя запустим приложение по адресу https://vhcalnplci:44300/sap/bc/ui5_ui5/sap/z_todo_react/index.html:
![](https://nickcode.ru/wp-content/uploads/2022/07/изображение-27.png)
Добавим плитку для React приложения
Для более полноценного окончания этой статьи сделаем еще одну вещь — добавим плитку на лаунчпад для только что залитого react приложения.
Идем в транзакцию SE93, где запускаем транзакцию LPD_CUST:
![](https://nickcode.ru/wp-content/uploads/2022/07/изображение-28.png)
![](https://nickcode.ru/wp-content/uploads/2022/07/изображение-29.png)
![](https://nickcode.ru/wp-content/uploads/2022/07/изображение-30.png)
В новой папке создадим новое приложение (New Application):
![](https://nickcode.ru/wp-content/uploads/2022/07/изображение-42.png)
Обратим внимание на выделенные красным поля:
- 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:
![](https://nickcode.ru/wp-content/uploads/2022/07/изображение-32.png)
В браузере откроется панель управления группами и каталогами.
В Каталогах ищем нужный каталог, в моем случае это SAP_BASIS_BC_EPM_PUR_TEST, переходим на вкладку TargetMapping (присвоение) и жмем кнопку Create Target Mapping (создать присвоение цели):
![](https://nickcode.ru/wp-content/uploads/2022/07/изображение-33.png)
![](https://nickcode.ru/wp-content/uploads/2022/07/изображение-34.png)
Заполняем поля в соответствии с тем, как мы заполняли поля в транзакции 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 (создать плитку):
![](https://nickcode.ru/wp-content/uploads/2022/07/изображение-35.png)
На следующем экране выбираем App Launcher — Static:
![](https://nickcode.ru/wp-content/uploads/2022/07/изображение-36.png)
И заполняем форму создания плитки в соответствии с тем, как мы заполняли форму создания присвоения :
![](https://nickcode.ru/wp-content/uploads/2022/07/изображение-37.png)
- Title — Заголовок для плитки.
- Semantic Object — CustomApplication.
- Action — ui5Components.
Жмем кнопочку Save.
Переходим в группы, находим свою группу, в моем случае это Sample Applications (BCG_EPM_PUR_TEST), и жмем на иконку «добавить плитку»:
![](https://nickcode.ru/wp-content/uploads/2022/07/изображение-38.png)
В поле поиска уже будет отображаться наш каталог. Нам надо просто добавить плитку, нажав под ней на иконку «плюсик»:
![](https://nickcode.ru/wp-content/uploads/2022/07/изображение-39.png)
Видим сообщение, что плитка успешно добавлена: Tile ‘UI5 Web Components Test’ added successfully!
Переходим на лаунчпад, обновляем страницу и, надеюсь, видим только что добавленную плитку:
![](https://nickcode.ru/wp-content/uploads/2022/07/изображение-40.png)
Попробуем перейти по ней:
![](https://nickcode.ru/wp-content/uploads/2022/07/изображение-41.png)
Happy hacking! 😉