Cursor与Coze结合开发电影推荐系统:一次高效的技术实践
1 项目背景
有个想法,和朋友打算一起看电影,但是不知道看什么(吃饭也是),于是在豆瓣高分电影榜单中选择出来一些感兴趣的电影,随机挑选一部“天意之选”。为此,我尝试结合Cursor(智能代码生成工具)和Coze(低代码流程设计平台),开发了一个轻量级电影推荐系统。
2 技术选型与架构设计
2.1 工具特性
- Coze:通过可视化流程图快速构建后端逻辑,集成豆瓣电影插件,支持一键发布为API。
- Cursor:基于AI辅助生成前后端代码,提升开发效率。
2.2 系统架构
- 前端:用户交互界面,发起电影查询请求。
- 后端:由Coze设计的流程图实现,调用豆瓣电影插件获取数据并返回。并使用Express开发了一款简易后端
- 安全隔离:将含Token的敏感逻辑置于后端,避免前端直接暴露隐私信息。
目前的效果是下图这样的。是一个前端界面,接入后端API查询选中电影的信息。
3 Coze绘制流程
进入官网。
创建 --> 创建应用 --> 空白应用 --> 填入名称和描述
创建完成后,系统将自动进入流程图绘制界面。
新建工作流 --> 填入基本信息
完成上述步骤后,系统将生成一个包含“开始”和“结束”两个默认节点的流程。
你可以点击任意节点查看其包含的参数。这些参数支持自定义添加或删除,请根据实际需求进行调整。在本测试场景中,建议为每个节点仅配置一个参数即可。
通过插件市场搜索“豆瓣”,选择适合的插件进行添加。随后,将“开始”节点、“豆瓣电影”节点、“结束”节点进行连接,以完成流程的搭建。
在豆瓣电影信息节点的参数设置中,需要指定一个变量名。该节点的输出是一个对象(object),其内部包含一个数组。我们只需关注并提取这个数组,因为其中存储了所需的电影信息数据。
我已将开始节点的参数名称更改为"name"。在豆瓣电影节点的输入配置中,选择开始节点的"name"作为输入参数。这意味着外部传入的名称会通过开始节点传递给豆瓣电影节点,作为其查询的依据。
结束节点,参数类型改为object数组,将豆瓣电影节点的输出赋给结束节点的参数,这个参数将被作为查询结果传出。
试运行。测试没有问题。
发布。选择API,如果没有创建过个人令牌,需要先创建个人令牌,并保存到一个记事本中,后续要使用。
在流程发布之后,官方将对其进行一次快速审核。审核通过后,便可进入API测试阶段。在测试过程中,选择你所创建的流程,系统将展示两个ID,请务必妥善记录这两个ID,以便后续使用。
在Coze主页,按顺序填入令牌、两个id,输入参数,点击运行即可。出现数据则表示API正式可以使用。
4 Cursor工具
为了确保代码的稳定性和可维护性,建议采用Git或SVN等版本控制系统进行管理。这样可以在代码被意外修改导致功能失效时,快速回滚到之前的可行版本。
4.1 前端代码生成
在开发过程中,我先进行了前端的生成。需要注意的是,前端和后端的生成顺序并无严格规定,你也可以选择先完成后端的构建。
本次开发中,我采用了Claude-3.7-sonnet-thinking
模型。Claude系列在代码生成方面表现出色,而这一新模型更是其中的佼佼者。尽管我对Claude各模型间的具体差异尚不完全了解,但鼓励有兴趣的开发者进行探索和尝试。在模式选择上,建议在项目初期环境尚未搭建时使用Agent模式,它能自动配置所需环境。待项目趋于稳定后,可切换至Edit模式,以降低因修改而导致系统崩溃的风险。
以下是具体的提示词策略:(由于我先进行前端开发,后端尚未就绪,因此前端的提示词分为两个阶段,第4和第5部分将在后端完成后输入)
我想创建一个前端项目,名字叫做“电影转盘”。基本功能包括:
1.允许用户输入很多电影名称
2.根据用户输入的电影名称生成一个转盘
3.点击转盘转动按钮,转盘转动,稍后停止,指向转盘中的一个电影名称
请完善想法,生成代码,要求可以在浏览器上打开,界面要求优美,符合现代审美。相关功能内容同步到 @README.md
4.接入后端api,将指向的电影名称通过api传入后端,接收到返回的信息,数据示例如,其中picurl是图片链接,可以直接访问
5.将电影信息显示在空白的位置
在本例中,我并未特别指定前端开发所使用的编程语言或框架。Cursor工具自动选择了React来搭建环境并生成相应的代码。若你对前端技术栈有特定需求,例如希望采用Vue.js,建议在项目初期明确说明,以便工具能够按照您的要求进行配置和代码生成。
教一个技巧,现在文件夹和文件都可以拖动了。(我刚知道)
4.2 后端程序
鉴于后端系统的复杂性,强烈建议编写详细的文档以便于理解和维护。以下是我编写的后端文档示例,请注意,在使用时,你需要将文档中的Token和两个ID替换为你自己的实际内容。
-------------------后端文章开始-------------------
请求api:
curl -X POST 'https://api.coze.cn/v1/workflow/run' \
-H "Authorization: Bearer 【Token】" \
-H "Content-Type: application/json" \
-d '{
"parameters": {
"name": "千与千寻"
},
"workflow_id": "【workflow_id】",
"app_id": "【app_id】"
}'
api返回的结果,以查询“千与千寻”为例,返回结果如下。
{"code":0,"cost":"0","data":"{\"output\":[{\"desc\":\"千寻和爸爸妈妈一同驱车前往新家,在郊外的小路上不慎进入了神秘的隧道——他们去到了另外一个诡异世界—一个中世纪的小镇。远处飘来食物的香味,爸爸妈妈大快朵颐,孰...\",\"name\":\"千与千寻\",\"picurl\":\"https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2557573348.jpg\",\"rate\":\"9.4\",\"star\":4.7,\"subtxt\":\"原名:千と千尋の神隠し / 宫崎骏 / 柊瑠美 / 2001\"},{\"desc\":null,\"name\":\"舞台剧「千与千寻」飞往伦敦\",\"picurl\":\"https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2911819940.jpg\",\"rate\":null,\"star\":4.7,\"subtxt\":\"原名:舞台 『千と千尋の神隠し』 ロンドンへ飛ぶ / 上白石萌音 / 2024\"},{\"desc\":\"日本电视台(日本テレビ)于2001年吉卜力新作「千と千尋の神隠し」上映前夕制作播出的宣传纪录片,由千寻及父亲的配音演员柊瑠美、内藤刚志作客主持。\\n目前流传网络最多的...\",\"name\":\"千与千寻诞生秘话\",\"picurl\":\"https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2561224158.jpg\",\"rate\":\"8.7\",\"star\":4.35,\"subtxt\":\"原名:「千と千尋の神隠し」誕生秘話 / 宫崎骏 / 2001\"},{\"desc\":\"宮﨑 駿監督の名作『千と千尋の神隠し』史上初の舞台化。話題沸騰のこの舞台で、主人公・千尋を演じる橋本環奈さんと上白石萌音さんに密着した45分スペシャル。\\nよそ...\",\"name\":\"彼此的距离 「千与千寻」特别篇\",\"picurl\":\"https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2872659909.jpg\",\"rate\":\"8.7\",\"star\":4.35,\"subtxt\":\"原名:ふたりのディスタンス『千と千尋の神隠し』スペシャル / 桥本环奈 / 2022\"},{\"desc\":null,\"name\":\"彼此的距离 「另一个千与千寻~舞台化200天的记录」\",\"picurl\":\"https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2884802793.jpg\",\"rate\":null,\"star\":4.35,\"subtxt\":\"原名:ふたりのディスタンス 「もうひとつの千と千尋の神隠し ~舞台化 200日の記録~」 / 上白石萌音 / 2022\"},{\"desc\":\"小说《千屿千寻》改编\",\"name\":\"向海\",\"picurl\":\"https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2913405619.jpg\",\"rate\":null,\"star\":4.35,\"subtxt\":\"原名:向海 / / 2025\"}]}","debug_url":"https://www.coze.cn/work_flow?execute_id=7482326781048930315&space_id=7481659338357227532&workflow_id=7481989897114435636&execute_mode=2","msg":"Success","token":0}
其中output是我们需要的数据,是一个数组,但是只有第一组与我们想查寻的内容相关,其余信息可以丢弃。有用的信息:
{
"desc": "千寻和爸爸妈妈一同驱车前往新家,在郊外的小路上不慎进入了神秘的隧道——他们去到了另外一个诡异世界—一个中世纪的小镇。远处飘来食物的香味,爸爸妈妈大快朵颐,孰...",
"name": "千与千寻",
"picurl": "https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2557573348.jpg",
"rate": "9.4",
"star": 4.7,
"subtxt": "原名:千と千尋の神隠し / 宫崎骏 / 柊瑠美 / 2001"
}
-------------------后端文章结束-------------------
创建Server目录,在目录下创建.env
文件,用来放自己的环境信息,比如Token
# Coze API配置
COZE_TOKEN=【Token】
以下是具体的提示词策略:
现在让我们来开发后端部分,首先让我们接入电影信息api:
1.在Server/目录下初始化express的后端,并且引入.env中的环境变量COZE_TOKEN
2.参考 后端文档.md 中的请求api,node.js后端请求coze的后端
3.提供测试程序
测试通过后就可以连接前端和后端,形成一个完整的程序。
5关键问题与解决方案
5.1 多工具协作调试
- 问题:Cursor生成的代码中部分逻辑难以一步到位,需要频繁提交问题,一点一点解决。
- 方案:若某个问题Cursor始终无法解决,可结合DeepSeek分析代码逻辑,提供优化建议后再由Cursor迭代修正,实现“工具接力”。
比如这个问题,Cursor改了几次改不成功,尝试给DeepSeek思考了6分钟以上……
- 协作启示:单一工具可能存在局限,但结合AI辅助(如DeepSeek)能有效突破瓶颈,印证了“不把鸡蛋放在一个篮子里”的实践智慧。
未来计划扩展功能,如增加随机推荐、多平台数据聚合等,进一步提升系统的实用性与趣味性。
如果觉得文章对你有帮助的话,请点个赞吧,你的支持就是对我的最大鼓励!