📌 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
💬 如果你對這個專案有任何建議或想法,歡迎留言交流!