概覽
這是一個為國小學生設計的互動式昆蟲觀察記錄表系統，以四年級學生養殖蠶寶寶為背景情境。它讓孩子在線上填寫飼養日記、手寫繪圖、上傳照片並繪製生長曲線，最後能像素級還原物理紙本作業的 A4 排版，把線上學習記錄無縫輸出成可繳交的紙本作業。
核心體驗：線上記錄與紙本作業合而為一——在瀏覽器裡完成觀察與分析，一鍵列印出符合學校規格的 A4 作業。
核心功能與體驗
- 飼養準備與生態紀錄：引導孩子填寫飼養基本資訊，並用童趣語氣記錄昆蟲適應環境的構造、行為與生態省思。
- 線上畫圖板 + 照片上傳：以 HTML5 Canvas 打造的畫圖工具，支援筆刷大小、多色調色盤、橡皮擦與無限步驟復原，也可直接上傳實體照片。
- 成長日記時間軸：以動態時間軸呈現蠶寶寶從卵期、孵化、蛻皮眠期到幼蟲的成長歷程，可自由新增、編輯、刪除每日記錄。
- 生長曲線分析：整合 Chart.js，依「體長」與「飼養天數」自動繪製生長趨勢曲線，培養科學數據分析思維。
- A4 像素級列印引擎：內建
@media print樣式，使用標楷體渲染、無縫接續排版、圖片自動貼齊格線，輸出符合學校作業規格的紙本。 - 自動儲存與雙軌備份：編輯時即時備份至
localStorage，後端資料庫同步鏡像備份，杜絕資料丟失。
技術棧
Next.js · React · TypeScript · Chart.js
狀態
✅ 已完成 - 完整可運作的應用，採 Next.js（App Router）與伺服端 JSON 資料庫，於本機執行。