Coze 应用开发全流程指南：从工作流到 UI 构建

插件是可以独立开发和部署的线上服务，由一个或多个工具组成。扣子支持使用插件来扩展模型的能力边界，添加新的数据处理功能，或集成第三方服务等。

在扣子应用的工作流中添加插件节点时，可以使用插件商店中已发布的公共插件、工作空间内的已发布插件或创建一个新插件资源仅供项目使用。

参考以下操作，在扣子应用中创建一个插件，并添加到工作流中：

1. 在左侧资源列表中，找到插件，然后选择 + > 新建插件。

2. 根据引导完成插件工具的创建和测试。

3. 在画布中，选择添加插件节点。

4. 在打开的页面中，选择项目工具，找到目标工具后，单击添加。

5. 完成工作流插件节点的输入和输出配置。

3.3 添加数据

扣子支持通过数据库、知识库等功能存储和管理数据。

• 数据库：与传统数据库一样，扣子支持以表格结构存储数据。在大模型的加持下，开发者和用户还可以通过自然语言插入、查询、修改或删除数据库中的数据。同时，也支持开发者开启多用户模式，支持更灵活的读写控制。这种数据存储方式非常适合组织和管理结构化数据，例如维护通讯录、读书笔记、日程记录、每日消费等。
• 知识库：扣子知识库支持上传和存储外部知识内容，并提供了多种检索能力，可解决大模型幻觉、专业领域知识不足的问题，提升大模型回复的准确率。

四、构建用户界面

搭建用户界面流程如下：

4.1 展示组件

展示组件是 Coze 应用界面呈现信息的核心元素，通过可视化编辑、样式自定义和数据绑定三大特性，实现从简单文本到复杂交互的全场景展示需求。作为低代码开发的核心载体，其设计理念在于降低界面构建门槛，支持零代码用户快速搭建专业级 UI 界面。

4.1.1 Text 组件

Text 组件支持字符串类型数据，通过双引号（"）或单引号（'）包裹文本内容。

4.1.2 图片组件

图片组件用于展示图片。

4.1.3 Markdown 组件

Markdown 组件用于渲染 Markdown 格式的文本。

4.1.4 音频组件

音频组件用于播放音频内容，支持播放本地上传的音频文件，也可绑定工作流返回值或直接填写音频 URL，灵活满足不同音频播放需求。

4.1.5 图标组件

图标组件用于展示一个图标，增强界面的视觉效果和交互性。

4.1.6 轮播组件

轮播组件用于在有限空间内循环展示一系列图片。

4.1.7 动画组件

Lottie 动画是一款轻量级、高性能的动画解决方案。扣子应用添加 Lottie 动画组件用于播放 Lottie 动画，增强应用的视觉效果和交互体验。

4.1.8 代码展示器

代码展示组件用于显示代码片段。

4.1.9 徽章组件

徽章组用于展示通知或重要信息的小组件，常带有数字或图标。

4.1.10 视频组件

视频组件用于播放视频内容，支持播放本地上传的视频文件，也可绑定工作流返回值或直接填写视频 URL，灵活满足不同视频播放需求。

4.2 输入组件

输入组件是 Coze 应用中实现用户交互的数据收集载体，核心作用是连接用户输入与业务逻辑。

4.2.1 按钮组件

按钮组件用于触发事件或动作，例如提交表单。

4.2.2 表单组件

表单组件用于收集用户输入的数据，通常与多个输入字段一起使用。表单组件支持丰富的属性设置，例如常用设置、位置设置、尺寸设置、样式设置、变换设置、状态设置和可见性设置。

4.2.3 开关组件

开关组件用于开启或关闭某个选项，常用于设置。开关组件支持丰富的属性设置，包括常用设置、位置设置、尺寸设置、样式设置、变换设置、状态设置和可见性设置。

4.2.4 文本输入组件

文本输入组件用于接收用户文本输入的字段，允许用户输入、编辑文本信息。文本输入支持丰富的属性设置，包括常用设置、位置设置、尺寸设置、样式设置、变换设置、状态设置和可见性设置。

4.2.5 代码编辑组件

代码编辑组件用于编写代码，支持语法高亮和代码提示。代码编辑组件支持丰富的属性设置，包括常用设置、位置设置、尺寸设置、样式设置、变换设置、状态设置和可见性设置。

4.2.6 数字输入组件

数字输入组件用于输入数字，适用于需要精确数值的场景。

4.2.7 文件上传组件

文件上传组件用于上传文件，支持配置上传文件的格式和大小。

4.2.8 图片上传组件

图片上传组件用于上传和展示图片，常用于图像内容的管理。

五、设置组件参数

用户界面编辑器提供了两种配置方式：设置常量和引用变量。

5.1 设置常量

设置常量是一种在组件中直接指定固定值的方法，适用于内容不需要动态更新的场景。以文本组件为例，演示如何设置常量。

1. 在左侧导航栏中选择工作空间，并在页面顶部空间列表中选择目标工作空间。
2. 在项目开发页面，选择目标应用或创建一个新应用。
3. 单击用户界面页签，然后从组件栏中拖动一个文本组件到画布。
4. 在右侧属性面板，找到内容参数，配置所需的文本内容。

5.2 引用变量

引用变量是一种动态设置内容参数的方法，可以根据运行时的数据动态更新组件内容，适用于需要与其他组件或数据源交互的场景。引用变量的基本语法是在变量名前加上双大括号 {{}}。

例如，如果你有一个名为 username 的变量，你可以在组件中这样引用它：{{username}}。

目前，支持引用工作流的返回数据、组件的 content、URL 参数和局部上下文。在组件中引用变量时，支持引用工作流输出节点的输出内容，可以在用户界面中呈现类似'Loading 中'的效果，避免某个节点处理时间过长，影响用户体验。目前仅支持引用主工作流的消息节点，暂不支持引用子工作流中的消息节点。此外，引用循环节点或批处理节点中的消息节点时，不可引用其中某次循环或某次批处理流程中的消息节点。

总结

本文详细讲解了 Coze 应用开发的完整流程，从应用的核心定义，到创建应用、搭建工作流、添加插件与数据，再到 UI 组件的使用及参数配置，覆盖开发全环节。掌握这些低代码开发技巧，能显著提升构建智能服务的效率。开发之路重在实践，每一次节点配置、每一次组件调试，都是成长的积累。保持热爱、笃行不怠，以耐心打磨细节，以坚持收获成果，解锁新的可能。