kkk五津：《小喵星座日历》扣子网页应用拆解

kkk五津：《小喵星座日历》扣子网页应用拆解 kkk五津：《小喵星座日历》扣子网页应用拆解 Modified January 24, 2025 三、创建"用户生成历史"工作流 用户的生成历史卡片包含生成时间、星座、性别、图片这4个信息。 1、创建数据库 要想读取用户生成历史，需要先记录用户生成记录。那么你需要先创建一个数据库来存放记录，我起名为generation，记录字段包括：图片image、生成时间time、星座xingzuo、性别xingbie。 2、存数据 创建好数据库之后，下一步就是在用户生成日历图时，将这条数据存到数据库里。所以我们需要回到“日历生成”工作流，在画板节点后面加一个“数据库”节点，其他都不变。 SQL的意思是指对数据库进行增删改查，你不会写语法没关系，点击右上角的魔法按钮，用自然语言说出你的要求，它可以自动生成语法。 将image、xingzuo、xingbie存入generation数据库，将现在的时间存入generation数据库。注意输入的参数名需要与generation数据库的字段名保持一致。 3、读数据 将数据存入数据库之后，每当用户点击一次生成日历，就会将这条数据存到这个数据库中。那么当用户查看历史时，需要创建一个工作流读取记录，我起名为tupianlishi。包括4个节点： 1、开始节点 不需要填 2、数据库节点 这个SQL的意思是从generation数据库中读取image、time、xingzuo、xingbie这4个字段，按时间倒排，最多30条。 3、代码节点： 上一步time提取之后带了中国时区的标识，为了去掉这个标识，可以使用大模型或代码去掉。我试过用大模型会出现处理慢的问题（尤其是生成历史很多的时候），用代码很快，所以我采用了代码。 python代码如下： Code block Plain Text Copy async def main(args: Args) Output: 获取输入的 params 对象 params = args.params 如果 params 是字典，尝试将其值转换为数组 if isinstance(params, dict): params = list(params.values()) 确保 params 是数组 if not isinstance(params, list): raise ValueError(f"params is not an array, received type: {type(params)}") 创建新的结构，按要求重构 output = [] 遍历嵌套数组，处理每个对象 for sublist in params: 第一层数组 if isinstance(sublist, list): 如果是第二层数组 for param in sublist: if isinstance(param, dict): 创建新的字典对象，提取四个参数 new object = { "image": param.get("image", ""), "time": param.get("time", "").replace(" +0800 CST", "").strip(), "xingbie": param.get("xingbie", ""), "xingzuo": param.get("xingzuo", "") } output.append(new object) return output 4、结束 将上一步代码节点的结果输出。 这个工作流就完成了。 以上将2个工作流搭建完成了。之后就是进行用户界面排版。 四、PC用户界面排版 首页排版分成了这几个板块： 三、创建"用户生成历史"工作流 用户的生成历史卡片包含生成时间、星座、性别、图片这4个信息。 1、创建数据库 要想读取用户生成历史，需要先记录用户生成记录。那么你需要先创建一个数据库来存放记录，我起名为generation，记录字段包括：图片image、生成时间time、星座xingzuo、性别xingbie。 2、存数据 创建好数据库之后，下一步就是在用户生成日历图时，将这条数据存到数据库里。所以我们需要回到“日历生成”工作流，在画板节点后面加一个“数据库”节点，其他都不变。 SQL的意思是指对数据库进行增删改查，你不会写语法没关系，点击右上角的魔法按钮，用自然语言说出你的要求，它可以自动生成语法。 SQL的意思是指对数据库进行增删改查，你不会写语法没关系，点击右上角的魔法按钮，用自然语言说出你的要求，它可以自动生成语法。 将image、xingzuo、xingbie存入generation数据库，将现在的时间存入generation数据库。注意输入的参数名需要与generation数据库的字段名保持一致。 3、读数据 将数据存入数据库之后，每当用户点击一次生成日历，就会将这条数据存到这个数据库中。那么当用户查看历史时，需要创建一个工作流读取记录，我起名为tupianlishi。包括4个节点： 1、开始节点 不需要填 2、数据库节点 这个SQL的意思是从generation数据库中读取image、time、xingzuo、xingbie这4个字段，按时间倒排，最多30条。 3、代码节点： 上一步time提取之后带了中国时区的标识，为了去掉这个标识，可以使用大模型或代码去掉。我试过用大模型会出现处理慢的问题（尤其是生成历史很多的时候），用代码很快，所以我采用了代码。 python代码如下： 4、结束 将上一步代码节点的结果输出。 这个工作流就完成了。 以上将2个工作流搭建完成了。之后就是进行用户界面排版。 四、PC用户界面排版 首页排版分成了这几个板块： 点击生成按钮之后会触发一个事件，调用日历生成工作流。 日历正在生成中时，生成按钮变成禁用状态，防止用户再次点使工作流断掉出错。 “生成特定日期的日历”的配置与上面类似，不再赘述。 日历正在生成时，用一个loading按钮的动态变化展示。 板块2：生成星座日历图片 新建一个容器，里面包含：一个文本组件、一个列表组件。 板块3：查看星座生成记录 新建一个容器，里面包含：一个按钮组件、一个列表组件。 点击按钮，调用读取生成历史的工作流。 列表绑定生成历史工作流的输出结果。 板块4：查看示例 新建一个容器，里面包含一个文本组件、4个图片组件。配置如下： 最后将应用发布到商店，大功告成！ PC应用地址：https://www.coze.cn/store/project/7460351997796122659?bid=6f2ptrss83g0j&entity id=1 能看到这里，说明你离做出来就差一步行动了，期待在群里看到你的成果！ 👉 我是kkk五津：C端新闻、视频产品经理，AI春晚共创者，我在小红书上会分享一些AI创作【简单易懂聊AI的张果果】https://www.xiaohongshu.com/user/profile/5aaf86084eacab3992de2429 我是kkk五津：C端新闻、视频产品经理，AI春晚共创者，我在小红书上会分享一些AI创作【简单易懂聊AI的张果果】https://www.xiaohongshu.com/user/profile/5aaf86084eacab3992de2429 大家好，我是kkk五津，最近看到了waytoagi社区制作的精美日历，我有幸也抽奖抽到了一份，非常非常非常好看 制作过程详见：https://mp.weixin.qq.com/s/ITjjNJFRNSpLhK6kdxNZEw 这激发了我的想法，我想能否根据用户的个人喜好来定制一个日历呢？有扣子智能体助力，肯定可以实现。于是有了《小喵星座日历》。 《小喵星座日历》在电脑端使用，它可以根据用户的星座、性别来生成当天的日历或特定日期的日历，今天，我来拆解整个制作过程。 PC应用地址：https://www.coze.cn/store/project/7460351997796122659?bid=6f2ptrss83g0j&entity id=1 PC应用地址：https://www.coze.cn/store/project/7460351997796122659?bid=6f2ptrss83g0j&entity id=1 《小喵星座日历》只有一个页面（首页），有4个板块。功能如下： 1. 左上角第1个板块是用户输入自己的星座、性别，点击生成，即可在右侧生成一个今天的日历。 2. 如果用户想生成特定日期的日历，可以输入具体的日期，点击生成，即可在右侧生成特定日期的日历，数量最多10天。 3. 当用户想查看已经生成的记录时，点击右侧的“点击查看生成记录”就可以看到历史生成的日历图。 4. 在左下方还有一个版块为示例图，让没有试过的人提前看到效果，提高点击欲。 下面我将拆解这个制作过程，基本上不涉及代码，非常适合小白入门学习工作流和应用。 涉及知识点： 《小喵星座日历》为PC应用（后续将制作小程序版本），涉及到3块工作，具体如下。 下面将依次展开介绍，分成4大部分： 一、创建《小喵星座日历》PC应用 二、创建"日历生成"工作流 三、创建"用户生成历史"工作流 四、PC用户界面排版 一、创建《小喵星座日历》PC应用 二、创建"日历生成"工作流 三、创建"用户生成历史"工作流 四、PC用户界面排版 一、创建《小喵星座日历》PC应用 首先进入扣子——工作空间——项目开发——创建——选择创建应用——创建一个空白应用。 之后输入应用信息。强调：图标决定了用户对产品的第一印象，很重要，扣子自动生成的效果不好，我是在即梦中生成的。 图标提示词：宫崎骏风格，头像，简单线条，空镜，在户外，蓝天白云，草地，画面主体是只橘猫在看日历，猫咪很萌 图标提示词：宫崎骏风格，头像，简单线条，空镜，在户外，蓝天白云，草地，画面主体是只橘猫在看日历，猫咪很萌 输入完应用信息后，进入业务逻辑编排页面。 看起来复杂，其实不难，后面我会逐个介绍这2个工作流。 二、创建"日历生成"工作流 总体工作流是这样的： 对应的流程如下，看懂了这个图之后，理解后面的具体节点就不难了： 1、开始：输入3个字段 ①日期：今天or具体日期 ②星座 ③性别 2、判断输入是今天还是具体日期 3、获取今天的日期 如果是今天，获取今天的日期和时间（插件只能这么输出），如2024 01 18 19:32:56 （注意这个工作流中使用的插件，我都进行了重命名，方便理解，你在查找插件时需要搜关键词，找到与截图中的插件logo一样的） 用大模型将时间去掉，只保留日期，如2024 01 18。 4、格式化日期 前面几步获取了用户期望的日期，下一步就是把日期转换成标准的格式，方便后续进入循环使用，将所有字段转换成数组。 将5个变量（年、月、日、星座、性别）进行格式化，以数组输出，进入循环后，一组完成之后再跑下一组 5、设置循环类型、数组、输出 循环类型选择“使用数组循环”，循环数组选择上一步格式化的数组 6、将数组中的5个变量打散成单独的5个变量 这样做是避免后面节点引用时只能引用第一个数组 7、调用星座插件获取星座信息，再处理 7 1、调用插件获取星座总结信息 星座总结信息是输出变量中的“summary” 7 2、使用大模型根据星座总结生成图片的提示词 7 3、使用提示词优化插件优化提示词 7 4、生成一张图片用于日历上方的主视图 7 5、将星座总结前面加上“今日星座运势：”文案 举例： 今日星座运势：运势会处于低迷的状态，越是挣扎陷入的泥潭就更难以挣脱。不要因为怕麻烦而把责任推卸给别人，这不仅会导致你的人际陷入紧张局面，而且还会让人质疑你的能力。生活方面为了避免情况变得更糟糕，你需要积极应对问题。 举例： 今日星座运势：运势会处于低迷的状态，越是挣扎陷入的泥潭就更难以挣脱。不要因为怕麻烦而把责任推卸给别人，这不仅会导致你的人际陷入紧张局面，而且还会让人质疑你的能力。生活方面为了避免情况变得更糟糕，你需要积极应对问题。 8、获取星期、节日、农历信息，并处理 8 1、将年、月、日转换成年 月 日的形式，方便后面的插件引用 由于后面有几个插件要求日期输出格式是“年 月 日”的形式，所以先用一个文本处理节点将日期格式进行转换。 8 2、查询日期对应的是星期几 使用一个插件查询目前是星期几 8 3、将月+日+星期进行拼接 如01月18日 星期二 8 4、插件查询日期是哪个节日 如春节 8 5、有时节日会输Day off，用大模型把这个清除 8 6、插件查询日期对应的农历日期 如插件输出2025年十月初十 8 7、将农历输出中的年份去掉，只保留月日 如十月初十 9、将年份与星座文案进行拼接 如2025年 白羊座日历 10、获取节气、宜、忌，并处理 10 1、调用插件获取节气、宜、忌信息 万年历输出的结果中，节气对应“scolar terms”，宜对应“yi”，忌对应“ji” 10 2、将宜、忌文案进行拼接 进行这个处理是希望将这2个字段在画板中同时展示。因为宜、忌的文案有长有短，如果分开分别控制展示行数，需要将两个字段之间留出足够的距离，否则会压在一起。这样会导致两行之间的空隙很大，效果不佳。 所以干脆放到一个字段里来展示。 11、在画板上将8个信息进行排版 将前面获得的8个字段输入到画板，在画板内排版。这里操作比较耗时，需要有耐心。 12、结束 将画板的输出放到循环节点的输出中，最终再将输出到结束节点，大功告成。 页面排版涉及到的配置比较多，与coze的卡片类似，功能更强大。大家多多使用练习，掌握页面搭建的基本技能之后，搭建起来就顺手了。 一边做一边预览效果，预览按钮在这里： 下面依次介绍用户界面的几大版块如何排版： 整体背景+产品名 整体背景： 整体背景图可以让产品给人留下一个深刻的独一无二的印象，我采用了与主题相匹配的图，用即梦生成的，然后用PS在上面加了一个白色半透明蒙层，你也可以在coze上实现，背景图上面加一个白图加一定透明度。 即梦提示词：背景图，简单线条，没有主体，空镜，风景图，宫崎骏风格，在户外，右下角有2只猫咪，对着镜头笑，卖萌 即梦提示词：背景图，简单线条，没有主体，空镜，风景图，宫崎骏风格，在户外，右下角有2只猫咪，对着镜头笑，卖萌 产品名： 产品名字展示我用PS的“娃娃体”字体，鱼形，不知道你有没有发现这个小设计？ 当然，你也可以用美图秀秀的文字做你喜欢的样式，再用抠图工具把非文字的地方扣掉，就留下纯文字的图片了。 或者直接用coze里的文本组件来放产品名，但是现在不能选择字体。 板块1：输入个人信息和生成图片 这个板块是一个表单组件。其中包含2个选项+1个按钮+分割图+1个输入框+1个按钮。我挑重点来截图。 选项配置：