摘要
走到 Day 30，我們完成了「拖延怪日記 Procrastinator」網頁。從最初的輸入表單，到 LocalStorage 保存、歷史清單、Undo、排序篩選、情緒追蹤、任務安排、AI 語錄、主題切換、互動動畫、再到最後的跨裝置雲端同步與展示分享。今天回顧整個 Day 1–30 的演進，讓這個 Side Project 不只是程式練習，而是能放進履歷與作品集的完整專案。而在文章最後會放上我的個人心得。

回顧 Day 1–30

• Day 1–5：環境架設、表單輸入、LocalStorage 存取。
• Day 6–11：歷史回顧、刪除、Undo、排序篩選。
• Day 12–18：進場共鳴、互動導流、精神小測驗、任務安排、拖曳互動。
• Day 19–21：回訪體驗、圖表統計（長條、圓餅、折線）。
• Day 22–25：匯出（JSON/CSV）、AI 語錄生成與語錄牆。
• Day 26–28：全站樣式、主題切換、動畫與微互動。
• Day 29：跨裝置雲端同步（固定 ClientId + API key 代替帳號，Last Write Wins 策略）。
• Day 30：展示、個人心得。

核心流程

1. 歷史回顧頁（History Section）
   index.html 中的 歷史回顧頁 已經集成了所有功能：
   - 精神狀態圖表（Chart.js 長條 / 圓餅 / 折線）。
   - AI 語錄牆（支援搜尋、排序、匯出）。
   - 雲端同步區塊（備份、拉回、同步）

2. UI 與一致性

• styles.css 使用 CSS 變數集中管理顏色，支援 Light/Dark 模式與三種色盤主題
• 全站按鈕、表單、工具列樣式統一。

3. 完整體驗
   3-1. 初次進場：共鳴畫面 → 表單 → 語錄回饋 → 精神小測驗 → 任務安排 → 溫暖總結。
   
   
   
   
   
   
   

行動裝置版

3-2. 每日回訪：再次造訪的回顧 → 精神小測驗 → 任務安排 → 溫暖總結。

3-3. 長期使用：歷史回顧、情緒統計、跨裝置同步。

3-4. AI 語錄：在表單按「下次吧…」或條件分支按「我有點累…」，AI 會回一句話並自動收藏。

個人心得

1. 背景經歷
   剛學習 JavaScript 不到一年，過去只有簡單表單實作與嘗試串接 API 的經驗，幾乎沒有獨立完成專案的經驗。因此非常感謝近年的 Vibe Coding 方式，使我能夠一步步堆疊到完整專案，讓我確信「做中學」確實能帶來大量收穫與強大的成就感。

2. 動機
   參與比賽的最大動機只是加學分，但很快就發現每天動手做、每天寫文章，讓暑假的時間不再空轉，否則就是躺平好幾個月。

   最好笑的事是本來舒舒服服躺在床上，半夢半醒中想到「欸你文章還沒寫」後嚇醒，直接迅速坐起來拿電腦開始寫文章。

   久而久之甚至養成了一個習慣：晚餐前一定先完成文章，再把吃飯當作獎勵，成為這 30 的自律循環。

3. 主題設計

   主題我構思了兩個星期，原先想做「模擬阿茲海默症體驗的網頁遊戲」，但顧慮到技術力和美術門檻，最後決定轉向更貼近生活的題目 —— 拖延。

   使用者動機設計
   學業／工作、生活、使人目不轉睛的社交媒體，這些常常會讓人想要一天有四十八小時。社交媒體的光鮮亮麗、教你自律的影片／文章，總是使人感到自己黯淡無光。或許會使你突然奮發圖強，但往往三分鐘熱度後，就回到機不離身的每一天。

   如果能抓住「動機」本身，是否能避免這種無效刺激？譬如遊戲的每日獎勵能推你登入，但廣告為何讓人厭煩？因為沒有引起興趣，沒有**「動機」讓我們去享受到任何正面回饋。**

   功能設計
   專案從進場的共鳴引導開始，讓使用者覺得「這我」，抓住這份興趣令使用者願意繼續使用，簡易的填表單、給予使用者選擇是否要繼續使用、串接 AI，讓使用者認定是自己做主的並適時給予 AI 產生的語錄回饋，避免說教感、過於死板，保持新鮮感。之後再用排程、分享、歷史回顧，使使用者可以和好友一起奮發圖強，並在回顧紀錄時感到成就感。

   簡單來說，《拖延怪日記》就是希望讓人每天都有小小的脫離拖延的動力。

4. 遇到的困難

   工具陌生
   原先上課使用的是 Intellij IDEA，理所當然我對於 VS Code 完全是從零開始使用，Terminal從哪開啟？插件是什麼？Live Share可以做什麼？Chrome DevTools 到底如何使用？以及第一次體驗到 AI 自動幫你改程式檔案的厲害之處。

   Debug 卡關
   雖說有表單與串接 API 的經驗，但是過程中同樣會遇到：DOM 沒隱藏好、圖表破圖／顏色跑掉、叫 AI API 卻和叛逆期一樣不理人、多裝置同步大失敗等瓶頸。

   這些問題一度令人沮喪，但也是 Vibe Coding 的魅力所在，只要耐心下 prompt、持續實驗，就能找到突破口。

   例如 DOM 沒隱藏好，我原本用 style.display 手動切換，常常漏掉還原。問 AI 後改用 hidden 屬性搭配 showPage() 函式統一管理，問題才徹底解決。

5. 收穫

• 技術面：熟悉了 DOM 操作、localStorage、Chart.js、API 串接、Express/ngrok，體會到 Web 開發的完整流程。
• 學習面：養成「邊做邊記錄」的習慣，寫作讓我把模糊的概念整理清楚。
• 自律面：每日文章成了固定儀式，讓我體驗到「小小成就感 → 獎勵晚餐」的正向循環。