剛好學・教師使用手冊

By 阿剛老師

🔧 建置主程式資料庫設定(Firebase)

本系統需要連接到 Google Firebase 資料庫才能運作，您需自行按照本說明完成建置後，才可正常使用。這能確保所有課堂資料（如學生答案）都保存在您自己的空間，確保資料的隱私與所有權。

注意：此為必要設定步驟，需要您具備基本的 Google Firebase 操作知識。若未完成此設定，系統將無法使用。

1. 建立 Firebase 專案

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

2. 啟用必要服務

  • Authentication (驗證): 在專案中找到「Authentication」，進入「登入方法」分頁，並啟用「匿名」登入方式。
    驗證設定步驟一 驗證設定步驟二 驗證設定步驟三
  • Firestore Database (資料庫): 在專案中找到「Firestore Database」，點擊「建立資料庫」，並選擇在「測試模式」中啟動。
    資料庫設定步驟一 資料庫設定步驟二 資料庫設定步驟三

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

  1. 資料庫建立後，在 Firestore Database 頁面，點擊上方的「規則」(Rules) 分頁。
    Firestore 安全性規則頁面
  2. 將編輯器中的所有內容，替換為以下規則：
rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if request.auth != null;
    }
  }
}

這條規則的意思是「允許任何已登入的使用者（包含我們剛才啟用的匿名登入）對資料庫進行讀寫」。

修改完成後，點擊「發佈」(Publish) 來儲存您的新規則。

4. 取得您的 Firebase 設定值

  1. 在 Firebase Console 中，點擊專案首頁左上角的齒輪圖示 ，選擇「專案設定」。
    專案設定畫面
  2. 在「您的應用程式」區塊，點擊「新增應用程式」並選擇「網頁」圖示 (</>)。
    新增網頁應用程式畫面
  3. 為您的應用程式命名後，您會看到一組 firebaseConfig 設定值。
  4. 重要：請複製大括號 { 和 } 之間的六行內容（不包含 const firebaseConfig = 和大括號本身）。
const firebaseConfig = {
  apiKey: "AIzaSy...",
  authDomain: "xxx.firebaseapp.com",
  projectId: "xxx",
  storageBucket: "xxx.appspot.com",
  messagingSenderId: "123456789",
  appId: "1:123456789:web:..."
};

請只複製紅色標示的六行內容。

5. 在剛好學主程式中設定 Firebase 新方法！

全新功能：現在您可以直接在主程式中完成 Firebase 設定，無需下載或編輯檔案！

  1. 開啟剛好學主程式
    在瀏覽器中開啟「剛好學最新版-網址參數版」。
  2. 點擊 Firebase 設定按鈕
    在首頁右上角找到「 Firebase 設定」按鈕並點擊。
  3. 貼上 Firebase 設定值
    將剛才複製的六行 Firebase config 內容貼到文字框中。
    apiKey: "AIzaSy...",
    authDomain: "xxx.firebaseapp.com",
    projectId: "xxx",
    storageBucket: "xxx.appspot.com",
    messagingSenderId: "123456789",
    appId: "1:123456789:web:..."
  4. 套用設定
    點擊「套用設定」按鈕。系統會自動解析並儲存您的 Firebase 設定，頁面會重新載入。
  5. 生成異機專用網址（選用但推薦）
    再次點擊「Firebase 設定」按鈕，然後點擊「生成異機專用網址(可免再設定firebase)」按鈕。
    系統會自動：
    • 生成含有您 Firebase 設定的短網址（自動複製到剪貼簿）
    • 同時產生對應的 QR Code，方便手機掃描使用
    • 顯示短網址和原始完整網址，可隨時複製
  6. 下載 QR Code（選用）
    點擊「 下載 QR Code」按鈕，即可將 QR Code 圖片儲存到電腦，方便分享給學生或列印使用。

使用情境：

  • 自己使用：套用設定後，直接使用主程式檔案即可。
  • 分享給其他電腦/手機：使用生成的短網址或 QR Code，其他裝置開啟後會自動載入您的 Firebase 設定。
  • 給學生使用：將 QR Code 印出或投影，學生掃描即可進入教室。

注意事項：

  • 設定會儲存在瀏覽器的 localStorage 中，除非清除瀏覽器資料，否則會一直保留。
  • 生成的短網址和 QR Code 包含您的 Firebase 設定資訊，請妥善保管。
  • 如需更換 Firebase 專案，只要重新套用新的設定即可覆蓋。

6. 使用 Firebase 設定工具（舊方法）

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

開啟 Firebase 設定工具

操作示範說明影片

💰 Firebase 免費方案使用限制

本系統基於 Google Firebase 的免費方案 (Spark Plan) 運行。Firebase 提供了一個非常慷慨的免費額度，對於一般的課堂互動使用來說通常是足夠的。然而，了解這些限制對於規劃您的教學活動非常重要，特別是當您會頻繁使用「繪圖題」或「錄音題」時。

Firebase Firestore 主要免費額度

  • 文件讀取 (Document Reads)： 每日 50,000 次
  • 文件寫入 (Document Writes)： 每日 20,000 次
  • 文件刪除 (Document Deletes)： 每日 20,000 次
  • 儲存空間 (Stored Data)： 總共 1 GB (非每日額度)

各項功能資源消耗估算 (以30人班級為例)

文件讀取：教師監看作答、學生加入教室或切換模式時會觸發讀取。每日 50,000 次的額度非常充足，您幾乎不可能在正常教學情境下用完。

文件寫入：教師開始互動、學生加入或提交答案時會觸發寫入。每日 20,000 次的額度也相當充足，足以應付每天數十堂課的互動量。

文件刪除：主要發生在教師點擊「下課」時，系統會清除該教室所有資料。每日 20,000 次的額度同樣非常充裕。

AI 文字分析：此功能使用 Google Gemini API，其免費額度獨立計算。每次點擊分析僅產生 1 次 API 請求，額度非常充足。

最需要注意的限制：儲存空間！

這是免費方案中最容易達到上限的項目。雖然文字類作答佔用的空間極小，但繪圖題與錄音題的資料量較大：

  • 繪圖題：一張圖片約佔用 50 KB 到 300 KB。
  • 錄音題：幾秒鐘的錄音就可能佔用 數百 KB 到數 MB。

如果一堂課中，全班學生繳交了大量高解析度的繪圖或錄音，單次課堂的資料量就有可能接近 1 GB 的總上限。

總結與最重要的習慣

  • Firebase 的每日讀取、寫入、刪除額度非常充裕，無須過度擔心。
  • 1 GB 的總儲存空間是您唯一需要留意的限制。
  • 為避免儲存空間爆滿，請養成一個最重要的習慣：每堂課完全結束後，務必點擊「下課 🔚」按鈕！此操作會清空該教室的所有作答紀錄，將儲存空間釋放出來，確保您的系統能長久順暢地免費使用。