# 包含前后端的插件开发指南
ks4.0 可插拔架构支持在不侵入 ks 核心代码的前提下，通过开发无缝的拓展系统的能力。下面我们以一个简单且典型的前后端分离的 crud 场景演示插件的开发、安装过程。

注：本次演示我们暂时只在 mac 系统下进行

## 需求、设计
假设我们想在 ks 里增加一个员工管理模块。在这个模块里我们可以查看、新增、修改、删除员工信息。设计图如下：

1. 员工管理列表页

2. 新增员工

3. 员工详情页

## 新建插件管理工程
在开发具体的前后端代码之前，我们先新建一个插件的管理工程。这个工程将负责插件的发布、安装、卸载等操作。

前置条件：本地已配置 kube config 并安装了 helm、home-brew

1. 安装 ksnext cli
ksnext 是我们为插件管理开发的 cli 工具。mac 系统下运行如下命令安装

// 新增 brew 私有仓
brew tap chenz24/tap
// 安装
brew install chenz24/tap/ksnext

2. 创建工程

// 初始化工程，在想要安装的目录运行，poject-direcotry 为制定的目录名
ksnext init <poject-direcotry>

// 创建插件目录
cd poject-direcotry // 切换到工程目录内
ksnext create // 运行命令并按照提示输入信息


输入完成后，回车即可创建出插件的目录。内容如下

|____Chart.yaml
|____charts
| |____frontend
| | |____Chart.yaml
| | |____templates
| | | |____deployment.yaml
| | | |____NOTES.txt
| | | |____tests
| | | | |____test-connection.yaml
| | | |____service.yaml
| | | |____extensions.yaml
| | | |____helps.tpl
| | |____values.yaml
| |____backend
| | |____Chart.yaml
| | |____templates
| | | |____deployment.yaml
| | | |____NOTES.txt
| | | |____tests
| | | | |____test-connection.yaml
| | | |____service.yaml
| | | |____extensions.yaml
| | | |____helps.tpl
| | |____values.yaml
|____.helmignore
|____values.yaml

可以看出，插件的管理是基于 helm chart 的。目录中有 frontend 和 backend 两个 subchart。我们暂且不做具体配置，先进行后端接口的开发。

## 后端开发
后端开发不限制语言。本次我们采用 `go` `gin` `gorm` `sqlite` 的技术栈来开发。由需求看出我们需要实现针对 employee 的增删改查接口，接口的定义如下：

v1 := r.Group("/kapis/employee.kubesphere.io/v1alpha1")
{
	v1.GET("/employees", getEmployees)
	v1.GET("/employee/:id", getEmployee)
	v1.POST("/employee", createEmployee)
	v1.PUT("/employee/:id", updateEmployee)
	v1.DELETE("/employee/:id", deleteEmployee)
	v1.OPTIONS("/employee", optionsEmployee)
}

r.GET("/healthz", healthz)

r.Run()

具体源码：[GitHub - chenz24/employee: A demo app build with go gin, gorm and sqlite](https://github.com/chenz24/employee)

开发完成后我们 build 代码并将其打包成 docker 镜像

GOOS=linux GOARCH=amd64 go build main.go

docker build --platform linux/amd64 -t poppub123/employee-api .

docker push poppub123/employee-api:latest

执行完成以上命令后，我们需要将后端代码进行部署，以给前端开发提供接口调试。我们回到插件的管理工程目录中。编辑 values.yaml


如图，因为前端尚未有镜像，我们先将前端 disable。后端填好镜像名称及 tag。 回到插件管理工程根目录执行

`ksnext install employee `

如此，后端就部署到了 k8s 集群中并且注册到了 ks 的插件体系里。我们可以通过 curl 测试接口是否已经被 ks-apiserver 接管。

## 前端开发
前置条件：已安装 nodejs yarn

1. 安装开发脚手架

yarn create ks-app my-app

安装完成后，切换到脚手架目录。在 configs 目录下配置 local_config.yaml ，填写正确的 ks apiserver 地址


2. 新建插件目录

yarn create-plugin // 按照提示填写信息

命令执行成功后，我们在 plugins 目录可以看到 插件的框架代码已经生成。下面我们就可以开始前端的开发了。

执行下面命令开启前端开发环境
yarn dev 

前端开发完成后，我们同样要将前端代码打包成 docker 镜像。

yarn build:plugin employee

cd /path/to

docker build --platform linux/amd64  -t poppub123/employee-frontend . 

我们再回到插件管理工程的目录中，编辑 values.yaml，配置前端镜像


然后执行如下命令，将前端部署到 k8s 中。

ksnext upgrade employee

命令执行成功后，我们在前端工程中执行。在本地以 production 模式启动前端，查看插件是否安装成功。

yarn start

## 总结
如此，一个插件的开发部署过程就完成了。要注意，本次的演示不包含插件商店的部分。在最终的场景中，插件会打包到 helm repo，会以插件商店的 ui 界面形式进行安装、卸载、启动、停止等操作。本次的演示是手动安装部署，适合开发调试插件的场景。

#kubesphere