什麼是全端應用程式？白話解說

全端應用程式是一個包含它運作所需每一層的應用程式：人們看到並點擊的前端、在伺服器上執行並執行規則的後端，以及記住所有資料的資料庫。一個能儲存你的待辦事項、讓你從任何裝置登入，而且不會讓其他人看到你清單的待辦應用程式，就是全端。只顯示你營業時間的單一頁面則不是。

「Stack」指的是層層疊起來的技術，「Full」則代表每一層都在。

為什麼使用 AI 建置時這很重要

當你向 AI 建置工具描述應用程式時，你使用的字句會決定它會建置哪些層。「做一個顯示我們菜單的頁面」會產生前端。「讓顧客能從菜單點餐，並讓廚房看到新訂單」則需要三層都在，因為訂單必須被儲存、在兩種使用者之間共享，並且保持私密。

了解其中的差異，能在三方面幫助你：

• 你會提出正確的要求。 如果你要儲存資料，就要明確說出來。一個只做前端的建置工具，看起來像完成了，但一重新整理就會忘記一切。
• 你能看出虛假的完整性。 使用範例資料的示範，可能和真正可運作的應用程式看起來一模一樣。了解這些層，能讓你確認資料真的有地方存放。
• 你了解營運成本。 只有前端可以作為靜態檔案提供服務。後端與資料庫則是在伺服器上執行的程式，而大部分的主機費用就來自於此。

日常生活的比喻：餐廳

想像一間餐廳。

• 用餐區就是前端。 菜單、餐桌與服務生的點菜單。它是客人看到的部分，應該讓人感到愉快、容易使用。
• 廚房就是後端。 客人不會進去。它接受點單、確認餐點是否供應、烹煮料理，並拒絕不合理的要求。規則就存在這裡。
• 食材庫與訂單簿就是資料庫。 它們記錄有什麼、點了什麼，因此換班時不會遺漏任何東西。

只有用餐區的餐廳可以給你看一份漂亮的菜單，但你吃不到東西。這就是假裝自己是全端的、只有前端的應用程式。

三層的更多細節

這些層以固定的順序彼此溝通。前端透過 API 向後端請求某些東西，也就是後端接受的一組定義好的請求。後端檢查請求、讀取或寫入資料庫，然後回傳答案。前端絕不直接與資料庫溝通。

這個順序是整個技術堆疊中最重要的安全概念。前端的任何東西，訪客都可以讀取與修改，因為它在他們的裝置上執行。所以規則，例如「只有擁有者能看到這份發票」或「優惠券只能使用一次」，必須在後端強制執行。若想進一步了解這種切分，請參閱前端與後端。

實例：課程預約應用程式

假設你經營一間瑜伽教室，想讓人線上預約課程。

訪客的操作： 打開網站，看到本週的課程，點選一堂，登入後預約一個名額。

背後發生的事：

1. 前端顯示課表。為了填滿課表，它會向後端詢問：「本週有哪些課程？每堂還剩幾個名額？」
2. 後端向資料庫查詢課程，並計算每堂課的預約數，然後回覆。
3. 訪客點選預約。前端送出「為這位已登入的人預約第 42 號課程」。
4. 後端檢查：這個人真的已登入嗎？課程是否已滿？他是否已經預約過？只有一切正常，才會在資料庫中寫入一筆新的預約資料列。
5. 後端回覆「已預約」，前端顯示確認訊息。
6. 之後，教室擁有者登入並查看課程清單。後端會先確認她是管理員，才會顯示所有人的姓名。

現在想像這如果只做前端會怎樣。課表也許能顯示，預約按鈕也許會出現漂亮的勾勾，但一重新整理，預約就消失了；「剩餘名額」對其他人來說也會是錯的，而擁有者永遠看不到這筆預約。第 4 步的檢查會完全缺席。這就是實際的差別。

關鍵術語

• 前端（客戶端）： 在瀏覽器中執行的部分。
• 後端（伺服器端）： 在伺服器上執行的部分，也稱為 API 伺服器。
• 資料庫： 以有組織的方式儲存資料的地方。請參閱什麼是資料庫。
• API： 後端接受的、來自前端或其他程式的請求清單。
• 驗證（Authentication）： 確認某人是誰（登入）。授權（Authorisation）： 確認他可以做什麼。
• 部署（Deployment）： 把所有層放到伺服器上，讓大眾可以使用。
• 單體式 vs 服務式： 一個包辦所有工作的程式，對比數個較小的程式（例如一個網站加上一個獨立的 API）。兩者都是全端。

常見錯誤與誤解

• 「看起來完成了，所以就是完成了。」 範例資料與一個看似能用的按鈕，並不等於資料已被儲存。請重新整理頁面、在私密視窗中打開，確認資料仍然存在。
• 把規則放在前端。 隱藏一個按鈕並不是安全措施。如果後端沒有檢查，任何知道請求格式的人都能發出該請求。
• 把機密金鑰放在前端。 付款或 AI 服務商的金鑰放在瀏覽器程式碼中，每位訪客都能讀到。金鑰應該放在後端，以環境變數的形式存在。請參閱環境變數與機密資訊。
• 以為全端就代表複雜。 一個小型全端應用程式可以只有幾個畫面、少數後端路由，以及三張資料表。這是對各層的描述，而不是規模的衡量。
• 以為你必須自己挑選每一項技術。 對於第一個版本，任何合理、廣泛使用的技術堆疊都可以。更重要的，是對資料與規則的清楚描述。

該向你的 AI 建置工具要求什麼

即使你不說出層的名稱，也要用這三層來描述應用程式：

• 資料：「把課程（名稱、時間、容量）與預約（課程、人員、預約時間）存進資料庫。」
• 規則：「課程不能超過容量。同一人只能預約同一堂課一次。只有管理員能看到誰預約了。」
• 畫面：「每週課表、預約確認頁面、按課程列出預約的管理頁面。」
• 檢查：「這些規則必須在伺服器上強制執行，不能只在頁面上。API 金鑰要放在伺服器端。」

然後像懷疑者一樣測試：重新整理、用兩個不同的人登入、試著看你不該看到的資料。用 AI 建置應用程式指南會端到端地走過這個循環。

Mythex 上的全端應用程式

Mythex 會根據聊天中的描述建置全端網頁應用程式。預設情況下，新應用程式會得到 React 與 TypeScript 前端；當應用程式需要儲存資料時，Mythex 會在專案中加入專用的 Postgres 資料庫，你也可以另外要求一個獨立的 API 伺服器（例如 Python、Node、C# 或 Java）與網站並存。所有東西都會在即時預覽中一起執行，並發布到公開網址。文件中的多服務應用程式頁面，說明網站與 API 如何一起預覽與發布，而全端應用程式建置工具頁面則提供了起點。

常見問題