2026年11月5日 星期四

剛好系列:課堂任務通 Cloudflare 版 -自己建立可自主掌握的非同步互動教學平台

 非同步學習 · 免費方案 · 零伺服器維護

剛好系列:課堂任務通 Cloudflare 版
打造自主掌握的非同步互動教學平台

支援 9 種課堂互動任務,無縫整合生成式 AI 互動教材。
免依賴 Google 雲端硬碟與繁瑣權限,四步部署即刻上線,輕鬆打造專屬班級基地!

💡 從「即時同步」走向「多元非同步」的教學拼圖

之前我曾分享過針對課堂即時互動設計的「剛好學」,協助老師在課堂上透過大螢幕與學生即時問答、抽籤與互動。然而在日常教學中,除了講台上的熱烈即時互動,學生也需要按自己的節奏探索教材、做實驗、畫圖、寫心得與完成測驗。

因此,我開發了這套專為非同步教學設計的「剛好系列-課堂任務通」。現在更進一步將它改寫為 Cloudflare 版本,讓老師們不必受限於雲端硬碟權限或經費門檻,擁有一個完全屬於自己的線上課堂基地。

軟體由來:為什麼從 GAS 改寫為 Cloudflare 版?

課堂任務通最初的版本是架構在 Google Apps Script (GAS) 搭配 Google 試算表與 Google 雲端硬碟。雖然對熟悉 Google 生態系的老師很親切,但在實際教學場景中,隨著上傳的作業檔案、照片與圖畫增多,常會遇到執行超時、檔案權限管理繁瑣,以及學校帳號雲端空間容量受限等挑戰。

⚡ 架構升級:基於現代化 Cloudflare Workers 邊緣運算架構

在這次釋出的新版本中,我將系統核心完全重構,轉移到現代化的 Cloudflare Workers 無伺服器邊緣運算平台:

  • 零伺服器維護負擔:程式直接在邊緣高速運行,免除以往繁複的後端設定與維護困擾。
  • 擺脫 Google Drive 依賴:所有學生的作業圖片、手繪作品與檔案,由系統集中安全管理,無須繁瑣設定硬碟共用權限或擔心存取被擋。
  • 100% 免費方案即可運作:不需要購買伺服器,不需要綁定信用卡,完全使用 Cloudflare 免費額度即可順暢支援全班上課。
  • 平滑無痛更新:日後只要在終端機輸入一行指令更新程式,既有的學生名單、作業與成績資料完全保留不遺失。

🌱 教育工具的初衷:工具應該為教學服務,而不是增加老師的資訊技術負擔。這套軟體讓每位老師都能以最少的時間成本,建立高自主性、高隱私且穩定耐用的教學平台。

功能總覽:走廊教室入口與 9 種互動任務

部署完成打開網址,映入眼簾的是溫馨直覺的「學校走廊」首頁:左側是老師專屬的「教師辦公室」,右側是孩子們的「學生教室」。

🏫 貼心專為師生設計的友善管理

  • 首次設定管理者:第一位進入教師辦公室的老師設定密碼即成為管理者,確保操作安全。
  • 學生名單批次匯入:直接貼上一行一位的姓名與密碼即可快速建檔。
  • 國小友善「免密碼登入」:針對國小低中年級學生,可開啟免密碼模式,學生只要在教室門口點選自己的座號姓名就能輕鬆進入。
  • 五大管理分頁:進入課堂後,具備「單元內容」、「學生名單」、「批改與總覽」、「作品藝廊」及「課堂設定」清晰分頁。

九種多元任務類型,滿足全方位學習情境

在「單元內容」中,老師可以依照章節自訂分類(如「水的三態變化」),並派送豐富的任務:

📄
1. PDF 講義互動

上傳教材自動將每頁轉為圖片,學生可直接在網頁上劃記、圈選與寫筆記。

🎬
2. YouTube 隨堂考

搭配影片觀看進度派送題目,支援 CSV 匯入與內建 AI 提示詞一鍵產生試題。

📸
3. 圖文回應

學生可拍照上傳實作成果、實驗現象,並填寫文字觀察與心得回饋。

🎨
4. 手繪繪圖板

