STUDENT HTML DOCUMENT

第 24 章答案對照

先自己完成 Checkpoint 2,再用這張表定位卡住的 TASK。答案對照用來找位置,不用來整份覆蓋。

四階段都執行單頁 memory adapter。它用來練習 Firebase 介面責任,不是 Firebase 連線證據,不會跨分頁或跨裝置同步。

任務完成標記修改檔案修改位置可見結果
TASK-01 訂閱主畫面並留下 adapter traceDONE-01script.jscreateMemoryAdapter()recordTrace()startListening()初始 snapshot 到達畫面 subscriber,trace 顯示 subscribe 與 notify
TASK-02 安全渲染並管理第二 Console subscriberDONE-02script.jscreateMessageItem()renderMessages()startConsoleSubscriber()stopConsoleSubscriber()留言是純文字,第二 subscriber 可訂閱、收到 snapshot 並取消
TASK-03 模擬訂閱失敗、復原重試並新增留言DONE-03script.jsfailNextSubscribe()startListening() 錯誤分支、retry 事件、addMessage()失敗保留舊留言,retry 後新增資料同時通知畫面與 Console

四階段差異

標準驗收腳本

  1. 重新整理 Solution,trace 顯示主畫面訂閱與初始通知。
  2. 開啟 Console subscriber,新增一筆留言;畫面、Console 與 trace 都有同一次更新。
  3. 取消 Console subscriber 後再新增;畫面仍更新,Console 不再收到 snapshot,trace 顯示 unsubscribe。
  4. 按「模擬下次訂閱失敗」;狀態變錯誤,舊留言未被清空,trace 沒有殘留一個失敗的主畫面 listener。
  5. 按「重試訂閱」後回到成功狀態;輸入 <img src=x onerror=alert(1)>,畫面只顯示純文字。

Live 延伸邊界

只有備妥 Firebase 帳號、project、Web app config、Realtime Database、Emulator/最小權限 Rules 與網路,並實際以 onValue / push 連到同一 database path,才可另做雙視窗 Live 驗收。