大約在去年時，由Youtube中學習Notion時才知道原來Notion也有提供API功能，讓使用者可以自行使用API來進行一些自動化流程。只是當時不太會用REST Full工具，所以就在網路上輸入「Notion API」這個關鍵字，沒想到Google搜尋中第一項出來的是Make.com這個網站。才又知道原來已經有這種No-Code/Low-Code的自動化工具網站可供使用。
說真的Make.com這個網站的介面真的蠻人性化，且各種模組的功能也都很齊全。當時就立即試用Make.com再搭配Notion API，一開始也沒有什麼特別的資料需要去收集及處理的，當下想說一直有習慣在收聽BBC 6 Minuts的Podcast，而原本有獨立的APP可用來收聽，但後來這個APP就沒再維護了，所以要收聽的話要不就是要到官網中自行找到要的集數，要不就是要透過Podcast平台(例如Apple Podcast等)來收聽。可是收聽的過程，又想要看逐字稿。綜合這些需求及使用上，就想說那不如就利用Make.com再配合Notion API定期地將這些資料收錄到Notion Database中。
剛開始使用Make.com時，因為使用的是免費版本，每個月只有1000點的執行點數，而每個template中的每個模組執行一次的話就算一點。在開發的過程中因為要一直修改及除錯，1000點還真的不太夠。當時開發到一半時點數就用完了，後來想說要再等下個月，但人就是這樣，一旦中斷後，下個月要再回來接續開發就有點懶了。於是這個專案就這樣中止了。
巧遇n8n
又是在Youtube中不經意的瀏覽下，突然又得知有n8n這個工具可以搭配AI API(例如ChatGPT API或Gemini API等)來實作AI Agent的功能，於是又開始進行了解及學習。n8n有分訂閱版及免費版兩種，免費版可以自行取得n8n的程式自行來架設伺服器，而且還可以用docker的模式來架設，真的是太佛心了。因為這樣就不限制使用點數，要開發自動化資料收集的功能就比較方便了。
於是就開始使用docker的模式，自行架設了一組n8n伺服器，並開始學習使用n8n的過程。
開發workflow
有了n8n伺服器後，就開始又回來進行先前要由BBC 6 Minutes 網站中收集Podcast資料的專案。經過將專案拆解後，大致上有以下幾個大步驟需要完成才能達到我想要的功能：
- 取得podcast清單
- 逐一解析每集podcast網頁資訊
- 將每集的mp3 / 逐字稿等URL資料記錄到Notion Database
取得podcast清單
首先要找到主網頁的網址，這個部份Google一下就可以得到以下的網址：
https://www.bbc.co.uk/learningenglish/english/features/6-minute-english_2025
於是第一個node就是用n8n中的HTTP Request來取得資料，這個算是比較簡單的部份。接著就是比較有點難度的了，因為取回來的資料就是一份HTML的文字檔，要先了解這份HTML的內容，才能了解你所需要擷取的是哪一部份。一開始你可以先透過瀏覽器的檢視原始碼功能來查看HTML內容，並開始找到你要的資料，以及這個資料是包含在哪一個CSS selector中。沒錯，因為接下來就是要使用n8n的HTML這個node中的Extract HTML Content的功能來分析資料，而擷取資料時主要就是要去找到它對應的CSS selector。
如果你要找的資料有明確的class id的話，那就還比較簡單。直接填入這個CSS selector就好。但我有遇到以下的狀況是比較難處理的：
CSS selector的class id裏面有空格
一開始我不了解為何會有空格，而這個空格在CSS selector欄位中代表的是下一層的資料。於是我參考AI的說明，原來只要將空格置換成”.”就好了。例如：
<div class="Alevel Blevel"> </div>這時在CSS selector中就寫 div.Alevel.Blevel。
資料是CSS selector的下一個(不在同一層)
這時可以使用 + 的方式。
<div class="title">Title</div>
<a href="https://example.com">Link 1</a>
<a href="https://example.org">Link 2</a>要找的是a的話，就可以寫成：div.title + a
逐一解析每集podcast網頁資訊
一開始取得的資料會是一個陣列，可能裏面有多筆資料。這些資料如不特別處理的話，那下一個node會將它當作 「一筆」資料來處理。如需要將它一筆筆的進行處理的話，就需要使用到「Split out」的node。很特別的是，以程式的概念一開始會以為要用「loop」的功能，結果參考其它人的用法，才知道原來是要用Split out。
在解析網頁時，有時無法用CSS Selector取得立即可用的資訊，需要退而求其次來取得其它類似的資訊再來加以加工。例如我想要取得每集podcast的標題，但都找不到合適的CSS selector，最後只能直接用<title>裏的資料，但這個資訊取得的標題前面有都含有一串不需要的字串，例如：
BBC 6 minutes / my podcast title
這時就需要使用可處理字串的node，我目前找到的方式是使用「Edit field」這個node，在這裏面將要處理的字串使用Express的方式加入一段javascript程式碼在加以處理。
將每集的mp3 / 逐字稿等URL資料記錄到Notion Database
取得所需的資訊後，最後就是要將它儲存到Notion Database裏。在n8n中有「Notion」這個node可以用來新增一筆資料。新增的方式還蠻直覺化的，設定一下應該就沒問題。但還有個問題是，如果我這個workflow是每週定期執行的話，可能有些資料是以經新增過的。這個部份最直覺的方式就是在要新增前先查詢一下資料庫中是否已有該筆資料。但可惜的是，n8n的「Notion」node 裏雖然有個叫做「Get Database Page」的功能，但它要指定一個ID。另外也有一個叫「Search a page」的功能，但查詢時只能給一個字串去查詢，我使用起來查到很多筆資料，根本就無法精準地查詢。
查找了n8n中相關的Notion使用方式，一直都沒辦法達到我想要的結果。最後沒辦法，想到Notion API原本就支援Web request的方式來使用，而各家都只是用個底層功能再包裝成好用的介面給使用者使用而已。那為何我不直接就用最底層的功能來實作我要的目的呢。
所以只好改用HTTP Request的方式來進行Notion Database中資料的查找，至於如何用Notion API的原生功能來操作Notion，就請大家參考Notion官網的說明了。
結語
基本上使用n8n是可以完成你要的自動化功能，不過有很多地方真的是實際去操作及研究後，才知道原來還有這樣的用法。以上就先分享我在實作解析網頁取得podcast資訊時所遇到的一些比較卡關的部份，希望對大家有所幫助。