Часть 7. Продолжение.

Часть 1  Часть 2  Часть 3  Часть 4  Часть 5  Часть 6

Оглавление

2. СОЗДАНИЕ ПРИЛОЖЕНИЯ FIORI В СРЕДЕ WEB IDE

2.1 SAP WebIDE

2.1.1 Роль и место Web IDE в разработке приложений SAP UI5

2.1.2 Краткие сведения об установке и конфигурировании

2.2 Создание приложения из стандартного шаблона

2.2.1 Создание проекта, указание основных параметров

2.2.2 Подключение к данным из CDS через OData-сервис

2.2.3 Тестирование работоспособности

2.3 Публикация приложения на Front-End

2.4 Создание плитки из опубликованного приложения

2. СОЗДАНИЕ ПРИЛОЖЕНИЯ FIORI В СРЕДЕ WEB IDE

2.1 SAP WebIDE

2.1.1 Роль и место Web IDE в разработке приложений SAP UI5

Пример, разобранный в предыдущей главе, является максимально упрощённым. Его задача – рассказать о терминах, с которыми приходится столкнуться при создании Fiori-плиток, описать элементы архитектуры SAP Fiori, проиллюстрировать основные шаги, выполняемые при создании и настройке плиток. Пример даже не задействует по существу созданный нами ракурс использования. Вместо этого только считываются метаданные ракурса, а именно – количество записей. В данной главе рассмотрим немного более сложный и содержательный пример. Построим SAPUI5-приложение, а затем уже и плитку на его основе. Приложение будет в форме таблицы выводить пользователю Fiori Launchpad на просмотр записи из того же CDS-ракурса.

Для разработки SAPUI5-приложений используется отдельный инструмент, который называется SAP Web IDE. На Рис. 39 отражено взаимодействие Web IDE с ранее рассмотренными элементами архитектуры SAP Fiori. Также этот рисунок показывает взаимодействие других инструментов фронтэнда (SAP GUI, ABAP Development Tools) с системой S/4HANA при разработке Fiori-приложений на основе CDS.

Рис.39. Роль различных пользовательских инструментов в создании приложений SAP UI5

Как видно из этой схемы, SAP Web IDE соединяется с системой Front-End и использует в своей работе предварительно активированные OData-сервисы, поставляющие данные из CDS-ракурсов. Затем готовые приложения публикуются в репозитарии системы Front-End. Из репозитария приложения могут быть размещены на SAP Fiori Launchpad для конечных пользователей. На Рис. 40 изображена обобщённая последовательность действий и «распределение обязанностей» при разработке SAPUI5-приложений.

Рис.40. Этапы создания Fiori-приложения, соответствующие им роли и инструменты

Использование среды разработки SAP Web IDE возможно в двух режимах: Trial или Production. Режим Trial предполагает, что программа инсталлируется на компьютере пользователя и используется локально для работ по разработке и тестированию, которые выполняет один пользователь. Режим  Production нужен для разработок, которые будут использоваться в продуктивных системах. Для этого режима требуется подключение к SAP Cloud Platform, доступное на условиях платной подписки.

2.1.2 Краткие сведения об установке и конфигурировании

Дистрибутивы обеих версий SAP Web IDE доступны для загрузки по ссылке https://tools.hana.ondemand.com/#sapui5  Установка Trial-версии очень проста, её описание можно найти в официальной документации SAP. Ключевым моментом для использования SAP Web IDE является подключение к системе Front-End. Оно необходимо, чтобы создаваемое приложение могло «видеть» активированные в этой системе OData-сервисы и использовать их для получения данных из Back-End. Предположим, что в соответствии с инструкциями по установке SAP Web IDE развёрнут в локальной папке C:\SAPWebIDE. В этом случае необходимо создать специальный файл с параметрами подключения и поместить его в папку C:\SAPWebIDE\eclipse\config_master\service.destinations\destinations. Файл должен иметь название из трёх символов, совпадающее с SID-ом системы Front-End. Файл можно создать в обычном текстовом редакторе (например, в стандартном Windows-приложении «Блокнот»). Но затем проследить, чтобы у файла не было никакого расширения. Например, если SID подключаемой системы имеет значение ABC, то так же должен называться и файл (а не ABC.txt, ABC.doc, ABC.rtf и т.п.). Содержание файла должно быть следующим:

Description=<краткое текстовое описание Front-End-системы>
  Type=HTTP
   TrustAll=true
   Authentication=NoAuthentication
   Name=ABC
   ProxyType=Internet
   URL=<protocol>://<server>:<port>
   WebIDEUsage=odata_abap,odata_gen,ui5_execute_abap,dev_abap,bsp_execute_abap,odata_xs
   WebIDESystem=ABC
   WebIDEEnabled=true
   sap-client=<номер рабочего манданта Front-End-системы>

Здесь на место обозначений protocol, server и  port подставляются те же параметры соединения с системой Front-End (или с SAP Web Dispatcher-ом), как и в предыдущей главе.

После установки SAP Web IDE и подготовки файла с параметрами подключения, необходимо из папки C:\SAPWebIDE\eclipse запустить файл orion.exe. В результате появится DOS-окно, которое через несколько секунд заполнится несколькими строчками технических сообщений (см. Рис. 41).

