手把手教你第一个AI应用开发流程-掌握IDE使用
本文介绍了在扣子平台上开发AI翻译应用的完整流程。首先讲解了AI应用的基础知识,包括应用场景和开发步骤。然后通过实操演示,从创建项目、编排业务逻辑(配置大模型节点和工作流),到设计用户界面(添加表单、下拉框等组件)。最后展示了翻译功能的效果验证,将用户输入内容准确翻译为目标语言。整个过程涵盖了AI应用开发的核心环节,适合初学者快速上手实践。
基础知识
AI应用能做什么


开发流程
实操步骤

创建AI应用项目
第1步:打开扣子开发平台(https://www.coze.cn/studio)

第2步:工作空间 - 项目开发 - +项目

第3步:创建应用



第4步:如果想改应用的名字,点击铅笔图标即可。


编排业务逻辑
第1步:资源 - 工作流 - + 创建工作流


第2步:添加“大模型” && 配置“大模型”节点


第3步:配置“开始”节点

第4步:连接“结束”节点 && 配置“结束”节点


第5步:填写“大模型”的系统提示词
# 角色
你是一个专业的翻译官,能够准确地将用户输入的内容翻译成目标语言,不进行随意扩写。
## 技能
### 技能 1:翻译文本
当用户提供一段文本时,迅速将其翻译成目标语言。
确保翻译的准确性和流畅性。
## 限制:
只进行翻译工作,不回答与翻译无关的问题。
严格按照用户要求的目标语言进行翻译,不得擅自更改。


第6步:试运行


设计用户界面
第1步:IDE界面 - 用户界面

第2步:桌面网页 - 开始搭建

第3步:拖动左侧 组件 - 布局组件 - 容器

第4步:点击白框,内边框原20,改成10.

这里只是演示,内边框依旧使用20.
第5步:再拖一个容器

宽度 - 填充容器

自动变成宽度100%

第6步:修改第一个容器的高度

第7步:拖动一个容器,到DIV2容器


第8步:拖动Text,至DIV1容器

也可以自定义字体

第9步:输入组件 - 表单,拖到左边的DIV层

删掉不需要的元素

第10步:点击表单


第11步:点击按钮,设置属性


第12步:单击第一行文本框,设置其属性

第13步:单击第二行下拉列表,设置属性

录入英语、日语、上海话。选项值与选项名称一致。
第14步:展示组件 - Markdown,拖到右边DIV容器




第15步:预览

第16步:单击左边容器

点击填充右边的减号,会变成透明
第17步:单击右边容器,也去掉填充

第18步:点击“开始翻译”按钮,右边点击 状态 - 点击效果

第19步:给按钮绑定事件


测试应用
第1步:预览

第2步:输入文字"你是谁?“,单击“开始翻译”.

发布应用
第1步:发布

火山引擎开发者社区是火山引擎打造的AI技术生态平台,聚焦Agent与大模型开发,提供豆包系列模型(图像/视频/视觉)、智能分析与会话工具,并配套评测集、动手实验室及行业案例库。社区通过技术沙龙、挑战赛等活动促进开发者成长,新用户可领50万Tokens权益,助力构建智能应用。
更多推荐
所有评论(0)