[Tool Note] — 關於爬蟲

發表於 更新於 分類於 ， ， 文章字數： 4.1k 所需閱讀時間 ≈ 4 分鐘

Introduction & 前言

講到爬蟲可能大多數人都會想到 Python，但今天我們不談 Python。前陣子因為朋友在玩爬蟲，利用 PHP 寫了幾隻爬蟲爬二手商品資訊，雖然菜雞我接觸前端不久，但常常在想前端是不是也能做到什麼類型的事情。這時候就問了問朋友 JavaScript 能不能爬呢？得到的答案是可以的，其實各有優缺點，主要看你寫什麼起來順手。這邊有一篇知乎對爬蟲的比較有興趣可以看看，傳送門。

9/22後更：關於我的神人朋友 — Chatbot Taichung＃2工作坊 沒有要在這教你什麼 ( 其實教了你一大堆 ， 有興趣可以看看他的玩具

這篇文章主要會寫如何用爬蟲爬外幣資訊並且在條件符合下寄信通知你，另外文章最後附上 GitHub。

網路爬蟲（英語：web crawler），也叫網路蜘蛛（spider），是一種用來自動瀏覽全球資訊網的網路機器人。其目的一般為編纂網路索引 — 取自維基百科

快給我釣竿

記得之前要學前端框架的時候選擇 Vue.js 一來是因為比較好上手，二來因為以後如果要一窺後端世界可以透過 node.js 去學習，剛好這次能透過 node.js 去爬需要的資訊，就索性學起來啦。

這次也是筆記形式，所寫之文章皆是作為筆記之用，如果有哪邊寫錯了還請各路高手不吝嗇指教。

事前準備

這邊我們爬蟲最基本需要用到的 node.js 需要至少 4.x 版本以上，不過現在官方網站都能下載到最新的，所以還沒安裝到官方網站下載就可以囉，傳送門。

安裝完成

安裝的時候會一併安裝 npm，不曉得這是什麼可以點我看我的文章介紹，[Tool Notes] — 關於Webpack。

[關於 node_modules](https://medium.com/@zehung860486/tool-notes-%E9%97%9C%E6%96%BCwebpack-3c066dba93a2)

除了釣竿還需要魚餌

打完我們的地基之後就須魚餌啦，就是我們的套件們，你會需要用到以下的套件。

  1. request 獲取整個網頁的 HTML

  2. cheerio 後端的 jQuery

  3. nodemailer 用來寄信

前兩項的介紹如果不了解看看下面這張圖吧。

匯率的數字不是真的

安裝方式也很簡單，打開你的 終端機(terminal) 照著下面的指令打吧。

1
2
3
$ npm install request
$ npm install cheerio
$ npm install nodemailer

怎麼綁上我的魚餌？

首先建立一支 index.js 檔，然後在前面引入我們需要用到的套件。

1
2
3
4
5
6
var request = require("request");
var cheerio = require("cheerio");
var nodemailer = require('nodemailer');

// 這個不需要安裝直接引用即可，用來把資料寫入 JSON檔案
const fs = require("fs");

之後基本的起手式大致如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var JPN_Crawler = function() {
  request({
    // 爬蟲要爬的網站
    url: "http://rate.bot.com.tw/Pages/Static/UIP003.zh-TW.htm",
    method: "GET"
  }, function(error, response, body) {
    if (error || !body) {
      // 如果沒爬到就不做事
      return;
      } else {
      // 寫你要做的事情
    }
  }
}

之後再 else 裡面寫上你要做的事情，寫法就跟一般我們寫 JavaScript 一樣。

那我怎麼抓 DOM 呢？

你可能會有這樣的疑問，所以我們裝了 Cheerio 這個套件。使用方法也很簡單，相下面那樣去抓到 body 後再去你需要的區塊爬你需要的資訊。這邊以台銀的匯率網站作為介紹。

1
2
const $ = cheerio.load(body); // 抓到 body
const tr = $("tbody tr");     // 爬每一行的 tr

抓取每一行的 tr

你可以只爬特定的一行，或是每一行都爬，爬到你需要的條件就記下來。因為之後還想要爬其他幣別，所以我就每一行都爬。

因為後面我們會把結果寫進 JSON 裡，這邊我們需要宣告一個陣列。

1
const result = []; // 建立一個儲存結果的容器*

抓取你想要的資訊

找到你要的內容，然後輸入 node index.js，然後就盡情地爬吧。

所以我要一直守在電腦前？

還記得前面我們裝了 nodemailer 嗎？這個就是用來寄信提醒你的，使用方式也很簡單，用一組自己的信箱去寄信，但是切記要先到 Google 修改安全性，這很重要，不然會報錯呦！

進入你的 Google 帳戶設定

進入「登入和安全性」，勾選「允許安全性較低的應用程式」 設定處於啟用狀態，這一步驟一定要做，不然屆時就會回報錯誤。

選擇左側的安全性

打開這道鎖

都打開了之後這個套件的起手勢也很簡單，按照下面的方式打在你的 index.js 上吧。記得 user 和 pass 要改成自己的信箱帳號密碼。

如果有安全疑慮的話建議申辦一組平常沒在用的信箱，只會用來寄信而已。

1
2
3
4
5
6
7
8
//初始化寄信
var transporter = nodemailer.createTransport({
  service: 'gmail',
  auth: {
    user: 'user@oggole.com', // mail Address
    pass: 'password'         // 密碼
  }
});

這樣就算初始化完成，那如何寄信也很簡單，你可以設定條件或者不設定都可以，這邊設定如果日幣現金或即期賣出匯率低於 0.3 ( 當下台銀為 0.29)就寄出一封信作為測試。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 如果匯率小於我們設定的就寄信 ( 變數記得自己設定 )
if (JPY_cashSellExchange < 0.29 || JPY_sightSellExchange < 0.29) {
  var mailOptions = {
    from: '"你的爬蟲小弟" <user@google.com>', // 寄件者
    to: 'who@gmail.com',                    // 收件者
    subject: '該買日幣啦',                    // 標題
    html: '<body><h4>日幣匯率：</h4><span>現在時間 -> </span><span>' + todayDate + ' | ' + time + '</span><br/><span>日幣現金匯率為 -> </span><span style="color:yellow;">' + JPY_cashSellExchange + '</b></span><br/><span>日幣現金匯率為 -> </span><span style="color:yellow;">' + JPY_cashSellExchange + '</b></span><br/><h5 href="https://rate.bot.com.tw/xrt?Lang=zh-TW">以上取自台灣銀行 <span style="font-size: 20px;">' + bankDate + '</span> 牌告匯率</h5></body>' // 帶有 HTML 格式的內容
  };
  transporter.sendMail(mailOptions, function(error, info) {
    if (error) {
    return console.log(error);
    } else {
      console.log('Message sent: ' + info.response); // 寄信成功後印出訊息
    }
  });
}

html 的部分是可以帶有 HTML 格式的內容，目前還沒研究怎麼打會比較方便，雖然只是要用來提醒，但是這樣子輸入就是有點麻煩，日後再補上其他方法。

完成啦

所以還是要守在電腦前輸入指令嗎？

前面雖然提到了條件符合可以直接寄信，但是我們還是沒讓他做到自動爬蟲的重點，其實你已經完成了大部分了，很簡單接下來只要讓他 setInterval 就完成。

1
2
// 兩十分鐘爬一次
setInterval( 你的function名稱 , 12000 * 10);

切記如果時間設得太短記得增加條件去判斷是否記過信了，不然信箱可是會被塞爆呢 ( 笑！

等等說好的 JSON 呢？

記得前面我們說的 fs 嗎？其實只需要使用這個就可以寫入 JSON了！

1
2
3
4
5
// 這個不需要安裝直接引用即可，用來把資料寫入JSON檔案
const fs = require("fs");

// 寫入 result.json 檔案
fs.writeFileSync("result.json", JSON.stringify(result));

按照這種方式就會自動創建一個 JSON 檔案了，很方便吧！

Conclusion & 結論

這次爬蟲小筆記真的只能算超級超級小菜一碟，對於爬蟲世界還有好多要學，但是學程式就是這樣，找到你有興趣的東西研究下去就對了，就跟健身一樣，重點不在於重量，在堅持！

爬蟲還有好多地方要學習，像是怎麼繞過 18禁 ( 誤，需要登入帳號密碼…等，日後再補齊筆記上來。

另外關於這次的爬蟲有上傳 GitHub 如果不嫌棄的大大可以下載來玩玩，傳送門。

參考網站