學生可用手指或平板觸控筆直接線上自由作畫、繪製心智圖或設計圖稿。

📝
5. Markdown 文件

呈現排版精美的線上講義與學習單,並支援學生匯出成圖片或 PDF 存檔。

🔗
6. 外部連結

整合外部優質線上資源、教學遊戲或參考網站,集中於同一任務節點。

📁
7. 分享檔案

直接分發補充資料、學習單範本或簡報檔案,供學生自主下載瀏覽。

💯
8. 自動閱卷測驗

是非、單選等題型,系統提供即時自動評分,學生繳交立即掌握理解成效。

🌟
9. AI 網頁加截圖回傳

最強核心亮點!無縫整合 AI 生成的互動 HTML 網頁,完成後一鍵截圖繳交。

🌟 重點推薦:生成式 AI 互動教材 + 截圖回傳機制

現在使用 Gemini Canvas、ChatGPT 或 Claude 等生成式 AI,只要輸入一段提示詞,就能在幾秒內產出功能完整的單一 HTML 互動教材。

💡 實用範例提示詞:
「請設計一份國小三年級『水的三態變化』互動學習單,要有溫度實驗滑桿、配對練習、小測驗,還有寫下觀察的地方,做成單一 HTML 檔案。」

以往老師拿到這類酷炫的 HTML 檔案,往往苦惱於「不知道該如何派送給學生,更不知道學生操作完後該如何繳交收作業」。課堂任務通完美解決了這個斷點:

  • 安全沙盒隔離(Sandbox):網頁在受保護的沙盒容器中執行,完全不會讀取到平台後台資訊,安全無虞。
  • 智能截圖回傳:學生在互動網頁中拖拉實驗、填答完畢後,點選右下角「截圖回傳」,可自選「整頁截圖」或「當前畫面」。系統會自動過濾淡入淡出動畫,完整捕捉作答全貌。
  • 縮圖牆批改作業:老師在後台可以直接看到全班學生的截圖縮圖牆,點開即可精準給予評分與指導評語!

課堂教學應用:課前、課中、課後完整實踐

結合非同步學習與課堂面授,課堂任務通能夠靈活融入各種教學節奏:

學習階段教學活動與任務搭配教學價值
課前預習
(自主探究)
派送 AI 生成的模擬實驗網頁或 YouTube 隨堂考任務,讓學生在上課前先以自己的節奏觀看與試驗。翻轉課堂概念,激發好奇心,老師可在課前掌握學生先備知識盲點。
課中互動
(分組與分享)
學生手持平板進行手繪繪圖、圖文回應拍照實驗成果;老師開啟「作品藝廊」將全班作品投影在大螢幕上討論。作品互相觀摩,支援同學按讚與留言;開啟完全公開還能產生 QR Code 讓家長共同參與。
課後鞏固
(檢核與輔導)
指派自動閱卷測驗與重點 Markdown 複習講義,學生自主複習並檢視錯誤。老師於「批改與總覽」一覽全班每位同學的完成矩陣,針對未通過學生進行個別化輔導。

🖼️ 打造班級的「作品藝廊」與家長親師連結

學生的圖文報告與手繪畫作,不再只是躺在後台的作業檔。老師可以將優秀作品一鍵發布至「作品藝廊」:

在班級內部,同學之間能互相點讚、給予溫暖正向的留言評語;若設定為「完全公開」,系統還會自動生成專屬分享連結與 QR Code,讓家長在親師會或家長日也能透過手機欣賞孩子的學習成果。

四步部署:只要 5 分鐘,免信用卡架設上線

課堂任務通採用現代化 Cloudflare Workers 架構,整個部署流程極其精簡:

1下載程式專案
2安裝 Node.js
註冊帳號
3終端機登入
授權認證
4一行指令
完成上線

🎬 軟體部署及功能介紹影片

如果不確定操作細節,可以直接觀看完整教學影片。從專案下載、Node.js 安裝、Cloudflare 快速部署,到九種課堂任務功能與教室實際應用,跟著影片邊看邊做更輕鬆:

影片連結:https://youtu.be/JEJsTQTjZSs

