首页 > 分享 > Cursor实战回顾:花慧小程序开发

Cursor实战回顾:花慧小程序开发

前言

Cursor作为“AI程序员”,很多人都有所尝试或有所了解,但是普遍不够深入,这也导致很多的人对Cursor的态度比较消极。

今天这篇分享,主要回顾一下使用Cursor开发一款小程序的情况,希望可以为大家展示更多Cursor的能力,也为大家提供更多应用AI的灵感。

项目概述

背景

个人喜好养花,看着生机盎然的植物,总会让繁忙的心平静下来。但是个人养花水平实在有限,尤其是容易忘记浇水,历史战绩包括并不限于养死了“绿萝”、“多肉”等多种“怎么养怎么活”的绿植。

为了更好的管理自己的绿植,也为了应用学到的大模型能力,我自己开发了一款AI助力养花的小程序“花慧”,目前处于小范围内测阶段,还不完善,大家轻喷哈。

简介

花慧是一款专为花卉爱好者研发的AI小程序,应用将大模型技术融入花卉养护全过程,简化日常养护管理,提供个性化养护指导,同时,通过AI技术为花卉提供更多有意思的用法。

效果展示

首页

添加花卉

花卉详情

AI问答

日常检查

过程与思考

开发概况

借助Cursor,初版开发合计3.5人天。

相同功能呢,如果个人全人工开发,估计6-7人天。

当然,这里都是事后主观总结的,非精准数字,仅供大家参考。

技术栈

UI:uniapp+uview2.0 后端:uniCloud Serverless 大模型API:智谱的对话模型GLM-4-FLASH、图片识别模型GLM-4V-PLUS,后续的功能用到了Gitee部署的Kolors和字节的Coze API。

过程记录

周五晚上:主要想直接通过Cursor搭建uniapp+uview2.0项目脚手架,并生成初版,尝试多次,但是生成结果都不是很满意。

周六上午:再次尝试一步生成环境+初版,依然不满意。主要是uniapp命令行创建项目后引入插件及相关版本冲突的问题,Cursor不太好解决,遂放弃。最终采用HbuilderX建立项目,配置各类插件,然后导入到Cursor。

周六下午和晚上:基于上午配置的工程,使用Cursor按照上述提示词生成各个模块及初步功能,包括多Tab、页面风格、花卉管理(包括拍照识别建档)、浇水、施肥等待办管理、知识库、个人中心。

周日上午:既然都是基于AI的应用了,直接把知识库更改为AI问答,采用ChatGPT对话方式提供服务,代码全部由Cursor引入GLM文档后自动生成。

周日下午:通过Cursor实现“AI用法”中的拍照识花、花卉日常状态检查功能。

周一:Cursor生成的界面和我指定的参考图已经比较接近了,但是整体不是很好看,找了个朋友花费半天帮我把界面给优化了下。

至此小程序第一版已经实现了,功能如下:

登录 首页 浇水、施肥提醒及快捷操作 关注花卉 花园 拍照识别建档 AI 拍照识花 花卉日常检查 AI问答 我的

初版提示词

## 目标 基于uniapp,搭建一个绿植管理小程序。 ## 功能 多tab模式,以下是五个tab,中间tab需要与其他tab有明显区分。 ### 首页 主要展示提醒、关注绿植。 - 提醒:当前待办事项,比如浇水、施肥,这些事项会根据每个绿植的情况自动计算,然后发送提醒。 - 关注绿植:花园中重要的绿植可以在首页展示,方便关注。 ### 花园 所有绿植列表,展示绿植缩略图、名称、当前花龄。 该页面需要有新增按钮。 点击每个绿植可以进入详情页面,详情页面主要包括: - 基本信息:绿植缩略图、绿植名称、种植时间、 - 养殖信息:种植建议、浇水间隔、施肥间隔 - 养殖记录:可以拍照记录养殖过程,每次拍照可以记录图片、日期、心得 ### AI 页面主要是拍照按钮,拍照后识别,识别结果包括绿植信息、养殖注意事项,同时还包括当前绿植状态、病情,已经后续养殖建议。 ### 知识库 整体界面包括两部分。上部是一个分类的知识库,占据大部分界面,会有很多绿植相关文章可以查看。底部是一个对话框,录入信息发送后,会进入对话界面,就是一个大模型对话效果,可以直接询问绿植相关知识。 ### 个人中心 主要展示个人头像,包括提醒间隔、使用手册、隐私政策等。 ## 设计要求 整体界面要求绿色为主色调,给人生机盎然的感觉,设计风格要求尽量高端大气。 其中花园界面尽可能好看。 ## 技术要求 采用uniapp实现小程序,UI使用uview2.0,接口在api中进行模拟返回。 图标采用uniapp内置图标,不用引入新的图标库。 图片可以使用upsplash 图片。

