这是 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 的原创文章，尽在：” 汪子熙 ”: