程序员那些事儿

菜单

Henry
发布于 2024-10-20 / 33 阅读
0
0

Constellation - DX Component - 开发环境配置和样例

#npm#Dev#Constellation

简介

简要记录 PEGA Constellation DX Component 开发环境配置，以及一个样例 Component 部署。

前置条件

  • Node.js （npm）已安装 【安装笔记】
    • npm v8.x
    • node v18.x
  • Git 已安装 

样例需求

  • 安装 PEGA Constellation DX Component 开发环境。
  • 创建和测试 PEGA 默认的样例。

自定义 DX Component 配置步骤

查看 npm 默认 Registry  地址

(base) myserver@myserver:/pega/constellation-dx-component/custom-dx-component$ npm config get registry
https://registry.npmjs.org/

可选步骤：如果不是 “https://registry.npmjs.org/” 请执行以下指令配置

npm config set registry https://registry.npmjs.org/

可选步骤：也可使用国内镜像加速网站 （请根据实际需求变更）

npm config set registry https://registry.npmmirror.com

初始化项目

(base) myserver@myserver:/pega/constellation-dx-component$ npx @pega/custom-dx-components@23.1.10 init
? Enter Project name (required) PersDXComponent
? Enter Organization name (required) Pers
? Version 1.0.0
? Description personal DX component
? Git repository url (optional) 
? Author henry.lin
  ✔ Creating a new custom component project in /pega/constellation-dx-component/persdxcomponent
  ✔ Create gitignore
  ✔ Initialize git
  ✔ Installing dependencies. This will take a couple of minutes.
  ✔ Installing tasks dependencies
  ✔ Installing quick run


Success!! Project created at /pega/constellation-dx-component/persdxcomponent

 Inside that directory, you can run several commands: 

 npm run startStorybook 
  Start Storybook in development mode 

 npm run create 
 npm run list 
  Try out custom-component actions like create, list, publish, etc 

 npm run lint 
  Run eslint for component source files 

We suggest that you begin by typing: 

 cd persdxcomponent 
 npm run startStorybook

查看项目信息

(base) myserver@myserver:/pega/constellation-dx-component/persdxcomponent$ npm run startStorybook
info @storybook/react v6.5.16
info 
info => Loading presets

attention => Storybook now collects completely anonymous telemetry regarding usage.
This information is used to shape Storybook's roadmap and prioritize features.
You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
https://storybook.js.org/telemetry

info => Using implicit CSS loaders
info => Using default Webpack5 setup
<i> [webpack-dev-middleware] wait until bundle finished

info => Ignoring cached manager due to change in manager config
<i> [webpack-dev-middleware] wait until bundle finished
assets by chunk 5.59 MiB (id hint: vendors)
  assets by status 5.38 MiB [big]
    asset vendors-node_modules_storybook_core-client_dist_esm_globals_polyfills_js-node_modules_storybo-26f588.manager.bundle.js 3.95 MiB [emitted] [big] (id hint: vendors)
    asset vendors-node_modules_storybook_components_dist_esm_formatter-0d5cb0eb_js.manager.bundle.js 886 KiB [emitted] [big] (id hint: vendors)
    asset vendors-node_modules_storybook_components_dist_esm_OverlayScrollbars-1355f44c_js.manager.bundle.js 295 KiB [emitted] [big] (id hint: vendors)
    asset vendors-node_modules_storybook_components_dist_esm_syntaxhighlighter-b07b042a_js.manager.bundle.js 284 KiB [emitted] [big] (id hint: vendors)
  asset vendors-node_modules_storybook_components_dist_esm_WithTooltip-167e9982_js.manager.bundle.js 125 KiB [emitted] (id hint: vendors)
  asset vendors-node_modules_storybook_components_dist_esm_Color-f953d088_js.manager.bundle.js 82.5 KiB [emitted] (id hint: vendors)
  asset vendors-node_modules_storybook_components_dist_esm_GlobalScrollAreaStyles-8793ce4a_js.manager.bundle.js 15.5 KiB [emitted] (id hint: vendors)