重点展示

挑选开发过程中比较典型的场景进行截图展示。

初始功能一键生成

基于HBuilderX创建的工程脚手架,使用“过程记录-初版提示词”让Cursor直接生成设计好的多个功能界面。

页面调整

预览后页面个别地方不满意,直接告诉Cursor改动意见。

页面实现

“初始功能一键生成”Cursor已经直接生成很多页面,此处以花卉录入(即:拍照识别建档页面)展示。

业务逻辑实现

实现绿植的管理接口,此处使用unicloud实现。

前后端对接

实现绿植模块的前后端对接。

AI使用心得

2-8原则

大模型目前肯定无法全部完成开发工作,80%其实也达不到,这次这个项目,个人估计也就50%。

2-8原则更多的是说明一个思路:目前AI助力开发的方式应该是AI与程序员协同,AI做AI擅长的,我们做我们擅长的。

这其实也引出了目前AI助力开发的一个重要学习方向,就是选定一个产品、一个模型,深入使用,比如我选择的“Cursor+Claude3.5”,只有深入了解后,我们才能准确的划分哪些内容交给AI,哪些内容留给自己。

提示词工程

这个已经是老生常谈了,只有清晰明了的提示词,才能让大模型快速响应正确结果,才能做到提升效率,反之,可能来回问答的时间都超过自己实现的时间了。

基础环境搭建不适合

我们开发过程可能会遇到很多环境搭建、插件引入的场景,这些场景如果存在应用不广、文档不全、或者步骤比较繁琐的情况,更建议大家人工搭建,可能性价比更高。

人为限定上下文

鉴于于目前大模型的上下文限制,目前使用AI时,如果遇到比较大的功能模块,建议针对分解后的子模块分别使用AI进行实现,这样准确度会比较高。

总结

这次小程序初版开发的过程,如果抛开Cursor,我一个人估计得6-7天才能完成,但实际只花费了不到一半的时间,这应该算得上是生产力级别的提升了,这也使我下定决心将新项目的主力开发工具更换为Cursor了。

个人感悟

Cursor等“AI程序员”不可能一次性就达到“贾维斯”的地步,但是,AI对开发工作的提升,还是很明显的,并且,它们一直在进步。

大模型的发展不会因为我们不接受这种方式就停止,也许,我们应该调整一下自身开发的流程和范式,与AI协同,让AI更加紧密的提升我们的开发效率。

相关知识

Cursor实战回顾:花慧小程序开发
微信小程序电商项目开发实战漫谈
Cursor零基础小白教程系列「技巧」
uniapp+vue3+云开发全栈开发同城配送鲜花小程序任意商城基础入门到实战
半技术小白,用Cursor开发iOS应用纯经验分享
【微信小程序开发实战项目】——花店微信小程序实战项目(4)
uniapp+vue3+云开发全栈开发同城配送鲜花小程序任意商城,基础入门到实战,毕设就业【共152课时】
开发小程序
微信小程序鲜花销售小程序+后台管理系统
鲜花预订小程序开发,花店小程序开发功能,微信订花小程序

网址: Cursor实战回顾:花慧小程序开发 https://m.huajiangbk.com/newsview2047693.html

所属分类:花卉
上一篇: 芦荟能晒太阳吗?几天浇一次水?
下一篇: 不同栽植季节与苗龄对速生柳栽植成