STEP GUIDE · Starter

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

先讀完三項任務並預測結果。這一頁不會顯示 Solution 程式碼。

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

修改前

Starter 已提供這個檔案。

修改後

三項任務都不需修改此檔案。
CSS本步驟無異動

檔案：style.css

修改前

Starter 已提供這個檔案。

修改後

三項任務都不需修改此檔案。
JavaScript先自行嘗試

檔案：script.js

修改前

請先閱讀上方任務與預計修改檔案。

修改後

Starter 不顯示完成碼，請先自己動手修改。
README／其他文件本練習未使用

檔案：README.md

修改前

本練習沒有這個檔案。

修改後

本步驟不需修改此類型。
03

怎麼看到結果

  1. 準備

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

  2. 操作

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

  3. 預期

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

訂閱主畫面並留下 adapter trace

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

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

可追蹤的即時留言

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

尚未訂閱

訂閱生命週期控制

目前 subscriber：0 個

Adapter trace