# 前言
这里介绍如何使用 CI 模板创建插件
# 接入流程
# 创建 TAPD 云应用
在开发平台中选择 CI NodeJs Vue 模板插件来创建应用
# 下载代码及授权验证
在应用概览中选择代码仓库并下载
安装并使用 tplugin-cli 进行 Oauth 授权，参考【快速入门】实现
# TAPD 服务集成
使用tplugin-cli serve命令启动模板插件应用，在【公司管理-开放集成-服务集成】中对插件进行管理
# 扩展能力
CI 模板中提供了以下能力：
- 关联流水线到项目
- 关联流水线构建列表记录到任务项
- 展示流水线构建信息
# 关联流水线到项目
# 挂载点
app:
modules:
ci:
adapter:
pipeline_list: pipeline_info.getPipelineList
1
2
3
4
5
2
3
4
5
# 能力实现
用户可以对pipeline_info.js文件中的getPipelineList方法进行重写来实现获取流水线列表的能力，getPipelineList方法主要包含以下流程：
- 配置挂载点，在
pipeline_info中定义挂载方法 - 接收并解析
data参数，获得 TAPD 中的相关消息 - 根据具体业务对消息进行处理
data参数的结构如下
{
"workspace_id": "33564059",
"current_user": {
"id": "33651030",
"nick": "nick",
"name": "test",
"name_pinyin": ""
},
"data": {
"app_code": "tapd-app-20dd74",
"handler": "pipeline_info.getPipelineList",
"body": {
"params": {
"workspace_id": "33564059",
"page": "1",
"search": "info",
"per_page": "20"
}
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
getPipelineList方法的具体逻辑可以在pipeline_info.js文件中进行自定义
返回值结构如下
[
{
"id": "1", //流水线id
"name": "test", //流水线名称
"job_info": "test", //流水线信息
"path_with_namespace": "" //流水线关联的仓库路径
}
]
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
# 使用示例
在【项目设置-DevOps配置-流水线】中，可以获取流水线列表，选择需要关联的流水线
# 关联流水线构建列表记录到任务项
# 挂载点
app:
modules:
im:
adapter:
build_list: build_info.getBuildList
1
2
3
4
5
2
3
4
5
# 能力实现
用户可以对build_info.js文件中的getBuildList方法进行重写来获取流水线构建记录
- 配置挂载点，在
build_info和getBuildList中定义挂载方法 - 接收并解析
data参数，获得 TAPD 中的相关消息 - 根据具体业务对消息进行处理
data参数的结构如下
{
"workspace_id": "33564059",
"current_user": {
"id": "33651030",
"nick": "nick",
"name": "test",
"name_pinyin": ""
},
"data": {
"app_code": "tapd-app-20dd74",
"handler": "build_info.getBuildList",
"body": {
"params": {
"job_id": "1",
"page_num": "1",
"page_size": "20"
}
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
getBuildList方法的具体逻辑可以在build_info.js文件中进行自定义
返回值结构如下
[
{
"build_id": "1", //构建id
"job_id": "1", //流水线id
"job_name": "test", //流水线名称
"build_result": "success", //构建结果
"build_time": "YYYY-MM-DD hh:mm:ss", //构建时间
"trigger_info": "push", //流水线触发信息
"trigger_event": "push", //流水线触发事件
"trigger_person": "System", //流水线触发用户
"build_link": "https://www.ci.com" //构建链接
}
]
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
# 使用示例
需求、缺陷、任务工作项中，可以关联流水线构建列表
# 展示流水线构建信息
# 挂载点
app:
modules:
im:
adapter:
build_list: build_info.getBuildInfo
1
2
3
4
5
2
3
4
5
# 能力实现
用户可以对build_info.js文件中getBuildInfo方法进行重写来实现获取流水线构建详情，主要包含以下流程：
- 配置挂载点，在
build_info和getBuildInfo中定义挂载方法 - 接收并解析
data参数，获取构建信息 - 根据具体业务对消息进行处理
data参数的结构如下
{
"workspace_id": "33564059",
"current_user": {
"id": "33651030",
"nick": "nick",
"name": "test",
"name_pinyin": ""
},
"data": {
"app_code": "tapd-app-20dd74",
"handler": "build_info.getBuildList",
"body": {
"params": {
"build_ids": ["1", "2"]
}
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
getBuildInfo方法的具体逻辑可以在build_info.js文件中进行自定义
返回值结构如下
[
{
"build_id": "1", //构建id
"job_id": "1", //流水线id
"job_name": "test", //流水线名称
"build_result": "success", //构建结果
"build_time": "YYYY-MM-DD hh:mm:ss", //构建时间
"trigger_info": "push", //流水线触发信息
"trigger_event": "push", //流水线触发事件
"trigger_person": "System", //流水线触发用户
"build_link": "https://www.ci.com" //构建链接
}
]
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
# 使用示例
需求、缺陷、任务工作项中，可以查看构建详情
# 插件工程目录示例
├── handler
│ └── config.js
│ └── storage
│ ├── config.js
│ └── storage.js
├── index.js
├── Makefile
├── modules
│ └── ci
│ ├── build_info.js
│ └── pipeline_info.js
├── package.json
├── plugin.yaml
├── resources
│ └── pages
│ ├── app_for_global_config
│ │ ├── feishu.vue
│ │ └── index.css
│ ├── app_for_global_config.js
│ └── index.html
├── utils.js
└── webpack.config.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
# plugin.yaml 示例
app:
code: ci-test
desc: ci
name: CI
modules:
ci:
name: CI
adapter:
# 获取所有流水线
pipeline_list: pipeline_info.getPipelineList
# 获取流水线构建记录
build_list: build_info.getBuildList
# 获取构建信息
build_info: build_info.getBuildInfo
resources:
- key: app_for_global_config
name: 配置
path: pages/app_for_global_config
scopes:
- source
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20