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

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

我自己 2014 年底，出於工作需要學習 SAP UI5 時，把 SAP UI5 官網上提供的一套 Walkthrough (這個詞的中文翻譯應該是教程，輔導，攻略) 認真做了一遍，其中的程式碼一個字元一個字元照著敲了一遍，很快就可以上手工作了。後來有新同事入職到我們團隊時，我也推薦這套教程讓新同事們學習。

這是 SAP 官網例子程式的[網址](https://sapui5.hana.ondemand.com/#/demoapps)，包含了大量 SAP UI5 例子程式可供下載：

![](https://img-blog.csdnimg.cn/img_convert/cf12f16c5b98d06a2e4e70506462d6ea.png)

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

![](https://img-blog.csdnimg.cn/img_convert/deaa87e13bd38c83b56b98a989544bcd.png)

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

![](https://img-blog.csdnimg.cn/img_convert/888efde1279279dcc52511575e872de0.png)

每個步驟均是在前一步驟的基礎上，新增新的特性，實現一個新目標。既有文字描述，也有較之前一步驟，需要新開發的程式碼塊, 這些程式碼塊透過黃色高亮顯示如下圖所示：

![](https://img-blog.csdnimg.cn/img_convert/b01adfaa7c9eca6d5134975ca473de6b.png)

如果迫不及待想檢視，根據這 38 個步驟做完之後的 SAP UI5 長什麼樣，可以從官網直接下載最終的完成版：

![](https://img-blog.csdnimg.cn/img_convert/60db552bcabf42ecd151a83f68fabaca.png)

Jerry 的技術交流群裡，有朋友提了一個問題：從 SAP 官網下載的這些 SAP UI5 示例工程檔案，如何在本地 IDE 比如 Visual Studio Code 裡啟動？

![](https://img-blog.csdnimg.cn/img_convert/e1ef11c4d3524bff4e9944f09c4ba17a.png)

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

![](https://img-blog.csdnimg.cn/img_convert/a82ab6e4816946d2c58df77894a216eb.png)

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

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

![](https://img-blog.csdnimg.cn/img_convert/0917e2e005a5aa721054c96e90c7c9af.png)

webapp 資料夾裡的目錄結構：

![](https://img-blog.csdnimg.cn/img_convert/e516a2efca1fd723c3432bb40a8f3a25.png)

我們直接用瀏覽器開啟 SAP UI5 應用的入口頁面 index.html, 是無法看到期望的應用正常執行的，因為 SAP UI5 應用需要部署在本地或者遠端的 Web 應用伺服器裡執行。

![](https://img-blog.csdnimg.cn/img_convert/386aafa0e6f78497225b556f8e415f39.png)

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

![](https://img-blog.csdnimg.cn/img_convert/f357da21eae0f3dbf7178c66a9ea4ecf.png)

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

![](https://img-blog.csdnimg.cn/img_convert/cc507357bf8085e2707d2e867d282381.png)

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

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

把 Visual Studio Code 的目錄新增到 Path 環境變數裡，這樣我們可以在命令列裡，使用 code 命令啟動它了：

![](https://img-blog.csdnimg.cn/img_convert/d7c7a9ca67e6346bcdeb59f40a49b3b0.png)

進入下載並解壓的 Walkthrough 資料夾裡，使用 code . 命令啟動 Visual Studio Code (其中 . 代表當前目錄)。

![](https://img-blog.csdnimg.cn/img_convert/76e383f7776e1fbe3cf29eb49c5b486f.png)

安裝名為 UI5-Tools 的 Visual Studio Code 擴充套件：

![](https://img-blog.csdnimg.cn/img_convert/d3c33f93ec3632105234a4f4234ce7e9.png)

這個擴充套件提供了一個嵌入的 Web 伺服器，預設名稱為 UI5 Server, 埠號為 3000. 在擴充套件配置裡能夠對這些預設設定做修改。

![](https://img-blog.csdnimg.cn/img_convert/5b506255f322a95ba6fe9de7a6da51dd.png)

選中 webapp 資料夾下的 index.html, 點選下圖紅色高亮圖示，啟動該嵌入 Web 伺服器：

![](https://img-blog.csdnimg.cn/img_convert/f702641df2aacb7eb6856d07db92c8fb.png)

因為目前該嵌入伺服器上只部署了 Walkthrough 這一個應用，所以單擊唯一的 tile，即可開啟 Walkthrough 應用：

![](https://img-blog.csdnimg.cn/img_convert/d546aa7ac38ead8ac3bdffe390f6d602.png)

啟動的 Walkthrough 應用如下圖所示：

![](https://img-blog.csdnimg.cn/img_convert/7ebc2e82c9302ba8a6a749c4307965b8.png)

# 方法2：使用 nodejs express

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

如果不想使用 UI5-Tools 提供的嵌入 Web 伺服器，我們可以用 nodejs express 來代替。

從 Jerry 文章 [一個用於SAP UI5學習的腳手架應用，沒有任何後臺API的依賴](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247490638&idx=1&sn=2d48eeb6c0004950adaa97703e648796&chksm=ead5aed9dda227cf7b42b0f5f002a2517648f941695db22ddc09afa8725e1ca7960d69f4863e&scene=21#wechat_redirect) 提到的程式碼倉庫，下載該應用到本地：

https://github.com/wangzixi-diablo/WebAppCollection

這個 nodejs 應用的核心程式碼，位於檔案 local.js 裡，下圖高亮區域的語義是：

*   如果 localhost:3002 後面加上 **/ui5**，就用 express 載入 **webapp** 資料夾裡的 index.html 檔案

*   如果 localhost:3002 後面加上 **/wt**，就用 express 載入 **walkthrough** 資料夾裡的 index.html 檔案

*   以此類推。

![](https://img-blog.csdnimg.cn/img_convert/9f1dabffb390b55f6787c17e8f6bb9dc.png)

因此，對於方法2，我們先把 Jerry 的腳手架應用下載到本地，然後進入其目錄，新建一個 forwechatblogs 資料夾，最後把 SAP UI5 官網下載的例子工程的 webapp 資料夾裡全部的內容，複製到 forwechatblogs 資料夾裡即可。

別忘了在 Jerry 腳手架應用的 local.js 檔案裡，增添一行如上圖第12行程式碼，告訴 express，當 url /wechatexample 被訪問時, 載入 forwechatblogs 資料夾裡的 index.html 檔案。

![](https://img-blog.csdnimg.cn/img_convert/dc3518a49df8786aa694c807e21e5acb.png)

最後，用命令列啟動腳手架應用：

> node local.js

![](https://img-blog.csdnimg.cn/img_convert/b49017e1bf582bc2398e8ffe36d1dea4.png)

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

![](https://img-blog.csdnimg.cn/img_convert/47878f8351dde9e64d5bcf7b307cfe41.png)

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

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

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

![](https://img-blog.csdnimg.cn/img_convert/1d84940ab6ac92c594059bdbaac14ae8.png)

此外，如果想使用線上工具，SAP Business Technology Platform (即以前的 SAP雲平臺) 提供的 Full-Stack WebIDE 和 Business Application Studio，也可以用來開發 SAP UI5 應用。因為本文著重介紹的是本地開發，所以這裡略過。想嘗試 Business Application Studio 的朋友，請參考這個[連結](https://sapui5.hana.ondemand.com/#/topic/6bbad66475d040f39df6fbbaabe6f40f)裡的步驟。

![](https://img-blog.csdnimg.cn/img_convert/ef024512af93239c4f51ac1181bfc62a.png)

感謝閱讀。

**更多閱讀**

(0) [SAP UI5應用開發人員瞭解UI5框架程式碼的意義](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247490624&idx=1&sn=355253156bec497d2d51925010feb8c1&chksm=ead5aed7dda227c1dd97a0ba5d24eb1d91415eadca97ec0f540cf49beaa6a699d734d5ce4f2c&scene=21#wechat_redirect)

(1) [SAP UI5 module懶載入機制](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247490700&idx=1&sn=5aa8829849e249b31cc390e644b0cc6b&chksm=ead5ae1bdda2270d5c99f2e6b0649f4ad3e4eafc00f43be88fa89cfce8de134d0db24db3d9e7&scene=21#wechat_redirect)

(2) [SAP UI5 控制元件渲染機制](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247490725&idx=1&sn=a99eaa85624d62fd9a8d5eb0fe382ace&chksm=ead5ae32dda2272447f691827b4a960dac4188adb9c82f8c29815531ba9a7939530153b00f17&scene=21#wechat_redirect)

(3) [HTML原生事件 VS SAP UI5 Semantic事件](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247490756&idx=1&sn=72ad4fbfc919bc53a136ac2871890e46&chksm=ead5ae53dda227453a4e9d92400a6c2e17957b3040db928102d42a86a7d295d023b938c2c1ec&scene=21#wechat_redirect)

(4) [SAP UI5控制元件後設資料的後設資料實現](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247491142&idx=1&sn=82b67f87d392f7e6a9c233f5a3f9b14b&chksm=ead5acd1dda225c7bec3b4c41e80c189a8b74359ececbff761bebacd2f8189633cac5f7a84a2&scene=21#wechat_redirect)

(5) [SAP UI5控制元件的例項資料修改和讀取邏輯](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247491167&idx=1&sn=5b69e73118bfee9f399d941bc4be026f&chksm=ead5acc8dda225de8e92d10c3909280dfcb7d754b985ba268c1ed5e836137709ef23ac140744&scene=21#wechat_redirect)

(6) [SAP UI5控制元件資料繫結的實現原理](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247491196&idx=1&sn=d5516ab572a9a292f40014361ddc1453&chksm=ead5acebdda225fd6cc100f2a5f9281d30aaeb238aa3801473c20614f093fb074c9c179337d5&scene=21#wechat_redirect)

(7) [SAP UI5控制元件資料繫結的三種模式：One Way, Two Way和OneTime實現原理比較](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247491221&idx=1&sn=abaecc29eec83383f38ef5d79e98fa79&chksm=ead5ac02dda22514745c0762ecbed0b56116d9c80595cb1f4bc5fb863629da60cd71edefdd54&scene=21#wechat_redirect)

(8) [談談 SAP UI5 的檢視控制元件 ID，以及其和 Angular 檢視的異同](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247492187&idx=1&sn=a8dbaa645c472b5c22771e512ed1b971&chksm=ead650ccdda1d9dab86ba16fb71ea5e90aa15918f3e3ac2c4237c9f5f03d51a12dac40280e70&scene=21#wechat_redirect)

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

(10) XML檢視裡的button控制元件

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

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

相關文章