技術規格一覽
• 前端框架: Next.js (React)
• UI 元件庫: ShadCN UI & Tailwind CSS
• 後端與資料庫: Firebase (Firestore)
• 即時同步: Firebase Firestore Realtime Listeners
• 狀態管理: React Context API
• 拖曳功能: dnd-kit
• 音訊處理: WebRTC (MediaRecorder API)
• 檔案處理: PapaParse (用於 CSV)
### 1. 即時同步互動
應用程式的核心特色是其即時性。當任何使用者(老師或學生)新增回應、按讚或評分時,所有在線上的使用者畫面都會立即更新,無須手動刷新頁面。這創造了一個真正同步且富有活力的協作環境。
### 2. 清晰的使用者角色
系統區分為兩種主要角色,各自擁有不同的權限:
- **老師 (Teacher)**
- **完整控制權**:擁有管理整個回應牆的最高權限。
- **密碼保護**:透過密碼登入,確保只有授權的老師才能使用管理功能。
- **建立話題 (Posts)**:可以建立新的討論區塊,引導學生的思考與回應。
- **內容管理**:可以刪除任何話題或回應,並能直接編輯學生的文字回應,或在圖片/塗鴉回應上進行註記。
- **給予評分**:能對學生的回應給予 1-5 顆星的評分。
- **學生 (Student)**
- **輕鬆加入**:可以透過 QR Code 或專屬連結快速進入學生模式,無須註冊或登入。
- **參與互動**:可以瀏覽所有話題,並對任何話題新增自己的回應。
- **按讚支持**:可以對老師的話題或其他同學的回應按讚。
科普:Firebase Studio 和Firebase 資料庫是不同的,Firebase 資料庫(如即時資料庫或Cloud Firestore)是Firebase 平台中儲存和同步資料的服務,而 Firebase Studio 則是開發者用於管理專案、設定資料庫、分析應用程式使用情況、部署應用程式等一站式開發工具平台。
以Html5+javascript輕量型網頁語法為主,建立一個功能完整、即時互動的線上回應牆,風格類似 Plurk 和 Padlet 的綜合體。這個應用程式主要提供給教師在課堂上與學生互動使用。
主要功能需求:
使用者權限管理:
教師密碼保護:進入網站時需要輸入密碼,只有知道密碼的教師才能存取完整管理功能。
學生模式:提供一個「學生模式」的專屬連結或頁面。此模式下的使用者僅能瀏覽、新增回應,無法使用管理功能。
主畫面與內容呈現:
動態看板牆 (Wall):所有貼文以卡片形式呈現在一個可水平滾動的主畫面上。
雙風格切換:提供一個按鈕,讓使用者可以在「Plurk 風格」(垂直時間軸)和「Padlet 風格」(自由網格排列)之間切換版面配置。
自訂背景:教師可以上傳圖片,更換回應牆的背景圖片。
貼文與回應功能:
新增貼文(區塊):教師可以在牆上建立新的貼文區塊(或稱主題欄)。
多樣化的回應類型:在每個貼文區塊下方,使用者可以新增不同類型的回應,包含:
純文字
圖片(可透過連結或直接上傳檔案)
YouTube 影片連結
一般網頁連結
塗鴉功能:提供一個彈出式的畫布視窗,讓使用者可以直接手繪並作為回應提交。
即時更新:所有的新增貼文與回應都必須即時同步顯示在所有使用者的畫面上,無需手動刷新。
互動與分享:
暱稱與內容輸入:使用者在新增回應時,可以輸入自己的暱稱與回應內容。
QR Code 分享:系統需能自動生成「學生模式」的 QR Code,方便教師分享給學生掃描加入。
圖片放大檢視:點擊回應中的圖片時,應有燈箱(Lightbox)效果,將圖片放大顯示。
管理與資料功能 (教師權限):
雲端存檔與讀取:可以將目前回應牆的狀態儲存至雲端,並能讀取過去儲存的版本。
匯出與匯入:支援將所有資料匯出成 JSON 檔案,也能透過上傳 JSON 檔案來匯入先前儲存的資料。
下載 HTML 報告:提供一個按鈕,能將目前牆面的所有內容打包下載成一個獨立的 HTML 檔案,以便離線瀏覽或存檔。
登出功能:教師可以登出管理模式。
這個錯誤是因為 next/image 元件嘗試載入來自 api.qrserver.com 的圖片,但這個主機名稱尚未在您的 Next.js 設定中被授權。我將會更新 next.config.ts 檔案來允許來自此來源的圖片。
我已經更新了設定檔。現在 QR code 圖片應該可以正常顯示了。
安裝NODE.js:learn.microsoft.com/zh-tw/windows/dev-environment/javascript/nodejs-on-windows