mars
0d57273021
- 新增用户注册和登录系统 (login.html, register.html) - 集成Supabase数据库连接 (config.js, api.js) - 完善数据库架构设计 (database-schema.sql) - 添加部署指南和配置文档 (DEPLOYMENT_GUIDE.md) - 修复主页面结构和功能完善 (index.html) - 支持通话记录保存到数据库 - 完整的账单管理和用户认证流程 - 集成OpenAI、Twilio、Stripe等API服务
297 lines
5.9 KiB
Markdown
297 lines
5.9 KiB
Markdown
# 翻译服务应用 - 数据库集成部署指南
|
||
|
||
## 概述
|
||
|
||
本指南将帮助您完成翻译服务应用的数据库集成和部署，包括 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 |