📌 TL;DR：這篇文章將帶你從零開始，用 crawl4ai + n8n 打造一個能每日更新的電商資料平台。從爬蟲、API 設計、資料庫，到前端可視化儀表板，完整展示我如何實作資料驅動的應用。
💡為什麼想做這個專案？
這個專案起源於對資料分析與自動化流程的雙重興趣。
在學期間，我修習過資料探勘與商業分析課程，對從資料中挖掘洞察的過程感到非常著迷。
另一方面，我接觸 n8n 已有一段時間，了解它在自動化場景中的應用潛力，而「爬蟲」正是其中最實用也最具挑戰性的任務之一。
因此，我決定結合 n8n + crawl4ai，以電商商品資料為主題，打造一個能自動更新、視覺化分析的資料平台，讓消費者與店家都能掌握最新市場動態，真正實踐資料驅動的應用。
📍專案預期功能
n8n每天將自動從蝦皮、momo、PChome 等平台爬取熱門商品資訊，資料通過清洗CRUD、轉換後，於前端網頁呈現：
📈 熱門商品排行榜（每日變化）
💸 價格變動與趨勢圖
🔍 熱門關鍵字分析
📊 類別分佈統計
能同時比對多個電商平台，無論是競品觀察、商品選品、內容研究，甚至可作為市場研究的工具。
⚙️使用技術&工具&框架
使用技術&工具&框架
架構圖總覽
專案結構總覽
N8N實作流程圖
N8N流程圖
未來添加功能
- 加入商品追蹤清單與價格通知功能
- 整合 LLM，自動為商品生成摘要或分群
- 導出報表、生成競品比較分析
- API 對外開放，提供他人串接
挑戰與心得
- 爬蟲穩定性:
原本想用 LLM 自動解析頁面，但效率與成本都不理想，後來選擇用 crawl4ai 的 CSS selector，結果反而更穩定且維護成本低。 - n8n 排程與 JSON 處理:
在資料清洗與格式轉換階段，踩過幾次變數名稱與結構錯誤的坑。 - 跨服務環境變數管理:
整合前後端與資料庫時，環境變數配置與 CORS 設定需非常謹慎。 - 版本問題:
Tailwind、nextjs版本太新未注意部分功能和編碼方式改變。 - 分離&整合式部署:
發現若採分離式部署(即前端Vercel、後端Render)，前端網頁會渲染太慢，後來新增了Nextjs獨有的API設計，另建API於前端文件，實現整合式部屬。 - 資料型別問題:
分離式與整合式二者接受的資料型別要完全一致，才能進行後續的資料轉換。
結語
透過這次專案實作，我不僅加深了對前後端整合與資料流程設計的理解，也提升了解決跨框架整合問題的能力。未來我會繼續分享更深入的細節，像是：
- crawl4ai 該如何應用於 n8n，其中有哪些細節需要注意?
- 如何用 n8n 自動清洗資料與串接 API？
專案GitHub連結:https://github.com/Jack-Libra/Ecommerce-trend-analyzer
📢 想看更多 n8n 或電商爬蟲實戰？
📎 歡迎追蹤我的 Medium / GitHub 👉https://github.com/Jack-Libra
💬 如果你對這個專案有任何建議或想法，歡迎留言交流！
