Протягом багатьох років компанія SAP змінювала інтерфейс користувача.

Довгий час програмне забезпечення SAP мало імідж системи з “недружнім інтерфейсом”. Система мала громіздкий графічний інтерфейс користувача – SAP GUI, який, хоч і був на вигляд застарілим, але, з часом, клієнти SAP до нього звикали і він ставав достатньо улюбленим досвідченими користувачами системи. Так, світ ІТ технологій, світ користувацьких інтерфейсів розвивається шаленим темпом, а інтерфейс системи залишався майже таким самим, “олдскульный”, SAP GUI залишався  стандартним інтерфейсом користувача класичних рішень SAP, таких як SAP R/3 або SAP ECC. Дуже часто можна було почути від користувачів SAP, що інтерфейс складний, перевантажений та непривабливий. Це все було пов’язано з тим, що, у багатьох випадках, екрани транзакцій SAP GUI оснащені функціями для дуже різних груп користувачів і тому часто такі екрани здаються захаращеними та інтуїтивно незрозумілими у використанні. Так, дещо можливо було приховати, але тоді екран ставав нелогічно заповненим полями вводу і іноді починав виглядати дуже дивно. 

У більшості випадків, доступ до програм SAP GUI здійснювався тільки через програму SAP Logon. Це програма, яку потрібно було встановити на комп’ютері кінцевого користувача, причому версії для операційних систем Windows та Linuх/MacOS хоч і був десь схожим, але  також і мали деякі відмінності.

Зараз SAP GUI також дозволяє підключатись до систем SAP S/4HANA. На етапі співіснування двох світів інтерфейсів SAP – класичного (SAP GUI інтерфейс)  та плиточного (SAP Fiori інтерфейс) –  SAP розробила теми дуже близькі за виглядом на стиль SAP Fiori, щоб спростити перехід до нового інтерфейсу, який базується на веб-інтерфейсі. На малюнку нижче представлено вигляд SAP GUI у стилі Fiori.

WEB-інтерфейси

Наприкінці 1990-х років, почалась ера інтернету. Багато постачальників рішень програмного забезпечення перейшли до надання послуг як сервісу, SaaS-рішення, вийшли на сцену та стали серйозними конкурентами в середовищі корпоративного програмного забезпечення. Ці постачальники та оператори хмарного програмного забезпечення зосередилися на оптимізованих веб-інтерфейсах користувача, які були доступні з будь якого пристрою. Конкуренти SAP змогли стартувати в зовсім інших умовах. Їхні інтерфейси користувача не розвивалися протягом десятиліть і не використовувалися сотнями тисяч корпоративних клієнтів. Зміна на кардинально новий вигляд інтерфейсу SAP, який би не мав зворотної сумісності, призвів би до надзвичайних проблем. Правду кажучи, SAP майже завжди вдавалося збалансувати інновації та зворотну сумісність і в цій ситуації компанія також змогла задовольнити більшість своїх клієнтів. Доречі, такі ж проблеми є і у інших виробників відомих операційних систем.

Ще до появи SAPUI5 і SAP Fiori компанія SAP застосовувала власні підходи до веб-інтерфейсів користувача. Завдяки Web Dynpro Java та Web Dynpro ABAP компанія вже мала життєздатні технології, які могла запропонувати у 2000-х роках.

Що таке Web Dynpro? Web Dynpro — це незалежна від клієнта модель програмування для розробки інтерфейсів користувача для бізнес-додатків. Він базується на архітектурному шаблоні MVC (Model View Controller), який забезпечує відокремлення бізнес-логіки програми від рівня зберігання даних і логіки презентації. Web Dynpro працює на технологічній платформі SAP NetWeaver і був представлений для SAP NetWeaver Application Server для Java у 2004 році та для SAP NetWeaver Application Server для ABAP у 2006 році. Програми Web Dynpro створюються на мовах програмування Java або ABAP. Знання JavaScript і HTML не є обов’язковими для розробки, що дуже сприяло прийняттю розробниками SAP.