asset runtime~main.manager.bundle.js 13.7 KiB [emitted] (name: runtime~main)
asset index.html 2.91 KiB [emitted]
asset node_modules_unfetch_dist_unfetch_js.manager.bundle.js 1.29 KiB [emitted]
asset main.manager.bundle.js 832 bytes [emitted] (name: main)
Entrypoint main [big] 3.96 MiB = runtime~main.manager.bundle.js 13.7 KiB vendors-node_modules_storybook_core-client_dist_esm_globals_polyfills_js-node_modules_storybo-26f588.manager.bundle.js 3.95 MiB main.manager.bundle.js 832 bytes
orphan modules 763 KiB [orphan] 40 modules
runtime modules 8.39 KiB 14 modules
modules by path ./node_modules/ 4.98 MiB 902 modules
./util.inspect (ignored) 15 bytes [built] [code generated]
manager (webpack 5.89.0) compiled successfully in 15638 ms
webpack built preview d8336091ce9127cf3252 in 255163ms
╭──────────────────────────────────────────────────────────────────────────────────────────╮
│                                                                                          │
│   Storybook 6.5.16 for React started                                                     │
│   27 s for manager and 4.32 min for preview                                              │
│                                                                                          │
│    Local:            http://localhost:6040/                                              │
│    On your network:  http://192.168.122.32:6040/                                         │
│                                                                                          │
│   A new version (8.3.5) is available!                                                    │
│                                                                                          │
│   Upgrade now: npx storybook@latest upgrade                                              │
│                                                                                          │
│   Read full changelog: https://github.com/storybookjs/storybook/blob/next/CHANGELOG.md   │
│                                                                                          │
╰──────────────────────────────────────────────────────────────────────────────────────────╯
<i> [webpack-dev-middleware] wait until bundle finished: /
webpack built preview aafbfe2a1ba554becac1 in 4704ms

PEGA Platform 配置

在 PEGA Platform 中创建自定义 Component 存储需要的Ruleset

打开 Records > SysAdmin > Ruleset，点击 Create 按钮，在创建界面输入 Ruleset 信息

点击 Create and open 按钮，然后点击 Save 。

将创建好的 Ruleset 配置到当前 Application。

配置 tasks.config.json 文件，根据自身需求进行变更

{
  "components-directory-path": "src/components",
  "server-config": {
    "rulesetName": "PersDXComponents",
    "rulesetVersion": "01-01-01",
    "sourceOfComponents": "Server",
    "devBuild": true,
    "serverType": "infinity",
    "server": "https://localhost:1080/prweb",
    "clientId": "10095186356008396159",
    "clientSecret_comment": "Needed only when using 'passwordCreds' or 'clientCreds' grantType",
    "clientSecret": "YourClientSecret",
    "grantType": "passwordCreds",
    "redirectUri": "https://localhost:4010/",
    "authService_comment": "Infinity authentication service alias (when grantType is set to 'authCode')",
    "authService": "pega",
    "cert_and_key_comment": "Path to SSL certificate file and SSL key file to use when starting local HTTPS server",
    "cert_and_key_comment2": "Needed only when using 'authCode' grantType and redirectUri begins with 'https://localhost'",
    "cert": "./keys/dxcb.crt",
    "key": "./keys/dxcb.key",
    "user_and_password_comment": "useful primarily when grantType is set to 'passwordCreds'",
    "user": "OperatorID",
    "password": "Password",
    "questions_comment": "useful for designating how frequently questions should be asked during npm run authenticate",
    "questions_askAlways": "",
    "questions_askNever": "",
    "questions_askOnce": "server,authService",
    "questions_askedOnce": ""
  },
  "component": {
    "library": "PersDXLib",
    "type": "",
    "version": "1.0.0",
    "subtype": "",
    "description": "",
    "icon": ""
  }
}

tasks.config.json 配置参数参考文档

client secret 获取参考文档

 

系统访问配置

官方参考文档

查看/配置 Records > Integration Resources > Service Packages > Application

  • Processing mode: Stateless
  • Service access group: PRPC:Administrators
  • Requires authentication: Selected
  • Authentication type: OAuth 2.0
  • Suppress Show-HTML: Selected

查看/配置 Records > Security > Cross Origin Resource Sharing > APIHeadersAllowed

  • Allowed methods: All methods selected
  • Allowed headers: authorization, content-type, Access-Control-Expose-Headers, If-Match, pzCTKn, context, remotesystemid, and x-constellation-app
  • Exposed headers: etag, remotesystemid, and x-constellation-app

