资讯详情

资讯详情

对话式AI从零搭建宠物生命周期管理App实战

1. 为什么我选择用对话式AI从零搭一个宠物生命周期管理App宠物生命周期管理这个需求乍一听好像挺小众但真正养过猫狗的人都知道从接回家那天起疫苗、驱虫、体检、发情、绝育、体重曲线、用药记录、临终关怀每一个节点都是实打实的信息管理难题。我身边不少朋友用备忘录、Excel甚至纸质本子记结果不是漏了疫苗时间就是换手机之后数据全丢。市面上确实有一些宠物管理类App但要么功能太重、要么广告太多、要么数据存在别人服务器上让人不放心。所以我决定自己动手做一个。核心诉求很明确本地优先、数据可控、功能覆盖宠物从到家到离世的全生命周期。技术选型上我没有走传统先学框架再写代码的路子而是直接用对话式AI编程工具来驱动整个开发流程。这里说的就是标题里的Claude Code——一个能在终端里跟你对话、帮你写代码、帮你调试、帮你搭项目结构的AI编程助手。这篇文章适合谁看如果你是有一定编程基础、想快速把想法变成可运行项目的开发者或者你是产品经理、独立开发者想了解AI辅助编程到底能做到什么程度再或者你只是想给自己的宠物做个管理工具但不知道从哪下手这篇内容都能给你一条可复现的路径。我会把整个从零搭建的过程拆开讲包括项目结构怎么设计、数据模型怎么定、AI在哪些环节真正提效、哪些环节反而要自己把关以及我踩过的那些坑。先给一个整体判断Claude Code这类工具最适合的场景是你有清晰的业务逻辑但不想手写样板代码。它不是一个按一个按钮就出App的黑盒而是一个能理解你意图、帮你把意图翻译成代码的协作伙伴。你越清楚自己要什么它产出质量越高。下面我从项目初始化开始一步步拆。2. 项目初始化让AI先理解业务再动手写代码2.1 别急着敲命令先把业务讲清楚很多人用AI编程工具的第一个误区就是上来就说帮我写一个宠物App。这种指令太模糊AI只能给你一个通用模板最后你还得大改。我的做法是在正式让AI生成任何代码之前先花十分钟把业务逻辑用自然语言完整描述一遍。我当时的开场大概是这样的我要做一个宠物生命周期管理工具核心实体是宠物每只宠物有基础档案名字、品种、性别、生日、绝育状态、芯片号然后围绕它有一系列事件记录包括疫苗接种、驱虫、体检、用药、体重测量、就诊记录。每个事件有日期、类型、备注部分事件还有下次提醒时间。数据要本地存储支持导出备份。界面要简洁主要操作路径不超过三层。这段话看起来啰嗦但它直接决定了AI后续生成的代码结构。你给AI的业务上下文越完整它生成的实体关系、字段命名、模块划分就越贴近真实需求。我实测下来同样一个功能先讲业务再写代码返工率能降低一半以上。2.2 技术栈选择为什么我选了这套组合在让AI生成代码之前技术栈得先定下来。我的选择是层级选型理由前端框架React Native一套代码同时跑iOS和Android独立开发者首选本地存储SQLite结构化数据、支持复杂查询、成熟稳定状态管理Zustand比Redux轻量学习成本低适合中小型项目导航React NavigationRN生态里最成熟的导航方案日期处理dayjs体积小API友好替代moment这套组合不是拍脑袋定的。React Native的好处是生态成熟AI对它的代码生成质量也高因为训练数据里RN的代码量足够大。SQLite做本地存储是因为宠物数据天然是关系型的——宠物和事件是一对多事件和提醒是一对一用关系型数据库管理最自然。Zustand则是考虑到这个项目状态不算特别复杂没必要上Redux那套繁琐的action/reducer。我把这套技术栈告诉Claude Code之后它很快就给出了项目目录结构的建议。这里有个细节值得说AI建议的目录结构不一定是最优的但一定是一个合理的起点。它当时给的结构大概是这样的src/ components/ # 通用组件 screens/ # 页面 models/ # 数据模型 services/ # 业务逻辑 store/ # 状态管理 utils/ # 工具函数 db/ # 数据库相关我在此基础上做了一点调整把db合并进了services因为数据库操作本质上也是业务逻辑的一部分单独拆出来反而增加了层级。这种微调就是人的价值所在——AI给框架人做决策。2.3 初始化命令与依赖安装的实操细节项目初始化这一步Claude Code可以直接帮你生成命令。我当时让它输出完整的初始化流程它给的是npx react-native init PetLifeCycle --template react-native-template-typescript cd PetLifeCycle npm install react-navigation/native react-navigation/stack npm install react-native-screens react-native-safe-area-context npm install react-native-sqlite-storage npm install zustand dayjs这里有几个坑要提醒。第一react-native-sqlite-storage这个库在新版RN里可能需要手动配置原生依赖AI不一定会提醒你。第二TypeScript模板初始化时间比较长网络不好的话容易卡住建议提前配好镜像。第三React Navigation的依赖不止它自己react-native-screens和react-native-safe-area-context是必须的漏了会直接报错。提示让AI生成安装命令后不要无脑复制执行。先扫一眼有没有版本冲突特别是RN版本和第三方库的兼容性。我遇到过AI给的命令里某个库版本太老装完直接编译失败的情况。依赖装完之后我让AI帮我跑了一次npx react-native doctor来检查环境。这个命令会列出所有环境问题比手动排查快得多。实测下来Android SDK路径、Java版本、CocoaPods这几个是最容易出问题的点。3. 数据模型设计宠物生命周期管理的核心骨架3.1 从业务事件反推数据表结构数据模型是整个App的地基这块我没让AI完全代劳而是自己先画了一版草图再让AI帮我转成SQL和TypeScript类型定义。为什么因为数据模型一旦定错后面改起来牵一发动全身而AI对业务的理解终究不如你自己深。我的思路是从事件反推实体。宠物生命周期里会发生哪些事疫苗、驱虫、体检、用药、体重、就诊、绝育、生日提醒。把这些事件抽象出来会发现它们有共性都有一个时间点、都关联到某只宠物、都可能有备注和下次提醒。所以我设计了两张核心表pets表存宠物基础档案events表存所有事件记录用type字段区分事件类型这种设计的优点是扩展性强。以后想加新的事件类型比如美容记录、寄养记录不用改表结构加一个type值就行。缺点是查询时需要按type过滤但这个成本可以接受。3.2 字段设计的取舍与理由pets表的字段我最终定为CREATE TABLE IF NOT EXISTS pets ( id INTEGER PRIMARY KEY AUTOINCREMENT, name TEXT NOT NULL, species TEXT NOT NULL, -- 猫、狗、其他 breed TEXT, -- 品种 gender TEXT, -- 公、母 birthday TEXT, -- ISO日期字符串 weight REAL, -- 当前体重kg is_neutered INTEGER DEFAULT 0,-- 是否绝育 chip_id TEXT, -- 芯片号 avatar TEXT, -- 头像本地路径 created_at TEXT NOT NULL, updated_at TEXT NOT NULL );这里有几个设计决策值得展开。生日用TEXT存ISO字符串而不是时间戳是因为宠物生日通常只精确到天用时间戳反而引入时区问题。体重用REAL因为宠物体重会有小数。绝育状态用INTEGER存0/1SQLite没有原生布尔类型这是标准做法。头像存本地路径而不是二进制避免数据库膨胀。events表的字段CREATE TABLE IF NOT EXISTS events ( id INTEGER PRIMARY KEY AUTOINCREMENT, pet_id INTEGER NOT NULL, type TEXT NOT NULL, -- vaccine/deworm/checkup/medication/weight/visit title TEXT NOT NULL, event_date TEXT NOT NULL, next_date TEXT, -- 下次提醒日期 notes TEXT, extra TEXT, -- JSON字符串存类型特有字段 created_at TEXT NOT NULL, FOREIGN KEY (pet_id) REFERENCES pets(id) ON DELETE CASCADE );extra字段是个巧妙的设计。不同事件类型需要的额外信息不一样比如疫苗要记录疫苗名称和批号体重只要记录数值。如果给每种类型都建一张表表数量会爆炸如果都塞进主表字段会大量为空。用JSON字符串存extra既灵活又不用改表结构。查询时如果需要按extra里的字段过滤SQLite也支持JSON函数够用了。3.3 让AI生成类型定义和数据库操作层数据表定好之后我让Claude Code帮我生成对应的TypeScript类型和数据库操作函数。这一步AI的表现相当好因为它就是个体力活——把SQL翻译成类型定义和CRUD函数逻辑清晰、重复度高正是AI擅长的。我给的指令是根据上面的表结构生成TypeScript接口定义以及一个DatabaseService类包含初始化数据库、增删改查宠物、增删改查事件的方法。要求所有方法返回Promise错误要抛出而不是吞掉。AI生成的代码基本可以直接用但我做了两处修改。第一它默认用了console.log打错误日志我改成了统一的错误处理函数。第二它没有处理数据库迁移我加了一个简单的版本号机制方便以后表结构变更。AI生成的代码往往是能跑的水平要变成能维护的水平还需要人补上工程化的细节。4. 核心功能模块的AI实现与人工调优4.1 宠物档案页从表单到数据流打通宠物档案页是用户接触的第一个功能页包含添加宠物、编辑宠物、查看宠物列表。我让AI先生成了一个基础版本然后自己调优。AI生成的表单组件结构没问题但它犯了一个典型错误把表单状态和全局状态混在一起。它直接在组件里用useState管理表单提交时再调用store。这种写法在小项目里能用但一旦表单字段变多、校验逻辑变复杂就会很难维护。我的改法是引入一个轻量的表单管理方案把校验逻辑抽出来。具体来说每个字段定义自己的校验规则提交时统一跑一遍校验通过后再写入store。这样以后加字段只需要加配置不用改组件逻辑。另一个调优点是列表性能。AI默认用ScrollView渲染宠物列表宠物少的时候没问题但用户养了十几只宠物、每只都有头像的时候ScrollView会一次性渲染所有项明显卡顿。我换成了FlatList并加了keyExtractor和getItemLayout优化。这个改动AI不会主动做因为它不知道你的数据规模。4.2 事件记录与提醒时间处理是最容易翻车的地方事件记录功能看起来简单实际上时间处理是最容易出bug的地方。我踩过的坑包括日期字符串格式不统一导致排序错乱、跨时区显示偏差、提醒时间计算错误。AI生成的代码里日期处理用的是原生Date对象格式化用toLocaleDateString。这在单一语言环境下没问题但一旦涉及多语言或者不同设备时区就会出问题。我全部换成了dayjs并且统一用ISO 8601格式存储显示时才做本地化。提醒功能我最初想用本地推送实现但RN的本地推送配置比较繁琐而且用户如果关闭了通知权限就完全失效。后来我改成了应用内提醒打开App时检查所有事件的next_date如果临近或已过期就在首页顶部显示提醒卡片。这个方案简单可靠不依赖系统权限实测下来用户反馈反而更好——因为养宠物的人本来就会经常打开App看。注意next_date的计算逻辑要小心。比如疫苗提醒通常是上次接种后一年但如果是幼犬首年需要接种多针间隔可能是21天。这种业务规则AI不会自动知道必须你在指令里说清楚。4.3 体重曲线数据可视化的轻量方案体重曲线是我个人觉得最有价值的功能之一。宠物体重的变化往往能反映健康问题比如猫突然消瘦可能是甲亢或肾病狗持续增重可能是饮食问题。把体重数据可视化比看一堆数字直观得多。AI建议用victory-native或者react-native-svg-charts来做图表。我评估之后选了后者因为体积更小、依赖更少。实现思路是从events表里筛出type为weight的记录按日期排序取出数值传给图表组件。这里有个细节体重数据点太少时曲线没有意义。我加了一个逻辑如果体重记录少于3条就显示提示文字引导用户多记录而不是画一条只有两个点的线。这种体验细节AI不会主动考虑需要你自己站在用户角度想。图表组件的配置我也调了几轮。AI默认给的配置颜色太鲜艳、网格线太密看起来像股票图。我改成了柔和的配色、只保留横向网格线、Y轴范围根据数据动态计算而不是从0开始。这些调整让图表看起来更专业也更符合宠物健康数据的调性。4.4 数据导出与备份本地优先的最后一环既然主打本地存储数据导出就是必须的功能。我实现了两种导出方式导出为JSON文件完整备份可重新导入和导出为CSV方便在Excel里查看。AI生成的导出代码用了react-native-fs来写文件但没处理Android的存储权限。在Android 10以上写外部存储需要特殊处理。我改用了应用私有目录然后通过分享功能让用户自己选择保存位置。这样既避开了权限问题又给了用户灵活性。导入功能要更小心因为用户可能导入格式不对的文件。我加了严格的校验先检查JSON结构再检查必填字段最后检查外键关联事件对应的宠物是否存在。任何一步失败都给出明确的错误提示而不是直接崩溃。数据导入导出是用户信任的底线这块宁可多写点校验代码也不能图省事。5. AI编程协作中的真实体验哪些环节提效哪些环节要自己扛5.1 AI真正提效的三个环节用了这段时间我总结出Claude Code在三个环节提效最明显。第一是样板代码生成。比如数据库CRUD、类型定义、导航配置、样式表这些代码逻辑简单但量大手写很枯燥。AI几秒钟就能生成我只需要检查一遍。这部分大概能省掉我60%以上的时间。第二是API查询与示例。RN生态里库很多每个库的用法我不可能全记住。遇到不熟悉的库我直接问AI这个库怎么实现XX功能它给的示例代码通常能直接跑。比翻文档快得多尤其是文档写得烂的库。第三是错误排查。报错信息贴给AI它往往能直接指出问题所在。特别是一些配置类的错误比如Metro打包失败、原生模块链接问题AI的经验比搜索引擎更直接。5.2 AI容易翻车的三个环节但AI也有明显的短板这三个环节我基本不依赖它。第一是业务逻辑的边界情况。比如宠物去世后数据怎么处理这种问题AI会给一个技术上可行但业务上不合理的方案比如直接删除。实际上应该保留数据但标记状态让用户还能查看历史记录。这种判断需要人的同理心。第二是性能优化。AI生成的代码默认是功能正确优先不会考虑性能。列表渲染、图片加载、数据库查询这些地方如果不主动优化数据量一大就卡。我养成了习惯AI生成完代码后自己过一遍性能敏感点。第三是安全与隐私。虽然这个项目是本地存储但导出功能、分享功能都涉及数据外流。AI不会主动提醒你加隐私提示或者脱敏处理。这些必须自己把关。5.3 我的协作工作流经过这个项目我形成了一套比较顺的协作流程分享出来供参考先写业务描述用自然语言把要做的功能完整描述一遍包括边界情况让AI出方案让AI给出实现思路和代码结构但不急着写代码人工评审方案检查方案是否合理特别是数据流和边界处理让AI生成代码方案确认后让AI按模块生成代码人工调优检查性能、错误处理、用户体验细节实测验证真机跑一遍记录问题把问题反馈给AI让AI帮忙排查形成闭环这套流程的核心是人负责决策AI负责执行。决策包括业务逻辑、数据模型、技术选型、体验标准执行包括写代码、查文档、排查错误。分工明确之后效率提升非常明显。6. 从能跑到好用上线前必须处理的细节6.1 空状态与异常状态的兜底一个App能不能用看正常流程好不好用看异常流程。AI生成的代码通常只处理正常流程空状态、加载状态、错误状态都需要自己补。我补了这些兜底宠物列表为空时显示引导添加的插画和按钮数据加载时显示骨架屏而不是白屏数据库操作失败时显示可重试的错误提示导出文件过大时给出进度提示。这些细节看起来小但直接决定了用户对App的信任感。6.2 真机测试中发现的那些问题模拟器上跑得好好的真机上问题一堆。我遇到的主要有Android字体渲染和iOS不一致导致布局错位低端Android设备上SQLite操作明显卡顿iOS的SafeArea处理不当导致内容被刘海遮挡深色模式下部分文字颜色对比度不够。这些问题AI帮不上太多忙因为它的训练数据里真机适配的经验有限。解决办法就是老老实实拿几台不同设备测发现问题逐个修。真机测试这一步没有捷径但它是区分Demo和产品的关键。6.3 打包发布前的检查清单最后分享一份我自己的发布前检查清单都是踩过坑总结出来的数据库迁移逻辑是否测试过模拟旧版本升级所有硬编码的测试数据是否清除权限声明是否最小化不需要的权限不要申请应用图标和启动屏是否配置正确版本号和构建号是否递增导出功能的文件格式是否在目标平台验证过深色模式和浅色模式是否都检查过低版本系统兼容性是否测试过这份清单每次发版前过一遍能避免大部分低级问题。AI可以帮你写代码但这些发布流程上的经验还是得靠自己积累。整个项目做下来我最大的体会是AI编程工具把从想法到可运行原型的门槛降到了历史最低但从原型到产品的门槛并没有降低。前者靠AI提效后者靠人的判断力和经验。宠物生命周期管理这个App我还在持续迭代后面打算加多宠物对比、健康报告生成、数据加密这些功能。有了这套协作流程每加一个功能的时间成本比传统方式低得多这大概就是AI编程最实在的价值。
觉得有用,分享给同行:

为您的企业打造数字门面

稳重轻奢商务风格,端正雅致视觉,长效耐看不易过时。

立即咨询 →