手把手教你使用Coze开发一个AI翻译应用

本教程详细记录了如何在 Coze 扣子平台上开发一个桌面端的 AI 翻译应用，非常适合零基础学习 Coze 开发的朋友哈。

教程主要分为以下步骤：

应用介绍
创建和设计应用项目
业务逻辑编排
用户界面搭建
添加事件和数据（实现业务逻辑和用户界面联动）
效果测试
发布应用

一、 AI 翻译应用介绍

主要将用户输入的内容翻译成目标语言，用户界面如下：

二、创建 AI 应用项目

1、登录 Coze（扣子）开发平台

注册和登录Coze（扣子）开发平台

2、创建应用

进入 Coze 开发平台，点击+"创建应用"

可以选择"标准创建"也可以选择"AI 创建"，这里选择"AI 创建"，创建"空白应用"

输入应用名称，点击 AI 图标可以自动生成应用头像

点击"确认"之后，创建完 AI 应用项目后，就会进入以下 Coze 的 IDE 开发页面，在这里我们可以开始进行【业务逻辑编排】和【用户界面搭建】。

三、业务逻辑编排

首先我们进行 AI 项目的业务逻辑的编排工作。

1、创建工作流

点击"工作流"，选择"新建工作流"

输入工作流名称和说明，然后单击"确认"

创建之后就会看到以下这个工作流画布，默认生成【开始】和【结束】两个工作流节点，那在两个节点之间，就是我们接下来需要编排的内容逻辑节点。

也就是：开始 → 内容处理逻辑（模型调用）→结束

2、工作流节点配置

首先我们需要理清下这个 AI 翻译应用的主要逻辑，以便于我们更好搭建编排业务逻辑。

AI 翻译应用：用户输入（开始）→选择目标语言（模型调用）→输出翻译内容（结束）

（1）配置【开始】节点

【开始】节点，用于设定启动工作流需要的信息。

本场景中，用需要提供要翻译的内容和目标语言，所有需要配置两个对应的输入参数。

点击【开始】节点，在右侧配置以下变量名：

content：用于传入用户要翻译的内容
lang：用于指定目标语言（如英语、日语等）

注意：变量名可以自定义，如果你自定义，后边的工作流变量也请保持一致。

（2）配置【大模型】节点

【大模型】节点，主要用来指定翻译任务的大模型。这里选择豆包工具调用模型，并使用模型默认配置。当然你也可以选择其他模型配置，单击配置图标就会出现模型列表，自行选择即可。

a. 模型选择

b. 配置大模型变量

c. 配置提示词（系统/用户提示词）

配置"系统提示词"和"用户提示词"

系统提示词：

系统提示词是一组指示模型行为和而功能范围的指令，可以包括如何提问、如何提供信息、如何请求特定功能等。系统提示词也用于设定对话的边界，比如告知用户哪些类型的问题或请求是不被接受的。

markdown 复制代码

# 角色
你是一个专业的翻译官，能够准确地将用户输入的内容翻译成目标语言，不进行随意扩写。

## 技能
### 技能 1：翻译文本
1. 当用户提供一段文本时，迅速将其翻译成目标语言。
2. 确保翻译的准确性和流畅性。

## 限制：
- 只进行翻译工作，不回答与翻译无关的问题。
- 严格按照用户要求的目标语言进行翻译，不得擅自更改。

用户提示词：

用户提示词通常是直接的命令，告诉模型要执行的任务或意图。比如"请翻译以下这段内容"，提示词越清晰，模型的输出越贴近实际需求。

首先先输入以下内容。

复制代码

将用户输入的内容翻译成目标语言。

我们需要确认两个变量：用户输入内容、目标语言。

我们需要用前面定义的输入变量（content 、lang）来指代"用户输入内容"和"目标语言"。

