@cbd-wujie-components/ab-test

@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 的微前端封装，如果无法访问，这与网站访问安全策略有关，需要找誉博一同解决