專案簡介 - 匯率爬蟲小工具(上)

這是 AC 結業後第一個 MVP 自主專案。專案介紹分為上下兩篇文章。本篇文章敘述技術與專案建置過程,下篇文章會著重在心得與反思。

專案發想

初始目標為做出一個「自己也會使用」的工具。

在 ALPHA Camp 網頁開發的學習之旅後,選擇「網頁爬蟲」這個主題,給自己一個機會,憑著在 AC 學習期間培養的「感覺」、網頁 / API 基礎認知、找尋資訊及閱讀技術文件的能力、以及除錯的能力,選擇沒使用過的工具,做出網頁開發外的延伸應用,拓展認知視野。

GitHub連結


使用技術

利用爬蟲工具 selenium-webdriver,取得銀行網頁上所需要的匯率資訊,透過 Google Sheet API,將資訊自動存入 Google Sheet 中,加上自動化排程、背景執行、以及 Line Notify 通知資訊與結果。

主要語言為Javascript。


參考文件

這個爬蟲專案的建置概念、選用工具,參考第12屆iThome鐵人賽-行銷廣告、電商小編的武器,FB & IG爬蟲專案從零開始系列文章,以及該系列文章之出版書籍

在 selenium-webdriver 設定、google sheet API 文件查詢、以及 cron 排程的部分,透過文章適度引導我探索各個所需要的工具。但畢竟是兩年多以前的文章,在 google Auth 與 sheet API 寫法都有更新,有時也是「盡信書不如無書」。

專案建置過程

1. 取得匯率資訊

在專案環境設定建置完成之後,第一步是用 Selenium-webdriver 取得想要的資訊,在 console 中印出。由於我選擇的資料來源為銀行匯率網站,非常單純,不需登入或查詢之類的動作,所見即所得。這邊要下載與自己瀏覽器同版本的 driver 執行,以及網頁中所需資料對應的元件的 XPath(開發者工具中查看原始碼可得)

剛好遇到升息,美金好貴啊

首次成功印出爬到的資訊!(剛好遇到升息,美金比歐元貴了)

2. 第一次重構

一開始很自然的把 function 寫在主程式 app.js 中,所以寫完第一個 function 後,我馬上想到之前在 AC 學的「關注點分離 (separation of concerns, SOC) 」,將取得匯率資訊 function 放在 controller 中。另外也將三種幣別的名稱與 XPath 獨立放在 json 檔中,方便往後擴充。

3. Google Sheets Credential

首先依照 Google Sheets API Quick Start 內容,一步步設定來操作即可。由於在 AC 作業中,有實作 Google OAuth 作為第三方認證登入功能的經驗,所以憑證設定與 client ID 取得步驟都相同且順利完成,官方文件提供的 code 可以讓你立即驗證操作是否正常。真不愧是 Google(讚嘆)!

4. 與 Google Sheets API 文件的對話

Google Sheets API 文件,對於各項操作功能不僅有各種語言的範例,還有貼心的 “Try this method” 幫助確認這個 method 是否符合需求、以及 method 所需參數設定是否正確,其中 spreadsheetID 就是自己的 Google sheet ID,可以馬上知道這個 method 執行結果,真的非常好用!如果在網站上 try 是正常的,但專案程式跑了出錯,就可以先排除是方法內的參數設定錯誤(除非自己寫錯)。再次讚嘆 Google!

Google Sheets API 功能相當的多,文件很多,要仔細閱讀方法的描述,確認找到自己所需的功能。一開始有種迷失感,但後來熟悉之後,順利地找到並實現我想要達成的功能(標題列凍結窗格、將最新爬蟲資訊插入標題的下一列,讓資訊由上至下更新等等)。

Image

Try this method 幫助測試 method

成功自動將資訊填入google sheet中

成功自動將資訊填入 Google sheet中

5. 再次重構

在寫各種 Google Sheet methods 的時候,發現自己依照「專案運作步驟」,在同一個 controller 中寫了好幾個 function,沒有分類,而且有 function 要呼叫同檔案中另一個 function 的情況。經過思考,依照之前在 AC 學習的概念來重構程式碼,將「外部引用工具」歸類為 helper,例如:Google 登入認證、以及 Google Sheet 的各種 method(新增一列、新增 tab、設定欄位格式等等);而關於「專案需求邏輯」則歸類為 controllers,像是檢查指定 tab 是否存在、是否需要新增 tab、爬到的資料放入 sheet 中對應的欄位、以及傳送 Line 通知的功能。

6. 排程、通知、專案收尾

在通過 Google Sheets API 的考驗後,排程工具以及 Line Notify 的設定簡單多了。有趣的是當我第一次看到 Cron 排程語法,想說這是什麼密碼啊?幸好參考資料中提供了一個非常棒的網站幫我把他翻譯為人類語言。
Image

翻譯 cron

最後成果呈現

Image

爬蟲時間之匯率網站(截圖漏了歐元 orz)

Image

設定的時間一到自動運行

Image

爬到的資訊自動插入 Google sheet 第二列,使最新的資訊在最上方

Image

Line Notify 自動通知結果

文落於此已有點長,關於專案建置過程的心得與反思放在下篇文章