Site Overlay

透過Notion API視覺化工作紀錄



5月中Notion的release note提到Notion API將以beta版本上線,一直到一個月後才想到要來試試看。Notion API顧名思義就是可以透過外部工具,取得紀錄在Notion的內容、或是在其他地方把資料寫入Notion,可以預期之後可能會有更多應用因應出現。

我自己有一部分的工作紀錄是在Notion上處理的,包含當週的待辦事項、短期的目標管理、閱讀紀錄等,把工作紀錄視覺化,可以更快檢視自己過去把時間花在哪裡、做了哪些事,不過目前因為紀錄的粒度不夠細,把資料呈現出來其實幫助有限,這次純粹只是想嘗試新東西而已。


要把Notion裡的資料(半)自動化視覺化呈現,不只一種方法,如果不想開發程式,用幾個常用的小工具就可以完成,這次主要用到 NotionGoogle SheetsGoogle Data Studio這三個工具(Google Sheet算夠常用了吧),完成這件事情不需要寫任何程式碼,只要稍微能夠閱讀Notion釋出的API文件即可,大概會分成三個步驟。

這次挑選我在Notion中的閱讀紀錄來實作,主要是我在網路上面透過Notion Web Clipper存下來的文章,閱讀完之後會統一丟到一個叫Reference Box(用途可參考這篇文章)的database裡面,欄位很簡單,只有閱讀時間(丟進database時自動建立)、文章標題、類型及tag四個,接下來就是實作過程。

建立Integration與授權

要使用Notion API,需要先到My Integration頁面登入,建立一組授權專案,我取名為Reading List當作範例。

到my integration頁面點擊New integration

輸入完專案名稱、選擇Logo(可略過)及workspace(就是你之後要串接資料的那組)後,需要選擇是內部使用或需要對外公開,若選擇對外,Notion會要求填寫外部網站資訊及隱私權政策。這邊我們只有要讓自己串接資料,選擇內部使用即可。

提交後會得到一組很長的金鑰(Internal Integration Token),這個金鑰可以複製到剪貼簿,之後會用到。

建立好Integration後,打開Notion,到要串接資料的database頁面中(這邊畫面為Desktop App),點開右上角的【Share】,再點Add people, emails, groups, or integrations 一欄。

此時就會看到剛剛建立的integration,選擇後點選【Invite】,就成功把這個database的權限分享給integration專案了。這代表透過剛剛專案中的金鑰,就能夠通過認證取得/修改這個database裡的內容(所以金鑰要保護好)。

此時我們還會需要取得一個資訊: 這個database的ID。Database ID可以在網址列中取得,如果是使用desktop app,則需要從Share的入口,點擊Copy link貼到瀏覽器。database_id是網址列中從workspace名稱斜線後面、到問號前面的這個字串(如下圖)。


透過API取得Notion中的資料

Notion這次釋出的API文件,大致包含以下功能

  • Database: 取得database說明、查詢database中的pages
  • Page: 取得page內容、創建新的page、修改page中的屬性(properties)
  • Block: 取得單頁中的blocks內容、在page中加入block
  • Search: 檢索授權範圍中的所有內容

我實作的資料是我過去閱讀的文章,都以page的形式放在database中,想像最後的成品是看到我過去一段時間內閱讀的文章數、以及文章的類型、來源分布,所以我需要”查詢database中的page(Query a database)“這個功能。

鎖定要使用的API後,就可以準備把資料接進來了。我們要用Google Sheet放置從Notion API串進來的資料,再到視覺化工具Google Data Studio中呈現。

因為要透過API把資料接進來,我們需要可以處理API的外掛程式。在Google Sheet建立新的工作區後,選擇【外掛程式】>【取得外掛程式】,會展開Google Workspace Marketplace。我所使用的是免費的外掛API Connector,選擇後安裝即可。

安裝之後,在【外掛程式】中就會出現API Connector,選擇【Open】,會在右側出現側選單,此時我們需要先創建一個新的Request【ADD NEW】

