1. 项目缘起与整体设计思路1.1 为什么选宠物生命周期管理这个方向宠物生命周期管理这个选题乍一看像是个小众赛道但真正养过宠物的人都知道这里面的信息管理痛点极其密集。一只宠物从接回家到终老中间要经历疫苗接种、驱虫、体检、绝育、体重记录、饮食调整、行为训练、就医档案、用药记录、临终关怀等一系列环节。绝大多数铲屎官的信息管理方式是微信收藏夹、手机备忘录、相册截图、纸质病历本四五个渠道各存一部分等到真正需要的时候翻半天找不全。我身边就有朋友遇到过这种情况猫咪突然呕吐送到医院后医生问最近一次驱虫是什么时候、用的什么药、有没有过敏史结果翻了二十分钟手机也没找全信息最后只能凭记忆回答。这种场景就是典型的“数据散落在各处关键时刻调不出来”。所以这个项目的核心定位很明确做一个以宠物个体为中心、以时间轴为主线、覆盖全生命周期的信息管理工具。它不是简单的“宠物档案App”而是把宠物的每一个重要事件都串在一条时间线上让主人随时能回溯、能导出、能分享给兽医。1.2 用Claude Code从零搭建的可行性判断Claude Code是Anthropic推出的命令行AI编程工具它的核心能力是理解自然语言指令后直接操作文件系统、生成代码、运行命令、调试错误。我选择用它来从零搭建这个项目主要基于几个判断。第一这个项目的业务逻辑虽然环节多但每个环节的技术实现并不复杂属于典型的CRUD加时间轴展示非常适合AI辅助快速生成。第二Claude Code在项目初始化阶段能帮我省掉大量脚手架搭建的时间比如创建目录结构、配置构建工具、生成基础组件模板这些重复劳动。第三我想验证一个工作流在真实项目开发中AI编程工具到底能承担多少比例的编码工作哪些环节仍然需要人工介入。需要提前说明的是Claude Code不是万能的。它在处理业务逻辑的边界条件、设计数据库关系的细节、以及UI交互的微妙体验上仍然需要人来把关。我的实际体验是它能帮我完成大约60%到70%的代码量但剩下的30%到40%才是决定项目质量的关键部分。1.3 技术选型的取舍逻辑技术栈的选择上我遵循一个原则选AI最熟悉、社区资料最丰富、出错后最容易排查的方案。基于这个原则最终确定的技术栈如下。层级技术选择选择理由前端框架React Native Expo跨平台AI生成代码准确率高Expo简化了原生依赖管理状态管理Zustand比Redux轻量AI对Zustand的代码生成质量明显更好本地存储SQLite Drizzle ORM宠物数据天然适合关系型存储Drizzle的Schema定义清晰导航Expo Router文件路由方式直观AI生成路由结构不容易出错UI组件自定义 React Native Paper基础组件用Paper特殊交互自己写后端初期纯本地后期可选Supabase先跑通本地闭环云端同步作为二期这里重点说一下为什么初期不做后端。宠物生命周期管理的数据有个特点单用户数据量不大但隐私敏感度高。很多主人不愿意把宠物的就医记录上传到云端。所以一期方案做成纯本地存储数据完全在用户设备上既降低了开发复杂度也符合用户的心理预期。后期如果需要多设备同步再引入云端方案。ORM选Drizzle而不是Prisma是因为Drizzle在React Native环境下的兼容性更好而且它的Schema定义是纯TypeScript代码Claude Code生成这类代码的准确率非常高基本不需要手动修正。2. 核心数据模型与业务逻辑拆解2.1 宠物生命周期的时间轴模型设计整个App的数据核心是一条时间轴。每只宠物有一条独立的时间轴时间轴上的每个节点是一个事件。事件分为几大类健康类疫苗、驱虫、体检、用药、手术、日常类体重、饮食、洗护、行为类训练里程碑、社交记录、纪念类生日、领养日、离世纪念。这个模型的设计难点在于不同类型的事件携带的数据字段差异很大。疫苗事件需要记录疫苗名称、批次号、接种机构、下次接种时间体重事件只需要一个数值和单位训练事件可能需要记录训练项目和完成度。如果用一张大表把所有字段都塞进去会产生大量空字段如果用多张表分别存储查询时间轴时又需要多次联表。我最终采用的方案是主事件表存通用字段ID、宠物ID、事件类型、发生时间、备注、创建时间每种事件类型对应一张扩展表存专有字段。查询时间轴时先查主表拿到事件列表再根据事件类型批量查询对应的扩展表。这个方案在Drizzle里实现起来很自然因为Drizzle支持定义表之间的关系查询时可以用关系查询API一次性把关联数据带出来。实操心得设计这类“主表扩展表”结构时一定要在主表里加一个eventType字段并建索引。时间轴查询几乎每次都要按类型过滤没有索引的话数据量上去后查询会明显变慢。2.2 数据库Schema的完整定义下面是我实际使用的Schema定义用Drizzle的语法编写。这部分代码Claude Code生成的初版大概对了80%我主要修正了字段类型和索引部分。// db/schema.ts import { sqliteTable, text, integer, real } from drizzle-orm/sqlite-core; export const pets sqliteTable(pets, { id: text(id).primaryKey(), name: text(name).notNull(), species: text(species).notNull(), // cat, dog, other breed: text(breed), gender: text(gender), birthday: integer(birthday, { mode: timestamp }), adoptDate: integer(adopt_date, { mode: timestamp }), avatar: text(avatar), weight: real(weight), isNeutered: integer(is_neutered, { mode: boolean }).default(false), note: text(note), createdAt: integer(created_at, { mode: timestamp }).notNull(), }); export const events sqliteTable(events, { id: text(id).primaryKey(), petId: text(pet_id).notNull().references(() pets.id, { onDelete: cascade }), eventType: text(event_type).notNull(), title: text(title).notNull(), occurredAt: integer(occurred_at, { mode: timestamp }).notNull(), note: text(note), createdAt: integer(created_at, { mode: timestamp }).notNull(), }, (table) ({ petIdIdx: index(events_pet_id_idx).on(table.petId), typeIdx: index(events_type_idx).on(table.eventType), timeIdx: index(events_time_idx).on(table.occurredAt), })); export const vaccineEvents sqliteTable(vaccine_events, { id: text(id).primaryKey(), eventId: text(event_id).notNull().references(() events.id, { onDelete: cascade }), vaccineName: text(vaccine_name).notNull(), batchNo: text(batch_no), clinic: text(clinic), nextDueDate: integer(next_due_date, { mode: timestamp }), }); export const weightEvents sqliteTable(weight_events, { id: text(id).primaryKey(), eventId: text(event_id).notNull().references(() events.id, { onDelete: cascade }), weight: real(weight).notNull(), unit: text(unit).default(kg), });这里有个细节值得展开说onDelete: cascade这个设置非常关键。当用户删除一只宠物时所有关联的事件和扩展数据都应该自动清除否则会留下大量孤儿数据。SQLite的外键级联删除需要手动开启PRAGMA这一点Claude Code一开始漏掉了我在测试删除功能时发现数据没清干净才补上。2.3 事件类型的枚举与扩展策略事件类型我用了一个TypeScript的联合类型来约束而不是简单的字符串枚举。这样做的好处是在写业务逻辑时TypeScript能帮你检查类型避免拼写错误。export type EventType | vaccine | deworm | checkup | medication | surgery | weight | diet | grooming | training | milestone; export const EVENT_TYPE_LABELS: RecordEventType, string { vaccine: 疫苗接种, deworm: 驱虫, checkup: 体检, medication: 用药, surgery: 手术, weight: 体重记录, diet: 饮食调整, grooming: 洗护美容, training: 行为训练, milestone: 重要里程碑, };扩展策略上我目前只对疫苗和体重做了独立的扩展表其他类型暂时把专有信息存在note字段里。这是有意为之的取舍先跑通核心流程等实际使用中发现哪些类型确实需要结构化字段再逐步加扩展表。一上来就把十种类型全做成扩展表开发量翻倍不说很多字段可能根本用不上。3. 从零搭建的完整实操流程3.1 项目初始化与Claude Code环境配置第一步是创建项目。我用Expo的模板来初始化因为Expo对React Native项目的管理最省心尤其是原生依赖的处理。npx create-expo-applatest pet-lifecycle --template blank-typescript cd pet-lifecycle项目创建完成后安装核心依赖。这里我把依赖分成三组来装方便排查问题。# 导航与路由 npx expo install expo-router react-native-safe-area-context react-native-screens # 数据库与ORM npx expo install expo-sqlite npm install drizzle-orm npm install -D drizzle-kit # 状态管理与UI npm install zustand npm install react-native-paperClaude Code的接入方式是在项目根目录下运行claude命令它会读取当前目录的上下文。我建议在项目根目录放一个CLAUDE.md文件里面写清楚项目结构、技术栈、编码规范这样Claude Code每次生成代码时都会参考这些约定减少风格不一致的问题。# CLAUDE.md ## 项目概述 宠物生命周期管理AppReact Native Expo SQLite ## 编码规范 - 所有组件使用函数式组件 TypeScript - 样式使用StyleSheet.create不用内联样式 - 数据库操作统一走db/queries目录下的封装函数 - 事件类型使用EventType联合类型不直接写字符串 ## 目录结构 - app/ 路由页面 - components/ 通用组件 - db/ 数据库schema和查询 - stores/ Zustand状态 - utils/ 工具函数这个文件看起来简单但实际作用很大。没有它的时候Claude Code生成的代码风格飘忽不定有时候用内联样式有时候用StyleSheet有时候直接写SQL有时候走ORM。有了约定之后生成质量明显稳定。3.2 数据库初始化与迁移Expo SQLite的初始化需要在App启动时执行。我把它放在根布局里用useEffect触发一次。// db/index.ts import { openDatabaseSync } from expo-sqlite; import { drizzle } from drizzle-orm/expo-sqlite; import * as schema from ./schema; const expoDb openDatabaseSync(pet_lifecycle.db); export const db drizzle(expoDb, { schema }); export async function initDatabase() { await expoDb.execAsync( PRAGMA journal_mode WAL; PRAGMA foreign_keys ON; ); await expoDb.execAsync( CREATE TABLE IF NOT EXISTS pets (...); CREATE TABLE IF NOT EXISTS events (...); CREATE TABLE IF NOT EXISTS vaccine_events (...); CREATE TABLE IF NOT EXISTS weight_events (...); ); }注意PRAGMA foreign_keys ON这行必须执行否则外键约束和级联删除都不会生效。SQLite默认是关闭外键的这个坑我踩过一次删除宠物后事件表里残留了一堆数据。迁移方面开发阶段我直接用CREATE TABLE IF NOT EXISTS简单粗暴。等Schema稳定后再引入drizzle-kit做正式迁移。开发阶段频繁改表结构每次改都写迁移文件太累不如直接删库重建。3.3 核心页面与组件实现整个App的页面结构不复杂一共五个主要页面。页面路由核心功能首页/(tabs)/index宠物列表展示每只宠物的基本信息和最近事件时间轴/pet/[id]/timeline单只宠物的完整事件时间轴添加事件/pet/[id]/add-event选择事件类型并填写详情宠物详情/pet/[id]宠物基本信息编辑设置/(tabs)/settings数据导出、提醒设置首页的宠物卡片组件是整个App的门面我花了比较多时间打磨。每张卡片展示宠物头像、名字、品种、年龄、最近一次事件的时间和类型。年龄的计算逻辑要注意如果只知道大概年龄不知道具体生日就用估算的生日如果连大概年龄都不知道就显示“年龄未知”。// utils/age.ts export function calculateAge(birthday: Date | null): string { if (!birthday) return 年龄未知; const now new Date(); const months (now.getFullYear() - birthday.getFullYear()) * 12 (now.getMonth() - birthday.getMonth()); if (months 1) return 不到1个月; if (months 12) return ${months}个月; const years Math.floor(months / 12); const remainMonths months % 12; return remainMonths 0 ? ${years}岁${remainMonths}个月 : ${years}岁; }时间轴页面是核心中的核心。我用FlatList来渲染事件列表按时间倒序排列。每个事件项根据类型显示不同的图标和颜色疫苗是绿色用药是橙色体检是蓝色里程碑是紫色。这种视觉区分能让用户快速扫一眼就知道最近发生了什么。添加事件的表单是交互最复杂的部分。用户先选事件类型然后表单根据类型动态显示不同的字段。疫苗类型显示疫苗名称、批次号、接种机构、下次接种时间体重类型只显示体重输入框。这个动态表单我用了一个配置对象来驱动而不是写一堆if-else。const EVENT_FORM_CONFIG: RecordEventType, FormField[] { vaccine: [ { key: vaccineName, label: 疫苗名称, type: text, required: true }, { key: batchNo, label: 批次号, type: text }, { key: clinic, label: 接种机构, type: text }, { key: nextDueDate, label: 下次接种时间, type: date }, ], weight: [ { key: weight, label: 体重, type: number, required: true }, { key: unit, label: 单位, type: select, options: [kg, g] }, ], // ... 其他类型 };这个配置驱动的设计让新增事件类型变得非常简单只需要在配置对象里加一项表单会自动渲染对应的字段。Claude Code生成这个配置对象时准确率很高因为结构非常规整。3.4 数据导出与备份功能宠物数据的导出功能我认为是刚需。用户养了几年宠物积累了几百条记录万一换手机或者App出问题数据丢了是不可接受的。我做了两种导出格式JSON和CSV。JSON格式用于完整备份和恢复包含所有表的数据。CSV格式用于给兽医看把时间轴导出成表格医生一眼就能看到完整的健康记录。export async function exportPetDataAsCSV(petId: string): Promisestring { const pet await getPetById(petId); const events await getEventsByPetId(petId); const headers [日期, 类型, 标题, 详情, 备注]; const rows events.map(e [ formatDate(e.occurredAt), EVENT_TYPE_LABELS[e.eventType], e.title, formatEventDetail(e), e.note || , ]); return [headers, ...rows] .map(row row.map(cell ${cell}).join(,)) .join(\n); }导出后用Expo的Sharing API调起系统分享面板用户可以存到文件、发邮件、或者传到其他App。这个功能实现起来不复杂但实用性极高。4. 常见问题与排查技巧实录4.1 Claude Code生成代码的典型问题用了这段时间我总结了Claude Code在这个项目里最常犯的几类错误以及对应的处理方式。第一类是导入路径错误。它经常把相对路径写错比如../db/schema写成./db/schema。这类错误在TypeScript编译时就会报出来改起来快但频繁出现会打断节奏。我的应对方式是在CLAUDE.md里明确写清楚目录结构和导入规范能减少一部分。第二类是异步处理遗漏。数据库操作都是异步的但Claude Code有时候会忘记加await导致拿到的是Promise而不是数据。这类错误运行时才会暴露排查起来稍微麻烦。我的习惯是每次生成数据库相关代码后先扫一眼所有db调用前面有没有await。第三类是类型定义不完整。比如定义了一个函数返回Pet类型但实际返回的对象少了某个字段。TypeScript会报错但有时候它会把类型定义改成any来绕过错误这就很危险。我要求自己审查每一处any问清楚为什么这里需要any。第四类是UI布局的细节问题。比如padding、margin的数值flex布局的方向这些Claude Code生成的初版往往需要微调。这类问题没有捷径只能跑起来看效果然后调。4.2 数据库操作的性能与稳定性问题SQLite在移动端使用有几个需要注意的点。WAL模式必须开启。默认的journal模式在并发读写时容易锁库开启WAL后读写可以并行体验好很多。这个在初始化时执行一次PRAGMA journal_mode WAL就行。批量插入要用事务。如果用户一次性导入大量数据逐条插入会非常慢。用事务包裹后速度能提升一个数量级。await db.transaction(async (tx) { for (const event of events) { await tx.insert(eventsTable).values(event); } });查询要加limit。时间轴页面如果一次加载全部事件宠物养了五年有上千条记录渲染会卡。我的做法是分页加载每次加载50条滚动到底部再加载更多。索引不能少。前面Schema里定义的三个索引petId、eventType、occurredAt是必须的。我测试过没有索引的情况下一千条数据的时间轴查询要200毫秒左右加了索引后降到20毫秒以内。4.3 常见问题速查表问题现象可能原因排查方向解决方案删除宠物后事件还在外键未开启检查PRAGMA foreign_keys初始化时执行PRAGMA foreign_keys ON时间轴加载慢缺少索引或未分页检查查询语句和索引加索引实现分页加载数据保存后重启丢失数据库路径问题检查openDatabaseSync的参数确保数据库文件名固定不要用临时路径日期显示错误时区处理问题检查timestamp存储和格式化统一用UTC存储展示时转本地时区表单提交无反应异步未await检查提交函数确保所有db操作都await了导出CSV乱码编码问题检查文件写入编码写入时指定UTF-8加BOM头4.4 几个我踩过的坑和对应的经验坑一Expo Router的文件路由命名。动态路由的文件夹名要用[id]这种格式但Claude Code有时候会生成[petId]或者:id导致路由匹配不上。这个问题的表现是点击宠物卡片后跳转到了空白页。排查时先看app目录下的文件夹命名是否正确。坑二SQLite的日期存储。Drizzle的timestamp模式在SQLite里实际存的是Unix时间戳整数但如果你直接存Date对象进去有时候会出问题。我的做法是统一在存入前转成Date.getTime()取出后再new Date(timestamp)转回来。坑三React Native Paper的主题配置。Paper的组件默认主题色是紫色跟我的设计不搭。要自定义主题需要在根布局用PaperProvider包裹并传入自定义theme。这个配置Claude Code第一次生成时漏掉了导致所有按钮都是紫色。坑四键盘遮挡输入框。添加事件表单字段多键盘弹起来会遮挡下面的输入框。解决方案是用KeyboardAvoidingView包裹iOS上behavior设为paddingAndroid上设为height。这个也是移动端开发的老问题了但每次新项目都会忘。实操心得每次用Claude Code生成完一个完整功能模块后不要急着写下一个先跑起来把当前模块点一遍。AI生成的代码“看起来对”和“实际能跑”之间往往有差距早发现早修正比攒一堆问题一起排查效率高得多。5. 后续扩展方向与个人体会这个项目目前跑通了核心闭环添加宠物、记录事件、查看时间轴、导出数据。后续可以扩展的方向不少我列几个我认为价值比较高的。提醒系统。疫苗有下次接种时间驱虫有周期这些都可以做成本地推送提醒。Expo的Notifications API支持本地定时推送不需要后端。实现思路是在添加疫苗事件时如果填了下次接种时间就注册一个本地通知。多宠物家庭的数据对比。养多只宠物的家庭可能想对比不同宠物的体重变化曲线、就医频率等。这需要在查询层做聚合UI上用图表展示。图表库我倾向用victory-native跟React Native集成比较好。兽医分享模式。生成一个只读的分享链接或二维码兽医扫码后能看到宠物的完整健康档案。这个需要后端支持可以作为二期功能。数据统计面板。展示一些有趣的统计比如今年去了几次医院、总共打了多少针疫苗、体重变化趋势等。这类功能对提升用户粘性有帮助。我个人在实际操作中的体会是Claude Code这类工具最大的价值不是帮你写多少行代码而是帮你跳过“从零到一”的那个启动门槛。以前做一个新项目光是搭脚手架、配环境、写基础模板就要耗掉一两天现在可能一两个小时就能跑起来一个能用的原型。但原型到产品之间的那段路仍然需要人来走业务逻辑的边界情况、用户体验的细节打磨、数据安全的考量这些AI目前还替代不了。另外一个小技巧用Claude Code时把大任务拆成小任务给它每次只让它做一件事。比如“帮我写一个添加宠物的表单组件”比“帮我实现宠物管理功能”效果好得多。任务越具体生成质量越高返工越少。这个跟带新人的逻辑是一样的你给的需求越模糊产出越不可控。