Однак, все більш широке поширення смартфонів і планшетів і їх використання як мобільних кінцевих пристроїв для корпоративних додатків виявило обмеження цієї технології. Все більше і більше користувачів корпоративного програмного забезпечення працювали виключно з веб-додатками або власними програмами, які були оптимально адаптовані до операційних систем їхніх мобільних пристроїв. Це також змінило очікування щодо програм у корпоративному середовищі. Візьмемо, наприклад, соціальні мережі, такі як Facebook або LinkedIn, пошукові системи, такі як Google, або пропозиції електронної комерції, такі як Amazon, Alibaba або українска Rozetka. Ви швидко помітите спільність: усі ці платформи є веб-платформами та доповнюються власними мобільними програмами, де це необхідно. Попит користувачів на сучасні інтерфейси, спонукав SAP інвестувати в сферу web-розробки та надати відповідне рішення за допомогою SAPUI5. З іншого боку, у компанії були певні проблеми з використанням Java, власниками якої стала корпорація Oracle і яка подала числені судові позови на відшкодування права користування Java на платформах SAP. А якщо додати до цього те, що основною базою даних для програм SAP була СУБД від Oracle, то у компанії були великі шанси програти війну патентів, втратити СУБД і весь бізнес, тому що компанія Oracle почала розробляти свій аналог корпоративного програмного забезпечення Oracle Fusion. Але SAP змогла вирішити ці проблеми і, в кінцевому підсумку, з’явилася СУБД HANA DB – як відповідть на Oracle DB, та новий інтерфейс користувача SAP Fiori, який був реалізований без використання Java.

Запатентовані технології не завжди бувають обтяженнями, але в багатьох випадках вони несуть із собою залежність від постачальника. Крім того, порівняно з відкритими технологіями та стандартами, такі рішення, зазвичай, адресовані меншій групі потенційних розробників. У сфері власних програм для мобільних пристроїв домінування Apple з її операційною системою iOS і Google з її операційною системою Android означає, що частково всі розробники перебувають в сфері пропрієтарних технологій. SAP намагається реалізувати подібну концепцію до магазинів додатків Google і Apple за допомогою платформи SAP BTP та SAP Store. Розробники можуть використовувати магазин, щоб надавати компаніям-партнерам SAP власні програми для клієнтів SAP. Таким чином SAP хоче залучити більшу спільноту розробників до своєї власної платформи.

SAP все більше і більше покладається на відкриті технології, але слід зазначити, що фундаментальні концепції системи SAP, такі як словник ABAP (DDIC) або транспортна система, все ще не мають собі рівних навіть у SAP, 50-річчя якого було у квітні 2022 року. Ці концепції досі настільки блискучі, що без них неможливо уявити сучасну розробку ABAP. Сам факт того, що ви все ще можете використовувати тексти та переклади в DDIC, можливо, короткі тексти, створені самим Хассо Платтнером, для розробки додатків SAP Fiori відповідно до сучасних моделей програмування ABAP, вражає.

Впровадження SAPUI5 та SAP Fiori

Впровадження HTML5 як стандарту для веб-додатків також почало революцію в SAP. Незважаючи на те, що офіційна специфікація HTML5 від World Wide Web Consortium (W3C) була відкладена до її остаточного прийняття в 2014 році, SAP наблизилась до цієї перемоги раніше і працювала над новою та сучасною технологією інтерфейсу користувача на цій основі. Кодова назва цього проекту – Фенікс. Пізніше нова технологія отримала назву SAPUI5 (скорочення від UI Development Toolkit для HTML5).

На цьому етапі SAP вирішила, що дизайнери користувацького досвіду (UX) будуть залучені до проекту з самого початку. Тож із самого початку велика увага приділялася гарному дизайну.

