在线完成Flutter从编程到打包原创

Cloud studio是腾讯云旗下的一款基于浏览器的集成式开发环境，本次介绍如何用cloud studio和coding配合实现一个flatter项目的云端编程。首先打开coding官网，注册并登录一个团队，点击右上角创建项目，填写项目基本信息，完成创建一个带有完整及包功能的项目就创建好了。点击代码仓库创建仓库，选择word导入本视频将会以官方提供的教程项目为示例，复制地址，演示如何只通过一个浏览器。

实现项目从编码到打包，填写好仓库信息后完成创建，等待仓库导入成功后即可看到项目代码。完成项目准备后，我们进入cloud studio官网。由于coding和cloud studio实现了账号互通，我们可以用coding账号授权登录，无需创建新账号。cloud studio官方提供了丰富的模板，我们也可以直接在左下角点击创建工作空间填写基本信息。

选择我们刚刚创建的代码仓库，选择开发环境，点击创建。等待几秒，一个崭新工作空间即创建完成。cloud studio与我们熟悉的VS一样，集成了许多开发插件，极大提升我们的使用体验。等待插件安装完成，点击重新加载及应用，成功进入我们本次要开发的代码目录。打开终端，输入命令，执行项目依赖加载，提示我们版本较低，执行更新特版本。

再次输入命令，完成依赖加载。执行完前面的前置步骤后，现在我们可以启动项目，输入命令等待项目启动。可以看到Clark studio已经监听到了项目启动右下角点击内置浏览器打开即可看到预览效果。我们可以将这个链接分享给他人，他们可以远程打开该链接，方便写作。接下来我们将演示如何修改代码，并通过项目热加载快速看到修改结果。我们将会添加左边导航栏的图标，以便用户快速浏览前置图标，以找到所需标签页，找到RA文件，修改icon代码、首页播放列表和用户添加不同的前置图标。修改完成后，在终端中输入题完成热加载，等待片刻刷新页面即可看到最新的效果。

Studio也提供了图形化的源代码管理界面，左侧点击源代码管理，暂存我们刚刚修改了的文件，填写commit message，点击提交和同步更改即可提交代码到扣。

到这里，我们已经在cloud studio完成了编写、调试和预览。接下来我们可以通作coding持续集成实现自动化打包。像代码打包这种重复性的工作，我们可以交给持续集成来完成。在左侧导航栏点及持续集成新建一个构建计划，选择自定义构建过程，填写名称，选择代码仓库。

点击确认进入流水线编辑，这里粘贴预先准备好的流水线代码。该流水线包括JDK更新代码检出、打包APK和推送制品库四个步骤。CO4I知识图形化和文本两种编辑模式，方便了流水线的快速编辑。同时支持自定义环境变量，在启动构建时填入项目目录，按需构建，点击立即构建，填写打包目录后启动构建。

点击进入构建详情，查看构建日志，等待构建完成。进入制品仓库即可查看构建生成的制品。至此，我们通过cloud studio和coding配合使用，完成了一个Fla项目在云端的开发打包的全过程。