對 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-diablo/WebAppCollection

這個 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

通過觀察浏覽器位址欄能夠看出，通過 express，可以自定義通路 SAP UI5 應用的 url.

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

https://tools.hana.ondemand.com/#sapui5

此外，如果想使用線上工具，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元素