Sap

一套适宜 SAP UI5 初学者循序渐进的学习教程教程目录SAP UI5 本地开发环境的搭建SAP UI5 初学者教程之一：Hello WorldSAP UI5 初学者教程之二：SAP UI5 的疏导过程 BootstrapSAP UI5 初学者教程之三：开始接触第一个 SAP UI5 控件SAP UI5 初学者教程之四：XML 视图初探SAP UI5 初学者教程之五：视图控制器初探SAP UI5 初学者教程之六 - 理解 SAP UI5 的模块(Module)概念SAP UI5 初学者教程之七 - JSON 模型初探SAP UI5 初学者教程之八 - 多语言的反对SAP UI5 初学者教程之九 - 创立第一个 ComponentSAP UI5 初学者教程之十 - 什么是 SAP UI5 利用的描述符 Descriptor阐明Jerry 从 2014 年退出 SAP成都研究院 CRM Fiori 开发团队之后开始接触 SAP UI5，已经在 SAP 社区和“汪子熙”微信公众号上发表过多篇对于 SAP UI5 工作原理和源码解析的文章。 在 Jerry 这篇文章 对 SAP UI5 无所不知的老手，从哪些资料开始学习比拟好？ 已经提到，Jerry 也是从 SAP UI5 菜鸟一路走过去，深知只有 ABAP 开发背景的开发者，向 SAP UI5 开发畛域转型的不易，因而我在业余时间设计了这份适宜 SAP UI5 初学者的学习教程，把开发一个残缺的 SAP UI5 利用的流程，拆分成若干个步骤，力求每个步骤里，把波及到的知识点都涵盖到。这些知识点可能不像我的 UI5 源码剖析系列文章那么深刻，但力求浅显易懂，便于 SAP UI5 初学者了解。 ...

一套适宜 SAP UI5 初学者循序渐进的学习教程教程目录SAP UI5 本地开发环境的搭建SAP UI5 初学者教程之一：Hello WorldSAP UI5 初学者教程之二：SAP UI5 的疏导过程 BootstrapSAP UI5 初学者教程之三：开始接触第一个 SAP UI5 控件SAP UI5 初学者教程之四：XML 视图初探SAP UI5 初学者教程之五：视图控制器初探SAP UI5 初学者教程之六 - 理解 SAP UI5 的模块(Module)概念SAP UI5 初学者教程之七 - JSON 模型初探SAP UI5 初学者教程之八 - 多语言的反对阐明Jerry 从 2014 年退出 SAP成都研究院 CRM Fiori 开发团队之后开始接触 SAP UI5，已经在 SAP 社区和“汪子熙”微信公众号上发表过多篇对于 SAP UI5 工作原理和源码解析的文章。 在 Jerry 这篇文章 对 SAP UI5 无所不知的老手，从哪些资料开始学习比拟好？ 已经提到，Jerry 也是从 SAP UI5 菜鸟一路走过去，深知只有 ABAP 开发背景的开发者，向 SAP UI5 开发畛域转型的不易，因而我在业余时间设计了这份适宜 SAP UI5 初学者的学习教程，把开发一个残缺的 SAP UI5 利用的流程，拆分成若干个步骤，力求每个步骤里，把波及到的知识点都涵盖到。这些知识点可能不像我的 UI5 源码剖析系列文章那么深刻，但力求浅显易懂，便于 SAP UI5 初学者了解。 ...

一套适宜 SAP UI5 初学者循序渐进的学习教程教程目录SAP UI5 本地开发环境的搭建SAP UI5 初学者教程之一：Hello WorldSAP UI5 初学者教程之二：SAP UI5 的疏导过程 BootstrapSAP UI5 初学者教程之三：开始接触第一个 SAP UI5 控件SAP UI5 初学者教程之四：XML 视图初探SAP UI5 初学者教程之五：视图控制器初探SAP UI5 初学者教程之六 - 理解 SAP UI5 的模块(Module)概念SAP UI5 初学者教程之七 - JSON 模型初探阐明Jerry 从 2014 年退出 SAP成都研究院 CRM Fiori 开发团队之后开始接触 SAP UI5，已经在 SAP 社区和“汪子熙”微信公众号上发表过多篇对于 SAP UI5 工作原理和源码解析的文章。 在 Jerry 这篇文章 对 SAP UI5 无所不知的老手，从哪些资料开始学习比拟好？ 已经提到，Jerry 也是从 SAP UI5 菜鸟一路走过去，深知只有 ABAP 开发背景的开发者，向 SAP UI5 开发畛域转型的不易，因而我在业余时间设计了这份适宜 SAP UI5 初学者的学习教程，把开发一个残缺的 SAP UI5 利用的流程，拆分成若干个步骤，力求每个步骤里，把波及到的知识点都涵盖到。这些知识点可能不像我的 UI5 源码剖析系列文章那么深刻，但力求浅显易懂，便于 SAP UI5 初学者了解。 ...

最初的成果： 申请的办法类型和 url 都被记录了下来，同响应一起。 设置断点来察看自定义 HTTP interceptor 运行时原理： 咱们自定义的 intercept 也是通过依赖注入的形式被注入到 httpInterceptor 的调度器里。 首先把 method 和 urlWithParams 从 request 里提取进去： 返回的 Observable pipe 办法里的 switchMap 里的处理函数，什么时候会被触发？ 在响应式编程的世界里，不要太在意 switchMap 里指定的函数体是何时被调用的——充斥的全是 rxjs 的回调。 只须要留神 switchMap 里必须返回一个 Observable wrapper 对象。 再看这个 custom interceptor 什么时候被实例化的？ 首先把零碎所有的 HTTP_INTERCEPTORS 注入的实现都取出来，放到数组里，而后应用数组的 reduceRight 办法，逐个调用之。 咱们自定义的 Custom HTTP Interceptor 赫然在数组里，所以能够被调用到： 更多Jerry的原创文章，尽在："汪子熙":

在 page-slot.module.ts 里，定义一个配置对象 ConfigUIDebug. 这个配置对象定义在 cms-component-data.ts 的 ConfigUIDebug 对象里，蕴含一个 boolean 类型字段：switchOn 通过： providers: [provideDefaultConfigFactory(jerryConfigFactory)], 注入到 injection token 里： 给 DefaultConfigChunk 提供了运行时实现。 这样，在运行时，PageSlotComponent 就能够在构造函数里注入全局 Config 对象，进而拜访到字段 switchOn 的值。 最初在 PageSlotComponent html 页面实现里，应用这个开关： 敞开这个开关的 UI： 关上之后的 UI： 更多Jerry的原创文章，尽在："汪子熙":

检查一下都有哪几处应用到了这个字符串常量： (1) 定义 State 数据结构： (2) 用于创立 feature selector，传入 ROUTING_FEATURE 作为输出参数：feature name (3) 在 routing.module.ts 里，作为 StoreModule.forFeature 和 StoreRouterConnectingModule 的输出参数。 对于场景3，咱们看看 StoreModule.forFeature 调用返回的类型为ModuleWithProviders 的数据明细。 每个 module 在导入时，会执行其 ts 代码里的可执行代码： storeModule.forFeature 返回的数据： 这些 providers 我能够在其余 module 里应用吗？ forFeature 的第二个参数必须是 reducer，类型为 ActionReducerMap 或者 ActionReducerMap 的 injection type： Spartacus 抉择的是后者： 更多Jerry的原创文章，尽在："汪子熙":

state，effects，action，reducer 都在这个文件夹里： 在 routing-state.ts 里定义了 RouterState 接口： 继承自 ngrx router 里的 RouterReducerState 类型，类型参数为咱们自定义的 ActivatedRouterStateSnapshot. export interface ActivatedRouterStateSnapshot { url: string; queryParams: Params; params: Params; context: PageContext; cmsRequired: boolean; semanticRoute?: string;}看个例子： interface myType<T,V>{ name: T, value: V};interface jerryType extends myType<string, number>{ score: number;}const a: jerryType = { name: 'Jerry', value: 1, score: 2};其中 state 的类型，须要定义 RouterReducerState 的扩大类型时传入： BaseRouterStoreState 类型：只有一个 url 字段： 咱们自定义的 ActivatedRouterStateSnapshot，extends 了 BaseRouterStoreState，第一个字段就为 url： 看个例子： type jerryType = { name: string};interface mySuperType<T extends jerryType>{ value: T};type superJerryType = { score: number; name: string;}let a: mySuperType<superJerryType> = { value:{ score: 1, name: 'Jerry' }};console.log(a);更多Jerry的原创文章，尽在："汪子熙": ...

