第六章 Coze 应用开发：构建网页与小程序应用

第六章 Coze 应用开发：构建网页与小程序应用

在第五章，我们把一个工作流的“后端逻辑”研究透了。但它还只是一个看不见、摸不着的“引擎”。在这一章，我将带你学习一个全新的、非常强大的功能——Coze 应用开发。

我们的目标，就是亲手从零开始，打造一个带图形化用户界面（UI）的 AI 翻译应用，让你彻底掌握如何为你的逻辑引擎配上一个美观、易用的“驾驶舱”。

6.1 项目创建与逻辑编排

在开始做界面之前，我需要先为这个应用准备好它的“大脑”，也就是负责执行翻译任务的工作流。

第一步：创建应用项目

我先从 Coze 主界面左侧的“工作空间”进入，在“项目开发”页面点击“创建”，但这一次，我选择的是 “创建应用”。在模板页面，我选择“空白应用”，然后输入应用名称，例如 translator_app。

创建成功后，我们会进入一个全新的集成开发环境（IDE），这里分为“业务逻辑”和“用户界面”两大模块。我们先停留在“业务逻辑”模块。

image-20250803155432251

第二步：创建翻译工作流

在左侧的资源列表中，我找到“工作流”，点击 + > “新建工作流”，将其命名为 translation_workflow。

这个工作流的逻辑非常简单，只需要三个节点：【开始】->【大模型】->【结束】。

  1. 配置【开始】节点：我需要用户提供两样东西：要翻译的内容和要翻译的目标语言。所以，我为【开始】节点配置两个输入参数：

    • content (String类型): 用于接收待翻译的文本。
    • lang (String类型): 用于接收目标语言，例如“日语”。

  2. 配置【大模型】节点：这是执行翻译的核心。

    • 模型选择：我选择一个综合能力较强的模型即可，例如“豆包・工具调用”。
    • 输入参数：我将【开始】节点中的 content 和 lang 两个变量，作为输入参数传入这个大模型节点。
    • 系统提示词：我为它设定一个专业的“翻译官”角色。
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      # 角色
      你是一位专业且高效的翻译官，精通多种语言，能够精准、流畅地将用户输入的内容翻译成目标语言，始终保持内容的原汁原味，不做任何随意的扩写或润色。

      ## 技能
      ### 技能 1: 执行翻译任务
      1. 当用户输入变量{{content}}表示源语言内容，{{lang}}表示目标语言时，直接进行翻译。
      2. 如果用户仅输入变量{{content}}，主动询问用户需要翻译成哪种目标语言。

      ## 限制:
      - 仅专注于翻译工作，坚决不回答任何与翻译无关的问题。
      - 严格依据用户通过变量{{lang}}指定的目标语言进行翻译，绝不擅自更改目标语言。
      - 翻译内容必须忠实于变量{{content}}中的原文，不得添加额外信息。
    • 用户提示词：我写下具体的指令，并用变量引用上游的输入。
      1
      将用户输入的内容：“{{content}}” 翻译成目标语言：“{{lang}}”。

  3. 配置【结束】节点：我将【大模型】节点的 output（也就是翻译结果），连接到【结束】节点，并设置为最终的返回内容。同时，我会开启“流式输出”，这样用户就能看到打字机一样的效果。

完成这三步后，我会在工作流画布下方点击“试运行”，输入一段测试内容和目标语言，确保这个“引擎”能正常工作。

6.2 可视化界面搭建

好了，后端逻辑我们准备好了，现在开始做“装修”，也就是搭建用户界面。我点击 IDE 顶部的“用户界面”页签，开始搭建。

第一步：搭建页面布局

我希望我的翻译应用界面，是左边输入、右边输出的经典布局。要实现这个效果，我需要使用【容器】组件。

  1. 我先从左侧组件库中，拖入一个【容器】组件到画布，作为整体的“功能区”。我将它的排列方向设置为“横向”。
  2. 接着，我再向这个“功能区”容器的内部，并列拖入两个【容器】组件。这样，我的页面就被分成了左右两个相等的部分。

第二步：填充左右区域组件

布局搭好了，我开始往里面放东西。

  1. 填充左侧“输入区”：

    • 我从组件库拖入一个 文本输入 组件（多行的那种），把它放到左侧容器里，用来让用户输入大段的翻译内容。我把它的标签和占位文案都改成“请输入翻译内容”。
    • 我再拖入一个 选择 组件，放到文本输入框下方，用来让用户选择语言。我在它的属性里配置两个选项：{名称: "英语", 值: "English"} 和 {名称: "日语", 值: "Japanese"}。
    • 最后，我拖入一个 按钮 组件，放到最下方，把按钮上的文字改成“开始翻译”。

  2. 填充右侧“输出区”：

    • 我从组件库拖入一个 Markdown 组件，把它放到右侧容器里。这个组件能很好地展示格式化的文本。我先在它的内容属性里写上一个标题 ###### 翻译结果 作为占位。

image-20250803171806016

完成这些操作后，一个应用的基本雏形就出来了。你可以在右上角随时点击“预览”查看效果。

6.3 事件绑定与前后端联动

现在界面和逻辑都各自独立，我需要一根“线”把它们串起来。这根线，就是【事件】。

  1. 在画布中，我选中左侧的“开始翻译”【按钮】组件。
  2. 在右侧的配置面板中，我切换到“事件”页签，点击“新建”。
  3. 配置事件：
    • 事件类型：我选择 点击时。
    • 执行动作：我选择 调用工作流，并在下拉菜单中选择我之前创建的 translation_workflow。
  4. 绑定输入数据（关键）：
    • 选择工作流后，它的两个输入参数 content 和 lang 会显示出来。
    • 我点击 content 参数后面的配置图标，在弹出的面板中，将它的值关联到 文本输入 组件的“表单值”。
    • 我用同样的方法，将 lang 参数的值，关联到 选择 组件的“表单值”。

