@cbd-wujie-components/ab-test
v1.0.5-beta.0
Published
```shell npm install --save @cbd-wujie-components/ab-test ```
Downloads
10
Maintainers
Readme
@cbd-wujie-components/ab-test
安装
npm install --save @cbd-wujie-components/ab-test
yarn install --save @cbd-wujie-components/ab-test
pnpm install @cbd-wujie-components/ab-test
使用
import React from 'react'
import { ABTest, type ABTestConfig } from 'cbd-wujie-components'
const App = () => {
const configAdd = {
env: 'DEV',
type: 'add',
maId: 'maId',
startTime: '2023-04-27T07:32:39.000+00:00',
endTime: '2023-07-27T07:32:39.000+00:00',
ComponentId: 'ComponentIds',
maName: 'maName2',
close: (res: ABTestRes) => {
console.log(res)
},
} as ABTestConfig
return (
<div>
<ABTest config={configAdd} />
</div>
)
}
export default App
组件 props
export interface ABTestProps {
config: ABTestConfig
hooks?: {
beforeLoad?: () => void
beforeMount?: () => void
afterMount?: () => void
beforeUnmount?: () => void
afterUnmount?: () => void
}
}
| 名称 | 说明 | 必填说明 | |----------|---------------------|------| | config | ab-test 的配置参数 | 必填 | | hooks | wujie子应用载入的 hooks| 可选 |
export interface ABTestConfig {
authId: string | number
env: 'DEV' | 'PROD'
type: 'add' | 'edit'
startTime: string // e.g. 2023-04-27T07:32:39.000+00:00
endTime: string // e.g. 2023-07-27T07:32:39.000+00:00
ComponentId: string | number
maId: string | number
maName: string
expId: string | number
close: (res: ABTestRes) => void
}
| 名称 | 说明 | 必填说明 | |-------------|-------------------------------|------| | env | 环境配置,决定请求 ab-test 的地址是开发还是生产 | 必填 | | type | 操作类型,分别对应使用场景为创建实验、编辑实验 | 必填 | | startTime | 活动开始时间 | 必填 | | endTime | 活动结束时间 | 必填 | | ComponentId | 当前组件ID | 必填 | | maId | 画布id | 必填 | | maName | 画布名称 | 必填 | | expId | 实验id, 实验编辑时必填!! | 可选 | | close | ab-test 关闭时的回调方法,根据场景出参 | 必填 |
props config 中的 close 方法返回值
export interface ABTestRes {
status: 'complete' | 'interrupt'
type: 'add' | 'edit'
data: {
// 版本信息数据
versions: Array<{
// 版本名称
name: string
// 版本分流权重
weight: number
// 版本描述
desc: string
// 版本id
id: string
// 分流白名单
whitelist: string
}>
// 实验信息数据
experiment: {
// 实验名称
name: string
// 实验分流权重
weight: number
// 实验描述
desc: string
// 实验 key
key: string
}
// 版本信息数据
maId: string | number
} | null
}
| 名称 | 说明 | |---------|-----------------------------| | status | 表示流程是否被中断 | | type | 操作类型 | | data | 点选人群后返回的数据,包含画布id和分流实验、版本数据 |
- 在新建时点击保存按钮按钮 ABTestRes 的返回值
实验创建和编辑的保存皆为伪保存,需要在画布调用Api
abTestSave
来保存
const res = {
status: "complete",
data: {
maId: "maId",
versions: [
{
name: "对照版本",
weight: 1,
desc: "",
id: "9185023865946"
},
{
name: "实验版本",
weight: 99,
desc: "",
id: "2655946237622"
}
],
experiment: {
name: "maName2-maId-ComponentId4",
weight: 10,
desc: "maName2-maId-ComponentId4自动生成的实验",
key: "14251453774656"
}
},
type: add
}
- 在創建时,點擊取消或關閉按鈕
const res = {
status: 'interrupt',
data: null,
type: 'add'
}
- 在编辑时点击保存按钮按钮 ABTestRes 的返回值
实验创建和编辑的保存皆为伪保存,需要在画布调用Api
abTestSave
来保存
const res = {
status: "complete",
data: {
maId: "maId",
versions: [
{
name: "对照版本",
weight: 1,
desc: "",
id: "9185023865946"
},
{
name: "实验版本",
weight: 99,
desc: "",
id: "2655946237622"
}
],
experiment: {
name: "maName2-maId-ComponentId4",
weight: 10,
desc: "maName2-maId-ComponentId4自动生成的实验",
key: "14251453774656"
}
},
type: add
}
- 在编辑时,點擊取消或關閉按鈕
const res = {
status: 'interrupt',
data: null,
type: 'add'
}
- 在编辑或新增时,如果传入的参数生成实验名称等信息不符合表单校验规则(见Tips 1.),
const res = {
status: 'interrupt',
data: null,
type: 'add' | 'edit'
}
组件 Api
abTestSave
在画布保存时调用, 对编辑或创建的实验进行保存
declare function abTestSave(
maId: string | number,
ComponentId: string | number,
type: "add" | "edit"): Promise<AbTestSaveRes>
| 名称 | 说明 | 类型 | 必填 |
|--------------|--------|------------------------|------|
| maId | 画布id | string
or number
| 必填 |
| ComponentId | 组件id | string
or number
| 必填 |
| type | 操作类型 | "add"
or "edit"
| 必填 |
export interface AbTestSaveRes {
status: 'complete' | 'interrupt'
type: 'add' | 'edit'
data: {
// 实验配置
experiment: {
name: string;
weight: number;
desc: string;
key: string;
id: number;
};
// 版本信息
versions: Array<{
name: string;
weight: number;
desc: string;
whitelist: string[];
id: number;
}>
// 画布 id
maId: string | number
} | null
}
abTestPublish
在画布保存时调用, 对实验进行发布
declare function abTestPublish(expId: string | number): Promise<any>;
| 名称 | 说明 | 类型 | 必填 |
|--------------|------|------------------------|------|
| expId | 实验id | string
or number
| 必填 |
参数示例
创建实验
const configAdd = {
authId: '1828168xxxx',
env: 'DEV',
type: 'add',
maId: 'maId',
startTime: '2023-04-27T07:32:39.000+00:00',
endTime: '2023-07-27T07:32:39.000+00:00',
ComponentId: 'ComponentId5',
maName: 'maName2',
close: (res: ABTestRes) => {
console.log(res)
},
} as ABTestConfig
编辑实验
const configEdit = {
authId: '1828168xxxx',
env: 'DEV',
type: 'edit',
maId: 'maId',
startTime: '2023-03-27T07:32:39.000+00:00',
endTime: '2023-07-27T07:32:39.000+00:00',
ComponentId: 'ComponentId4',
expId: '17',
maName: 'maName4444',
close: (res: ABTestRes) => {
console.log(res)
},
} as ABTestConfig
创建实验保存
import { abTestSave } from '@cbd-wujie-components/ab-test'
const handleSave = async() => {
const res = await abTestSave('maId', 'ComponentId5', 'add')
console.log(res)
}
编辑实验保存
import { abTestSave } from '@cbd-wujie-components/ab-test'
const handleSave = async() => {
const res = await abTestSave('maId', 'ComponentId5', 'edit')
console.log(res)
}
实验发布
import { abTestPublish } from '@cbd-wujie-components/ab-test'
const handlePublish = async() => {
const res = await abTestPublish(17)
console.log(res)
}
❗❗❗ Tips
- 1.ab-test 根据产品文档,实验名称的生成规则为
画布名称+画布id+组件id
,而由于数据库限制字符为50,估需要确保传入参数长度符合规则。- 2.ab-test 由于和人群圈选使用不同的登录,目前没有鉴权,需要进一步讨论
- 3.暴露的方法
abTestPublish
和abTestSave
实际上是在子应用中挂载到 window中调用的,因此调用前必须打开过组件页面- 4.由于
ab-test
接口请求频次限制,不可以同时打开两个ab-test
- 5.
ab-test
组件基于 是基于wujie
的微前端封装,如果无法访问,这与网站访问安全策略有关,需要找誉博一同解决