阿剛老師的異想世界: 課堂即時互動系統：給夥伴的完整教學手冊 (含部署)

親愛的老師們，您好！

今天，我將向大家介紹一套我仿照十幾年前很熱門的平板課堂互動工具「pingpong」所設計的「課堂即時互動系統」。這套系統是我透過 Gemini 輔助開發的，希望能讓您在課堂上輕鬆與學生進行問答、收集即時回饋，甚至進行繪圖互動和錄音作答，大大提升課堂的參與度和趣味性！

這套系統是基於 Google 的 Firebase 平台開發的，它提供了穩定的後端服務，讓我們的互動資料能夠即時傳輸與儲存。聽起來有點複雜嗎？別擔心，我會一步步帶您完成設定，並教您如何在課堂上實際運用，同時也會說明在使用免費服務時需要注意的事項。

第一部分：系統設定與準備 (Firebase 帳號與專案設定)

本教學將引導您如何在 Firebase 中建立專案、設定正確的資料庫規則和驗證方式，以確保系統順利運行。

步驟 1：建立新的 Firebase 專案

前往 Firebase 控制台：打開瀏覽器，前往 Firebase 控制台並使用您的 Google 帳戶登入。
新增專案：點擊控制台首頁的「新增專案」。
專案名稱：輸入一個容易識別的名稱，例如：「我的課堂互動工具」，然後點擊「繼續」。
Google Analytics：您可以選擇停用 Google Analytics 以簡化設定流程，然後點擊「建立專案」。
等待專案建立完成後，點擊「繼續」進入專案主控台。

步驟 2：設定驗證與資料庫

專案建立後，我們需要啟用匿名登入功能和設定資料庫。

啟用匿名驗證：
- 在左側導航欄中，點擊「建構」 > 「Authentication」。
- 點擊「開始使用」。
- 在「登入方法」(Sign-in method) 分頁中，找到「匿名」(Anonymous)，點擊它。
- 啟用開關，然後點擊「儲存」。這一步是必要的，它允許使用者在不需註冊帳號的情況下使用系統。
建立 Firestore Database：
- 在左側導航欄中，點擊「建構」 > 「Firestore Database」。
- 點擊「建立資料庫」。
- 安全性規則模式：請選擇「以測試模式開始」，然後點擊「下一步」。
- 選擇資料庫位置：選擇一個離您地理位置較近的伺服器，例如 asia-east1 (台灣)，然後點擊「啟用」。
修改 Firestore 安全性規則 (非常重要！)：
- 資料庫建立後，在 Firestore Database 頁面，點擊上方的「規則」(Rules) 分頁。
- 將編輯器中的所有內容，替換為以下規則：
```
rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if request.auth != null;
    }
  }
}
```
- 這條規則的意思是「允許任何已登入的使用者（包含我們剛才啟用的匿名登入）對資料庫進行讀寫」。
- 修改完成後，點擊「發佈」(Publish) 來儲存您的新規則。

步驟 3：取得您的 Firebase 設定資訊

最後，我們需要取得連接到這個專案的金鑰。

在左側導航欄上方，點擊您的「專案總覽」旁邊的齒輪圖示，選擇「專案設定」。
在「一般」分頁下方，捲動到「您的應用程式」區塊。
點擊「Web」圖示 ( </> ) 來新增一個網頁應用程式。
註冊應用程式：
- 應用程式暱稱：輸入一個名稱，例如「課堂互動工具」。
- 不要勾選「同時設定 Firebase Hosting」。
- 點擊「註冊應用程式」。
複製設定物件：註冊後，系統會顯示一個 firebaseConfig 物件。請完整複製這個物件的所有內容，我們下一步會用到它。
```
const firebaseConfig = {
  apiKey: "AIzaS...",
  authDomain: "your-project-id.firebaseapp.com",
  // ... 其他設定
};
```

第二部分：將 Firebase 設定資訊整合到 HTML 檔案

現在，您已經取得了 Firebase 的設定資訊。下一步就是將這些資訊「寫入」到您下載的互動系統 HTML 檔案中，這樣程式才能正確連接到您的 Firebase 專案。

步驟 1：下載原始 HTML 檔案

請先將原始的 HTML 檔案下載到您的電腦中：

右鍵另存此連結：課堂互動工具-教室代碼版v2_firebaseX.html

步驟 2：用文字編輯器開啟 HTML 檔案

