1
一個網站，其實是兩個世界
這一章會出現幾個專業術語：前端、後端、API、伺服器。別緊張，每個詞第一次登場，都會用生活中的例子接住它。網站的世界有幾個關鍵術語：前端、後端、API、伺服器。別緊張，每個詞第一次登場，都會用生活中的例子接住它。看完這章，你不會寫程式，但你會「聽得懂工程師在講什麼」，這對日後用 AI 做工具、看懂它的回應、判斷該怎麼修，幫助很大。學會這些詞之後，你不會寫程式，但你會「聽得懂工程師在講什麼」，這對日後用 AI 做工具、看懂它的回應、判斷該怎麼修，幫助很大。
本章學習目標
① 用餐廳比喻分清楚「前端（外場）」與「後端（廚房）」；
② 理解 API 是前後端之間「傳話的窗口」；
③ 知道「伺服器」就是一台一直開著、服務別人的電腦；
④ 跟著走一次「拖檔案上傳」的完整旅程；
⑤ 看懂「只送文字給 AI」這個省錢又安全的設計巧思。
第 6 章那個「規格書自動評分網站」，和世界上幾乎所有網站一樣，背後其實分成兩個世界：你看得到的，和你看不到的。用餐廳來比喻最清楚。
FRONT-END · 前端
餐廳的「外場」
你走進餐廳會看到的一切：菜單、桌椅、燈光、服務生。對應到網站，就是你在瀏覽器裡看得到、點得到、摸得到的畫面。
在本課專案裡：那個「拖曳檔案到這裡」的上傳框、按鈕、批改結果的排版，全都是前端。
BACK-END · 後端
餐廳的「廚房」
你看不到，但真正在「處理事情」的地方。客人不會跑進廚房，但你點的菜都是在那裡做出來的。
在本課專案裡：後端負責收下你上傳的檔案、把它讀成文字、交給 AI、再把結果整理好送回來。
記住這組對照就好
前端是「外場」（你看到的），後端是「廚房」（默默處理的）。 之後不管聽到誰在講網站，把這兩個詞往餐廳一套，多半就懂了。
2
它們怎麼溝通？靠「API」這個服務鈴
前端與後端怎麼溝通？靠「API」這個服務鈴
外場和廚房要合作，需要一個傳話的管道。在餐廳裡，是服務生把點單送進廚房、再把菜端出來。前端（像餐廳外場）和後端（像廚房）要合作，需要一個傳話的管道。在餐廳裡，是服務生把點單送進廚房、再把菜端出來。在網站裡，這個「傳話管道」就叫 APIAPI 是 Application Programming Interface 的縮寫。你不用記英文全名，只要記住它是「兩個軟體之間互相傳話、彼此呼叫的窗口」。（讀作 A-P-I）。
API
前後端傳話的窗口
前端透過 API 把你的檔案送進後端，後端處理完，再透過 API 把結果送回前端。就像你按桌上的服務鈴，服務生就會過來、把你的需求帶進廚房。
本課專案裡那個網址 /api/upload，就是「上傳檔案專用的服務鈴」。以檔案上傳功能為例，網址 /api/upload 就是「上傳檔案專用的服務鈴」。
你不用記它的英文全名，只要記住一句話：API 就是「前端和後端之間傳話的窗口」。 日後你請 AI 幫你「串接某個服務的 API」，腦中浮現的畫面就是「幫我接上那個服務的服務鈴」。
3
那「伺服器」又是什麼？
你可能還聽過一個詞：伺服器伺服器（Server）就是一台「一直開著、專門回應別人請求」的電腦。你的手機、筆電是「客戶端」，向伺服器要資料；伺服器則負責回應。（Server）。簡單說：
伺服器 ＝ 放廚房的那棟房子
廚房總要蓋在某個地方吧？伺服器就是放廚房（後端）的那棟房子，一台一直開著、專門服務別人的電腦。把後端想成餐廳的廚房，廚房總要蓋在某個地方吧？伺服器就是放廚房（後端）的那棟房子，一台一直開著、專門服務別人的電腦。
- 你自己練習時，這個「房子」就是你自己的電腦（所以第 9 章會在自己電腦上跑起來，等於在自家開了一間只有你進得去的店）。
- 等到要讓全世界都能用，會把廚房搬到雲端的伺服器上（第 14 章「部署上線」會講）。
把三個詞串起來：前端是外場、後端是廚房、伺服器是放廚房的房子，API 是外場與廚房之間的服務鈴。 一個網站就是這四者合作的成果。
4
一次上傳，到底發生了什麼事？
現在把前面的詞串起來，看一次完整的旅程。當你把一份 PDF 拖進上傳框、放手的那一刻，背後跑了這幾步：前端（外場）、後端（廚房）、API（服務鈴）、伺服器（房子），把這四個詞串起來看一次完整的旅程。當你把一份 PDF 拖進上傳框、放手的那一刻，背後跑了這幾步：
1
前端收下檔案
外場接過你的文件。（你看得到的上傳框）
2
透過 API 送進後端
服務生把文件送進廚房。（按下那個 /api/upload 服務鈴）
3
後端把檔案「讀成純文字」
廚房把食材洗好切好，PDF 變成一段可閱讀的文字。
4
把文字交給 AI 批改
主廚下廚，依照評分標準給分、給建議。
5
把 AI 的結果存進 Google 試算表
順手把這次的點單記錄下來。（第 10 章會做這段串接）
6
再透過 API 把結果送回前端
服務生把做好的菜端回你桌上。
7
前端把結果漂亮地顯示出來
擺盤上桌，你看到評分和建議。
整個過程通常幾十秒。你只做了「拖檔案、放手」這一個動作，後面六步都是它自動完成的。看懂這條旅程，日後 AI 跟你說「我在後端加了一段把檔案轉文字的程式」，你就知道它在講第 3 步。
課堂活動 · 幫一個你熟悉的網站畫旅程
- 挑一個你常用的網站功能（例如在購物網站「下單」、在表單網站「送出問卷」）。
- 用本章的詞（前端／後端／API／伺服器）試著把它的「一次操作旅程」分成 5 到 7 步。用這四個詞（前端／後端／API／伺服器）試著把它的「一次操作旅程」分成 5 到 7 步。
- 不必正確無誤，重點是練習用這套比喻去「拆解」一個你看不到的後台流程。
5
一個重要的設計決定：只送「文字」給 AI
第 4 步有個關鍵細節值得你知道：後端會先把 PDF 或 Word 讀成純文字檔案交給 AI 之前有個關鍵細節值得你知道：後端會先把 PDF 或 Word 讀成純文字，然後只把文字交給 AI，原始檔案本身不會送過去。為什麼要多這一道手續？兩個原因：
REASON 1
省錢
AI 是「按處理的份量收費」的。純文字比完整檔案精簡得多，等於用更少的成本做完同一件事。
REASON 2
保護隱私與穩定
只傳必要的文字，不把整個原始檔丟給外部 AI，比較安全；而且純文字也比較不會讓 AI 消化不良。
這就是好工程師會做的「成本意識」
同樣的結果，用更聰明、更省、更安全的方式達成。這個「只送必要的東西、不送多餘的」原則，後面講金鑰、講資料安全時你會一再遇到，記住它。這個「只送必要的東西、不送多餘的」原則，在 API 金鑰與資料安全等主題也會一再遇到，記住它。
本章重點回顧
重點回顧
- 前端（Front-end）＝ 外場：你看得到、點得到的畫面。
- 後端（Back-end）＝ 廚房：看不到，但真正在處理事情的地方。
- API ＝ 服務鈴 / 服務生：前端和後端之間傳話的窗口。
- 伺服器（Server）＝ 放廚房的房子：一台一直開著、服務別人的電腦。
- 一次上傳的旅程：前端收檔 → API 送進後端 → 讀成文字 → AI 批改 → 存試算表 → 送回前端 → 顯示。
- 設計巧思：只送文字給 AI，省錢又安全。
6
真實案例解剖：把「那個批改網站」拆開來看
前面都是比喻，現在來看真的。你在第 6 章用過的那個「規格書自動批改」網站先記住比喻地圖：前端＝外場、後端＝廚房、API＝服務鈴。現在來看真的。你在第 6 章用過的那個「規格書自動批改」網站，它的程式其實就分成下面幾個檔案，剛好一個一個對得上前面學的詞。它的程式其實就分成下面幾個檔案，剛好一一對得上前端、後端、API、伺服器這幾個詞。你不用看懂程式，看「檔名」和右邊的「標籤」就好。
一、它的檔案長這樣（每個檔對應一個角色）
spec-auto-grader/ ← 整包程式，跑在「伺服器」上（上線是 Vercel，自己練習是你的電腦）
├─ app/
│ ├─ page.tsx ← 前端：你在瀏覽器看到的那個畫面
│ ├─ components/FileUploader.tsx ← 前端：拖檔案的上傳框
│ └─ api/upload/route.ts ← 後端＋API：廚房的入口
└─ lib/
├─ parse.ts ← 後端：把 PDF／Word 讀成純文字
└─ gemini.ts ← 後端：把文字送去給 AI 批改
看出來了嗎？前端和後端真的是不同的檔案。使用者只會碰到 page.tsx 那層（外場），route.ts 和 lib/ 是廚房，從頭到尾不露臉。
二、打開廚房入口 route.ts，它的工作流程
這支檔案就是那個「服務鈴」收到請求後、廚房開始做的事。原始碼裡每一步都有中文註解，整理出來就是：
- 接收檔案：收下前端送來的 PDF／Word。
- 驗證類型：檢查是不是 PDF 或 Word，不是就退回。
- 驗證大小：太大就請使用者壓縮後再傳。
- 讀成純文字：把 PDF／Word 轉成文字，原始檔絕不送給 AI（這正是上一段說的省錢又安全）。讀成純文字：把 PDF／Word 轉成文字，原始檔絕不送給 AI（只送必要的文字，省錢又安全）。
- 交給 AI 批改：把文字送去給 Gemini，遇到忙線會自動重試。
- 寫進試算表：把原文和 AI 回饋追加一列到 Google 試算表。
- 送回前端：把批改結果回傳，畫面就顯示出來。
這 7 步，就是這章「上傳旅程」在真實程式裡的樣子。其中第 4、5 步，正好是你等一下測驗會考到的重點。這 7 步，就是一次「檔案上傳批改」在真實程式裡的完整旅程。其中第 4、5 步（轉成純文字、交給 AI），是最值得記住的重點。
三、四個詞，一次對照清楚
| 這章的詞 | 餐廳比喻 | 在這個網站裡是誰 |
|---|
| 前端 | 外場（看得到） | page.tsx、FileUploader.tsx：上傳畫面與上傳框 |
| 後端 | 廚房（看不到） | route.ts、lib/：收檔、轉文字、批改、存檔 |
| API | 服務鈴／傳話窗口 | 前端把檔案送到網址 /api/upload，這個網址就是 API |
| 伺服器 | 放廚房的房子 | 跑這包程式的電腦：上線是 Vercel，練習是你自己的電腦 |
學會這張對照表，你就「聽得懂」了
以後 AI 或工程師跟你說「我幫你加了一支 API」「這段邏輯放後端」「部署到伺服器」，你腦中就能對到上面這張圖，知道它在指哪一塊。這就是這一章的目標。