用 Swift 取得網頁資料

有時候需要取得一些網站上的資料，
但網站偏偏又沒有開 API 出來讓你使用，這個時候該怎麼辦呢？
今天想跟大家分享一下簡單的獲取網頁上資訊的方式，
內容可能包含一點點 code ，主要是讓大家有個基本的觀念。

今天我們以取得銀行網站上的『匯率』來當作題材，
大家可以先點開台灣銀行牌告匯率的網址：
http://rate.bot.com.tw/xrt?Lang=zh-TW，
沒有意外的話應該會長得跟下圖一樣。

我們以下將用比較多人使用的 Google Chrome 當作為瀏覽器來示範，
Safari 上也會有相對應得功能，跟我一樣使用 Safari 的人可以再研究一下！

先依照下圖路徑打開 Chrome 的開發人員工具，

接著用 Inspector 去點選你要取得的貨幣匯率

點選之後會在右邊的 Element 中顯示剛剛點選的匯率的位置，
按右鍵並依照下圖中路徑選取 Copy Xpath 。

我們先停在這邊，在 Xcode 中打開一個新的專案，並安裝 Alamofire 與 『Kanna』（https://github.com/tid-kijyun/Kanna）。

Alamofire 應該不需要多作介紹，Kanna 是一個好用的 HTML 解析工具。
安裝方式請參照 Kanna 的 github。

我們在專案中加入以下 code :

以上內容相當單純，以 Alamofire 呼叫台灣銀行取得 HTML 資料之後，
提供你剛剛複製下來的 Xpath 給 Kanna 進行解析。
一切進行順利的話，現在就可以在 console 印出不同的匯率囉！
是不是很簡單呢？

BUT!

最重要的就是這個 BUT!
如果你嘗試用一樣的方式想要拿其他銀行網站的匯率資料，
有很大的機率是你會取不到你想要的資料。

原因大致上有兩個，

第一是我們透過 Chrome 的 Inspector 找到的 Xpath 是『絕對路徑』，
而這絕對路徑通常在複雜的網頁設計裡面沒辦法讓你直接找到資料。

第二是很多網頁的內容都是動態載入，往往你要的資料是在進行操作之後網站才去跟其他的 API 拿回來的，這個時候處理起來就相對複雜一點。

這一次，我們先用這個網站進行測試 : https://www.superrichthailand.com/#!/en/exchange
如果你對這個網址進行跟上面一樣的操作，是沒辦法拿到想要的資料的。

我們一樣開打開開發人員工具，但這次要選擇 NetWork 裡面的 XHR ，並 cmd + R 重新載入一次。會發現下面這個畫面：

這些就是你在載入這個頁面時，網站呼叫的其他 API，裡面有我們可以用的訊息。
點選 rates 之後會發現這個網站去呼叫了一隻 API ，而且回傳的是 JSON 格式的檔案，這個連 Kanna 都不需要，可以直接進行解析。
（也可以用 SwiftyJSON 或是 ObjectMapper 更方便）

基本上呼叫這隻 API 所需要的資訊都在這邊，可以依照正常的方式進行呼叫，如下：

就可以取得網頁中所有的匯率資料囉！

最後再提醒一些要注意的小細節：
1. Xpath 的語法可以去稍微研究一下，如

//div[@class=”row_rate”]

就是在這個 div 裡面所有 class 是 row_rate 的全部節點。
用 copy 出來的絕對路徑拿不到資料的話，就自己試著找一下吧

2. 注意 XHR 裡面用了哪些參數去呼叫 API ，小心不要用錯參數，順便可以檢視一下自己 HTML 的觀念。

以上，跟大家分享的是非常基礎的獲取網頁資料的方式，要抓一些少量圖片也可以透過以上的方法。
若大家有更進階、更好用的做法也可以提出分享～

iOS class #3 Ian