Jerry的系列透過最簡單的button控制元件，深入學習SAP UI5框架程式碼系列之零裡面曾經提到，我們會使用單步除錯的方式，來學習SAP UI5框架的部分原始碼實現。

如果找一個現成的SAP UI5應用來除錯，勢必會增加我們除錯的複雜度，所以對於這類除錯任務，Jerry最喜歡的方式就是首先搭建一個小的腳手架應用(即很多英文的前端開發部落格裡提到的scaffold)，隔離所有不必要的依賴，只包含了待除錯的最小範圍的特性(mini scope).

以本系列為例，自始至終我們使用的SAP UI5應用，只包含一個最簡單的button控制元件。

Jerry已經準備好了這樣一個應用，放在我的 github上，大家可以下載或者clone到本地。

進入專案資料夾下，首先執行命令列npm install, 然後執行node local.js(當然，你需要首先安裝npm和nodejs).

看到Example app listens on port 3000後，瀏覽器輸入localhost:3000/wt即可看到僅包含了一個button控制元件的SAP UI5頁面：

可以用任何文字編輯器開啟這個資料夾，該頁面的原始碼在walkthrough子資料夾的index.html裡：

上圖高亮部分的原始碼，即SAP UI5 button控制元件的建立程式碼，可以直接從下面SAP UI5官網上複製獲得：

(Jerry寫這個英文系列時用的button來自sap.ui.commons名稱空間，在最新版本的UI5裡面已經depreciated了，SAP推薦使用sap.m名稱空間下的新button控制元件)

瀏覽器裡輸入另一個url：

能看到一個典型的Fiori Master-Detail風格的應用，左邊的Master List裡顯示服務訂單列表，任意點選一個，在螢幕右邊能看到該訂單的明細頁面。

該應用也展示了Master List裡的搜尋，以及根據選中的服務訂單欄位(Amount,State)進行聚合的功能，以及SAP UI5的頁面跳轉功能實現。

最重要的是，這個腳手架應用沒有引入任何後臺API的依賴。

這個Master-Detail的應用實現在webapp資料夾下。在webapp資料夾下的Component.js裡，能看到直接使用了本地儲存的json檔案作為model的資料來源：

這個腳手架應用基於nodejs，可以用命令cf push上傳到SAP雲平臺的CloudFoundry環境，或者直接將整個資料夾複製到阿里雲/騰訊雲這類虛擬主機上，然後直接執行命令列node local.js啟動應用。

具體步驟在我之前的文章如何在阿里雲上執行SAP UI5應用裡有介紹。

本系列的所有文章，都會使用本文介紹的腳手架應用來除錯SAP UI5的框架程式碼。感謝閱讀。

系列目錄

要獲取更多Jerry的原創文章，請關注公眾號"汪子熙":

一個用於SAP UI5學習的腳手架應用，沒有任何後臺API的依賴