回顧與練習

關鍵要點

• 每個應用都是四個部分：一個 frontend（使用者看到的東西）、一個 backend（規則和邏輯）、一個資料庫（資料持久存放的地方）、以及託管（這一切執行的地方）。frontend 從不直接碰資料庫——它要經過 backend。
• 在瀏覽器裡，HTML 是結構，CSS 是樣式，JavaScript 是行為；程式碼通過改變 DOM 來改變頁面。
• 你不用什麼都自己寫——包（由 npm 通過 package.json 和一個鎖檔案來管理）以依賴的形式提供了已經解決好的問題。
• 環境變數讓金鑰待在程式碼之外，並讓同一份程式碼在 dev 和 prod 裡都表現正確。
• 一個請求的流動是 frontend → 託管 → backend → 資料庫再返回；說出一個問題住在哪一層，就解決了它的一半。

動手試試

挑一個你每天用的應用，大聲地把一個動作沿著各層敘述一遍："我點了傳送（frontend）→ 它去到他們的伺服器（backend）→ 伺服器檢查我是否被允許並儲存了這條訊息（資料庫）→ 然後聊天介面更新了（frontend）。" 然後猜猜下面每個問題住在哪一層：按鈕看起來沒對齊；應用說 "你還沒登入"；昨天的一條訊息不見了。把這種 "說出是哪一層" 練熟，正是這本書剩下部分所建立的那項技能。

本章的 prompt

我在學應用是怎麼拼到一起的。這是我想要的一個功能：
<用一句話描述使用者應該能夠做什麼>

在寫任何程式碼之前，請幫我按層拆解它：
- Frontend：使用者看到什麼，以及什麼會被髮出去
- Backend：必須跑哪些規則/檢查，以及在哪裡跑
- Database：需要儲存或讀取哪些資料
- 涉及到的任何 env vars 或配置（尤其是金鑰）

然後用編號的步驟描述從點選到結果的請求流動。
請用大白話——我想在寫程式碼之前先理解它的樣子。