CMS page API 负责确定 template 显示哪些 slots，slots 显示哪些 Component： [外链图片转存失败,源站可能有防盗链机制,倡议将图片保留下来间接上传(img-OtPqTaxm-1635227915586)(https://upload-images.jianshu...)] 在 Spartacus layout-config.ts 里，也能定义每个 template 应该显示哪些 slots： 并且可能定义一些全局 section 比方 header，footer 里显示的内容： 在 Spartacus 层面 layout-config.ts 里定义的 pageTemplate - slots 的关系，相比 CMS 后盾具备更高的优先级。 从 layoutSlots 这个数据结构的 where used list 也能看出，Spartacus 代码对它全是读操作，而没有写操作，证实 CMS page API 返回的数据，作用更大的应该是 slots 里蕴含的 Component 信息，这个是 Spartacus 层并未保护的。 更多Jerry的原创文章，尽在："汪子熙":

咱们以前介绍过，通过 SAP Spartacus 路由配置后的 routes 数组，其 route 数据结构的 Component 属性，清一色指向 generic 的 PageLayoutComponent，那么后者怎么晓得本人应该加载哪些 Angular Component 的数据呢？ 咱们首先看看是哪些 template 调用了 PageLayoutComponent 的 selector： 只有三处： 运行时却有到处，这不奇怪，因为 product 明细页面是通过路由加载的，故呈现在 router-outlet 上面。 在其构造函数里加打印语句是杯水车薪的，因为这个 Component 的所有字段都是 Observable 类型，得 subscribe 了能力看到。 所以我在其 @input 字段上设置了一个断点： 渲染触发点是第2行的 cxOutlet，触发第10行的 cx-page-layout Component 的创立： Component 实例(即 PageLayoutComponent)创立结束后，给其 input 属性赋值： 上图的赋值，会触发下图第14行代码执行。 section$ 是一个 subject，其 next 逻辑是遍历其 listener，逐个告诉： 在模板文件 async pipe 执行时，触发 Observable 的执行： ...

这是 Jerry 2021 年的第 67 篇文章，也是汪子熙公众号总共第 344 篇原创文章。 Jerry 从 2007 年大学毕业退出 SAP 成都研究院至今，始终从事企业管理软件畛域的开发工作。 企业管理软件面向的是企业级用户，如果软件呈现故障(bug)，在某些极其状况下，可能会让企业遭受微小的经济损失，故而对软件开发人员在编程标准，软件测试和软件交付之前的验证等各方面都提出了更高的要求。同时，因为企业管理软件本身高度的复杂性，有些故障很难重现或者只能在运行了客户特定业务流程的生产零碎上能力重现。这些都给企业管理软件剖析和故障解决带来了微小的挑战。 本文从 Jerry 解决过的一个理论软件故障登程，谈谈本人对企业管理软件里一些辣手故障的解决领会。 在 Jerry 看来，这些辣手故障，能够分为以下几类。 企业管理软件畛域内辣手故障的一些表现形式我在 SAP 成都研究院解决过很多颇让人头痛的软件故障，它们具备下列一项或几项特色。 1. 须要简单的流程能力重现例如我解决过的 SAP Business ByDesign 里一个客户发票(Customer Invoice)相干的故障。这个故障只有在每次 release 发票时能力重现。为了 release 发票，咱们必须先创立一个销售订单(Sales Order)，基于该订单创立 Customer Demand，而后创立捡货工作(Pick Task)，生成交货单(Delivery Note),最初能力生成一张新的客户发票。 这些简单的流程往往也须要零碎当时保护好对应的主数据(Master Data)和事务数据(Transaction Data)能力顺利执行。简单的业务流程削减了故障重现的难度。 2. 故障横跨企业管理软件的多个模块因为企业管理软件本身的复杂度，终端用户眼中看到的貌似简略的一个故障，背地可能横跨了软件实现的多个模块。 以上述模式 1 形容的故障为例，假如软件帮忙文档上形容的反对性能为：客户在销售订单界面上增加了一个新的自定义字段并保护了对应值，该值可能从销售订单，经捡货工作，交货单，最初传递到客户发票上。咱们称这种字段值从多个文档间的传递称为 data flow. 那么如果客户在发票页面上，看到这个字段的值为空，客户可能认为是发票模块出了故障。然而，在 data flow 的每个节点对应的模块解决，可能都是造成该故障的罪魁祸首。销售订单和客户发票属于 CRM 模块，而捡货工作和发货单则归属 SCM 的领域。 在理论开发工作中，这意味着剖析该故障往往须要跨团队间合作，因为 CRM 和 SCM 模块往往分属不同的开发团队负责。 3. 故障只能在客户生产零碎重现在企业管理软件交付之前，必然在外部开发，测试和验证零碎(validation system)进行过不同档次的测试。即便如此，因为种种客观原因，比方当利用运行在客户生产零碎上，基于某些只有该客户才会用到的特定业务流程的配置时，故障才会裸露，而这些配置并没有被企业管理软件供应商的外部零碎测试所涵盖到。 这类故障因为只能在客户生产零碎重现，在剖析和定位问题时更加困难重重，尤其当重现步骤会在客户生产零碎进行写操作时，通常只能分割客户相干人员，采纳远程桌面+电话会议的形式，让客户相干人员进行操作，而后软件供应商的反对人员在线调试。 ...

看个具体的例子： InjectionToken 构造函数，须要传一个类型参数进去。 这个 ActionReducerMap 的定义很考究： export declare type ActionReducerMap<T, V extends Action = Action> = { [p in keyof T]: ActionReducer<T[p], V>;};应用这个类型时，须要传入两个类型参数 T 和 V，其中 V 的默认值就是 Action. ActionReducerMap<State> 形容了一个对象，其字段名必须是 State 字段的其中之一，该字段的类型为 ActionReducer<T[p],V> 咱们看，State 类型的字段名称正好为 ROUTING_FEATURE 即 'router'： 即下图红色高亮区域： 那么 router 的类型呢？必须为 ActionReducer<State[p],V> State[p] = State['router'] 即咱们自定义的 RouterState 也就是说，ActionReducer 当初第一个类型参数即 T，变成了 RouterState. ActionReducer<RouterState> = {函数} 括号里是一个函数，输出参数有两个： state：类型为 RouterStateaction：参数为 Action返回参数类型为 RouterState 正好和咱们利用代码里定义的统一： 应用 injection Token 的场合每当你要注入的类型无奈确定（没有运行时示意模式）时，例如在注入接口、可调用类型、数组或参数化类型时，都应应用 InjectionToken. ...

准则 content page routes 来自后盾，而 product，category 的配置位于 Spartacus 层。 无论如何，都容许在 Spartacus 层批改。 例如 product route 配置，位于 default-routing-config.ts: 以 myCompany 为例： http://localhost:4299/powerto... 申请 url： https:///occ/v2/powertools-spa/cms/pages?pageType=ContentPage&pageLabelOrId=%2Forganization&lang=en&curr=USD 阐明其类型为 ContentPage，url 为 organization 这些 url 通过 spartacussampledata 这个 extension 里的 cms-responsive-content.impex 文件，保护到 SAP Commerce Cloud 数据库里： 更多Jerry的原创文章，尽在："汪子熙":

调试入口：this.routingService.getNextPageContext() 这个 page context 间接从 store 里读取的，靠调试 selector 是拿不到的。 咱们以前学习过，当 Angular router 框架胜利将浏览器地址栏的 url，匹配到开发人员用 RouterModule.forChild 传入的 routes 数组时，会抛出 RoutesRecognized 事件，如下图所示： if (event instanceof RoutesRecognized) { routesRecognized = event; if (!dispatchNavLate && this.trigger !== RouterTrigger.STORE) { this.dispatchRouterNavigation(event); }Angular router 框架这里提供了一个 hook，能够容许利用开发人员批改下一个 router state，即 nextRouterState 变量： @Injectable()export class CustomSerializer implements fromNgrxRouter.RouterStateSerializer<ActivatedRouterStateSnapshot>咱们本人实现了 Angular router 框架的一个接口： fromNgrxRouter.RouterStateSerializer 这里硬编码了，只有 routerState 里的参数，呈现了 productCode，咱们就认为这是一个 Product page： if (params['productCode']) { context = { id: params['productCode'], type: PageType.PRODUCT_PAGE }; } 而后咱们的 reducer 被调用： ...

当拜访如下 url 时，http://localhost:4200/powerto... 咱们能看到如下的 OCC API 调用： https://<host>:9002/occ/v2/powertools-spa/cms/pages?pageType=ProductPage&code=3755211&lang=en&curr=USD 这个 OCC API 是 cms-page.connector.ts 触发的。Connector 必定是 effect 调用的，调用时，pageContext 曾经解析结束了。这个 type 为 ProductPage 是如何解析的？ 加上打印语句： 果然是被 page effect 调用的： 查看是谁抛出的 CmsActions.LoadCmsPageData 即可。在 page action 的构造函数里打断点，就晓得谁去 dispatch 的这个 action 了： 看样子咱们要在 cms.service.ts 的 hasPage 办法里持续设置断点了： 这里找到了源头：咱们之前的文章曾经介绍过，把 url 粘贴到浏览器地址栏之后，会触发 Angular 路由器框架 Router 的检测逻辑，如果 url 的片段的确是 RouterModule.forChild 里传入的 routes 数组的片段时，阐明路由匹配胜利，此时须要执行该路由的 canActivate 钩子，只有钩子返回 true，能力真正激活这个路由，加载 route 数据结构里保护的 Component 实例。 上图解释了本文题目的疑难。 更多Jerry的原创文章，尽在："汪子熙":

页面如下：http://localhost:4200/powerto... template id 为：ProductDetailsPageTemplate 在 product detail page module 里，咱们调用 RouterModule.forChild, 指定路由匹配后，加载的 Component 为 PageLayoutComponent: 我在这个 Component 的 html 文件里，削减一条 div 语句作为打印输出： 运行时成果： 这个 ProductDetailsPageTemplate 呈现在 router-outlet 指令上面，显然是通过路由加载的： 在 layout config 配置文件里，能够将其 slots 删除一部分做一个测试： 比方只剩 Summary slot： 成果如下： 更多Jerry的原创文章，尽在："汪子熙":

如果间接拜访如下 url：http://localhost:4200/powerto... 页面关上后，没有看到和 product 相干的执行逻辑： 这个 cxRoute: 'product' 是哪里保护的？ 看这个高亮区域是从哪里赋值的？ 在 routing.module.js 里，一个初始化钩子： 调试 35行这个 router 是如何被计算出来的即可： 通过依赖注入实现的： 依据如下关键字搜寻：cxRoute: 'product 必须和 default-routing-config.ts 里定义的这个 product 字符串的大小写完全一致： 最初发现了 product-details-page.module.ts 里调用了 Angular 规范的路由 API：RouterModule.forChild component：门路匹配时实例化的组件。Spartacus UI 里应用的是 PageLayoutComponent，这是一个 generic Component. data 属性：ActivatedRoute 提供给组件的由开发人员定义的额定数据。默认状况下，不传递任何额定数据。 Spartacus UI 传递了 cxRoute: 'product' 作为额定属性。 做个试验，把 ProductDetailsPageModule 的路由配置里的 cxRoute，改成 login： 路由就挂了： 更多Jerry的原创文章，尽在："汪子熙":

如果间接拜访如下 url：http://localhost:4200/powerto... 页面关上后，没有看到和 product 相干的执行逻辑： 咱们自定义的 ActivatedRouterStateSnapshot interface，和上图 Chrome 调试器里打印的构造很像： 先在这个 reducer 里设置断点： 打印出了海量的日志。咱们先不管是谁触发的这些 reducer 调用，先查看和 product 相干的日志： 很像这两行： 果然，这里曾经解析出 navigation target 了： 执行到这的时候，mavigation 的指标页面曾经被解析进去了： 抉择 cmsRequired 作为突破口。 在这个 serialize 办法里设置断点： 输出参数仅仅蕴含了一个 url： 这个 cxRoute: 'product' 是哪里保护的？ 这个 serialize 办法被调用时，貌似曾经解析进去了？ cmsRequired 的赋值逻辑： 还是没有找到咱们要找的中央。 这个 serializer 只是咱们实现的一个 hook： 更多Jerry的原创文章，尽在："汪子熙":

如下图所示，为了缩小 SAP 电商云 Spartacus 客户施行时不必要的配置，Spartacus 将不少页面的路由门路的默认配置，定义在如下的 default-routing-config.ts 文件里： 批改之后，产品明细页面和 homepage 的产品超链接都一齐变更了： 这个默认配置什么时候被读取，并且如何被解析的呢？ 如果仅仅依照 product 作为关键字搜寻，那么匹配后果太多了，因为这个单词太 generic 了： 而且 RoutesConfig 这个类型，多半都是被代码动静解析的。 换个思路，把 product 改成 product2，看看会不会报错： 这回难堪了，鼠标放上去，显示的 url 指向 home 链接，阐明 product 明细页面的 url 基本就没有生成，这条路也行不通。 再依据 paramsMapping 搜寻，因为咱们的代码，必定在某处，会解析这个字段： 果然，就在 semantic-path.service.ts 里： 在 semantic-path.service.ts 里增加如下打印语句： 咱们看下第一行输入，这个 / 和 login 是怎么被解析的。 在 Login.componment.html 里有个 pipe： 遇到上面这行代码： <ng-template #login> <a role="link" [routerLink]="{ cxRoute: 'login' } | cxUrl">{{ 'miniLogin.signInRegister' | cxTranslate }}</a></ng-template>就会读取 Spartacus 里的配置，把基于语义的路由配置，转换成 url. ...

该 effect 有三个依赖： ActionsCmsComponentConnectorRoutingService loadNavigationItems$ 整个是一个 Observable 对象，无奈通过调试的形式去晓得这个 Observable 自身什么时候被调用，只能晓得 Observable 关联的 Operator 什么时候被触发。 当 Spartacus 其余中央的代码触发 CmsActions.LOAD_CMS_NAVIGATION_ITEMS 时，咱们这个 loadNavigationItems$ 里第18行的 ofType 就会触发。 如何调试在 ofType Operator 调用之前，增加一个 tap 操作符即可： 能够看到，LoadCurrencies，LoadCart 这些 Action，也会触发这个 NavigationEntryItemEffects. 这又是为什么呢？ NavigationEntryItemEffects 被 export 进来，咱们看何处导入了该 class. cms\store\effects\index.ts 通过 effects 数组导出了这个 effects： CmsStoreModule 的 imports 区域，蕴含了导出的 effects 数组。 更多Jerry的原创文章，尽在："汪子熙":

咱们看一个 PDP 即 product detail page 的理论例子： http://localhost:4200/powerto... 在单页应用程序中，您能够通过显示应用程序的不同视图来管制用户看到的内容。 Spartacus 应用 Angular Router 来解决从一个视图到另一个视图的导航。 路由器通过将每个 URL 视为出现特定视图的指令来实现此操作。 咱们加载这个 PDP 时，OCC API url: https://host:9002/occ/v2/powe... ProductPage 是 CMS 里一种非凡的 page 类型，参数为 product code：3881017 返回的 OCC response 里，能看到 page template：ProductDetailsPageTemplate Content slot 也有很多数值在内： 总共 17 个 slot： 问题1：Spartacus 什么中央将参数 pageType=ProductPage 传给 OCC API？ 依据关键字 ProductPage，竟然搜寻不到后果。 应该是我的搜寻条件应用不对，当初失常了： 在 getContextParams 里设置断点： 这里能清晰看到，connector - (35 行）调用 adapter： 然而，是谁调用 35 行的 getList 呢？持续在 cms-component.connector.ts 里设置断点： ...

Three dots ( … ) in JavaScript Rest Parameters应用 rest 参数，咱们能够将任意数量的参数收集到一个数组中，而后用它们做咱们想做的事件。 引入了其余参数以缩小由参数引起的样板代码。 function myFunc(a, b, ...args) { console.log(a); // 22 console.log(b); // 98 console.log(args); // [43, 3, 26]};myFunc(22, 98, 43, 3, 26);在 myFunc 的最初一个以 ... 为前缀的参数中，这将导致所有残余的参数都放在 javascript 数组中。 rest 参数收集所有残余的参数，因而在最初一个参数之前增加 rest 参数是没有意义的。 其余参数必须是最初一个形参。 rest 参数能够解构（仅限数组），这意味着它们的数据能够解包为不同的变量。 function myFunc(...[x, y, z]) { return x * y* z;}myFunc(1) // NaNmyFunc(1, 2, 3) // 6myFunc(1, 2, 3, 4) // 6 (fourth parameter is not destructured)Spread Operators开展运算符用于将可迭代对象（如数组）的元素扩大到能够包容多个元素的地位。 ...

我应用基于版本 3.4.5（某客户正在应用）的 Schematics 创立了一个店面，并在 SSR 模式下运行它。 我在浏览器中拜访 http://localhost:4000/。 通过 Chrome 开发工具我晓得主页的源代码是由 SSR 服务器胜利生成了。 然而，即便在 SSR 模式下，我发现 /cms/pages OCC API 依然是从客户端触发的。 在 SSR 服务器的 log 里，我没有发现 CSR fallback： 然而，在客户端，我依然发现了这些 OCC API call： 即便我应用了如下代码： ConfigModule.withConfig({ state: { ssrTransfer: { keys: { products: true, cms: true } } }});只能确保客户端没有发送 product 相干的 API 调用。 解答对于产品 - 我猜状态已从 SSR 转移到 CSR。对于 cms - 我想无论咱们是否在 ngrx 商店中，咱们都会进行调用。 咱们正在探讨的货色可能会在将来改良默认状况下，Spartacus 在每次路由更改时从新加载 CMS 页面数据，无论它是否曾经保护在 ngrx state 之中。 然而，客户能够通过 Spartacus 配置 routing.loadStrategy: RouteLoadStrategy.ONCE 对其进行不同的配置它在 CmsPageGuard.shouldReload 办法中应用。 ...

这是 Jerry 2021 年的第 66 篇文章，也是汪子熙公众号总共第 343 篇原创文章。 国庆黄金周开始的前一天，9月30日，我所在的开发团队收到了一个对于 Angular 利用的服务器端渲染(Server Side Render，简称为 SSR）的客户 incident，让我有机会学习如何应用 Chrome 开发者工具来剖析 Web 利用的性能问题。 Jerry 之前已经写过一篇对于 Chrome 开发者工具的文章：Jerry和您聊聊Chrome开发者工具，本文算是该文的后续。 原本我是想用 Angular 利用为例来介绍工具的用法，但思考到本公众号一万多读者外面，绝大多数前端开发敌人们，应用的还是 SAP UI5，因而最初还是抉择了基于 SAP UI5 利用来介绍应用 Chrome Dev Tools 进行 Web 利用性能剖析的应用步骤。 本文提及的 SAP UI5 利用，指通过 FreeStyle 形式开发的 SAP UI5 利用。通过 Fiori Elements 开发的 SAP UI5，不在本文探讨之列。 依据我以往的工作教训，如果一个 SAP UI5 利用呈现了性能问题，很多时候性能瓶颈都出在该利用生产的后盾 API，比方 OData 服务或者其余 AJAX 调用。 同 Angular 相比，SAP UI5 框架为利用开发人员屏蔽了 Web 前端开发中的很多底层细节，比方 DOM 操作，CSS 的编辑，数据双向绑定和事件注册等逻辑，均应用 UI5 封装之后的形式来实现。因而一个 SAP UI5 利用，纯正的前端代码里，因为利用人员编码失误导致性能问题的概率绝对 Angular 要低得多。 ...

本文我原本想用题目“如何将 SAP UI5 利用部署到 Github 网站上并运行”，但实际上这种操作并没有真正将 SAP UI5 利用部署到传统意义上的服务器，而仅仅是利用了 Github 提供的 gh-pages 性能，来达到运行 web 利用的目标。 这个方法能够用于想展现一些 demo 给他人看，但懒得把利用公布到 SAP BTP，或者懒得应用 jsbin 等工具网站的场景。 要达到本文形容的成果，你须要有一个 Github 账号，以及一个可能本地运行的 SAP UI5 利用。 Jerry 曾经开发好了一个可能本地运行的 SAP UI5 利用，地址如下： https://github.com/wangzixi-d... 要将该 SAP UI5 利用托管到 Github 上运行，也是分分钟就能实现的事件。 命令行进入你的 SAP UI5 代码仓库，命令行 git checkout --orphan gh-pages 这行命令创立了一个新的分支 gh-pages. 而后 git add *, git commit, 将所有代码也提交到这个新建的 gh-pages 分支去。 最初，应用如下 url 拜访你的 SAP UI5 利用即可： https://<你的github账号>.github.io/<你的UI5代码仓库名称>/<代码仓库里 SAP UI5 利用的 index.html 相对路径> ...

原文：Doing Business on the Go – Invoice to Cash the China Way (PoC) 家喻户晓，中国移动利用市场具备如下特点： 腾讯和阿里巴巴的多用途平台双头垄断即时通讯的主导地位挪动领取深度无缝融入即时通讯（微信领取和支付宝）尽管“挪动优先”曾经成为一个风行词，但迄今为止，只有在中国，才算是真正意义上的挪动利用无处不在的国家。在微信和支付宝衰亡的推动下，中国消费者像其余国家一样拥抱挪动技术。人们治理集体财务、沟通和购物的形式很快就失去了流传。下一个行将到来的两大中国巨头竞争的战场，是中国超过1亿的中小企业。 这并不奇怪，因为在 B2B 世界提早采纳翻新是一个家喻户晓的景象，思考到数字领取 + 即时消息的组合，这将是 B2B 细分市场的爆炸性组合。 这对 ERP 意味着什么？ 最终用户与数字外围的交互将局部从传统屏幕转移到通过消费者验证的应用程序，应用数字外围作为后端，通过员工曾经相熟的界面提供越来越多的 snackable 和 hands-free 体验。 员工坐在电脑屏幕前操作商业软件的广泛假如正在受到挑战，因为它正在转向一个物理扩散、一直挪动但又相互连接的环境。 智能硬件、物联网、基于地位的服务正在发明人们在工作场合协同工作的新形式。一种并非空想预测但现在已成为事实的改革是钉钉杀手级应用程序之一，实用于中小企业：基于地位的计时应用程序，员工打卡的免提形式。 工夫记录是一种天然的搭配，因为它是一个小动作，相似于批准和流动治理，且后劲微小。因而，咱们开始了一项试验并从新创造了发票到现金流程，这是 ERP 解决方案中最常执行的流程之一。 传统上，该过程继续数天到数周，波及多个角色和应用程序： 已公布的客户发票已筹备好发送给买方，这能够通过不同的形式进行，在许多状况下，这就像生成 PDF 并将其附加到电子邮件一样简略。 买家将通过付款来解决此发票，比如说通过传统的银行转账，它将在一天后达到。 在卖方方面，在某个工夫点下载银行对帐单，将其导入零碎并最终与已公布的发票进行核查。 当然，这个过程有多种变体，须要抵赖的是，这些步骤往往是批量产生的，这减少了操作效率，但也减少了时间延迟。 从发送到核查发票须要数周工夫并不少见，并且须要波及多个角色。 相比之下，通过将数字外围（这里是 SAP Business ByDesign）与数字经济（这里是钉钉和支付宝）相结合，能够显着简化流程，这不仅是整体体验的降级，也是商业价值的开释。 钉钉收回 Notification，告诉员工有新开出的发票筹备发给买家，操纵手机即可实现。 另一方面，买家收到一张 HTML5 格局的发票，他能够间接通过支付宝付款。 在付款的那一刻，余额立刻转移到卖家的支付宝账户，以缩小费用。 在后端，整个流程和相干的财务过帐已自动记录。 以上后果计划的收益是： (1) 通过容许员工应用他们喜爱应用和日复一日应用的应用程序，该流程变得人性化。 (2) 操作效率显着进步，仅需大量的手机操作即可实现。 (3) SAP 数字外围中的数据即 SAP Business ByDesign 零碎的数据以真正的实时形式更新。 (4) 因为较早收到付款，因而对现金流量产生踊跃影响。 ...

当我拜访本地启动的 SAP Spartacus Storefront 时，在 Chrome 开发者工具里察看到总共 23 个 OCC API 调用： http://localhost:4200/electro... 这23个 OCC API 调用从性能上能够分成三组： 第一组：蕴含一个申请/occ/v2/electronics-spa/cms/pages?lang=en&curr=USD Cache-Control in request headers: no-cache 客户端 HTTP 申请 cache-control 的值 为 no-cache，通知服务器，在发送响应给客户端之前，先进行缓存有效性验证(cache validation) 服务器返回的响应头部字段 Cache-Control 的值：private 依据上面这篇文档，带有 cache-control:private 的响应，不应该在 CDN 里缓存。 在该 pages OCC API 调用完结之后，其余 22 个 OCC API 能力触发。 第二组：蕴含五个申请(1) /occ/v2/electronics-spa/languages?lang=en&curr=USD request header：Cache-Control: no-cacheresponse header：public, max-age=1800 (2) /occ/v2/electronics-spa/currencies?lang=en&curr=USD request header：Cache-Control: no-cacheresponse header：public, max-age=1800 (3) /occ/v2/electronics-spa/cms/components?fields=DEFAULT&currentPage=0&pageSize=26&componentIds=AllBrandsCategoryLink%2CCanonBrandCategoryLink%2CSonyBrandCategoryLink%2CKodakBrandCategoryLink%2CSamsungBrandCategoryLink%2CToshibaBrandCategoryLink%2CFujifilmBrandCategoryLink%2CKingstonBrandCategoryLink%2CIciduBrandCategoryLink%2CTDKBrandCategoryLink%2CSweexBrandCategoryLink%2CDigitalCamerasCategoryLink%2CDigitalCompactsCategoryLink%2CDigitalSLRCategoryLink%2CFilmCamerasCategoryLink%2CHandheldCamcordersCategoryLink%2CWebcamsCategoryLink%2CCameraAccessoriesCategoryLink%2CCamerasFlashesCategoryLink%2CTripodsCategoryLink%2CCameraLensesCategoryLink%2CFlashMemoryCategoryLink%2CPowerSuppliesCategoryLink%2CColourFilmsCategoryLink%2CBlackAndWhiteFilmsCategoryLink%2CBlankVideotapesCategoryLink&lang=en&curr=USD request header：Cache-Control: no-cacheresponse header：private ...

Support for Unique IDs stable ID 用于在运行时辨认和批改控制器内的控件。 然而，如果您重用或嵌套这些视图，这些 stable ID 将不再是惟一的。 为了防止 id 抵触，每个 SAP UI5 视图都将本人的 ID 作为前缀增加到其所有子控件中。 看一个例子，上面这个 xml 视图里，Button 控件的 id 为：aButton <mvc:View viewName="sap.hcm.ButtonView" controllerName="sap.hcm.myController" xmlns="sap.m" xmlns:mvc="sap.ui.core.mvc"> <Button id="aButton" text="Click me"/><mvc:View>而后我定义了另一个 xml 视图，把下面这个蕴含了 button 控件的 xml 视图，嵌套进去： <mvc:View viewName="sap.hcm.ContainerView" controllerName="sap.hcm.Address" xmlns="sap.ui.commons" xmlns:core="sap.ui.core" xmlns:html="http://www.w3.org/1999/xhtml"> <mvc:View id="ButtonView1" viewName="sap.hcm.ButtonView"/> <mvc:View id="ButtonView2" viewName="sap.hcm.ButtonView"/><mvc:View>运行时，两个被嵌套的 xml 视图 id 为： myContainerView--ButtonView1myContainerView--ButtonView2获取这些嵌入 xml 视图实例的代码： var oButtonView1 = oView.byId("ButtonView1");获取每个 xml 视图实例里的 button 实例的代码： var oButton = oButtonView1.byId("aButton");

SAP Commerce Cloud Accelerator UI 基于 JSP，属于服务器端渲染技术，Commerce 服务器将渲染好的 HTML 页面发送给客户端。 当用户在以后页面点击某些元素，要跳转到新的 UI 时，这些新的 UI 和以后页面是由不同的 page 实现的。因而这些跳转操作，会触发浏览器向服务器发动新的页面申请(page request). 客户端收到服务器发送的页面响应后，刷新本人的页面： 而 Spartacus UI 是单页面利用，客户端仅仅向服务器端申请一次页面模板代码( ng build 生成的 JavaScript 代码)： 至于页面要显示的业务数据，通过 OCC API 调用向服务器端索取: 最初，客户端也就是浏览器里，执行 Angular 框架代码，执行页面模板对应的 JavaScript 代码，将服务器端返回的 OCC API 响应进行渲染，失去最初客户看到的 Storefront 页面。 当然，Spartacus UI 也反对服务器端渲染模式：Server Side Render mode，简称 SSR，此时页面源代码的渲染是在 SSR 服务器上实现。OCC API 的调用，也是 SSR server 向 Commerce 服务器发动的。 更多Jerry的原创文章，尽在："汪子熙":

plan: hdi-shared SAP HANA 数据库 schema 使您可能在逻辑上将对象（例如表、视图和存储过程）组合在一起。 如果没有定义的 Schema，您将无奈写入目录。 SAP HANA 扩大应用程序服务 (SAP HANA XS) 使您可能将数据库模式创立为存储库中的可传输设计时文件。 关系数据库蕴含形容零碎中各种元素的 catalog. Catalog 将数据库划分为称为 Schema 的子数据库。数据库 schema 使您可能在逻辑上将对象（例如表、视图和存储过程）组合在一起。 如果没有定义的架构，您将无奈写入目录。 SAP HANA 扩大应用程序服务 (SAP HANA XS) 使您可能将数据库schema 创立为存储库中的可传输设计时文件。 您开发的应用程序能够读取存储库文件。 如果您的应用程序援用架构的存储库（设计时）版本而不是目录中的运行时版本，例如，通过应用存储库文件（带后缀）的显式门路，则对存储库版本的任何更改 文件一旦提交到存储库就可见。 无需期待存储库激活模式的运行时版本。 Database development artifacts are deployed from and to so-called containers. 数据库开发工件在所谓的容器中部署。这个容器和 Docker 不是同一回事。 The SAP HANA Deployment Infrastructure (HDI) provides a service that enables you to deploy database development artifacts to so-called containers. This service includes a family of consistent design-time artifacts for all key HANA platform database features which describe the target (run-time) state of SAP HANA database artifacts, for example: tables, views, or procedures. These artifacts are modeled, staged (uploaded), built, and deployed into SAP HANA. ...

Jerry 从 2014 年退出 SAP成都研究院 CRM Fiori 开发团队之后开始接触 SAP UI5，已经在 SAP 社区和“汪子熙”微信公众号上发表过多篇对于 SAP UI5 工作原理和源码解析的文章。 在 Jerry 这篇文章对 SAP UI5 无所不知的老手，从哪些资料开始学习比拟好？ 已经提到，Jerry 也是从 SAP UI5 菜鸟一路走过去，深知只有 ABAP 开发背景的开发者，向 SAP UI5 开发畛域转型的不易，因而我在业余时间设计了这份适宜 SAP UI5 初学者的学习教程，把开发一个残缺的 SAP UI5 利用的流程，拆分成若干个步骤，力求每个步骤里，把波及到的知识点都涵盖到。这些知识点可能不像我的 UI5 源码剖析系列文章那么深刻，但力求浅显易懂，便于 SAP UI5 初学者了解。 本教程每一个步骤的源代码，都寄存在我的 Github 上，别离用文件夹 01，02，03 等等来标识。 每一个步骤均是前一步骤的根底上，增加了若干新个性。倡议零根底或者对 SAP UI5 知之甚少的初学者，依照程序从第一个步骤开始循序渐进地学习，把这些代码下载到本地，配合教程的文字解说，本人入手，以加深了解。 大家如果对教程的每个步骤有任何疑难，欢送在教程对应的步骤文章里给我评论，进行留言。 本教程的第四个步骤，咱们学习了 SAP UI5 MVC 架构中的 V：XML 视图： SAP UI5 初学者教程之四：XML 视图初探第五个教程，咱们学习了 MVC 中的 C：Controller 即控制器： SAP UI5 初学者教程之五：视图控制器初探本步骤，咱们将以 JSON 模型为例，学习 SAP UI5 MVC 剩下的 M - Model，模型层的设计。 ...

Jerry 从 2014 年退出 SAP成都研究院 CRM Fiori 开发团队之后开始接触 SAP UI5，已经在 SAP 社区和“汪子熙”微信公众号上发表过多篇对于 SAP UI5 工作原理和源码解析的文章。 在 Jerry 这篇文章对 SAP UI5 无所不知的老手，从哪些资料开始学习比拟好？ 已经提到，Jerry 也是从 SAP UI5 菜鸟一路走过去，深知只有 ABAP 开发背景的开发者，向 SAP UI5 开发畛域转型的不易，因而我在业余时间设计了这份适宜 SAP UI5 初学者的学习教程，把开发一个残缺的 SAP UI5 利用的流程，拆分成若干个步骤，力求每个步骤里，把波及到的知识点都涵盖到。这些知识点可能不像我的 UI5 源码剖析系列文章那么深刻，但力求浅显易懂，便于 SAP UI5 初学者了解。 本教程每一个步骤的源代码，都寄存在我的 Github 上，别离用文件夹 01，02，03 等等来标识。 每一个步骤均是前一步骤的根底上，增加了若干新个性。倡议零根底或者对 SAP UI5 知之甚少的初学者，依照程序从第一个步骤开始循序渐进地学习，把这些代码下载到本地，配合教程的文字解说，本人入手，以加深了解。 大家如果对教程的每个步骤有任何疑难，欢送在教程对应的步骤文章里给我评论，进行留言。 本步骤介绍的大部分内容，其实在本教程前一步骤 SAP UI5 初学者教程之五：视图控制器初探曾经波及到了。 下图是本教程第五步骤里控制器的实现源代码，其中咱们应用第一行的 sap.ui.define, 异步加载 SAP UI5 规范的控制器实现模块，即第二行的 sap/ui/core/mvc/Controller. 前一步骤咱们点击 Button 控件，弹出的对话框采取浏览器原生的 alert API 实现。 ...

How to find the jQuery version used by SAPUI5 sap-ui-core.js 是 bootstrap 局部的一部分，如下所示。 它蕴含一个 jQuery 文件的正本。 正在应用的 jQuery 版本能够通过命令 $.fn.jQuery 找到。 <!DOCTYPE HTML><html> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/> <script src="resources/sap-ui-core.js" id="sap-ui-bootstrap" data-sap-ui-libs="sap.m" data-sap-ui-theme="sap_bluecrystal"> </script> <script> </script> </head> <body class="sapUiBody" role="application"> <div id="content"></div> </body></html> Add a custom version of jQuery在应用程序的 WebContent 中创立一个新文件夹并为其指定任何名称。 咱们称之为jquery。 下载您想要的 jQuery 版本并将其放在此文件夹中。 Modify index.html关上 index.html 文件并应用以下代码更新它。 增加了新 jQuery 文件的门路以及 jquery-ui-position.js 的门路。 SAPUI5 应用 jQuery UI Position 1.10.4 来定位弹出窗口、工具提醒等。 jQuery UI 版本 1.10.4 蕴含与 jQuery UI 版本 1.8.23 不兼容的更改。 jQuery.ui.position 中的一个次要不兼容更改，其中 offset 属性已被删除。 SAPUI5 运行时采纳了此更改，例如在 Popup 中，但应用程序可能也须要采纳其逻辑。 ...

SAPUI5 View Controller lifecycle methods Create an Application Project for SAPUI5关上 Eclipse 并转到菜单选项，文件 -> 新建 -> 其余...。 在 New 窗口中，关上节点 SAPUI5 Application Development 并抉择 Application Project 选项。 单击下一步按钮。 为我的项目提供一个名称。 咱们称之为 UI5LifecycleDemo。 抉择库 sap.ui.commons 并选中 Create an Initial View 选项。 单击下一步按钮。 在下一个窗口中，为视图提供一个名称。 咱们称其为次要的。 抉择开发范式作为 JavaScript。 这将在 JavaScript 中创立一个视图。 单击实现按钮。 创立好的 SAP UI5 我的项目层级构造如下： Write View Logicmain.view.js 的内容： sap.ui.jsview("ui5lifecycledemo.main", { /** Specifies the Controller belonging to this View. * In the case that it is not implemented, or that "null" is returned, * this View does not have a Controller. * @memberOf ui5lifecycledemo.main */ getControllerName : function() { return "ui5lifecycledemo.main"; }, /** Is initially called once after the Controller has been instantiated. * It is the place where the UI is constructed. * Since the Controller is given to this method, its event handlers can * be attached right away. * @memberOf ui5lifecycledemo.main */ createContent : function(oController) { console.log("createContent() of main view called..."); // Create a Panel object var mainPanel = new sap.ui.commons.Panel("mainPanel"); // Create a Button object var exitButton = new sap.ui.commons.Button({ id : "exitButton", // sap.ui.core.ID text : 'Exit and kill controller', // string press : [ function(oEvent) { // Commit suicide this.destroy(); // Let the world know about it alert("View and Controller destroyed..."); }, this ] }); // Add the button to the main panel mainPanel.addContent(exitButton); return mainPanel; }});Write Controller Logic关上 main.controller.js 文件。 勾销所有钩子办法的正文； 控制器的 onInit、onBeforeRendering、onAfterRendering 和 onExit 并将以下代码写入所有办法的主体中。 ...

Understanding sap.ui.define by Hello World 随着 1.28 版本中 sap.ui.define 函数的引入，SAPUI5 引入了对异步模块定义 (AMD) 的反对。AMD 是 Asynchronous Module Definition 的缩写。 所谓模块(Module)，即是能够在浏览器中加载和执行的 JavaScript 文件。 异步模块定义 (AMD) 是一种 JavaScript API，它指定了一种定义模块及其依赖项的形式，以便它们能够异步加载而无需放心加载程序。 上面咱们通过一个具体的例子来解说 sap.ui.define 的工作原理。 Create an Application Project for SAPUI5关上 Eclipse 并转到菜单选项，文件 -> 新建 -> 其余...。 在 New 窗口中，关上节点 SAPUI5 Application Development 并抉择 Application Project 选项。 单击下一步按钮。 为我的项目提供一个名称。 咱们称之为 sapui5.amd.demo。 抉择库 sap.m 并选中 Create an Initial View 选项。 单击下一步按钮。 在下一个窗口中，为视图提供一个名称。 咱们称其为次要的。 抉择 Development Paradigm 作为 XML。 这将创立一个 XML 视图。 单击实现按钮。 ...

Jerry 从 2014 年退出 SAP成都研究院 CRM Fiori 开发团队之后开始接触 SAP UI5，已经在 SAP 社区和“汪子熙”微信公众号上发表过多篇对于 SAP UI5 工作原理和源码解析的文章。 在 Jerry 这篇文章对 SAP UI5 无所不知的老手，从哪些资料开始学习比拟好？ 已经提到，Jerry 也是从 SAP UI5 菜鸟一路走过去，深知只有 ABAP 开发背景的开发者，向 SAP UI5 开发畛域转型的不易，因而我在业余时间设计了这份适宜 SAP UI5 初学者的学习教程，把开发一个残缺的 SAP UI5 利用的流程，拆分成若干个步骤，力求每个步骤里，把波及到的知识点都涵盖到。这些知识点可能不像我的 UI5 源码剖析系列文章那么深刻，但力求浅显易懂，便于 SAP UI5 初学者了解。 本教程每一个步骤的源代码，都寄存在我的 Github 上，别离用文件夹 01，02，03 等等来标识。 每一个步骤均是前一步骤的根底上，增加了若干新个性。倡议零根底或者对 SAP UI5 知之甚少的初学者，依照程序从第一个步骤开始循序渐进地学习，把这些代码下载到本地，配合教程的文字解说，本人入手，以加深了解。 大家如果对教程的每个步骤有任何疑难，欢送在教程对应的步骤文章里给我评论，进行留言。 本教程的前一个步骤也就是第四个步骤，咱们理解了 SAP UI5 XML 视图的应用办法。在该步骤里，咱们在 XML 视图里申明了一个 Text 控件实例，该控件位于 sap.m 这个命名空间内。 本步骤会持续接触 SAP UI5 MVC 框架中三大基石的另一块：C - Controller，即控制器。 ...

加载 SAPUI5 运行时后开始初始化过程。 SAPUI5 运行时的初始化包含以下步骤： (1) jQuery 插件次要位于 jQuery.sap 命名空间中，提供 SAPUI5 的基本功能，例如模块化概念、日志框架、性能测量等。 如下图所示： (2) 定义了全局对象 sap： (3) sap.ui.core.Core 类与其所有依赖项一起执行。 (4) 运行时配置(runtime configuration )由不同起源确定。 (5) 加载配置中申明的所有库和模块及其依赖项, 例如上面这段代码里的 lib： <script id="sap-ui-bootstrap" src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js" data-sap-ui-theme="sap_bluecrystal" data-sap-ui-libs="sap.m, sap.ui.comp" data-sap-ui-bindingSyntax="complex" data-sap-ui-compatVersion="edge" data-sap-ui-preload="async" data-sap-ui-resourceroots='{ "sap.ui.demo.tabledelete": "./" }'></script>(6) 对于每个加载的库，都会加载配置主题的 CSS 文件。 例如：https://sapui5.hana.ondemand.... 当所有库都加载结束并且文档准备就绪时，内核的 initEvent 被触发并执行所有注册的处理程序。 Initialization Readiness执行或启动应用程序的最佳工夫点是在框架初始化之后。有三种办法能够让本人适应这个工夫框架。以下列表详细描述了这些初始化筹备挂钩，并提供了何时应用它们的示例。依据您的用例，您可能更喜爱一种形式而不是另一种形式。 ComponentSupport module在框架初始化后执行代码的最简单办法是应用 sap.ui.core.ComponentSupport. 此选项实用于您心愿应用 sap.ui.core.UIComponent 作为应用程序入口点的场景。 ComponentSupport 容许您在 HTML 文件中申明性地定义一个或多个 sap.ui.core.UIComponent 实例，并负责为您创立必要的 sap.ui.core.ComponentContainer。 无关具体的使用指南，请参阅 ComponentSupport 文档。 Standalone data-sap-ui-oninit module除了应用 sap.ui.core.ComponentSupport，您还能够在 SAPUI5 疏导脚本元素上定义一个名为 data-sap-ui-oninit 的数据属性。 ...

Jerry 从 2014 年退出 SAP成都研究院 CRM Fiori 开发团队之后开始接触 SAP UI5，已经在 SAP 社区和“汪子熙”微信公众号上发表过多篇对于 SAP UI5 工作原理和源码解析的文章。 在 Jerry 这篇文章对 SAP UI5 无所不知的老手，从哪些资料开始学习比拟好？ 已经提到，Jerry 也是从 SAP UI5 菜鸟一路走过去，深知只有 ABAP 开发背景的开发者，向 SAP UI5 开发畛域转型的不易，因而我在业余时间设计了这份适宜 SAP UI5 初学者的学习教程，把开发一个残缺的 SAP UI5 利用的流程，拆分成若干个步骤，力求每个步骤里，把波及到的知识点都涵盖到。这些知识点可能不像我的 UI5 源码剖析系列文章那么深刻，但力求浅显易懂，便于 SAP UI5 初学者了解。 本教程每一个步骤的源代码，都寄存在我的 Github 上，别离用文件夹 01，02，03 等等来标识。 每一个步骤均是前一步骤的根底上，增加了若干新个性。倡议零根底或者对 SAP UI5 知之甚少的初学者，依照程序从第一个步骤开始循序渐进地学习，把这些代码下载到本地，配合教程的文字解说，本人入手，以加深了解。 大家如果对教程的每个步骤有任何疑难，欢送在教程对应的步骤文章里给我评论，进行留言。 本教程的前三个步骤，咱们要么间接在 index.html 里，利用原生的标签 div 显示文本，要么创立 SAP UI5 Text 控件实例，再将其搁置于 HTML 占位符 div 标签里。 从本步骤开始，咱们会接触 SAP UI5 十分重要的概念：XML 视图，这个概念也是 SAP UI5 MVC 三大支柱之一：View 即视图层。 ...

Jerry 从 2014 年退出 SAP成都研究院 CRM Fiori 开发团队之后开始接触 SAP UI5，已经在 SAP 社区和“汪子熙”微信公众号上发表过多篇对于 SAP UI5 工作原理和源码解析的文章。 在 Jerry 这篇文章对 SAP UI5 无所不知的老手，从哪些资料开始学习比拟好？ 已经提到，Jerry 也是从 SAP UI5 菜鸟一路走过去，深知只有 ABAP 开发背景的开发者，向 SAP UI5 开发畛域转型的不易，因而我在业余时间设计了这份适宜 SAP UI5 初学者的学习教程，把开发一个残缺的 SAP UI5 利用的流程，拆分成若干个步骤，力求每个步骤里，把波及到的知识点都涵盖到。这些知识点可能不像我的 UI5 源码剖析系列文章那么深刻，但力求浅显易懂，便于 SAP UI5 初学者了解。 本教程每一个步骤的源代码，都寄存在我的 Github 上，别离用文件夹 01，02，03 等等来标识。 每一个步骤均是前一步骤的根底上，增加了若干新个性。倡议零根底或者对 SAP UI5 知之甚少的初学者，依照程序从第一个步骤开始循序渐进地学习，把这些代码下载到本地，配合教程的文字解说，本人入手，以加深了解。 大家如果对教程的每个步骤有任何疑难，欢送在教程对应的步骤文章里给我评论，进行留言。 本教程的前两篇文章，咱们的 SAP UI5 利用界面里显示的 Hello World，始终都是通过 div 标签实现的。 本文作为这个教程的第三个步骤，咱们会真正开始接触 SAP UI5 提供的控件之一：Text. 本步骤应用的源代码在上面这个链接处下载: https://github.com/wangzixi-d... 同本教程的前一步骤相比，本步骤的 index.html 和 index.js 文件都削减了一些新的内容。 ...

Jerry 从 2014 年退出 SAP成都研究院 CRM Fiori 开发团队之后开始接触 SAP UI5，已经在 SAP 社区和“汪子熙”微信公众号上发表过多篇对于 SAP UI5 工作原理和源码解析的文章。 在 Jerry 这篇文章对 SAP UI5 无所不知的老手，从哪些资料开始学习比拟好？ 已经提到，Jerry 也是从 SAP UI5 菜鸟一路走过去，深知只有 ABAP 开发背景的开发者，向 SAP UI5 开发畛域转型的不易，因而我在业余时间设计了这份适宜 SAP UI5 初学者的学习教程，把开发一个残缺的 SAP UI5 利用的流程，拆分成若干个步骤，力求每个步骤里，把波及到的知识点都涵盖到。这些知识点可能不像我的 UI5 源码剖析系列文章那么深刻，但力求浅显易懂，便于 SAP UI5 初学者了解。 本教程每一个步骤的源代码，都寄存在我的 Github 上，别离用文件夹 01，02，03 等等来标识。 每一个步骤均是前一步骤的根底上，增加了若干新个性。倡议零根底或者对 SAP UI5 知之甚少的初学者，依照程序从第一个步骤开始循序渐进地学习，把这些代码下载到本地，配合教程的文字解说，本人入手，以加深了解。 大家如果对教程的每个步骤有任何疑难，欢送在教程对应的步骤文章里给我评论，进行留言。 本教程的前一篇 Hello world 的文章，咱们只是理解了一个最根本的 index.html 页面的开发方式，尚未真正接触到 SAP UI5. 从本文开始，咱们将会在前一步骤的 index.html 的根底上，导入 SAP UI5 的库文件，真正开始 SAP UI5 的学习。 ...

Jerry 从 2014 年退出 SAP成都研究院 CRM Fiori 开发团队之后开始接触 SAP UI5，已经在 SAP 社区和“汪子熙”微信公众号上发表过多篇对于 SAP UI5 工作原理和源码解析的文章。 在 Jerry 这篇文章对 SAP UI5 无所不知的老手，从哪些资料开始学习比拟好？ 已经提到，Jerry 也是从 SAP UI5 菜鸟一路走过去，深知只有 ABAP 开发背景的开发者，向 SAP UI5 开发畛域转型的不易，因而我在业余时间设计了这份适宜 SAP UI5 初学者的学习教程，把开发一个残缺的 SAP UI5 利用的流程，拆分成若干个步骤，力求每个步骤里，把波及到的知识点都涵盖到。这些知识点可能不像我的 UI5 源码剖析系列文章那么深刻，但力求浅显易懂，便于 SAP UI5 初学者了解。 本教程每一个步骤的源代码，都寄存在我的 Github 上，别离用文件夹 01，02，03 等等来标识。 每一个步骤均是前一步骤的根底上，增加了若干新个性。倡议零根底或者对 SAP UI5 知之甚少的初学者，依照程序从第一个步骤开始循序渐进地学习，把这些代码下载到本地，配合教程的文字解说，本人入手，以加深了解。 大家如果对教程的每个步骤有任何疑难，欢送在教程对应的步骤文章里给我评论，进行留言。 SAP UI5 是一个用于开发企业级 Web 利用的前端框架，基于 HTML 和 JavaScript. 作为教程的第一步，咱们须要理解最根底的 HTML 常识。 请大家在电脑上任意新建一个文件夹，将其命名，比方我取的名称为 Walkthrough. 进入 Walkthrough 文件夹，再新建一个文件夹名叫 01，代表本教程的第一个步骤。 ...

Jerry 从 2014 年退出 SAP成都研究院 CRM Fiori 开发团队之后开始接触 SAP UI5，已经在 SAP 社区和“汪子熙”微信公众号上发表过多篇对于 SAP UI5 工作原理和源码解析的文章。 在 Jerry 这篇文章对 SAP UI5 无所不知的老手，从哪些资料开始学习比拟好？已经提到，Jerry 也是从 SAP UI5 菜鸟一路走过去，深知只有 ABAP 开发背景的开发者，向 SAP UI5 开发畛域转型的不易，因而我在业余时间设计了这份适宜 SAP UI5 初学者的学习教程，把开发一个残缺的 SAP UI5 利用的流程，拆分成若干个步骤，力求每个步骤里，把波及到的知识点都涵盖到。这些知识点可能不像我的 UI5 源码剖析系列文章那么深刻，但力求浅显易懂，便于 SAP UI5 初学者了解。 本教程每一个步骤的源代码，都寄存在我的 Github 上，别离用文件夹 01，02，03 等等来标识。 https://github.com/wangzixi-d... 每一个步骤均是前一步骤的根底上，增加了若干新个性。倡议零根底或者对 SAP UI5 知之甚少的初学者，依照程序从第一个步骤开始循序渐进地学习，把这些代码下载到本地，配合教程的文字解说，本人入手，以加深了解。 大家如果对教程的每个步骤有任何疑难，欢送在教程对应的步骤文章里给我评论，进行留言。 上面是教程的文章目录。 SAP UI5 本地开发环境的搭建SAP UI5 初学者教程之一：Hello WorldSAP UI5 初学者教程之二：SAP UI5 的疏导过程 BootstrapSAP UI5 初学者教程之三：开始接触第一个 SAP UI5 控件

CSS Styling Issues 本节列出了 SAPUI5 中与 CSS 款式相干的一些最重要的规定。 SAPUI5 控件应用 CSS 进行款式设置，并且因为应用程序能够提供本人的 CSS，因而它们能够调整款式。 然而，这种适应越深，它们就越有可能与将来的 SAPUI5 更新或其余库和应用程序相关联。但如果咱们遵循上面列出的规定，能够升高产生这种状况的危险。 Don't override control class styling directlySAPUI5 不保障跨版本款式类名的稳定性。 如果款式类的命名在当前的版本中发生变化，款式规定将不再利用于指标元素。 此外，当应用程序在共享运行时环境（如 SAP Fiori Launchpad）中运行时，间接笼罩控件类款式可能会导致款式抵触。 最佳实际就是，增加您本人的命名空间类。 不好的做法：间接批改 SAP 规范的 CSS class： .sapMInputBaseError { font-weight: bold;}正确做法： oButton.addStyleClass("poaAppError");.poaAppError { font-weight: bold;}Don't style DOM element names directly间接款式化 DOM 元素会导致不可预知的后果，因为 SAPUI5 不保障外部管制 DOM 树随工夫的稳定性。 此外，当应用程序在共享运行时环境（如 SAP Fiori Launchpad）中运行或增加自定义 HTML 时，这可能会导致款式抵触。 最好将款式更改限度为专门应用的 CSS 类。 不好的例子： div { width: 120px;}正确做法： .myStyleClass { width: 120px;}Don't use generated IDs in CSS selectorsSAPUI5 应用程序能够为元素创立动静 ID。 不要将这些 ID 用作自定义 CSS 中的选择器，因为它们会随着工夫而扭转。 最好增加和应用 CSS 类。 ...

兼容性规定官网链接以下局部形容了 SAP 在次要(major)、主要(minor)和补丁(patch)版本中能够更改的内容。 在应用 SAPUI5 或为 SAPUI5 开发应用程序、性能或控件时，请始终思考这些规定。 作为利用开发人员，防止在 SAP UI5 代码中间接操作 CSS，例如： domRef.className = "someCSSClass";切勿应用或笼罩不属于 API 参考的“公有”函数。 公有函数通常（但不总是）以后面的“_”为前缀。 始终仔细检查 API 参考，那里没有列出公有函数。 API Evolution除非另有阐明，本节中的“API”一词指的是“公共 API”，意思是函数、类、命名空间、控件及其申明的属性、聚合等。 公共 API 的惟一定义是 API 参考即 API Reference，它蕴含在 SAPUI5 演示工具包中。 未提及的性能不是 API 的一部分。 以下规定实用于引入新 API 或对现有 API 进行不兼容的更改： 次要版本 (x.yy.zz 中的 x)：新的次要版本能够引入新的 API 或对现有 API 进行不兼容的更改。 主要版本 (x.yy.zz 中的 yy)：新的主要版本能够引入新的 API，但不得蕴含对任何 API 不兼容的更改。 补丁公布 (x.yy.zz中的 zz)：新补丁版本仅蕴含对现有实现的修复，但通常不蕴含新性能或不兼容的 API 更改。 Compatible Changes对现有 API 的以下更改是兼容的，并且能够随时实现： (1) 增加新的库、控件、类、属性、函数或命名空间 (2) 概括属性，即在继承层次结构中向上挪动属性 ...

看这段测试代码： <!DOCTYPE html><html><head> <meta charset="utf-8"> <title>SAPUI5 Walkthrough</title> <script id="sap-ui-bootstrap" src="./resources/sap-ui-core.js" data-sap-ui-theme="sap_fiori_3" data-sap-ui-libs="sap.m" data-sap-ui-compatVersion="edge" data-sap-ui-async="true" data-sap-ui-resourceroots='{ "sap.ui.demo.walkthrough": "./" }' data-sap-ui-oninit="module:sap/ui/demo/walkthrough/index"> </script></head><body><div>Hello World</div></body></html>运行之后，会弹出一个 Alert 对话框。 代码关键点逐行解释： data-sap-ui-theme指定主题为 sap-fiori-3. 详情参考文章：SAP UI5 利用指定主题 theme 的几种形式和其优先级 data-sap-ui-libs要在 HTML 页面中应用 SAPUI5 性能，您必须加载并初始化 SAPUI5 库。 您能够在页面中应用 SAPUI5 疏导程序脚本，以便在浏览器加载和执行脚本后主动初始化 SAPUI5 运行时。 对于简略的用例以及默认的 SAPUI5 装置，这足以构建和运行 UI。 除此之外，您能够在配置设置中指定一组 SAPUI5 库和用于您的应用程序的主题。这通过 script 的属性 data-sap-ui-libs 来实现。 如果咱们删除上图第10行的 data-sap-ui-libs 属性以及 sap.m, 整个利用依然可能失常运行，那为什么咱们还须要这一行代码呢？ data-sap-ui-libs 由 UI5 Core 的疏导程序思考。 该框架将确保预加载 data-sap-ui-libs 属性中列出的所有库，而后才触发应用程序能够附加到的 init 事件。 当您删除库预加载时，这可能导致库的每个所需模块的单个申请，在最坏的状况下是同步申请并导致性能问题（您能够在网络跟踪中看到这一点）。 然而，如果您开发了 UI5 应用程序（组件）并且在清单中正确保护了库依赖项，则应用程序/组件加载器会在应用程序/组件初始化之前小心地为您预加载这些库。 ...

在这篇博文中，我想分享古代 ABAP 中正则表达式的最新消息和变动，次要来自 OP 版本 7.55 和 7.56。 以前，在 ABAP 中应用 POSIX 款式的正则表达式或“uniX 的便携式操作系统接口- POSIX 的全称是 Portable Operating System Interface for uniX”。 因而，从当初开始，POSIX 语法中的正则表达式已过期，而后应用这种正则表达式语法会导致语法查看正告。 尽管这能够被 pragma ##regex_posix 暗藏，但强烈建议迁徙到 ABAP 反对的其余正则表达式语法，如 PCRE 正则表达式、XPath 正则表达式或 XSD 正则表达式。 ABAP 正则表达式的回顾正则表达式对于新用户来说通常是简单和令人生畏的。 在深入研究新性能之前，我想简要介绍一下 RegEx，并展现用 ABAP 明确编写的示例。 如果您是该主题的专家并且可能会感到无聊，请随时跳过此局部。 RegEx 的概念曾经存在了很长一段时间。当须要简单的模式时应用它。 如搜寻数字、字母、特殊字符或验证电子邮件等。许多文本搜寻和替换问题在不应用正则表达式模式匹配的状况下很难解决。 此外，在 ABAP 中，应用正则表达式的搜寻比传统的 SAP 模式更弱小。让咱们以这个简略的例子为例： FIND 'A' IN 'ABCD1234EFG' MATCH COUNT sy-tabix. WRITE: sy-tabix.当初，如果您想在不应用 RegEx 的状况下通过失常搜寻模式查找字符串中的所有字母，则须要对所有 26 个字符进行循环。 应用 RegEx，能够很容易地搜寻和找到所有七个字符： FIND ALL OCCURRENCES OF PCRE '[A-Z]' IN 'ABCD1234EFG' MATCH COUNT sy-tabix.WRITE: sy-tabix.ABAP 在语句 FIND 和 REPLACE 中以及通过类 CL_ABAP_REGEX 和 CL_ABAP_MATCHER 反对正则表达式。 CL_ABAP_MATCHER 类将应用 CL_ABAP_REGEX 生成的正则表达式利用于字符串或外部表。 ...

callFake 的接口定义能够在 jasmine.js 里找到： SpyStrategy.callFake, 返回 Spy 对象。 spy1 即 originalEngine，二者指向同一个对象实例： 只有 spy1 即 originalEngine 这个函数被调用，则返回 callFake 指定的 mock 版本的实现：return originalEngineInstance，后者也是个 mock 对象。 engine 自身是 Spartacus SSR 规范的实现，被 decorator 之后返回的新的函数，能够执行： 该函数通过闭包的形式，保留了输出参数 ngExpressEngine 的援用，而后者曾经被 mock 过了： 当第50行调用这个 engine 函数时， 执行的 ngExpressEngine 即是 mock 过的函数 spy1： spy1 一旦被调用，就会返回 mock 版本的函数，即返回 originalEngineInstance 实例。 更多Jerry的原创文章，尽在："汪子熙":

Steampunk is going all-in 什么是 SAP ABAP Steampunk(蒸汽朋克)？ Steampunk（又名 SAP BTP ABAP 环境）：提供一个 ABAP 平台，它不仅像明天一样是企业就绪(enterprise-readiness)的基准，而且也是云就绪的。 蒸汽朋克的次要属性是： (1) 平台和顶部解决方案之间的专用稳固公共接口，确保降级无故障 (2) 用于云开发的企业就绪环境，包含新的 ABAP 语言版本和 ABAP RESTful 应用程序编程模型 (RAP) (3) 具备 BTP 集成、标准化零碎更新和配置以及自动化操作的云就绪运行时环境 (4) 咱们以后客户群的云过渡门路，认真均衡上述两种危险 2020年之后，ABAP 蒸汽朋克曾经反对多租户。这意味着咱们的合作伙伴能够显着降低成本，他们当初能够在同一个 Steampunk 零碎中为多个客户提供 SaaS 解决方案。 对于 ABAP 内部人员：Steampunk 多租户架构基于 Client 字段，因而提供了消费者（租户）之间的齐全隔离，每个额定消费者的老本最低。 除此之外，蒸汽朋克带来了如此多的加强：针对云优化的改进型 ABAP 语言、对开发人员的更无效反对、为管理员提供更好的工具、用于 ERP 自定义代码的迁徙工具、重用服务或为合作伙伴提供的可扩展性只是其中的一小部分。 同时，SAP 蒸汽朋克团队正在致力于通过应用 Kubernetes 弹性扩大应用程序服务器、零停机更新、缩小最小 HANA 内存大小（30GB 而不是 64GB）、高可用性和劫难复原、更多数据中心和超大规模器来节省成本，仅举几例。 无论用例如何，咱们都为所有具备 ABAP 意识的客户和合作伙伴提供弱小的云产品。明天，SAP BTP 上的 Steampunk 反对以下场景： (1) 客户应用 side-by-side 的形式，扩大他们的 ERP 应用程序（清洁外围打算，即 clean core initiative） ...

Spartacus 每个 UI 划分成不同的区域 section，每个区域由若干个 slots 组成。每个 slot 能够蕴含一个或多个 CMS Component. 我已经写过一篇 文章 具体介绍过。 以 homepage为例，其实现的 HTML 地位：projects\storefrontlib\src\layout\main\storefront.component.html 看这个 header 区域： 这个 header 区域调配的 slots，定义在文件 layout-config.ts 里： 这些 slots 里蕴含的 CMS Components，运行时渲染好之后，显示的内容如下图高亮区域所示： 客户能够通过配置的形式，决定这些 slots 哪些显示，哪些不显示，以及调换slots 间的绝对地位。 比方我让 header 区域只显示一个 Sitelogo： 最初的成果如下图： 我已经出于调试目标，把 UI 上每个区域的 slot id 和 Component id 都打印进去，如下图所示： 更多Jerry的原创文章，尽在："汪子熙":

在将代码集成到咱们的开发主线之前，会运行一个继续集成过程以证实能够平安地集成更改。 咱们将 Travis CI 用于咱们的继续集成服务。 每次将代码推送到 Spartacus 存储库时（无论是否已收回拉取申请），都会触发咱们公共 Travis CI 中的构建。对于咱们所有的库，构建执行以下步骤： 查看更丑陋的合规性查看 tslint 合规性运行所有单元测试运行 Sonar 查看构建 Spartacus 我的项目源公布快照构建Travis CI 构建的配置能够在 Spartacus 我的项目根目录的 .travis.yml 文件中找到。 端到端测试触发构建时，还会在 Jenkins 服务器上触发并行过程，该服务器运行咱们库的所有端到端 (E2E) 测试。 E2E 测试后果报告为通过或未通过 GitHub 上的 Pull Request 查看。 遗憾的是，目前 Jenkins 服务器未公开，因而内部贡献者无奈看到 E2E 测试后果。咱们心愿在不久的未来过渡到公共服务器。 Contributing Integration Libraries to Spartacus以下集成库由 Spartacus 外围团队公布，但归相干集成团队所有： Context-Driven ServicesConfigurable ProductsCPQ Configurable ProductsSAP Customer Data CloudSAP Digital PaymentsIntegration Library Guidelines对于向 Spartacus 奉献集成库的任何团队，倡议遵循以下准则： 例如，您应该在 Spartacus 存储库中有本人的独自分支，例如 integration/cds。您应该尽可能多地合并来自开发分支的最新更改（以防止合并抵触）。您须要将构建、验证和测试步骤增加到分支上的 .travis.yml 文件中，这样您就能够形容您的继续集成过程。您须要蕴含您认为对库的继续集成所必须的测试和验证。您不用在 CI 过程中运行所有 Spartacus 外围验证（只管可能会倡议这样做）。在尝试将集成库自身合并到 Spartacus 主开发分支（或将新更改合并到开发分支）时，外围团队将对其进行残缺验证，包含回归测试。这将不包含集成测试。作为集成库所有者，您须要确保您的集成是稳固的，并且它通过了要公布的所有要求。集成库公布后，您有责任在后续版本中放弃其稳固。Reasoning Behind This ApproachSpartacus 建设在 Travis CI 之上。 必要的构建步骤在 travis.yml 文件中进行了形容，并且每个分支仅反对一个构建文件。 因而，为特定集成设置独自的分支容许每个集成团队自定义他们的构建。 ...

单元测试在我的项目根目录的 package.json 上面，定义了测试相干的 script： 能够间接 npm run test:libs, 启动所有库的单元测试： 也能够手动执行单个库的单元测试，例如 ng test core： 端到端测试的步骤在这里：SAP Spartacus 如何应用 cypress 进行端到端自动化测试 每一次 Spartacus 开发人员用 git 客户端提交代码时，都会触发 Github workflow 执行 CI/CD 相干流程。 能够参考上面这个 pull request：https://github.com/SAP/sparta... 这些代码提交时触发执行 CI/CD 的配置，在我的项目工程文件夹的 .github/workflows 里保护，如下图所示： https://github.com/SAP/sparta... 更多Jerry的原创文章，尽在："汪子熙":

首先看这个 class 的 get 定义： 接管两个输出参数，类型为： NgExpressEngineSsrOptimizationOptions返回一个包装后的 NgExpressEngine NgExpressEngine 是 Spartacus 本人创立的类型，实质是一个函数，输出参数为 NgSetupOptions，返回类型为 NgExpressEngineInstance. 后者又是一个函数，作为 ExpressEngine 的执行实例，接管 filePath，option 和 callback 作为参数。 一一对应： 返回一个新的函数，接管 E 即规范的 NgExpressEngine 的输出参数作为输出参数，同时将原来的两个输出参数 NgExpressEngine 和 Spartacus optimization 值存储起来： 稍后，在 server.ts 里，咱们调用这个被包装之后的 ngExpressEngine，此时，输出参数为一个对象，字段为 bootstrap，这个对象就是图 E：NgSetupOptions 此时，执行函数体： Object.assign() 办法用于将所有可枚举属性的值从一个或多个源对象调配到指标对象。它将返回指标对象。 调用 get 办法时传入的值，通过闭包存储在此： 三个点，就是将若干对象的不同名字段进行合并，最终后果： 其中闭包里的第一个输出参数，即是规范的 ngExpressEngine： 这里就是 Angular 规范的实现了，咱们不操心： 留神返回的类型： 创立 OptimizationEngine 实例： 最初，返回一个新的函数 renderResponse，且该函数执行时，执行上下文为 OptimizedSsrEngine 自身： 从当初开始，this.engines 指向 Spartacus 本人的 renderResponse 函数了： ...

产品明细页面 Product Detail Page，简称 PDP. 首先在页面上找到 Component selector：cx-tab-paragraph-container: 对应的 Angular Component 名称：TabParagraphContainerComponent 四个 button 之后，在 active div 里，是 cx-product-details-tab: 其 Component：ProductDetailsTabComponent 对应的 CMS Component 名称：CMSTabParagraphContainer： 这个 Component 被搁置在 slots ID 为 Tabs 的 slots 里： 而 detail Component 的 CMS 和 Angular Component 同名： 和咱们在 UI 上观测到的统一： 在 tab container 的实现 HTML 代码里看到了 cxOutlet 指令，其参数为 Component.flexType: 咱们用 json pipe 打印出 Component 数据，失去 flexType 为 ProductDetailsTabComponent： ...

这是 Jerry 2021 年的第 65 篇文章，也是汪子熙公众号总共第 342 篇原创文章。 观沧海 曹操 东临碣石，以观沧海。 水何澹澹，山岛竦峙。 树木丛生，百草丰茂。 秋风萧瑟，洪波涌起。 日月之行，若出其中; 星汉璀璨，若出其里。 幸甚至哉，歌以咏志。 Jerry 之前的文章 在SAP UI中应用纯JavaScript显示产品主数据的3D模型视图，介绍了在 SAP UI 上，利用 threejs(一个基于 WebGL，应用 JavaScript 进行 3D 模型变换和显示的库），显示物料 3D 模型的办法。 目前第三方用于绘制图表的 JavaScript 库堪称玲琅满目，其实 SAP UI5 自带的 Viz 库，足以胜任企业应用软件里大多数的画图需要。Jerry 试着在中文搜索引擎里依据 SAP UI5 Viz 的关键字进行搜寻，发现对于该库的中文材料非常少，因而就写了这篇文章，介绍该库的具体应用步骤。 咱们关上 SAP UI5 的官方网站，找到应用 Viz 开发而成的图表利用例子： https://sapui5.hana.ondemand.... 从最简略最容易动手的 Line Chart - 折线图动手开始学习。 点击右上角的 download 按钮之后，能够将这个例子的局部源代码，下载到本地学习： Jerry 2012 年刚刚开始学习 SAP UI5 时，也是从一行 HTML/JavaScript 代码都没有编写过的零根底开始的，所以 SAP UI5 初学者，面对一大段生疏的源代码时手足无措的情绪，我也已经也有。 ...

<html><head> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <script src="/sap/ui5/1/resources/sap-ui-core.js" id="sap-ui-bootstrap" data-sap-ui-libs="sap.ui.commons,sap.ui.table" data-sap-ui-theme="sap_bluecrystal"> </script> <script> sap.ui.localResources("odatabasic"); var view = sap.ui.view({ id: "idodataBasic", viewName: "odatabasic.odataBasic", type: sap.ui.core.mvc.ViewType.JS }); view.placeAt("content"); </script></head><body class="sapUiBody" role="application"> <div id="content"></div></body></html>bootstrap 脚本：SAPUI5 是用 JavaScript 实现的，因而要从客户端上的 SAP HANA 存储库文件夹 /sap/ui5/1/resources/ 加载 SAPUI5 运行时库 sapui-core.js，您须要应用 script 标记蕴含其疏导程序。 data-sap-ui-theme 属性指定要利用的视觉设计，data-sap-ui-libs 属性指定要应用的 UI 控件库。 Application 脚本：SAPUI5 基于模型-视图-控制器范式。 要创立视图和控制器，SAPUI5 运行时须要晓得从哪里加载相干资源（sap.ui.localResources）； 在这种状况下，来自相干子文件夹 /odatabasic。 在上述的 HTML 文件中，您将 odatabasic 子文件夹中新创建的 odataBasic 视图实例搁置在具备 ID 内容的 HTML 元素中。 对于 data-sap-ui-resourceroots： resourceroot 是根应用程序的命名空间。 data-sap-ui-frameOptions frameOptions 用于避免点击劫持(clickjacking)等安全漏洞。应用 frameOptions 配置，您能够定义 SAPUI5 是否容许嵌入到框架中运行，或者仅从受信赖的起源运行，或者基本不容许运行。 ...

原文 Spartacus 中的可拜访性有本人的一套端到端测试，这些测试位于 projects/storefrontapp-e2e-cypress/cypress/integration/accessibility/tabbing-order.e2e-spec.ts。 其中包含须要用户登录的测试（例如，对于我的帐户页面和购物车），以及不须要用户登录的测试（例如对于主页和登录页面） ）。 目前，测试涵盖了通过应用程序的标签。 对于每个新性能，都应该手动编写一个新测试，以查看选项卡的工作形式。 如果 Tab 的某些方面无奈失常工作（例如，Tab 程序不合乎预期，或者无奈通过 Tab 拜访可交互元素），则测试应该失败。 要运行增加到 tabbing-order.e2e-spec.ts 的新测试，请在运行 Cypress 时抉择 tabbing-order 测试。 Implementing a New A11y E2E Test(1) 向 projects/storefrontapp-e2e-cypress/cypress/helpers/accessibility/tabbing-order.config.ts 中的配置对象增加一个新属性。 名称应简短且具备描述性。 login: [ { value: 'userId', type: TabbingOrderTypes.FORM_FIELD }, { value: 'password', type: TabbingOrderTypes.FORM_FIELD }, { value: 'Forgot password?', type: TabbingOrderTypes.LINK }, { value: 'Sign In', type: TabbingOrderTypes.BUTTON }, { value: 'Register', type: TabbingOrderTypes.BUTTON }, ]留神： a. The login is of type TabElement[]. ...

这是 Jerry 2021 年的第 63 篇文章，也是汪子熙公众号总共第 340 篇原创文章。 蜀相 杜甫 丞相祠堂何处寻， 锦官城外柏森森。 映阶碧草自秋色， 隔叶黄鹂空好音。 三顾频烦天下计， 两朝开济老臣心。 出师未捷身先死， 长使英雄泪满襟。 Jerry 前一篇文章 基于 OData 模型和 JSON 模型的 SAP UI5 表格控件行我的项目的增加和删除实现，比拟了 SAP UI5 表格控件应用 OData 模型和 JSON 模型的实现差别。 SAP UI5 初学者在学习 OData API 应用时，面临的一个问题是：如何找到一些公网能够收费应用的 OData 服务。 Northwind 无疑是极佳的抉择之一，然而该服务不反对批改操作。 尽管从实践上讲，咱们能够应用依照 Jerry 的这篇文章，SAP Cloud Application Programming 介绍(2021 更新版），采纳 SAP Cloud Application Programming 模型(CAP)，自行在本地搭建一个反对增删改查的 OData 服务，然而对于学习 SAP UI5 的初学者来说，未免有些大材小用。 其实 SAP UI5 自带了一个很容易应用的 Mock Server，能够用来在本地模仿 OData 服务提供者，响应 SAP UI5 利用发动的 OData 申请，并应用事后配置好的测试数据进行回复。 ...

这是 Jerry 2021 年的第 64 篇文章，也是汪子熙公众号总共第 341 篇原创文章。 Jerry 的前一篇文章 留念特洛伊英雄 Sinon - SAP UI5 Mock Server 应用步骤和工作原理介绍，提到了 SAP UI5 Mock Server，可能在幕后将浏览器原生的 XMLHttpRequest API，替换成基于 Sinon.js 实现的 FakeXMLHttpRequest，从而实现为所有 OData 相干的申请，返回当时筹备好的 Mock 数据之目标。 文末提到了拦截器 HTTP Interceptor 的概念。在 HTTP 拦截器的工作场景中，HTTP 申请在两个工夫点内，能够被框架或者利用开发人员编写的拦截器解决： 程序代码调用 API 发送 HTTP 申请后，在 HTTP 申请理论从浏览器收回之前，由拦截器进行预处理应用程序失去远端的服务器响应后，在交给其回调函数解决之前，由拦截器进行预处理本文介绍一个应用拦截器的理论例子。 咱们晓得 SAP UI5 关上调试模式后，在 Console 控制台会看到很多额定的来自 SAP UI5 框架代码的 log 输入。 Jerry 已经在 SAP 社区上写过一篇博客，列举出了我在 SAP CRM Fiori 开发团队工作时，通过单步调试的形式解决的一些 bug： My UI5 debugging tips and experience collection – how to resolve UI5 issues through debugging by yourself ...

这是 Jerry 2021 年的第 62 篇文章，也是汪子熙公众号总共第 339 篇原创文章。 龟虽寿 曹操 神龟虽寿，犹有竟时； 腾蛇乘雾，终为土灰。 老骥伏枥，志在千里； 烈士暮年，壮心不已。 盈缩之期，岂但在天； 养怡之福，可得永年。 幸甚至哉，歌以咏志。 最近收到一位敌人的征询，在我的项目实现中须要实现 SAP UI5 表格控件内的行我的项目删除需要。这位敌人在网络上搜寻了一些示例代码，拷贝到本人的 SAP UI5 利用中，执行发现报错。 首先咱们要明确一点，SAP UI5 表格控件，同时反对 OData 模型 和 JSON 模型。因而，在面向 StackOverflow 或者 Google 编程时(这也是 Jerry 钟爱的开发方式之一)，务必先弄清楚，从网上复制粘贴的代码片段，应用的模型类型是否和本人我的项目中用到的统一。 首先理解这两个模型的区别。 SAP UI5 官网对 JSON 模型的定义： The JSON model is a client-side model and, therefore, intended for small data sets, which are completely available on the client. The JSON model does not support mechanisms for server-based paging or loading of deltas. It supports, however, two-way binding. Also, client-side models like the JSON model have no built-in support for sending data back to the server. The apps have to use, for example, model.getData() and jQuery.ajax() to send updated data to the server.JSON 模型是客户端模型，因而实用于在客户端齐全可用的小规模数据集。JSON 模型不反对基于服务器实现的分页或增量加载机制。同 OData 模型不同，JSON 模型没有原生反对的将数据发送回服务器的性能。利用开发人员必须手动调用 model.getData()和 jQuery.ajax() 将客户端更新的数据发送回服务器。 ...

此性能是在 TUA Spartacus 库的 1.0 版中引入的。 购物车在 TUA Spartacus 与外围 Commerce Spartacus 中的工作形式不同，须要反对产品供给以及简单的定价构造，以反对多种类型的免费，包含一次性免费、经常性免费和基于应用的免费。 在各种费用中，对于购物车，客户须要理解结帐时的立刻付款费用以及每月经常性费用承诺。 什么是 TUA Spartacus？ 我的项目“Spartacus” (TUA Spartacus) 的电信和公用事业加速器是一个基于 Angular 的精简店面，用于 SAP Commerce Cloud，专门通过 Commerce REST API 工作。 TUA Spartacus 与 Telco 和 Utilities Accelerator 店面单干并对其进行了改良。 除了反对 Commerce REST APIs，Telco and Utilities Accelerator 还反对 TM Forum APIs 以提供行业特定的性能。 TUA 是 Telcom，Utilities 和 Accelerator 的缩写。 Telcom Spartacus demo site： https://jsapps.cy8u-telcoacce... Utilities Storefront：https://jsapps.cy8u-telcoacce... Selective Cart此性能是在 Spartacus 库的 1.5 版中引入的。 ...

在计算机编程畛域中，memoization 或 memoisation 是一种优化技术，次要用于通过存储低廉的函数调用的后果并在再次出现雷同的输出时返回缓存的后果来减速计算机程序。 Memoization 也已用于其余上下文（以及速度增益以外的目标），例如在简略的互相递归降落解析中。只管与缓存无关，但记忆化是指此优化的特定状况，将其与缓存或页面替换等缓存模式辨别开来。在某些逻辑编程语言的上下文中，记忆化也称为 Tabling. 记忆性能“记住”与某些特定输出集绝对应的后果。应用记住输出的后续调用返回记住的后果而不是从新计算它，从而打消了应用给定参数调用的次要老本，除了第一次应用这些参数调用函数。记住的关联集能够是由替换算法管制的固定大小的集，也能够是固定集，这取决于函数的性质及其用处。一个函数只有在援用通明的状况下能力被记忆；也就是说，仅当调用该函数与用其返回值替换该函数调用具备完全相同的成果时。 （然而，存在此限度的非凡状况例外。）尽管与查找表相干，但因为记忆在其实现中常常应用此类表，因而记忆会依据须要即时而不是提前填充其后果缓存。 记忆化是一种以就义空间老本的办法来升高函数工夫老本的优化形式；也就是说，记忆化的函数会针对速度进行优化，付出的代价是对计算机内存空间的更高使用率。算法的工夫/空间“老本”在计算中有一个特定的名称：计算复杂度。所有函数在工夫（即它们须要工夫来执行）和空间上都具备计算复杂性。 什么是 NgRx selector选择器是用于获取存储状态切片( store state slices)的纯函数。@ngrx/store 提供了一些帮忙函数来优化这个抉择。 Selector 也合乎繁多职责及 Single responsibility，一个 selector 只 touch State 的一个片段。 应用 createSelector 和 createFeatureSelector 函数时，@ngrx/store 会跟踪调用选择器函数的最新参数。 因为选择器是纯函数，当参数匹配时能够返回最初一个后果，而无需从新调用选择器函数。这能够提供性能劣势，特地是对于执行低廉计算的选择器。这种做法被称为记忆。 换言之，咱们尽管实现了 Selector，然而运行时，这些 selector 可能只会被执行一次，因为如果输出参数雷同，NgRx 框架会应用缓存的后果间接返回给调用者，而不会反复调用咱们的 Selector. 例子：Using a selector for one piece of state import { createSelector } from '@ngrx/store';export interface FeatureState { counter: number;}export interface AppState { feature: FeatureState;}export const selectFeature = (state: AppState) => state.feature;export const selectFeatureCount = createSelector( selectFeature, (state: FeatureState) => state.counter);console.log('ok');例子：Using selectors for multiple pieces of statecreateSelector 可用于基于雷同状态(State)的多个切片从状态中抉择一些数据。 ...

在 Storefront AppModule 构造函数里注入 ActiveCartService： private cartService: ActiveCartService,调用其 API： const loading$ = this.cartService.getLoading(); loading$.subscribe((data) => console.log('Jerry cart loading? ', data));打印出的日志： active-cart.service.d.ts 里，仅仅蕴含办法的参数定义： 如果要查看其实现代码，还是得去 fesm2015 的 Spartacus-core.js 文件里查看： getLoading(): Observable<boolean> { return this.cartSelector$.pipe( map((cartEntity) => cartEntity.loading), distinctUntilChanged() ); }查看 this.cartSelector$ 的实现： // Stream with active cart entity protected cartSelector$ = this.activeCartId$.pipe( switchMap((cartId) => this.multiCartService.getCartEntity(cartId)) );cartSelector$ 的赋值逻辑：从 activeCartId$ 里取出 cartId，调用 multiCartService 读取。 MultiCartService 也只是从 store 里通过selector 去读取。 ActiveCartId$ 的赋值逻辑： ...

为了给用户更好的反馈，基于他们的行为，咱们常常须要保留诸如“正在加载购物车”、“获取用户地址失败”等信息。 对于每个独自的应用程序状态，咱们必须将元数据放在旁边。 别离用于购物车、用户信息、产品数据等。 在所有这些中央手动实现这个逻辑会导致在整个代码库中针对同一问题有不同的解决方案。 这就是在 spartacus 中创立 loaderReducer 的起因。 这个reducer 标准化了整个状态树(state tree)中的元数据处理。 您能够在树的任何深度、任何须要的中央应用它。 除了reducer，咱们还提供 actions 和 selectors 的实用程序。 一个例子： 在 app.module.ts 里插入如下代码： export class AppModule { constructor(private config: DebugConfig, private actions$: Actions){ // console.log('Jerry config: ', this.config); this.actions$.pipe( ofType(CartActions.LOAD_CART), map((action: CartActions.LoadCart) => action.payload), tap((data) => console.log('Jerry cart: ' , data))).subscribe(); }}运行时成果： Error 是常常搁置在 NgRx Store 中的 AJAX 调用状态之一。 其余状态包含 Loading，Loaded 和 Success 等等。 interface ResultState { result: Result, error: string|null, isLoading: boolean, isLoaded: boolean,}为什么将这些状态放入 Store？ 嗯，这通常是由用户体验决策驱动的。例如，用户应该可能在期待调用实现时看到某种进度指示器，或者如果调用后果出错时，能看到谬误音讯。 ...

在 components.reducer.ts 里，loaderReducer 函数，会依据输出的 entityType，返回一阶 reducer. 而后在代码第86行，调用该一阶 reducer 进行状态转换，返回新的状态。 在 cms store reducers index.ts 里，该 reducer 被导入，见代码第21行： 而后，在第49行，调用 entityReducer，给 COMPONENT_ENTITY 类型生产一个新的 reducer 函数。 这个新的 reducer 的函数体： getReducer 在何时会被调用？ 除了 index.ts 之外，其余都是单元测试代码： 通过工厂办法 + injection token 的形式裸露给内部： 最初被导入到 CmsStore module 的 providers 区域里即可： 更多Jerry的原创文章，尽在："汪子熙":

以 CmsSetPageSuccessIndex 为例： 运行时该 Action 类蕴含三大字段： (1) meta(2) payload(3) type metameta 蕴含的 loader 字段和 meta 自身都是一个 object. meta.entityId 和 entityType 是该 action payload 的标识位。 loader 表明该 entity 加载情况。 payload蕴含的业务数据： type字符串类型。 从 上图 Prototype 能看出，CmsSetPageSuccessIndex 的原型链类为 EntitySuccessAction. 这一点也能从其实现代码看出： export class CmsSetPageSuccessIndex extends StateUtils.EntitySuccessAction { readonly type = CMS_SET_PAGE_SUCCESS_INDEX; constructor(pageContext: PageContext, payload: Page) { super(pageContext.type, pageContext.id, payload); }}查看 EntitySuccessAction 的实现： 属性1，meta 属性，定义在该类里。属性2，payload，通过结构函数参数定义。属性3，type，定义在上图81行，而后被 CmsSetPageSuccessIndex 重载。 EntitySuccessAction 构造函数接管三个参数：entityType，id 和 payload. ...

SSR optimization engine option 代码： const ngExpressEngine = NgExpressEngineDecorator.get(engine, { timeout: 9000, concurrency: 1, forcedSsrTimeout:90000, maxRenderTime:1000, cache: true, cacheSize: 10, renderingStrategyResolver: (req) => RenderingStrategy.DEFAULT});(1) 首先是 MaxRenderTimeout 超时达到： 显示 log： 而后是： 最初： 留神，这里的 log 不会打印到管制台上： 这两个 timeout 值，谁的数值大，则谁对应的 timeout callback 就会后执行。 更多Jerry的原创文章，尽在："汪子熙":

问题 解答The easiest and recommended way to override basic primary colors, as of version 4.0, is by changing the compiled values of the CSS variables. But change them inside a CSS body selector, instead of a :root selector.Example of storefrontapp/src/styles.scss file: /* You can add global styles to this file, and also import other style files */$styleVersion: 4.0;@import '~@spartacus/styles/index';$useLatestStyles: true;@import '@spartacus/styles';@import '@spartacus/styles/scss/theme/santorini';body { --cx-color-primary: green; --cx-color-seconday: #8aa39b; --cx-color-text: #5c6f68; --cx-color-background: #95d9c3; --cx-color-dark: #a4f9c8;}失效了： ...

首先应用 Administrator 登录 SAP S/4HANA：明码是 W1! 应用 SAP S/4HANA 规范的 Fiori 利用 Maintain Business Users，找到想要调配 Business Role 的用户： 点击 Edit 按钮，进入 Assigned Business Roles 标签页，点击 Add 按钮： 依据须要，增加对应的 Business Role 即可。 最初用 Business User 对应的 email 地址从新登录零碎，发现 Fiori Launchpad 里曾经可能看到 Business Role 对应的 tile 了： 更多Jerry的原创文章，尽在："汪子熙":

点了 Write Review 按钮之后，调用 ProductReviewService 的 add 办法： 该办法 dispatch 一个新的 action： override the ProductReviewService to dispatch a custom action to an effect they would create with the logic they need.搜寻 POST_PRODUCT_REVIEW, 看看接管方是谁。 答案是 『ProductReviewsEffect：接管了该 Action 之后，调用 productReviewsConnector，生产 OCC API 增加 post，待增加胜利后，返回新的 Action 对象 ProductActions.PostProductReviewSuccess，其中蕴含了 ReviewResponse. 同样在该 effect 外部，接管到 POST_PRODUCT_REVIEW_SUCCESS 之后，抛出 Thank you for review 的胜利音讯。 更多Jerry的原创文章，尽在："汪子熙":

先钻研规范的 effect 为何能够被 call 到：在 ProductReviewsEffects 构造函数里设置断点： 发现在拜访首页时，断点即触发。 为什么 AppModule 启动时，就要加载 ProductReviewEffect? 单击 AppModule，就跳转到我自定义的 AppModule 文件了，然而该文件里并没有 ProductReviewEffect： 这个 EffectFeatureModule 是规范框架的实现： Spartacus 所有规范的 Effects 实例，都是在下列代码 ngrx-effects.js 里实例化的： function createEffects(injector, effectGroups, userProvidedEffectGroups) { /** @type {?} */ const mergedEffects = []; for (let effectGroup of effectGroups) { mergedEffects.push(...effectGroup); } for (let userProvidedEffectGroup of userProvidedEffectGroups) { mergedEffects.push(...userProvidedEffectGroup); } return createEffectInstances(injector, mergedEffects);} 问题就是，对于 AppModule 而言，这些 Effects 是从哪里解析进去的？ 看一下规范的 Effects 是怎么做的？ ...

Troubleshoot SQL with SAP HANA Database Explorer 调试器可用于帮忙查找过程、函数或匿名块中的问题。 以下步骤演示了如何应用调试器来调试过程。 选中某个存储过程，右键，抉择 Open for debugging： 从调试器附加选项对话框中，确保抉择了 SQL 控制台连贯。 通过单击行号旁边的在过程中设置断点。 行号旁边将呈现一个复选标记，示意已设置断点。 在数据库浏览器中右键单击须要调试的存储过程，而后抉择 Generate Call Statement 或 Generate Call Statement with UI。 该过程的调用语句将在新的 SQL 控制台中关上。 提供输出参数值，例如 10，而后运行该语句。 当断点触发时，执行将暂停。 能够查看应用的任何变量的以后值。 能够通过单击下面突出显示的编辑按钮来批改某些部分和全局变量类型的值。 能够应用调试器顶部的导航图标继续执行。 能够应用拆散图标进行调试会话。 右键菜单里，还能应用 Report Code Coverage 查看代码执行覆盖率： 代码覆盖率报告显示命中的语句数。 该报告还直观地显示了命中的语句和未命中的语句。 SQLScript analysisSQLScript 代码分析器可用于辨认批示代码品质、安全性或性能问题的模式。 成果如下： 双击某个问题将关上另一个蕴含该过程的 SQL 的选项卡，该问题将突出显示。 Explain plan解释打算以表格模式提供编译后的打算，而不执行它。 当很难在不引起问题的状况下重现问题时，这在剖析某些状况时十分有用。 成果如下： SQL AnalyzerSQL 分析器提供了如何执行剖析的 SQL 语句的图形视图，这能够提供对查问执行的更多见解。 最新版本可用作 Visual Studio Code 的扩大或 SAP Business Application Studio 中的附加扩大 (SAP Performance Tools)。 能够在 SAP HANA 数据库浏览器中生成一个 .plv 文件，而后能够在 SQL Analyzer 中关上该文件。 外部部署 SAP HANA 数据库浏览器、外部部署 SAP HANA 驾驶舱以及 SAP HANA 工作室中还蕴含 SQL 分析器的先前版本。 ...

Access Remote Sources with SAP HANA Database Explorer 近程源(Remote sources)是与其余数据库的连贯。 虚构表应用近程源创立指向存储在另一个数据库中的数据的本地表。 联结查问应用虚构和非虚构表。 为了阐明这些概念，将在近程数据库中创立一个表，其中蕴含来自给定酒店左近的一些顶级旅游景点的虚构评论数据。 酒店住宿与客户拜访左近旅游景点或餐厅的欲望之间可能存在相关性。 无关 SAP HANA 智能数据拜访 (SAP HANA smart data access，SDA) 和 SAP HANA 智能数据集成 (SAP HANA Smart Data Integration，SDI) 的更多详细信息，请参阅将 SAP HANA 云连贯到近程数据源和应用 SAP HANA 云进行数据拜访。 要从 SAP HANA 疾速版创立近程源到 SAP HANA Cloud，请从 SAP HANA 疾速版关上 SAP HANA 数据库浏览器。 指定服务器、端口、额定的适配器属性和凭据（User1、Password1）。 当然也能够执行通过执行 sql 语句来实现近程数据源的增加： CREATE REMOTE SOURCE REMOTE_HC_TRIAL ADAPTER "hanaodbc" CONFIGURATION 'ServerNode=XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX.hana.trial-XXXX.hanacloud.ondemand.com:443;driver=libodbcHDB.so;dml_mode=readwrite;sslTrustStore="-----BEGIN CERTIFICATE-----MIIDrzCCApegAwIBAgIQCDvgVpBCRrGhdWrJWZHHSjANBgkqhkiG9w0BAQUFADBhMQswCQYDVQQGEwJVUzEVMBMGA1UEChMMRGlnaUNlcnQgSW5jMRkwFwYDVQQLExB3d3cuZGlnaWNlcnQuY29tMSAwHgYDVQQDExdEaWdpQ2VydCBHbG9iYWwgUm9vdCBDQTAeFw0wNjExMTAwMDAwMDBaFw0zMTExMTAwMDAwMDBaMGExCzAJBgNVBAYTAlVTMRUwEwYDVQQKEwxEaWdpQ2VydCBJbmMxGTAXBgNVBAsTEHd3dy5kaWdpY2VydC5jb20xIDAeBgNVBAMTF0RpZ2lDZXJ0IEdsb2JhbCBSb290IENBMIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEA4jvhEXLeqKTTo1eqUKKPC3eQyaKl7hLOllsBCSDMAZOnTjC3U/dDxGkAV53ijSLdhwZAAIEJzs4bg7/fzTtxRuLWZscFs3YnFo97nh6Vfe63SKMI2tavegw5BmV/Sl0fvBf4q77uKNd0f3p4mVmFaG5cIzJLv07A6Fpt43C/dxC//AH2hdmoRBBYMql1GNXRor5H4idq9Joz+EkIYIvUX7Q6hL+hqkpMfT7PT19sdl6gSzeRntwi5m3OFBqOasv+zbMUZBfHWymeMr/y7vrTC0LUq7dBMtoM1O/4gdW7jVg/tRvoSSiicNoxBN33shbyTApOB6jtSj1etX+jkMOvJwIDAQABo2MwYTAOBgNVHQ8BAf8EBAMCAYYwDwYDVR0TAQH/BAUwAwEB/zAdBgNVHQ4EFgQUA95QNVbRTLtm8KPiGxvDl7I90VUwHwYDVR0jBBgwFoAUA95QNVbRTLtm8KPiGxvDl7I90VUwDQYJKoZIhvcNAQEFBQADggEBAMucN6pIExIK+t1EnE9SsPTfrgT1eXkIoyQY/EsrhMAtudXH/vTBH1jLuG2cenTnmCmrEbXjcKChzUyImZOMkXDiqw8cvpOp/2PV5Adg06O/nVsJ8dWO41P0jmP6P6fbtGbfYmbW0W5BjfIttep3Sp+dWOIrWcBAI+0tKIJFPnlUkiaY4IBIqDfv8NZ5YBberOgOzW6sRBc4L0na4UU+Krk2U886UAb3LujEV0lsYSEY1QSteDwsOoBrp+uvFRTp2InBuThs4pFsiv9kuXclVzDAGySj4dzp30d8tbQkCAUw7C29C79Fv1C5qfPrmAESrciIxpg0X40KPMbp1ZWVbd4=-----END CERTIFICATE-----"' WITH CREDENTIAL TYPE 'PASSWORD' USING 'user=User1;password=Password1';能够通过抉择操作 > 复制 > SQL 端点从 SAP HANA Cloud Central 复制 ServerNode。 ...

这是 Jerry 2021 年的第 58 篇文章，也是汪子熙公众号总共第 335 篇原创文章。 咱们在 SAP 官方网站 help.sap.com 输出关键字 SAP HANA 之后： 会看到很多搜寻后果： 这么多和 HANA 相干的解决方案，Jerry 当然不可能每一种都接触过，这里只谈一谈我有过浅显理解的几款。 SAP HANA Platform这当然就是 SAP 的王牌产品了，SAP HANA 是一个古代的内存数据库和开发平台，反对本地部署或云端部署。SAP HANA 平台的数据库服务，可能以列的形式提供数据的存储和拜访。SAP HANA 容许在同一个零碎上进行在线事务处理 (OLTP) 和在线剖析解决 (OLAP)，而无需冗余数据存储或聚合。从其名称的 Platform 不难看出，SAP HANA 不仅仅是一个内存数据库，而且也是一个利用开发平台，其上能够开发应用程序、运行基于 SAP HANA 构建的自定义应用程序并进行生命周期治理。 SAP HANA Enterprise Cloudhttps://www.sap.com/products/... SAP 官网对 SAP HANA Enterprise Cloud 的定义，有三个关键词： CloudSecurePrivately managedSAP HANA 企业云是一个齐全可扩大且平安的公有托管云解决方案，可能帮忙企业在云环境中充沛开释 SAP HANA 的全副价值，通过翻新减速增长、推动数字化转型并疾速交付业务成绩。 SAP HANA Express EditionSAP HANA Express Edition 是 SAP HANA 的一个简化版本，可能在合乎硬件要求的个人电脑和其余主机，例如托管在云服务提供商上的虚拟主机里运行。 ...

咱们在 help.sap.com 上输出 SAP HANA 进行搜寻之后， 会看到有相当多的搜寻后果： 本文就其中最容易引起混同的四款产品，做一个解释阐明。 SAP HANA Platform最新版本为 2.0 SP05， SAP HANA is a modern, in-memory database and platform that is deployable on premise or in the cloud. The SAP HANA platform is a flexible data source-agnostic in-memory data platform that allows you to analyze large volumes of data in real time. Using the database services of the SAP HANA platform, you can store and access data in-memory and column-based. SAP HANA allows online transaction processing (OLTP) and online analytical processing (OLAP) on one system, without the need for redundant data storage or aggregates. Using the application services of the SAP HANA platform, you can develop applications, run your custom applications built on SAP HANA, and manage their lifecycles. ...

简而言之：通过 cart reducer 配合 ngrx-store.js 框架代码。 搜寻关键字 LoadCartSuccess： 运行时断点触发： 上下文：cartConnector 的回调里。 依据关键字 LOAD_CART_SUCCESS 持续搜寻： 咱们明确一点：action 在 reducer 里进行状态迁徙。 依据这个关键字，很快就搜寻到了 LOAD_CART_SUCCESS 所在的状态迁徙： 能够看到，http.js 上下文里，调用 observer 的 next 办法，将从 Commerce Cloud 后盾返回的 API response，告诉其余观察者。 body 字段里才是真正的 payload： 这里应用 .body, 将 payload 解析进去： 在这段代码里，进行 conversion： 此处触发 Spartacus team 开发的 mergeMap callback：把 HTTP.js 返回的 response，包装成 LoadCartSuccess 的强类型 payload： 包装完之后的强类型 response： 最初 Spartacus cart reducer 被调用： reducer 执行结束后，咱们就能在 ngrx-store.js 的 combination 函数里的变量 nextState, 看到最新的 cart memory value： ...

App.module.ts 的源代码： export class AppModule { constructor(private config: DebugConfig, private actions$: Actions, private cartService: ActiveCartService){ // console.log('Jerry config: ', this.config); this.actions$.pipe( ofType(CartActions.LOAD_CART), map((action: CartActions.LoadCart) => action.payload), tap((data) => console.log('Jerry cart: ' , data))).subscribe(); this.cartService.getLoading().subscribe((data) => console.log('Jerry cart loading? ', data)); }}首先执行 ofType，这实质是一个 filter 操作： 数组的 some 办法：查看数组元素是否满足 predicate 函数指定的条件 而后执行 map 操作，返回一个 OperatorFunction，作为 pipe 的输出条件之一： 触发点： quantity 的值来自 activeCartService 保护的 active cart 的 deliveryItemsQuantity 字段。 执行 Async pipe： ...

SAP HANA 数据库浏览器是一个基于 Web 的工具，用于浏览和应用 SAP HANA 数据库对象，例如表、视图、函数、存储过程、导入和导出数据、调试 SQLScript、查看跟踪文件和执行 SQL 语句。 它以前被命名为 SAP HANA 运行时工具 (HRTT)，并在 SAP HANA 1.0 SPS 12 中引入。因为它是基于 Web 的，个人用户无需放心装置软件或利用补丁。 截至 2021 年 3 月 25 日，它还反对 Data Lake IQ 连贯。 (1) 来自 SAP HANA 或 Data Lake 实例的 SAP 业务技术平台 (SAP BTP) Cockpit。 (2) 从 SAP HANA 或启用 IQ 的数据湖上的 SAP HANA Cloud Central。 (3) From the SAP HANA cockpit ...

Access a Classic Schema from SAP Business Application Studio 本文主题：从 SAP Business Application Studio 中的 HDI 容器拜访 classical schema 或复制 schema 中的数据。 本教程旨在成为跨容器拜访的示例。抉择简略的数据模型和加载机制来模仿应用 SAP Landscape Transformation 或 ABAP 模式等工具复制的模式。 应用以下代码创立 schema 和用户。 您还将创立一个简略的表，用作跨容器拜访的示例。 您将创立一个 SQL 角色并将其调配给具备之前手动授予的权限的用户 PLUSR。 此用户将用于 HDI 容器和一般模式之间的连贯，并将该角色授予 HDI 容器技术用户。 CREATE SCHEMA "PLAIN";CREATE USER PLUSR PASSWORD "HanaRocks01" SET USERGROUP DEFAULT; ALTER USER PLUSR DISABLE PASSWORD LIFETIME;CREATE ROW TABLE "PLAIN"."REGIONS" ( REGION NVARCHAR(5), DESCRIPTION NVARCHAR(100) );CREATE ROLE CCROLE;grant SELECT, UPDATE, INSERT, DELETE, EXECUTE, SELECT METADATA ON SCHEMA "PLAIN" TO CCROLE with grant option;grant CCROLE to PLUSR with admin option;执行 SQL，遇到如下错误信息： ...

这个教程的前一篇文章，SAP HANA Cloud 学习教程之一： 如何在 SAP BTP 上创立 SAP HANA Cloud 实例，咱们曾经胜利在 SAP BTP HANA Cloud Service 上创立了一个数据库表。 本文介绍如何往这个数据库表里插入数据。 在 Business Application Studio 里，点击 Open HDI Container，关上 SAP HANA Database Explorer for SAP HANA Cockpit： 有时会遇到 Warning：Invalid Request Error 的正告信息，此时 retry 即可。 留神：SAP Business Technology Platform trial 账号，其下创立的 HANA Cloud Service 实例，每天都会主动被敞开，须要开发者手动从新开启。 手动开启后，状态处于 Running： 从新刷新 SAP HANA Database Explorer for SAP HANA Cockpit： 之后一切正常了。 ...

SAP HANA Cloud以下是应用 SAP HANA Cloud 的一些益处： SAP 会主动应用软件更新。硬件由云提供商（例如 AWS、Azure 或 GCP）治理。备份是主动的，复原申请是通过服务申请解决的。您能够依据须要更改内存、计算和存储设置。提供了将数据存储从内存中扩大到本机存储扩大到数据湖的能力，同时提供了一个通用拜访层，使您可能进一步管制性能和老本。以下是 SAP HANA Cloud 和外部部署版本之间的一些差别： 每个 SAP HANA Cloud 实例都是一个 SAP HANA 数据库。 本地版本每次装置能够有多个数据库，这称为多租户。 与 SAP HANA Cloud 实例的连贯必须是平安的，并且要求最低 SAP HANA 客户端版本为 2.4.167。 SAP HANA Cloud 的治理用户名为 DBADMIN，而 SAP HANA 2.0 数据库的治理用户名为 SYSTEM。 无关其余详细信息，请参阅 HANA 2.0 中的预约义用户、SAP HANA 云管理员 DBADMIN 和预约义用户。 Connect to SAP HANA CloudGet to know SAP HANA CloudSAP HANA Cloud 是一个残缺的数据库和利用程序开发平台。 它让您能够应用高级数据处理性能（文本、空间、预测等）从所有类型的数据中获取洞察力。 通过将内存存储与列式存储相结合，数据操作的执行速度比具备基于磁盘的存储的传统数据库更快。 SAP HANA 也是 translytical 的，这意味着开发人员能够从雷同的构造实时执行事务性和剖析性操作，而无需创立额定的数据正本，例如物化视图。 ...

原文：UIVeri5: More Stable System Tests for UI5 Applications UIVeri5 是来自 SAPUI5 的开源零碎测试工具。它基于 Protractor，这是一种十分风行的基于 node.js 的工具，由 Google 开发，用于零碎测试。 与其余工具（Selenium、nightwatchjs、Robot、Casper.js、Cypress ……）相比，最重要的区别是具备更好稳定性的附加性能。家喻户晓，稳定性始终是零碎测试的一大挑战，UIVeri5 的个性在这方面有很大帮忙，能够使测试更加稳固。与 OPA 相似，UIVeri5 反对控件定位器，即便 SAPUI5 更改某些实现细节，它也能够稳固地辨认元素。此外，它负责异步，因而您不须要增加 sleep 和 wait 语句。此外，您能够开发可重用的页面对象，例如用于 FIORI Elements 应用程序。 UIVeri5 的次要性能自动化进行实在的浏览器（包含挪动设施）交互，UIVeri5 的基金会（Protractor）领有宏大的社区与 UI5 渲染主动同步(不须要显式调用 waits, sleeps),进步测试稳定性OPA5 定位器，进步测试稳定性，还反对 DOM 选择器，如 CSS、jQuery、XPath基于 node.js,容许应用宏大的 node.js 工具生态系统基于 ES6, 容许应用新的 JavaScript 性能被测系统上的身份验证由 UIVeri5 解决多浏览器测试，涵盖 Google Chrome、Mozilla Firefox、Microsoft Internet Explorer、Microsoft Edge、Mac 和 iOS 上的 Safari、Android 上的 Google Chrome行为驱动开发 - Bebavior Driven Development. Gherkin 个性 (cucumber-js) 和 Spec (Jasmine) 文件反对继续集成，能够轻松集成到 CI/CD 解决方案视觉测试，截图比照开源Test Strategy即便测试更稳固，测试金字塔依然是相干的，您应该将精力集中在单元和集成测试上。在大多数状况下，零碎测试仅用于高兴门路（例如测试主场景、演练整个零碎堆栈、跨应用程序导航）或冒烟测试。以下测试金字塔展现了咱们如何应用工具进行不同级别的测试。 OPA 的重点是应用 MockServer 具体测试与后端隔离的单个应用程序。 UIVeri5 用于通过包含后端在内的残缺堆栈进行零碎测试。 ...

原文：state of testing in UI5: OPA5, UIVeri5 and wdi5 测试作为确保 UI5 利用程序开发投资的一种伎俩曾经变得越来越广泛。 为了进一步推动这个问题，让咱们评估 UI5 中最突出的端到端测试框架。 所有这三个都容许测试面向用户的性能，“像用户一样”操作 UI5 应用程序：与 UI 元素交互。 UIVeri5 和 wdi5 都能够近程管制浏览器。 也就是说，它们有一个不同于 UI5 应用程序的运行时。 因而，两者都须要一个（网络）服务器，以便连贯到运行测试中的 UI5 应用程序。 OPA5 的不同之处在于它与 UI5 应用程序共享雷同的运行时——它与被测 UI5 应用程序相邻工作，而不是离开。 （QUnit 不在本文中，因为咱们专一于运行面向用户的测试，而不是纯正的功能测试。） 此外，wdi5 容许在挪动设施上测试混合应用程序。 它能够连贯到 iOS、Android 和 Electron 上应用cordova 封装的UI5 应用程序，并运行与基于浏览器的应用程序雷同的测试。 OPA5OPA5 自带 UI5，不须要额定的装置步骤。 然而它的设置并不直观，混合了 OPA5 的根本 QUnit，并且须要几个蕴含级别。 上面是一些例子： webapp/test/integration/opaTests.qunit.html: <!-- ... --> <script src="opaTests.qunit.js"></script></head><body> <div id="qunit"></div> <!-- ... -->webapp/test/integration/opaTests.qunit.js: sap.ui.getCore().attachInit(function () { "use strict"; sap.ui.require([ // all test suites aggregated in here "test/Sample/test/integration/AllJourneys" ], function () { // `OPA5`'s mama :) QUnit.start(); });});webapp/test/integration/AllJourneys.js:sap.ui.define([ "./arrangements/Startup", // arrangements "./NavigationJourney", // actions + assertions "./BindingJourney", // actions + assertions "./InteractionJourney" // actions + assertions], /* ... */excerpt from webapp/test/integration/BindingJourney.js: ...

在浏览本文之前，请确保您曾经读过了这篇文章：[给 SAP BTP 平台上的 Java 利用削减用户登录和认证机制]() 应用 App Router 进行身份验证后，您的 java 后端服务依然在 Web 中齐全可见且不受爱护。 因而，您还须要爱护您的 Java 微服务，以便它们仅承受以后用户具备无效 JWT 的申请。 此外，您将以解决受权的形式设置微服务，即了解咱们之前应用 xs-security.json 文件配置的 JWT 的 OAuth 范畴。 在下文中，您将应用 SAP CP Spring XSUAA 平安库的平安性能来爱护微服务。 在您的应用程序 pom.xml 中，确保存在以下依赖项： <dependency> <groupId>com.sap.cloud.security.xsuaa</groupId> <artifactId>xsuaa-spring-boot-starter</artifactId></dependency>这为 Spring 提供了 XSUAA 库的必要性能。在设置 SecurityConfiguration 时利用它们： @Configuration@EnableWebSecurity(debug = true) // TODO "debug" may include sensitive information. Do not use in a production system!@EnableGlobalMethodSecurity(prePostEnabled = true, securedEnabled = true, jsr250Enabled = true)public class SecurityConfiguration extends WebSecurityConfigurerAdapter { @Autowired XsuaaServiceConfiguration xsuaaServiceConfiguration; @Override protected void configure(HttpSecurity http) throws Exception { http .sessionManagement() .sessionCreationPolicy(SessionCreationPolicy.STATELESS) // session is created by approuter .and() .authorizeRequests() .antMatchers("/*").authenticated() .antMatchers("/*").hasAuthority("Display") .anyRequest().denyAll() .and() .oauth2ResourceServer() .jwt() .jwtAuthenticationConverter(getJwtAuthenticationConverter()); } /** * Customizes how GrantedAuthority are derived from a Jwt */ Converter<Jwt, AbstractAuthenticationToken> getJwtAuthenticationConverter() { return new TokenAuthenticationConverter(xsuaaServiceConfiguration).setLocalScopeAsAuthorities(true); }}以上将须要通过 JWT 对您服务的所有端点进行身份验证。此外，所有 JWT 都须要蕴含显示范畴。 ...

灰盒：作为业务应用程序（灰盒）的 SAP BTP 开发人员（例如 SAP、合作伙伴、客户），您定义可能蕴含多个 OAuth 范畴的角色模板。此处的开发人员在 xs-security.json 中定义范畴、角色模板和附加属性，在创立 XSUAA 的服务实例化时应用。 橙色框：作为业务应用程序（客户）的 SAP BTP 租户管理员，您能够创立一个逾越多个角色的角色汇合，反映角色模板。通过这种形式，您一方面能够实现对微服务的细粒度受权管制，另一方面能够在粗粒度角色汇合中非常灵活地组合它们。这背地的想法是，例如，Business Partner Manager 可能逾越多个应用程序和微服务，所有应用程序和微服务都具备独自的范畴。角色汇合解析角色和范畴，并返回由角色汇合组成的所有范畴的联结。 绿框：作为用户（客户）的管理员，您能够应用 SAML 属性组将角色汇合调配给最终用户。

Create a Sample Application on SCP Neo Using SAP Cloud SDK 本文目录How to generate a project stub using a Maven ArchetypeHow to understand the project structure and its artifactsHow to implement and understand the Hello World ServletHow to implement and understand the integration testHow to deploy the project依照本文介绍的步骤，最初失去的利用： Generate project from archetype因为您曾经装置了 Maven，您能够应用它从 SAP Cloud SDK Maven 原型生成我的项目存根。 只需应用您的控制台（IDE 或操作系统），导航到您我的项目的父目录并运行以下命令。 mvn archetype:generate -DarchetypeGroupId=com.sap.cloud.sdk.archetypes -DarchetypeArtifactId=scp-neo-javaee7 -DarchetypeVersion=RELEASE生成过程开始后，Maven 会询问您通常的模块参数。 本文抉择 firstapp 作为 artifactId / 项目名称。 ...

Connect to OData service on Neo using SAP Cloud SDK Virtual Data ModelS/4HANA 零碎中存储的数据实质上结构复杂，因而很难手动查问。因而，HANA 引入了虚构数据模型 (VDM)，旨在从这种复杂性中形象进去，并以语义上有意义且易于应用的形式提供数据。从 S/4HANA 零碎应用数据的首选形式是通过 OData 协定。尽管出于兼容性起因也反对 BAPI，但 OData 应该始终是您的首选。您能够在 SAP 的 API 业务核心找到 S/4HANA Cloud 零碎的所有可用 OData 端点的列表。 SAP Cloud SDK 当初将 VDM for OData 引入 Java 世界，使 OData 端点的类型平安应用更加简略！ VDM 是应用来自 SAP API 业务核心的信息生成的。这意味着它与 API 业务核心提供的每个 API 兼容，因而也与每个 S/4HANA Cloud 零碎兼容。 传统的 OData 服务拜访形式： 让咱们来看看咱们能够编写的典型代码来拜访任何应用 SAP Cloud Platform SDK 进行服务开发的 OData 服务。这里，咱们从 S/4HANA 零碎中检索业务合作伙伴列表： ...

Secure Your Application on SAP Cloud Platform Cloud Foundry 本文概要如何设置和配置 App Router 组件作为微服务环境的地方入口点来解决身份验证和受权如何爱护您的 Java 微服务，使其仅承受基于从利用路由器收到的无效 JSON Web 令牌 (JWT) 的申请为您的应用程序用户调配角色和范畴，并让您的后端解决受权信息基本概念在深刻理解架构的理论设置之前，让咱们疾速回顾一下本教程打算采纳的架构。 下图是 SAP Business Technology Platform 上运行时的用户认证流。首先咱们曾经有一个创立好并且失常工作的 Java 微服务。然而，您将应用所谓的利用路由器（App Router），而不是让客户间接拜访这个应用程序，它有两个目标。 一方面，App Router 是进入微服务世界的通用入口点。次要思维是您能够将应用程序拆分为多个具备独立可部署性、多语言运行时和持久性以及独立团队的微服务。因而，须要一个地方入口组件来向最终客户暗藏微服务环境的复杂性。 另一方面，App Router 次要负责管理认证流程。利用路由器接管来自用户的未经身份验证的传入申请，并应用用户帐户和身份验证扩大服务 (XSUAA) 启动 OAuth2 流。 XSUAA 服务是 CloudFoundry 的 UAA 服务的 SAP 特定扩大，用于解决身份验证和受权（它可能再次将此方面委托给其余提供者，例如内部身份提供者）。如果用户在 XSUAA 进行身份验证，它将应用蕴含通过身份验证的用户以及他或她已被授予的所有范畴的 JSON Web 令牌 (JWT) 进行响应。 JWT 由利用路由器传递给底层微服务，以便它们从这个工作中解放出来。 同时，这些微服务只能通过无效的 JWT 拜访，因而能够避免未经身份验证的流量。 JWT 蕴含一个签名，每个微服务都须要验证该签名能力建设信赖。 因而，每个服务都须要一个密钥（客户端秘密或公钥）来验证此签名并回绝任何带有有效 JWT 的申请。 因而，每个服务都必须保护与 XSUAA 的服务绑定，该服务绑定为运行时验证提供此信息, 如下图。 为了实现这一点，每个微服务都绑定到一个专用的 XSUAA 实例，该实例将此信息写入 VCAP_SERVICES 环境变量中，微服务能够应用该变量来验证任何令牌的有效性。 ...

Get Started with Messaging for Decoupled Communication Step 1: What is the SAP Event Mesh service?SAP Event Mesh 是一种齐全托管的服务，用于连贯应用程序、服务和零碎，以便它们能够通过音讯和事件互相交互。 它通过引入地方音讯代理取代了传统的点对点通信。 尽管点对点通信实用于在无限数量的发送方和接管方之间共享数据，但可扩展性很快就会成为一个问题。 SAP Event Mesh 解决了这个问题，并确保能够在发送方和多个接管方之间大规模牢靠地替换音讯。 此外，通过引入音讯代理，您能够解耦应用程序、服务和零碎之间的通信，以便能够异步（非阻塞）发送音讯。 异步通信进步了性能和可扩展性，因为发送方在期待单个接管方在线接管间接音讯时不会减慢或阻塞。 因为 SAP Event Mesh 负责消息传递，因而发送方无需晓得哪些应用程序、服务或零碎将接管哪些数据。 发送应用程序不会因期待来自接管方的非关键响应而减慢，这些接管方可能处于离线状态并且无奈在音讯公布时接管和响应音讯。 接管应用程序能够订阅具备业务重要性的音讯并确保接管所有相干更新，并且能够依照本人的节奏应用这些音讯。 SAP Event Mesh 的应用场景解耦：近程和异步通信。集成：不同编程语言/环境和零碎之间的通用翻译器。可靠性：依据不同的服务质量级别确保消息传递，并充当生产者和消费者之间的中介。高容量：音讯代理弹性反对高度可扩大的通信用例。事件驱动架构：跨零碎和环境边界散发事件，并基于不同的 SAP 后端系统为事件驱动架构提供反对。这些用例建设在 SAP Event Mesh 的哪些个性和特色之上？ 大规模牢靠通信无缝连贯应用程序、零碎和服务解耦通信以取得更大的可扩展性提供弹性以解决意外的数据流量顶峰在云中传输、治理和应用事件确保基于规范的无缝集成 Protocols and librariesSAP Event Mesh 反对规范消息传递协定，以跨混合环境连贯应用程序、服务和零碎。 WebSocket 上的高级消息传递队列协定 (Advanced Messaging Queuing Protocol, AMQP) 1.0 是用于应用程序或组织之间消息传递的凋谢标准协议。 AMQP 的定义个性是面向音讯、排队、路由（包含点对点和公布订阅）、可靠性和安全性。 基于 WebSocket 的音讯队列遥测传输 (Message Queuing Telemetry Transport, MQTT) 3.1.1 是一种轻量级消息传递协定，专为低带宽、高提早而设计。 这是未在云中运行的应用程序应用的举荐协定。 ...

timeoutTime in milliseconds to wait for SSR rendering to happen. It does not mean the actual duration spent by a SSR rendering request, but the range between the timestamp when SSR receives a render request and that request actually gets processed by SSR server. 期待 SSR 渲染产生的工夫（以毫秒为单位）。 它并不意味着 SSR 渲染申请所破费的理论持续时间，而是 SSR 收到渲染申请时的工夫戳与该申请理论被 SSR 服务器解决之间的范畴。 forcedSsrTimeoutTime in milliseconds to wait for rendering when SSR_ALWAYS render strategy is set for the request. ...

问题：为什么咱们会看到形如下列格局的日志？ CSR fallback: rendering in progress每次新的申请达到 SSR 时，都会调用文件 spartacus-setup-ssr.js 中的 renderResponse 函数。 在其中， this.shouldRender 被调用，以评估应如何解决此申请。 在 shouldRender 中： step1：评估以后并发数是否达到下限。 评估逻辑是通过将以后并发值（在 this.concurrency 中保护）与客户传递的选项（ this.ssrOptions.concurrency ）进行比拟来实现的： 源代码： const concurrencyLimitExceed = ((_a = this.ssrOptions) === null || _a === void 0 ? void 0 : _a.concurrency) ? this.currentConcurrency >= this.ssrOptions.concurrency : false;step2：评估同一页面是否曾经有渲染过程。 const isRendering = this.renderingCache.isRendering(this.getRenderingKey(request)); 如何判断两个渲染申请是否代表同一个页面？这是由第 97 行中的函数 this.getRenderingKey(request) 实现的。 默认的辨别逻辑是应用申请的 originalUrl 字段，即如果两个申请的 originalUrl 雷同，则 SSR 将它们视为同一个页面。 如何判断给定页面是否曾经有正在进行的渲染过程？ 在 spartacus-setup-ssr.js 的 RenderingCache 类中，咱们应用 Map 通过键值构造来保护每个页面的渲染过程，参见上面的第 9 行。 ...

仅执行组件提早(Component lazy load)加载是不是不起作用？进行这项工作是否须要任何设置？ 思考到咱们在整个网站上应用的共享组件，咱们想采纳这种办法(即组件提早加载)。这样，咱们能够只测试每个组件。答复：组件提早加载无效，然而在更简单的组件（应用不同的指令和组件）的状况下更加艰难，因为动静导入仅针对组件类 Component class，而不是 Angular 模块。如果这些组件类中应用到的指令和其余组件并没有被加载，则运行时会报各种谬误。 这些简单状况的一种解决办法是将模块(module definition)定义嵌入到与组件自身雷同的文件，即在 Component 实现文件里，再定义一遍模块。因而模块将与组件一起加载。 如果咱们持续抉择模块提早加载，咱们如何从插槽提早加载没有与 CMS 组件映射的 Angular 组件？答复：它目前在 Angular 框架中不是开箱即用的。 默认状况下，Angular 反对路由提早加载，对于像 Spartacus 这样的 CMS 驱动的站点，咱们不能应用基于路由的形式来提早加载一个 Angular 组件，因为咱们在构建时不晓得指定路由须要哪些组件。 这就是 Spartacus 利用 CMS 映射作为反对提早加载的机制的起因。 简而言之，咱们能够失去一个提醒（在导航到它时）指定页面须要哪些组件，而后应用 CMS 映射配置，提早加载所需的组件或性能。 模块内的动态导入是否会影响组件/模块提早加载？ 例如：咱们在 HomePage 模块中导入了 iconModule 并且以后主页模块正在 app.module 中提早加载。 在这种状况下，组件提早加载不起作用。 模块提早加载仅实用于 home 模块答复：如果您动静（惰性）和动态地导入一个入口点，那么构建器（webpack）将使其动态捆绑。 这是一个常见的状况，为什么提早加载可能不起作用，在某种程度上，应用程序应该依然能够工作，如果配置正确，代码拆分机制将不会对这段代码起作用，并且不会生成独自的 JS 块。 然而，动态导入能够在独自的提早加载模块之间共享。如果这些导入仅在提早加载的模块之间共享，则将创立非凡的共享块，它将加载两个性能。 如果导入也与间接在主块（app.module）中导入的某些组件或模块共享，那么代码将被动态捆绑到主块中。 为了测试目标，咱们尝试了组件和模块提早加载。 它们都不能齐全工作。 即便在增加了 provideDefaultConfig(b2cLayoutConfig) 之后，只管增加了这个，UI 依然会在奇怪的中央中断。答复：很难从这个形容中猜想潜在的问题。 一般来说，如果提早加载不起作用，最好的方法是一步一步地做，从很少的组件开始，并辨认潜在的问题。 即便如此，依然会有局部代码须要立刻加载，例如应用程序初始化程序、http 拦截器等。 从 Spartacus 3.0 开始，咱们开始公布带有默认提早加载性能的整个库。所有新性能都是以这种形式创立的 + 咱们正在继续移动现有性能，同时改良机制和技术（但依然是雷同的机制）。

需要如何找到触发该网络申请的精确代码地位？ 从 initiator 里查看调用栈上下文，一点脉络也没有。 找到触发该网络申请的控件的 selector：cx-register 在 Storefront TypeScript 源代码里查找不到： 在编译生成的 JavaScript 里搜寻 cx-register:找到三处 只有间接查看 SAP Spartacus 源代码：cx-register 对应的 RegisterComponent，定义在 user-profile-components.module.ts 里： 最初找到了 RegisterComponent 里的其余依赖： 比方： userRegister：UserRegisterFacadeglobalMessageService：GlobalMessageServicefb：FormBuilderrouter：RoutingService这些依赖，在编译进去的 for 运行时代码里，都可能看见： 这些依赖都是作为另一个 module 被导入。 看不到这些 module 的办法里的 JavaScript 代码？ 间接搜寻 RegisterComponent，后果太多了有200多个匹配。 试试换成另一个办法： 找到了： 所以论断是，TypeScript 编译成的 JavaScript 源代码，运行时在 Chrome 开发者工具里还是可能找到的。 更多Jerry的原创文章，尽在："汪子熙":

首先在一个规范的 Storefront 上，找到该 Component 的 selector 找到其 Component 名称：LoginComponent 而后找到该 Component 的门路，位于 feature-libs 上面的 user 模块内： feature-libs\user\account\components\login\login.component.ts 在该模块内，找到了其与 CMS Component LoginComponent 的一一对应关系： 在我本人的 Storefront 我的项目的 package-lock.json 文件里，找到了版本号：3.4.3 新建一个 Component，扩大规范的 LoginComponent： 在我的 AppModule 里，将 CMS LoginComponent 映射到我扩大的 ExtLoginComponent 去： 最初运行时的成果： 留神：如果在我的扩大 Component 里，从下列这个门路导入 LoginComponent： import { LoginComponent } from '@spartacus/user/account/components/login/login.component'; 则报错： ERROR in ./src/app/loginExtension/extLogin.component.tsModule not found: Error: Can't resolve '@spartacus/user/account/components/login/login.component' in 'c:\Code\SPA\strange\mystore\src\app\loginExtension' 正确的门路为： import { LoginComponent } from '@spartacus/storefront'; ...

前文：SAP Spartacus 服务器端渲染单步调试步骤之一：应用程序筹备工作 入口： 进入 platform-server.js: 入口： 最终在服务器端执行 bootstrap，输出 Component 为 AppComponent： 这些调用栈和在客户端执行是一样的： 一旦进入这个调用，阐明服务器端应用程序的渲染曾经完结了： html 变量蕴含了渲染好的 HTML 源代码： 首先把渲染好的应用程序源代码返回给浏览器: 如果启用了缓存，将渲染后果放到 map 里： 更多Jerry的原创文章，尽在："汪子熙":

所有惯例申请都用 universal engine 渲染： Index 是动态页面，还得从 browser 文件夹里的资源登程： 读取视图实例： 拿到的 view 实例： 依据申请实例拿到其 key： 出现的页面保留在内存中，以便在下次申请时提供服务。 如果 cache 设置为 false，则一旦胜利返回第一个胜利响应，响应就会被驱赶。 OptimizedSsrEngine 默认申请的 key 就是 originalURL：/ 去 cache 里查找这个 / 之前曾经渲染过了吗？ RenderingCache 里保护了一个 Map： 判断是否应该渲染以后申请： 既没有正在渲染，也没有达到并发下限，渲染策略不是 CSR，则 shouldRender 返回 true： 优化引擎计数器 currentConcurrency 加一。 而后查看 shouldTimeout：如果传入了 timeout 值，才会 timeout： 例如 timeout 为 7秒，则7秒后，执行 fallbackToCSR，那么7秒内实现渲染呢？ 在 map 里设置一个 key 为 / 的标记位，注明其正在渲染： 开始调用 expressEngine 进行渲染： ...

原文 Spartacus 是一种基于 Angular 的 JavaScript 解决方案，次要在浏览器中运行。它是渐进式 Web 应用程序 (PWA) 之一，反过来又代表了响应式网站和应用程序的共生关系。这到底是什么意思，SAP Spartacus 的优缺点是什么？ 渐进式 Web 应用程序 (PWA)、本机应用程序和规范浏览器拜访之间有什么区别？各自的优缺点是什么？ 让咱们从通常的拜访办法开始——“失常拜访”服务器通过浏览器出现的 HTML 页面：如果浏览器查问一个页面，服务器会向相应的 HTML 页面提供任何样式表（CSS）和 JavaScript。接管到内容后，浏览器会显示残缺的页面并执行任何 JavaScript。页面内的任何导航都会导致所有内容从新加载。 本机应用程序从根本上不同于网页。它们通常应用依赖于设施的框架（iOS 的 Android 或 Swift）来实现，并以最终用户设施上的操作系统为根底。应用程序通常通过 API 接口与后端通信，以在其内存中从新加载和存储数据。 对于客户而言，原生应用程序的实现意味着除了网站之外，还必须为设施开发独自的应用程序。这意味着不能应用雷同的代码。然而，本机应用程序为用户提供了挪动设施上的最佳用户体验。它们能够很好地离线构建，并提供对设施性能的齐全拜访，例如 GPS、相机等。 另一方面，单页应用程序 (SPA) 或其扩大 (PWA) 依然是网页。与通常的拜访不同的是，该页面实际上仅由 JavaScript 组成，并且——顾名思义——由单个 HTML 页面组成。 因而，当浏览器第一次申请时，服务器总是提供雷同的页面。通常更宽泛的 JavaScript 而后示意内容并动静替换页面上的元素。也就是说：之后服务器只加载所需的数据——取决于哪个 URL 以及用户申请的数据。服务器曾经查问过的任何内容都在本地缓存，并在须要再次应用时呈现。 这样的应用程序让用户感觉更加晦涩，因为它不会从新加载页面。此外，能够十分具体地管制必须加载哪些数据。 PWA 通常还能够拜访各种设施性能。然而，JavaScript 的大量应用对搜索引擎和旧设施来说是一个阻碍。因而，常常应用服务器端渲染：将 JavaScript 在服务器上转换为 HTML，并与通常的拜访办法一起应用。然而，一旦页面被加载，所有拜访都产生而无需从新加载页面。 还必须首先由商店客户装置 PWA。与无需通过规范浏览器的应用程序即可拜访的电子商店相比，这不是一个额定的阻碍吗？作为客户，我会感觉这更不便。 PWA 次要是一个网站，不须要装置。然而，它能够像应用程序一样保留为设施上的图标。因为其相似网站的性质，与经典应用程序不同，它不须要更新。 通过本机应用程序拜访当初正在逐渐淘汰，不是吗？ 这取决于相干的应用程序。然而，对于许多公司而言，开发额定的原生应用程序（实用于 Android、iOS、Windows 和各种设施版本）会带来过多的财务和组织累赘。 PWA 对 SAP Commerce 企业客户的具体益处是什么？SAP 商务零碎是无头操作的，便于从其余零碎拜访。应用 PWA，能够十分具体地加载内容，这也能够让 Google 更好地评估性能。网站和设施只须要一个应用程序。此外，应用更新的前端框架，减少了对员工的吸引力。 ...

这是 Jerry 2021 年的第 55 篇文章，也是汪子熙公众号总共第 332 篇原创文章。 下图是 SAP Commerce Cloud(电商云) UI 加载默认的 SampleData 数据集后关上的主页，这是一个电子设备的在线购物店面，基于 SAP Spartacus 开源我的项目构建而成。 本文介绍一个理论客户案例，在 Jerry 之前的文章 对于 SAP 产品 UI 的搜索引擎优化 SEO - Search Engine Optimization 已经提到过，下图这个网站，是乐高胜利应用 SAP Spartacus 开发并上线的在线购物店面(阿联酋地区)： 大家仅凭视觉效果，能分辨出这两个网站，实际上都是基于同一个 UI 框架开发进去的吗？这也再次体现了 SAP Commerce Cloud UI 无头电商，即 Headless Commerce 的架构。前端电商店面，同 SAP Commerce Cloud 后盾外围性能齐全解耦，二者通过 API 交互。这样，购买了 SAP Commerce Cloud 的客户，应用 Commerce Cloud 提供的 OCC API 和开源的 SAP Spartacus 框架，能够通过二次开发的形式，构建出外观可能体现企业品牌魅力的举世无双的电商店面。 ...

这是 Jerry 2021 年的第 54 篇文章，也是汪子熙公众号总共第 331 篇原创文章。 任何企业级软件的前端开发，都离不开组件(Component)这个概念。撇开具体的 UI 开发技术不谈，所谓组件，就是界面的组成部分(UI Building Blocks). 组件在视觉或者业务性能上，可能被视为繁多元素。 组件可能被形成应用程序的其余组件重用，也可能蕴含其余组件。现实状况下，一个设计良好的组件，其同其余组件或者内部服务的依赖关系，能够被失当地隔离，从而可能独自对组件进行单元测试甚至自动化测试。 近些年随着微服务架构浪潮而衰亡的微前端设计理念，甚至反对同一利用内不同的 UI 组件，采取不同的前端技术进行开发，这些异构的 UI 组件，能够独立地进行开发，测试，部署和交付，通过对立的微前端容器进行治理，并形成最终由用户应用的前端程序。 Luigi 就是 SAP 推动的一个微前端框架。微前端框架的应用曾经超出了本文探讨的领域。本文就 SAP 下列四种产品所应用的前端开发框架/工具中蕴含的组件概念，开展进行介绍。 SAP CRM / SRMSAP S/4HANASAP Cloud for CustomerSAP Commerce Cloud本世纪初，随着企业应用软件从 Client/Server 模式往 Browser/Server 模式的迁徙，SAP CRM 和 SAP SRM 的前端开发技术，也踏上了不同的两条演进路线：别离基于 SAP WebClient UI 和 ABAP Webdynpro. 对于这两项技术更多的介绍和 SAP UI 开发技术的演进之路，请参考 Jerry 之前的文章：SAP UI 和 Salesforce UI 开发漫谈。 SAP WebClient UI 的前身是 SAP BSP - Business Server Page.WebClient UI 在其根底上，引入了组件的概念，并且在视图层削减了对 BSP 扩大标签库的反对，使得其开发效率大大提高。基于 SAP WebClient UI 的开发方式，至今仍在 SAP S/4HANA Service 模块畛域中采纳。 ...

有 partners 在应用 SAP Spartacus 进行二次开发时，遇到这个正告音讯：Translation key missing 'common.search' in the chunk 'common' in file spartacus-core.js 看我的解答： Hi there, if you would like to use cxTranslate pipe, make sure you import I18nModule from @spartacus/core and add it in the import section of your AppModule: Here below is tips about trouble shooting i18n issues. In my app.module.ts I use B2cStorefrontModule.withConfig to pass my application specific configuration. In Chrome Development Tool, I set breakpoint on line 82: ...

如下图所示：从 Chrome 开发者工具 network tab 察看到的 urlLink 数据： 依据如下关键字，到 SAP Spartacus sampledata extension 里进行搜寻：C:\Code\H2011\hybris\bin\custom\spartacussampledata "urlLink" : "/OpenCatalogue/Cameras/Digital-Cameras/Digital-SLR/c/578" id: ElectronicsHompageSplashBannerComponent "uid" : "ElectronicsHompageSplashBannerComponent", "uuid" : "eyJpdGVtSWQiOiJFbGVjdHJvbmljc0hvbXBhZ2VTcGxhc2hCYW5uZXJDb21wb25lbnQiLCJjYXRhbG9nSWQiOiJlbGVjdHJvbmljcy1zcGFDb250ZW50Q2F0YWxvZyIsImNhdGFsb2dWZXJzaW9uIjoiT25saW5lIn0=", "typeCode" : "SimpleResponsiveBannerComponent", "modifiedtime" : "2021-07-21T22:54:37.245Z", "name" : "Electronics Homepage Splash Banner Component", "container" : "false", "media" : { "tablet" : { "code" : "Elec_770x350_HomeSpeed_EN_01_770W.jpg", "mime" : "image/jpeg", "altText" : "Save Big On Select SLR & DSLR Cameras", "url" : "/medias/Elec-770x350-HomeSpeed-EN-01-770W.jpg?context=bWFzdGVyfGltYWdlc3w1MzAzOHxpbWFnZS9qcGVnfGltYWdlcy9oNmIvaDFkLzg3OTczMjc0MjU1NjYuanBnfDc1NzM3MzVmMTc2M2RlMGIyOTBhNmY1ZmY3ZTVmODYwMTIyNDAyMTA3Njg5OWU4ZTQxYjJjNDZlMmY4YmE2OTg" }, "desktop" : { "code" : "Elec_960x330_HomeSpeed_EN_01_960W.jpg", "mime" : "image/jpeg", "altText" : "Save Big On Select SLR & DSLR Cameras", "url" : "/medias/Elec-960x330-HomeSpeed-EN-01-960W.jpg?context=bWFzdGVyfGltYWdlc3w1MzE2M3xpbWFnZS9qcGVnfGltYWdlcy9oMjIvaGFmLzg3OTczMjc1NTY2MzguanBnfGE5OGJmYjJlMTJhMGI1Njg2NDgzZTY2M2Q2MTM1NTQ2Y2YxZmU1ZWY3NmU4MDcxN2ZjODBjMzNiZTZiZjNmNmM" }, "mobile" : { "code" : "Elec_480x320_HomeSpeed_EN_01_480W.jpg", "mime" : "image/jpeg", "altText" : "Save Big On Select SLR & DSLR Cameras", "url" : "/medias/Elec-480x320-HomeSpeed-EN-01-480W.jpg?context=bWFzdGVyfGltYWdlc3wzMzkzMnxpbWFnZS9qcGVnfGltYWdlcy9oNGIvaGFjLzg3OTczMjczNjAwMzAuanBnfDEwOGY1YmU0MWRhYjAwNTVkNDkxZDM3YzA1OTlkY2I2MDlmYzUwMGJiMWNlYWMxZDY1Y2E2NzY2ZjdkYzU0MTg" }, "widescreen" : { "code" : "Elec_1400x440_HomeSpeed_EN_01_1400W.jpg", "mime" : "image/jpeg", "altText" : "Save Big On Select SLR & DSLR Cameras", "url" : "/medias/Elec-1400x440-HomeSpeed-EN-01-1400W.jpg?context=bWFzdGVyfGltYWdlc3w4MTk4OHxpbWFnZS9qcGVnfGltYWdlcy9oNmQvaGVlLzg3OTczMjcxNjM0MjIuanBnfDI4YmVkMGI5MGU1ODMxZmM4YjgwODQ4YjI5ZWE2ZjkwNWVlOTQ4YzVjNGIzNTgwMmYwODc3MDMwYWZmNzgwMjI" } }, "urlLink" : "/OpenCatalogue/Cameras/Digital-Cameras/Digital-SLR/c/578" }, sample data extension里搜寻不到： ...

明细页面 url： http://localhost:4200/electro... 组件选择器：cx-generic-link 加上打印语句，发现是 local url 的状况： routerUrl 来自 this.routeParts.path: 到上一层即 banner Component 里去查找： 阐明 generic link Component 的 url 是 banner Component 的 data$ 属性传入的： 数据来自 this.component.data$: 这个 Component 是主动注入的： 加上一行打印语句： 果然，跳转链接就藏在这里： 在这个 Component 里保护的数据： 更多Jerry的原创文章，尽在："汪子熙":