LESSON 07 · 午餐揪團頁主線 · 全課程高潮

冰山下面：信任邊界 + 引爆寫入

全課程的高潮。你會親手撞到「localStorage 辦不到共用」這面牆，理解為什麼需要後端、危險雷達怎麼運作——然後，你的「我要跟」第一次寫進全公司共用的資料。

全課程高潮信任邊界危險雷達三檢查表產出：寫進共用資料

✓

完成定義 · Definition of Done

學員點擊「我要跟」，資料寫進共用 Sheet、能被同事的裝置看到；並能親口解釋「這件事為什麼不能只靠前端完成」。

0:00–0:10	撞牆實驗：兩兩用不同裝置打開彼此頁面，看不到彼此紀錄
0:10–0:25	信任邊界 + 危險雷達三檢查表（講師舉 2 個範例）
0:25–0:35	回頭解釋撞牆原因：localStorage 撞上第三條「共用真相」
0:35–0:40	.env.local 快速帶過（一句話 + 一個真實案例）
0:40–0:45	Proxy 介紹、本堂要接的 endpoint
0:45–0:55	動手：接上 proxy，寫進共用 Sheet
0:55–1:00	驗證 + 收尾：互相打開彼此頁面確認同步

01撞牆實驗

上次課，你的「我要跟」紀錄重整還在，很不錯。現在做個實驗：把你的頁面網址傳給旁邊同事，讓他在他的手機上打開。

他看不到你剛剛加的紀錄。因為 localStorage 是「這台裝置專屬的抽屜」。而「午餐揪團」這件事，本質上就是需要大家看到同一份名單——這是今天要解決的核心問題。先別急著解，我們一步步來。

兩人各拿一支手機比對畫面、表情困惑的氛圍照 — 圖 1.1撞牆瞬間：**兩台裝置、兩個抽屜**——彼此看不到彼此的紀錄。

02前端 vs 後端＝信任邊界

前端跑在使用者的手上——他的瀏覽器、他的裝置。這代表任何懂技術的人都能打開瀏覽器工具，看到你前端的所有程式碼，甚至竄改它再送出去。後端跑在你鎖起來的房間，使用者看不到裡面的判斷。

⚖️一條鐵律

任何「必須為真」的事情——價格對不對、這個人有沒有權限、密碼對不對——都要在後端判斷。因為前端的任何判斷，使用者自己就能繞過去。

圖 2.1前端 vs 後端＝信任邊界：前端跑在使用者手上、可被看光與竄改；「必須為真」的事一定在後端判斷。

03危險雷達三檢查表

你不需要會做後端，但你要有一個雷達，知道「這件事我不該碰，要交給工程師」。三個問題，中一個就要停手：

圖 2.2危險雷達三檢查表：祕密？信任判斷？共用真相？——中一項就站在國界上了，喚工程師。

講師範例（不分組，直接講兩個）：「顯示今天的日期」→ 三條都沒中，前端自己做沒問題。「讓所有人看到同一份揪團名單」→ 中第三條，這正是我們今天的處境。

04.env.local 與 Proxy

假設要接一個需要密碼的服務，密碼放哪？答案：放進 .env.local 這類檔案，它不會被送進 Git / GitHub——即使程式碼公開，密碼也不會外流。（真實世界有很多 API key 誤傳上 GitHub 被盜刷的案例。）

而今天你要用的寫入功能，背後是工程師預先建好的代理服務（proxy）：你的前端只說「幫我加一筆」，proxy 用它自己安全藏在後端的密碼，把資料寫進共用的 Google Sheet。你的前端程式碼裡完全不會出現任何密碼。

圖 5.1Proxy＝你和危險地帶之間的代理人：前端只說「幫我加一筆」，密碼安全地藏在代理人的後端。

05動手：引爆寫入

用 Prompt A 把「我要跟」改為同時呼叫講師提供的 proxy endpoint
用 Prompt B 請 AI 自我檢查前端沒有任何密碼字串
再把網址傳給同事——這次，他看得到你的紀錄了

Wow 時刻 → 這就是後端給你的東西：共用、大家看到同一份。這是 localStorage 從第一天就辦不到的事。你今天不只是聽到「危險的交給工程師」這句話——你是親手撞到、也親手接上了。

兩人互看彼此手機、露出「成功了」表情的氛圍照 — 圖 5.2同事的裝置上**看得到你剛剛加的紀錄**——共用真相第一次成立。

·AI Prompt speed dial起手式 · 用自己的話改

A接上 proxy 寫入

我有一個「我要跟」按鈕，目前點擊後只更新前端的 localStorage。
現在請幫我改成：點擊時，同時呼叫這個 API endpoint 把資料寫進共用清單：

[貼上講師提供的 proxy endpoint URL 與參數格式文件]

請確認程式碼裡完全沒有出現任何密碼或金鑰。
呼叫失敗時要顯示一個友善的錯誤訊息，不要讓整個頁面壞掉。

B自我檢查沒有洩漏祕密

請檢查我目前的前端程式碼，
確認裡面沒有任何 API 金鑰、密碼，或看起來像祕密的字串。
如果有，請告訴我在哪裡。

C危險雷達情境練習（課後選配）

請幫我列出 5 個「電商網站」情境，
每個情境用一句話描述一個功能，
並標註它會撞到「危險雷達三檢查表」的哪一條（祕密／信任判斷／共用真相），
或完全不會撞到、前端可以自己做。

·講師課前準備事項本課程唯一硬依賴

建立公開 Google Sheet 作為共用真相來源（欄位：日期、餐廳、發起人、跟團人數）
撰寫 proxy 服務（Cloudflare Worker）：唯讀 GET endpoint + 寫入 POST endpoint
金鑰存放於 Worker 環境變數 / secret，絕不出現在前端或公開 repo
撰寫 endpoint 使用文件（URL、參數格式、範例 request/response）供學員 prompt 使用
設定基本防護（來源檢查、速率限制），避免公開寫入端點被濫用

·作業與檢核

作業：一個 PR——把「我要跟」改為呼叫共用 proxy 寫入。PR 描述包含：「這個改動撞到危險雷達哪一條？為什麼一定要透過後端完成？」

講師 / 助教檢核重點

每人完成撞牆實驗並能解釋原因
每人能覆誦危險雷達三檢查表
每人「我要跟」成功寫入共用 Sheet，並被同事裝置看到
前端程式碼中確認沒有金鑰 / 密碼字串