Рис.41. Запуск служб, обеспечивающих работу локально установленного Web IDE

После этого интерфейс SAP WebIDE доступен через браузер по ссылке http://localhost:8080/webide/index.html  Стартовый экран изображён на Рис. 42.

Рис.42. Окно входа в локально установленный Web IDE

При первом подключении необходимо нажать «Create a new account» (см. Рис. 43). В появившемся окне указать произвольно выбранные логин и пароль. Имеет смысл сделать их такими же, как логин/пароль вашего пользователя в Front-End-системе. Также следует указать свой e-mail, после чего нажать «Sign up».

Рис.43. Создание учётной записи для работы в Web IDE

В дальнейшем можно будет сразу входить в рабочую среду SAP WebIDE по этому логину/паролю, нажимая на стартовой странице кнопку .

2.2 Создание приложения из стандартного шаблона

2.2.1 Создание проекта, указание основных параметров

В нашем простом примере можно использовать стандартные шаблоны Fiori-приложений. Для этого перейти по команде меню File->New->Project from Template (см. Рис. 44).

Рис.44. Создание приложения на основе шаблона

Откроется окно мастера, с помощью которого за несколько последовательных шагов можно ввести все необходимые параметры и создать приложение по одному из стандартных шаблонов (см. Рис. 45).

Рис.45. Первый шаг мастера приложений SAPUI5: выбор шаблона

Так как наша задача – обеспечить табличный просмотр данных из CDS-ракурса, то выбор варианта List Report Application является очевидным. Важно обратить внимание на значение в поле SAPUI5 Version. По соображениям совместимости это значение не должно быть больше, чем версия SAPUI5, используемая в системе Front-End. Узнать эту версию можно, открыв в браузере ссылку <protocol>://<server>:<port>/sap/public/bc/ui5_ui5/  Как видно из Рис. 46, многие библиотеки в SAPUI5 могут быть доступны в нескольких версиях. Достаточно ориентироваться на наименьшую версию. И если необходимо, выбрать из списка в поле SAPUI5 Version номер версии пониже.

Рис.46. Версии UI5, доступные в системе Front-End

После этого нажать Next и перейти к следующему шагу мастера (см. Рис. 47).

Рис.47. Второй шаг мастера приложений SAPUI5:основные параметры приложения

В поле Project Name нужно ввести техническое имя будущего приложения. В поле Title – словесное описание. Для нашего примера укажем «AirlineList» и «Airline List» соответственно. Снова нажимаем Next.

2.2.2 Подключение к данным из CDS через OData-сервис

Первое, что потребуется сделать на следующем шаге мастера – это указать тип источника, на основе которого будет создано приложение. В нашем случае это OData-сервис из списка сервисов, доступных в Front-End-системе (см. Рис. 48).

Рис.48. Выбор типа источника данных для приложения.

Затем нужно выбрать ту систему Front-End, с которой мы работаем. Выбрать систему можно из раскрывающегося списка (см. Рис. 49).

Рис.49. Выбор системы Front-End

В этом списке будут видны системы, для которых правильно подготовлены и размещены файлы с параметрами соединения (см. предыдущий раздел). В список выводятся текстовые описания систем, которые указаны в разделе Description этих файлов. Как только будет выбрана конкретная система, появится всплывающее окно (см. Рис. 50).

Рис.50. Ввод логина и пароля для подключения приложений SAPUI5 к системе Front-End

Упомянутая здесь ссылка на локальный компьютер (localhost) не должна вводить в заблуждение. Необходимо указать логин и пароль пользователя в системе Front-End. Как и ранее, в нашем примере используется пользователь FIORI_ADM. После ввода логина и пароля станет доступен список всех OData-сервисов, опубликованных в системе Front-End (см. Рис. 51).

Рис.51. Третий шаг мастера приложений SAPUI5:подключение к OData-сервису

Поскольку сервисов может быть очень много, то удобно воспользоваться контекстным поиском, вводя в поле Services часть названия нужного сервиса. Для нашего примера это сервис ZC_AIRLINEQUERY_CDS (см. Рис. 52).

Рис.52. Контекстный поиск необходимого OData-сервиса

При необходимости можно иерархически развернуть данные о полях сервиса, используя значок > слева от названия (см. Рис. 53).

Рис.53. Краткий обзор метаданных сервиса

Чтобы выбрать сервис для его дальнейшего использования, нужно нажать кнопку  слева от его названия. Цвет стрелки на кнопке изменится с тёмного на светлый. Используя кнопку , можно увидеть дополнительные технические сведения о сервисе. В том числе, проверить его текущий статус (см. Рис. 54).

Рис.54. Выбор OData-сервиса и просмотр его статуса

Выбрав сервис, снова нажимаем Next. Следующий шаг (Annotation Files) пропускаем и снова нажимаем Next. Всё что остаётся сделать на следующем шаге (Template Customization) – это в поле OData Collection выбрать из списка техническое имя CDS-ракурса. Список будет заполнен на основании выбранного OData-сервиса. Поэтому в нашем примере выбор тривиален (см. Рис. 55).