在"用户输入的内容"后输入{，然后选择指代的变量。

如果没有可用的变量，请检查是否安装教程配置了模型节点的输入变量。

d. 配置输出变量

在输出区域，将输出格式配置为文本，使用配置的 output 变量。

e. 连接节点

（3）配置【结束】节点

点击【结束】节点，然后选择"返回文本"

选择"大模型"节点的输出结果作为输出参数。

在回答内容文本框，输入变量{{output}，将大模型的翻译内容作为最终回复。

选择"流式输出"，实现打字机一样的输出效果。

好了，通过以上步骤，我们已经完成了整个工作流的搭建。

我们可以点击"试运行"测试下工作流的执行，看下运行结果是否符合预期。如果不符合预期，请逐一检查每个节点的输出结果。

在完成业务逻辑编排并通过测试之后，我们接下来就可以开始进行用户界面搭建了。

四、用户界面搭建

Coze 提供了可视化的用户界面搭建平台，可以拖过拖拽的方式搭建用户界面，不需要些一行代码。

1、创建页面

点击顶部 Tab"用户界面"，选择"桌面网页"，点击"开始搭建"，进入界面搭建平台。

进入可视化用户搭建界面，如下，左边是组件面板，右边是搭建面板

可以点击组件拖拽的方式，直接搭建界面。

2、设计和搭建页面结构

首先先看下我们设计的 AI 翻译助手页面，主要有上下两部分区域组成：

上边是标题区域
下边是功能区域（功能区域又分为左右两部分：内容输入、翻译结果输出）

接下来开始按照上-下-下左 -下右的顺序搭建界面框架：

a. 搭建上边容器

在组件面板中，找到布局组件>容器组件，将组件拖拽到中间的画布中。并在右侧配置对应的比例。

设置容器样式：删除填充色，添加边框颜色，如下：

b. 搭建下边容器

用同样的方法拖拽容器，并在右边配置参数，这里注意要选择排列方式为"横向"，高度为"填充容器"

c. 搭建下-左容器

按照上边同样方法，重复搭建下-左容器

d.搭建下-右容器

按照上边同样方法，重复搭建下-右容器

好了，我们就完成了这个 AI 翻译应用的页面结构搭建。

3、具体内容搭建

a. 搭建顶部标题区域

选择"文本"组件，拖拽到顶部标题区域，并在右侧进行相关内容和样式配置。

b. 搭建左侧输入内容区

选择"表单"组件，拖拽到下-左区域，并删除多余内容，并在右侧进行样式配置，注意宽度选择"填充容器"，并删除"边框"样式。

点击对应的区域，修改对应的文案和选择器配置：

好了，我们已经完成了下-左的内容区域搭建。

c. 搭建右侧翻译结果区

选择 Markdown 组件，拖拽到下-右侧区域

删除已有内容，并在右侧输入 Markdown 格式内容：###### 翻译结果

并配置相关样式

好了，现在用户界面都全部已经搭建好，可以点击"预览"查看

五、配置事件和数据（实现业务逻辑和用户界面联动）

业务逻辑和用户界面我们都已经弄好了，接下来就可以通过配置事件和添加数据，实现业务逻辑与用户页面的联动了。

1、配置输入内容

在用户页面 页签下，单击已添加的开始翻译 按钮组件，然后在配置面板中选择事件，最后单击新建， 配置如下：

Workflow 就是我们前面搭建的业务逻辑工作流

将鼠标悬浮至content参数的文本框上，然后单击右侧的配置图标。

在展开的配置面板中，找到用户输入翻译内容的组件 (Textarea)，选择表单值作为工作流中content参数的值。配置完成后关闭参数配置面板。

2、配置输出数据结果

六、效果测试

点击"预览"

输入内容，点击开始翻译测试，查看是否在翻译结果区域有出现翻译后的内容。

七、发布应用

完成应用测试后，你就可以将应用发布到商店或模板，或发布成 API 服务与其他应用集成。

本教程中以商店为例。

在应用 IDE 中，单击右上角的发布按钮。
在发布页面，输入版本号和发布描述。
选择扣子商店，然后选择应用分类。

这里选择扣子商店，单击页面上的发布按钮，完成应用发布。

发布完成后，就可以在扣子商店上使用这个应用了。

审核通过之后（一般 10-15min），可以在"发布管理"-"应用"中查看

但是我发现在扣子商店里面很难找到审核通过的应该，你可以通过应用名+加上开发者昵称的方式搜索。

好了，通过 Coze 开发平台开发一个 AI 翻译应用就到这啦，有任何问题欢迎评论区留言，一起学习进步哈~

后续还有其他项目整理，欢迎关注哦~