本文讨论了Coze新功能CozeIDE的应用实战指南，针对对Coze感兴趣、有AI相关想法但不懂编程的纯小白，介绍了如何无代码快速开发一个AI应用。关键要点包括：
1.Coze解决方案：通过前端界面（无代码）、业务逻辑（工作流）、事件&绑定（前端与业务交互）来实现AI应用开发。
2.前端与业务交互：在CozeIDE中，前端界面通过事件、绑定和业务逻辑进行交互，如工作流输入绑定前端元素A，用户输入后工作流读取内容传至大模型。
3.创建Coze应用：点击Coze创建，选择应用、空白即可进入CozeIDE。
4.搭建业务逻辑：在CozeIDE默认的业务逻辑编辑界面基于工作流搭建，编写逻辑与捏bot一致，大模型节点有特定系统提示词。
5.搭建用户界面：在官方模板基础上改动，左侧有组件、模板、导航功能，右侧有属性、事件查看功能，本次案例用到多行输入框、按钮、文本组件。
6.搭建页面交互：按钮绑定工作流调用，将工作流入参绑定用户输入框；展示组件绑定工作流，展示运行结果。
7.应用预览调试：点击预览按钮测试核心功能，验证通过后对应用美化、调整组件排版。

一.背景

Coze新功能CozeIDE，可以无代码快速开发一个ai应用。

目标群体：对Coze感兴趣，有ai相关idea的纯小白。

应用场景：有一个和ai有关的idea，苦于不懂编程，无法实现 。

Coze解决方案：前端界面（无代码）+业务逻辑（工作流）+事件&绑定（前端与业务交互）。

▶Coze应用搭建的核心逻辑

接下来通过实战案例进行拆解，帮助我们理解Coze应用搭建的核心逻辑。

二.案例拆解

▶前端与业务交互拆解

在CozeIDE中，前端界面通过事件、绑定和业务逻辑进行交互。

（案例中的绑定 ）工作流的输入绑定前端界面的元素A，当用户在元素A输入内容后，工作流运行时会读取绑定的元素A的内容，并 传递至工作流内的大模型

三.应用实战

应用的搭建逻辑拆解完，下面进行实战演练，开始复刻案例应用。

1.创建Coze应用

点击Coze创建，选择应用，选择空白，进可进入Coze IDE。

2.搭建业务逻辑

进入Coze IDE后，默认显示业务逻辑编辑界面，基于业务逻辑搭建一个工作流。

接着点击“+”号，点击“大模型”：

业务逻辑的实现依靠工作流来实现，Coze IDE内编写工作流与捏bot编写工作流的逻辑完全一致，只是入口不同而已。

接着，继续在“系统提示词”下面填写提示词内容:

你是一个致力于创作反心灵鸡汤的灵魂段子手 
＃根据{{input}}创作对应的反心灵鸡汤 
#采用具有强烈讽刺意味的表达 风格应当毒舌、辛辣、讽刺
#内容应当深刻、直击灵魂 #内容应当精简，不超过50字 
#当{{input}为空时，吐槽用户这个行为 
#当{{input}涉及政治、党派、种族歧视等敏感内容时，拒绝创作，并吐槽用户的钓鱼行为 
#请尽情挥洒你的创造力

用户提示词下方填写：{{input}}

这样大模型就设置完成，接着我们把大模型和“结束”连接，并添加变量值：

现在工作流已搭建完成：

3.搭建用户界面

业务逻辑对应的工作流搭建完成后，进行用户交互页面的创建，初学阶段推荐在官方模板基础上进行改动，本案例使用官方【极简主义—色彩碰撞】模板。

接着，我们选择组件中“输入组件”的文本框，拖进该UI界面：

文本框可拉长或者缩小，右侧进行自定义。

补充：

1.用户界面功能区的左侧，提供组件、模板、导航等功能 。
【组件】搭建前端应用界面的基础，Coze提供了丰富的组件类型，可以慢慢探索 本次案例会用到的组件主要是：输入组件的多行输入框、输入组件的按钮、展示组件的文本，即对应前文的核心前端设计拆解所需的元素
【模板】官方搭建好的前端界面案例，应用搭建人员可以直接套用，非常便捷 
【导航】使用网页结构语言(html)的相关概念展示页面结构，例如Div（容器） 
2.用户界面功能区的右侧，提供属性、事件查看功能 。
【属性】展示组件的大小、内容、位置、样式等等外观信息 
【事件】展示组件关联的一些动作，例如点击组件可以跳转到新的页面或是点击组件可以触发功能流等等场 景，事件是实现用户界面与业务逻辑交互的核心

4.搭建交互页面

当业务逻辑和用户界面都搭建完成后，需要实现用户界面与业务逻辑的交互。

我们点击界面的“follow”按钮，按照如图所示操作：

说明：按钮组件配置调用工作流事件，重点注意，工作流的入参（即工作流的输入）需要绑定到用户输入框，即把用户在页面输入的内容传递到工作流

展示组件绑定工作流：
说明：展示组件用于展示工作流最终生成的内容，因此需要将工作流的运行结果绑定到展示组件

5.应用预览调试

点击“预览”按钮，测试核心功能按钮功能是否有效。核心功能验证通过后，剩下工作只需要对应用进行美化，去除不需要的组件和组件排版即可。

（1）当我们没有输入时，根据系统提示词的要求，会输出吐槽的内容：

（2）当输入文本，再次点击按钮，则输出对应的反毒鸡汤的内容：

到这里，我们已经完成了一个Coze简单应用的开发！继续加油！