前一篇整理了 VoCare 的整體系統架構，今天來介紹目前實際使用的技術，以及為什麼會這樣選。

VoCare 的功能不少，所以我希望前端、後端與 AI 模組之間可以盡量分開，未來要新增功能或替換模型時比較容易維護。

前端：Next.js + TypeScript

目前 VoCare 的前端主要使用 Next.js 與 TypeScript。

前端負責：

• 顯示使用者介面
• 一般模式與長者模式切換
• 行程與提醒畫面
• 家屬相關資訊
• 和後端 API 溝通

因為 VoCare 未來會有不少功能頁面，所以我希望前端可以用元件化的方式拆分，而不是把所有功能都寫在同一個頁面裡。

後端：Python

後端主要使用 Python。

除了處理一般 API 與資料之外，Python 本身也很適合之後整合 AI、影像分析與語音相關功能。

整體流程大概會是：

前端
↓
後端 API
↓
AI / 語音 / 影像等模組
↓
整理結果
↓
回傳前端

為何要使用 Docker？

開發到後面，我也開始使用 Docker 建立本地開發環境。

前端和後端需要的執行環境不同，如果每次換電腦或重新安裝都要手動設定一次，很容易遇到版本不一致的問題。

Git 與 GitHub

程式碼目前也使用 Git 進行版本控制，並推送到 GitHub。

隨著功能越來越多，我覺得版本控制非常重要，尤其是修改大型功能時，如果出現問題至少還能知道自己改了哪些地方。

目前也會使用不同 branch 開發部分功能，完成後再整理進主要專案。

Day 4 小結

目前 VoCare 的開發環境可以簡單整理成：

Frontend：Next.js + TypeScript
Backend ：Python
Environment：Docker
Version Control：Git + GitHub

現階段我比較重視的是先讓各個部分分工清楚，之後不論加入語音、AI 對話、影像分析或其他功能，都可以在原本架構上繼續擴充。