LESSON 04 · 午餐揪團頁主線

讓畫面動起來：互動與狀態

「我要跟」按鈕今天正式上工。你會學到「狀態＝畫面的短期記憶」——而且我們會刻意讓你嚐到一個痛：重整就歸零。這個不甘心，就是下一堂課的動機。

狀態 = 短期記憶點擊互動刻意留下痛點產出：會動的我要跟

✓

完成定義 · Definition of Done

頁面能被點擊互動、畫面即時反應；學員能親口說出「這個資料現在只活在記憶體裡，重整就會不見」。

01狀態是什麼

想像你在滑手機時心裡默數「已經滑過幾則貼文」。你腦子裡那個數字就是一種狀態——它會變，而且你的下一個反應會根據它調整。

🧠一句話版本

狀態＝畫面現在記得的事情。使用者做了動作（點擊），記憶更新，畫面跟著重新顯示。

圖 2.1狀態＝畫面現在記得的事：點擊 → 狀態更新 → 畫面重新顯示。但它只是短期記憶。

02動手：我要跟 +1

03刻意的痛：重整歸零

現在把人數點到一個你記得住的數字，比如 7。深呼吸——全班一起按重新整理。

消失了。因為剛剛那個「7」只是這次打開頁面的短期記憶，沒有被記到任何「比較持久」的地方。這種不甘心是正常的——而且它就是下一堂課（5a）存在的理由。

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

A我要跟按鈕

在我的午餐揪團頁裡，每張揪團卡都有一個「我要跟」按鈕和一個顯示人數的數字。
請幫我加上功能：點擊按鈕時，那張卡片的人數要 +1，
畫面要立即更新顯示新的數字（不用重新整理頁面）。

B篩選開關（選配）

在頁面上方加一個切換開關，文字寫「只看我有興趣的」。
開啟時，只顯示我按過「我要跟」的卡片；關閉時顯示全部卡片。

C互動細節優化（課後選配）

幫我優化「我要跟」按鈕：
- 按下去之後文字變成「已加入」，並且按鈕顏色變化
- 同一張卡片不能重複點擊加入
- 人數變化時給一個小小的跳動動畫

D驗證理解

請用「短期記憶」這個比喻跟我解釋：
剛剛我點擊按鈕改變的人數，為什麼重新整理頁面後會消失？
這個數字現在到底存在哪？

·作業與檢核

作業：一張 issue ＋一個 PR——一個新的互動功能。PR 描述包含：「這個功能的狀態，重整後會不會保留？為什麼？」

講師 / 助教檢核重點