Однією з перших книг про дизайн інтерфейсу користувача є «Не змушуйте мене думати». Web & Mobile Usability: The Intuitive Web by Steve Krug (mitp, 2014). Ця книга є класикою в цій галузі. Навіть коли з’явилося перше видання цієї книги, майже 20 років тому, Amazon і Google вже встановили еталон хорошого дизайну. Рецептом успіху була проста та інтуїтивно зрозуміла зручність у поєднанні з коротким часом відповіді. Під час першого впровадження програми SAPUI5 у 2012 році стало зрозуміло, що SAP реалізувала багато рекомендацій Стіва Круга за допомогою SAPUI5. Керівним принципом SAP була послідовність. Вони визнали, що узгоджена реалізація інтерфейсу користувача в елементах керування та взаємодії робить програми простішими у використанні та призводять до меншої кількості помилок. Це призвело до скорочення часу впровадження, з одного боку, та зменшення витрат на технічне обслуговування, з іншого. SAP приділяла велике значення типографіці, кольорам і візуальному представленню, що знайшло відображення у високому рівні прийняття користувачами. Основну увагу, яку SAP приділила зовнішньому вигляду, можна дуже чітко побачити в узгодженому вигляді елементів керування інтерфейсу користувача. Все виглядає так, ніби відлито з однієї форми, а дизайн елементів інтерфейсу виглядає сучасно.

Змінені вимоги до сучасних розробників

Випустивши SAPUI5, SAP створила основу, на якій у майбутньому базуватимуться інтерфейси користувача всіх продуктів SAP, розробок і вдосконалень клієнтів. Однак, SAPUI5 також висуває деякі нові вимоги до розробників, які раніше відігравали невелику роль або взагалі не відігравали жодної ролі в контексті SAP. У процесі розробки JavaScript у поєднанні з HTML5 і CSS3 переходить у центр уваги. Для створення веб-інтерфейсів розробники більше не працюють у ABAP Workbench, як вони робили під час розробки класичних екранів, а з Eclipse та подібними веб-інструментами розробника. Тому розробники повинні оновити свої знання про ці технології та середовища розробки, а в крайньому випадку – вивчити абсолютно нову мову програмування.

У багатьох випадках розробка бекенда та фронтенду розділена:

• Бекенд-розробка: гарантує, що необхідні бізнес-дані та метадані будуть доступні та надані користувачам через інтерфейси прикладного програмування OData (API). Представлення Core Data Services (представлення CDS) використовуються для реалізації логіки ABAP у серверній частині. CDS є предметно-орієнтованою мовою (DSL), яка призначена для спрощення моделювання доступу до таблиць бази даних. Перегляди CDS стали доступними з SAP NetWeaver 7.4.
• Розробка інтерфейсу: це гарантує, що користувальницький інтерфейс розроблений і доступний для кінцевих користувачів. За межами світу SAP для цього використовуються такі фреймворки, як Angular.js, Vue.js або React, у поєднанні з різними бібліотеками інтерфейсу користувача. У середовищі SAP використовується Web Dynpro для ABAP або SAPUI5.

Такий розподіл обов’язків вимагає відповідної координації. Обов’язковою умовою є єдине розуміння технологій, що використовуються. Розробник серверної частини має розуміти як працюють веб-програми та API OData, і що старі технології SAP, такі як блокування об’єктів, можуть спричинити значні проблеми у веб-програмах. З іншого боку, інтерфейсний розробник повинен розуміти як ефективно отримати доступ до API OData, а також як базова модель даних структурована та функціонує у серверній частині.

Завдяки SAPUI5 у 2009 році SAP заклала основу для сучасних веб-інтерфейсів користувача. Завдяки SAPUI5 SAP поставила собі за мету зробити програми доступними на всіх кінцевих пристроях, незалежно від форм-фактора. SAPUI5 пропонує розробникам велику свободу, в результаті чого програми від різних розробників зазвичай виглядають абсолютно по-різному. З появою SAP Fiori зовнішній вигляд додатків став більш регламентованим.

SAP Fiori

Дизайн SAP Fiori вбудовано в структуру SAPUI5. Тепер це структура, яка надає понад 170 елементів керування та численні типи макетів. Ця структура гарантує узгодженість макета, поведінки елементів керування та візуального дизайну в усіх програмах SAP Fiori. Однак, одне це не гарантує приємного UX. Програми мають бути розроблені з урахуванням вимог користувачів.

