为了提升 imgcook 的开发体验，我们与阿里云云开发平台强强联合，将 imgcook studio 集成到了云开发平台上，让 imgcook 也插上了上云的翅膀，为 imgcook 开发者带来了开箱即用的应用开发体验。
Midway Serverless 解决方案立足于为开发者们提供十分易用的函数即服务的开发体验，现在，借助于 imgcook studio 插件，通过上传设计稿生成前端代码、绑定组件事件和选择数据源函数等，可以进一步减少前端部分的工作量，更加专注在函数本身的开发。
下面分别是 Sketch 设计稿、线上页面效果以及 UI 组件编辑器，开发者只需简单几步操作就能完成下图的生成效果，同时还提供 UI 组件编辑器做一些人工干预，下面我们就看看如何在云 IDE 中使用 imgcook 吧！
项目结构
imgcook 作为插件，对项目结构的侵入性都非常低，因此整体项目结构与 Midway Serverless 一体化方案几乎一致，仅有以下区别：
- 移除了之前放在 src 目录下的 tsx 前端文件；
- 增加了 src/pages 目录，通过 imgcook 生成的页面和模块需要放到这个目录下；
需要说明一下，以上的两个区别也并非必须的，因为原来的 Midway FaaS 一体化方案有一些前端代码，因此开发者也可以按照自己的喜好安排目录结构，只要保证在 Layout.ts 中会正确路由即可。
另外，本例中生成的为页面级代码，但 imgcook 也可以按照模块来生成，然后在页面中按照 ES Module 的方式引入即可。
上手指南
了解了项目结构之后，我们就来看看如何使用 imgcook studio 来生成前端代码吧！
如何上传设计稿
首先在左侧文件树右键打开 imgcook studio：
点击 Open With imgcook studio 按钮，可以在主窗口看到插件，接下来选择“导入”来上传设计稿：
点击进入上传页面：
如上所示，选择一个 Sketch 文件：
上传后，插件会将识别出的页面展示出来，点击你想生成的页面就会开始创建页面。
创建过程中，会有上传图片的过程，需要比较久的时间，请耐心等待。
上图就是完成后会在面板中渲染出 UI 编辑器，供开发者做一些结构的微调。
如何生成代码
UI 编辑器编辑完成后，点击上方的保存按钮：
第一次保存会要求填写模块名称，比如 HomePage 等，创建成功后，就可以进行代码生成了，首先选择要生成的代码类型：
点击代码后，会出现代码弹出框，可以选择要生成的代码模版，以及审阅生成的代码：
这里选择“React 开发规范（新协议）”后，提示生成代码中，然后关闭窗口。
点击导出功能可以将生成的代码生成到当前项目指定目录，比如：
在这个例子中，我们选择生成到 src/pages/Home 中，点击“确定”按钮后，目录结构如下：
至此，一个页面的生成就完成了。
运行与调试
通过 npm run dev 调试代码，执行过程中会进行依赖安装和服务启动，启动完成后就能通过 Web 开始调试你的应用了，具体操作步骤如下：
$ npm install
$ npm run dev
正在启动，请稍后...
---------------------------------------
开发服务器已成功启动
请打开 >>> http://*****-3000.xide.aliyun.com/
---------------------------------------
感谢使用 Midway Serverless，欢迎 Star!
https://github.com/midwayjs/midway
---------------------------------------
高阶功能
通过 imgcook 生成好代码后，我们还为用户提供了一些高阶功能来简化用户的后续开发工作，接下来就进行一些简单的介绍。
绑定组件事件
在 UI 编辑器中，imgcook studio 支持为单个组件添加自定义事件和处理函数，比如我们希望为“品牌折扣”添加一个点击事件：
首先在组件树中选择品牌折扣，然后右侧点击事件，选择添加事件，然后点击 onClick：
点击后，就可以用 JavaScript 编写点击处理逻辑，完成后点击保存即可。
选择数据源
imgcook 支持从 f.yml 配置的函数，选择当前页面的数据源。
在 Page 页面下，选择公共数据源，列表会从 f.yml 中读取，具体规则如下：
- 从 functions 节点下读取
- 过滤掉不存在 events.apigw 的节点
- 默认方法为 GET
选择其中一个数据源来创建接口，创建完成后，我们来看看生成的代码：
可以发现生成的代码中，已经找到了数据源所生成的函数了，接下来就是在页面初始化的时候调用这个函数就可以了：
同样在 Page 节点的事件中，创建一个 constructor 的生命周期，打开弹窗后，直接点击保存就好。
总结
通过本篇文章，我们已经介绍了 imgcook studio 的一些常用功能，如需挖掘 imgcook 更多的用法，请详细阅读 imgcook 官方文档。
另外欢迎关注 Midway Serverless 项目，以及扫描下面二维码进入云开发平台的交流群：
