這是Jerry 2021年的第 21 篇文章，也是汪子熙公眾號總共第 292 篇原創文章。
最近一段時間, Jerry 陸續把自己在 SAP Commerce Cloud (電商雲) 新一代前臺頁面開發的日常工作中遇到的一些問題和心得，寫成了文章：
- 從一個實際的例子出發，談談SAP Commerce Cloud電商雲的UI自定義開發
- SAP Commerce Cloud (電商雲) UI 的懶載入功能
- SAP CRM Fiori 應用和 SAP Commerce Cloud (電商雲) UI 如何透過調整CSS來改變UI顯示風格
- SAP 產品一脈相承的 UI 增強思路，在 SAP Commerce Cloud (電商雲) UI 增強實現中的體現
有朋友在文章留言，詢問是否可能在本地搭一個 SAP 電商雲的執行環境，來學習基於 SAP Spartacus 的新一代電商雲前臺 ( SAP Spartacus ) 的設計。
這個願望當然是可以實現的。SAP Commerce Cloud (電商雲) 的部署方式非常靈活：不僅能託管在 SAP 自己的基礎設施 (infrastructure) 上，也能架設在第三方公有云上。當然，也仍然支援採用以前傳統的 Hybris On-Premises 本地部署方式。
實際上，SAP Spartacus 的幫助網站上，給出瞭如何在本地搭建 SAP Commerce Cloud 前後臺執行環境的具體步驟：
https://sap.github.io/spartac...
Jerry 自己試過，只要按照網頁裡描述的步驟一步步操作，如果一切順利的話，一個小時之內，即可完成 SAP 電商雲前後臺的搭建，得到一個能夠正常執行的環境。
首先從 SAP Software Center 網站下載 SAP Commerce Cloud 的安裝包，我選擇的是 2011版本：
https://launchpad.support.sap...
將下載到本地的安裝包解壓，按照下列文件介紹的步驟，在 installer/recipes 資料夾內基於 cx 複製一個新的資料夾 cx-for-spa 出來，從而新建了一個基於 Spartacus 的安裝 recipes.
https://sap.github.io/spartac...
將該 recipes 目錄內的 build.gradle 檔案內，extensions 列表區域的 spartacussampledata 的註釋去掉，從而讓該 recipes 啟用對 SAP Spartacus 的支援。
接下來是 SAP Commerce 安裝的老三樣了，依次執行下列三個命令：
./install.sh -r cx-for-spa
./install.sh -r cx-for-spa initialize
./install.sh -r cx-for-spa start
cx-for-spa recipe裡啟用的 spartacussampledata extension，裡面包含了很多測試資料。在上面第二條命令，進行 Commerce 平臺 initialization 時，會將這些測試資料匯入 SAP Commerce 的資料庫。
安裝完畢後，瀏覽器裡使用 localhost 的主機名，檢查本地安裝的 SAP Commerce，其 Admin Console，Backoffice 和 基於 JSP 的 Accelerator Storefront 是否能夠正常開啟：
- Admin Console: https://localhost:9002
- Backoffice: https://localhost:9002/backoffice
- Accelerator Storefront: https://localhost:9002/yacceleratorstorefront/?site=electronics
這三個 url 開啟的介面外觀依次如下三個截圖所示：
上圖就是基於 JSP 技術的 SAP Commerce 傳統的 Accelerator Storefront，按照 SAP 官網的說法，Accelerator Storefront 終究將會被 SAP Commerce 新一代的 Spartacus UI 所取代。
https://sap.github.io/spartac...
下面進行 SAP Spartacus 的安裝。
https://sap.github.io/spartac...
步驟和 SAP Commerce 的安裝流程相比簡單了不少，一個命令就能搞定。不過要注意，安裝之前，確保下面羅列的三個工具，在本地具有文件內規定的版本號：
- Angular CLI
- Node.js
- Yarn
首先 ng new samplestore, 建立一個名為 samplestore 的 Angular 應用：
進入建立好的 samplestore 目錄，使用下面的命令列，能夠安裝預設支援 B2C 功能的 Spartacus Storefront：
ng add @spartacus/schematics
如果想支援 B2B 功能，待上面的命令列成功執行完畢後，再執行下面的命令列：
ng add @spartacus/organization
所有的命令列成功執行完畢後，開啟 app.module.ts 檔案，將配置節點 backend.occ.baseUrl 欄位指定為我們本地安裝的 SAP Commerce 例項即可：
https://localhost:9002
還記得之前 Jerry 的文章：Jerry在2020 SAP全球技術大會的分享：SAP Spartacus技術介紹的文字版 裡介紹的一點：SAP Spartacus 100% 的 API 驅動特性麼？
SAP Spartacus 正是透過這個配置好的 https://localhost:9002/occ/v2 endpoint, 呼叫 Angular 提供的 HTTP 庫，消費本地安裝的 SAP Commerce 提供的 Restful API, 將資料呈現在用 Angular 開發而成的 Spartacus 單頁面應用裡。
ng serve 命令啟用這個安裝好的 Angular 應用，在 Chrome 開發者工具 Network 標籤裡，能觀察到 SAP Spartacus 的 Restful API 呼叫。
如果大家在搭建 SAP Commerce Cloud 前後臺執行環境時遇到問題，歡迎留言討論。
感謝閱讀。
更多閱讀
- 從產品展示頁面談談Hybris的特有概念和設計結構
- 從產品展示頁面談談Hybris系列之二: DTO, Converter和Populator
- Hybris Enterprise Commerce Platform 服務層的設計與實現
- 從一個實際的例子出發，談談SAP Commerce Cloud電商雲的UI自定義開發
- SAP Commerce Cloud (電商雲) UI 的懶載入功能
- SAP CRM Fiori 應用和 SAP Commerce Cloud (電商雲) UI 如何透過調整CSS來改變UI顯示風格
- SAP 產品一脈相承的 UI 增強思路，在 SAP Commerce Cloud (電商雲) UI 增強實現中的體現
- Jerry在2020 SAP全球技術大會的分享：SAP Spartacus技術介紹的文字版
更多Jerry的原創文章，盡在："汪子熙":
