前言
其實和很多客戶見面時，發現大家多少都聽過 SAP Fiori
但對 Fiori 究竟是個什麼，貌似沒有那麼確定
因此，想簡單介紹一下 SAP Fiori。
SAP R2 — 最早的 Terminal 介面
SAP 起家就是靠著 SAP ERP，而最初的使用者介面，
其實跟我們用的 PC / Mac 常看到的畫面不太一樣
現在的系統設計畫面可漂亮的多。
SAP R2 的畫面是和傳統大型主機一樣的 Terminal Screen
比較像是現在當機時看到的畫面，一片黑白，所有行為都要敲指令。
不過話說回來，現在鄉民們在用的 PTT 不也是長這樣？哈哈。
老實說，我自己都沒經驗過，還沒出生呢！
SAP R3 & ECC —有名的 SAP GUI
慢慢演進到 SAP R3 和 SAP ECC，SAP 也提供了新版的圖像化使用者介面
就叫作 SAP GUI (Graphical User Interface)
身為一個天天用 IG & 角度來說，還是看起來蠻老舊的
但我真心以一個追求高度工作效率的人認為，SAP GUI 真的超級好用！
透過 Ctrl + / 就能快速切換到輸入框中，輸入著名的 SAP T-Code (Transaction Code)
比如說想要「建立銷售訂單」就輸入 VA01
「修改銷售訂單」就輸入 VA02
「檢視銷售訂單」就輸入 VA03
那 ‧‧‧，客戶相關是 XD0 打頭，如果我想「檢視客戶資料」要輸入？
沒錯，就是 XD03。
一開始可能會不習慣，覺得我的媽阿，怎麼這麼多東西要記
但用久了會覺得，德國人是很有邏輯體系在設計 SAP ERP 的
在 SAP R3 和被客戶廣泛使用的 SAP ECC ，使用者介面都是用 SAP GUI。
一直到了下一代 S/4 HANA，事情有了不同。
SAP ECC & NetWeaver —不同的網頁技術
在我前一篇文章：SAP 業務技術平台 Business Technology Platform 的前世今生有提到，最一開始與 SAP ECC 搭配讓客戶進行應用開發延伸與整合的平台叫作 SAP NetWeaver
其實在 SAP NetWeaver 上，SAP 也在「網頁應用」下了不少工夫
為什麼呢？因為透過網際網路使用服務已經慢慢變成主流
從早期的社群 MySpace 到後來的 Facebook
一開始的 eBay 到後來稱霸的Amazon，全都是用網頁阿！為什麼呢？
網頁的好處，就是能很容易的實現「跨平台」
想像如果 Amazon 為了 Windows 去開發一個用戶端
讓大家下載 exe 檔安裝，Mac, Linux, iOS, Android 又要開發各別的用戶端
他開發的很崩潰，我裝的也很崩潰。
SAP 自然也做了很多努力，首先是 SAP GUI for HTML ，其實就是把
SAP GUI 渲染 到網頁上，用戶體驗是，一般般 ‧‧‧
再來是 WebDynpro ABAP & WebDynpro Java，可以用 2 種不同的語言開發
當時還是不少客戶來用的，但 SAP 知道這還是不夠好，因為
2007 年 iPhone 的出現，行動化變成下一個世代的主流
而不管是 SAP GUI for HTML 還是 WebDynpro，都沒辦法支援手機檢視。
SAP S/4 HANA — SAP Fiori
為了下一代旗艦型的 SAP ERP，SAP 可說是卯足了功夫
也是客戶端接收了很多抱怨：
哇賽現在都民國幾年啦，你們家上億的 ERP 連手機都沒辦法用？
S/4 HANA 在 2015 年的推出告訴客戶：SAP GUI 不是之後的主流啦！
接下來，我們都玩 SAP Fiori !
那究竟什麼是 SAP Fiori？
網路上其實能找到蠻多原文的資訊，但我還是想盡量白話的解釋
SAP Fiori 是新一代的 SAP 產品用戶體驗，它是由 2 個主要模塊所組成：
設計 (Design System)＋技術 (Technologies)
設計 (Design System)
SAP 針對企業環境，有一系列「規則」，要求設計「符合 Fiori 使用者體驗」
的 App 應該要有那些特性 (Characteristics) ，如上圖中的：以角色為基礎（Role-Based)、簡單（Simple）等等 blablabla…
針對這些規則，SAP 給了一套 Fiori Design Guideline
反正你要照著做，沒照著做的 App 就不能被稱為 Fiori App
這套 Design Guideline 都被記錄在這個網站內，其實做的相當全面。https://experience.sap.com/fiori-design-web/explore/
得了什麼德國紅點獎那些碗糕的我就不多提了，總是要打廣告。
技術 (Technologies)
上圖中提到包含 SAP UI5, iOS, Android 以及其他技術
但真正的重點是 SAP UI5。
為什麼呢？因為這是要替代 SAP GUI，S/4 HANA 一安裝後開箱即用的
全新使用者介面。
那什麼是 SAP UI5？
SAP Fiori 的技術基礎是 SAP UI5，一套基於 JavaScript、CSS、HTML5，
由 SAP 所開發維護的「響應式網頁開發框架 (Responsive Web Development Framework)」
類似的有 Google 的 Angular.js、Facebook 的 React.js。
到了 SAP UI5，介面才會隨著螢幕大小的不同而自動調整 & 縮排
因此稱之為響應式 (Responsive)。
這是以前的 SAP GUI for HTML & WebDynpro 沒辦法做到的。
而針對 iOS & Android，SAP 也提供對應的 SDK 協助開發人員去打造符合
Fiori Design Guideline 的 Fiori App。
PS : 沒有一定要照著做。
iOS 的 SDK 還是由 SAP 和蘋果合作共同開發，有在蘋果大會上發表
不過通常我看完 iPhone 就睡覺了，根本沒特別注意，哈哈哈。
SAP BTP SDK for iOS 的開發工具是 XCode ，以 Swift 為基底。
SAP BTP SDK for Android 的開發工具是 Android Studio，以 Java 為基底。
都不是利用 SAP 提供的開發工具。
SAP Fiori 這幾年有挺多演進的，特別在速度上有不錯的提升，但可以再更好！
Fiori 相關的名詞有一堆，我會在之後的 Blog 一一白話解釋。
包括：Fiori Element, Metadata-Driven Development, Fiori Tools, Web Component, SAP Gateway, OData Service, Fiori Launchpad, Themes, Fiori Adaptation, UI5 Flexibility, SAP Web IDE, SAP Business Application Studio, SAP Mobile Development Kit (MDK)
對於 SAP UI5 究竟提供了那些可用的開發控件 (Controls)，像是表格、
按鈕、日期選取、輸入、下拉選單等等，也可以去看一下 SAP UI5 Demo Kit
https://sapui5.hana.ondemand.com/
小結
- 如果你用 SAP UI5 進行 Web App 開發，但沒有按照 Fiori Design Guideline，你開發出來的叫 SAP UI5 App
- 只要按照 Fiori Design Guideline 進行開發，不論是用 UI5, iOS / Android SDK，都叫作 SAP Fiori App
- SAP UI5，一套基於 JavaScript、CSS、HTML5，
由 SAP 所開發維護的「響應式網頁開發框架 (Responsive Web Development Framework)」 - 我雖然常常出去介紹 Fiori / UI5 開發，但身為 ERP 老用戶，
我還是蠻愛 SAP GUI 的哈哈哈。 - Fiori 的確好看很多，更現代化，也比較好上手學習。
Neo Kung | 2021.05.31
參考資料 References
- Short History of SAP GUI : http://sapnetweavernotes.blogspot.com/2007/12/short-history-of-sap-gui.html
- WebDynpro ABAP https://nigeljames.wordpress.com/tag/web-dynpro-abap/
- SAP UI5 Demo SDK https://sapui5.hana.ondemand.com/
