系統全景 —
一個請求的旅程

一、把前面幾章拼成一張圖

走到藍帶最後一章，你手上其實已經有三塊拼圖。ch06 學過網頁三兄弟，HTML 負責骨架，CSS 負責外觀，JavaScript 負責互動。ch15 學過資料的形狀，清單（array）、物件（object）和 JSON 讓程式知道一筆訂單長什麼樣子。ch16 學過 API（Application Programming Interface），也就是程式和另一個服務說話的窗口。這章要做的事，就是把這三塊拼起來。

一個常見的網路服務，可以先想成三個地點。第一個是店面，也就是使用者看到、摸到、點到的畫面，工程上叫前端（frontend）。第二個是辦公室，也就是收到需求後真正判斷規則的地方，工程上叫後端（backend）。第三個是倉庫，也就是長期保存資料的地方，工程上叫資料庫（database）。你點購買，不是直接衝進倉庫拿商品，而是從店面把一張清楚的單子交給辦公室，辦公室查倉庫、寫紀錄，再把結果交回店面。

為什麼要分三層？因為每一層的責任不同。前端關心畫面是否好懂、按鈕是否能點、錯誤訊息是否清楚。後端關心規則是否正確，例如價格有沒有被竄改、庫存是否足夠、會員是否有折扣。資料庫關心資料是否被正確保存，例如訂單編號、商品數量、付款狀態。三層分工清楚，壞掉時才有辦法定位。

跟 AI 討論時，這張圖非常有用。你可以說「前端的數量按鈕已經改了，但後端收到的 quantity 還是 1」，這比「購物車怪怪的」清楚太多。AI 像實習生，指令越能指出地點、資料和期待結果，它越不容易亂猜。

const system = { frontend: '店面：顯示商品與購買按鈕', backend: '辦公室：檢查規則與建立訂單', database: '倉庫：保存商品與訂單資料' }; console.log(system);

二、三層架構：店面、辦公室、倉庫

先看店面，也就是前端。前端不是「比較不重要的外觀」，它是使用者真正接觸到的系統。商品卡片、數量選擇、購買按鈕、載入中動畫、庫存不足提示，都在這一層。前端的工作，是把人的動作整理成電腦看得懂的資料，再把後端回來的結果翻譯成人看得懂的畫面。

再看辦公室，也就是後端。後端像店裡真正處理訂單的人。它不能只相信前端送來的內容，因為前端在使用者的瀏覽器裡，理論上可能被改動。假設前端送來「一台相機 10 元」，後端要用自己的商品資料重新確認價格，而不是照單全收。它也會檢查登入狀態、折扣規則、庫存、付款狀態，然後決定這筆訂單能不能成立。

最後是倉庫，也就是資料庫。資料庫不是一個普通檔案夾，而是專門保存、查詢、更新資料的系統。它可以回答「商品 A 還剩幾個」、「會員 123 有哪些訂單」、「這筆付款是否完成」。你可以把資料庫想成很嚴謹的倉庫管理員，它不負責跟客人聊天，也不負責畫漂亮畫面，它負責把資料放在正確的位置，並且在需要時找回來。

三層不是三個人各做各的，而是一條合作鏈。前端收集需求，後端判斷能不能做，資料庫提供事實和保存結果。當 AI 幫你做專案時，如果它把所有規則都塞在前端，短期看起來會動，長期就很危險。比較好的做法是，前端可以先做友善提醒，但真正重要的檢查要放在後端。

const order = { itemId: 'camera-01', quantity: 2, userId: 'u100' }; const frontendMessage = `前端送出：${order.quantity} 個 ${order.itemId}`; const backendCheck = order.quantity > 0 ? '後端檢查：數量合理，繼續查庫存' : '後端檢查：數量錯誤，拒絕'; console.log(frontendMessage); console.log(backendCheck);

三、按下購買後的八站旅程

現在把鏡頭拉近。使用者按下「購買」後，第一站是點擊事件。前端知道有人按了按鈕，開始收集商品編號、數量、會員資料。第二站是整理請求（request），也就是把資料包成一個清楚的包裹，例如「會員 u100 想買 camera-01 兩個」。這個包裹通常會送到某個 API endpoint，也就是後端開好的收件窗口。

第三站是後端收到請求。它先檢查資料格式對不對，例如商品編號是否存在、數量是不是正整數、使用者是否登入。第四站是查資料庫。後端問倉庫：「camera-01 還剩幾個？現在價格是多少？」第五站是業務規則判斷。如果庫存夠、價格正確、會員狀態沒問題，才進入下一步；如果庫存不足，旅程就在這裡被擋下，回傳一個清楚的失敗原因。