生成自定义 DX Component

创建 DX Component

(base) myserver@myserver:/pega/constellation-dx-component/persdxcomponent$ npm run create
DX Component Builder v23.1.15
? Enter type of component Field
? Enter subtype of component Text
? Enter component name (required) SampleText
? Enter component label for display (required) Sample Text
? Enter component version 1.0.0
? Enter library name (required) PersDXComponent
? Please enter the application names to be supported (comma-separated). Keep empty for all applications 
? Enter description for the component Pers sample text component
Pers_PersDXComponent_SampleText component is created in /pega/constellation-dx-component/persdxcomponent/src/components/Pers_PersDXComponent_SampleText

Optional：查看创建结果

(base) myserver@myserver:/pega/constellation-dx-component/persdxcomponent$ tree src/components/Pers_PersDXComponent_SampleText/
src/components/Pers_PersDXComponent_SampleText/
├── config.json
├── create-nonce.ts
├── demo.stories.tsx
├── index.tsx
├── mock.ts
├── PConnProps.d.ts
└── styles.ts

0 directories, 7 files

官方文件介绍如下：

  • index.tsx file contains the actual component rendering logic.
  • demo.stories.tsx file contains the demo that can be viewed in the storybook.
  • config.json component definition file contains the mapping of properties for configuring the auto-generated property pane. This property pane is displayed in App Studio when an application is being authored to use the Constellation DX component.

使用PEGA 默认的 Component 样例，因此不对控件文件进行更改。

测试自定义控件，在项目目录执行 npm run startStorybook

(base) myserver@myserver:/pega/constellation-dx-component/persdxcomponent$ npm run startStorybook
info @storybook/react v6.5.16
info 
info => Loading presets
info => Using implicit CSS loaders
info => Using default Webpack5 setup
<i> [webpack-dev-middleware] wait until bundle finished

info => Using cached manager
<i> [webpack-dev-middleware] wait until bundle finished: /__webpack_hmr
webpack built preview d2de9aa6f309d0783289 in 160362ms
╭──────────────────────────────────────────────────────────────────────────────────────────╮
│                                                                                          │
│   Storybook 6.5.16 for React started                                                     │
│   2.77 min for preview                                                                   │
│                                                                                          │
│    Local:            http://localhost:6040/                                              │
│    On your network:  http://192.168.122.32:6040/                                         │
│                                                                                          │
│   A new version (8.3.5) is available!                                                    │
│                                                                                          │
│   Upgrade now: npx storybook@latest upgrade                                              │
│                                                                                          │
│   Read full changelog: https://github.com/storybookjs/storybook/blob/next/CHANGELOG.md   │
│                                                                                          │
╰──────────────────────────────────────────────────────────────────────────────────────────╯
<i> [webpack-dev-middleware] wait until bundle finished: /iframe.html?viewMode=story&id=*
<i> [webpack-dev-middleware] wait until bundle finished: /
webpack built preview 9d0e0aadf812e361dd4e in 3107ms

创建控件，在项目路径执行：npm run buildComponent

(base) myserver@myserver:/pega/constellation-dx-component/persdxcomponent$ npm run buildComponent
DX Component Builder v23.1.15
? Select component to build Pers_PersDXComponent_SampleText
? Generate development build ? Yes
✔ Validate config schema
✔ Lint component
✔ Bundle Component (dev build)

Pers_PersDXComponent_SampleText schema is valid
 linting /pega/constellation-dx-component/persdxcomponent/src/components/Pers_PersDXComponent_SampleText
=============

WARNING: You are currently running a version of TypeScript which is not officially supported by @typescript-eslint/typescript-estree.

You may find that it works just fine, or you may not.

SUPPORTED TYPESCRIPT VERSIONS: >=3.3.1 <4.5.0

YOUR TYPESCRIPT VERSION: 4.8.4

Please only submit bug reports when using the officially supported version.

=============
 linting complete...