找到您剛才下載的 課堂互動工具-教室代碼版v2_firebaseX.html 檔案。
右鍵點擊該檔案，選擇「開啟檔案」或「開啟方式」。
從列表中選擇一個文字編輯器程式來開啟它，例如：
- Windows: 記事本 (Notepad)、Notepad++、VS Code
- macOS: 文字編輯 (TextEdit)、VS Code

步驟 3：尋找並修改 `firebaseConfig` 區塊

檔案開啟後，您會看到滿滿的程式碼。請不要緊張！
使用編輯器的搜尋功能 (通常是 Ctrl+F 或 Command+F) 搜尋關鍵字：firebaseConfig。

您應該會找到一個類似這樣的 JavaScript 程式碼區塊：

const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_STORAGE_BUCKET",
  messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
  appId: "YOUR_APP_ID"
};

將這整個 firebaseConfig 物件的內容，替換成您在上一部分「步驟 3」中從 Firebase 複製下來的完整 firebaseConfig 內容。

範例替換後 (請用您自己的實際值替換)：

const firebaseConfig = {
  apiKey: "AIzaSyB********************", // <-- 這會是您從 Firebase 複製的實際值
  authDomain: "your-project-id.firebaseapp.com", // <-- 這会是您從 Firebase 複製的實際值
  projectId: "your-project-id", // <-- 這会是您從 Firebase 複製的實際值
  storageBucket: "your-project-id.appspot.com", // <-- 這会是您從 Firebase 複製的實際值
  messagingSenderId: "123456789012", // <-- 這会是您從 Firebase 複製的實際值
  appId: "1:123456789012:web:abcdef1234567890abcdef" // <-- 這会是您從 Firebase 複製的實際值
};

儲存檔案：在編輯器中，點擊「檔案 (File)」->「儲存 (Save)」來保存您的修改。

第三部分：將修改後的 HTML 檔案上傳到免費空間 (以 yay.boo 為例)

現在您的 HTML 檔案已經包含了正確的 Firebase 設定，您可以將它上傳到一個網頁空間，讓學生可以透過網路瀏覽器存取。這裡我們以 yay.boo 這個簡單的免費空間為例。

步驟 1：前往 yay.boo 網站

打開您的網頁瀏覽器，輸入網址：https://yay.boo/

步驟 2：上傳您的 HTML 檔案

重要：將檔案重新命名！ 在上傳之前，請將您修改好的 課堂互動工具-教室代碼版v2_firebaseX.html 檔案名稱，改為 index.html。這是因為 yay.boo 會將 index.html 作為預設的首頁檔案。
在 yay.boo 網站首頁，您會看到一個簡單的檔案上傳區塊。
點擊「Choose File」或類似的按鈕，然後選擇您剛才重新命名的 index.html 檔案。
檔案選取後，在下方的輸入框中手動輸入您想要的網址名稱 (例如 my-class)。
點擊上傳按鈕。yay.boo 會為您生成一個公開的網址。

步驟 3：分享網址給學生