第六站是更新資料庫。這一步可能包含扣庫存、建立訂單、記錄付款狀態。它很重要，因為畫面顯示成功不代表真正成功，資料庫寫進去才算留下紀錄。第七站是後端產生回應（response），把結果包成 JSON 回給前端，例如訂單編號、總價、預計出貨日。第八站是前端更新畫面，顯示「訂單成立」或「庫存不足，請改買 1 個」。

這八站的順序不能亂。先寫訂單再查庫存，可能賣出不存在的商品。只更新畫面不寫資料庫，使用者以為買到了，店家卻完全沒有紀錄。只在前端檢查數量，後端不檢查，資料就可能被錯誤請求污染。學會追這趟旅程，你看系統問題時會從「一整坨壞掉」變成「第幾站沒有交棒」。

const journey = ['1 點擊購買', '2 前端打包 request', '3 後端收到', '4 查資料庫', '5 檢查庫存與規則', '6 扣庫存並寫訂單', '7 回傳 response', '8 前端更新畫面']; journey.forEach(step => console.log(step));

四、故障定位：先問問題在哪一層

全景圖最大的價值，是讓你開始會定位。假設使用者按鈕完全按不了，滑鼠點下去沒有任何反應，第一個懷疑通常在前端。可能是按鈕被蓋住、事件沒有綁好、JavaScript 報錯停住。這時你問 AI，可以貼上按鈕附近的 HTML 和 JavaScript，說明「期待點擊後送出請求，實際完全沒有 console 輸出」。

如果按鈕有反應，也有送出資料，但回來「401 未登入」或「400 數量錯誤」，問題多半在請求資料或後端檢查。這不是壞事，代表後端有在守門。你要看的是前端送出的資料是否符合後端期待。欄位名稱叫 quantity 還是 count？數量是數字 2，還是文字 "2"？ch15 學過資料形狀後，你就知道很多 bug 其實是形狀不合。

如果後端說成功，但重新整理後訂單消失，懷疑就要往資料庫或寫入流程移動。也可能是後端只是回傳了假成功，沒有真的寫入。這時驗證方式不是一直按畫面，而是問「資料庫裡有沒有這筆訂單？」在實際工具中，你可能會看管理後台、log，或請 AI 幫你加一段查詢確認。

還有一類問題在網路層。使用者手機斷線、伺服器暫時太忙、API 回應太慢，都會讓前端等不到結果。好的前端不能只卡住不動，它應該顯示載入中、逾時提示，必要時讓使用者重試。你不需要成為網路工程師，但要知道「沒有回應」和「回應說失敗」是兩種不同情況。

function locateProblem(signal) { if (signal === 'button-dead') return '前端：按鈕或事件可能壞了'; if (signal === '401') return '後端/API：登入或權限檢查沒有通過'; if (signal === 'saved-but-missing') return '資料庫：寫入或讀取流程要檢查'; return '先蒐集更多訊號'; } console.log(locateProblem('401')); console.log(locateProblem('saved-but-missing'));

五、部署與詞彙表：把作品放到世界上

你在自己電腦或教材頁面裡跑 code，只是本機可以看。部署（deployment）指的是把 code 放到一台全世界能連到的電腦上，讓別人的手機和瀏覽器也能打開。那台電腦常被叫伺服器（server），現在很多伺服器在雲端（cloud），意思不是飄在天空，而是由雲端公司幫你管理機器、網路和基本維運。

託管（hosting）是提供放網站的服務。你把前端網站交給 hosting，它幫你把檔案送到使用者附近，讓頁面載入。網域（domain）是人類好記的地址，例如 example.com；真正的伺服器地址通常是一串數字或平台給的網址，domain 負責把好記名字指到正確地方。像 Vercel 這類平台常提供免費方案，足夠放很多靜態作品或小型示範；你不必現在精通平台設定，但要知道「本機能看」和「別人連得到」中間需要部署。

不同專案需要的部署也不同。只有 HTML、CSS、JavaScript 的靜態網站，通常放到靜態 hosting 就能運作。需要登入、付款、保存訂單的服務，除了前端，還需要後端和資料庫。這也是為什麼「幫我做一個網站」太模糊：你要的是展示頁、可互動小工具，還是會存資料的完整系統？不同答案會導向完全不同的架構。

到這裡，你已經有跟 AI 討論架構的基本詞彙。你可以要求它「先畫出 frontend、backend、database 的資料流，再分步實作」，也可以要求它「每一步都列驗收條件」。回頭看 ch09 的工具版圖，agent 型工具在背景跑的也不是魔法，而是把畫面、API、後端服務、資料保存和部署串成一條工作流。純 vibe coder 常常只看畫面漂不漂亮；你會看資料是否從按鈕一路走到資料庫，再從回應回到畫面。這就是系統全景帶來的定位力。

const projectNeed = 'save-orders'; const architecture = projectNeed === 'static-page' ? ['frontend hosting'] : ['frontend hosting', 'backend server', 'database']; console.log(architecture.join(' + '));

檢查一下這章