Coze扣子工作流入门：打造日语分级阅读应用

最近在学习日语，想找些基础的阅读进行练习，看到小红书上很多人发的小短文还不错，想到不是正好可以利用AI来生成吗，比如输入一个JLPT等级，就出现对应的一篇短文。于是就决定利用Coze扣子零代码的方式搭建一个日语分级阅读应用。有兴趣的可以去扣子商店去搜一下。

首先整理一下需求：

1. 输入JLPT等级，比如N5就出现N5能看得懂的短文，但是没有主题的话，范围太广了，最好可以选择自己感兴趣的主题
2. 因为有固定的输入输出，那么采用工作流是最好的
3. 既然输出了，那么如果觉得好的文章应该能保存下来，以后还能看。
4. 最后我还想要个翻译好的文字，方便我对比阅读

首先登录扣子-工作空间 右上角点击创建 这个时候我们选择 创建应用 - 创建空白应用

image.png

应用名称这里我们就填：日语分级阅读， 描述随便写写都行，名字和描述后面都还可以修改的

image.png

接下来就会看到顶部有一个 业务逻辑 和 用户界面，我们先根据想象的样子把界面托拉拽给设计出来，很傻瓜的。

界面设计

我们先拉一个容器放到顶部，然后在里面放上几个文本，分别对应标题，正文和译文，作为生成后的预览用

image.png

接下来是输入组件，直接用下拉框和多行输入，再加上2个按钮，一个生成用来触发AI去生成，另一个保存，用来把AI输出的内容存起来，下拉框我们写好固定几个选项N5-N1就行

image.png

这个界面就这样了不管它，然后页面最底部有个小按钮，可以新增页面

image.png

选择底部tab栏，设置好跳转指向新页面

image.png

配置工作流

接下来就是这次的重点工作流相关的内容
我们选择生成按钮之后，切换到事件，就能够新建一个事件，我们是需要点击后生成内容，所以选择点击时触发，
执行动作就选择调用工作流

image.png

不过这个时候我们还没有可选的工作流
在顶部切换到业务逻辑，屏幕左侧 资源-工作流-新建工作流

image.png

这个时候我们可以看到工作流定制界面

image.png

有一个开始和结束，我们把需要干的事情放到流程中间，首先看看我们需要什么，我们要拿到用户输入的2个参数，一个是等级，一个是主题，于是我们就在开始步骤创建对应的变量，设置为String类型（就是文字类型）

image.png

我们在开始后面添加一个节点，调用大模型，然后选择豆包大模型，输入保持跟第一步一致，设定人设写到系统提示词里，这里注意，可以把变量放入提示语里，他就能根据你前面选择的内容进行变更了！

这里的规则是和输入里的参数名保持一致，然后加上双花括号 {{level}}

image.png

可以看到我们让他输出的内容不只是文章，还有标题和译文，那么总共就是3个参数，我们设定到输出里面

image.png

接下来把他连接到结束节点上，配置最终输出的参数即可

image.png

下面我们就回到界面设计，选择刚才创建的工作流，这个时候就会出现你刚才设计的2个输入参数，level和about，从下拉框里选择对应的界面组件进行绑定就好啦

image.png

注意一定要选到value这一级，看看后面的类型是string，对应起来

image.png

OK输入搞定了，还得绑定输出的参数，对吧

选择之前设计好的文本框，内容属性后面有个按钮点开后，就能选择工作流里返回的参数，

image.png

我们一个个绑定完成之后就能进行测试了，选择右上角预览，然后点击生成按钮，试试效果吧

image.png

ok工作流的基础流程就是这样，下面我们可能还要进行保存的处理，添加工作流的方式还是一样，

不过这次我们添加一个数据库节点，输入好参数后，发现要写代码？别慌，在sql那里可以自动生成，只需要用自然语言提示就行

image.png

只不过要记得替换一下参数，和字段顺序一一对应，结束节点配置也是差不多。

image.png

还是一样在保存按钮上触发点击事件

image.png

有了保存，还需要一个列表进行查询，拿出之前创建的页面2，我们设计好界面，记住这里用list组件才能循环列表

image.png

同样的方法创建一个新的查询数据用的工作流，查询参数为level，

image.png

页面2 下拉新建一个数据改变事件，也就是下拉项改变后就去调用查询工作流

image.png

接着绑定变量outputList到页面2,

image.png

然后我们来测试一下，生成内容后，点击保存，结果发现居然没存进去

这个时候可以看看数据库调用日志

image.png

发现有个问题，就是level这个选项保存的值并不是N1-N5, 找到下拉框的属性配置，发现值填错了

image.png

修改一下就OK了

image.png

image.png

就这样一个简单的工作流应用就搭建完毕了，之后就可以发布咯

image.png