| 作業所屬課程 | 軟體工程2024 |
|---|---|
| 作業要求 | 2024秋軟工實踐團隊作業-第二次 |
| 作業目標 | 設計出原型與後端架構 |
| 團隊名稱 | 當然不是草臺班子 |
| 團隊成員學號 | 姓名 |
|---|---|
| 102201427 | 侯麗珂 |
| 102201426 | 鄭嘉祺 |
| 102201241 | 戴康怡 |
| 102201218 | 肖晗涵 |
| 112200328 | 謝李東 |
| 292300304 | 陳鷺 |
| 102201242 | 魏儀陽 |
| 082100170 | 朱胤帆 |
| 112200629 | 趙弈茗 |
| 102202132 | 鄭冰智 |
原型設計
一、介面結構
1. 頂部導航欄
- 網站logo：位於導航欄左部，顯示“雲譯網”字樣，作為品牌標識。
- 搜尋框：位於導航欄顯眼位置，使用者可輸入關鍵詞進行站內搜尋，快速找到所需內容。
- 使用者操作按鈕：包括登入、註冊和個人中心等，位於導航欄右上角，方便使用者進行賬號管理和個人設定。
2. 側邊欄
- 主要功能模組：列出網站的主要功能模組，如首頁、個性化定製、翻譯校對等，方便使用者快速導航至所需功能。
3. 主內容區
- 展示功能內容：根據使用者選擇的功能模組，展示相應的主要內容，佔據頁面的大部分空間。
二、頁面設計
1 前臺應用原型
連結：https://rp.mockplus.cn/run/kl8hNh9g6F/b503_uY-bs
1. 登入頁面
- 具體功能：
- 使用者登入/註冊區域：方便新使用者快速註冊或登入，提升使用者轉化率。
2. 首頁
- 意義：作為使用者訪問的起始頁面，提供使用者輸入文字或圖片、檔案進行實時翻譯的功能頁面，展示雲譯網的核心功能和推薦內容，展示使用者最近的翻譯記錄，方便使用者回顧和再次翻譯。
- 具體功能：
- 線上翻譯入口：提供顯眼的按鈕，引導使用者快速進入線上翻譯功能。
- 特色功能介紹：透過圖文結合的方式展示個性化定製和AI對話等特色功能。
- 輸入區：包含文字輸入框及語言選擇選單，使用者可輸入待翻譯文字並選擇源語言和目標語言。
- 操作區：包括翻譯按鈕、語音輸入和圖片上傳等功能，使用者可透過多種方式提交翻譯請求。
- 結果展示區：顯示翻譯結果，並提供複製和儲存功能，方便使用者使用翻譯結果。
- 記錄列表：按時間順序顯示使用者的歷史翻譯記錄和資料資訊，便於使用者查詢。
3. AI對話頁面
- 意義：提供使用者與AI進行互動的平臺，獲取實時翻譯和建議。
- 具體功能：
- 對話輸入區：使用者可在此輸入內容與AI進行對話，獲取翻譯或相關建議。
- 響應展示區：顯示AI的回答和建議，提供實時互動體驗。
4. 個性化定製頁面
- 意義：允許使用者設定翻譯風格與專業領域，以獲得更符合個人需求的翻譯結果。
- 具體功能：
- 風格選擇：提供多種翻譯風格供使用者選擇，如正式、口語化等。
- 專業領域設定：使用者可選擇適用的專業領域和管理術語庫，以提高翻譯的專業性和準確性。
- 儲存設定按鈕：儲存使用者的個性化設定，以便在未來的翻譯中自動應用。
5. 翻譯校對頁面
- 意義：提供使用者校對和最佳化翻譯內容的功能頁面，方便使用者瞭解自己的翻譯水平和優勢劣勢。
- 具體功能：
- 原文與譯文輸入區：使用者可分別輸入原文和譯文進行校對，確保翻譯質量。
- 校對功能按鈕：提供語法檢查、術語校驗等功能，幫助使用者提高翻譯準確性。
- 翻譯打分功能：顯示翻譯質量得分，為使用者提供翻譯質量的參考。
6. 使用者反饋頁面
- 意義：提供使用者反饋和建議的渠道，幫助雲譯網收集使用者意見，不斷最佳化服務和功能。
- 具體功能：
- 質量反饋：使用者可以報告翻譯結果中的錯誤，幫助提升翻譯質量。
- 功能建議反饋：使用者可以提出對雲譯網功能增加或修改的建議，促進產品迭代。
- 提交反饋：使用者填寫完反饋內容後，可以提交給雲譯網團隊，以便團隊進行後續處理。
7. 使用者個人中心頁面
- 意義：使用者檢視和修改個人資訊的頁面。
- 具體功能：
- 使用者資訊展示：顯示使用者名稱、頭像、繫結手機號和郵箱等資訊，方便使用者管理個人資訊。
- 個性化設定快捷入口：提供快捷入口，方便使用者調整個性化設定。
- 相關設定選項：包括語音設定、發音方式和隱私管理等，讓使用者全面控制個人賬戶。
2 後臺管理系統原型
連結：https://rp.mockplus.cn/run/GN5wyZx9NE/y7vEr9Pml
1. 儀表盤頁面
- 意義：提供網站整體執行情況的概覽，包括關鍵資料指標和統計資訊。
- 具體功能：
- 網站資料：展示網站點選數、新增使用者數、使用者活躍度等關鍵資料。
- API使用統計：顯示API的請求次數、成功率等統計資訊。
- 使用者管理：提供使用者賬戶管理和請求次數的概覽。
- 日誌與分析：展示日誌記錄和資料分析的結果。
2. 使用者管理頁面
- 意義：管理員管理使用者資訊的頁面，用於維護使用者資料和許可權。
- 具體功能：
- 使用者列表展示：以表格形式列出使用者資訊，包括使用者ID、使用者名稱、手機號、郵箱、上次活動時間等，方便管理員檢視和管理。
- 操作按鈕：提供檢視、修改和封禁使用者的功能，增強使用者管理的靈活性。
3. API管理頁面
- 意義：管理API金鑰和監控API使用情況的頁面。
- 具體功能：
- 管理API金鑰：允許管理員檢視和修改API金鑰，確保API的安全性。
- API使用統計：展示API的請求次數、成功率等統計資訊，幫助管理員監控API的使用情況。
- API效能監控：提供API響應時間和效能的監控，確保API的穩定性。
4. 日誌與分析頁面
- 意義：記錄和分析系統日誌，幫助管理員瞭解系統執行情況和使用者行為。
- 具體功能：
- 日誌記錄：展示系統執行日誌，包括使用者操作日誌和API請求日誌。
- 資料分析：提供資料分析工具，幫助管理員從日誌中提取有價值的資訊。
5. 設定頁面
- 意義：提供系統設定和個性化選項的頁面。
- 具體功能：
- 使用者設定：允許管理員配置使用者相關的設定，如認證方式、通知方式等。
- 系統設定：提供系統級別的設定選項，如語言偏好、字型大小等。
6. 幫助與支援頁面
- 意義：提供使用者幫助文件和聯絡方式，幫助使用者解決問題。
- 具體功能：
- 使用者幫助文件：提供詳細的使用指南和常見問題解答。
- 聯絡方式：展示客服的聯絡方式，方便使用者在遇到問題時能夠及時聯絡到支援團隊。
三、使用者互動
1 互動邏輯
- 導航互動：使用者可透過頂部導航欄和側邊欄進行頁面切換，實現快速導航。
- 操作互動：使用者透過點選按鈕、輸入文字、選擇選單等方式與系統進行互動，實現功能操作。
2 導航設計
- 前臺導航：設計簡潔明瞭，主要功能入口透過頂部導航欄展示，方便使用者快速找到所需功能。
- 後臺導航：側邊欄列出頁面主要管理功能，方便管理員快速切換至不同管理模組。
3 反饋機制
- 操作反饋：系統在使用者完成操作後提供實時反饋，如翻譯完成提示，增強使用者體驗和操作的直觀性。
後端設計
本次資料庫設計主要使用 MongoDB，相比於傳統的 Mysql 資料庫，MongoDB 有著更強大的靈活性，其JSON 文件結構能更自然地表示巢狀物件和陣列，適合儲存個性化翻譯內容和使用者反饋等複雜資料。使用者模型、翻譯記錄等資料結構可能隨業務變化而調整，MongoDB 的靈活性也使資料結構的改變更便捷
一、資料庫設計
1 資料結構設計
使用者(userInfo + termLibrary + feedback + loginRecords)
{
"_id": "ObjectId", // 使用者在 MongoDB 中的唯一識別符號
"username": "String", // 使用者名稱，新增唯一索引
"password_hash": "String", // 密碼雜湊值
"email": "String", // 使用者郵箱，新增唯一索引
"created_at": "Date", // 註冊時間
"updated_at": "Date", // 最後登入時間
"term_library": [ // 使用者的個性翻譯記錄，巢狀陣列
{
"original_content": "String", // 原文內容
"translation": "String" // 個性翻譯內容
}
],
"feedbacks": [ // 使用者反饋巢狀陣列
{
"feedback_text": "String", // 反饋內容
"created_at": "Date" // 反饋時間
}
],
"login_records": [ // 登入記錄巢狀陣列
{
"login_time": "Date", // 登入時間
"login_location": "location" // 登入地點
"logout_time": "Date" // 登出時間
}
]
}
-
透過將userInfo + termLibrary + feedback + loginRecords巢狀起來，避免跨集合(collection)查詢
-
考慮為 email 或者 username 新增唯一索引，以防止重複註冊
翻譯和對話記錄（Translation_Conversation_Records）
{
"_id": "ObjectId", // 翻譯記錄的唯一識別符號
"user_id": "ObjectId", // 關聯使用者ID，引用 Users 集合
"original_content": "String", // 原文內容
"translated_content": "String", // 譯文內容
"dialogs": [ // 多輪對話巢狀陣列
{
"text": "String", // 對話內容
"timestamp": "Date" // 時間戳
}
],
"original_language": "String", // 原語言
"target_language": "String", // 翻譯目標語言
"created_at": "Date" // 建立時間
}
-
將翻譯內容和對話內容進行結合，有利於大模型根據上下文來提供體驗更好的翻譯結果
-
將多輪對話 dialog 設計為巢狀陣列，方便儲存多輪對話資訊
-
為 user_id 和 created_at 建立複合索引，最佳化查詢效率
翻譯校對記錄集合（Translation_Proofread_Records）
{
"_id": "ObjectId", // 校對記錄的唯一識別符號
"user_id": "ObjectId", // 關聯使用者ID，引用 Users 集合
"original_content": "String", // 原文內容
"translated_content": "String", // 譯文內容
"proofread_time": "Date", // 校對時間
"checks": [ // 校對內容的巢狀陣列
{
"type": "String", // 檢查型別，如 "grammar" 或 "content"
"result": "String" // 檢查結果，得分
}
]
}
2 完整資料庫設計
1.關係資料模型
Ⅰ 使用者表（Users）
Ⅱ 個性翻譯表（Term_Library）
Ⅲ 使用者反饋表（User_Feedback）
Ⅳ 翻譯和對話記錄表（Translation_Conversation_Records）
Ⅴ 經典翻譯快取表（Cache）
Ⅵ 登入記錄表（Login_Records）
Ⅶ 翻譯校對記錄表
- Ⅰ 使用者表（Users）
| 欄位名 | 資料型別 | 描述 |
|---|---|---|
| user_id | VARCHAR(20) | 使用者id (主鍵) |
| username | VARCHAR(255) | 使用者名稱 |
| password_hash | VARCHAR(255) | 密碼雜湊值 |
| VARCHAR(255) | 使用者郵箱 | |
| created_time | DATETIME | 註冊時間 |
| updated_time | DATETIME | 最後登入時間 |
- Ⅱ 個性翻譯表（Term_Library）
| 欄位名 | 資料型別 | 描述 |
|---|---|---|
| term_id | INT | 個性翻譯表唯一標識 (主鍵) |
| user_id | VARCHAR(20) | 使用者ID（外碼） |
| original_content | VARCHAR(255) | 原文內容 |
| translation | VARCHAR(255) | 對應個性翻譯 |
- Ⅲ 使用者反饋表（User_Feedback）
| 欄位名 | 資料型別 | 描述 |
|---|---|---|
| feedback_id | INT | 反饋唯一標識 (主鍵) |
| user_id | VARCHAR(20) | 使用者ID（外碼） |
| feedback_text | TEXT | 反饋內容 |
| created_time | DATETIME | 反饋時間 |
- Ⅳ 翻譯和對話記錄表（Translation_Conversation_Records）
| 欄位名 | 資料型別 | 描述 |
|---|---|---|
| record_id | INT | 記錄唯一標識 (主鍵) |
| user_id | VARCHAR(20) | 使用者ID(外碼) |
| translation_type | INT | 翻譯型別（0表示文字，1表示圖片） |
| original_content | TEXT | 原文內容 |
| original_image_path | VARCHAR(255) | 原圖路徑 |
| translated_content | TEXT | 譯文 |
| diaglog | TEXT | 對話內容 |
| original_language | VARCHAR(10) | 源語言 |
| target_language | VARCHAR(10) | 目標語言 |
| created_time | DATETIME | 建立時間 |
- Ⅴ 經典翻譯快取表（Cache）
| 欄位名 | 資料型別 | 描述 |
|---|---|---|
| cache_id | INT | 快取唯一標識 (主鍵) |
| source_content | TEXT | 快取的原文 |
| translated_content | TEXT | 快取的翻譯文字 |
| cache_time | DATETIME | 快取時間 |
- Ⅵ 登入記錄表（Login_Records）
| 欄位名 | 資料型別 | 描述 |
|---|---|---|
| login_id | INT | 登入記錄唯一標識 (主鍵) |
| user_id | VARCHAR(20) | 使用者ID（外碼） |
| login_time | DATETIME | 登入時間 |
| logout_time | DATETIME | 登出時間 |
- Ⅶ 翻譯校對記錄表
| 欄位名 | 資料型別 | 描述 |
|---|---|---|
| check_id | INT | 翻譯校對記錄唯一標識（主鍵） |
| user_id | VARCHAR(20) | 使用者id（外碼） |
| original_content | TEXT | 原文內容 |
| translated_ontent | TEXT | 譯文 |
| grammer_check | TEXT | 語法檢查 |
| content_check | TEXT | 內容及風格一致性檢查 |
2.ER圖
- 使用者表、登入記錄表和使用者反饋表的關係
- 使用者表、翻譯對話記錄、翻譯校對、個性翻譯表的關係
- 經典翻譯快取表的關係
3.物件關係對映
-
使用者表、登入記錄表與 User 類：
- user_id -> User類中的屬性： userId
- username -> User類中的屬性： username
- email -> User類中的屬性： email
-
翻譯和對話記錄表與 TranslationRecord 類、TranslationService類：
- record_id -> TranslationRecord類中的屬性： recordId
- user_id -> user類中的屬性： userId
- original_content -> TranslationRecord類中的屬性： sourceText
- translated_content -> TranslationRecord類中的屬性： translatedText
- translation_type -> TranslationRecord類中的屬性：TranslationType
- original_language -> TranslationService類中的屬性： selectSourceLanguage
- target_language -> TranslationService類中的屬性： selectedTargetLanguage
- original_image_path -> TranslationService類中的方法：translateImage
- created_time -> TranslationRecord類中的屬性：DateTime
-
使用者反饋表與 Feedback 類：
- feedback_id -> Feedback類中的屬性：feedbackId
- user_id -> user類中的屬性：userId
- feedback_text -> Feedback類中的屬性： content
- created_time-> Feedback類中的屬性： DateTime
-
個性翻譯表：對應使用者個性化翻譯功能
-
經典翻譯快取表：對應快速響應的實時翻譯功能（使用快取機制提高常見句子的響應速度）
-
翻譯校對記錄表：對應翻譯校對功能
二、後端架構
1 架構圖
API層：
- 接受並轉發前端的請求，從微服務層獲取結果並做整理返回給前端
ETCD
- 儲存管理 RPC 的 server 端和 client 端
微服務層：
- translationService：負責翻譯相關的請求
- ProofreadingService：負責文字的校對和修正工作
- 該微服務透過RPC進行通訊，實現服務之間的解耦和獨立部署，提高系統的靈活性和可擴充套件性
- 使用MongoDB作為資料儲存，確保資料的持久化和高效訪問
部署層：
- 採用Docker容器化技術，將各個微伺服器打包成容器進行部署
- 容器化技術使系統更加靈活，便於系統的擴充和維護
2 架構概述
雲譯網的後端架構需要支援高質量翻譯服務、個性化翻譯、使用者介面最佳化、實時翻譯與最佳化以及未來功能擴充等核心和輔助功能。因此，在設計後端架構時，我們需要考慮系統的可擴充套件性、高效能、高可用性和安全性。
3 核心元件
翻譯引擎
基於LLM的翻譯模型：這是雲譯網的核心元件，負責處理使用者輸入的文字、語音或圖片，並生成高質量的翻譯結果。
自定義術語庫：儲存使用者自定義的專業術語翻譯，以便在翻譯過程中使用。
使用者管理
使用者資訊儲存：儲存使用者的個人資訊，包括註冊資訊、偏好設定等。
許可權管理：管理使用者的訪問許可權，確保只有授權使用者才能訪問特定功能。
實時翻譯系統
快取機制：用於儲存常見的句子和翻譯結果，以提高響應速度。
實時翻譯處理：處理使用者的實時翻譯請求，並返回翻譯結果。
後端服務
API介面：提供RESTful介面，供前端或其他應用程式呼叫。
資料庫：儲存使用者資料、翻譯記錄等。
4 架構設計
微服務架構
-
將翻譯引擎、使用者管理、實時翻譯系統等核心元件拆分為獨立的微服務，每個微服務都有自己的資料庫和API介面。
-
微服務之間透過輕量級通訊協議（如HTTP/REST、gRPC）進行通訊。
負載均衡與容錯
-
使用負載均衡器（如Nginx、HAProxy）將請求分發到多個微服務例項上，以實現高可用性和負載均衡。
-
採用熔斷器（如Hystrix）和重試機制來處理微服務之間的呼叫失敗，提高系統的容錯能力。
資料持久化
- 使用MongoDB儲存使用者資料和翻譯記錄，確保資料的一致性和完整性。
安全性
-
使用HTTPS協議來加密使用者資料在傳輸過程中的內容，確保資料的安全性。
-
實施身份驗證和授權機制，確保只有授權使用者才能訪問特定功能。
5 功能擴充
API服務
-
提供完善的API文件和SDK，方便其他應用程式或平臺整合雲譯網的翻譯功能。
-
支援多種程式語言和開發框架的接入。
語音翻譯和圖片文字翻譯
-
引入語音識別和影像識別技術，實現語音翻譯和圖片文字翻譯功能。
-
最佳化後端系統以支援這些新功能的實時處理和高效儲存。
智慧推薦與個性化服務（*）
-
利用使用者資料和翻譯記錄進行智慧推薦，提高使用者的滿意度和忠誠度。
-
引入機器學習演算法來最佳化個性化翻譯服務，提高翻譯質量。
三、概要設計
1 用例圖
2 活動圖
3 類圖
4 時序圖
登入模組：
翻譯模組：
5 協作圖
使用者註冊：
使用者管理：
團隊協作
一、預計計劃安排表
| 周次 | 時間 | 產出 |
|---|---|---|
| 第1周 | 11月2日 - 11月8日 | 前端頁面設計、後端基礎功能實現進度達到60%以上 |
| 第2周 | 11月9日 - 11月15日 | 完成前後端設計，撰寫相關文件 |
| 第3周 | 11月16日 - 11月22日 | 前後端整合，系統功能初步演示，完成測試報告 |
| 第4周 | 11月23日 - 11月29日 | 審查程式碼，修復bug並最佳化效能，交予使用者使用，收集反饋再度最佳化 |
二、預計開發計劃分工
| 姓名 | 角色 | 負責的開發部分 |
|---|---|---|
| 侯麗珂 | 組長 | 專案整體規劃與管理，協作溝通，進度跟蹤 |
| 肖晗涵、陳鷺 | 前端開發人員 | 前端介面設計，使用者互動功能實現 |
| 戴康怡 | 前端總負責人 | 輔助前端開發，瞭解各部分功能編寫相關文件 |
| 趙弈茗 | 後端總負責人 | 後端功能實現，編寫相關文件 |
| 魏儀陽、謝李東 | 後端開發人員 | API設計與實現，資料庫管理 |
| 鄭嘉祺 | 前端開發員兼測試助理 | 前端頁面設計，兼輔助測試的實現 |
| 鄭冰智 | 測試負責人 | 負責測試計劃的制訂與實現，後續執行的反饋與改進，編寫測試相關文件 |
| 朱胤帆 | 運維及對接員 | 負責執行維護及前後端對接 |
三、團隊協作記錄
1 任務初分工
2 分任務跟進與實現
3 專案管理平臺協作
- 使用摹客RP多人實時協作進行原型設計
- 使用飛書線上表格實時記錄/檢視任務進度
- 使用飛書線上文件協作編寫架構文件
4 GitHub貢獻記錄
1.GitHub團隊倉庫連結：https://github.com/Miyer003/YunYiWang
2.當然不是草臺班子_系統設計說明書：https://1drv.ms/b/c/1378ce4530586b37/EbHrFIU7jZhPp6OCbOOw9kUBXIV0YAiSge6rhV_rTsofQQ?e=YxcxxL
3.當然不是草臺班子_資料庫設計說明書：https://1drv.ms/b/c/1378ce4530586b37/EWMRUXszWcVKnL1paqNgcToBRwa8yX2ZVFbm4UJ-W2E2jg?e=i3DynT
4.當然不是草臺班子_原型設計+概要設計答辯PPT：https://1drv.ms/b/c/1378ce4530586b37/EfzoHKIpcglPm2FSiaKxneIBTnJfEMeoX5UW5grQLLxK1A?e=91VR7Y