掘金 人工智能 06月25日 00:12
AI编程实战:使用Cursor,65分钟轻松打造番茄时钟应用
index_new5.html
../../../zaker_core/zaker_tpl_static/wap/tpl_guoji1.html

 

本文分享了如何利用AI工具Cursor,快速开发一个基于Uniapp和uView2.0的番茄钟移动应用。通过明确需求、编写提示词、应用生成、微调和调试安装等步骤,详细介绍了从项目构建到功能实现的完整流程。文章强调了专注力在信息时代的重要性,并展示了如何借助AI提高开发效率,实现个性化时间管理工具。

💡 项目目标明确: 使用Uniapp + uView2.0技术栈,开发一款具有工作、休息倒计时和循环计时功能的番茄钟应用,界面简洁美观,强调极简主义设计。

⚙️ 核心功能实现: 应用包含25分钟工作倒计时、5分钟休息倒计时,支持循环计时、开始/暂停/重置控制和完成提醒功能,并设有任务管理界面,方便用户管理任务。

🎨 界面设计理念: 采用清新柔和的渐变配色和主色系,通过恰当的留白、圆角和微交互设计,营造沉浸式体验,使用户视线聚焦于核心功能。

💻 技术选型与实现: 项目采用Vue2、uView内置图标和本地存储数据的方式,禁止使用Vue3特性。利用AI工具Cursor生成代码、修复错误,实现应用的核心功能。

⏱️ 开发流程与时间: 整个开发流程包括需求分析、提示词编写、应用生成、微调和调试安装,总耗时约65分钟,展示了AI辅助编程的高效性。

前言

信息时代,专注力变得越来越珍贵。番茄时钟作为一种简单高效的时间管理工具,被越来越多的人所熟知。

今天,就带大家借助 AI 工具 Cursor,快速实现一个独属于你的番茄时钟应用。

项目介绍

使用 uniapp + uview2.0 实现一个番茄时钟移动应用的开发,包括以下功能:

准备工作

安装开发工具

主要包括:

配置开发环境

通过 HBuilderX 建立新项目,并引入 uView2。

具体步骤可以参考以前分享的内容,这里不再重复。

AI编程实战:Cursor+Claude4,一口气生成uniapp小程序 - 掘金

应用生成

确认以上内容都已经准备好后,我们直接进入核心环节:应用生成。

生成环境依然采用的:Cursor + Claude-4-Sonnet,Agent 模式。

使用 Cursor 打开新建的项目,在 AI 对话框中输入提示词,开始生成。

提示词

请帮我实现一个基于uniapp+uview2.0的番茄时钟小程序应用。## 业务主要维护自己每天的任务,包括工作、学习、生活方面的,支持设置番茄时钟倒计时效果,方便我专注当前任务。打开应用后的主界面是番茄时钟倒计时,倒计时的时间样式需要专门美化,科技感强,包括以下功能:- 25分钟工作倒计时- 5分钟短休息倒计时- 循环计时功能- 开始/暂停/重置控制- 完成提醒功能主界面右上角有个列表图标,点击后打开任务管理界面,列表主要展示任务标题、优先级、类型,点击任一任务打开任务详情页面。任务详情页面从上往下分别是任务标题、任务描述、优先级、任务分类、番茄数量。应用不需要底部tab栏和导航栏,直接全屏展示。## 界面极简主义美学与功能的完美平衡;清新柔和的渐变配色与主色系浑然一体,主色系番茄红色;恰到好处的留白设计;轻盈通透的沉浸式体验;结构化布局清晰呈现信息层级;用户视线能自然聚焦核心功能;精心打磨的圆角;细腻的微交互;舒适的视觉比例;## 技术- 暂时采用小程序本地存储数据的方式,不采用网络接口。- 所有图标采用uView内置图标,请仔细核对,不要使用不存在的图标。- 图片使用upsplash api获取合适图片。- 整个项目采用vue2,禁止使用vue3的特性。

虽然全部提示词看起来比较多,但分析一下就会发现也没有太过高深。

最开头通过简洁的文字,点名使用的技术栈(uniapp+uview2.0)、要达成的目标(番茄时钟应用)。

没有太复杂的技巧,只要讲清楚我们要做什么即可。

并且,根据个人经验,这部分不建议太过冗余,容易增加 AI 识别核心目标的难度。

由于业务部分内容会比较多,建议采用结构化的方式进行说明。

先总的介绍下要完成什么功能,然后分别描述主界面、主界面明细功能、任务列表、任务详情等业务需求,并带有各功能之间的关系说明。

可以将自己的界面设计要求简单描述后发给 AI,由 AI 给出参考的提示词后,再人工进行调整。

也可以直接以文中提示词为基础进行个性化修改。

这块就是对技术方面的要求,如果个人技术栈比较固定,完全可以直接在多个项目中复制即可。

结果

1、Cursor 会对提示词进行分析,并整理成条理性的要求。

2、分析整个项目结构,尽量贴合工程需要。

3、按照第一步的分析生成代码。

4、生成总结。

整个过程思路很清晰,包括最终的文档,质量还是可以的。

生成后,有一个小的语法错误,为了文章整体性,放到“微调”章节说明。

调试安装

为了更好的查看应用效果,这里直接通过 USB 将应用安装到手机进行调试。

    USB 连接电脑和手机打开手机的 USB 调试,需要提前打开“开发人员选项”HBuilderX 中“运行”-“运行到手机或模拟器”-“运行到 Android App 基座”。

效果展示

主界面

任务列表

任务详情

主界面出现了 bug,倒计时效果没有出来,我们接下来微调一下。

微调

针对不满意的地方,我们进行逐个修复,依然是基于 Cursor 进行。

Vue语法错误

这类比较明确的语法错误,截图交给 Cursor 就行,一般一次就能修复。

并且,Cursor 修复当前页面错误后,会自动帮你检查其他页面是否存在相似问题,并自动修复。

倒计时未正常显示

这个就比较严重了,最核心的功能没有实现。

依然是截图发给 Cursor。

AI 分析发现,应用生成时,确实已经生成了相关代码,但是组件的渲染有问题,AI 给换了种方式进行渲染,搞定。

优化效果

主界面(未启动)

主界面(启动)

任务列表

任务详情

注意事项

css预处理器

uniapp 环境配置时,css 预处理器容易碰到问题,大家如果碰到可以参考下。

从 HBuilderX 4.56 开始,vue2 项目将默认使用 dart-sass 预编译器。

本次分享依然采用了 vue2 + node-sass,可以在 manifest.json 根节点配置: "sassImplementationName": "node-sass"。

时间分析

对今天的实战案例花费的时间进行一个简单的总结。

以上各部分时间,供大家参考比对。

结语

今天,给大家分享了如何利用 Cursor 快速完成一个番茄时钟应用的开发全流程。这是 uniapp 应用开发的第二个实例,希望能给大家的AI辅助编程工作带来更多的启发和灵感。

如果有任何想法或问题,欢迎留言交流!

Fish AI Reader

Fish AI Reader

AI辅助创作,多种专业模板,深度分析,高质量内容生成。从观点提取到深度思考,FishAI为您提供全方位的创作支持。新版本引入自定义参数,让您的创作更加个性化和精准。

FishAI

FishAI

鱼阅,AI 时代的下一个智能信息助手,助你摆脱信息焦虑

联系邮箱 441953276@qq.com

相关标签

Uniapp 番茄钟 Cursor AI编程 移动应用开发
相关文章