Creating a development build...
stats:assets by status 1.57 KiB [compared for emit]
  assets by path ../../lib/components/Pers_PersDXComponent_SampleText/*.ts 947 bytes
    asset ../../lib/components/Pers_PersDXComponent_SampleText/mock.d.ts 462 bytes [compared for emit]
    asset ../../lib/components/Pers_PersDXComponent_SampleText/index.d.ts 295 bytes [compared for emit]
    asset ../../lib/components/Pers_PersDXComponent_SampleText/styles.d.ts 190 bytes [compared for emit]
  assets by path ../../lib/components/Pers_PersDXComponent_SampleText/*.map 662 bytes
    asset ../../lib/components/Pers_PersDXComponent_SampleText/index.d.ts.map 269 bytes [compared for emit]
    asset ../../lib/components/Pers_PersDXComponent_SampleText/mock.d.ts.map 227 bytes [compared for emit]
    asset ../../lib/components/Pers_PersDXComponent_SampleText/styles.d.ts.map 166 bytes [compared for emit]
assets by status 2.01 MiB [emitted]
  asset Pers_PersDXComponent_SampleText/Pers_PersDXComponent_SampleText.js 2.01 MiB [emitted] [minimized] [big] (name: main) 1 related asset
  asset ../../lib/components/Pers_PersDXComponent_SampleText/create-nonce.d.ts.map 186 bytes [emitted]
  asset ../../lib/components/Pers_PersDXComponent_SampleText/create-nonce.d.ts 53 bytes [emitted]
orphan modules 4.14 MiB [orphan] 571 modules
runtime modules 972 bytes 5 modules
built modules 668 KiB [built]
  modules by path ./node_modules/@pega/cosmos-react-core/ 293 KiB 116 modules
  modules by path ./node_modules/@popperjs/core/lib/ 68.4 KiB 56 modules
  modules by path ./node_modules/@babel/runtime/helpers/esm/*.js 3.19 KiB 10 modules
  modules by path ./node_modules/@emotion/ 21.1 KiB 4 modules
  modules by path ./node_modules/hoist-non-react-statics/ 9.69 KiB 3 modules
  modules by path ./src/components/Pers_PersDXComponent_SampleText/ 1.51 KiB 2 modules
  modules by path ./node_modules/react/ 37.7 KiB 2 modules
  modules by path ./node_modules/react-is/ 7.38 KiB 2 modules
  modules by path ./node_modules/react-popper/lib/esm/*.js 4.84 KiB 2 modules
  + 8 modules

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets: 
  Pers_PersDXComponent_SampleText/Pers_PersDXComponent_SampleText.js (2.01 MiB)

WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
  main (2.01 MiB)
      Pers_PersDXComponent_SampleText/Pers_PersDXComponent_SampleText.js

WARNING in webpack performance recommendations: 
You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
For more info visit https://webpack.js.org/guides/code-splitting/

webpack 5.89.0 compiled with 3 warnings in 11734 ms
Compiled with warnings.

Warning.. asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets: 
  Pers_PersDXComponent_SampleText/Pers_PersDXComponent_SampleText.js (2.01 MiB)
Warning.. entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
  main (2.01 MiB)
      Pers_PersDXComponent_SampleText/Pers_PersDXComponent_SampleText.js
Warning.. webpack performance recommendations: 
You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
For more info visit https://webpack.js.org/guides/code-splitting/
File sizes after gzip:
485.89 kB  components/Pers_PersDXComponent_SampleText/Pers_PersDXComponent_SampleText.js

配置Server认证

(base) myserver@myserver:/pega/constellation-dx-component/persdxcomponent$ npm run authenticate
DX Component Builder v23.1.15
? Enter pega server url https://yourweburl.com/prweb
Authenticated successfully !!
Writing updated config...
(base) myserver@myserver:/pega/constellation-dx-component/persdxcomponent$

发布控件

(base) myserver@myserver:/pega/constellation-dx-component/persdxcomponent$ npm run publish
DX Component Builder v23.1.15
? Select component to publish Pers_PersDXComponent_SampleText
? Enter ruleset name PersDXComponent
? Enter ruleset version 01-01-01
? Generate development build ? Yes
✔ Validate config schema
✔ Lint component
✔ Bundle Component (dev build)
✔ Zip Component
✔ Publish Component

Pers_PersDXComponent_SampleText schema is valid
 linting /pega/constellation-dx-component/persdxcomponent/src/components/Pers_PersDXComponent_SampleText
=============

WARNING: You are currently running a version of TypeScript which is not officially supported by @typescript-eslint/typescript-estree.

You may find that it works just fine, or you may not.

SUPPORTED TYPESCRIPT VERSIONS: >=3.3.1 <4.5.0

YOUR TYPESCRIPT VERSION: 4.8.4

Please only submit bug reports when using the officially supported version.

=============
 linting complete...
Creating a development build...
stats:assets by path ../../lib/components/Pers_PersDXComponent_SampleText/*.ts 1000 bytes
  asset ../../lib/components/Pers_PersDXComponent_SampleText/mock.d.ts 462 bytes [compared for emit]
  asset ../../lib/components/Pers_PersDXComponent_SampleText/index.d.ts 295 bytes [compared for emit]
  asset ../../lib/components/Pers_PersDXComponent_SampleText/styles.d.ts 190 bytes [compared for emit]
  asset ../../lib/components/Pers_PersDXComponent_SampleText/create-nonce.d.ts 53 bytes [compared for emit]
assets by path ../../lib/components/Pers_PersDXComponent_SampleText/*.map 848 bytes
  asset ../../lib/components/Pers_PersDXComponent_SampleText/index.d.ts.map 269 bytes [compared for emit]
  asset ../../lib/components/Pers_PersDXComponent_SampleText/mock.d.ts.map 227 bytes [compared for emit]
  asset ../../lib/components/Pers_PersDXComponent_SampleText/create-nonce.d.ts.map 186 bytes [compared for emit]
  asset ../../lib/components/Pers_PersDXComponent_SampleText/styles.d.ts.map 166 bytes [compared for emit]
asset Pers_PersDXComponent_SampleText/Pers_PersDXComponent_SampleText.js 2.01 MiB [emitted] [minimized] [big] (name: main) 1 related asset
orphan modules 4.14 MiB [orphan] 571 modules
runtime modules 972 bytes 5 modules
built modules 668 KiB [built]
  modules by path ./node_modules/@pega/cosmos-react-core/ 293 KiB 116 modules
  modules by path ./node_modules/@popperjs/core/lib/ 68.4 KiB 56 modules
  modules by path ./node_modules/@babel/runtime/helpers/esm/*.js 3.19 KiB 10 modules
  modules by path ./node_modules/@emotion/ 21.1 KiB 4 modules
  modules by path ./node_modules/hoist-non-react-statics/ 9.69 KiB 3 modules
  modules by path ./src/components/Pers_PersDXComponent_SampleText/ 1.51 KiB 2 modules
  modules by path ./node_modules/react/ 37.7 KiB 2 modules
  modules by path ./node_modules/react-is/ 7.38 KiB 2 modules
  modules by path ./node_modules/react-popper/lib/esm/*.js 4.84 KiB 2 modules
  + 8 modules

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets: 
  Pers_PersDXComponent_SampleText/Pers_PersDXComponent_SampleText.js (2.01 MiB)

WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
  main (2.01 MiB)
      Pers_PersDXComponent_SampleText/Pers_PersDXComponent_SampleText.js

WARNING in webpack performance recommendations: 
You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
For more info visit https://webpack.js.org/guides/code-splitting/

webpack 5.89.0 compiled with 3 warnings in 9758 ms
Compiled with warnings.

Warning.. asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets: 
  Pers_PersDXComponent_SampleText/Pers_PersDXComponent_SampleText.js (2.01 MiB)
Warning.. entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
  main (2.01 MiB)
      Pers_PersDXComponent_SampleText/Pers_PersDXComponent_SampleText.js
Warning.. webpack performance recommendations: 
You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
For more info visit https://webpack.js.org/guides/code-splitting/
File sizes after gzip:
485.89 kB  components/Pers_PersDXComponent_SampleText/Pers_PersDXComponent_SampleText.js
Success : Component successfully created in ruleset PersDXComponent:01-01-01

查看部署结果

在 UI 中应用

在Case 中选择需要添加的页面

点击 Add 按钮，在Field 中选择 Label

点击 Add 按钮添加后，点击齿轮按钮修改 Label 的控件

在 Display as 中选择自定义的 Sample Text后，点击 Save 按钮保存

点击 Submit 按钮提交。

新建一个 Case 查看效果。

至此，自定义 DX Component 已完成。

Node.js - 前置学习（一）...
PEGA - 创建 Ruleset

评论