複製 yay.boo 生成的網址 (例如：https://my-class.yay.boo)。
將這個網址分享給您的學生，他們就可以透過這個網址在任何裝置上存取您的課堂即時互動系統了！
請注意：yay.boo 是一個簡單的免費檔案分享服務，它不提供複雜的管理功能，檔案可能會有一定的時效性或被清除。

第四部分：Firebase 免費方案使用限制說明

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

以下是針對 30 位學生的班級，在免費方案下的主要使用限制與估算：

Firebase Firestore 免費方案主要限制 (每日額度)

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

課堂互動功能對 Firebase 資源的消耗估算 (以 30 位學生為例)

我們來估算一堂課中，使用不同互動功能可能產生的資源消耗。

1. 文件讀取 (Reads)

老師監看作答：當老師在監看畫面時，系統會持續讀取學生的作答和在線狀態。每次有學生作答或加入/離開，都會觸發讀取。
學生端：學生進入教室後，會讀取老師設定的互動模式。

結論：50,000 次/天的讀取額度非常充足，您每天可以進行數十堂課的互動，甚至更多，讀取次數都不太可能達到上限。

2. 文件寫入 (Writes)

老師開始/結束互動模式：每次老師點擊「是非題」、「繪圖題」等按鈕，會產生 1 次寫入。
學生加入教室：每位學生加入教室會產生 1 次寫入 (記錄其在線狀態)。
學生提交答案：每位學生提交一次答案，會產生 1 次寫入。

結論：20,000 次/天的寫入額度也相當充足。您每天可以進行約 100 堂課的互動，寫入次數通常不會是問題。

3. 文件刪除 (Deletes)

老師點擊「下課」：這是產生大量刪除操作的主要時機。系統會刪除該教室的所有學生作答記錄和在線狀態記錄。

結論：20,000 次/天的刪除額度也非常充足。您每天可以進行約 100 多堂課的互動，刪除次數通常不會是問題。

4. 儲存空間 (Stored Data) - 最需要注意的限制！

這是免費方案中最容易達到上限的項目。Firebase 免費方案提供 1 GB 的總儲存空間。

是非題、選擇題、文字題：這些模式的答案通常是文字，佔用的儲存空間非常小，幾乎可以忽略不計。
繪圖題：學生繪圖後會將圖片轉換為 Data URL 儲存。一張圖片大約會佔用 50 KB 到 300 KB 不等。
錄音題：學生錄音後會將音訊轉換為 Data URL 儲存。即使是幾秒鐘的錄音，也可能佔用 數百 KB 到數 MB。

關鍵點：

「下課」功能的重要性：這套系統的「下課」功能會清除該教室的所有學生作答和在線資料。因此，只要您在每堂課結束後，確實點擊「下課」按鈕，儲存空間就會被釋放，這樣就不會累積資料而超出 1 GB 的限制。
單次課堂的極限：如果一堂課中，30 位學生提交了非常多張高複雜度的繪圖，或非常多段長時間的錄音，單次課堂的資料量就有可能接近甚至超過 1 GB。

結論：

如果您主要使用文字、是非、選擇題，1 GB 儲存空間幾乎不會是問題。
如果您會使用「繪圖題」或「錄音題」，務必在每堂課結束後點擊「下課」按鈕，以清空資料並釋放儲存空間。

5. AI 文字分析 (Gemini API)

AI 文字分析功能是透過 Google 的 Gemini API 實現的，它有獨立的免費額度。每次老師點擊「AI 文字分析」按鈕，只會產生 1 次 API 請求。

結論：AI 文字分析的免費額度非常充足，您幾乎不可能在正常教學情境下達到其限制。

總結與建議 (Firebase 免費方案)

讀取、寫入、刪除操作的每日額度都非常充裕。
儲存空間 (1 GB) 是最需要注意的限制。
最重要的習慣：每堂課結束後務必點擊「下課」按鈕！

第五部分：程式功能與課堂應用教學

現在，您已經完成了所有設定並將系統上傳到網路。接下來，我們將深入了解系統的功能與操作。

系統主要功能概覽

是非題 (True/False)
選擇題 (Multiple Choice)
文字題 (Text Input)
繪圖題 (Drawing)
派送網址 (URL Dispatch)
錄音題 (Recording)

教師端操作教學

1. 進入系統與教師登入

打開您從 yay.boo 取得的網址。
點擊「我是教師」按鈕。
輸入教室代碼：為這堂課自訂一個代碼，例如「五年甲班」，並告訴學生。
點擊「進入教師面板」。

2. 教師面板總覽

下課按鈕：左上角，結束課程並清空所有資料。
學生在線狀態：右上角，顯示在線與作答人數。
互動模式選擇區：中間的六個核心功能按鈕。
繪圖背景上傳：下方區域，可為繪圖題設定背景。
AI 與網址設定：左下與右下角，用於設定進階功能。

3. 操作流程

(可選) 設定派送網址或繪圖背景：在開始互動前，可點擊右下角 (<i class="fas fa-link"></i>) 或下方的按鈕預先設定。
選擇互動模式：點擊任一互動模式按鈕，系統會自動切換到「監看學生作答」畫面，並將該模式推送到所有學生端。
監看與互動：在監看畫面，您可以看到學生的即時作答。您可以使用「抽籤」、「AI 文字分析」、「下載所有媒體」或「顯示統計」等功能。
結束互動：點擊「結束互動」按鈕會讓學生回到等待畫面，您可以開始下一輪互動。
結束課程：點擊「下課」按鈕會徹底清空本次課程的所有資料。

學生端操作教學

1. 進入系統與學生登入

學生打開您提供的網址。
點擊「我是學生」按鈕。
輸入教室代碼與姓名。
點擊「進入教室」。

2. 等待與作答

成功進入後，學生會看到等待畫面。
當老師開始互動時，學生的畫面會自動切換到對應的作答介面。
每種互動模式，學生在送出答案後，該次互動的按鈕會變灰或禁用，無法重複提交。

第六部分：常見問題與疑難排解

Q1: 為什麼學生無法進入教室？
- 請檢查「教室代碼」是否與老師設定的完全一致。
- 確認老師已經進入教師面板，並保持在線。
- 檢查網路連線是否正常。
Q2: 錄音功能無法使用？
- 首次使用時，瀏覽器會詢問麥克風權限，請務必點擊「允許」。
- 檢查您的裝置是否有麥克風並運作正常。
Q3: 資料會被儲存在哪裡？安全嗎？
- 所有資料都儲存在您自己的 Firebase 專案中。
- 我們設定的規則 (if request.auth != null;) 提供了基礎的安全性，只有透過您的應用程式登入的使用者才能存取資料。
- 每次「下課」都會清空該教室的所有資料，這是保護隱私和節省空間的最佳實踐。

希望這份教學手冊能幫助您輕鬆上手「課堂即時互動系統」！如果您在使用過程中遇到任何問題，歡迎隨時向我提問。

祝您教學愉快！

阿剛老師的異想世界

網頁

2025年7月5日星期六

課堂即時互動系統：給夥伴的完整教學手冊 (含部署)

第一部分：系統設定與準備 (Firebase 帳號與專案設定)

步驟 1：建立新的 Firebase 專案

步驟 2：設定驗證與資料庫

步驟 3：取得您的 Firebase 設定資訊

第二部分：將 Firebase 設定資訊整合到 HTML 檔案

步驟 1：下載原始 HTML 檔案

步驟 2：用文字編輯器開啟 HTML 檔案

步驟 3：尋找並修改 `firebaseConfig` 區塊

第三部分：將修改後的 HTML 檔案上傳到免費空間 (以 yay.boo 為例)

步驟 1：前往 yay.boo 網站

步驟 2：上傳您的 HTML 檔案

步驟 3：分享網址給學生

第四部分：Firebase 免費方案使用限制說明

Firebase Firestore 免費方案主要限制 (每日額度)

課堂互動功能對 Firebase 資源的消耗估算 (以 30 位學生為例)

1. 文件讀取 (Reads)

2. 文件寫入 (Writes)

3. 文件刪除 (Deletes)

4. 儲存空間 (Stored Data) - 最需要注意的限制！

5. AI 文字分析 (Gemini API)

總結與建議 (Firebase 免費方案)

第五部分：程式功能與課堂應用教學

系統主要功能概覽

教師端操作教學

1. 進入系統與教師登入

2. 教師面板總覽

3. 操作流程

學生端操作教學

1. 進入系統與學生登入

2. 等待與作答

第六部分：常見問題與疑難排解

沒有留言:

張貼留言

網頁

2025年7月5日 星期六

課堂即時互動系統：給夥伴的完整教學手冊 (含部署)

第一部分：系統設定與準備 (Firebase 帳號與專案設定)

步驟 1：建立新的 Firebase 專案

步驟 2：設定驗證與資料庫

步驟 3：取得您的 Firebase 設定資訊

第二部分：將 Firebase 設定資訊整合到 HTML 檔案

步驟 1：下載原始 HTML 檔案

步驟 2：用文字編輯器開啟 HTML 檔案

步驟 3：尋找並修改 firebaseConfig 區塊

第三部分：將修改後的 HTML 檔案上傳到免費空間 (以 yay.boo 為例)

步驟 1：前往 yay.boo 網站

步驟 2：上傳您的 HTML 檔案

步驟 3：分享網址給學生

第四部分：Firebase 免費方案使用限制說明

Firebase Firestore 免費方案主要限制 (每日額度)

課堂互動功能對 Firebase 資源的消耗估算 (以 30 位學生為例)

1. 文件讀取 (Reads)

2. 文件寫入 (Writes)

3. 文件刪除 (Deletes)

4. 儲存空間 (Stored Data) - 最需要注意的限制！

5. AI 文字分析 (Gemini API)

總結與建議 (Firebase 免費方案)

第五部分：程式功能與課堂應用教學

系統主要功能概覽

教師端操作教學

1. 進入系統與教師登入

2. 教師面板總覽

3. 操作流程

學生端操作教學

1. 進入系統與學生登入

2. 等待與作答

第六部分：常見問題與疑難排解

沒有留言:

張貼留言

2025年7月5日星期六

步驟 3：尋找並修改 `firebaseConfig` 區塊