前言
Cloud Studio 是一种基于浏览器的集成式开发环境（IDE），向开发者提供了一个永不间断的云端工作站。用户在使用 Cloud Studio 时无需安装应用程序和插件，只要打开浏览器就能使用，非常的方便和用好。此外，Cloud Studio 还包含代码高亮、自动补全、Git 集成、终端等 IDE 的基础功能，同时支持实时调试、插件扩展等，可以帮助开发者快速完成各种应用的开发、编译与部署工作。
正文
这是本人第一次接触 Cloud Studio，作为一名典型的音视频技术爱好，对于各种比较新比较潮技术都有一种跃跃欲试的冲动。在社区了解到有 Cloud Studio 这么一款神器的时候，一直想试用体验一下。但是，前段时间太忙了，这两天终于有时间了，所以赶紧写一篇经验分享。试用 Cloud Studio 的时候发现它支持多种形式的注册和登录方式，我们可以直接使用微信扫描登录，这样比较方便。Cloud Studio 工具的定位是“Coding Anytime Anywhere”，可以看出它是致力于让编程更加简单和更加方便的目的。
一、优势介绍
Cloud Studio 具有非常明显的方式，首先就是启动项目非常快，如果使用 Cloud Studio 的预置环境，我们可以直接创建对应类型的工作空间，快速启动项目进入开发状态，无需进行繁琐的环境配置。其次是 Cloud Studio 支持实时调试网页，Cloud Studio 内置预览插件，可以实时显示网页应用。当我们的代码发生改变之后，预览窗口会自动刷新，这样我们就可以在 Cloud Studio 内实时开发调试网页了。
不仅如此，Cloud Studio 还支持远程访问云服务器，Cloud Studio 支持连接指定的云服务器，这样就可以在编辑器中查看云服务器上的文件，进行在线开发部署工作。
二、创建项目
想要创建 Cloud Studio 项目需要进入控制后台页面，后台页面地址：https://wx.cloudstudio.net/dashboard，如下图所示：
创建项目有两种方式，第一种是直接使用现有的预设模版，预设模版分为四大类：常用模版、框架模版、云原生模版、建站模版。其中，常用模版有 7 个，分别是 All in One、Ubuntu 18.04、Java、Go、Node.js、.Net、Python，具体如下图所示：
框架模版有 19 个，包括 Flutter、Vue.js、React、Express、Koa 等，具体如下图所示：
云原生模版，目前只有一个，叫做 Serverless Framework，相信随着 Cloud Studio 的升级迭代，以后会有更多的云原生模版提供出来供大家使用。
建站模版有 19 个，基本上涵盖了主流的建站框架和结构，包括 victor-hugo、vuepress-deploy、react-static-starter、multi-lang-starter 等，具体如下图所示：
还有就是 Cloud Studio 也支持自定义模版，这个功能看大家自己的需要可以安排。上面介绍的是通过预设模版创建项目的形式，Cloud Studio 还有第二中创建项目的方式，就是通过控制台页面左下角的“新建工作空间”按钮来创建，注意一定要选择“使用云主机”，之后进入如下图所示的配置页面，填写项目空间名称、描述信息、IP和端口、用户名等信息，最后点击“新建”按钮。
三、编辑项目
自己第一次使用 Cloud Studio，肯定是怎么简单怎么来，所以选择使用模版。由于自己平时使用 Golang 开发比较多一些，就选择了 Go 语言的模版。打开项目后，发现界面和 VS 客户端相差无几，忍不住内心暗自佩服了一番。界面如下图所示：
入口主函数：
代码语言：javascript复制func main() {
pflag.Parse()
// init config
if err := conf.Init(*cfg); err != nil {
panic(err)
}
todomvc.App = todomvc.New(conf.Conf)
todomvc.App.Run()
}解析配置文件：
代码语言：javascript复制func initConfig(configPath string) error {
if configPath != "" {
viper.SetConfigFile(configPath)
} else {
viper.AddConfigPath("conf")
viper.SetConfigName("config.local")
}
viper.SetConfigType("yaml")
viper.AutomaticEnv()
viper.SetEnvPrefix("napp")
replacer := strings.NewReplacer(".", "_")
viper.SetEnvKeyReplacer(replacer)
if err := viper.ReadInConfig(); err != nil {
return errors.WithStack(err)
}
err := viper.Unmarshal(&Conf)
if err != nil {
return err
}
watchConfig()
return nil
}定义路由接口：
代码语言：javascript复制func Router() *gin.Engine {
router := gin.New()
router.Use(gin.Logger())
router.Use(cors.Default())
router.StaticFS("/js", http.Dir("./statics/js"))
router.StaticFS("/node_modules", http.Dir("./statics/node_modules"))
router.LoadHTMLGlob("templates/*")
router.GET("/", func(c *gin.Context) {
c.HTML(http.StatusOK, "index.tmpl", nil)
})
todoRoute := router.Group("/todo")
todoRoute.GET("", todo.List)
todoRoute.GET(":id", todo.Get)
todoRoute.DELETE(":id", todo.Delete)
todoRoute.POST("", todo.Create)
todoRoute.PUT(":id", todo.Update)
todoRoute.POST(":id/done", todo.Toggle)
return router
}实现增删改查方法：
代码语言：javascript复制func List(c *gin.Context) {
var todos []model.Todo
model.GetDB().Where("").Find(&todos)
c.JSON(http.StatusOK, todos)
}
func Get(c *gin.Context) {
id := c.Param("id")
var todo model.Todo
model.GetDB().First(&todo, id)
c.JSON(http.StatusOK, todo)
}
func Delete(c *gin.Context) {
id := c.Param("id")
model.GetDB().Delete(&model.Todo{}, id)
c.JSON(http.StatusOK, "")
}
func Create(c *gin.Context) {
todoRequest := TodoRequest{}
c.BindJSON(&todoRequest)
var todo = model.Todo{Label: todoRequest.Label}
model.GetDB().Create(&todo)
c.JSON(http.StatusOK, todo)
}
func Update(c *gin.Context) {
todoRequest := TodoRequest{}
c.BindJSON(&todoRequest)
id := c.Param("id")
var todo model.Todo
model.GetDB().First(&todo, id)
todo.Label = todoRequest.Label
model.GetDB().Save(&todo)
c.JSON(http.StatusOK, todo)
}
func Toggle(c *gin.Context) {
id := c.Param("id")
var todo model.Todo
model.GetDB().First(&todo, id)
todo.Done = !todo.Done
model.GetDB().Save(&todo)
c.JSON(http.StatusOK, todo)
}
最后，通过 Golang 语言特有的协程方法创建一个服务同时监听配置文件的8080端口。
四、启动项目
代码编写完毕后，执行如下命令进行编译：
代码语言：javascript复制make build如果没有报错，则表示编译通过。就可以执行如下命令运行程序了：
代码语言：javascript复制make dev输出如下结果表示后台服务程序运行成功了：
代码语言：javascript复制➜ golang-todomvc make dev
[GIN-debug] [WARNING] Running in "debug" mode. Switch to "release" mode in production.
- using env: export GIN_MODE=release
- using code: gin.SetMode(gin.ReleaseMode)
[GIN-debug] GET /js/*filepath --> github.com/gin-gonic/gin.(*RouterGroup).createStaticHandler.func1 (3 handlers)
[GIN-debug] HEAD /js/*filepath --> github.com/gin-gonic/gin.(*RouterGroup).createStaticHandler.func1 (3 handlers)
[GIN-debug] GET /node_modules/*filepath --> github.com/gin-gonic/gin.(*RouterGroup).createStaticHandler.func1 (3 handlers)
[GIN-debug] HEAD /node_modules/*filepath --> github.com/gin-gonic/gin.(*RouterGroup).createStaticHandler.func1 (3 handlers)
[GIN-debug] Loaded HTML Templates (2):
-
- index.tmpl
[GIN-debug] GET / --> todomvc/pkg/todomvc/router.Router.func1 (3 handlers)
[GIN-debug] GET /todo --> todomvc/pkg/todomvc/router/handler/todo.List (3 handlers)
[GIN-debug] GET /todo/:id --> todomvc/pkg/todomvc/router/handler/todo.Get (3 handlers)
[GIN-debug] DELETE /todo/:id --> todomvc/pkg/todomvc/router/handler/todo.Delete (3 handlers)
[GIN-debug] POST /todo --> todomvc/pkg/todomvc/router/handler/todo.Create (3 handlers)
[GIN-debug] PUT /todo/:id --> todomvc/pkg/todomvc/router/handler/todo.Update (3 handlers)
[GIN-debug] POST /todo/:id/done --> todomvc/pkg/todomvc/router/handler/todo.Toggle (3 handlers)
[GIN] 2022/09/26 - 19:55:47 | 200 | 314.92µs | 127.0.0.1 | GET "/"
[GIN] 2022/09/26 - 19:55:47 | 200 | 272.133µs | 127.0.0.1 | GET "/todo"
[GIN] 2022/09/26 - 19:55:47 | 200 | 267.377µs | 127.0.0.1 | GET "/todo"最后，看一下服务访问的测试界面，如下图所示：
结论
好了，至此，我们已经就把 Cloud Studio 工具的基础功能体验了一遍，包括工程创建、代码编辑、服务发布等流程。当然本文介绍的内容也比较粗糙，其实很多功能都没有涉及到，感兴趣的小伙伴们可以亲自试一试，试用链接：https://cloudstudio.net/ 。总体来说，Cloud Studio 的工能还是非常强大的，同时，使用也非常方便，值得推荐！
