AI编程从0-1开发一个小程序
小伙伴们,今天我们利用AI实现从0到1开发一个小程序!
需求交给AI:
我们只要说出自己的开发思路,具体需求交给AI完成!
输入提示词:
个人开发的小程序 能开发哪些好备案,用户喜欢使用的
AI给出回答
我们将工具类的整理出来作为开发小程序的需求:
给出提示词:
将使用工具类整理,输出相关的小程序开发需求
将上面AI输出的内容整理出来,继续优化输入提示词:
将以上内容集中到一个小程序中,这些功能要是个人开发者可备案的。
需要结合网络上免费的数据库存储一些用户信息和程序相关的信息。
生成相关的小程序开发需求,并给小程序起一个名字,写一个20字左右的介绍。
得到了最后的需求分析文档,这里优化下添加supabase数据库的使用。
优化以上需求 数据库使用:Supabase,小程序名称改为:小妖工具集,给出完整的需求
最终的需求分析文档我们保存为 需求.md 备用
数据库准备:
https://supabase.com/
利用github账号登录
创建组织:
创建项目:
进入项目管理界面
获取apiurl apikey 备用
AI编程claude code:
将上面的需求文件改名为readme.md 放到项目目录中
打开cluade code
输入:@readme.md 根据readme.md的需求,给出微信小程序完整的代码
一路Yes,claude code 自动给我们创建相关代码。
数据库处理,根据自动生成的readme.md开发文档创建相关的数据库表
点击SQL Editor
复制上面生成好的sql预计执行下。
点击Table Editor
可看到我们sql语句创建的3张表
创建存储桶(在 Supabase 控制台的 Storage 部分手动创建)用来存放图片
-- 需要创建的桶:
-- 1. avatars (用户头像)
-- 2. items (物品照片)
-- 3. media-posters (影视海报)
-- 4. temp-images (临时图片处理)
-- 5. decorations (头像装饰素材)
-- 6. meme-templates (表情包模板)
将生成好的代码用微信开发者打开预览效果如下:
看了下大部分功能都能正常运行,接下来就是测试每个功能,有问题,直接丢给AI进行处理。
优化项目,点击收纳清单无相应,手机端预览,有文字层浮在界面上,
未能正常与supabase连接实现相应的操作,图片压缩大小反而增加了,
九宫格切图所有的图片显示的是右下角的图片,请重新优化
主界面优化,按照九宫格布局各个功能里面的功能按钮,美食转盘优化,界面布局有问题,不能弹出转盘。
表情包添加用户自定义模式,由用户选择对应的图片,可保存到数据库,供后续使用。
所有的弹出页面重新优化要能正常显示和保存提交数据。
福利时间:
网站:https://clchyj.xiaoxuzhu.cn/
感谢大家的点赞和关注,我们下期见!