這是 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的原創文章，盡在："汪子熙":
