這是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/spartacus-docs/building-the-spartacus-storefront-from-libraries/Jerry 自己試過，隻要按照網頁裡描述的步驟一步步操作，如果一切順利的話，一個小時之内，即可完成 SAP 電商雲前背景的搭建，得到一個能夠正常運作的環境。
首先從 SAP Software Center 網站下載下傳 SAP Commerce Cloud 的安裝包，我選擇的是 2011版本：
https://launchpad.support.sap.com/#/softwarecenter/template/products/_APP=00200682500000001943&_EVENT=NEXT&HEADER=Y&FUNCTIONBAR=Y&EVENT=TREE&NE=NAVIGATE&ENR=67837800100800007216&V=MAINT&TA=ACTUAL/SAP%20COMMERCE
将下載下傳到本地的安裝包解壓，按照下列文檔介紹的步驟，在 installer/recipes 檔案夾内基于 cx 拷貝一個新的檔案夾 cx-for-spa 出來，進而建立了一個基于 Spartacus 的安裝 recipes.
https://sap.github.io/spartacus-docs/installing-sap-commerce-cloud-2011/将該 recipes 目錄内的 build.gradle 檔案内，extensions 清單區域的 spartacussampledata 的注釋去掉，進而讓該 recipes 啟用對 SAP Spartacus 的支援。
依次執行下列三個指令：
./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/spartacus-docs/spartacus-faq/ 下面進行 SAP Spartacus 的安裝。
步驟和 SAP Commerce 的安裝流程相比簡單了不少，一個指令就能搞定。不過要注意，安裝之前，確定下面羅列的三個工具，在本地具有文檔内規定的版本号：
Angular CLI
Node.js
Yarn
首先 ng new samplestore, 建立一個名為 samplestore 的 Angular 應用：
如果想支援 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 前背景運作環境時遇到問題，歡迎留言讨論。