Навіть якщо команди розробників зможуть оволодіти новими технологіями та впроваджувати програми на їх основі, компанії все одно стикаються з новими проблемами: як можна гарантувати, що програми будуть забезпечувати узгоджений UX для різних випадків використання? Як можна дотримуватися послідовних і встановлених моделей взаємодії, які враховують вимоги кожного випадку використання? У великій програмній компанії, такій як SAP, ці принципи та шаблони повинні застосовуватися та впроваджуватися незліченними командами розробників додатків, які працюють у глобальному розподілі, а тому інженери та дизайнери SAP також врахували цей аспект.

Інструкції з проектування SAP Fiori надають командам розробників вказівки щодо створення програм. Настанови виходять далеко за рамки загальних принципів і парадигм. Вони містять конкретні вказівки щодо реалізації підходу, орієнтованого на користувача. Вони пояснюють не лише те, як застосовувати різні макети та візерунки, але й те, як їх не застосовувати. Рекомендації щодо дизайну SAP Fiori створюют загальну картину SAP Fiori UX. Вони допомагають встановити зв’язок між бажаннями дизайну та відповідними елементами керування SAPUI5. Для цього визначається загальний словник для команд розробників і дизайнерів, який допомагає їм обговорювати повторювані зміни, внесені в програми. Коли всі зацікавлені сторони говорять однією мовою, ефективність розробки додатків підвищується.

Взаємодію між SAPUI5 і рекомендаціями щодо проектування SAP Fiori можна проілюструвати за допомогою аналогії з повсякденного життя. SAPUI5 надає будівельні матеріали та інструменти для будівництва будинку. Інструкції з проектування SAP Fiori містять план, який допоможе вам реалізувати проект будівництва ефективним і стандартизованим способом.

Шаблони для повторюваних вимог

Завдяки SAPUI5 і SAP Fiori існують інструменти та інструкції для ефективного створення сучасних програм. Розробивши декілька програм, стає зрозумілим, що існують вимоги, які повторюються неодноразово, наприклад відображення даних у таблицях, маніпулювання даними у формах або візуалізація даних у формі діаграм. Це призводить до створення схожого програмного коду знову і знову. Після кількох проектів розробники, ймовірно, визначають власні шаблони коду або бібліотеки для копіювання. Наскільки просто і геніально було б використовувати метадані, щоб керувати автоматичним створенням таблиць, форм введення чи графіки фреймворком? Таке копіювання могло б заощадити багато часу на розробку, а обслуговування програми також стало б легшим. Команди розробників SAP також мали такі думки.

Розумне керування

З версією 1.30 фреймворку SAPUI5 було представлено інтелектуальне керування. Воно дозволяє повністю контролювати структуру та поведінку таблиць, форм і діаграм за допомогою метаданих без необхідності писати жодного рядка на JavaScript. Розумні елементи керування інтерпретують метадані OData для цієї мети. У деяких випадках розумні елементи керування зберігають персоналізовану версію інтерфейсу користувача.

Така розробка виконується за допомогою Smart Controls. Теоретично знання JavaScript не потрібно для такого типу розробки. Тим не менш, ознайомитися з основами JavaScript ніколи не буде зайвим.

Анотації до інтерфейсу користувача

Метадані надаються у формі анотацій (приміток). Анотація — це додаткова інформація, яка збагачує сутність або атрибут сутності. Анотації інтерпретуються під час виконання фреймворком SAPUI5 і контролюють спосіб відображення даних. Анотації можна надавати як через джерело даних, так і локально в програмі. Джерелом даних є виключно OData. Розробка фреймової програми та інших функцій поза таблицями, формами та діаграмами, які реалізуються за допомогою інтелектуальних елементів керування, продовжує здійснюватися в JavaScript. У структурі SAPUI5 доступні такі розумні елементи керування:

• Розумне поле (Smart field), включаючи довідку про значення
• Розумна форма (Smart form)
• Розумна таблиця (Smart table), включаючи панель розумних фільтрів
• Розумна діаграма (Smart chart)

