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