1
下載程式並解壓縮

前往 GitHub 開源專案:https://github.com/kentxchang/classtask_cloudflare。

點選右上角綠色的 Code 按鈕,選擇 Download ZIP。下載完成後解壓縮,打開資料夾,確認能看見 wrangler.jsonc 設定檔那一層。

2
準備 Node.js 環境與 Cloudflare 免費帳號

前往 Node.js 官方網站,下載 Windows 版本的 LTS 安裝程式,點擊下一步完成安裝。

前往 Cloudflare 官方網站,註冊一個免費帳號。免費方案即可滿足日常教學需求,完全不需要填寫或綁定信用卡。

3
開啟命令視窗並登入 Cloudflare

在剛才解壓縮的資料夾中(看得到 wrangler.jsonc 那一層),點一下檔案總管上方的路徑網址列,輸入 cmd 並按下 Enter,即可在該目錄快速開啟命令提示字元。

在終端機中輸入以下登入指令:

npx wrangler login

若系統詢問是否安裝相關套件,輸入 y 繼續。接著瀏覽器會自動彈出授權視窗,點擊 Allow 允許。當命令列出現 Successfully logged in 時,即代表登入成功!

4
一行指令完成部署上線

最後在命令視窗中輸入部署指令:

npx wrangler deploy

若您是第一次使用 Cloudflare Workers,系統會提示您設定一個 workers.dev 的子網域名稱(取個英文名稱即可)。部署完成後,畫面最下方會直接印出您的專屬網站網址,點擊打開即可開始使用!

💡 需要繁雜的系統設定嗎?完全不用!
設定檔已經全部預先配置妥當。在執行 npx wrangler deploy 時,Cloudflare 會自動建立完整運作環境,開箱即用。
若想自訂專屬的網址名稱,只要在部署前修改 wrangler.jsonc 裡面的 name 欄位即可;日後程式版本更新,也只要再次執行 npx wrangler deploy,既有的學生名單與教學資料都不會被覆蓋或清空!

課堂維護:空間管理與課程備份機制

為了確保免費方案能夠長久穩定運作,系統內建了貼心的「空間管理」工具:

📊 直覺容量長條圖與一鍵備份還原

  • 空間視覺化監控:後台透過長條圖清楚顯示每門課程佔用的儲存空間。Cloudflare 免費方案提供高達 1GB 的儲存容量,對於一般班級的圖片與作業而言相當充裕。
  • 學期結束備份封裝:每當學期或課程結束,老師可以在後台一鍵下載課程的完整備份封裝檔,再將課程自線上刪除以釋放空間。
  • 完整匯入還原:日後若需要調閱往年學生作品或重新複習,隨時可將備份檔匯入還原,兼顧資料保存與雲端資源的最佳化運用。

常見問答(FAQ)

常見問題解答說明
執行 wrangler deploy 時顯示錯誤?請確認您是在包含 wrangler.jsonc 的那層資料夾開啟 cmd,且電腦已安裝好 Node.js(可輸入 node -v 檢查版本)。
真的完全不需要費用嗎?是的,本專案完全運行於 Cloudflare 免費層(Free Plan),不需要綁定信用卡或付費訂閱,安心無負擔。
學生需要下載任何 App 嗎?完全不需要。學生只要使用平板、筆電或手機瀏覽器,掃描 QR Code 或輸入網址即可直接作答與繳交任務。
國小低年級記不住密碼怎麼辦?在後台建立名單時,勾選「免密碼登入」,學生登入時只要點選自己的名字即可直接進入教室。
未來更新程式碼,資料會不見嗎?不會。再次執行 npx wrangler deploy 僅會更新前端與系統腳本,既有的學生名單、課堂任務與作答繳交紀錄都會持續安全保存。

讓每個班級,都能擁有專屬的智慧任務基地

從即時互動的「剛好學」,到非同步探索的「課堂任務通」,
我希望能為教育現場提供低門檻、高效能、且資料自主的工具選擇。
歡迎各位老師下載體驗,一起探索生成式 AI 與多元互動帶來的教學新可能!

🚀 立即前往 GitHub 下載體驗

沒有留言:

張貼留言