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

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

通過觀察瀏覽器地址欄能夠看出，通過 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元素

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

總結

以上是生活随笔為你收集整理的对 SAP UI5 一无所知的新手，从哪些材料开始学习比较好？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。