На малюнку нижче показано, наприклад, розумну діаграму. Хоча діаграма отримує доступ до конкретної моделі даних програми, графічна реалізація гістограми автоматизована на основі шаблону.

SAP Fiori Elements

Наступним еволюційним кроком до спрощення процесу розробки стали елементи SAP Fiori, так би мовити, збірний будинок якщо проводити аналогії з будівництвом. За допомогою цього фреймворку можливо створювати власні програми без будь-яких знань JavaScript. Необхідною умовою при цьому є стандартизація використання.

На наступному малюнку показано архітектуру додатку SAP Fiori, створеної за допомогою елементів SAP Fiori. Програма SAP Fiori виконується з панелі запуску SAP Fiori Launchpad. Дані для відображення отримуються через службу OData. Конфігурація програми у формі анотацій виконується або через окрему конфігурацію програми, або через метадані служби OData.

Структура елементів SAP Fiori це фактично плани поверхів, тобто шаблони для найбільш часто використовуваних типів програм. Структура передбачає наступні варіанти:

• Звіт як список (List report)
• Робочий список (Worklist)
• Сторінка об’єкта (Object page)
• Сторінка огляду (Overview page)
• Сторінка аналітичного списку (Analytic list page)

Як приклад – “Сторінка об’єкта (Object page)” на малюнку нижче. Сторінка об’єкта дозволяє користувачам створювати, переглядати, редагувати та видаляти об’єкти, а також зберігати чернетки. Цей елемент підходить як для простих об’єктів, так і для більш складних. Сторінка об’єктів пропонує оптимальну підтримку для різних форм-факторів кінцевих пристроїв, як то планшети або мобільні телефони.

Елементи SAP Fiori створені для значного прискорення розробки, одночасно забезпечуючи узгоджений UX у всіх програмах. Незважаючи на це, фреймворк пропонує високу гнучкість, коли мова йде про те, якою мірою його використовувати:

• Налаштування вашої програми є обов’язковим у всіх випадках.
• Потрібні анотації можна створювати у серверній частині або в програмі.
• Додаток також можна розширити за допомогою стандартних технологій SAP

Це дає змогу, наприклад, створити глобальну базову програму, водночас охоплюючи відмінні вимоги для певних країн або бізнес-сфер в окремих програмах. В об’єктно-орієнтованому програмуванні (ООП) на цьому етапі, зазвичай, обговорюють успадкування, визначаючи кореневий клас із загальними атрибутами та методами з дочірніми класами, що реалізують відхилення та вдосконалення кореневого класу.

Розробники отримують високу ступінь гнучкості у серверній частині. Вони мають можливість створювати анотації для служби OData безпосередньо у серверній частині. Це дозволяє керувати поведінкою та зовнішнім виглядом програм безпосередньо з серверної частини, не втручаючись у розробку зовнішньої частини програми SAP Fiori. Елементи SAP Fiori підтримують OData версії V2 та V4, але в обох версіях є відмінності та особливості.

На цьому етапі виникає питання, чому варто покладатися на елементи SAP Fiori, та чи справді збірний підхід задовольнить всі потреби в розробці. На ці питання можна відповісти просто: SAP навіть не претендує на ідеальне та єдине рішення для всіх вимог із елементами SAP Fiori, але зауважимо, що  статистично елементи Fiori охоплюють близько 80% сценаріїв розробки інтерфейсу користувача. Таким чином, елементи SAP Fiori підходять для чотирьох із п’яти запланованих програм.Тобто це схоже на принцип Парето, який стверджує, що 80% вимог можна реалізувати, доклавши 20% зусиль, тоді як решта 20% вимог вимагають 80% зусиль. З елементами SAP Fiori все схоже: значна частина вимог буде покрита цією структурою зі значною ефективністю в порівнянні з розробкою вручну. 

Стаття написана на основі книги SAP Fiori Elements: Development and Extensibility написаної колективом авторів Rene Glavanovits, Martin Koch, Daniel Krancz, Maximilian Olzinger