對 SAP UI5 一無所知的新手，從哪些材料開始學習比較好？

這是 Jerry 2021 年的第 32 篇文章，也是汪子熙公衆號總共第 308 篇原創文章。

我常常收到很多朋友這樣的問題：若是對 SAP UI5 一無所知的新手，想學習 SAP UI5，從哪些材料開始學習比較好？有沒有一些推薦的書？

我本身 2014 年末，出於工做須要學習 SAP UI5 時，把 SAP UI5 官網上提供的一套 Walkthrough (這個詞的中文翻譯應該是教程，輔導，攻略) 認真作了一遍，其中的代碼一個字符一個字符照着敲了一遍，很快就能夠上手工做了。後來有新同事入職到咱們團隊時，我也推薦這套教程讓新同事們學習。

這是 SAP 官網例子程序的網址，包含了大量 SAP UI5 例子程序可供下載：

滑動屏幕到下方，就能看到 Walkthrough 這套教程了。

該教程包含 38 個步驟，涵蓋了 SAP UI5 開發和單元測試的方方面面，按照教程最終能作出一個 SAP UI5 應用。

每一個步驟均是在前一步驟的基礎上，添加新的特性，實現一個新目標。既有文字描述，也有較以前一步驟，須要新開發的代碼塊, 這些代碼塊經過黃色高亮顯示以下圖所示：

若是火燒眉毛想查看，根據這 38 個步驟作完以後的 SAP UI5 長什麼樣，能夠從官網直接下載最終的完成版：

Jerry 的技術交流羣裏，有朋友提了一個問題：從 SAP 官網下載的這些 SAP UI5 示例工程文件，如何在本地 IDE 好比 Visual Studio Code 裏啓動？

以前從事 ABAP 開發的朋友，剛接觸 SAP UI5，可能會遇到相似問題：SAP UI5 官網下載的例子，不知道如何本地運行。

本文就來幫助這些只有 ABAP 背景的朋友們來解決這個不少 SAP UI5 初學者都會遇到的問題。

首先解壓官網下載的工程文件壓縮包，發現包含 webapp 文件夾，和兩個文件 package.json 以及 ui5.yaml.

webapp 文件夾裏的目錄結構：

咱們直接用瀏覽器打開 SAP UI5 應用的入口頁面 index.html, 是沒法看到指望的應用正常運行的，由於 SAP UI5 應用須要部署在本地或者遠端的 Web 應用服務器裏運行。

我在本身的技術交流羣裏，曾建議想在本地進行 SAP UI5 開發的朋友們，學一點簡單的 nodejs 基礎，至少會用 npm 和 node 的基本命令。

在本地安裝好 npm 和 node 工具，在命令行裏使用它們。

下面介紹兩種將下載的 SAP UI5 應用在本地啓動的方式。

方法1：使用 Visual Studio Code 啓動 SAP UI5 應用

把 Visual Studio Code 的目錄添加到 Path 環境變量裏，這樣咱們能夠在命令行裏，使用 code 命令啓動它了：

進入下載並解壓的 Walkthrough 文件夾裏，使用 code . 命令啓動 Visual Studio Code (其中 . 表明當前目錄)。

安裝名爲 UI5-Tools 的 Visual Studio Code 擴展：

這個擴展提供了一個嵌入的 Web 服務器，默認名稱爲 UI5 Server, 端口號爲 3000. 在擴展配置裏可以對這些默認設置作修改。

選中 webapp 文件夾下的 index.html, 點擊下圖紅色高亮圖標，啓動該嵌入 Web 服務器：

由於目前該嵌入服務器上只部署了 Walkthrough 這一個應用，因此單擊惟一的 tile，便可打開 Walkthrough 應用：

啓動的 Walkthrough 應用以下圖所示：

方法2：使用 nodejs express

express 是基於 nodejs 平臺的一個 web 開發框架，只需短短几行語句就能實現一個簡單的 web 服務器。

若是不想使用 UI5-Tools 提供的嵌入 Web 服務器，咱們能夠用 nodejs express 來代替。

從 Jerry 文章 一個用於SAP UI5學習的腳手架應用，沒有任何後臺API的依賴 提到的代碼倉庫，下載該應用到本地：

https://github.com/wangzixi-d...

這個 nodejs 應用的核心代碼，位於文件 local.js 裏，下圖高亮區域的語義是：

• 若是 localhost:3002 後面加上 /ui5，就用 express 加載 webapp 文件夾裏的 index.html 文件
• 若是 localhost:3002 後面加上 /wt，就用 express 加載 walkthrough 文件夾裏的 index.html 文件
• 以此類推。

所以，對於方法2，咱們先把 Jerry 的腳手架應用下載到本地，而後進入其目錄，新建一個 forwechatblogs 文件夾，最後把 SAP UI5 官網下載的例子工程的 webapp 文件夾裏所有的內容，拷貝到 forwechatblogs 文件夾裏便可。

別忘了在 Jerry 腳手架應用的 local.js 文件裏，增添一行如上圖第12行代碼，告訴 express，當 url /wechatexample 被訪問時, 加載 forwechatblogs 文件夾裏的 index.html 文件。

最後，用命令行啓動腳手架應用：

node local.js

使用 localhost:3002/wechatexample 便可訪問 SAP UI5 應用了：

經過觀察瀏覽器地址欄可以看出，經過 express，能夠自定義訪問 SAP UI5 應用的 url.

SAP 官網還提到了另一個 SAP UI5 本地開發工具，即 SAP WebIDE Personal Edition, 不過 Jerry 沒有用過。歡迎嘗試過該工具的朋友留言，分享使用體驗。

https://tools.hana.ondemand.c...

此外，若是想使用在線工具，SAP Business Technology Platform (即之前的 SAP雲平臺) 提供的 Full-Stack WebIDE 和 Business Application Studio，也能夠用來開發 SAP UI5 應用。由於本文着重介紹的是本地開發，因此這裏略過。想嘗試 Business Application Studio 的朋友，請參考這個連接裏的步驟。

感謝閱讀。

更多閱讀

(0) SAP UI5應用開發人員瞭解UI5框架代碼的意義

(1) SAP UI5 module懶加載機制

(2) SAP UI5 控件渲染機制

(3) HTML原生事件 VS SAP UI5 Semantic事件

(4) SAP UI5控件元數據的元數據實現

(5) SAP UI5控件的實例數據修改和讀取邏輯

(6) SAP UI5控件數據綁定的實現原理

(7) SAP UI5控件數據綁定的三種模式：One Way, Two Way和OneTime實現原理比較

(8) 談談 SAP UI5 的視圖控件 ID，以及其和 Angular 視圖的異同

(9) SAP UI5控件的多語言(國際化,Internationalization,i18n)支持的實現原理

(10) XML視圖裏的button控件

(11) button控件和它背後的DOM元素

更多Jerry的原創文章，盡在："汪子熙":