4.1 搭建页面结构

　　大家好！在这个信息爆炸的时代，Coze官方最新通告无疑为无代码基础的开发者们带来了福音。现在，只需拖拽，即使是AI领域的门外汉也能轻松构建属于自己的AI应用，而不再局限于仅通过界面互动。

　　[文章引用自扣子官网文档]

　　[https://s.coze.cn/t/Chm0v_Ljlr45UKEg/]

　　扣子平台现已支持AI应用开发，无论任务简单还是复杂，你都能轻松构建具备完整业务逻辑和直观用户界面的AI应用。这些应用可发布为API服务、模板，或上架至扣子商店。

　　应用的核心业务逻辑由精心编排的工作流实现，同时支持通过变量、插件、知识库、数据库等方式与本地或线上数据进行灵活交互。此外，扣子还提供了丰富的页面组件和可视化的编排工具，让你无需编写任何代码即可快速搭建出用户友好的界面。

　　为了助你快速上手，扣子还提供了一系列应用模板供你复制和体验。以AI英语写作练习助手为例，这是一款通过扣子平台搭建的应用，能够利用AI能力生成英语写作题目并批改文章，同时支持查看答题历史。

　　AI应用是指利用大模型技术开发的应用程序，这些应用程序能够执行复杂任务、分析数据并作出决策，如AI搜索和AI翻译等。

　　扣子平台提供了一个高效快捷的方式，让开发者能够轻松开发出具有复杂交互功能的AI应用。

　　一个AI应用的开发流程如下：

1. 创建AI应用项目：在扣子平台上创建一个AI应用项目后，你将自动进入集成开发环境（IDE），这是进行业务逻辑编排和应用配置的主要场所。
2. 编排业务逻辑：使用工作流来编排业务逻辑，并通过变量、插件、知识库、数据库等方式与本地或线上数据进行交互。同时，扣子还提供了试运行能力，方便你在开发过程中进行调试。
3. 设计用户界面：扣子提供了丰富的组件和可视化的编排工具，支持以“拖、拉、拽”的方式快速构建应用，实现所见即所得的应用开发体验。这种方式大大简化了界面开发过程，使得即使是非专业开发者也能轻松上手。
4. 测试应用：通过预览功能进行实时测试，确保应用运行符合预期。
5. 发布应用：完成开发和测试后，你可以将构建好的AI应用发布到你选择的平台或渠道，让更多人使用。

　　扣子平台的线上应用集成开发环境（IDE）支持可视化的编排方式和调试能力，使得AI应用的开发变得更加快速和简单，让开发者能够专注于创意和业务逻辑。IDE由业务逻辑和用户页面两个模块组成：

• 业务逻辑模块：主要用于业务逻辑开发，包含资源列表和配置区域两部分。资源列表中包含工作流、插件、知识库、变量、数据库功能等；配置区域则用于对创建或添加的资源进行配置和调试。
• 用户界面模块：用于用户页面搭建，由组件列表、画布和配置面板组成。你可以通过属性相关配置来调整组件样式；通过事件绑定的方式实现业务逻辑与页面组件之间的联动。例如给按钮组件绑定一个工作流的点击事件当用户点击这个按钮时就会触发工作流调用。随着人工智能技术的不断进步大模型在翻译质量效率上下文理解和多语言支持等方面表现卓越因此越来越多的人开始使用大模型进行文本翻译以提升效率降低成本。本教程将指导你如何在扣子平台上完成一个AI翻译应用的开发这个AI翻译应用支持用户选择目标翻译语言在输入文本内容后点击开始翻译即可获得大模型的翻译结果首先你需要进行应用设计规划应用的主体功能和用户界面这个AI翻译应用的核心功能是满足用户的文本翻译需求并支持用户选择指定翻译的语言翻译功能可以通过创建一个包含大模型节点的工作流来实现基于以上功能规划这个应用的用户界面会包含以下组件：一个让用户可以输入翻译内容的区域一个让用户选择翻译语言的列表一个翻译按钮来触发翻译操作一个展示翻译结果的内容区域完成主体功能设计和规划后就可以开始AI应用搭建了首先你需要创建一个AI应用项目AI应用项目支持使用工作流来完成复杂的业务逻辑编排也支持使用数据库知识库插件等资源实现与本地数据或线上数据的交互此外AI应用项目还支持通过拖拉拽的方式搭建用户界面并能够实现与业务逻辑的联动参考以下操作创建AI应用项目登录扣子平台在左侧菜单栏单击工作空间选择一个工作空间工作空间是各种资源和开发项目的集合不同工作空间内的数据和资源相互隔离在项目开发页面单击创建然后在弹出的页面选择创建应用在应用模板页面单击空白应用输入应用名称并单击图标旁的AI图标使用AI自动生成一个图标然后单击确定应用创建成功后你会直接进入到应用的集成开发环境(IDE)创建完AI应用项目后你可以开始进行业务逻辑编排了扣子提供了大模型代码意图识别知识库写入与检索等丰富的工作流节点以满足复杂的业务场景需求此外你还可以通过使用变量插件知识库等方式与你的本地数据和线上数据进行集成本教程中的AI翻译应用主要是使用大模型实现多语言翻译所以只需要创建一个包含大模型节点的工作流即可参考以下步骤创建一个实现翻译功能的工作流在业务逻辑页面找到工作流然后单击+>新建工作流输入工作流名称和说明然后单击确认(工作流名称只支持字母数字和下划线且必须以字母开头)单击开始节点进行配置开始节点用于设定启动工作流需要的信息本场景中用户需要提供要翻译的内容和目标语言所以需要配置两个对应的输入参数在输入区域单击+图标配置第一个变量(content)用于传入用户要翻译的内容再次单击+图标输入第二个变量(lang)用来指定目标语言单击大模型节点进行配置在模型区域展开模型列表选择用来执行翻译任务的大模型本教程中选择豆包Function call模型并使用模型默认配置如果你想调整模型配置单击配置图标配置输入参数这些输入参数可以在模型提示词中使用本教程中需要将用户输入的译文内容和目标语言添加到提示词中让模型按照用户选择的语言进行翻译所以需要配置两个输入参数单击输入区域的+图标然后点击对应的设置图标选择开始节点中配置的变量重复上述操作再添加将目标语言的这个变量删除不需要的输入信息确保输入中只包含下图中的这两个参数在系统提示词区域输入以下内容作为系统提示词你是一个专业的翻译官能够准确地将用户输入的内容翻译成目标语言不进行随意扩写技能当用户提供一段文本时迅速将其翻译成目标语言确保翻译的准确性和流畅性只进行翻译工作不回答与翻译无关的问题严格按照用户要求的目标语言进行翻译不得擅自更改用户提示词区域输入用户提示词用户提示词通常是直接的命令告诉模型要执行的任务或意图例如“帮我翻译下这段内容”指令越清晰模型的输出也更贴近你的实际需求首先输入以下内容{将用户输入的内容翻译成目标语言}因为不同用户提供的翻译内容选择的目标语言都不同所以需要将译文内容和目标语言使用输入变量来指代这样就可以在运行时替换成真实的用户需求在”内容”文字后输入{然后选择指代翻译内容的变量(如果你没有可用的变量请检查是否按照教程配置了模型节点的输入变量)重复上述方法添加目标语言变量在输出区域将输出格式配置为文本使用默认配置的output变量连接大模型节点与结束节点然后选择结束节点进行配置在回答内容文本框中输入{{output}}使用大模型的翻译内容作为最终的回复至此你已经完成整个工作流的搭建如果不符合预期你可以逐一检查每个节点的输出结果在完成业务逻辑搭建并通过测试后你就可以开始用户界面搭建了扣子提供了可视化的用户界面搭建能力你可以通过拖拽的方式搭建一个用户界面无需编写任何代码参考以下操作搭建翻译应用的用户界面翻译页面由3个块级组成具体使用的组件和配置请参考下表整体上 AI 翻译应用的用户界面由上下两个部分组成想要实现这样的页面结构就需要使用容器组件容器组件是用来进行页面布局的可以把页面划分成不同的区域和排列顺序容器组件中可以添加其他各种组件例如文本组件按钮组件等参考以下操作完成页面布局：至此我们就完成了这个翻译应用的页面结构搭建未写明清楚之处大家可以查阅官方文档了解应用开发详情在本次的更新中不会导致之前的流程出现问题都已经完成转换