Classroom 開發記錄：把回饋留在練習影片裡

BR3AK 正在開發 Classroom，讓 Breaking 老師收練習影片、在動作發生的時間點留下回饋，再讓學生帶著回饋繼續練。對象已經確定：專業街舞老師與正在學 Breaking 的學生。

這篇整理 9 月 8 日、9 日留下的開發與測試紀錄，以及後續調整的方向。到這次整理時，本機原型已有能操作的流程，Google Drive 直接上傳仍未完成，也還沒有正式班級的學習成效資料。

先把要驗證的事說清楚

開發過程中，有一句要求決定了後面的取捨：「現在的關鍵是功能是否真的可以提昇學生學習 breaking 的效果。」

因此，第一輪要走通的是一段具體的練習流程：老師設定技能與示範，學生提交影片，老師指出需要修正的位置，學生看完再交下一次練習。程式可以保存這些紀錄；學生是否看懂、下次是否做得更好，還要到真實課堂裡確認。

我們也討論過讓多位老師使用、之後收費的可能性。這輪先沒有把訂閱系統排進試用範圍。老師與學生願不願意持續用、回饋是否有幫助，會比先做完收費流程更早接受檢驗。

獨立在 classroom.br3ak.com 開發

最初的要求是替 BR3AK 加一個 Classroom 選單。確認方向後，教學系統改採獨立專案，預定使用 classroom.br3ak.com，品牌站負責提供入口。

Classroom 使用 Next.js、Payload 與 Better Auth。本機用 SQLite，雲端資料庫準備了獨立的 Neon 資源，沒有使用 Supabase。班級、學生、影片與批閱資料放在教學專案裡，方便與品牌站分開維護和部署。

這次也把 Classroom 連結加入品牌站的導覽列。入口出現，不代表整套教學服務已經完成；本文記錄的仍是正式試用前的開發狀態。

播放器先用真實 Breaking 影片測

本機播放器已有慢放、A–B 區間循環，以及前後移動 1/30 秒的按鈕。老師可以在影片上畫線、畫箭頭、寫時間留言；學生點留言時，畫面會回到對應時間，重新顯示保存的標註。

批閱頁也能載入老師示範作對照。提交會保留當時的示範版本，避免老師換了一支示範，舊作業的比較基準也跟著改掉。兩支影片可以手動調整動作起點，目前還沒有自動對齊。

9 月 8 日的驗證用了兩段公開授權的 Breaking 影片：VincaniTV 的 Demonstration of a 2-step，以及 gennmajella 的 2000 Powermove，兩者皆標示 CC BY 3.0。它們是測試素材，並非學生作業，也不代表作者參與 Classroom 試用。

測試把兩段影片各做成三種編碼版本，在本機瀏覽器累計量了 120 次時間跳轉。這批結果支持先採用約半秒一個關鍵影格的分析版：在這兩段短片裡，它的跳轉表現接近每格都獨立編碼的版本，檔案也較小。這個選擇還需要拿手機實拍與長一點的作業繼續驗證。

測試也找到了實際問題。暫停後連按三次前進，原本的同步邏輯會讓對照片落後約 100 毫秒。修正後，批閱頁測到兩支影片都停在 0.099999 秒。

另一個必須寫清楚的細節是按鈕名稱。移動 1/30 秒，不保證等於移動來源影片的一格。 這次的 2-step 素材約為 23.976 fps，因此介面仍寫「時間步進」。來源影格索引還沒接進播放器，不能先把它稱為精確逐幀。

影片儲存改成老師自己的 Google Drive

第一版做過 R2 上傳與 FFmpeg 轉碼管線，並用本機替身儲存服務測試。後來方向改了：學生在 Classroom 直接選影片，上傳到老師已付費的 Google Drive 空間。

這個決定改動的是整段影片流程。老師要能授權自己的 Drive，班級要綁到正確的儲存位置，影片收完後要能處理、播放，還要遵守師生的觀看權限。先前的 R2 測試通過，無法替這些事情背書。

開發中曾提出一個較快的過渡做法：學生先手動放到老師的 Drive，再把連結貼回 Classroom。這個方案沒有採用，因為已經確認的需求是「仍需在 Classroom 直接上傳影片」。這一項目前仍是正式試用前要完成的工作。

入班改成全班共用一張 QR code

入班流程也改過。原先是綁定學生 Email 的單次邀請，後來確定採用全班共用 QR code：學生掃碼、登入、申請入班，再由老師核准。

老師端已加入產碼、放大展示、下載 PNG、複製連結、換新碼與停用。申請不會立刻給學生班級權限；核准後才建立成員資格。本機瀏覽器已走過測試學生送出申請、老師核准、學生看到進班入口的流程，也驗證了下載圖片能解出正確連結。

登入方式最後選了 LINE。開發期間已建立專用的 LINE Login channel、申請 Email 權限，並留下用手機掃 LINE 登入 QR code、收到成功通知的紀錄。為了先集中驗證教學功能，試用方向再收斂為 LINE 登入優先，Email 備援暫緩。

這裡有兩種不同的 QR code：LINE 的碼用來驗證電腦上的登入；Classroom 的班級碼用來讓學生進站申請入班。前一種成功，還不能代表後一種已在正式網址與學生手機上測完。本機 localhost 的班級碼，也不能讓學生的手機直接連到開發電腦。

程式跑通之後，還欠一次真實練習

目前的本機版本已經有建班、技能與前置條件、影片提交、時間標註、老師批閱、達標後開放後續技能，以及出席紀錄。這些功能組成了原型；程式檢查與操作測試，只能說明已測過的流程能運作。

接下來要先完成 Drive 直接上傳，接好正式網址的登入與班級碼，再用實際手機把提交、播放和批閱完整走一次。正式老師與學生的試用，應該留下同一個技能的前後提交，連同老師的回饋一起看。

我們想確認的事情很具體：學生能否指出老師要他改的地方？下一次練習是否回應了那則回饋？老師是否需要反覆解釋同一個操作？這些是接下來要觀察的問題，現在沒有結果可報。

下一篇 Classroom 開發記錄，應該能寫出直接上傳在哪一步成功或失敗，以及一份作業如何從學生手機走到老師的批閱頁。在那之前，學習效果仍是一個待驗證的問題。

本文依據本次開發對話、專案實作紀錄、影片量測結果與共用 QR code 測試紀錄整理。文中的本機驗證沒有被當成雲端驗收，測試帳號也沒有被當成真實師生試用。