這是Jerry 2021年的第 21 篇文章，也是汪子熙公眾號總共第 292 篇原創文章。

最近一段時間, Jerry 陸續把自己在 SAP Commerce Cloud (電商雲) 新一代前臺頁面開發的日常工作中遇到的一些問題和心得，寫成了文章：

*   [從一個實際的例子出發，談談SAP Commerce Cloud電商雲的UI自定義開發](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247491695&idx=1&sn=6affe95459e8d5f1e998fdc426b8d759&chksm=ead652f8dda1dbee864b66a033bc6a39877fbd9f83225ee057624c5f47c8516f4782757f94a2&scene=21#wechat_redirect)

*   [SAP Commerce Cloud (電商雲) UI 的懶載入功能](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247491712&idx=1&sn=4605662c08eb81ee5f3bcaf8a10a9464&chksm=ead65217dda1db01397065181b534b66270eab3336894adda387f91a7ec69f37f5d8c35c099c&scene=21#wechat_redirect)

*   [SAP CRM Fiori 應用和 SAP Commerce Cloud (電商雲) UI 如何透過調整CSS來改變UI顯示風格](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247491736&idx=1&sn=f65bbda4e8b2226ab3c9d4fc4d8a5919&chksm=ead6520fdda1db19c7d3d1b4d50005eedc7da7df4e99b4784ea287dadd03c16278e9e3d8baf3&scene=21#wechat_redirect)

*   [SAP 產品一脈相承的 UI 增強思路，在 SAP Commerce Cloud (電商雲) UI 增強實現中的體現](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247491759&idx=1&sn=3243302470e47a3e472960c0e78d9c1e&chksm=ead65238dda1db2e7dc008ee5f1db0710b815dcac3d8787fb6f00337422a3fd06310cecf547a&scene=21#wechat_redirect)

有朋友在文章留言，詢問是否可能在本地搭一個 SAP 電商雲的執行環境，來學習基於 SAP Spartacus 的新一代電商雲前臺 ( SAP Spartacus ) 的設計。

這個願望當然是可以實現的。SAP Commerce Cloud (電商雲) 的部署方式非常靈活：不僅能託管在 SAP 自己的基礎設施 (infrastructure) 上，也能架設在第三方公有云上。當然，也仍然支援採用以前傳統的 Hybris On-Premises 本地部署方式。

![](https://img-blog.csdnimg.cn/img_convert/8d8a351a37c52e7dd0d1b0110964dcc8.png)

實際上，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

![](https://img-blog.csdnimg.cn/img_convert/b4718a4f125da44281d9f3dda0d73918.png)

將下載到本地的安裝包解壓，按照下列文件介紹的步驟，在 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 的支援。

![](https://img-blog.csdnimg.cn/img_convert/fc375a1d1d687e3736e871936b9026bd.png)

接下來是 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 開啟的介面外觀依次如下三個截圖所示：

![](https://img-blog.csdnimg.cn/img_convert/c238cbb23ba23b4d0292b3d9b30cf78e.png)

![](https://img-blog.csdnimg.cn/img_convert/d30539cc4a6627590bf89f162b462e8c.png)

![](https://img-blog.csdnimg.cn/img_convert/6f4e89cab9bb64d782c9029eea9957f8.png)

上圖就是基於 JSP 技術的 SAP Commerce 傳統的 Accelerator Storefront，按照 SAP 官網的說法，Accelerator Storefront 終究將會被 SAP Commerce 新一代的 Spartacus UI 所取代。

https://sap.github.io/spartacus-docs/spartacus-faq/

![](https://img-blog.csdnimg.cn/img_convert/14a7f37e3719a87a83cbfe05987c91cb.png)

下面進行 SAP Spartacus 的安裝。

https://sap.github.io/spartacus-docs/building-the-spartacus-storefront-from-libraries/

步驟和 SAP Commerce 的安裝流程相比簡單了不少，一個命令就能搞定。不過要注意，安裝之前，確保下面羅列的三個工具，在本地具有文件內規定的版本號：

* Angular CLI
* Node.js
* Yarn

![](https://img-blog.csdnimg.cn/img_convert/927c62c60308de6c576adfe7a2530c80.png)

首先 ng new samplestore, 建立一個名為 samplestore 的 Angular 應用：

![](https://img-blog.csdnimg.cn/img_convert/6602066a428791a43c08e04ef13ba7fb.png)

進入建立好的 samplestore 目錄，使用下面的命令列，能夠安裝預設支援 B2C 功能的 Spartacus Storefront：

ng add @spartacus/schematics

![](https://img-blog.csdnimg.cn/img_convert/bba3971dc53aefb34af1d0e9cbfac162.png)

如果想支援 B2B 功能，待上面的命令列成功執行完畢後，再執行下面的命令列：

ng add @spartacus/organization

所有的命令列成功執行完畢後，開啟 app.module.ts 檔案，將配置節點 backend.occ.baseUrl 欄位指定為我們本地安裝的 SAP Commerce 例項即可：

https://localhost:9002

![](https://img-blog.csdnimg.cn/img_convert/e2e2463df94e5a2a4250c1a33280953a.png)

還記得之前 Jerry 的文章：[**Jerry在2020 SAP全球技術大會的分享：SAP Spartacus技術介紹的文字版**](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247490911&idx=1&sn=ab86c37e6ceb32b5037bce86bf7ea69f&chksm=ead5afc8dda226deb2e9bba385fed2397ddc7f746360200bf21d4f22bf57dd84b444dcd9663e&scene=21#wechat_redirect) 裡介紹的一點：SAP Spartacus **100% 的 API 驅動特性**麼？

![](https://img-blog.csdnimg.cn/img_convert/d904a901542dc25cafe06b5576d777f7.png)

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 呼叫。

![](https://img-blog.csdnimg.cn/img_convert/4810658734e3aef102065663dc59c3a4.png)

如果大家在搭建 SAP Commerce Cloud 前後臺執行環境時遇到問題，歡迎留言討論。

感謝閱讀。

**更多閱讀**

*   [從產品展示頁面談談Hybris的特有概念和設計結構](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247483969&idx=1&sn=06adb0a08f9a8e1177842a736bbb1efe&chksm=ead5b0d6dda239c0972f2cbceefe9884c75be07d03f087f0706463b16cc532823802d7891b6c&scene=21#wechat_redirect)

*   [從產品展示頁面談談Hybris系列之二: DTO, Converter和Populator](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247484094&idx=1&sn=eb80fa4ac5c19066c343f7e9dbf850fb&chksm=ead5b029dda2393f58a1e46eb219db1dd724d654bdb89976ca16af0c42d59d2f55b21c10be38&scene=21#wechat_redirect)

*   [Hybris Enterprise Commerce Platform 服務層的設計與實現](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247485067&idx=1&sn=aba6d36b14f03274e7a714e7d8413b90&chksm=ead5b41cdda23d0a07cf3a76dc6c6fe99dd7ba795d04ce7d358664ddffe3e0a96d8a6b8e034c&scene=21#wechat_redirect)

*   [從一個實際的例子出發，談談SAP Commerce Cloud電商雲的UI自定義開發](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247491695&idx=1&sn=6affe95459e8d5f1e998fdc426b8d759&chksm=ead652f8dda1dbee864b66a033bc6a39877fbd9f83225ee057624c5f47c8516f4782757f94a2&scene=21#wechat_redirect)

*   [SAP Commerce Cloud (電商雲) UI 的懶載入功能](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247491712&idx=1&sn=4605662c08eb81ee5f3bcaf8a10a9464&chksm=ead65217dda1db01397065181b534b66270eab3336894adda387f91a7ec69f37f5d8c35c099c&scene=21#wechat_redirect)

*   [SAP CRM Fiori 應用和 SAP Commerce Cloud (電商雲) UI 如何透過調整CSS來改變UI顯示風格](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247491736&idx=1&sn=f65bbda4e8b2226ab3c9d4fc4d8a5919&chksm=ead6520fdda1db19c7d3d1b4d50005eedc7da7df4e99b4784ea287dadd03c16278e9e3d8baf3&scene=21#wechat_redirect)

*   [SAP 產品一脈相承的 UI 增強思路，在 SAP Commerce Cloud (電商雲) UI 增強實現中的體現](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247491759&idx=1&sn=3243302470e47a3e472960c0e78d9c1e&chksm=ead65238dda1db2e7dc008ee5f1db0710b815dcac3d8787fb6f00337422a3fd06310cecf547a&scene=21#wechat_redirect)

*   [Jerry在2020 SAP全球技術大會的分享：SAP Spartacus技術介紹的文字版](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247490911&idx=1&sn=ab86c37e6ceb32b5037bce86bf7ea69f&chksm=ead5afc8dda226deb2e9bba385fed2397ddc7f746360200bf21d4f22bf57dd84b444dcd9663e&scene=21#wechat_redirect)

一小時內在本地搭建SAP Commerce Cloud(電商雲)的前後臺執行環境

相關文章