STEP GUIDE · Checkpoint 1

這個步驟要做什麼、改哪裡、怎麼看結果

這一步聚焦 TASK-01；下方只比較「Starter → Checkpoint 1」的真實異動。

01

三項 Task 進度

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

02

HTML、CSS、JavaScript 與文件實際異動

展開檔案卡查看必要差異；只有程式碼區可以橫向捲動。

HTML本步驟無異動

檔案：index.html

修改前

前一步與本步驟沒有實質差異。

修改後

本步驟不需修改此語言。
CSS本步驟無異動

檔案：style.css

修改前

前一步與本步驟沒有實質差異。

修改後

本步驟不需修改此語言。
JavaScript本步驟有異動

檔案：script.js

修改前

  status.textContent = "尚未完成主畫面訂閱";
refreshSubscriberCount();

修改後

let unsubscribeView = null;
  if (unsubscribeView) unsubscribeView();
  unsubscribeView = adapter.subscribe((snapshot) => {
    status.textContent = `主畫面收到 ${snapshot.length} 筆 snapshot`;
    renderMessages(snapshot);
  }, "主畫面");
  refreshSubscriberCount();
README／其他文件本練習未使用

檔案：README.md

修改前

本練習沒有這個檔案。

修改後

本步驟不需修改此語言。
03

怎麼看到結果

  1. 準備

    先開啟 Console，並確認頁面標示 MEMORY ADAPTER，沒有宣稱已連 Firebase。

  2. 操作

    重新整理 Checkpoint 1，對照畫面狀態與 trace，確認主畫面訂閱者先收到初始 snapshot。

  3. 預期

    主畫面 subscriber 收到初始 snapshot，trace 顯示 subscribe 與 notify
Checkpoint 1 TASK-01

訂閱主畫面並留下 adapter trace

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

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

可追蹤的即時留言

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

尚未訂閱

訂閱生命週期控制

目前 subscriber：0 個

Adapter trace