Привет, Хабр! Меня зовут Александр Карпов, я ведущий разработчик в группе разработки интерфейсов веб-приложений компании «Северсталь-инфоком». Хочу поделиться с вами опытом локальной разработки UI-приложений для SAP-систем.
В разное время для разработки приложений SAPUI5 разработчики пользовались разными инструментами. Сначала это были плагины для HANA Studio (Eclipse), потом появилась Web IDE, затем Business Application Studio (BAS). Но проблема в том, что плагины для Eclipse не развиваются с 2019 года, а два остальных инструмента привязывают разработчика к конкретной среде. Ведь Web IDE и BAS — это облачные среды, которые лишают возможности разрабатывать локально. К тому же они платные.
Компания SAP пошла на встречу разработчикам и в последнее время начала разрабатывать инструменты для локальной разработки: UI5 Tooling и Fiori Tools, а также плагины для VSCode. Это позволяет разработчикам работать эффективнее, а также не зависеть от облачных сред разработки.
В этой статье мы будем использовать редактор VSCode, установим на него плагины, создадим приложение и запустим его локально.
Устанавливаем расширения SAP Fiori Tools
Перед началом работы установите Node.js. Мы не будем использовать его напрямую, но он необходим для работы инструментов.
Затем в VSCode необходимо установить расширения. Для этого зайдите на панель Extensions (Ctrl+Shift+X), введите в поиске: «SAP Fiori tools - Extension Pack» и установите его. Это не одно расширение, а целый пакет. Поэтому после установки у вас также появится шесть других расширений:
Application Wizard. Помогает создавать приложения на основе готовых шаблонов. По сути это просто графический интерфейс над утилитой Yeoman.
SAP Fiori tools - Application Modeler. Позволяет визуализировать и изменять структуру приложений.
SAP Fiori tools - Guided Development. Руководства и примеры кода.
SAP Fiori tools - Service Modeler. Графический интерфейс для работы с сервисами OData.
SAP Fiori tools - XML Annotation Language Server. Поддержка аннотаций, специфичных для разработки Fiori-приложений.
XML Toolkit. Поддержка XML: подсветка синтаксиса, проверка и так далее.
![](https://habrastorage.org/getpro/habr/upload_files/4d2/15a/7a7/4d215a7a75a2abd06d660907da3ba567.png)
Создаем приложение
Сначала создадим папку для проекта (у меня она называется OVP) и откроем ее с помощью VSCode. Далее в редакторе нажимаем Ctrl+Shift+P, в окне поиска пишем «generator» и выбираем «Fiori: Open Application Generator».
![](https://habrastorage.org/getpro/habr/upload_files/69d/733/76f/69d73376f24581cb5015563fae0ee340.png)
Откроется мастер, который помогает создавать приложения. На выбор есть два типа приложений: «SAP Fiori Elements» для Fiori-приложений и «SAPUI5 freestyle» для самостоятельных приложений UI5. Для нашей разработки мы выберем «SAP Fiori elements» и шаблон «Overview Page».
![](https://habrastorage.org/getpro/habr/upload_files/a1a/c1d/81c/a1ac1d81c922f24acfb0edab03b8822b.png)
На следующем шаге необходимо выбрать источник данных. К чему можно подключиться:
к существующей SAP-системе
к сервису OData
к SAP API Business Hub
или просто загрузить файл метаданных.
Мы выберем первый вариант и подключимся к нашей локальной SAP-системе. Также можно подключиться к облачной платформе SAP Business Technology Platform.
![](https://habrastorage.org/getpro/habr/upload_files/fc8/2cb/b61/fc82cbb619abbb2ca7847c7abf7259d2.png)
После успешной авторизации появятся два дополнительных поля: «System name» и «Service». В первое поле можно ввести удобное имя системы, и оно сохранится в VSCode для дальнейшего использования. Во втором нужно выбрать сервис OData, из которого мы будем забирать данные.
![](https://habrastorage.org/getpro/habr/upload_files/748/fd9/6b6/748fd96b67064733fd2178cba5da76fa.png)
На третьем шаге выбираем сущность, по которой будет строиться глобальная панель фильтрации приложения (smartFilterBar).
![](https://habrastorage.org/getpro/habr/upload_files/2d0/a22/648/2d0a226480b5f5bcfe7b7812601e2a7d.png)
На следующем шаге заполним атрибуты проекта: имя модуля проекта, описание и подробное описание, папка для генерации файлов проекта. Для удобства тестирования можно выбрать опцию «Add FLP configuration».
![](https://habrastorage.org/getpro/habr/upload_files/499/154/cda/499154cdadde93cdcfaa1e9ea9754feb.png)
На последнем шаге заполним данные конфигурации Fiori Launchpad: семантический объект, действие (action), заголовок и подзаголовок. Эта конфигурация не попадет в настройки ланчпада реальной системы, а будет использоваться только для локальной разработки.
![](https://habrastorage.org/getpro/habr/upload_files/742/dba/3e8/742dba3e8902542f01f2a6d06adb8810.png)
В результате у нас сформируется проект следующей структуры. В папке zoverview находится основная структура проекта, а в папке .vscode — файл с конфигурациями запуска.
![](https://habrastorage.org/getpro/habr/upload_files/e79/5f8/676/e795f8676f759e94c676eae1d56d28cf.png)
Запускаем приложение локально
Мастер автоматически создает пять конфигураций запуска:
Start <module>. Запуск с настройками ui5.yaml.
Start <module> with UI5 Version. Запуск с настройками ui5.yaml и возможностью выбора версии библиотек.
Start <module> Mock. Запуск с настройками ui5.yaml и тестовыми данными.
Start <module> Mock with UI5 Version. Запуск с настройками ui5.yaml, тестовыми данными и возможностью выбора версии библиотек.
Start <module> Local. Запуск с настройками ui5-local.yaml. При этом будет использоваться локальная версия библиотеки SAPUI5.
Запускать приложения можно через панель Run and Debug (Ctrl+Shift+D). Для этого выберите нужный вариант и нажмите на иконку запуска.
![](https://habrastorage.org/getpro/habr/upload_files/a01/98a/2cc/a0198a2cc3daee07ed982ee54854a233.png)
Мы запустим наше приложение в конфигурации «Start zoverview». По умолчанию оно запустится на порту 8080 и автоматически откроется в дефолтном браузере. Мы увидим приложение с заголовком и Smart Filter Bar’ом.
![](https://habrastorage.org/getpro/habr/upload_files/c9f/9ba/235/c9f9ba23538b20fd6d1e36588722fe4f.png)
Итак, при помощи редактора VSCode и инструментов Fiori Tools мы создали приложение Fiori Elements и запустили его локально. Как видите, процесс создания приложения достаточно быстрый и удобный, благодаря простому интерфейсу и широкому набору настроек. Задавайте вопросы, пишите комментарии, постараюсь ответить.
В следующей статье мы продолжим работу с этим приложением и будем добавлять в него карточки. Я покажу, как это можно сделать несколькими разными способами.