今日主題

進度回顧
Day 18 Chrome Extension 快存 → 手機場景：LINE Bot + n8n 自動入庫

因為先做了一個 Chrome extension，幫助我快速儲存網站上逛到的文章或影音，但手機其實不適用，所以串接 n8n 做了Line BOT，在手機滑到的連結能順手丟到 Line，並自動儲存到資料庫。

前一天測試結果：

1. YouTube 連結可存，但標題抓取失敗
2. 也發現如果是 Threads 貼文，無法寫入資料庫
   

所以今日目標：

• 解決社群貼文無法寫入問題
• 針對 YouTube 這類型的資料來源，能夠正確抓到標題

為什麼想做

• 提升專案完整性
• 預期難度不高，都屬於資料格式轉換類型問題，且抓取 YouTube 資料來源，應該是常見模式

思考怎麼做

• 工具：Claude +n8nMCP
• 流程：
  • YouTube 是標題無法正確抓取，預計新增判斷節點針對 YT 資料源另處理
  • 社群貼文無法寫入問題，懶人法貼 log 報錯資料請 Claude 修復並說明原因
• 協作：昨天從零開始建 workflow，前面順暢但後面 debug 開始鬼打牆，今天另開對話，只針對特定節點溝通

成果驗收

• 結論：另開對話效率很快，2次對話處理了

  • Claude 自我 Debug：先修復資料傳送格式，解決貼文寫入資料庫問題
  • YT 標題抓取

• 解法：

  • 分流判斷，比單一流程更適用 & 單純
  • 資料傳送格式調整

• 修改前/後比較：

針對貼文連結寫入資料庫失敗原因：

舊版是字串，只是裡面剛好長得像 JSON，社群連結 url 複雜度有多參數複雜度高，所以失敗。

具體的程式碼差異：

原本：

contentType: "raw"
rawContentType: "application/json"
body: `{
  "url": "{{ $json.url }}",
  "title": "{{ $json.title }}"
}`

新版：
specifyBody: "json"
jsonBody: ={{ { 
  url: $json.url, 
  title: $json.title 
} }}

針對 YT 標題失敗原因：

舊版：10 個節點，1 層判斷，對所有網站用同一招
新版：13 個節點，2 層判斷，針對不同網站用不同方法

針對 YouTube

• 使用 YouTube oEmbed API：https://www.youtube.com/oembed?url={影片網址}&format=json
• API 直接回傳影片標題，不需要解析 HTML
• 免費、穩定、不會被封鎖

針對其他網站

• 維持原本的 HTML 抓取方式
• 提取 og:title、 等標籤

新版流程
1. Webhook
   ↓
2. Extract Message
   ↓
3. IF URL Exists（判斷是否有網址）
   ├─ Yes → 4. IF YouTube（判斷是否為 YouTube）
   │         ├─ Yes → 5a. Fetch YouTube Title（用 oEmbed API）
   │         │         ↓
   │         │       6a. Extract YouTube Title
   │         │         ↓
   │         └─ No  → 5b. Fetch Other Webpage（一般網站）
   │                   ↓
   │                 6b. Extract Other Title
   │                   ↓
   │         ┌─────────┴─────────┐
   │         ↓                   ↓
   │       7. Prepare Data
   │         ↓
   │       8. Save to Base44
   │         ↓
   │       9. LINE Reply Success
   │         ↓
   └─ No  → LINE Reply Error
             ↓
           10. Respond to Webhook

新版

舊版

實際測試
丟到 LINE BOT

待讀頁面顯示

今日總結

今天心得非常不科學，因為感覺有時候不要太過執著，想在同一天要解決完所有 bug。臨時利用開會空檔時間，把問題留順便丟給 Claude 在背景執行，然後再偶爾看一下成果，但就兩次對話後，格式測試都正確了。突然有種其實好像有時候放一放，讓 Claude 也自我冷靜一下 (? 反而會更順利。所以總結

AI 幫了我什麼

• 建立 n8n Workflow
• 說明了前後作法差異 (教育我的意思)：苦口婆心跟我說明為什麼要這樣改，完全感受到希望我爭氣一點

    就像你要去不同地方：
    去台北 → 搭高鐵（YouTube 用 API）
    去附近 → 走路就好（其他網站用 HTML）
    如果所有地方都只能走路，那去台北就會很辛苦（就像舊版對 YouTube 會失敗）！

我做了什麼

• 驗收
• 被教育 (蠻好的)

遇到的挑戰
無

下一步
針對待讀清單頁面，從發想、Web、到手機版流程，初步整理完告一個段落。接下來就看這個專案前面累積的優化事項，挑選想做的執行。合計第8/16/17/18天做完待優化項目

• 趣味性：情境上如果要更 RPG 風格，CTA 動畫或者是音效功能，單純就是娛樂性考量
• 功能性：影音或文章自動抓取預覽或標題
• 易用性：建立後端函數來接收資料 Chrome Extention 觸發的資料