Jerry 從 2014 年加入 SAP成都研究院 CRM Fiori 開發團隊之後開始接觸 SAP UI5，曾經在 SAP 社群和“汪子熙”微信公衆号上發表過多篇關于 SAP UI5 工作原理和源碼解析的文章。
在 Jerry 這篇文章對 SAP UI5 一無所知的新手，從哪些材料開始學習比較好？ 曾經提到，Jerry 也是從 SAP UI5 菜鳥一路走過來，深知隻有 ABAP 開發背景的開發者，向 SAP UI5 開發領域轉型的不易，是以我在業餘時間設計了這份适合 SAP UI5 初學者的學習教程，把開發一個完整的 SAP UI5 應用的流程，拆分成若幹個步驟，力求每個步驟裡，把涉及到的知識點都涵蓋到。這些知識點可能不像我的 UI5 源碼分析系列文章那麼深入，但力求淺顯易懂，便于 SAP UI5 初學者了解。
本教程每一個步驟的源代碼，都存放在我的 Github 上，分别用檔案夾 01，02，03 等等來辨別。
每一個步驟均是前一步驟的基礎上，添加了若幹新特性。建議零基礎或者對 SAP UI5 知之甚少的初學者，按照順序從第一個步驟開始循序漸進地學習，把這些代碼下載下傳到本地，配合教程的文字講解，自己動手，以加深了解。
大家如果對教程的每個步驟有任何疑問，歡迎在教程對應的步驟文章裡給我評論，進行留言。
本教程的前一篇 Hello world 的文章，我們隻是了解了一個最基本的 index.html 頁面的開發方式，尚未真正接觸到 SAP UI5.
從本文開始，我們将會在前一步驟的 index.html 的基礎上，導入 SAP UI5 的庫檔案，真正開始 SAP UI5 的學習。
同本教程前一步驟一樣，請在你的 SAP UI5 工程檔案夾下建立一個 02 檔案夾，然後在 02 檔案夾裡再建立一個 webapp 檔案夾。
按照本文完成 02 步驟後，你的 Visual Studio Code 裡呈現的 SAP UI5 項目的檔案夾結構，如下圖所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>SAPUI5 Walkthrough</title>
<script
id="sap-ui-bootstrap"
src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-async="true"
data-sap-ui-resourceroots='{
"sap.ui5.walkthrough": "./"
}'
data-sap-ui-oninit="module:sap/ui5/walkthrough/index">
</script>
</head>
<body>
<div>Hello World</div>
</body>
</html>
本步驟同 01 步驟相比，除了原始的 index.html 裡增添了新内容之外，還多了一個 index.js 檔案。
本步驟完成的效果是，在浏覽器裡打開 index.html 後，除了看到前一步驟的 Hello World 之外，還能看到一個彈出對話框，如下圖所示：
下面詳細介紹本教程的第二步驟。
和步驟一相比，本步驟的 index.html 多了不少内容：
下面逐一介紹。
要點1 SAP UI5 引導檔案
src=“
https://sapui5.hana.ondemand.com/resources/sap-ui-core.js”
這一行語句，指定了 SAP UI5 庫檔案的位址，從網絡加載該 JavaScript 檔案。這個 sap-ui-core.js, 也可以看成是 SAP UI5 應用的引導檔案，所有其他的 UI5 庫檔案，都通過 sap-ui-core.js 裡的代碼負責按需加載。
我們用浏覽器當然是能夠根據 src 裡指定的 url，手動打開這個 sap-ui-core.js 檔案的：
關于更多要點介紹，請參考我的文章：SAP UI5 初學者教程之二：SAP UI5 的引導過程 Bootstrap