創建一個新的Request後,可以看到裡面有一些欄位必須填寫,我們主要需確認Method、API URL path、Headers這三個欄位。

此時我們要回到Notion API文件,在剛剛的Query a database文件中,可以先看到這隻API的呼叫方法(Method)為POST、API URL為”https://api.notion.com/v1/databases/database_id/query”

(其中URL中的database_id要置換為我們自己的database ID)

接下來是Headers,從API文件中右邊的範例程式碼中,可以看到需要包含的Key有三個:

Authorization : Bearer  $NOTION_API_KEY (此處的Key就是前面創建Integration得到的金鑰)
Notion-Version : 2021-05-13 
Content-Type : application/json 

該有的資訊都拿到了,就可以回到Google Sheet API Connector,把資料一一填上。因為我要取得該database中的所有pages,所以這邊就不額外填寫POST body(主要用來敘述篩選、排序的條件,需要寫一點json語法)。

填寫完滾到下方,可以在OUTPUT SETTINGS中設定這次資料串接要放在哪個sheet,並且可以將這次辛苦完成的request資料存檔,之後就不用重新輸入。完成後按下Run就開始執行了。

執行完成後,Notion中的資料就會串進Google Sheet了,透過Notion API接進來的資料密密麻麻,你如果在database設置越多properties,欄位就會更多。

此時從API取得資料的步驟也完成了。未來如果要更新這個Sheet,可以到【外掛程式】>【API Connector】>【Refresh All Now】,就會重新執行並複寫當前的Sheet(前提是要先儲存request),不想手動更新的話,也可以使用API Connect的付費Schedule功能。

視覺化呈現

要把資料視覺化呈現,其實也可以直接在Google Sheet新增圖表,之所以使用Google Data Studio這個免費工具,是因為它可以有獨立的圖表工作區,與原始資料保持連結,不需要常常去維護兩者間的關係,成果也可以直接匯出成為線上連結分享。如果是要專注在視覺化圖表、長期追蹤的專案,GDS是不錯的選擇。

這篇的重點是在Notion API的使用,GDS的操作不會詳述太多細節,如果對GDS還不是很熟悉,文末我會放幾個介紹文章連結。

進入GDS的首頁後(需先註冊Google信箱),點選建立報表。

此時我們要從剛剛完成的Google Sheet取得資料,使用試算表串接,並選擇剛剛完成的檔案。

新增成功之後,我們可以看到預設出現在圖紙上的資料表,標示最基本的指標資料筆數(Record Count),可以看到這份檔案有89筆資料。

此時我們已經完成這次的目標的,透過Notion API把Notion中的資料串接到Google Data Studio中呈現,我們可以在右邊的圖表>表格中,點開換成我們想要的圖表樣式,例如用折線圖顯示過去我閱讀文章數量的趨勢(發現很長一段時間根本沒在新增)、閱讀文章種類的分布以及來源。


這次為了嘗試看看只挑選比較簡單的功能,沒有碰到篩選、排序、搜尋關鍵字、block等功能,時作用的Database的屬性也沒有很多,如果平常有用Notion的database紀錄工作、生活的大小事,確實是可以透過Notion API玩出更多應用,若有看到甚麼有趣的應用也歡迎告訴我。


寫在文末:

  1. Notion合作的第三方整合服務Automate.ioZapier,也可以實踐把Notion資料整合進Google Sheet中,但我不知道操作起來有沒有比較簡單或彈性。
  2. 如果對Google Data Studio比較不熟悉,可以參考awoo的介紹。GDS會需要一點時間上手,不過我認為只要搞清楚指標與維度的差異,就不會有太大問題,關於這兩者的差異,推薦LeeMeng的介紹
  3. 目前的流程是先透過Google Sheet處理Notion API的連線,再串接進GDS,應該是要有方法省略其中一個步驟,直接把Notion資料串進GDS,不過我目前沒有找到合適的外掛工具直接在GDS中處理API。

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。