image-20250803171925119

5.绑定输出数据（关键）：

  • 用户点击按钮，工作流被调用，那返回的结果要显示在哪里呢？
  • 我选中右侧的 Markdown 组件。在它的“属性”面板中，找到“内容”这一项。
  • 我点击“内容”输入框后面的配置图标，在弹出的面板中，通过 {{...}} 语法，将它的内容绑定到我们工作流的输出结果上。最终的配置内容可能看起来是这样：# 翻译结果 \n\n {{ translation_workflow.data.output }}。

image-20250803172000917

6.4 对话式应用：使用对话流构建 AI 助手

在这一节，我们的新目标，就是构建一个移动端的 AI 助手。它能像一个真人一样，在连续的对话中理解上下文，回答用户的各种问题。

第一步：创建项目与对话流

我还是像之前一样，先创建一个新的空白应用，命名为 AI_Assistant_App。

但在进入“业务逻辑”编排时，这次我做的选择有所不同：

  1. 在左侧资源列表的“工作流”处，我点击 + > 新建对话流。

image-20250803172424551

2.我将对话流命名为 ai_assistant_flow。这里有一个非常重要的选项：“创建并绑定同名会话”，我将它保持勾选。

【知识点】: “会话”是对话流的记忆核心。勾选此项后，Coze 会自动创建一个地方，用来存放这个对话流与用户之间的所有聊天记录。当【大模型】节点启用了“对话历史”功能后，它就会读取这些记录来理解上下文。

第二步：编排对话流逻辑

对话流的逻辑通常比工作流更简洁，我们的 AI 助手也只需要 开始 -> 大模型 -> 结束 的三点一线流程。

  1. 配置【开始】节点：对话流的【开始】节点自带一个核心输入参数 USER_INPUT，它专门用来接收用户在聊天框里输入的每一句话，我们无需额外配置。

  2. 配置【大模型】节点：这是助手的“大脑”。

    • 输入：我将大模型节点的默认输入 input，关联到【开始】节点的 USER_INPUT 参数。
    • 对话历史（关键）：在配置项中，我找到 “开启对话历史” 的开关，并 务必将它打开。只有打开了它，大模型才能在生成回答时，参考之前的聊天内容。
    • 系统提示词：我为它设定一个“全能 AI 助手”的角色。
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      # 角色
      你是一个全能的 AI 助手，能够快速准确地回答用户的各种问题，并提供详细的解释和建议。

      ## 技能：回答问题
      1. 当用户提出问题时，仔细分析问题的关键信息，使用工具进行搜索以获取准确的答案。
      2. 以清晰、简洁的语言回答问题，并提供相关的解释和例子。

      ## 限制:
      - 只回答真实、准确的信息，拒绝编造或猜测答案。
      - 回答内容应简洁明了，避免冗长和复杂的表述。
    • 用户提示词：我直接引用输入变量 {{input}} 即可。

  3. 配置【结束】节点：与上一个项目一样，我将【结束】节点的回答内容设置为引用大模型的输出 {{output}}，并开启流式输出。

完成逻辑编排后，我会简单“试运行”一下，确保流程能跑通。

第三步：搭建对话式 UI

现在，我们进入“用户界面”的搭建。这一步比上一个项目要简单得多。

  1. 在 IDE 顶部，我切换到“用户界面”页签。
  2. 在“选择页面类型”时，这次我选择 小程序和 H5，因为我的目标是构建一个移动端应用。
  3. 进入画布后，我首先关闭了底部导航栏，因为我们这次仅是单页应用，然后，从左侧的组件库中，找到 AI 组件 > AI对话组件，并将它直接拖拽到画布中。

img

这个【AI对话】组件非常强大，它一个组件就包含了完整的聊天界面：涵盖了历史消息展示区、文本输入框、发送按钮等所有功能。

第四步：绑定逻辑与 UI

最后，也是最简单的一步，就是告诉这个聊天组件，它应该和哪个“大脑”（对话流）对话。

  1. 在画布中，我选中刚刚拖入的【AI对话】组件。
  2. 在右侧的“属性”配置面板中，找到 “对话流” 这个选项。
  3. 我点击下拉菜单，选择我之前创建的 ai_assistant_flow。

image-20250803173130208

完成了！只需要这一步绑定，这个组件就自动知道该如何将用户输入的内容发送给对话流，以及如何接收并展示对话流返回的结果。

第五步：预览与测试

我点击右上角的“预览”。一个模拟手机的界面就会出现。

我可以像使用普通聊天软件一样，在底部的输入框中和我的 AI 助手对话。为了测试它的“记忆力”，我可以进行一次多轮对话：

  • 我：“你好，请问北京有什么好玩的？”
  • AI 助手：“北京有很多名胜古迹，比如故宫、天坛、颐和园…”
  • 我：“那第一个有什么特点？”
  • AI 助手：“故宫是中国明清两代的皇家宫殿，旧称紫禁城，是世界上现存规模最大、保存最为完整的木质结构古建筑之一…”

可以看到，当我问“第一个”时，它能准确理解我指的是“故宫”，这证明了【对话流】的上下文记忆能力已经成功生效。

通过这两个实战项目，我们已经掌握了 Coze 应用开发的两种核心模式：基于工作流的“表单交互式应用”和基于对话流的“对话式应用”。这为你后续开发更复杂的应用打下了坚实的基础。