什麼係全棧應用程式？淺白解說

全棧應用程式係一個包含佢運作所需每一層嘅應用程式：人哋睇到同撳到嘅前端、喺伺服器上運行並執行規則嘅後端，以及記住一切嘅數據庫。一個可以儲存你嘅待辦事項、令你由任何裝置登入、又唔會俾其他人睇到你清單嘅待辦清單應用程式，就係全棧。淨係顯示你營業時間嘅單一頁面，就唔係。

「棧（stack）」只係指疊埋一齊嘅技術層次。「全（full）」即係所有層次都在。

用 AI 建構時點解重要

當你向 AI 建構工具描述一個應用程式時，你用嘅字眼決定佢會建構邊幾層。「做一個顯示我哋餐牌嘅頁面」只會產生前端。「等客人可以落單，並讓廚房睇到新訂單」就需要三層，因為訂單必須儲存、兩類用戶要共享，而且要保持私隱。

明白呢啲分別，會喺三方面幫到你：

• 你會要求啱嘅嘢。 如果你想儲存數據，就要講明。一個只建前端嘅建構工具，睇落會好似完成，但一重新整理就會忘記一切。
• 你會分辨假嘅完整性。 一個用範例數據嘅示範，睇落可以同一個可用嘅應用程式完全一樣。明白各層，你就可以檢查數據係咪真係儲存咗。
• 你會明白營運成本。 單靠前端可以作為靜態檔案提供。後端同數據庫則係喺伺服器上運行嘅程式，而大部分託管費用都由此而來。

日常比喻：餐廳

想像一間餐廳。

• 飯廳就係前端。 餐牌、餐桌同侍應嘅筆記簿。係客人睇到嘅嘢，應該令人舒服、容易用。
• 廚房就係後端。 客人唔會入去。佢負責接單、檢查菜式有冇供應、烹調，並拒絕不合理嘅要求。規則都喺嗰度執行。
• 儲物室同落單簿就係數據庫。 佢哋記住有咩存貨同已經落咗咩單，所以換班時都唔會漏咗嘢。

一間只有飯廳嘅餐廳可以俾你睇一份漂亮嘅餐牌，但你食唔到嘢。呢個就好似一個只有前端、卻假裝係全棧嘅應用程式。

三層詳解

各層會按固定次序溝通。前端透過 API 向後端要求嘢，即係後端接受嘅一套已定義請求。後端檢查請求，讀取或寫入數據庫，然後回覆答案。前端永遠唔會直接同數據庫溝通。

呢個次序係整個架構入面最重要嘅安全概念。前端嘅任何嘢都可以俾訪客讀取同更改，因為佢喺訪客嘅裝置上運行。所以規則，例如「只有擁有者可以睇呢張發票」、「優惠券只可以用一次」，必須喺後端執行。如要更深入了解分工，請睇前端 vs 後端。

實際例子：一個瑜伽班預約應用程式

假設你經營一間瑜伽室，想讓人喺網上預約堂。

訪客做嘅事： 打開網站，睇到今個星期嘅堂，撳一堂，登入，然後預訂一個位。

背後發生嘅事：

1. 前端顯示時間表。為咗填滿時間表，佢會問後端：「今個星期有咩堂，仲剩幾多個位？」
2. 後端向數據庫攞堂嘅資料，並計算每堂嘅預約數目，然後回覆。
3. 訪客撳預訂。前端送出「幫呢位已登入嘅人預訂第 42 堂」嘅請求。
4. 後端檢查：呢個人真係已登入嗎？堂滿咗未？佢哋已經預訂過未？只有全部都啱，佢先會寫入一行新嘅預約記錄到數據庫。
5. 後端回覆「已預訂」，前端就顯示確認訊息。
6. 之後，瑜伽室老闆登入，睇到堂嘅名單。後端會先檢查佢係咪管理員，然後先顯示每個人嘅名字。

而家想像呢個應用程式只係做咗前端。時間表可能會顯示，預訂按鈕亦可能會出現一個漂亮嘅剔號，但一重新整理預訂就會消失，其他人睇到嘅「剩餘位」數目亦會錯，而老闆永遠睇唔到。第 4 步，即係檢查，會完全唔見咗。呢個就係實際上嘅分別。

重點名詞

• 前端（客戶端）： 喺瀏覽器運行嘅部分。
• 後端（伺服器端）： 喺伺服器運行嘅部分，亦稱 API 伺服器。
• 數據庫： 以有組織方式儲存數據嘅地方。請參閱什麼係數據庫。
• API： 後端接受嚟自前端或者其他程式嘅請求清單。
• 驗證（Authentication）： 檢查某人係邊個（登入）。授權（Authorisation）： 檢查佢可以做咩。
• 部署（Deployment）： 將所有層放到伺服器上，俾公眾使用。
• 單體 vs 服務： 一個程式做晒所有嘢，對比幾個較細嘅程式（例如一個網站加一個獨立嘅 API）。兩者都係全棧。

常見錯誤同誤解

• 「睇落好似完成，所以就係完成。」 範例數據同一個睇落會運作嘅按鈕，並唔等於數據已經儲存。重新整理頁面、用私人視窗打開，檢查數據依然喺度。
• 將規則放喺前端。 隱藏一個按鈕唔等於安全。如果後端冇檢查，任何知道請求格式嘅人都可以直接發出請求。
• 將 secret 密鑰放喺前端。 付款或者 AI 供應商嘅密鑰如果放喺瀏覽器代碼入面，每位訪客都讀得到。密鑰應該放喺後端，儲存於環境變數入面，請參閱環境變數同 secrets。
• 以為全棧就即係複雜。 一個細嘅全棧應用程式可以只有幾個畫面、少數後端路由同三張數據庫表。佢描述嘅係各層，而唔係規模大小。
• 以為你必須親自揀每樣技術。 任何合理、廣泛使用嘅技術組合，都可以用作第一個版本。比較重要嘅係清楚描述數據同規則。

向你嘅 AI 建構工具要求咩

即使你唔講出各層嘅名稱，都可以用呢三層嘅角度去描述應用程式：

• 數據： 「將課堂（名稱、時間、容量）同預約（課堂、人、預約時間）儲存喺數據庫。」
• 規則： 「課堂人數滿咗唔可以再預訂。每個人只可以預訂同一堂一次。只有管理員可以睇到邊個預訂咗。」
• 畫面： 「每星期嘅時間表、預訂確認頁，以及管理頁面列出每堂嘅預約。」
• 檢查： 「喺伺服器上執行呢啲規則，唔可以只放喺頁面。將任何 API 密鑰放喺伺服器上。」

然後以懷疑嘅態度測試：重新整理、用兩個唔同嘅人登入、嘗試睇一啲你唔應該睇到嘅數據。用 AI 建構應用程式指南會逐步講解成個循環。

Mythex 上嘅全棧應用程式

Mythex 會由聊天描述直接建構全棧網頁應用程式。預設情況下，新應用程式會有 React 同 TypeScript 前端；當應用程式需要儲存數據時，Mythex 會為項目加入一個專用嘅 Postgres 數據庫，而你亦可以另外要求一個獨立嘅 API 伺服器（例如 Python、Node、C# 或 Java）同網站一齊運行。所有嘢都會一齊喺即時預覽中運行，並發佈到一個公開網址。多服務應用程式文件頁面講解網站同 API 點樣一齊預覽同發佈，而全棧應用程式建構工具頁面則提供起步點。

常見問題