全端概念

按下發送鍵之後

你在聊天框輸入一句話，按下發送。

畫面上很快出現回覆。這中間其實有三個角色在合作。

前端負責畫面，後端負責思考與判斷，資料庫負責記住。

三者分工清楚，這就是三層式架構，也是任何現代網路應用的基礎。

前端：你看得見的部分

前端是使用者直接互動的介面。

它做兩件事：呈現畫面、接收輸入。

聊天框、發送鍵、一則一則的對話泡泡，都屬於前端。

注意畫面上只有輸入與顯示的元件，回覆內容並非在這裡產生。

前端不決定 AI 要回什麼。它把你的輸入交出去，再把結果顯示出來。

後端：系統的大腦

後端是系統的大腦，使用者看不到它。

它處理業務邏輯，也就是「這件事該怎麼做」的判斷。

它負責安全性驗證，確認請求是否該被執行。

它還負責與外部服務溝通，例如 AI 模型。

資料庫：長期的記憶

資料庫負責持久化儲存，也就是把資料長期留住。

在聊天專案裡，它保存對話紀錄與使用者資訊。

如果訊息只留在畫面上，重新整理頁面就會消失，換一台裝置也看不到。

存進資料庫，紀錄才能長期保留，之後再取用。

一則訊息的旅程

三者之間靠 API 交換資料。API 是雙方約定好的溝通方式。

前端不會自己去找 AI，它只把請求交給後端。

後端把訊息整理成模型看得懂的格式，再送出去。

回覆抵達後，後端把結果穩定地送回前端顯示。

後端是那座橋

串接 Claude SDK 時，後端扮演橋樑的角色。

它一邊面對前端，接收請求並回傳結果。

它另一邊面對 Claude 模型，送出格式化後的訊息。

同時，它也把對話紀錄寫進資料庫。

注意所有箭頭都經過中間的後端，前端從不直接連到模型或資料庫。

一個常見的疑問

初學者常會想：既然要問 AI，前端直接呼叫模型不就好了？

但安全性驗證是後端的工作。

後端會先確認請求是否合理，再決定要不要往外送。

跳過後端，就等於跳過這道關卡。

對話一輪又一輪

聊天不是只跑一次的流程，而是不斷重複的循環。

你輸入、後端處理、模型回覆、紀錄存下、畫面更新。

然後你再輸入下一句，同樣的循環又開始。

每一輪都留下紀錄，對話才會有前後脈絡。

三者速覽

回到最初的問題：按下發送鍵後發生了什麼？

前端交出你的輸入，後端做判斷與對外溝通，資料庫記住結果。

理解這三者如何透過 API 交換資料，就是打造 AI 聊天專案的第一步。

在聊天應用中，聊天框與發送鍵屬於哪一層？

• 前端
• 後端

答案: 前端

聊天框和發送鍵是使用者直接看見並操作的介面，因此屬於前端。後端在背景處理邏輯，資料庫則負責保存資料。

在聊天應用中，負責接收聊天框輸入並顯示對話泡泡的是 _____；負責長期保存對話紀錄的是 _____。

答案: 在聊天應用中，負責接收聊天框輸入並顯示對話泡泡的是 前端；負責長期保存對話紀錄的是 資料庫。

前端負責呈現畫面與接收輸入；資料庫負責持久化儲存，讓對話紀錄在重新整理或更換裝置後仍能保留。

在三層式架構中，前端透過 API 傳送聊天訊息時，最適合把請求交給誰？

• 後端
• 資料庫
• 聊天框
• AI 模型的畫面元件

答案: 後端

前端應把請求交給後端。後端會處理請求、整理模型需要的格式，再與 AI 模型溝通。前端不應自行直接呼叫模型。