今日主題

核心目標是將 Gmail 中的科技資訊郵件視覺化為互動的 3D 島嶼地圖，讓資訊管理變得更加直觀有趣。第二階段是在這個網站上已讀的這些訊息可連動 Gmail 操作。

為什麼想做

想整理這些訂閱內容很久了。信件是集中入口處沒錯，但每天進到信箱，就分心去處理其他郵件，另外，閱讀體驗也很無聊。

所以測試打造一個實用但有閱讀樂趣的解決方案：

• 視覺化管理：每個指定來源變成一座獨特島嶼
• 重點摘要：自動生成摘要，掌握重點
• 互動體驗：3D 動畫和光點提示，讓資訊管理變得有趣
• 省下操作：網站操作直接連動 Gmail，例如標示為已讀 = 信件刪除

開始做之前

需要開始養成一個比較有合理性的習慣，且每次都能依照遵循的規則。因此，這一次從建立專案的規範開始。這些規範的目的主要有兩個：

• 我是誰？我現在在哪？也就是每次都能知道現在已完成哪些跟下一步進度
• 風險排查

建立專案規範

1. DEVELOPMENT.md - 開發日誌與進度追蹤
   • 當前狀態
   • 技術架構決策記錄
   • 開發時程規劃
   • 協作規範和檢查清單
2. SECURITY.md - 安全開發指南
   • API 金鑰安全管理
   • Git 提交安全檢查
   • Code Review SOP
3. DEPLOYMENT.md 部署指南
   • 完整的部署架構說明
   • 環境變數配置
   • 監控與日誌設置
   • 成本估算和故障排除

養成的良好習慣

• 文檔先行：每次開發前先更新狀態，完成後記錄進度
• 安全意識：建立了完整的 API 金鑰管理流程
• 協作規範：標準化的 Git 工作流程和 Commit 格式

今日具體進度

使用工具：

• Cursor：主要功能撰寫
• GPT：遇到視覺風格需求，還是得回到 GPT 直接定義框架，再丟回去給 Cursor。

完成基本雛形：完成度 50%。

• 島嶼概念離想像設計離非常非常遠
• 直接從 3D 期望降回平面
• 今天把重點放在核心功能是否可執行
  

完成項目：

1. 專案架構搭建
   ✅ 完整的專案結構規劃
   ✅ Supabase 資料庫 Schema 設計
   ✅ Google Mail 串接&驗證
   ✅ OpenAI 串接
   ✅ 環境配置和安全設定

2. 前端 3D 視覺化
   ❌ 兩座 3D 浮動島嶼實現
   ❓ 星空背景和動畫效果
   ❓ 島嶼光點提示系統
   ❓ 響應式互動設計

3. 核心功能原型
   ✅ Gmail 登入
   ✅ 郵件抓取和分類邏輯
   ✅ 島嶼點擊互動
   ✅ 郵件詳情面板
   ✅ 基本摘要分析
   ✅ 已讀按鈕

今日總結

我做了什麼

• 功能規格發想&確認
• 確認規範文件是否如我所需，以及哪些環節現階段無法理解或判斷
• 串接授權
• 檢收規格 & 找bug

AI 做了什麼

• 意外做了友善的 Test 介面，複雜排查過程變成點擊按鈕
• UI/UX 雖不完美，但快速重構
• 系統性問題解決 - 環境變數 → API調用 → 資料庫路徑排查和修復

遇到的挑戰

• 無法生成滿意的 3D 視覺跟渲染效果或動畫，是目前 Cursor 持續遇到的關卡
• 卡在一個沒想過的地方，OpenAI API 串接後，生成內容應該相對容易，但這關是今天 debug 最久的，但cursor 直接將排查流程介面化，過程變得比相對好理解排查到哪一步。
  

現在有5個測試按鈕：
"Test OpenAI API" - 測試基本API
"Fix One Email" - 單封郵件測試
"Fix All Summaries" - 批量處理
"Check DB Emails" - 檢查資料庫狀態
"Refresh Islands" - 重新載入島嶼數據

🎯 診斷步驟
1. 請按順序測試：
* 先點擊紫色的"Check DB Emails"
* 查看資料庫中實際有多少郵件
* 檢查每封郵件的內容和摘要狀態
* 檢查 source_id 與島嶼ID的對應關係

2. 然後點擊紅色的"Refresh Islands"
* 重新載入島嶼數據
* 重新計算郵件數量
* 檢查島嶼顯示是否恢復正常

3. 最後再點擊島嶼
* 看看郵件列表是否重新出現

下一步

⚠️ 待解決問題

• 載入指示器持續運轉: 需要進一步排查背景同步邏輯
• Supabase CLI 無法操作

🚀 性能優化:
Phase I

• 使用設計體驗提升，例如版面上切割
• 支援更多郵件來源
• 摘要分析精準度
  Phase II
• 視覺提升: 島嶼動畫

Phase III

• Gmail連動: 在網站標記已讀 → Gmail自動刪除/歸檔