这是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 的支持。
接下来是 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/spartacus-docs/spartacus-faq/
下面进行 SAP Spartacus 的安装。
https://sap.github.io/spartacus-docs/building-the-spartacus-storefront-from-libraries/
步骤和 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的原创文章，尽在："汪子熙":
