Twilioapp-project/web-app/DEPLOYMENT_GUIDE.md

# 翻译服务应用 - 数据库集成部署指南

## 概述

本指南将帮助您完成翻译服务应用的数据库集成和部署，包括 Supabase 数据库设置、API 配置和应用部署。

## 前置要求

- Supabase 账户
- Stripe 账户（用于支付处理）
- Twilio 账户（用于视频通话）
- OpenAI 账户（用于AI翻译）

## 1. Supabase 数据库设置

### 1.1 创建 Supabase 项目

1. 访问 [Supabase Dashboard](https://supabase.com/dashboard)
2. 点击 "New Project"
3. 填写项目信息：
   - 项目名称：`twilio-translation-app`
   - 数据库密码：选择一个强密码
   - 区域：选择最近的区域

### 1.2 执行数据库迁移

1. 在 Supabase Dashboard 中，进入 "SQL Editor"
2. 复制 `web-app/database-schema.sql` 文件的内容
3. 粘贴到 SQL Editor 中并执行
4. 确认所有表和触发器创建成功

### 1.3 配置认证设置

1. 进入 "Authentication" → "Settings"
2. 启用 "Enable email confirmations"
3. 设置重定向URL：
   - Site URL: `http://localhost:8080`
   - Redirect URLs: `http://localhost:8080/index.html`

### 1.4 获取 API 密钥

1. 进入 "Settings" → "API"
2. 复制以下信息：
   - Project URL
   - anon (public) key
   - service_role (secret) key

## 2. API 服务配置

### 2.1 Stripe 配置

1. 登录 [Stripe Dashboard](https://dashboard.stripe.com/)
2. 获取 API 密钥：
   - Publishable key (用于前端)
   - Secret key (用于后端)
3. 配置 Webhook 端点（如需要）

### 2.2 Twilio 配置

1. 登录 [Twilio Console](https://console.twilio.com/)
2. 获取以下信息：
   - Account SID
   - Auth Token
   - API Key SID
   - API Key Secret

### 2.3 OpenAI 配置

1. 访问 [OpenAI API](https://platform.openai.com/api-keys)
2. 创建新的 API Key
3. 记录 API Key 和 Organization ID

## 3. 应用配置

### 3.1 更新配置文件

编辑 `web-app/config.js` 文件，填入您的 API 密钥：

```javascript
const CONFIG = {
    // Supabase 配置
    SUPABASE: {
        URL: 'your-supabase-url',
        ANON_KEY: 'your-supabase-anon-key'
    },
    
    // Stripe 配置
    STRIPE: {
        PUBLISHABLE_KEY: 'your-stripe-publishable-key'
    },
    
    // Twilio 配置
    TWILIO: {
        ACCOUNT_SID: 'your-twilio-account-sid',
        API_KEY_SID: 'your-twilio-api-key-sid'
    },
    
    // OpenAI 配置
    OPENAI: {
        API_KEY: 'your-openai-api-key',
        ORGANIZATION_ID: 'your-openai-org-id'
    }
};
```

### 3.2 环境变量设置

对于生产环境，建议使用环境变量：

```bash
# Supabase
SUPABASE_URL=your-supabase-url
SUPABASE_ANON_KEY=your-supabase-anon-key
SUPABASE_SERVICE_ROLE_KEY=your-supabase-service-key

# Stripe
STRIPE_PUBLISHABLE_KEY=your-stripe-publishable-key
STRIPE_SECRET_KEY=your-stripe-secret-key

# Twilio
TWILIO_ACCOUNT_SID=your-twilio-account-sid
TWILIO_AUTH_TOKEN=your-twilio-auth-token
TWILIO_API_KEY_SID=your-twilio-api-key-sid
TWILIO_API_KEY_SECRET=your-twilio-api-key-secret

# OpenAI
OPENAI_API_KEY=your-openai-api-key
OPENAI_ORGANIZATION_ID=your-openai-org-id
```

## 4. 本地开发环境

### 4.1 启动本地服务器

```bash
# 使用 Python 启动简单的 HTTP 服务器
python -m http.server 8080

# 或使用 Node.js
npx http-server -p 8080

# 或使用 PHP
php -S localhost:8080
```

### 4.2 访问应用

1. 打开浏览器访问 `http://localhost:8080`
2. 点击 "立即体验" 进入应用
3. 测试注册和登录功能

## 5. 生产环境部署

### 5.1 静态文件托管

推荐使用以下平台之一：

- **Vercel**: 
  ```bash
  npx vercel --prod
  ```

- **Netlify**: 
  ```bash
  netlify deploy --prod --dir .
  ```

- **GitHub Pages**: 
  推送到 GitHub 仓库并启用 Pages

### 5.2 域名配置

1. 购买域名并配置 DNS
2. 在 Supabase 中更新重定向 URL
3. 更新 CORS 设置

### 5.3 HTTPS 配置

确保生产环境使用 HTTPS：
- 大多数托管平台自动提供 SSL 证书
- 更新所有 API 配置使用 HTTPS URL

## 6. 功能测试

### 6.1 用户认证测试

1. 测试用户注册流程
2. 验证邮箱确认功能
3. 测试登录和登出

### 6.2 通话功能测试

1. 测试语音通话启动
2. 测试视频通话启动
3. 验证计费功能
4. 检查数据库记录

### 6.3 数据同步测试

1. 验证通话记录保存
2. 测试账单历史显示
3. 检查用户档案更新

## 7. 监控和维护

### 7.1 日志监控

- 监控 Supabase 日志
- 检查 API 调用错误
- 设置错误告警

### 7.2 性能优化

- 监控数据库查询性能
- 优化图片和资源加载
- 实施缓存策略

### 7.3 备份策略

- 定期备份 Supabase 数据库
- 备份用户上传的文档
- 制定灾难恢复计划

## 8. 故障排除

### 8.1 常见问题

**问题**: 无法连接到 Supabase
- 检查 API URL 和密钥是否正确
- 验证网络连接
- 检查 CORS 设置

**问题**: 用户注册失败
- 检查邮箱格式验证
- 验证 Supabase 认证设置
- 检查密码强度要求

**问题**: 通话记录未保存
- 检查用户登录状态
- 验证数据库连接
- 检查 RLS 策略设置

### 8.2 调试技巧

1. 打开浏览器开发者工具
2. 检查控制台错误信息
3. 监控网络请求状态
4. 验证数据库操作日志

## 9. 安全考虑

### 9.1 API 密钥安全

- 永远不要在前端暴露 secret keys
- 使用环境变量存储敏感信息
- 定期轮换 API 密钥

### 9.2 数据安全

- 启用 RLS (行级安全)
- 实施数据加密
- 定期安全审计

### 9.3 用户隐私

- 遵守数据保护法规
- 实施数据删除功能
- 提供隐私政策

## 10. 扩展功能

### 10.1 移动应用

- 使用 React Native 或 Flutter
- 集成相同的 Supabase 后端
- 实现推送通知

### 10.2 管理后台

- 创建管理员界面
- 实施用户管理功能
- 添加数据分析面板

### 10.3 API 扩展

- 创建 RESTful API
- 实施 GraphQL 接口
- 添加第三方集成

---

## 支持

如需技术支持，请联系：
- 邮箱: support@translation-app.com
- 文档: https://docs.translation-app.com
- GitHub: https://github.com/your-org/translation-app