STEP GUIDE · Starter

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

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

01

三項 Task 進度

TASK-01尚未開始

呈現登入與登出狀態

預計修改：script.js

完成後：畫面清楚顯示目前 mock user 或未登入

TASK-02尚未開始

完成教學模擬登入流程

預計修改：script.js

完成後：空白與錯誤 Email 不會登入，示範帳號取得固定 mock uid

TASK-03尚未開始

以 uid 判斷資料權限

預計修改：script.js

完成後：只有資料 owner uid 可編輯

02

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

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

HTML本步驟無異動

檔案：index.html

修改前

Starter 已提供這個檔案。

修改後

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

檔案：style.css

修改前

Starter 已提供這個檔案。

修改後

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

檔案：script.js

修改前

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

修改後

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

檔案：README.md

修改前

本練習沒有這個檔案。

修改後

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

怎麼看到結果

  1. 準備

    先重新整理本階段頁面，記住目前畫面，再開始操作。

  2. 操作

    重新整理後確認畫面顯示未登入且編輯按鈕停用；這一步只驗證 renderAuthState() 的初始狀態，模擬登入留到下一步。

  3. 預期

    畫面清楚顯示目前 mock user 或未登入
Starter TASK-01

呈現登入與登出狀態

完成後可見：畫面清楚顯示目前 mock user 或未登入

教學模擬，不是真實登入沒有 Firebase SDK、token 或伺服器 Rules。

Auth 與 uid 權限

狀態尚未渲染

資料 owner：uid-student

尚未檢查權限