即時互動數位白板・教師使用手冊

1

建立或進入白板

進入首頁後，點擊「教師專區」，流程如下：

1. 輸入密碼：首先輸入教師密碼 （預設為 tpet） 並按「下一步」。
2. 選擇白板：密碼正確後，您可以：
   • 從下拉選單選擇一個現有白板。
   • 在輸入框中自訂一個新白板ID。
   • 或將輸入框留白，讓系統為您自動生成新ID。
3. 進入白板：完成選擇或輸入後，點擊「進入白板」即可。

2

邀請學生加入

將「白板ID」告知學生。學生在首頁選擇「學生專區」，輸入自己的姓名與此ID，即可進入同一個白板。

3

開始同步協作

所有在同一個白板的使用者，其繪製的內容、新增的物件都會即時同步給所有人。就是這麼簡單！

主要工具列 (下方)

工具選項 (新功能)

• 畫筆選項： 點擊「畫筆」工具後，會出現調色盤與三種筆刷寬度 (5, 10, 20) 供選擇。
• 便利貼選項： 點擊「便利貼」工具後，會出現四種預設顏色 (黃、藍、粉、綠) 供選擇。

畫布操作

• 移動畫布 (Pan):
  • 電腦 (方法一): 點擊工具列上的「 移動畫布」工具 (H)，然後按住滑鼠左鍵拖曳。
  • 電腦 (方法二): 按住 Alt 鍵 + 滑鼠左鍵拖曳，或直接按住滑鼠右鍵拖曳。
  • 觸控螢幕: 使用兩隻手指在畫布上滑動。
• 縮放畫布 (Zoom):
  • 電腦: 滾動滑鼠滾輪。
  • 觸控螢幕: 使用兩隻手指進行捏合或張開 (Pinch to zoom)。
  • (新) 介面控制: 使用右上角的「縮放控制」滑桿進行精細調整。

教師專用工具

其他介面功能

• 畫布頁面 (左方): 讓您新增或切換不同的畫布頁面。教師可在每個頁碼的右上角點擊 × 來刪除該頁面。
• 參與者資訊 (左上): 顯示白板ID與線上人數。

  新功能 (教師): 點擊「線上人數」區域，會彈出「線上參與者」列表。您可以在此列表中：
  1. 個別鎖定：單獨鎖定某位學生的編輯權限。
  2. 踢出學生：將某位學生從白板中移除。

• 縮放控制 (右上):
  • (新) 使用滑桿進行精細的畫面縮放。
  • (新) 顯示目前的縮放百分比 (例如：100%)。
  • (原始功能：滾動滑鼠滾輪或雙指捏合也可縮放。)

1. 建立 Firebase 專案

1. 前往 Firebase Console。
2. 點擊「新增專案」並依照指示完成建立。
   

2. 啟用必要服務

• Authentication (驗證): 在專案中找到「Authentication」，進入「登入方法」分頁，並啟用「匿名」登入方式。
  
  
  

  
  

  
• Firestore Database (資料庫): 在專案中找到「Firestore Database」，點擊「建立資料庫」，並選擇在「測試模式」中啟動。
  
  
  

  
  

  

3. 修改 Firestore 安全性規則 (非常重要！)

1. 資料庫建立後，在 Firestore Database 頁面，點擊上方的「規則」(Rules) 分頁。
   
   
2. 將編輯器中的所有內容，替換為以下規則：

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) 來儲存您的新規則。

4. 取得您的 Firebase 設定值

1. 在 Firebase Console 中，點擊專案首頁左上角的齒輪圖示 ，選擇「專案設定」。
   
   
2. 在「您的應用程式」區塊，點擊「新增應用程式」並選擇「網頁」圖示 (</>)。
   
   
3. 為您的應用程式命名後，您會看到一組 firebaseConfig 設定值。請將它複製下來(紅字部份)。

const firebaseConfig = {
  apiKey: "AIzaSy...",
  authDomain: "xxx.firebaseapp.com",
  projectId: "xxx",
  storageBucket: "xxx.appspot.com",
  messagingSenderId: "123456789",
  appId: "1:123456789:web:..."
};

5. 使用設定工具匯入設定值到互動白板主程式中

開啟 firebase設定工具.html，依照頁面指引貼上剛才取得的 firebaseConfig 並點選生成。工具會自動產生整合好設定的「即時互動數位白板」主程式 HTML 檔，下載後即可上傳靜態網頁空間使用。

1. 下載主程式檔案

確保您已經取得並修改好主程式 `whiteboard.html` 檔案。

2. 使用 EzPage 服務上傳

1. 前往 EzPage 網站。
2. 點擊「上傳」按鈕，將您修改好的 `whiteboard.html` 檔案上傳。
3. 上傳完成後，系統會提供一個公開的網址，這就是您的「即時互動數位白板」的主程式網址。

3. 記錄並使用網址

將這個公開網址分享給您的學生，或作為您教學環境中的連結，即可開始使用您的專屬互動白板。