30 分钟,无代码,我用 Cursor 开发了一款AI 应用小程序

现在 Cursor 系列教程,在知识星球「AIGC·掘金成长研习社」已经更新到了第七篇了,这篇教程重点讲述如何使用 Cursor 来调用 AI 的后端 API 接口,实现一款 AI 应用的微信小程序。

既然是 AI 小程序,这里我们就用到了大模型的东西,所以,这里我们使用 Coze 平台提供的智能体和工作流的接口,也就是我们在 Coze 平台上搭建好了 AI 智能体或者 AI 工作流,可以配置 API ,来调用我们制作好的 AI 智能体。

当然了,这篇文章还是以小白的身份来讲述,虽然我是程序员,但是,全程我也没有写一行代码,尽量让没有学过编程的朋友也能看懂。

我们这篇教程需要用到搭建 Coze 智能体的知识,我的星球里也有教程,没有看过 Coze 课程的朋友,先去了解一下如何搭建 Coze 智能体的课程,有了这个基础知识,接下来,才能更容易看懂。

528941bf29784e351604d8b0f7ab1406.png

好,接下来就回到正文了。

1、搭建春联生成器的智能体

首先,我们先在 Coze 平台上搭建一个春联生成器的智能体。咱这个智能体的任务就是根据人名来制作春节对联,不是马上春节了吗?需要写对联,蹭个热点,大家可以学着制作一个。

Coze 平台地址:https://www.coze.cn/

就是让智能体根据人名来创作藏头对联,把名字藏在对联之中。

我的要求是这样的:

请以人的名字,比如:赵本山,做一幅春联,并给出横批。要求,如果名字是两个字,这两个字藏在上下对联之中就可以,如果名字是三个字,请把姓藏在横批之中,如果姓不好组词的话,为了让横批更生动精彩,可以使用同音词替代,名字在对联上。

然后我就在 Coze 平台制作了一个春联生成器的智能体。

d330a76e71648a33d2408681d00d3d4d.png

点击「发布」按钮之后,需要配置 AI 。

2、配置 API 鉴权令牌

点击发布之后,会跳转到如下这个界面:

4cfe49586780785b704a35b87dfa69e7.png

在这个界面,一定要勾选「API」这个选项,然后点击右边的「配置」。

3a85c3214cfc8ef7f08ec2e4024ac357.png

在配置信息页面,需要创建令牌,令牌的作用就是访问授权,只有拿到令牌密钥的人,才能调用接口。

这里需要填写名称、访问令牌过期时间、权限,权限,你能多选就多选,用不到无所谓,但是,一定要勾选对话和会话管理权限,因为调用接口必须要有这个权限。

点击确定按钮之后,会给你一个密钥,这个密钥只出现一次,一定要复制出来,保存好。记住:只出现一次,一定要先复制,再关闭对话框。

04373dfce63156fd97be5984f604bcfe.png

到这里,接口调用的鉴权令牌密钥也有了,就等着小程序创建完成,我们调用接口了。

3、创建微信小程序目录

创建微信小程序目录,需要使用微信小程序开发工具,下载小程序开发工具之后,安装,打开,创建一个小程序文件目录就行了。

e327cd4aa3b42a266ed56bce98fdc7b5.png

具体操作步骤,在星球里看上一篇的教程,有详细步骤。

4、Cursor 零代码编程

接下来,我们就要打开 Cursor 开发工具,然后开始让 AI 帮我们编写小程序了。

我们的这个界面很简单,一个名字输入框,一个按钮,一个展示区。

输入要制作春联的名字,点击生成春联的按钮,调用 AI 智能体的接口,让 AI 帮我们生成春联,然后在展示区展示 AI 智能体帮我们生成的春联结果。

这个逻辑就是这么一个线性的简单逻辑。

首先,我们需要写一个提示词,让 Cursor 帮我们先画出小程序界面来。

根据我的需求,提示词我是这么写的:

1e363005649adde534692c7d6b6babeb.png

当然了,很多小白可能会说,这么复杂的提示词,我不会写怎么办?其实,你只要用自然语言描述清楚,Cursor 就可以帮你编程,写不了这么复杂, 可能就需要多轮调试,慢慢实现需求。

然后,使用快捷键 command + i ,Windows 电脑使用 Ctrl + i 的快捷键,调出 Composer ,将提示词发给它,就帮我们自动编程了。

7415c7fbde62e9b72000b21202ef62ad.png

在这个 Composer 输入框里,我们用自然语言给它发交互指令就行了。

比如,小程序界面画完之后,一开始界面很简单,太丑了,连颜色都没有。我就发送指令:

给整个页面加个背景色,根据不同的功能区,配上合适的背景色

07331af79b6482378c68159383e8f9e7.png

然后,经过几轮的交流,最终的界面就是:

a16629cbc17c752ea3f93fe3308965e4.png

好了,到这里,AI 智能体创建完毕了,访问令牌也有了,小程序界面也画完了,就差最后一步了,就是在小程序界面去调用 AI 智能体的接口,来获取春联结果。

5、调用 AI 智能体接口

首先,我们打开 Coze 平台的 API 后台。

地址:https://www.coze.cn/open/playground

然后,找到智能体菜单,选择对话接口,这里有详细的介绍文档,告诉你接口是什么,参数是什么?还提供了模拟请求的运行环境。

比如:

183aff50d02b56acdac0973fad06f972.png

我们根据文档说明来让 Cursor 来调用接口,我们把模拟请求的链接和参数发给 Cursor ,它就会自动帮我们写后台的 AI 接口调用的代码。

如下:

f1bc6ab701b3fa8765f93c58c71a2ab7.png

我们把 Coze 平台上的接口示例发给它,Cursor 就能写出调用接口的代码请求。

到这里,基本上就完成了。

最后的结果展示如下:

bb2599cceecc3ddbaecd2dc8ee2da1bf.gif

最后,大家就在微信小程序开发工具当中,上传代码,提交发布就行了。

这篇文章讲的就是一个大概的流程,如果大家想要看具体详细的操作步骤,保姆级的教程的话,欢迎大家加入我的知识星球「AIGC・掘金成长研习社」,里面的教程和操作步骤写的非常详细,而且目前里面已经更新了 7 篇关于 AI 编程的教程了。

fddabf5b77a56b0881174bcdda2e0a8e.png

元旦期间,我的星球在搞活动,送大家一张立减 39 元的优惠券,加入我的星球只需要 60 元,支持 3 天无理由退款,大家可以先看看,不满意自己在星球退出星球,就退款。

禅定时刻

Thinking

特别说明:目前 39 元的优惠券仅剩下 11 个名额了,先到先得哈。最近我会在星球内更新一些 AI 编程的教程,目标是不会编程的小白用户看完之后,也可以利用 AI 编程助手,零代码开发一些小软件和小工具。

大家可以先扫码看看。

91651a2fd122dbe1df5ae7e654b5ebe6.jpeg

长按扫码加入「AIGC・掘金成长研习社」,一起掘金,一起暴富,一起用 AI 赋能

3c0651d7d91e7d755ce6b3c4d1f612fa.png

点击下方公众号卡片,关注我

在公众号对话框,回复关键字 “1024”

有惊喜

2520a8feabc01c8bf58fa414fd9d7292.png

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值