GarminHealthLab/docs/DEVELOPMENT.md

开发指南

环境设置

前置要求

• Node.js 18+
• npm 或 yarn
• Git
• Garmin Connect 账户

安装步骤

1. 克隆项目

   cd ~/Desktop/Work
   git clone <repository-url> GarminHealthLab
   cd GarminHealthLab
   

2. 安装依赖

   npm install
   

3. 配置环境变量

   # 复制示例文件
   cp server/.env.example server/.env
   
   # 编辑 server/.env，填入你的 Garmin 凭证
   # GARMIN_CONNECT_USER=your_email@example.com
   # GARMIN_CONNECT_PASSWORD=your_password
   # JWT_SECRET=generate_a_random_string
   

4. 启动开发服务器

   npm run dev
   

   • 前端: http://localhost:3000
   • 后端 API: http://localhost:5000/api

项目命令

# 开发模式（同时运行前后端）
npm run dev

# 仅运行后端服务器
npm run dev:server

# 仅运行前端应用
npm run dev:client

# 构建项目
npm run build

# 生产模式启动
npm start

# 类型检查
npm run typecheck

代码结构

后端 (server/)

server/
├── src/
│   ├── index.ts              # 入口文件
│   ├── routes/               # API 路由
│   │   ├── auth.ts
│   │   ├── garmin.ts
│   │   ├── health.ts
│   │   └── analysis.ts
│   ├── services/             # 业务逻辑服务
│   │   ├── AuthService.ts
│   │   ├── GarminService.ts
│   │   ├── HealthService.ts
│   │   └── AnalysisService.ts
│   ├── models/               # 数据模型
│   ├── middleware/           # 中间件
│   ├── utils/                # 工具函数
│   │   └── database.ts
│   └── types/                # TypeScript 类型定义
├── dist/                     # 编译输出
├── tsconfig.json
└── package.json

前端 (client/)

client/
├── src/
│   ├── index.tsx             # 入口文件
│   ├── App.tsx               # 主组件
│   ├── components/           # 可复用组件
│   ├── pages/                # 页面组件
│   │   ├── Dashboard.tsx
│   │   ├── DataSync.tsx
│   │   ├── Analysis.tsx
│   │   ├── Recommendations.tsx
│   │   └── Settings.tsx
│   ├── services/             # API 服务
│   │   └── api.ts
│   ├── types/                # TypeScript 类型定义
│   └── index.css             # 全局样式
├── public/                   # 静态资源
└── package.json

开发工作流

添加新的 API 端点

1. 创建路由处理器 (server/src/routes/yourFeature.ts)

   import express from 'express';
   
   const router = express.Router();
   
   router.get('/endpoint', (req, res) => {
     // 业务逻辑
   });
   
   export default router;
   

2. 在主文件中注册路由 (server/src/index.ts)

   import yourFeatureRoutes from './routes/yourFeature';
   app.use('/api/yourfeature', yourFeatureRoutes);
   

3. 创建 API 客户端方法 (client/src/services/api.ts)

   getYourEndpoint() {
     return this.client.get('/yourfeature/endpoint');
   }
   

添加新页面

1. 创建页面组件 (client/src/pages/YourPage.tsx)

   import React from 'react';
   
   function YourPage() {
     return <div>Page content</div>;
   }
   
   export default YourPage;
   

2. 在 App.tsx 中添加路由

   <Route path="/your-path" element={<YourPage />} />
   

数据库操作

使用数据库工具函数简化操作：

import { runAsync, getAsync, allAsync } from '../utils/database';

// 插入数据
await runAsync('INSERT INTO table (col1, col2) VALUES (?, ?)', [val1, val2]);

// 查询单行
const row = await getAsync('SELECT * FROM table WHERE id = ?', [id]);

// 查询多行
const rows = await allAsync('SELECT * FROM table WHERE status = ?', ['active']);

调试

后端调试

# 启用详细日志
DEBUG=* npm run dev:server

# 使用 Node 调试器
node --inspect server/dist/index.js

前端调试

• 使用 React DevTools 浏览器扩展
• 使用浏览器开发者工具 (F12)
• 检查网络请求和响应

测试

测试后端 API

使用 curl 或 Postman：

# 获取健康摘要
curl http://localhost:5000/api/health/summary

# 触发 Garmin 同步
curl -X POST http://localhost:5000/api/garmin/sync

# 获取健康建议
curl http://localhost:5000/api/analysis/recommendations

常见问题

数据库连接失败

# 检查数据库文件
ls -la ./data/health.db

# 重置数据库
rm ./data/health.db
npm run dev

前端无法连接后端

• 检查 CORS 配置
• 确保后端运行在 5000 端口
• 检查防火墙设置

Garmin 认证失败

• 验证 Garmin 邮箱和密码
• 检查网络连接
• 查看后端日志

性能优化建议

1. 数据库索引

   • 在频繁查询的字段上添加索引
   • 定期分析查询性能

2. 缓存策略

   • 实现 API 响应缓存
   • 使用浏览器缓存

3. 代码分割

   • React 懒加载路由
   • 按需加载 JavaScript

代码规范

TypeScript

• 使用严格模式
• 为所有函数参数添加类型
• 使用接口定义复杂对象

CSS

• 使用 BEM 命名规范
• 响应式设计优先
• 避免内联样式

提交信息

feat: 添加新功能描述
fix: 修复 bug 描述
docs: 文档更新
style: 代码格式调整
refactor: 代码重构
test: 测试相关

资源链接

• Express.js 文档
• React 文档
• TypeScript 文档
• SQLite 文档
• Garmin API