SAP Fiori — это среда графического интерфейса пользователя, которая обеспечивает пользователям более удобный опыт взаимодействия с решениями SAP. Традиционно внедрения SAP получили широкое признание благодаря своей надежности, масштабируемости и охвату бизнеса. Однако пользовательский опыт часто оставался позади, что не позволяло компаниям в полной мере использовать преимущества платформы SAP. SAP Fiori стал ответом на эту проблему, предоставив пользовательский интерфейс с простой навигацией, адаптированный к потребностям каждой компании.
Потратив большую часть этого года на разработку приложений Fiori, я хотел бы представить пять вещей, на изучение которых у меня ушло неожиданно много времени и усилий.
1.- Он тесно связан с традиционной парадигмой программирования SAP.
Это может показаться ерундой, но для меня это было небольшим сюрпризом. SAP Fiori иногда рекламируют как полностью независимую библиотеку для создания клиентских приложений. Однако, по моему опыту, он по-прежнему полагается на инфраструктуру SAP для выполнения основных действий, таких как защита маршрута или настройка среды выполнения. Приложение SAP Fiori всегда предполагает, что оно работает за пределами средств SAP, таких как проверка подлинности пользователя.
Этот подход отличается от других фреймворков, таких как Vue.js или Angular, где маршрутизация и защита являются неотъемлемой частью возможностей, предоставляемых разработчикам.
Это напоминает мне парадигму SAP WebDynpro, в которой веб-приложения разрабатывались как часть решений SAP, а не как отдельные службы.
2.- Все является моделью.
Рассмотрим следующий пример, где инициализируется соединение firebase, а затем устанавливается аутентификация для последующего использования во всем приложении:
sap.ui.define([
"sap/ui/model/json/JSONModel",
], function (JSONModel) {
"use strict";
const firebaseConfig = {
// Here goes your traditional firebase credentials
};
return {
initializeFirebase: function () {
var app = firebase.initializeApp(firebaseConfig);
const fireAuth = firebase.auth()
const oFirebase = {
fireAuth: fireAuth
};
var fbModel = new JSONModel(oFirebase);
return fbModel;
}
};
});
Позже мы должны объявить его во время процедуры инициализации приложения и других необходимых служб. В этом случае мы также видим инициализацию соединения MongoDB:
sap.ui.define([
"sap/ui/core/UIComponent",
"sap/ui/Device",
"com/langure/MetadatosFiori/model/models",
"./Firebase",
"./Mongodb",
],
function (UIComponent, Device, models, Firebase, Mongodb) {
"use strict";
return UIComponent.extend("com.langure.MetadatosFiori.Component", {
metadata: {
manifest: "json"
},
init: function () {
UIComponent.prototype.init.apply(this, arguments);
this.getRouter().initialize();
this.setModel(models.createDeviceModel(), "device");
this.setModel(Firebase.initializeFirebase(), "firebase");
this.setModel(Mongodb.initializeMongodb(), "mongodb");
}
});
}
);
Как правило, аутентификация в приложениях Fiori неявно делегируется среде выполнения SAP, в которой она содержится. Но в этом примере я использую аутентификацию Firebase, поскольку это приложение Fiori также должно работать автономно. Создается Login.controller.js, и действие после установки учетных данных пользователя выглядит следующим образом:
const fireAuth = this.getModel("firebase").getProperty("/fireAuth");
fireAuth.signInWithEmailAndPassword(data.usuario, data.password)
.then((userCredential) => {
var oAuthData = {
currentUser:{
authenticated : true,
token : userCredential
}
};
Обратите внимание, как объект fireAuth сохраняется и извлекается, как и любая другая модель в SAP Fiori, с использованием стандартного метода getProperty(). Итак, урок здесь заключается в том, что модели могут хранить сложные объекты в дополнение к текстовым свойствам.
3.- Сообщество с открытым исходным кодом
Несмотря на то, что SAP Fiori является проприетарным (поскольку он требует лицензирования), SAP также предоставляет эквивалент с открытым исходным кодом под названием OpenUI5, который в некоторой степени переносим на платную среду выполнения. Тем не менее, было приятным сюрпризом узнать о целом сообществе открытого исходного кода вокруг SAP, компании, которая, как известно, является закрытой и, ну, в общем, проприетарной.
Проекты с открытым исходным кодом включают управляемую службу Kubernetes (SAP Gardener), среду выполнения облачных приложений (SAP Kyma) и даже тему SAP Fiori для других платформ приложений, таких как Vue.js, Angular и React, называемую Фундаментальные стили библиотеки SAP.
Для приложений SAP OpenUI5 существует инструмент формирования под названием Easy UI5 Generator, который создает пустое приложение со всей загрузкой и структурой каталогов. К сожалению, этот инструмент требует большого знания внутренней работы SAP Fiori / OpenUI, и я бы не рекомендовал его использовать новичкам. Для справки, это команды, которые я бы использовал для совершенно нового проекта (обратите внимание на параметр --config, который не упоминается в документации):
yo easy-ui5 project cd <DIR> npm start ui5 serve --config=uimodule/ui5.yaml ui5 build -a --config=uimodule/ui5.yaml
4.- Создайте один раз, используйте несколько раз
Я обнаружил, что контроллеры в SAP Fiori постоянно перерабатываются, а это означает, что использование его ловушек жизненного цикла немного привередливо. Давайте посмотрим на следующий пример, где проверка требуется каждый раз, когда на экране появляется определенное представление:
return Controller.extend("com.langure.MetadatosFiori.controller.Home", {
onInit(){
const routingInterceptor = this.getOwnerComponent().
getRouter().
getRoute("Home");
routingInterceptor.attachPatternMatched(this.forceInitializeController,
this);
},
forceInitializeController (event){
var authenticated = localStorage.getItem("user_auth");
if(!authenticated){
this.getRouter().navTo("Login");
}
// else... keep processing
})}}
Чтобы решить эту конкретную ситуацию, я создал метод с именем forceInitializeController(), который подписывается как переменная routingInterceptor. Эта подписка выполняется с помощью attachPatternMatched() и заставляет содержимое обратного вызова выполняться каждый раз, когда запускается эта навигация.
5.- 100% клиентская сторона
Работая с другими платформами веб-приложений, разработчик может полагаться на некоторую обработку, выполняемую на стороне сервера, например на отрисовку определенного представления перед отправкой клиенту или предварительную обработку данных. В моем случае мне нужно было прочитать коллекцию с сервера MongoDB, отобразить ее в виде таблицы и разрешить пользователям загружать ее в виде файла JSON. Между ними нет сервера приложений, поскольку приложения SAP Fiori могут работать полностью на стороне клиента, размещаясь на статическом HTTP-сервере.
Другими словами, обработка и экспорт данных также должны выполняться на стороне клиента.
onGetJSON(){
var blob = new Blob(["Data as Json"],
{type: "text/plain;charset=utf-8"});
saveAs(blob, "data.json");
},
В этом примере я использовал библиотеку BLOB-объектов, чтобы создать файл и разрешить пользователю его загрузку. Поскольку он также основан на JavaScript, данные можно легко получить из соответствующей oModel внутри приложения Fiori.
SAP Fiori — довольно захватывающая парадигма для модульных веб-приложений. Это позволяет разработчикам обнаруживать и вводить общие конфигурации во время выполнения (поскольку эти приложения должны выполняться в контексте SAP Fiori Workbench). Таким образом, вся логика на стороне сервера полностью изолирована от представления и строго регламентируется дизайном. Пользовательский интерфейс, обеспечиваемый графическими компонентами, является последовательным, богатым и удобным для пользователя. Я бы сказал, что разработчики из других фреймворков, таких как Angular или Vue.js, должны иметь возможность адаптироваться, но им определенно будет полезно иметь опыт работы с SAP.
