建置操作手冊

📝 即時互動數位白板

專為師生設計的協作空間 ✨

👨‍🏫

教師專區

建立或進入您的教學白板

👨‍🎓

學生專區

加入老師的教學白板

👤 您的姓名

🔑 白板ID

Made with ❤️ by 阿剛老師

完整 Firebase 設定教學

請依照以下詳細步驟，一步步完成設定，讓您的數位白板順利運作。

第一步：建立 Firebase 專案

前往 Firebase 控制台並登入您的 Google 帳號。
點擊「建立專案」(Create a project)。
為您的專案命名 (例如：`my-whiteboard-app`)，然後點擊「繼續」。
您可以選擇**關閉** "為這個專案啟用 Google Analytics" (Enable Google Analytics)，因為此專案用不到。點擊「建立專案」。

第二步：在專案中新增「網頁應用」並取得設定碼

專案建立後，在專案主控台頁面，點擊「網頁」圖示 (</>)。
為您的應用程式取一個暱稱 (例如：`白板前端`)，然後點擊「註冊應用程式」。
註冊後，您會看到「將 Firebase SDK 新增至您的應用程式」的畫面。請找到 firebaseConfig 物件。
(關鍵步驟) 複製整個 const firebaseConfig = { ... }; 程式碼區塊。
打開 whiteboard.html 檔案，找到 <script type="module"> 區塊，將您剛剛複製的內容，完整地貼上來取代掉預設的佔位符。

第三步：設定 Firestore 資料庫

在 Firebase 控制台左側選單，點擊「建構」(Build) > 「Firestore Database」。
點擊「建立資料庫」(Create database)。
選擇「以**測試模式**開始」(Start in test mode)，然後點擊「下一步」。
選擇離您最近的 Cloud Firestore 位置 (例如：`asia-east1` (台灣) 或 `asia-northeast1` (東京))，然後點擊「啟用」。

第四步：啟用「匿名登入」

在 Firebase 控制台左側選單，點擊「建構」(Build) > 「Authentication」。
點擊「開始使用」(Get started)。
在新頁面中，選擇「登入方式」(Sign-in method) 頁籤。
在供應商清單中，找到「匿名」(Anonymous) 並點擊它。
將開關設定為「啟用」(Enable)，然後點擊「儲存」。

第五步：更新資料庫安全規則 (長期使用)

在「Firestore Database」頁面，點擊上方的「規則」(Rules) 頁籤。
將編輯器中現有的所有文字刪除。
複製下方的程式碼，並完整貼到編輯器中。這將允許所有已登入的使用者（包含匿名登入）存取白板資料，確保白板在30天後仍可正常使用。

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /sessions/{sessionId} {
      // 允許已登入用戶讀取、建立、更新、刪除session文件
      allow read, create, update, delete: if request.auth != null;

      // 允許已登入用戶操作所有子集合（participants, canvasObjects等）
      match /{document=**} {
        allow read, create, update, delete: if request.auth != null;
      }
    }
  }
}

點擊「發布」(Publish) 按鈕來儲存您的新規則。

完成以上五個步驟後，請重新整理 whiteboard.html 頁面即可開始使用！