好久不写文章了,我借助Cursor开发了一款App

前言

好长时间没有写文章, 因为公司开发用flutter, 自己也业余学习了一段时间, 做过很多个demo, 也在公司项目里面编写过关于flutter 的业务代码.

一次偶然我在y站上看见了一个 外国人 从0到1开发了一款app, 所用时间不过1周左右, 像前几个月, 一个不会开发的人, 用cursor 开发了一款 小猫补光灯的应用, 原文地址# 用Cursor1小时做的App，登上了AppStore排行榜Top20，我是怎么做到的？小猫补光灯 . 我看完之后 是非常感叹的.

我其实很久之前就用过cursor,但那时候还不是很智能, 大家那时候用的更多就是类似于 GitHub Copilot, 通义灵码, CodeGeex, Codeium 等工具来辅助编码, 但目前的 cursor 已经变得太强大了.

1. 从0到1 搭建项目架构
2. 编写项目开发规范
3. 智能定位问题并修复BUG
4. ...

可怕的是他可以连续超长文对话, 以及阅读 长代码等等. 总之,当我用完一段时间之后, 我发现越来越依赖了,(感觉有好有坏 哈哈哈), 有时候他给的代码,我正好拿过来学习一番也是很不错的学习方式.

下面,我将我的 前段时间做的app 放空心声中的 一个业务场景, 手把手带你使用 Cursor + 豆包 不写一行代码 来完成.

app 介绍

偶尔,刷抖音, 看到微信很久之前的漂流瓶这个功能.当代人的生活和工作压力都很大, 于是想到能够将自己的心声 发布出去, 能够让更多人感到共振, 互相鼓励, 这就是价值所在.

同时也扩展了一下传统基础的漂流瓶的玩法, 比如 时光瓶子, 你可以写给未来 3, 4, 5 年或者 未来 几个月的自己的一封信, 该信只有到达那一天 才可以打开. 当过了 一段时间回过头看自己对自己的说的话, 相比那种感受也是非常奇妙的.

在这片世界中, 你可以查看他人发布的心声, 寻找自己的共频声音~

业务场景:

玩法: 不同海域分布着不同的瓶子, 用户在发表漂流品瓶的时候 可自愿 将漂流瓶子 投掷在 预设海域下 用户可在首页的 探索世界 点击进入 海域世界, 用户可以 在海域世界中 切换不同海域 来到 不同的海域世界

• 用户可以 点击 海域中的 分布的漂流瓶子 拾取并进行打开.

Cursor 数据库设计 以及 接口开发工作

基本一个模块的 后端接口 编写流程如下:

1. 模型 (结构体)创建
2. 接口服务层编写 (数据处理)
3. 接口处理层编写 (数据返回)
4. 路由编写

简单的一个小场景业务. 首先我们 需要先设计数据库 表.

数据库:

1. 引入一个海域表
   • id
   • name
   • bg
   • created_at
   • updated_at

包含了 海域 的 名字 , 以及 背景图片. 后续可以扩展更多字段的.

1. 引入一个海域瓶子中间表
   • id
   • ocean_id
   • bottle_id
   • created_at
   • updated_at 包含了 漂流瓶子的id bottle_id, 以及 海域的id ocean_id.

接口:

1. 获取指定海域下的所有瓶子的信息
2. 获取所有的海域信息 以及 该海域下瓶子的数量

接下我们 先使用cursor 编写后端接口

image.png

当然为了进一步约束, 你可以指定在某个文件夹下 创建, 并且 你也可以 提供模型名, 结构体名字, 以便更好的控制, 当然不提的话 也是可以的, 目前实操,生成的 文件名 和 结构体变量名 以及 方法名字 都挺规范的.

image.png

接下他开始为我们生成 服务层的逻辑 以及处理层的代码

image.png

继续改进: 我们让他 每次请求接口 返回 50个 随机的瓶子, 而非全部分页请求

image.png

路由编写:

image.png

经过简单的 几次 prompt 交互, 我们便完成了接口的开发. 这更多 得益于 我从0 到 1 使用 cursor 开发的这个app 的后端, 所以即使有时候我提问的 不是特别完善, 他也能明白我的意思.

Cursor 客户端页面开发 以及接口请求, 状态管理

UI页面绘制

我们首先需要Cursor 帮我绘制 基础的UI 界面, 当然, 我们也可以投喂 参考图, 这里我们参考最右的摸鱼广场的页面设计 图片地址: pic1.imgdb.cn/item/677d31…, 我们可以让他先用 模拟数据 进行占位, 等页面UI 调试完毕之后 我们再使用真实接口 进行替换.

image.png

短短几s就生成了基本的页面. 不过还有一些工作需要我们手动处理, 比如: 页面背景图片替换, 以及 lottie 资源寻找.

image.png

当然如果懒得话, 也可以提供 图片链接, 让他修改代码, 真就是一行代码也不敲 哈哈哈

image.png

image.png

在下方你可以清楚看到修改了哪些内容

• 使用 Image.network 加载漂流瓶图片，替换原来的 Container + Icon 组合
• 添加了 Transform.translate 来创建一个简单的浮动动画效果，使用 sin 函数让瓶子上下浮动
• 设置了合适的宽高（40x40）并使用 BoxFit.contain 确保图片比例正确
• 添加了 errorBuilder 作为图片加载失败的后备方案，显示原来的图标样式
• 使用 DateTime.now().millisecondsSinceEpoch 来驱动浮动动画

这样漂流瓶会显示为真实的瓶子图片，并且会有一个轻微的上下浮动效果，使界面更加生动。如果图片加载失败，会回退到原来的图标样式

此时我们的页面:

2f2f7fd48e来吧e74eb8e34e88664d227.jpg

看起来还不错, 我们接着来把, 我们希望点击右上角的海域, 可以来到不同的海域, 来拾取瓶子.

image.png

UI 美化 细节调整

image.png

数据请求及渲染

接下来我们需要使用真实接口返回的数据来渲染我们的页面

image.png

但是我们遇到了一些问题, 我们发现他给的代码, 并没用是我们基础服务 封装的 dio来发送请求, 而是基于http 发送的请求, 这时候我们需要及时提醒他进行改正

image.png

当然 又遇到其他的bug了 不过不要慌张, 我们可以将控制台的 打印的日志反馈给他, 然后说明问题, 让他修改就好了, 一次修不好, 就多次修. (滑稽~)

image.png

当接口编写好了 能够拿到数据, 我们就需要Cursor 根据接口返回的数据 来渲染页面了

image.png

结语:

在借助Cursor 开发的过程中, 肯定少不了 一次又一次的错误和 bug, 但只要我们能够提供较为准确的错误信息, Cursor 便会发现问题所在, 帮我们改正过来.

最后提一下小建议, 当我们完成一个小模块的开发的时候 , 及时使用 git commit push 存储一下归档一下, 因为目前来说, 使用Cursor的 COMPOSER 将会直接覆盖和修改我们的代码 有时候 撤回也不好撤回, 因为他开发功能, 是一次动好几个关联的文件的.

目前APP 的开发 工作 进度 按照之前的规划, 已经完成了 80%, 后续大家想要联系体验的, 可以私信一下, 后续会继续分享 使用Cursor 开发这款产品的某些模板.