- 新增用户注册和登录系统 (login.html, register.html)
- 集成Supabase数据库连接 (config.js, api.js)
- 完善数据库架构设计 (database-schema.sql)
- 添加部署指南和配置文档 (DEPLOYMENT_GUIDE.md)
- 修复主页面结构和功能完善 (index.html)
- 支持通话记录保存到数据库
- 完整的账单管理和用户认证流程
- 集成OpenAI、Twilio、Stripe等API服务

2025-06-30 19:34:58 +08:00

5.9 KiB

Raw Blame History

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

概述

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

前置要求

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

1. Supabase 数据库设置

1.1 创建 Supabase 项目

访问 Supabase Dashboard
点击 "New Project"
填写项目信息：
- 项目名称：twilio-translation-app
- 数据库密码：选择一个强密码
- 区域：选择最近的区域

1.2 执行数据库迁移

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

1.3 配置认证设置

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

1.4 获取 API 密钥

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

2. API 服务配置

2.1 Stripe 配置

登录 Stripe Dashboard
获取 API 密钥：
- Publishable key (用于前端)
- Secret key (用于后端)
配置 Webhook 端点（如需要）

2.2 Twilio 配置

登录 Twilio Console
获取以下信息：
- Account SID
- Auth Token
- API Key SID
- API Key Secret

2.3 OpenAI 配置

访问 OpenAI API
创建新的 API Key
记录 API Key 和 Organization ID

3. 应用配置

3.1 更新配置文件

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

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 环境变量设置

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

# 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 启动本地服务器

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

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

# 或使用 PHP
php -S localhost:8080

4.2 访问应用

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

5. 生产环境部署

5.1 静态文件托管

推荐使用以下平台之一：

Vercel:
```
npx vercel --prod
```
Netlify:
```
netlify deploy --prod --dir .
```
GitHub Pages: 推送到 GitHub 仓库并启用 Pages

5.2 域名配置

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

5.3 HTTPS 配置

确保生产环境使用 HTTPS：

大多数托管平台自动提供 SSL 证书
更新所有 API 配置使用 HTTPS URL

6. 功能测试

6.1 用户认证测试

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

6.2 通话功能测试

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

6.3 数据同步测试

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

7. 监控和维护

7.1 日志监控

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

7.2 性能优化

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

7.3 备份策略

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

8. 故障排除

8.1 常见问题

问题: 无法连接到 Supabase

检查 API URL 和密钥是否正确
验证网络连接
检查 CORS 设置

问题: 用户注册失败

检查邮箱格式验证
验证 Supabase 认证设置
检查密码强度要求

问题: 通话记录未保存

检查用户登录状态
验证数据库连接
检查 RLS 策略设置

8.2 调试技巧

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

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

5.9 KiB Raw Blame History Unescape Escape