iT邦幫忙

2025 iThome 鐵人賽

DAY 2
0

前一篇解釋了Flutter、LLM、n8n這三個技術選型背後的原因,今天將正式動手,從這套系統的「後端」——n8n開始,親自搭建屬於自己的n8n環境,創建第一個自動化工作流,感受「讓機器為你工作」的快樂感。

n8n是一款強大好用的開源自動化工具,它的核心理念是讓你透過視覺化節點(Node)相接的呈現,串接不同的任務,建立複雜的工作流,讓我們不(太)需要寫後端程式碼,就能快速建立一個能自動抓取和處理資料的專屬 API。

n8n環境搭建:本地端或雲端?

本地端安裝:

最快、最簡單的方式就是直接在你的電腦上安裝,這個方法適合還在開發與測試階段的你!

給大家推薦一個我目前看過最詳的YouTuber 解說,很推薦大家把他的影片全看完(目前就14部),他會邊操作邊稍微講原理,我目前雲端部署的方法也是跟著他的教學做出來的,非常感謝HC AI說人話

Yes

雲端部署:

當你的n8n工作流越來越多,甚至需要全天候自動執行時,把它們部署到雲端就是最佳選擇!幸好~現在很多平台都提供了一鍵部署的懶人包,像是 Railway、Render、DigitalOcean 和 Fly.io。

  • Railway:新手首選!提供免費額度,適合技術新手或追求快速部署的開發者。
  • DigitalOcean:適合熟悉雲端主機和Linux維運的技術專家或開發者,需要高度自訂和完全控制權的企業級應用,對一般人來說門檻比較高。(看起來是與我無關的選項)
  • 介於中間的PaaS部署服務:Heroku、Render,主要簡化了部署流程,有社群提供的部署範本。

在眾多雲端部署選項中,想特別推薦一個近年在台灣開發者社群中快速竄紅的平台:Zeabur。

Zeabur提供的是「一站式」的部署體驗,它能聰明的為你的專案配置好前端、後端甚至資料庫環境,讓你從繁瑣的設定中解放,其最大的優勢,也是在台灣爆紅的關鍵,就是它是台灣團隊做的,有超棒的中文支援!相較於其他主流平台清一色的英文介面,Zeabur為中文母語開發者降低了入門門檻。

就我個人而言,目前是部署在GitHube上小量使用,但未來Zeabur會是我的優先考慮之一,或者乾脆就直上 GCP,Google強大的生態鏈整合有著難以抗拒的誘惑,感覺遲早所有東西都會放到上面去!

n8n工作流建立:Create -> Trigger -> RSS Feed -> Log -> EXECUTE & TEST!

Step1. 建立新工作流

點開右上角的create workflow後,就進入主畫面了,提醒大家要有更改workflow名字的習慣,還有之後workflow越來越多整理起來會很麻煩,先建立好自己的tag分類系統也很重要喔!

https://ithelp.ithome.com.tw/upload/images/20250902/20177971unZhtsllkt.png

Step2. 新增觸發節點(Trigger Node)

每個工作流都需要一個觸發節點來啟動它,我先使用定時觸發(On a schedule),可以每天定時自動啟動我們的工流,我設定在每天晚上9pm,因為我接下會找國外的資源比較多,台灣9pm是現在美國的早上6am,會有當日最新資訊。

https://ithelp.ithome.com.tw/upload/images/20250902/20177971eHPrX0Xdpo.png

Step3. 新增RSS Read節點

點擊trigger右邊的+號,搜尋框內輸入RSS,選擇RSS Read節點,可以放你感興趣的部落格或web RSS網址,我輸入的是A Day Magazine的Feed網址,該網站內容涵蓋時尚、藝術、旅行和人物專訪~文字優美,選題獨特,很適合尋找寫作題材。

https://ithelp.ithome.com.tw/upload/images/20250903/201779715he6lIPBTI.png

Step4. 建立Code節點,用於輸出上個節點的結果。

為了驗證工作流是否成功與查看抓取文章的Output結果,可以用一個Code節點來輸出讀取到的內容,在這個節點上,我有輸入一些程式碼,做輸出格式的設定,主要是取出最新的前3篇,並將其作為這個節點的輸出。

四行程式碼如下,大家其實可以自己vibe coding篩選出更好的樣子,像是不要贊助的文案,做關鍵字排名算分與最後的文章篩選器,我先做一個簡單可行的版本,後續再慢慢優化。

const allArticles = items;
// 設定想要限制的文章數量
const numberOfArticlesToKeep = 3;
const limitedArticles = allArticles.slice(0, numberOfArticlesToKeep);
// 回傳處理過後的結果。
return limitedArticles;

https://ithelp.ithome.com.tw/upload/images/20250903/20177971XYMwkLx97w.png

Step5. 測試工作流

點擊右上角的Execute Workflow,就會在code節點裡面看到輸出內容啦~

https://ithelp.ithome.com.tw/upload/images/20250903/20177971qIdMOb6bDv.png

明日預告:使用n8n的節點,對原始內容進行篩選和解析

今天成功讀取了RSS內容,但這些內容還很原始,包含許多HTML標籤。明天再繼續使用n8n的節點,對這些原始內容進行篩選和解析,從中整理出我們真正需要的資訊。


【哈囉你好:)感謝你的閱讀!其他我會常出沒的地方:Threads


上一篇
30 天做一個極簡App:技術選型與系統設計(Flutter × LLM × n8n)
系列文
Mobile Dev|日更靈感來源 App:Flutter × LLM × n8n,每天只推 3 則!2
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言