CHAPTER 24 · PRACTICE WORKSPACE

即時資料模型與 Firebase 介面

完成可追蹤、可取消、可模擬訂閱失敗並重試的 memory adapter 即時留言原型，不冒充 Firebase

01 Starter 0/3
  1. 01Starter讀懂作品骨架
  2. 02Checkpoint 1加入第一項能力
  3. 03Checkpoint 2累積第二項能力
  4. 04Solution核對完整結果

TASK STATUS

三項任務目前狀態

TASK-01本階段處理

訂閱主畫面並留下 adapter trace

修改檔案：script.js

完成後看見：主畫面 subscriber 收到初始 snapshot，trace 顯示 subscribe 與 notify

TASK-02稍後處理

安全渲染並管理第二 Console subscriber

修改檔案：script.js

完成後看見：留言以純文字渲染，Console subscriber 可訂閱並可 unsubscribe

TASK-03稍後處理

模擬訂閱失敗、復原重試並新增留言

修改檔案：script.js

完成後看見：失敗時保留舊留言且無幽靈 listener，retry 後畫面與 Console subscriber 同時收到新 snapshot

WORKSPACE

本階段實作區

先確認作品目前能做什麼、還缺什麼，再從 TASK-01 開始修改。

FOCUS TASK · TASK-01

現在只處理：訂閱主畫面並留下 adapter trace

修改：script.js

完成後：主畫面 subscriber 收到初始 snapshot，trace 顯示 subscribe 與 notify

講解時展開：2 個小型比較

subscribe vs snapshot｜訂閱與收到資料

比較：subscribe 建立持續監聽，snapshot 是某次收到的資料；兩者不是同一個事件。

現在做：在 Checkpoint 1 重新整理一次，記錄 status=「主畫面收到 1 筆 snapshot」、subscriber=1，並依序圈出 trace 的 subscribe request、subscribe active、notify initial；不要先改 renderMessages()。

看預期與證據

預期：status 是「主畫面收到 1 筆 snapshot」、subscriber=1，trace 依序包含 subscribe request、subscribe active、notify initial；能說出 subscribe 與 snapshot 的責任不同。

證據：留下 status、subscriber 數與前三筆 trace 的紀錄，逐項標示 subscribe 建立持續監聽、snapshot 是這次收到的資料；兩者不是同一個事件。

notify vs render｜adapter 與畫面分工

比較：adapter 通知 subscriber，畫面再決定如何 render；不要把外部來源邏輯塞進 DOM。

現在做：保留 Checkpoint 1 的 adapter trace，重新整理後確認 status 與 trace 由 adapter callback 產生；同時記下留言區仍顯示「尚未完成 1 筆渲染」，指出 adapter 通知與畫面 render 是兩個責任。

看預期與證據

預期：status 與 trace 由 adapter callback 產生，留言區仍顯示「尚未完成 1 筆渲染」；能說出 adapter 通知 subscriber，畫面再決定如何 render。

證據：保存 status、trace 與留言區文字三項證據，指出 adapter 只通知 subscriber，畫面再決定如何 render；不要把外部來源邏輯塞進 DOM。

需要排錯時查看：任務循環（觀察 → 預測 → 實作 → 故障 → 驗收）
  1. A｜觀察：先開啟 Console，並確認頁面標示 MEMORY ADAPTER，沒有宣稱已連 Firebase。
  2. B｜預測：重新整理 Checkpoint 1，對照畫面狀態與 trace，確認主畫面訂閱者先收到初始 snapshot。
  3. C｜實作：在 script.js 的 createMemoryAdapter()、recordTrace()、startListening() 完成「訂閱主畫面並留下 adapter trace」，一次只處理本任務責任。
  4. D｜故障：若結果不一致，先依原操作重現，再檢查 createMemoryAdapter()、recordTrace()、startListening() 與 script.js，最後重跑原操作。
  5. E｜驗收：主畫面 subscriber 收到初始 snapshot，trace 顯示 subscribe 與 notify

完成條件：DONE-01：主畫面 subscriber 收到初始 snapshot，trace 顯示 subscribe 與 notify

MEMORY ADAPTER（只練介面，不是 Firebase 連線）

可追蹤的即時留言

本頁每次重新整理都會建立獨立記憶體，不會跨分頁同步。

尚未訂閱

訂閱生命週期控制

目前 subscriber：0 個

    Adapter trace

      CONTINUE

      開始 TASK-01

      前往 Checkpoint 1，依要求完成「訂閱主畫面並留下 adapter trace」。

      前往 Checkpoint 1：完成 TASK-01

      CHAPTER HANDOFF

      從一次提交，交棒到持續訂閱

      接收第 23 章：沿用已驗證的 payload 與一次提交生命週期；本章不重做表單驗證，改追蹤初始 snapshot、後續 push 與 unsubscribe。

      交給第 25 章：完成後帶著 memory adapter 的 subscriber trace、安全 render、取消訂閱與失敗重試證據；下一章直接加入 uid 與權限判斷，不把 memory adapter 宣稱成 Firebase。

      前往第 25 章：身份、uid 與權限模型