FB & IG 爬蟲專案從零開始｜林鼎淵 Dean Lin

【Day30】時間只是考驗，心中信念絲毫未減

林鼎淵 — Thu, 15 Oct 2020 08:43:22 +0800

當你停止拿著別人的地圖走在自己的人生道路上，那你的人生才算真正的開始。-Peter Su

因為在過去的鐵人賽中很少看到從專案角度來分享技術的文章，所以我選擇從這個角度出發，因為我認為了解專案中每個技術選擇的動機，與學習一個新的技術一樣重要；技術可能被淘汰，但經驗會留下來，希望大家會喜歡我這個系列的文章。

專案總結

1. 鐵人賽的收穫

1.1 了解技術文章與技術文件的差異

1.2 深刻體會以前寫的程式有多爛

1.3 突破過去程式的盲點

2. 在鐵人賽過程中遇到的挑戰

2.1 在週末跟連假期發文

2.2 發現有專案有 bug，而且這個 bug 在好幾天前的文章就有了

2.3 瀏覽人數太低，沒人在你的文章留言跟按 LIKE

3. 完整專案程式碼 & 基礎設定說明

1. 鐵人賽的收穫

1.1 了解技術文章與技術文件的差異

在開賽前兩週我將完成的 26 天備稿放在 github 上請朋友幫忙給意見，除了技術上的漏洞外，下面這些回饋讓我一度思考到底要不要參加這個比賽：

你分享的技術很有趣，但我有點消化不良
我現在還在上班嗎？你這根本是技術文件吧？
排版好亂，閱讀起來有障礙
你這個是草稿沒錯吧？

感謝身旁願意說真話的朋友們，是你們讓我意識到：過去自己寫的是技術文件，能讓合作夥伴看懂就好了；但是分享到一個平台上你除了要讓人看懂外，你還要讓人看得下去，與朋友深聊之後對文章做了以下改進：

加入個人經驗分享讓文章多一點人味
在實作的段落加上一些與讀者的對話
多看別人的文章吸收經驗，調整排版讓閱讀變得舒適

關於這方面的技巧大家可以參考技術寫作六步驟讓工程師撰寫流暢的技術部落格

1.2 深刻體會以前寫的程式有多爛

原本以為這次鐵人賽會非常輕鬆，因為我是把以前寫的專案拿出來分享；但開始寫文章後就發現自己錯的很離譜，因為寫文章需要反覆思考每一行程式的意義，這時會發現下面的問題隨處可見：

變數都在亂宣告
程式中有許多不必要的判斷式
超冗長與意義不明的函式
註解亂七八糟，導致現在的自己看不懂以前為什麼這樣寫

針對這些問題，我有統整成一篇 Day3 努力寫出更好的程式碼，有時你不是一個人在戰鬥給大家參考

因為是以專案的架構來寫這系列鐵人文章，所以我需要在每天都進行各種測試，並且深入的了解官方文件，在這個過程中我深深感受到以前專案的缺點：

程式穩定性不夠，遇到錯誤時容易崩潰
對官方文件理解不足，導致執行程式時多了很多不必要的步驟

錯誤處理的部分可以參考 Day14 爬蟲執行時又又又崩潰了嗎？來點 try-catch 吧這篇喔

1.3 突破過去程式的盲點

過去的我認為學習新技術、多寫一些專案可以讓自己的程式進步，但經過這 30 天的鐵人賽磨練後我發現精煉自己的程式可以學到更多東西：

當你每天都在看一樣的程式時你才會去思考要如何讓它變得更好，而你這些思考與嘗試的過程會讓你日後撰寫程式時多一點 sense
因為不停的思考與嘗試，你可能會發現有些工具打從一開始就選錯了；像是 Node.js 發出 request 這個功能我原本是用 xmlhttprequest 來完成，但撰寫文章時才驚覺當時選了一個古老的套件，只為了快速完成功能容易造成決策上的錯誤

2. 在鐵人賽過程中遇到的挑戰

2.1 在週末跟連假期發文

當身旁所有人都在吃喝玩樂的時候把專注力放在撰寫文章上真的很違反人性，在這種內心鬥爭的階段我會選擇聽一些勵志的歌曲來提神：

每次聽到 “我不怕千萬人阻擋，只怕自己投降” 這段，我寫文的速度跟意志力就爆發惹！

2.2 發現有專案有 bug，而且這個 bug 在好幾天前的文章就有了

說出來不知道該是驕傲還是怕被人笑，我每篇文章撰寫時間大約落在 4 ~ 20 小時，之所以會花這麼長的時間是為了處理之前的歷史業障，我是一個有點偏執狂的人，所以發現 bug 後會把每天的文章跟 sample code 全部看一遍重新校訂，並且全部測試一遍確保都能正常運行

專案的架構使得每篇文章關聯性太大，遇到這種 bug 時真的萬分想讓人棄賽…

截至今天完賽，我的 github 已經有 400 多次的 commit，這系列的文章真的是我心血之作

2.3 瀏覽人數太低，沒人在你的文章留言跟按 LIKE

我認為這是心理層面的挑戰，當你用盡全力寫文章而無人關注時你會開始自我懷疑：懷疑是不是自己寫的不好、思考難道自己選錯題目了嗎？

我想這種負面想法應該在不少參賽者心中出現過，玻璃心的我也曾經自我懷疑了好一段時間，但最後我選擇把自我懷疑的情緒轉化成改善文章的動力，如果文章夠好一定會有人來看並樂於分享，如果沒人關注那一定是有什麼不足的地方

花若盛開蝴蝶自來，人若精彩天自安排

3. 完整專案程式碼 & 基礎設定說明

在文章的最後放上這次專案的完整程式碼，你只要下載這個壓縮檔並依照下方的提示完成設定就能體驗爬蟲的樂趣嚕

在終端機下指令 yarn 安裝套件
windows 需下載與你 chrome 版本相同的 chrome driver 放在專案根目錄
要在 tools/google_sheets 資料夾放上 Google sheets 的憑證，申請流程請參考 Day17
調整 fanspages 資料夾內目標爬蟲的粉專網址
調整 .env檔
- 填上 FB 登入資訊
- 填上 FB 版本(classic/new)
- 填上 IG 登入資訊
- 填上 SPREADSHEET_ID
- 填上爬蟲執行時間(CRONJOB_TIME)
- 填上 LINE Notify 申請的權杖(LINE_TOKEN)，申請流程請參考 Day27
在終端機下指令 yarn start 執行專案(windows為 yarn win_start)

如果完全無法執行可能是開發環境沒設定好，請參考 Day2 中筆者安裝的版本
如果執行過程中失敗請將 tools/initDrive.js 下面這行程式註解，直接看瀏覽器執行爬蟲的過程比較容易確認是哪個步驟出問題了
options.addArguments('--headless')
如果想幫專案加上排程請閱讀 Day24～Day26 的文章喔

致謝

首先要感謝的是願意讓我分享這份專案的老朋友：Ray，沒有他就不會有這 30 天的系列文章，更無法讓我重新審視自己程式的缺點

接著感謝願意看我那不堪入目的備稿並給予意見的工程師們：永遠給予支持的凱霖學長、讀書會的超強筆記男、愛用好想兔貼圖的前同事…，你們的建議讓我撰寫技術文章的能力上升了一個台階，至少現在讀起來不會反胃了吧XD

特別感謝在撰寫文章過程給我排版建議的朋友：部落格男，他是我心中真正的鐵人，已經堅持每天寫一篇部落格超過 400 天

其實我原本是打算一個人參賽的，但在報名後看到團體組列表中有北科大計算機，就向團長Peter學程式詢問我能不能+1，感謝團長的收留，自從大學畢業後就沒有這種組隊參賽的熱血了

最後感謝比賽期間陪伴在我身旁的可愛女友，擁有行銷專業的她給我許多下標題的建議

雖然鐵人賽在這裡告了一段落，但對我來說：技術分享的旅途才剛開始呢

在許多人的幫助下，本系列文章已出版成書，並添加了新的篇章與細節補充：

加入更多實務經驗，用完整的開發流程讓讀者了解專案每個階段要注意的事項

將爬蟲的步驟與技巧做更詳細的說明，讓讀者可以輕鬆入門

調整專案架構

優化爬蟲程式，以更廣的視角來擷取網頁資訊

增加資料驗證、錯誤通知等功能，讓爬蟲執行遇到問題時可以第一時間通知使用者

排程部分改用 node-schedule & pm2 的組合，讓讀者可以輕鬆管理專案程序並獲得更精確的 log 資訊

有興趣的朋友可以到天瓏書局選購，感謝大家的支持。

購書連結：https://www.tenlong.com.tw/products/9789864348008

【Day29】為爬蟲加上通知 - 成功收到 LINE 通知爬蟲摘要訊息，專案大功告成！

林鼎淵 — Wed, 14 Oct 2020 09:00:25 +0800

除了要有專業外，你更要有技術整合的能力

筆者有話先說

這份專案所用到的各種技術都不難，難的是將這些技術整合成一個能讓客戶買單的專案；當時在跟工程師朋友分享這個專案的技術組成時他們都覺得很是獵奇，沒想到爬蟲專案還能用如此低成本的方式完成，而且真的能幫客戶解決問題

今天這篇文章是實作的最後一篇，我們要將爬蟲執行時的資訊做成一份摘要，透過 LINE 發送給使用者

今日目標

分析爬蟲摘要訊息來源
調整爬蟲函式回傳的資料結構
調整主程式傳遞 lineNotify 所需的參數
在 lineNotify 函式中整合摘要訊息

1. 分析爬蟲摘要訊息來源

根據需求規格書，在摘要中需包含以下訊息：

爬蟲總費時：在主程式計算從爬蟲開始到更新完 Google sheet 的時間
總計掃描FB粉專、IG帳號數量：因為爬蟲函式 crawlerIG、crawlerFB 回傳的結果 result_array 是陣列的形式，所以數量的部分使用陣列的長度即可
Google Sheets 連結：依照 .env 環境檔中的 SPREADSHEET_ID 組成連結
無法爬蟲的FB粉專、IG帳號名稱：在爬蟲函式 crawlerIG、crawlerFB 中紀錄無法爬蟲的標題

2. 調整爬蟲函式回傳的資料結構

下面用 crawlerFB 來舉例，crawlerIG 可以自己嘗試修改看看喔～

使用 error_title_array 來紀錄無法爬蟲的標題
完成爬蟲後回傳 爬蟲結果（result_array)、無法爬蟲的粉專標題（error_title_array) 這兩個參數，讓後續 Google Sheet 更新、LINE Notify 傳送通知時使用

async function crawlerFB (driver) {
    const isLogin = await loginFacebook(driver)
    if (isLogin) {
        console.log(`FB開始爬蟲`)
        let result_array = [], error_title_array = []// 紀錄無法爬蟲的標題
        for (fanpage of fanpage_array) {
            let trace = null
            try {
                const isGoFansPage = await goFansPage(driver, fanpage.url)
                if (isGoFansPage) {
                    await driver.sleep((Math.floor(Math.random() * 4) + 3) * 1000)
                    trace = await getTrace(driver, By, until)
                }
                if (trace === null) {// 將無法爬蟲的標題放入陣列
                    error_title_array.push(fanpage.title)
                    console.log(`${fanpage.title}無法抓取追蹤人數`)
                } else {
                    console.log(`${fanpage.title}追蹤人數：${trace}`)
                }

            } catch (e) {
                console.error(e);
                continue;
            } finally {
                result_array.push({
                    url: fanpage.url,
                    title: fanpage.title,
                    trace: trace
                })
            }
        }
        // 回傳爬蟲結果、無法爬蟲的粉專標題
        return { "result_array": result_array, "error_title_array": error_title_array }
    }
}

3. 調整主程式傳遞 lineNotify 所需的參數

爬蟲總費時：使用 spend_time 函式把時間差轉換成時分秒的格式

因為朋友數百個品牌爬蟲總費時快兩小時，如果用秒數呈現實在太不人性化了
整合 lineNotify 所需的參數：爬蟲總費時（spend_time）、總計掃描FB粉專、IG帳號數量（result_array.length）、無法爬蟲的FB粉專、IG帳號名稱（error_title_array）

index.js

require('dotenv').config();
const { initDrive } = require("./tools/initDrive.js");
const { crawlerFB } = require("./tools/crawlerFB.js");
const { crawlerIG } = require("./tools/crawlerIG.js");
const { updateGoogleSheets } = require("./tools/google_sheets");
const { lineNotify } = require("./tools/lineNotify.js");
exports.crawler = crawler;

async function crawler () {
    const start_time = new Date(); // 取得開始時間
    const driver = await initDrive();
    if (!driver) {
        return
    }
    // 分別取出爬蟲結果、無法爬蟲的粉專標題
    const { "result_array": ig_result_array, "error_title_array": ig_error_title_array } = await crawlerIG(driver)
    const { "result_array": fb_result_array, "error_title_array": fb_error_title_array } = await crawlerFB(driver)
    driver.quit();

    await updateGoogleSheets(ig_result_array, fb_result_array)
    const end_time = new Date(); // 取得結束時間
    // 計算爬蟲作業總費時
    const spend_time = spendTime(start_time, end_time)

    // 執行完畢後用 lineNotify 回報爬蟲狀況
    lineNotify(spend_time, ig_result_array.length, fb_result_array.length, ig_error_title_array, fb_error_title_array)
}

function spendTime (start_time, end_time) {
    const milisecond = end_time.getTime() - start_time.getTime()  //時間差的毫秒數  
    //計算出相差天數  
    const days = Math.floor(milisecond / (24 * 3600 * 1000))
    //計算出小時數  
    const leave1 = milisecond % (24 * 3600 * 1000)// 計算天數後剩余的毫秒數  
    const hours = Math.floor(leave1 / (3600 * 1000))
    //計算相差分鐘數  
    const leave2 = leave1 % (3600 * 1000)// 計算小時數後剩余的毫秒數  
    const minutes = Math.floor(leave2 / (60 * 1000))
    //計算相差秒數  
    const leave3 = leave2 % (60 * 1000)// 計算分鐘數後剩余的毫秒數  
    const seconds = Math.round(leave3 / 1000)

    let time_msg = ""
    if (days !== 0)
        time_msg = time_msg + days + '天'
    if (hours !== 0)
        time_msg = time_msg + hours + '小時'
    if (minutes !== 0)
        time_msg = time_msg + minutes + '分'
    if (seconds !== 0)
        time_msg = time_msg + seconds + '秒'
    return time_msg
}

4. 在 `lineNotify` 中整合摘要訊息

使用 combineErrMsg 將無法爬蟲的FB粉專、IG帳號標題整合
將最終要傳送的訊息組合在 message 變數中

const axios = require('axios')
var FormData = require('form-data');
require('dotenv').config();
module.exports.lineNotify = lineNotify;
async function combineErrMsg (error_title_array, type) {
    let error_msg = ""
    for (const error_title of error_title_array) {
        error_msg = error_msg + '\n' + error_title
    }
    if (error_msg !== "") {
        error_msg = `\n\n下列${type}標題無法正常爬蟲:` + error_msg
    }
    return error_msg
}
async function lineNotify (time, ig_total_page, fb_total_page, ig_error_title_array, fb_error_title_array) {
    const token = process.env.LINE_TOKEN;
    // 無法爬蟲的FB粉專、IG帳號名稱整合
    const fb_error_msg = await combineErrMsg(fb_error_title_array, "FB")
    const ig_error_msg = await combineErrMsg(ig_error_title_array, "IG")
    let error_msg = fb_error_msg + ig_error_msg

    // 組合傳送訊息
    const message =
        `\n\n已完成今日爬蟲排程作業` +
        `\n共費時:${time}` +
        `\n總計掃描FB粉專: ${fb_total_page} 、IG帳號: ${ig_total_page}` +
        `\nGoogle Sheet: https://docs.google.com/spreadsheets/d/${process.env.SPREADSHEET_ID}` +
        error_msg;
    
    const form_data = new FormData();
    form_data.append("message", message);

    const headers = Object.assign({
        'Authorization': `Bearer ${token}`
    }, form_data.getHeaders());

    axios({
        method: 'post',
        url: 'https://notify-api.line.me/api/notify',
        data: form_data,
        headers: headers
    }).then(function (response) {
        // HTTP狀態碼 200 代表成功
        console.log("HTTP狀態碼:" + response.status);
        // 觀察回傳的資料是否與 POSTMAN 測試一致
        console.log(response.data);
    }).catch(function (error) {
        console.error("LINE通知發送失敗");
        if (error.response) { // 顯示錯誤原因            
            console.error("HTTP狀態碼:" + error.response.status);
            console.error(error.response.data);
        } else {
            console.error(error);
        }
    });
}

執行程式

為了確認我們爬蟲摘要能紀錄無法爬蟲的頁面，我在 ig.json、fb.json 裡面各新增了兩個無效的粉專網址
在專案資料夾的終端機(Terminal)執行指令
```
yarn start
```
程式執行完畢後確認 Google Sheets 的資料有正確寫入
收到 LINE 通知爬蟲摘要訊息就代表大功告成啦！！！

ℹ️ 專案原始碼

今天的完整程式碼可以在這裡找到喔
我昨天的把昨天的程式碼打包成壓縮檔，你可以在乾淨的環境完成專案的最後一步：發出LINE通知讓使用者知道這次爬蟲的情況
- 請記得在終端機下指令 yarn 才會把之前的套件安裝
- windows需下載與你chrome版本相同的chrome driver放在專案根目錄
- 要在tools/google_sheets資料夾放上自己的憑證，申請流程請參考Day17
- 調整fanspages資料夾內目標爬蟲的粉專網址
- 調整.env檔
  - 填上FB登入資訊
  - 填上FB版本(classic/new)
  - 填上IG登入資訊
  - 填上SPREADSHEET_ID
  - 填上爬蟲執行時間(CRONJOB_TIME)
  - 填上LINE Notify申請的權杖(LINE_TOKEN)，申請流程請參考Day27
- 在終端機下指令 npm install forever -g ，讓你在終端機的任何位置都能管控排程
- 在sh資料夾中設定執行排程的shell script

在許多人的幫助下，本系列文章已出版成書，並添加了新的篇章與細節補充：

加入更多實務經驗，用完整的開發流程讓讀者了解專案每個階段要注意的事項

將爬蟲的步驟與技巧做更詳細的說明，讓讀者可以輕鬆入門

調整專案架構

優化爬蟲程式，以更廣的視角來擷取網頁資訊

增加資料驗證、錯誤通知等功能，讓爬蟲執行遇到問題時可以第一時間通知使用者

排程部分改用 node-schedule & pm2 的組合，讓讀者可以輕鬆管理專案程序並獲得更精確的 log 資訊

有興趣的朋友可以到天瓏書局選購，感謝大家的支持。

購書連結：https://www.tenlong.com.tw/products/9789864348008

【Day28】為爬蟲加上通知 - 用 axios 發出 LINE 通知

林鼎淵 — Tue, 13 Oct 2020 08:53:06 +0800

成功要選人少的路走，套件要選人多的來用

如何選擇 Node.js 中發出 Request 的套件？

雖然眾多的套件都能實現這個目標，但還是把套件做個簡單的區分：

古老且沒再更新的套件：https、xmlhttprequest、request(這個套件在今年二月宣告廢棄)
使用人數眾多且持續更新的套件：superagent、node-fetch、got、axios

原則上選擇使用人數眾多且持續更新的套件最安全，因為古老的套件通常文件不齊全且無人維護，如果某一天宣告廢棄你的專案就要大量改寫了

本專案採用 axios 來實現這個需求，如果你有興趣你也能嘗試不同的套件來完成今天的功能

今日目標

1. axios 基礎介紹

1.1 安裝 / GET / POST 基礎用法

1.2 請求配置說明

2. 用 axios 發出 LINE 通知

1. axios 基礎介紹

1.1 安裝 / GET / POST 基礎用法

安裝
```
npm install axios
yarn add axios
```

GET 基礎用法

const axios = require('axios'); // 引入套件
axios.get('url/users', { // 填入 api 網址
    params: { // 傳入 params 物件
        ID: 12345
    }
})
.then(function (response) { 
    // 處理成功後要做的事
    console.log(response);
})
.catch(function (error) {
    // 發生意外地處理
    console.log(error);
})

POST 基礎用法

axios.post('url/users', { // 要傳送的資料由後方物件帶入
    firstName: 'Fred',
    lastName: 'Flintstone'
})
.then(function (response) {
    console.log(response);
})
.catch(function (error) {
    console.log(error);
});

1.2 請求配置說明

axios 的組成結構：

axios.(config 物件)
.then(function (response) {})
.catch(function (error) {});

config 物件：發出 Request 的配置選項，其中只有 url 為必填

{
    // url 為必填
    url: '/users',

    // method 是發出 Request 時使用的方法
    method: 'get', // 默認為 get

    // baseURL 如果填寫就會被添加到 url 前面，除非 url 為絕對路徑
    baseURL: 'https://some-domain.com/api/',

    // 你可以在這個地方定義自己的 headers
    // 通常會拿來設定 Authorization、Content-Type
    headers: {'Content-Type': 'application/json'},

    // params 通常跟著 GET method 一起使用
    // 這裡填寫的參數會帶入 url 後面，ex : .../user?ID=123
    params: {
        ID: 123
    },

    // data 只適用於 POST、PUT、PATCH 這幾個 method
    // 主要作為 Request 傳送的資料
    data: {
        firstName: 'Fred'
    },

    // Request 時間超過 1000毫秒(1秒)後會被中止
    timeout: 1000,

    // 選項: 'arraybuffer', 'document', 'json', 'text', 'stream'
    // 瀏覽器才有 'blob'
    responseType: 'json', // 默認為 json

     // 限制 http 回應時的內容大小
    maxContentLength: 2000,
}

這裡只列出常用的配置選項，如果你有興趣深入研究請參考官方文件

下面列出使用 then 時常用的回應參數

axios.get('/users/123')
.then(function(response) {
    console.log(response.data); // api 回傳的資料會在這裡
    console.log(response.status); // 這個是 HTTP狀態碼
    console.log(response.config); // 這個 Request 的 config
});

2. 用 axios 發出 LINE 通知

在對 axios 有基礎了解後我們就把昨日在 POSTMAN 設定 Request 的參數搬移到專案程式吧。在專案 tools 資料夾內新增 lineNotify.js，今天我們要用這隻程式發出 LINE 通知

因為傳送 data 的資料格式為 form-data ，所以請先下指令 yarn add form-data 安裝套件喔

tools/lineNotify.js

const axios = require('axios')
var FormData = require('form-data');
require('dotenv').config();

function lineNotify () {
    const token = process.env.LINE_TOKEN;
    
    // 使用 form-data 傳遞資料
    const form_data = new FormData();
    form_data.append("message", '測試 lineNotify');

    // 設定 LINE Notify 的 權杖 & form-data
    const headers = Object.assign({
        'Authorization': `Bearer ${token}`
    }, form_data.getHeaders());
    
    axios({
        method: 'post',
        url: 'https://notify-api.line.me/api/notify',
        data: form_data,
        headers: headers
    }).then(function (response) {
        // HTTP狀態碼 200 代表成功
        console.log("HTTP狀態碼:" + response.status);
        // 觀察回傳的資料是否與 POSTMAN 測試一致
        console.log(response.data);
    }).catch(function (error) {
        console.error("LINE通知發送失敗");
        if (error.response) { // 顯示錯誤原因            
            console.error("HTTP狀態碼:" + error.response.status);
            console.error(error.response.data);
        } else {
            console.error(error);
        }
    });
}
lineNotify()

執行程式

在專案資料夾的終端機(Terminal)執行指令
```
node tools/lineNotify.js
```
確認印出的 HTTP狀態碼 & 回傳的資料與 POSTMAN 測試結果一致
如果你的 LINE 收到發出的通知就代表你成功嚕！

ℹ️ 專案原始碼

今天的完整程式碼可以在這裡找到喔
我昨天的把昨天的程式碼打包成壓縮檔，你可以在乾淨的環境為專案加入發出LINE通知的功能
- 請記得在終端機下指令 yarn 才會把之前的套件安裝
- windows需下載與你chrome版本相同的chrome driver放在專案根目錄
- 要在tools/google_sheets資料夾放上自己的憑證，申請流程請參考Day17
- 調整fanspages資料夾內目標爬蟲的粉專網址
- 調整.env檔
  - 填上FB登入資訊
  - 填上FB版本(classic/new)
  - 填上IG登入資訊
  - 填上SPREADSHEET_ID
  - 填上爬蟲執行時間(CRONJOB_TIME)
  - 填上LINE Notify申請的權杖(LINE_TOKEN)，申請流程請參考Day27
- 在終端機下指令 npm install forever -g ，讓你在終端機的任何位置都能管控排程
- 在sh資料夾中設定執行排程的shell script

參考資源

在許多人的幫助下，本系列文章已出版成書，並添加了新的篇章與細節補充：

加入更多實務經驗，用完整的開發流程讓讀者了解專案每個階段要注意的事項

將爬蟲的步驟與技巧做更詳細的說明，讓讀者可以輕鬆入門

調整專案架構

優化爬蟲程式，以更廣的視角來擷取網頁資訊

增加資料驗證、錯誤通知等功能，讓爬蟲執行遇到問題時可以第一時間通知使用者

排程部分改用 node-schedule & pm2 的組合，讓讀者可以輕鬆管理專案程序並獲得更精確的 log 資訊

有興趣的朋友可以到天瓏書局選購，感謝大家的支持。

購書連結：https://www.tenlong.com.tw/products/9789864348008

【Day27】為爬蟲加上通知 - 透過 POSTMAN 了解 LINE Notify 如何使用

林鼎淵 — Mon, 12 Oct 2020 08:33:53 +0800

爬蟲完成後沒發出通知，就像是黯然銷魂飯少了洋蔥

為什麼通知很重要？

在爬蟲的運作完全自動化的狀態下你需要透過接收通知，知道爬蟲執行完畢
通知的內容要簡述這次爬蟲的狀況，因為實際上使用者只有在要報告或是寫文章的時候才會去 Google Sheets 看爬蟲的詳細數據，平常他只需要知道爬蟲有沒有穩定執行就好

在通知這個部分我選擇使用 LINE Notify 作為範例，你在了解邏輯後也可以自己改為用 Slack、Wechat、Messager… 等通訊軟體來通知喔

今日目標

1. 取得 LINE Notify 權杖

2. 使用 POSTMAN 測試 LINE Notify

2.1 為什麼要先用 POSTMAN 測試 LINE Notify 呢？

2.2 用 POSTMAN 發出 LINE 的訊息

2.3 透過 POSTMAN 傳送錯誤參數來了解 HTTP狀態碼的意思

1. 取得 LINE Notify 權杖

請以 LINE 帳號登入 LINE Notify，登入後選擇個人頁面
為了要獲得控制 LINE Notify 發訊息的權限，我們要發行權杖
在發行權杖的彈窗中，權杖名稱請填寫與功能相關的名稱，接收通知的聊天室可選擇 1對1、任意聊天室這兩種，確認無誤後按 發行
接著我們要將這組權杖(Token) 複製 下來
關閉彈窗後能看到 已連動的服務中 有我們剛剛新增的服務
同時你收到 LINE Notify 帳號啟用權杖的訊息
將發行的權杖(Token)加入 .env 環境檔，在明天的教學會使用到

.env.exmaple
```
#放LINE Notify申請的權杖
LINE_TOKEN='XXXXXX'
```

2. 使用 POSTMAN 測試 LINE Notify

2.1 為什麼要先用 POSTMAN 測試 LINE Notify 呢？

說明這個問題之前，我們先來探討為什麼 POSTMAN 會這麼被工程師推崇，在這我歸納成以下幾點：

對 後端工程師 而言，可以向合作夥伴證明自己寫的 api 沒有在唬爛，真的可以 work
對 前端工程師、App工程師、有使用 api 需求的人 來說，能在串接 api 前先用 POSTMAN 確認這些 api 真的可以 work
有了這個工具作輔助，我們就能將前後端責任歸屬的很清楚。ex：如果 POSTMAN 上面可以正常 work，那前端就要去思考自己 api 哪裡沒串好
工具操作難度極低，只需要對網路的世界有基礎的認知就能快速上手

所以我們先用 POSTMAN 測試 LINE Notify 的理由是：

確保 LINE Notify api 執行所需的 Request 參數、Respone 的結果與說明書一致（這點非常重要，因為我看過很多 api 回傳的結構跟說明書完全不一樣）
在一行程式都不用寫的狀態下測試所有的可能性
在 POSTMAN 驗證後就能專心寫程式，因為如果程式無法發出 LINE 的通知一定是自己的問題

補充：

POSTMAN 在工程師的世界中素有 API測試神器之稱，如果你對 POSTMAN 一無所知的話你可以先透過這篇文章了解一下他是做什麼的

他可以直接用 Gmail帳號登入在網頁使用，也能下載桌面版 App，相同帳號的操作記錄在兩邊都會同步

2.2 用 POSTMAN 發出 LINE 的訊息

設定 Request 的參數

URL：https://notify-api.line.me/api/notify
Method：POST
Authorization：
- TYPE：Bearer Token
- Token：填入你剛剛在 LINE Notify 申請的權杖

Body：

form-data：

key	value	DESCRIPTION
message	來自寶寶的爬蟲通知	純文字(必填)
stickerPackageId	2	貼圖的PackageId
stickerId	144	貼圖的Id
imageFile	icon.png	電腦上的圖片檔

DESCRIPTION 是我對參數描述，實作上可以不避填
如果你想深入的了解可以參考官方文件

完成 Request 參數填寫後按下 Send 發出 LINE 訊息
- 看到 Response 的結果，status 為 200 代表傳送成功
- 在發行權杖的聊天室中，看到 POSTMAN 傳送的 訊息、貼圖、圖片

2.3 透過 POSTMAN 傳送錯誤參數來了解 HTTP狀態碼的意思

我們剛剛在 POSTMAN 的 Response 看到 HTTP狀態碼為 200，接下來我們故意做一些錯誤測試來看看會有什麼樣的 Response

請注意並不是每隻 api Response data 中的 status 都等於 HTTP狀態碼，只是 LINE Notify 剛好是依照這個邏輯顯示，我們可以用它來幫助我們對 HTTP狀態碼的了解

不填寫 LINE Notify 的權杖
- HTTP狀態碼為 401，代表需要授權才能使用
在 Body 中不填寫 message 的參數
- HTTP狀態碼為 400，意味伺服器收到無效的語法

透過上面的範例回傳的資訊，我們可以了解到不同 HTTP狀態碼的意思：200 代表成功、400可能是參數錯誤、401是沒有授權，當然 HTTP狀態碼不只這些，如果你想更深入的了解可以參考這篇文章

參考資源

在許多人的幫助下，本系列文章已出版成書，並添加了新的篇章與細節補充：

加入更多實務經驗，用完整的開發流程讓讀者了解專案每個階段要注意的事項

將爬蟲的步驟與技巧做更詳細的說明，讓讀者可以輕鬆入門

調整專案架構

優化爬蟲程式，以更廣的視角來擷取網頁資訊

增加資料驗證、錯誤通知等功能，讓爬蟲執行遇到問題時可以第一時間通知使用者

排程部分改用 node-schedule & pm2 的組合，讓讀者可以輕鬆管理專案程序並獲得更精確的 log 資訊

有興趣的朋友可以到天瓏書局選購，感謝大家的支持。

購書連結：https://www.tenlong.com.tw/products/9789864348008

【Day26】排程 - 重開機後排程不見惹？簡單幾個步驟，從此以後完全自動

林鼎淵 — Sun, 11 Oct 2020 10:00:01 +0800

解決問題的方法 ≠ 最好的方法；我只是提出我的解法，了解問題發生的原因後你可以想想自己如果遇到了會怎麼解決

為什麼寫這篇文章

昨天的教學讓你的排程穩定的在背景執行，但是你重開機在終端機(Terminal)輸入 forever list 的指令你會發現 forever 根本沒有 forever

為了決這個問題，今天會教你如何在電腦啟動時執行 script 讓 forever 跑起來的方法，這塊我會分成 windows 跟 mac 來說明，請大家安心服用

今日目標

1. 設定 mac 排程

1.1 撰寫執行排程的 shell script ：crawler_cron.sh

1.2 將 crawler_cron.sh 設定為可以被執行

1.3 設定 crawler_cron.sh 在使用者登入後自動執行

1.4 重新登入確認 forever 是否運行

2. 設定 windows 排程

2.1 進入排程設定頁面

2.2 設定觸發條件

2.3 打開 windows 歷程紀錄

2.4 重開機確認 forever 是否運行

1. 設定 mac 排程

1.1 撰寫執行排程的 shell script ：`crawler_cron.sh`

在專案目錄下建立存放 shell script 的 sh 資料夾，並新增 crawler_cron.sh
- shell script 寫法很簡單，平常你怎麼在終端機下指令就怎麼寫
- 專案資料夾路徑可用 pwd 指令取得
crawler_cron.sh
```
# 進入專案資料夾
cd /專案資料夾路徑

# 啟動排程服務
yarn forever
```
執行 crawler_cron.sh 確認運作邏輯跟你想的一樣
```
sh crawler_cron.sh
```

1.2 將 crawler_cron.sh 設定為可以被執行

建立的檔案一開始只有讀寫功能，我們要將 crawler_cron.sh 設定為可以被執行，才不會在自動化時因權限不足執行失敗

我們先觀察 crawler_cron.sh 的權限

# 進入資料夾
cd sh
# 列出資料夾地下檔案權限
ll

目前 crawler_cron.sh 的權限是 -rw-r--r--
- 權限要把他切分成 3 段來看：owner/group/others，所以代表檔案的 owner 有讀(r)寫(w)的權限，而 group/others 只有讀(r)的權限
- 而我們要讓這個檔案可以被執行(x)需要下指令更改權限
```
chmod 755 crawler_cron.sh
```
想要深入了解 chmod 檔案權限概念的請參考這篇文章

1.3 設定 crawler_cron.sh 在使用者登入後自動執行

我們要先確認 crawler_cron.sh 的檔案資訊
將打開檔案的應用程式設定成 iTerm (如果設定成 mac 原生的 終端機 也可以)
- shell script 必須在終端機相關應用程式下執行
設定 crawler_cron.sh 在使用者登入後自動執行
1. 進入 系統偏好設定 後，選擇 使用者與群組
2. 選擇要觸法這個 shell script 的使用者，在 登入項目 下按 + 來新增觸發的項目
3. 請選擇剛剛設定為可以 被執行的 crawler_cron.sh
4. 加入項目後把隱藏打勾

1.4 重新登入確認 forever 是否運行

請你重新登入後在終端機(Trerminal)輸入 forever list 的指令確認是否正常運行

2. 設定 windows 排程

2.1 進入排程設定頁面

在鍵盤同時按下 : WIN + R
輸入 : taskschd.msc

2.2 設定觸發條件

建立工作
選擇以最高權限執行，這裡我選擇 不論使用者登入與否均執行 是因為我要在開機時就觸發，而剛開機的時候使用者是還沒登入的；這塊可以依照自己的實際需求去做調整
在這裡設定為啟動時會開始工作
編輯動作的部分有幾個需要注意
- 程式或指令碼 : 你要找到當初安裝 yarn 的路徑，及 yarn.cmd 的檔案
- 新增引數 : 填上 forever ，因為我們是用 yarn forever 啟動程式的
- 開始位置 : 把專案的路徑複製上去即可

2.3 打開 windows 歷程紀錄

windows 需打開歷程紀錄否則不會執行該排程
1. 我們看到建立的工作在歷程紀錄旁邊顯示 (已停用)，我們需要把他開啟
2. 在左上角 工作排程器(本機) 按右鍵，選擇 啟用所有工作歷程紀錄
3. 確認你要執行工作的歷程紀錄旁邊 沒有(已停用)，就代表設定完成嚕

2.4 重開機確認 forever 是否運行

請注意因為使用的是最高權限執行 yarn forever，所以你在 cmd 裡面用 forever list 是看不到的

必須要用系統管理員身分執行 cmd
在這個權限下輸入指令 forever list 才能確認是否正常運行

ℹ️ 專案原始碼

今天的完整程式碼可以在這裡找到喔
我昨天的把昨天的程式碼打包成壓縮檔，你可以在乾淨的環境試試看排程是不是重開機後依舊存在呢~
- 請記得在終端機下指令 yarn 才會把之前的套件安裝
- windows需下載與你chrome版本相同的chrome driver放在專案根目錄
- 要在tools/google_sheets資料夾放上自己的憑證，申請流程請參考Day17
- 調整fanspages資料夾內目標爬蟲的粉專網址
- 調整.env檔
  - 填上FB登入資訊
  - 填上FB版本(classic/new)
  - 填上IG登入資訊
  - 填上SPREADSHEET_ID
  - 填上爬蟲執行時間(CRONJOB_TIME)
- 在終端機下指令 npm install forever -g ，讓你在終端機的任何位置都能管控排程
- 在sh資料夾中設定執行排程的shell script

參考資源

在許多人的幫助下，本系列文章已出版成書，並添加了新的篇章與細節補充：

加入更多實務經驗，用完整的開發流程讓讀者了解專案每個階段要注意的事項

將爬蟲的步驟與技巧做更詳細的說明，讓讀者可以輕鬆入門

調整專案架構

優化爬蟲程式，以更廣的視角來擷取網頁資訊

增加資料驗證、錯誤通知等功能，讓爬蟲執行遇到問題時可以第一時間通知使用者

排程部分改用 node-schedule & pm2 的組合，讓讀者可以輕鬆管理專案程序並獲得更精確的 log 資訊

有興趣的朋友可以到天瓏書局選購，感謝大家的支持。

購書連結：https://www.tenlong.com.tw/products/9789864348008

【Day25】排程 - 用forever套件來控管排程，背景執行才是王道！

林鼎淵 — Sat, 10 Oct 2020 10:44:44 +0800

如果一個套件無法解決問題，那就用兩個吧！

思考一下昨天的排程有什麼缺點

昨天完成的排程其實有幾個缺點：

在終端機(Terminal)執行排程後你必須保持開啟的狀態你才知道他有沒有正確執行
如果不小心把執行排程的終端機(Terminal)關掉你會很困擾，因為你關掉的是終端機不是排程，你想關掉排程還要另外下幾個指令
管理困難，啟動、停止、重啟你都要在專案資料夾下處理
如果運行過程中程式意外關閉需要手動重開
在排程運行中你修改爬蟲json裡面的粉專列表是無效的，實驗看看就會發現觸發爬蟲時跑的是舊版的粉專列表

今日目標

砍掉執行中的排程
使用套件 forever 來管理排程
在 package.json 中加入驅動 forever 的 scripts

1. 砍掉執行中的排程

我想很多人跟我一樣不小心順手把終端機(Terminal)給關了 (或是很乾脆地把 VScode 關了)，但視窗關閉後排程其實還在背景持續運行，下面提供一個快速的解決方案：

ps aux | grep [搜尋關鍵字]
kill [程式的PID]

ps (process status) - 顯示進程狀態的指令

參數說明
- a : 列出所有使用者與 terminal 無關的所有 process
- u : 以使用者名稱顯示的格式
- x : 列出與 terminal 有關的所有 process (通常與 a 搭配使用)
顯示欄位 : USER PID %CPU %MEM VSZ RSS TTY STAT START TIME COMMAND

kill - 刪除執行中的 process

我們需要找到執行程式的 process PID 才能將其刪除 (PID 就在 ps 進程狀態的第二欄)

實際操作範例

找出正在運行的排程
```
ps aux | grep cron.js
```
你可以看到執行排程的 PID 是 23888，把他複製起來用 kill 指令刪除
```
kill 23888
```
刪除後查詢進程，確認是否刪除成功
```
ps aux | grep cron.js
```

2. 使用套件 `forever` 來管理排程

單純使用 cron 套件會讓你遇到開頭所說的各種問題，所以遇到過這個問題的高手們也寫了一個讓 Node.js 程式運行永不停止的套件：forever，這個套件操作極其簡單，不僅能讓排程在背景穩定執行，還能在終端機的任何位置做管理

首先要請你全域安裝這個套件，這樣才能在任何一個位置執行它
```
[sudo] npm install forever -g
```
基礎指令（以操作專案的 cron.js 為範例）
- 啟動程式
```
forever --minUptime=1000 --spinSleepTime=1000 start tools/cron.js
```
  如果你沒加上 --minUptime=1000 --spinSleepTime=1000 的參數會有警告如下圖
- 監聽檔案更動並自動重啟
```
forever --minUptime=1000 --spinSleepTime=1000 -w start tools/cron.js
```
  - 這個指令可以監控檔案的變更，解決過去爬蟲json資料變更但是執行時跑舊資料的問題
  - 要在專案資料夾下新增 .foreverignore 的檔案，被列入的檔案/資料夾在偵測變更時會被忽略
    
    .foreverignore
```
node_modules
.env
chromedriver.exe
debug.log
```
- 顯示所有運行的狀態
```
forever list
```
  - 可以在 logfile 裡面看到排程執行的狀況
- 關閉所有運行的程式
```
forever stopall
```
- 重新啟動程式
```
forever restart tools/cron.js
```
  - 請注意如果你修改了 .env 裡面的資料，則必須要重啟才會生效
執行 forever 時你可能會遇到警告如下
```
(node:30512) Warning: Accessing non-existent property 'padLevels' of module exports inside circular dependency
```
- 這個警告是因為 forever 有相依套件在 node v14 之後不再支援，但這些警告不影響套件運行
- Node.js 的版本更新的非常快速，許多套件都可能在更新後不支援，所以更新版本後請切記要運行一次確保正常
- 目前 Node.js 的 LTS 版本為 12.19.0，如果你使用這個穩定的版本就能避免這個問題

3. 在 package.json 中加入驅動 forever 的 scripts

將昨天 cron 的 scripts 改為 forever 的版本

為了避免重複啟動，這個 scipts 的執行邏輯為：先暫停所有運行的 forever 程式，然後再啟動程式

"forever":"forever stopall && forever --minUptime=1000 --spinSleepTime=1000 -w start tools/cron.js"

執行程式

在專案資料夾的終端機(Terminal)執行指令啟動排程
```
yarn forever
```
然後再執行指令 forever list 確認排程正在背景運行

ℹ️ 專案原始碼

今天的完整程式碼可以在這裡找到喔
我也貼心地把昨天的把昨天的程式碼打包成壓縮檔，你可以在乾淨的環境嘗試用forever來控管排程吧
- 請記得在終端機下指令 yarn 才會把之前的套件安裝
- windows需下載與你chrome版本相同的chrome driver放在專案根目錄
- 要在tools/google_sheets資料夾放上自己的憑證，申請流程請參考Day17
- 調整fanspages資料夾內目標爬蟲的粉專網址
- 調整.env檔
  - 填上FB登入資訊
  - 填上FB版本(classic/new)
  - 填上IG登入資訊
  - 填上SPREADSHEET_ID
  - 填上爬蟲執行時間(CRONJOB_TIME)
- 在終端機下指令 npm install forever -g ，讓你在終端機的任何位置都能管控排程

參考資源

在許多人的幫助下，本系列文章已出版成書，並添加了新的篇章與細節補充：

加入更多實務經驗，用完整的開發流程讓讀者了解專案每個階段要注意的事項

將爬蟲的步驟與技巧做更詳細的說明，讓讀者可以輕鬆入門

調整專案架構

優化爬蟲程式，以更廣的視角來擷取網頁資訊

增加資料驗證、錯誤通知等功能，讓爬蟲執行遇到問題時可以第一時間通知使用者

排程部分改用 node-schedule & pm2 的組合，讓讀者可以輕鬆管理專案程序並獲得更精確的 log 資訊

有興趣的朋友可以到天瓏書局選購，感謝大家的支持。

購書連結：https://www.tenlong.com.tw/products/9789864348008

【Day24】排程 - Cron套件超詳解，讓爬蟲自己動起來

林鼎淵 — Fri, 09 Oct 2020 10:33:01 +0800

電腦能夠記住的任務就讓電腦來做吧，把腦容量留給更重要的任務

為什麼要學習排程？

在客戶要求這個功能前其實我就把他的雛型完成了，因為我是一個懶人，同時也不是一個記性很好的人，如果每天都要在某個時間打開專案執行 yarn start 然後等數據跑完，這對我來說實在是一件很容易忘記且沒有效率的事情，我認為電腦可以做到事情那就交給電腦去做，所以接下來幾天就來跟大家分享我是如何偷懶使用排程的

今日目標

1. 排程套件 - Cron

1.1 測試官方程式

1.2 分析 api 架構

1.3 了解 cronTime 語法

1.4 範例

2. 把排程加入爬蟲

2.1 將主程式的函式crawler設定成外部函式，供排程呼叫

2.2 建立專門管控排程的程式：cron.js

2.3 調整package.json，建立專門跑排程的 scripts

1. 排程套件 - Cron

這裡我們需要安裝一個套件 cron ，他可以在你指定的時間執行你希望他幫你做的事情，這是他的官方文檔，下面我會詳細介紹他的功能(因為我自己也很常使用XD)

yarn add cron

1.1 測試官方程式

先在 tools 的資料夾裡面新增一個 cron.js 的檔案

複製下方的官方範例

var CronJob = require('cron').CronJob;
var job = new CronJob('* * * * * *', function() {
    console.log('You will see this message every second');
}, null, true, 'America/Los_Angeles');
job.start();

在專案資料夾執行 node tools/cron.js
- 如果終端機(Terminal)每秒鐘都印出 You will see this message every second 就代表套件運行成功

1.2 分析 api 架構

constructor(cronTime, onTick, onComplete, start, timezone, context, runOnInit, unrefTimeout)

cronTime [必填] 設定定時任務時間
onTick [必填] 定時任務要執行的函式
onComplete [選填] 完成定時任務後要執行的函式
Start [選填] 是否自動啟動job，默認為false
timeZone [選填] - 指定執行的時區，莫認為當前時區，關於時區代碼可參考網站

1.3 了解 cronTime 語法

總共分為六個區塊：秒分鐘小時天月份星期幾

秒：0-59
分鐘：0-59
小時：0-23
天：1-31
月份：0-11（1~12月，特別注意月份是從0開始）
星期幾：0-6（星期日~星期六，Sun~Sat）

語法範例
- * 全部
  - 每秒都執行(官方範例)
```
* * * * * *
```
  - 每分鐘的第 10 秒執行
```
10 * * * * *
```
  - 每天晚上 10點30分10秒時執行
```
10 30 22 * * *
```
- - 時間區間
  - 每天早上 9點到12點的整點執行
```
0 0 9-12 * * *
```
- , 分隔符號，可以輸入多個數值
  - 每分鐘的第 5,20,30 秒執行
```
5,20,30 * * * * *
```
- / 間隔多少時間執行
  - 每 3 分鐘執行一次
```
* */3 * * * *
```

1.4 範例

每分鐘的第 10 秒執行

var CronJob = require('cron').CronJob;
new CronJob('10 * * * * *', function () {
    const datetime = new Date();
    console.log(datetime);
}, null, true);

每分鐘的第 5,20,30 秒執行

var CronJob = require('cron').CronJob;
new CronJob('5,20,30 * * * * *', function () {
    const datetime = new Date();
    console.log(datetime);
}, null, true);

2. 把排程加入爬蟲

我們要調整三個檔案讓排程可以順利觸發爬蟲

2.1 將主程式的函式`crawler`設定成外部函式，供排程呼叫

因避免被引用時自動觸發 crawler 函式，故將下方觸發用的 crawler() 移除

index.js

require('dotenv').config(); 
const { initDrive } = require("./tools/initDrive.js");
const { crawlerFB } = require("./tools/crawlerFB.js");
const { crawlerIG } = require("./tools/crawlerIG.js");
const { updateGoogleSheets } = require("./tools/google_sheets");
exports.crawler = crawler; //讓其他程式在引入時可以使用這個函式

async function crawler () {
    const driver = await initDrive();
    if (!driver) {
        return
    }
    const ig_result_array = await crawlerIG(driver)
    const fb_result_array = await crawlerFB(driver)
    driver.quit();
    await updateGoogleSheets(ig_result_array, fb_result_array)
}

2.2 建立專門管控排程的程式：`cron.js`

我將 CronJob 的參數都帶出來，這樣在日後維護時比較了解每個參數的意義
請編輯 .env檔填上排程觸發爬蟲的時間點(CRONJOB_TIME)

cron.js

const CronJob = require('cron').CronJob;
const { crawler } = require("../index.js");
new CronJob({
    cronTime: process.env.CRONJOB_TIME,//請編輯.env檔填上自己的爬蟲時段喔
    onTick: async function () {
        console.log(`開始執行爬蟲排程作業： ${new Date()}`);
        await crawler()
        console.log('排程作業執行完畢！');
    },
    start: true,
    timeZone: 'Asia/Taipei'
});

2.3 調整 `package.json`，建立專門跑排程的 scripts

針對 node 如何執行 js 指定 function 的指令寫法可以參考這篇文章

start : mac 執行單次爬蟲時使用的
win_start : windows 執行單次爬蟲時使用的(需要將單引號與雙引號反過來，因為 windows 只會將單引號內的資訊印除來而不會去執行)
cron : mac、windows 排程執行爬蟲時使用的

{
    "name": "crawler",
    "version": "0.0.1",
    "description": "FB & IG 爬蟲30天鐵人文章",
    "author": "dean lin",
    "dependencies": {
        "cron": "^1.8.2",
        "dateformat": "^3.0.3",
        "dotenv": "^8.2.0",
        "googleapis": "59",
        "selenium-webdriver": "^4.0.0-alpha.7"
    },
    "devDependencies": {},
    "scripts": {
        "start": "node  -e 'require(\"./index\").crawler()'",
        "win_start": "node  -e \"require('./index').crawler()\"",
        "cron":"node tools/cron.js"
    },
    "main": "index.js",
    "license": "MIT"
}

執行程式

建議將 .env 檔中 CRONJOB_TIME 的時間調整成 3 分鐘後的時間比較好測試
在專案資料夾的終端機(Terminal)執行指令
```
yarn start
```
確認爬蟲程式是否依照你設定的時間開始執行
因為排程的程式會一直執行，所以你不會看到以往 Done in xxs 的訊息，如果想要中斷終端機(Terminal)執行的程式，可以用下面按鍵組合:
- Windows: Ctrl + c
- Mac: control + c

ℹ️ 專案原始碼

今天的完整程式碼可以在這裡找到喔
我也貼心地把昨天的把昨天的程式碼打包成壓縮檔，你可以用裡面乾淨的環境來加入今天排程的功能喔
- 請記得在終端機下指令 yarn 才會把之前的套件安裝
- windows需下載與你chrome版本相同的chrome driver放在專案根目錄
- 要在tools/google_sheets資料夾放上自己的憑證，申請流程請參考Day17
- 調整fanspages資料夾內目標爬蟲的粉專網址
- 調整.env檔
  - 填上FB登入資訊
  - 填上FB版本(classic/new)
  - 填上IG登入資訊
  - 填上SPREADSHEET_ID
  - 填上爬蟲執行時間(CRONJOB_TIME)

參考資源

Run function in script from command line (Node JS)

在許多人的幫助下，本系列文章已出版成書，並添加了新的篇章與細節補充：

加入更多實務經驗，用完整的開發流程讓讀者了解專案每個階段要注意的事項

將爬蟲的步驟與技巧做更詳細的說明，讓讀者可以輕鬆入門

調整專案架構

優化爬蟲程式，以更廣的視角來擷取網頁資訊

增加資料驗證、錯誤通知等功能，讓爬蟲執行遇到問題時可以第一時間通知使用者

排程部分改用 node-schedule & pm2 的組合，讓讀者可以輕鬆管理專案程序並獲得更精確的 log 資訊

有興趣的朋友可以到天瓏書局選購，感謝大家的支持。

購書連結：https://www.tenlong.com.tw/products/9789864348008

【Day23】Google Sheets - 優化格式，滿足客戶需求 & 談使用者體驗

林鼎淵 — Thu, 08 Oct 2020 08:10:42 +0800

你是做好一件作品，還是完成一項任務

今日目標

1. 了解使用者體驗為什麼重要

1.1 那些不堪回首的共同回憶

1.2 是什麼原因製造出這些體驗的

1.3 有在使用產品的人才會給你最真實的回饋，專案還有哪些地方要改善呢？

2. 優化用手機來看 Google Sheets 的爬蟲資料的體驗

2.1 如何讓手機看 Google Sheets 爬蟲資料時舒服點

2.2 窗口凍結：將最上方的爬蟲日期、左方的粉專名稱欄位凍結

2.3 欄位寬度調整：減少追蹤人數的欄位寬度

1. 了解使用者體驗為什麼重要

讓客戶用的開心他們才會買單

1.1 那些不堪回首的共同回憶

我想每個人都有過類似經驗：

操作系統時讓你感到焦慮
- 我Ｘ，到底這個系統要怎麼操作啊？為什麼按下去沒反應？到底哪裡弄錯了？
- 卡在 loading 的畫面已經 10 分鐘，所以我要繼續等嗎？
你想要用的功能會隱身術
- 我想要用XXX功能，到底他在哪裡才能操作？
- 為什麼要改版啦？功能都不知道跑去哪了？
每個按鈕都像定時炸彈
- 所以這個按鈕是什麼意思？是下一步還是送出？
- 痾…下單了？這不是加入購物車嗎？
懷疑設計者是不是嗑藥
- 簡訊的驗證碼有 6 碼，可是眼前能輸入的欄位只有 4 碼，是在哈嚕？
- 線上填完表格後不能儲存只能下載列印後寄給主辦單位，如果要用郵件寄出幹嘛設計成網頁?

1.2 是什麼原因製造出這些體驗的

相信遇到這些經驗的時候大家心裡都會想：這麼爛的東西到底是誰設計出來的啊？他自己真的有用過嗎？

總結發生這些不好的經驗通常都是因為：

沒有了解使用者真正的需求：這是許多外包案的真實狀況，工程師的目標是驗收通過，而承包商也只是為了把事情做完有績效，當甲乙方都不在乎終端使用者的需求時，完成的產品通常不堪入目
經驗不足：很多時候有些報價比較低的案子會交給公司的新人，如果公司也沒有讓前輩在旁邊給予指導會讓這個產品有非常多的漏洞
沒有足夠的測試：有些案子時程非常的趕，在這樣的狀態下通常產品的穩定度很低，且操作時也很容易發生錯誤
經費不足：花大錢的案子不一定做得好，但是錢少的案子基本上都不太好，一分錢一分貨，壓價格的時候一定會喪失品質

1.3 有在使用產品的人才會給你最真實的回饋，專案還有哪些地方要改善呢？

沒有一開始就完美的專案，客戶的需求會在使用的過程中慢慢增加，這個專案也在業主使用的過程中增加了一些需求：

下班後會用手機來看 Google Sheets 的爬蟲資料，操作起來不是很順，想問有沒有好的建議
上班太忙會忘記跑爬蟲程式，能不能指定爬蟲程式在某個時間點自動執行
因為執行爬蟲程式的時候我也要做事情，能不能有個通知提醒我爬蟲執行的狀況

接下來的日子就讓我們把這些需求一一實踐吧！

2. 優化用手機來看 Google Sheets 的爬蟲資料的體驗

原則上你想對 Google Sheets 的任何操作官方都有提供 api 給你，如果你時常會使用到的話請一定要讀懂官方文件，閱讀的技巧可以參考這篇文章喔

2.1 如何讓手機看 Google Sheets 爬蟲資料時舒服點

這個問題分析起來很簡單，主要就是下面兩點：

因為資料存在 Google sheets 上面，資料量一大就很難觀看
手機螢幕小，能呈現的資料不多

後來再跟客戶討論的過程中發現這個問題在使用電腦時也會有，但是使用手機時問題更嚴重，於是我在操作他 Google Sheets 的爬蟲資料時提出了優化方案，讓他在使用上方便許多：

將最上方的爬蟲日期、左方的粉專名稱欄位凍結
- 這樣在瀏覽時就不需要一直往上確認日期、往左確認他是哪個粉專了
減少追蹤人數的欄位寬度
- 我們無法改變手機的螢幕寬度，但是改變資料欄位的寬度能讓一個螢幕能呈現更多的資訊

測試環境通常資料量不足，很多問題在資料量逐漸上升的正式環境才會浮現

2.2 窗口凍結：將最上方的爬蟲日期、左方的粉專名稱欄位凍結

我將這個功能合併到建立 sheet 的函式 addSheet，窗口凍結這件事在建立 sheet 時執行一次就夠了

詳細的官方文件請參考窗口凍結

async function addSheet (title, sheet_id, auth) {
  const sheets = google.sheets({ version: 'v4', auth });
  const request = {
    "spreadsheetId": process.env.SPREADSHEET_ID,
    "resource": {
      "requests": [{
        "addSheet": {
          "properties": {
            "title": title,
            "gridProperties": {
              "frozenRowCount": 1,//最上面那一列(爬蟲日期)設定為凍結
              "frozenColumnCount": 1//最左邊那一欄(粉專名稱)設定為凍結
            },
          }
        },
      }]
    }
  };
  try {
    await sheets.spreadsheets.batchUpdate(request)
    console.log('added sheet:' + title)
  }
  catch (err) {
    console.log('The API returned an error: ' + err);
  }
}

2.3 欄位寬度調整：減少追蹤人數的欄位寬度

為了能容納能多的資訊量，所以我們要在插入新欄位 insertEmptyCol 時給他一個合適的欄位寬度

提醒你 Google Sheets 的 requests 是可以執行多個要求的，像下面的範例程式中的 requests 就包含 insertDimension、updateDimensionProperties 這兩個

詳細的官方文件請參考欄位寬度調整

async function insertEmptyCol (title, sheet_id, auth) {
  const sheets = google.sheets({ version: 'v4', auth });
  const request = {
    "spreadsheetId": process.env.SPREADSHEET_ID,
    "resource": {
      "requests": [{
        "insertDimension": {
          "range": {
            "sheetId": sheet_id,
            "dimension": "COLUMNS",
            "startIndex": 1,
            "endIndex": 2
          },
          "inheritFromBefore": true
        }
      },
      {
        "updateDimensionProperties": {//這裡是為了修正欄寬
          "range": {
            "sheetId": sheet_id,
            "dimension": "COLUMNS",
            "startIndex": 1,//只需要首欄
            "endIndex": 2
          },
          "properties": {
            "pixelSize": 85//欄位寬度
          },
          "fields": "pixelSize"
        }
      }]
    }
  };
  try {
    await sheets.spreadsheets.batchUpdate(request)
    console.log('update sheet:' + title + ' new column')
  }
  catch (err) {
    console.log('The API returned an error: ' + err);
  }
}

執行程式

在執行程式之前請先把 Google Sheets 的’FB粉專’、‘IG帳號’這兩個 sheet 刪除，因為要觸發 addSheet 才會有窗口凍結的功能
刪除 sheet 後在專案資料夾的終端機(Terminal)執行指令
```
yarn start
```
執行完畢後確認 Google Sheets 是否有符合今天設定的格式：窗口凍結、欄位寬度調整

⏭️ 下個階段

Google Sheets 對爬蟲資料處理的系列文章到這裡告一個段落，接下來我們依照今天提到專案要改善的地方繼續前進，接著來聊聊把排程加入爬蟲專案這個主題吧

ℹ️ 專案原始碼

今天的完整程式碼可以在這裡找到喔
我也貼心地把昨天的把昨天的程式碼打包成壓縮檔，你可以用裡面乾淨的環境來完成業主要求的需求變更吧
- 請記得在終端機下指令 yarn 才會把之前的套件安裝
- windows需下載與你chrome版本相同的chrome driver放在專案根目錄
- 要在tools/google_sheets資料夾放上自己的憑證，申請流程請參考Day17
- 調整fanspages資料夾內目標爬蟲的粉專網址
- 調整.env檔
  - 填上FB登入資訊
  - 填上FB版本(classic/new)
  - 填上IG登入資訊
  - 填上SPREADSHEET_ID

參考資源

了解使用者體驗 (UX) 的第一堂課

在許多人的幫助下，本系列文章已出版成書，並添加了新的篇章與細節補充：

加入更多實務經驗，用完整的開發流程讓讀者了解專案每個階段要注意的事項

將爬蟲的步驟與技巧做更詳細的說明，讓讀者可以輕鬆入門

調整專案架構

優化爬蟲程式，以更廣的視角來擷取網頁資訊

增加資料驗證、錯誤通知等功能，讓爬蟲執行遇到問題時可以第一時間通知使用者

排程部分改用 node-schedule & pm2 的組合，讓讀者可以輕鬆管理專案程序並獲得更精確的 log 資訊

有興趣的朋友可以到天瓏書局選購，感謝大家的支持。

購書連結：https://www.tenlong.com.tw/products/9789864348008

【Day22】Google Sheets - 客戶：我希望新資料插在最前面 & 談需求變更

林鼎淵 — Wed, 07 Oct 2020 09:03:30 +0800

在驗收階段你就知道一個好的需求規格書有多麼重要

今日目標

1. 了解驗收過程中需求規格書的重要性

2. 談需求變更

3. 將新的爬蟲資料寫到最前面，日期為由近而遠的排序

3.1 插入一個空白欄位：insertEmptyCol

3.2 把空白欄位更新成最新的追蹤人數資訊

1. 了解驗收過程中需求規格書的重要性

驗收的過程就是按造需求規格上的驗收項目一一測試，所以如果沒有需求規格書或是需求規格書寫得太不完善，你在驗收的過程會一直被凹新功能，而這些功能基本上只能忍氣吞聲吃下去，畢竟這是因為你在一開始沒談好規格的歷史業障，這就是我在Day 1提到需求規格書的重要性

2. 談需求變更

反過來如果你需求規格寫得夠好，在驗收的階段你會有很多賺外快的機會，因為大部分的客戶在驗收階段才想到他們實際上還需要哪些功能

對於這些多出來的功能我一律列入需求變更，因為這些需求並不在原合約內所以你可以將客戶的新需求記錄下來依功能報價讓客戶自己決定需要新增哪些功能

根據個人經驗，在結案後你會發現這些多出來的需求變更可能占總外包費的 20%~40% 不等，所以各位在接案時千萬不要因為覺得麻煩沒有好好寫需求規格書啊！你這樣的做法完全在跟自己的錢包過不去，讓自己成為免費勞工。

下面用今天要完成的需求變更舉例：

客戶：我測試了幾天覺得爬蟲蠻穩定的，但最新的爬蟲資料都寫在最後面，這讓我要滑到最後面才知道最新資料，他能不能新資料都寫在最前面啊 (客戶提出需求變更)

我：您的意思是要將新的爬蟲資料寫到最前面，Google Sheet 上呈現的是日期由近而遠的排序嗎？ (確認需求變更的邏輯)

客戶：對，麻煩了

我：不過這項需求並不在原本的需求規格書上面，原本的需求規格書只提到爬蟲日期為欄，粉專標題為列，並沒提到排序方面的需求；經過評估這個功能需要額外的費用XXX，您可以接受嗎？ (提出需求規格書上面的規格做佐證，並說明這個新功能需要加收多少費用)

客戶：恩…可以

我：我把這項規則加到需求規格書的後面，您確認完後我就會開始實作 (讓客戶確認規格及價格後在開始實作)

3. 將新的爬蟲資料寫到最前面，日期為由近而遠的排序

因為沒找到可以一步完成的解法，所以我將這個需求拆成兩個步驟：

先在第二欄插入一個空白欄位

把空白欄位更新成最新的追蹤人數資訊

3.1 插入一個空白欄位：`insertEmptyCol`

在Google Sheets中插入空白欄位的部分請參考官方的文件，這裡有個需要注意的點：

我們觀察到 Google 插入欄位的 api 在 range 的參數上需要 sheet_id 來能執行，而這隻函式會被 writeSheet 函式呼叫，所以下一步我們要對他做一些調整

async function insertEmptyCol (title, sheet_id, auth) {//插入空白欄位
  const sheets = google.sheets({ version: 'v4', auth });
  const request = {
    // The ID of the spreadsheet
    "spreadsheetId": process.env.SPREADSHEET_ID,
    "resource": {
      "requests": [{
        "insertDimension": {//插入新欄位
          "range": {
            "sheetId": sheet_id,
            "dimension": "COLUMNS",
            "startIndex": 1,//代表插入範圍從第一欄開始到第二欄結束
            "endIndex": 2
          },
          "inheritFromBefore": true
        },
      }]
    }
  };
  try {
    await sheets.spreadsheets.batchUpdate(request)
    console.log('update sheet:' + title + ' new column')
  }
  catch (err) {
    console.log('The API returned an error: ' + err);
  }
}

3.2 把空白欄位更新成最新的追蹤人數資訊

因為insertEmptyCol這個函式需要用到用到 sheetId 的參數，我們需要對以下程式做調整：

updateGoogleSheets：還記得 getFBIGSheet 會回傳 sheets 的資訊嗎？現在我們就需要裡面的title、id

const sheets = await getFBIGSheet(auth)//取得線上FB、IG的sheet資訊

// 寫入各自的Sheet
for (sheet of sheets) {
  if (sheet.title === 'FB粉專') {
    await writeSheet(sheet.title, sheet.id, fb_result_array, auth)
  } else if (sheet.title === 'IG帳號') {
    await writeSheet(sheet.title, sheet.id, ig_result_array, auth)
  }
}

writeSheet :

傳入 sheet_id 參數讓 insertEmptyCol 使用

async function writeSheet (title, sheet_id, result_array, auth)

先插入空白欄位後再寫入追蹤人數

// 插入空欄位
await insertEmptyCol(title, sheet_id, auth)
// 寫入追蹤人數
await writeTrace(title, trace_array, auth)

因為取得最後一欄的函式用不到了，請將getLastCol、toColumnName刪除

執行程式

在專案資料夾的終端機(Terminal)執行指令
```
yarn start
```
在終端機我們可以看到事先插入新欄位再更新資料
確認新的爬蟲資料有正確插入到 Google Sheets 第二欄

如果你在同一天測試，你可以把之前爬蟲日期改成old方便辨識

ℹ️ 專案原始碼

今天的完整程式碼可以在這裡找到喔
我也貼心地把昨天的把昨天的程式碼打包成壓縮檔，你可以用裡面乾淨的環境來完成業主要求的需求變更吧
- 請記得在終端機下指令 yarn 才會把之前的套件安裝
- windows需下載與你chrome版本相同的chrome driver放在專案根目錄
- 要在tools/google_sheets資料夾放上自己的憑證，申請流程請參考Day17
- 調整fanspages資料夾內目標爬蟲的粉專網址
- 調整.env檔
  - 填上FB登入資訊
  - 填上FB版本(classic/new)
  - 填上IG登入資訊
  - 填上SPREADSHEET_ID

在許多人的幫助下，本系列文章已出版成書，並添加了新的篇章與細節補充：

加入更多實務經驗，用完整的開發流程讓讀者了解專案每個階段要注意的事項

將爬蟲的步驟與技巧做更詳細的說明，讓讀者可以輕鬆入門

調整專案架構

優化爬蟲程式，以更廣的視角來擷取網頁資訊

增加資料驗證、錯誤通知等功能，讓爬蟲執行遇到問題時可以第一時間通知使用者

排程部分改用 node-schedule & pm2 的組合，讓讀者可以輕鬆管理專案程序並獲得更精確的 log 資訊

有興趣的朋友可以到天瓏書局選購，感謝大家的支持。

購書連結：https://www.tenlong.com.tw/products/9789864348008

【Day21】Google Sheets - BUG!爬蟲資料塞錯位置 & 專案出包怎麼辦？

林鼎淵 — Tue, 06 Oct 2020 09:08:20 +0800

客戶的操作跟你想的不一樣

為什麼寫這篇文章？

其實這份專案完成到昨天的進度時就給業主做功能上的確認準備結案了

但一個案子通常很難一次就通過，無論這隻程式在你電腦上執行的多麼穩定，放到別人的電腦上總會冒出大大小小的 bug，我大概歸類成以下幾種：

作業系統不同導致的
- Windows、MacOS、Ubuntu Linux (ex：爬蟲時需要設定各自的 webdriver)
套件版本不同導致
- Node.js版本、npm 套件 (ex：有些 npm套件只能在特定 Node.js版本運行)
電腦運行環境
- 網路速度、硬體規格… (ex：如果你的網路環境太差需要去調整爬蟲元件的極限等待時間)
客戶的操作跟你預想的不一樣

第 1、2、3 點的問題我在之前文章實作碰到時有提到過，今天來講講實際上你會最崩潰的第 4 點

今日目標

1. 將客戶發的 bug 做基礎分類

2. 引導客戶說出 bug 發生原因及提出解決方案的小技巧

3. 重現客戶發生的 bug

4. 改寫程式讓新的爬蟲資料塞入正確位置

4.1 取得 Google Sheets 第一欄的粉專名稱：readTitle

4.2 讓新的爬蟲資料正確寫入 Google Sheets：writeSheet

1. 將客戶發的 bug 做基礎分類

與你合作的客戶通常不是資工相關背景，他們所提出來的 bug 有時也會讓你啼笑皆非，我個人會將他們提出的 bug 分成 3 種

明顯的 bug：客戶一報 bug 你就知道哪個環節出問題了，就認命地解決吧 (ex：臉書的爬蟲登入後就卡住不動了)
需要討論的 bug：客戶報 bug 時你不確定是哪個環節出了問題，需要與客戶討論發生 bug 的操作流程
不合理的 bug：明顯不合理的要求你可以委婉的跟他說為什麼辦不到 (ex：程式執行到一半把電腦關機問你爬蟲資料為什麼沒有寫入 Google Sheets)

2. 引導客戶說出 bug 發生原因及提出解決方案的小技巧

很多時候客戶對於 bug 的陳述是很模糊的，所以你需要與客戶溝通，引導他們說出自己的操作流程，以今天發出的 bug 做舉例：

客戶：今天爬蟲資料寫入 Google Sheets 表單時塞錯位置了！

我：請問這個問題是今天突然發生的，還是過去幾天也發生過通樣的問題呢？ (釐清 bug 發生的時間點)

客戶：是今天才發生的

我：那今天你在跑爬蟲前有做過什麼調整嗎？ (確認是什麼樣的操作導致 bug)

客戶：我在爬蟲的json 檔裡面新增了幾個粉專，然後把 Google Sheets 上面一些沒有在維護的粉專給砍掉

我：了解，我這邊會先重複一遍您的操作來釐清問題，最晚會在兩天後給您答覆 (自己操作一遍確認有這個bug)

===我是正在重現bug的分隔線===

我：我依照您的方式操作確實遇到這個問題；這邊我提出一個解決方案，這個方案會將你新增的爬蟲粉專寫入 Google Sheets 表單的最下面，不管你爬蟲json 如何調整，追蹤人數都會填入 Google Sheets 的正確位置，詳細邏輯你可以參考下方說明 (自己提出解決方案，千萬別讓客戶天馬行空亂提)

導致錯誤發生的操作：
1. 人工整理 Google Sheets粉專名稱的欄位：刪除、上下置換
2. 調整爬蟲json 內容：新增/刪除/上下置換

解決錯誤的方式：
1. 粉專名稱：寫入前將 Google Sheets 上粉專名稱的欄位與爬蟲json 比對，如果 爬蟲json 裡面有新的粉專就會新增到最下面，不改變 Google Sheets 上粉專名稱原有排列順序
2. 追蹤人數：以 粉專名稱+粉專網址作為寫入追蹤人數欄位的判斷

客戶：好的先這樣做吧，你什麼時候能改好？

我：預計三個工作天，如果提早完成會儘早與您聯繫 (說一個你絕對能完成功能的時間，並表達積極性)

3. 重現客戶發生的 bug

這個步驟非常重要，如果 bug 無法在自己的環境重現時你會超級頭大，因為站在客戶的角度就是認為你沒有完成專案，這會導致你結案的日子變得遙遙無期…

今天問題重現起來非常簡單，跟著客戶的說的方式做就好：調整爬蟲json 及 Google sheet

我們這裡用 fb.json 為例，將麻糬爸愛亂畫刪除，然後把寶寶不說移到第二個

[

    {
        "title": "鹿尼",
        "url": "https://www.facebook.com/%E9%B9%BF%E5%B0%BC-260670294340690/"
    },
    {
        "title": "寶寶不說",
        "url": "https://www.facebook.com/baobaonevertell/"
    },
    {
        "title": "好想兔",
        "url": "https://www.facebook.com/chien760608/"
    },
    {
        "title": "ㄇㄚˊ幾兔",
        "url": "https://www.facebook.com/machiko324/"
    }
]

執行程式 yarn start 後你就會發現excel的表格亂掉了

4. 改寫程式讓新的爬蟲資料塞入正確位置

4.1 取得 Google Sheets 第一欄的粉專名稱：`readTitle`

當這個 sheet 全新的時候內容是 undefine，但是因為我們等等再做對比時用的格式為 array，所以要給他一個初始型別

async function readTitle (title, auth) {
    const sheets = google.sheets({ version: 'v4', auth });
    const request = {
        spreadsheetId: process.env.SPREADSHEET_ID,
        ranges: [
            `'${title}'!A:A`
        ],
        valueRenderOption: "FORMULA"
    }
    try {
        let title_array = []
        let values = (await sheets.spreadsheets.values.batchGet(request)).
            data.valueRanges[0].values;
        if (values) {//如果沒資料values會是undefine，所以我們只在有資料時塞入
            title_array = values.map(value => value[0]);
        }
        // console.log(title_array)
        return title_array
    } catch (err) {
        console.error(err);
    }
}

4.2 讓新的爬蟲資料正確寫入 Google Sheets：`writeSheet`

我們依照客戶接受的解決方案來調整這隻函式

將爬蟲json 中新增的粉專補到 Google Sheets 最後面
追蹤人數用粉專名稱+粉專網址來塞入對應的位置

async function writeSheet (title, result_array, auth) {
  // 取得線上第一欄的粉專名稱
  let online_title_array = await readTitle(title, auth)
  // 如果json檔有新增的粉專就補到最後面
  result_array.forEach(fanpage => {
    if (!online_title_array.includes(`=HYPERLINK("${fanpage.url}","${fanpage.title}")`)) {
      online_title_array.push(`=HYPERLINK("${fanpage.url}","${fanpage.title}")`)
    }
  });

  // "粉專名稱+粉專網址"作為寫入追蹤人數欄位的判斷
  let trace_array = []
  online_title_array.forEach(title => {
    let fanpage = result_array.find(fanpage => `=HYPERLINK("${fanpage.url}","${fanpage.title}")` == title)
    if (fanpage) {
      trace_array.push([fanpage.trace])
    } else {
      trace_array.push([])
    }
  });

  const datetime = new Date()
  if (online_title_array[0] !== title) {//如果是全新的sheet就會在開頭插入
    online_title_array.unshift(title)
    trace_array.unshift([dateFormat(datetime, "GMT:yyyy/mm/dd")])
  } else {//如果不是全新就取代
    trace_array[0] = [dateFormat(datetime, "GMT:yyyy/mm/dd")]
  }

  await writeTitle(title, online_title_array.map(title => [title]), auth)
  let lastCol = await getLastCol(title, auth)
  await writeTrace(title, trace_array, lastCol, auth)
}

執行程式

本次目標需多次執行程式你才能確保程式運作正確

依照自己的想法去編修線上的 Google Sheets、調整爬蟲json 內容
在專案資料夾的終端機(Terminal)執行指令
```
yarn start
```
在爬蟲跑完後看看線上的 Google Sheets 是否有依照你的更改寫入正確位置

下圖是我多次修改 fb.json 後執行爬蟲的結果

ℹ️ 專案原始碼

今天的完整程式碼可以在這裡找到喔
我也貼心地把昨天的把昨天的程式碼打包成壓縮檔，你可以用裡面乾淨的環境來解決客戶回報的bug喔
- 請記得在終端機下指令 yarn 才會把之前的套件安裝
- windows需下載與你chrome版本相同的chrome driver放在專案根目錄
- 要在tools/google_sheets資料夾放上自己的憑證，申請流程請參考Day17
- 調整fanspages資料夾內目標爬蟲的粉專網址
- 調整.env檔
  - 填上FB登入資訊
  - 填上FB版本(classic/new)
  - 填上IG登入資訊
  - 填上SPREADSHEET_ID

在許多人的幫助下，本系列文章已出版成書，並添加了新的篇章與細節補充：

加入更多實務經驗，用完整的開發流程讓讀者了解專案每個階段要注意的事項

將爬蟲的步驟與技巧做更詳細的說明，讓讀者可以輕鬆入門

調整專案架構

優化爬蟲程式，以更廣的視角來擷取網頁資訊

增加資料驗證、錯誤通知等功能，讓爬蟲執行遇到問題時可以第一時間通知使用者

排程部分改用 node-schedule & pm2 的組合，讓讀者可以輕鬆管理專案程序並獲得更精確的 log 資訊

有興趣的朋友可以到天瓏書局選購，感謝大家的支持。

購書連結：https://www.tenlong.com.tw/products/9789864348008

【Day20】Google Sheets - 寫入爬蟲資料，跟 Copy & Paste 的日子說掰掰

林鼎淵 — Mon, 05 Oct 2020 09:01:38 +0800

爬蟲是一個技術，他將網頁的數據收集下來

Google Sheets 是一個容器，他可以儲存資料並將資料以不同面向做展示

爬蟲Ｘ Google Sheets ＝你要學習的技術整合

今日目標

1. 改寫`crawlerIG、crawler`這兩隻函式，讓他們依照我們想要格式回傳爬蟲資料

1.1 分析 Google Sheets 上要呈現的資料、寫入時可能遇到的問題

1.2 組合回傳的資訊：以 crawlerFB 為範例

2. 以主程式當橋樑，將爬蟲資料傳遞到`updateGoogleSheets`

2.1 用主程式傳遞爬蟲資料

2.2 改寫 updateGoogleSheets 函式來接收並處理爬蟲資料

3. 將 FB、IG粉專爬蟲資料寫入各自的 Sheet

3.1 分析寫入 Google Sheets 的步驟：writeSheet

3.2 在官方文件尋找 寫入Sheet 的範例

3.3 第一欄寫入 title(粉專名稱)：writeTitle

3.4 取得 Sheet 最後一欄的空白欄位：getLastCol

3.5 將 trace(追蹤人數)資訊寫入最後一欄：writeTrace

1. 改寫`crawlerIG、crawler`這兩隻函式，讓他們依照我們想要格式回傳爬蟲資料

過去我們只將 FB粉專、IG粉專的資訊用 console.log 輸出，現在我們要把這些資料有結構的存入 json 物件方便後續使用

1.1 分析 Google Sheets 上要呈現的資料、寫入時可能遇到的問題

Google Sheets 呈現的資料：
1. 粉專名稱
2. 追蹤人數
3. 追蹤日期
可能會遇到的問題：
1. 重複名稱的粉專
  - 解決方案：粉專名稱有可能重名，但是粉專網址是唯一值，所以使用粉專名稱+粉專網址作為key就能解決這個問題，同時也方便使用者可以點擊連結直接前往粉專
總結：
1. 因為追蹤的 FB、IG粉專數量很多，所以 crawlerFB、crawlerIG 這兩個函式回傳的最外層用陣列(array)包起來
2. 根據 Google Sheets 所需的資料，每個粉專的物件(object)需要有以下內容：
  1. 粉專名稱(title)
  2. 粉專網址(url)
  3. 追蹤人數(trace)

1.2 組合回傳的資訊：以 `crawlerFB` 為範例

在 try-catch 的後面加上 finally，在 finally 階段才把粉專物件存入 result_array 是因為無論這個粉專爬蟲成功或是失敗我們都要記錄他的數據

finally 代表在 try-catch 結束後會執行的任務，忘記的可以回到Day14 try-catch-finally 基礎語法說明複習喔
在 FB粉專爬蟲完成後，回傳儲存所有粉專資訊的 result_array 讓主程式做資料串接

async function crawlerFB (driver) {
    const isLogin = await loginFacebook(driver)
    if (isLogin) {
        console.log(`FB開始爬蟲`)
        let result_array = []
        for (fanpage of fanpage_array) {
            let trace = null
            try {
                const isGoFansPage = await goFansPage(driver, fanpage.url)
                if (isGoFansPage) {
                    await driver.sleep((Math.floor(Math.random() * 4) + 3) * 1000)
                    trace = await getTrace(driver, By, until)
                }
                if (trace === null) {
                    console.log(`${fanpage.title}無法抓取追蹤人數`)
                } else {
                    console.log(`${fanpage.title}追蹤人數：${trace}`)
                }
            } catch (e) {
                console.error(e);
                continue;
            } finally {// 將粉專的資訊塞入物件
                result_array.push({
                    url: fanpage.url,
                    title: fanpage.title,
                    trace: trace
                })
            }
        }
        // 回傳FB粉專爬蟲資料
        return result_array
    }
}

2. 以主程式當橋樑，將爬蟲資料傳遞到`updateGoogleSheets`

2.1 用`主程式`傳遞爬蟲資料

主程式將 crawlerIG、crawlerFB 回傳的爬蟲資訊提供給 updateGoogleSheets 當參數

async function crawler () {
    const driver = await initDrive();
    if (!driver) {
        return
    }
    //取得回傳的爬蟲資料
    const ig_result_array = await crawlerIG(driver)
    const fb_result_array = await crawlerFB(driver)
    driver.quit();
    //將回傳的爬蟲資料傳遞給Google Sheets處理
    await updateGoogleSheets(ig_result_array, fb_result_array)
}

2.2 改寫 `updateGoogleSheets` 函式來接收並處理爬蟲資料

接受爬蟲回傳的資料：ig_result_array, fb_result_array
新增函式 writeSheet 將收到的爬蟲資料寫入對應的 Sheet
最後印出 Google Sheets 的網址方便查看

async function updateGoogleSheets (ig_result_array, fb_result_array) {
    try {
        const auth = await getAuth()
        let sheets = await getFBIGSheet(auth)
        console.log('FB、IG Sheet資訊:')
        console.log(sheets)

        // 將爬蟲資料寫入各自的Sheet
        await writeSheet('FB粉專', fb_result_array, auth)
        await writeSheet('IG帳號', ig_result_array, auth)
        console.log(`成功更新Google Sheets：https://docs.google.com/spreadsheets/d/${process.env.SPREADSHEET_ID}`);
    } catch (err) {
        console.error('更新Google Sheets失敗');
        console.error(err);
    }
}

3. 將FB、IG粉專爬蟲資料寫入各自的Sheet

3.1 分析寫入 Google Sheets 的步驟：`writeSheet`

目標：希望寫入的 Google Sheets 長得像下圖：

我們先將想要完成的功能羅列出來，再一個個去實現：

第一欄為 粉專名稱+粉專網址 組合的 HYPERLINK，每次執行爬蟲時我們會用 writeTitle 這個函式來更新第一欄的資料
因為希望新的爬蟲紀錄會寫入到下一欄，所以我們寫一個函式 getLastCol 來取得 Sheet 最後一欄的空白欄位
取得目標寫入欄位後，我們用函式 writeTrace 把爬蟲下來的追蹤人數寫入就完成嚕

實作：將上述要完成的功能各自撰寫成函式後，由 writeSheet 這個函式來管理寫入 Google Sheets 的步驟

async function writeSheet (title, result_array, auth) {
    // title可以直接超連結到粉專
    let title_array = result_array.map(fanpage => [`=HYPERLINK("${fanpage.url}","${fanpage.title}")`]);
    // 開頭填入填上FB粉專/IG帳號
    title_array.unshift([title])//unshift是指插入陣列開頭
    // 在第一欄寫入title(粉專名稱)
    await writeTitle(title, title_array, auth)

    // 取得目前最後一欄
    let lastCol = await getLastCol(title, auth)

    
    let trace_array = result_array.map(fanpage => [fanpage.trace]);
    // 抓取當天日期
    const datetime = new Date()
    trace_array.unshift([dateFormat(datetime, "GMT:yyyy/mm/dd")])
    // 再寫入trace(追蹤人數)
    await writeTrace(title, trace_array, lastCol, auth)
}

3.2 在官方文件尋找 `寫入Sheet` 的範例

有了昨天的經驗我們可以很容易找到今天所需的資源，在範例首頁的大標題Basic Writing就符合今天的需求
在閱讀 Basic Writing 描述時有兩個標題吸引我的注意
- Append Values：在閱讀標題時我原本覺得是最好的選擇，但發現他只能插入列(row)，與我們插入欄(col)的需求不符
- Write a single range：在開頭便提供了一個連結，並說這個方法能寫入指定 Sheet 範圍內的資料

接著你可以用Try this API來確認 Method: spreadsheets.values.update 是否能正確更新 Sheet 的內容，相關操作方式昨天的文章有示範，這裡就不再贅述了，下面我把官方範例翻譯了一下，讓大家更清楚使用的方法

let title = '你的sheet title'
//Google Sheets能吃的array格式範例
let array = [['test1'],['test2'],['test3'],['test4']]
async function writeSheet (title, array, auth) {//auth為憑證通過後取得
  const sheets = google.sheets({ version: 'v4', auth });
  const request = {
    spreadsheetId: process.env.SPREADSHEET_ID,
    valueInputOption: "USER_ENTERED",//寫入格式的分類有：INPUT_VALUE_OPTION_UNSPECIFIED|RAW|USER_ENTERED
    range: [
      `'${title}'!A:A`//title是sheet的標題，A:A是能寫入的範圍
    ],
    resource: {
      values: array
    }
  }
  try {
    await sheets.spreadsheets.values.update(request);//執行後即完成Google Sheets更新
    console.log(`updated ${title} title`);
  } catch (err) {
    console.error(err);
  }
}

3.3 第一欄寫入 title(粉專名稱)：`writeTitle`

async function writeTitle (title, title_array, auth) {
    const sheets = google.sheets({ version: 'v4', auth });
    const request = {
        spreadsheetId: process.env.SPREADSHEET_ID,
        valueInputOption: "USER_ENTERED",
        range: [
        `'${title}'!A:A` // 這是寫入第一欄的意思
        ],
        resource: {
        values: title_array
        }
    }
    try {
        await sheets.spreadsheets.values.update(request);
        console.log(`updated ${title} title`);
    } catch (err) {
        console.error(err);
    }
}

3.4 取得 Sheet 最後一欄的空白欄位：`getLastCol`

在這個函式中我們取得 Sheet 的第一列來做分析，詳細的文件請參考官方說明
同時我們也需要用函式 toColumnName 把取得的欄位名稱轉換為英文，這樣 Google Sheets 才知道要寫入的欄位

async function getLastCol (title, auth) {
    const sheets = google.sheets({ version: 'v4', auth });
    const request = {
        spreadsheetId: process.env.SPREADSHEET_ID,
        ranges: [
        `'${title}'!A1:ZZ1`
        ],
        majorDimension: "COLUMNS",
    }
    try {
        let values = (await sheets.spreadsheets.values.batchGet(request)).data.valueRanges[0].values;
        // console.log(title + " StartCol: " + toColumnName(values.length + 1))
        return toColumnName(values.length + 1)
    } catch (err) {
        console.error(err);
    }
}

function toColumnName (num) {//Google Sheets無法辨認數字欄位，需轉為英文才能使用
    for (var ret = '', a = 1, b = 26; (num -= a) >= 0; a = b, b *= 26) {
        ret = String.fromCharCode(parseInt((num % b) / a) + 65) + ret;
    }
    return ret;
}

3.5 將 trace(追蹤人數)資訊寫入最後一欄：`writeTrace`

async function writeTrace (title, trace_array, lastCol, auth) {
    const sheets = google.sheets({ version: 'v4', auth });
    const request = {
        spreadsheetId: process.env.SPREADSHEET_ID,
        valueInputOption: "USER_ENTERED",
        range: [
        `'${title}'!${lastCol}:${lastCol}`//將追蹤人數填入最後一欄
        ],
        resource: {
        values: trace_array
        }
    }
    try {
        await sheets.spreadsheets.values.update(request);
        console.log(`updated ${title} trace`);
    } catch (err) {
        console.error(err);
    }
}

執行程式

在專案資料夾的終端機(Terminal)執行指令
```
yarn start
```
確認執行過程中爬蟲資料抓取正常且更新 Google sheets 時沒有錯誤
點進去連結看看線上的 Google Sheets 是不是也被成功寫入惹～

目前為止將爬蟲寫入 Google Sheets 的動作已經完成了，大家可以思考一下還有什麼東西是我們忽略的呢？有什麼狀況會造成錯誤？希望大家在下方提供自己的想法喔～

ℹ️ 專案原始碼

今天的完整程式碼可以在這裡找到喔
我也貼心地把昨天的把昨天的程式碼打包成壓縮檔，你可以用裡面乾淨的環境來實作今天Google Sheets的爬蟲資料寫入喔
- 請記得在終端機下指令 yarn 才會把之前的套件安裝
- windows需下載與你chrome版本相同的chrome driver放在專案根目錄
- 要在tools/google_sheets資料夾放上自己的憑證，申請流程請參考Day17
- 調整fanspages資料夾內目標爬蟲的粉專網址
- 調整.env檔
  - 填上FB登入資訊
  - 填上FB版本(classic/new)
  - 填上IG登入資訊
  - 填上SPREADSHEET_ID

在許多人的幫助下，本系列文章已出版成書，並添加了新的篇章與細節補充：

加入更多實務經驗，用完整的開發流程讓讀者了解專案每個階段要注意的事項

將爬蟲的步驟與技巧做更詳細的說明，讓讀者可以輕鬆入門

調整專案架構

優化爬蟲程式，以更廣的視角來擷取網頁資訊

增加資料驗證、錯誤通知等功能，讓爬蟲執行遇到問題時可以第一時間通知使用者

排程部分改用 node-schedule & pm2 的組合，讓讀者可以輕鬆管理專案程序並獲得更精確的 log 資訊

有興趣的朋友可以到天瓏書局選購，感謝大家的支持。

購書連結：https://www.tenlong.com.tw/products/9789864348008

【Day19】Google Sheets - 你在文件迷路了嗎？用兩個處理Sheet的範例帶你攻略官方文件

林鼎淵 — Sun, 04 Oct 2020 09:23:48 +0800

如果說爬蟲是在鍛鍊你分析網頁的能力，那麼 Google Sheets 就是在教你閱讀官方文件的技巧

爬蟲資料如何自動化的塞入Google Sheets?

接下來幾天的目標是將之前的爬蟲資料放入 Google Sheets，實踐上會分成幾個步驟：

取得放 FB、IG爬蟲資料的 Sheet 資訊(今日目標)
將 FB、IG爬蟲資料寫入各自的 Sheet Day20
插入新的爬蟲資料前先分析粉專欄位，再將資料放入正確的位置 Day21
將新的爬蟲資料改為插入第二欄，日期由近而遠排列 Day22
調整 Google Sheets 的外觀，讓他閱讀起來更友善 Day23

筆者有話先說

使用 Google api 時你要煩惱的不是沒有功能，而是你找不到功能在哪裡，因為這份 api 文件實在是太龐大了，對新手來說非常容易在文件中迷路…

所以今天的文章重點在如何從官方文件找出需要的資源，希望能幫助到剛接觸巨型文件的朋友們

今日目標

1. 讀取 Google Sheets 內的 Sheet 資訊

1.1 在官方文件尋找 讀取Sheet 的範例

1.2 調整範例以符合專案需求：getSheets

2. 取得 FB粉專、IG帳號的 Sheet 資訊：`getFBIGSheet`

3. 建立放 FB粉專、IG帳號爬蟲資料的 Sheet

3.1 在官方文件尋找 新增Sheet 的範例

3.2 調整範例以符合專案需求：addSheets

4. 重新架構 Google Sheets 程式

4.1 建立外部函式模組：updateGoogleSheets

4.2 將取得 auth(認證)的步驟改寫為函式：getAuth

5. 讓主程式呼叫外部函式：`updateGoogleSheets`

1. 讀取 Google Sheets 內的 Sheet 資訊

建議你所需要的功能都先從有範例的文件找起，因為沒範例的文件你還要自己瞎猜程式結構

1.1 在官方文件尋找 `讀取Sheet` 的範例

進入官方文件範例首頁後先觀察大標題的描述（可用關鍵字 sheet 搜尋來輔助）

標題 Sheet Operations 的描述上比較符合我們需求，因為我們要找出 spreadsheet 底下的 sheet 資訊
進入Sheet Operations頁面後一樣先從標題下手

標題 Determine sheet ID and other properties 跟 sheet 的詳細資訊有關
看Determine sheet ID and other properties的描述

第一段給了一個連結，並說這個方法能取得特定 spreadsheet 底下 sheet 的屬性
接下來要確認 spreadsheets.get 這個方法是否真的符合我們的需求
1. 首先我們看到 Google 非常貼心提供線上測試 api 的地方
2. 進入測試 api 全螢幕模式後，填寫自己的 spreadsheetId、憑證權限接著按下 EXCUTE 即可在右下角看到 api 的回傳資訊
3. 打開自己的 Google Sheets 來與 api 的回傳資訊做對照
  - 從回傳的 json 我們就能知道所需的資訊被放在 sheets 這個陣列中，並且可用 sheets[].properties.title 這個參數判斷 ‘FB粉專’、‘IG帳號’ 的 Sheet 是否已經建立
確認這個 api 能取得我們所需要的資訊後，我們便可參考官方提供的範例程式開始實作啦

1.2 調整範例以符合專案需求：`getSheets`

這個函式的目標是取得指定 spreadsheetId 下 sheets 資訊，根據上面 api 回傳的 json 結構分析，我們所需要的資料就在response.sheets裡面

async function getSheets (auth) {//取得Google Sheets所有的sheet
    const sheets = google.sheets({ version: 'v4', auth });
    const request = {
        spreadsheetId: process.env.SPREADSHEET_ID,
        includeGridData: false,
    }
    try {
        let response = (await sheets.spreadsheets.get(request)).data;
        const sheets_info = response.sheets
        return sheets_info
    } catch (err) {
        console.error(err);
    }
}

2. 取得 FB粉專、IG帳號的 Sheet 資訊：`getFBIGSheet`

這隻函式是今天功能的核心，我們將取得 FB粉專、IG帳號的 sheet 資訊分成幾個步驟

先取得線上的 sheets：getSheets
判斷 ‘FB粉專’、‘IG帳號’ 是否在getSheets回傳的資料裡面
- 存在就將 sheetId 資訊儲存
- 不存在就用函式新增一個 Sheet：addSheet
回傳更新後的 sheets 資訊

async function getFBIGSheet (auth) {// 取得FB粉專、IG帳號的Sheet資訊
    const sheets = [//我們Google Sheets需要的sheet
        { title: 'FB粉專', id: null },
        { title: 'IG帳號', id: null }
    ]
    const online_sheets = await getSheets(auth)//抓目前存在的sheet

    for (sheet of sheets) {
        online_sheets.forEach(online_sheet => {
            if (sheet.title == online_sheet.properties.title) {
                // 如果線上已經存在相同的sheet title就直接使用相同id
                sheet.id = online_sheet.properties.sheetId
            }
        })
        if (sheet.id == null) {//如果該sheet尚未被建立，則建立
            console.log(sheet.title + ':not exsit')
            try {
                sheet.id = await addSheet(sheet.title, auth)        
            } catch (e) {
                console.error(e)
            }
        }
    }
    return sheets;
}

3. 建立放 FB粉專、IG帳號爬蟲資料的 Sheet

3.1 在官方文件尋找 `新增Sheet` 的範例

由讀取Sheet的經驗可以知道想要操作 Sheet 就要在Sheet Operations這個頁面尋找資源

標題 Add a sheet 超級直觀，就是他惹！
看Add a sheet的描述
- 第一段提供一個連結，並說這方法能新增 sheet 到 spreadsheet
- 下方提供了 request 的範例，讓我們能大概了解新增 Sheet 可以調整哪些參數
接著來確認Method: spreadsheets.batchUpdate是否符合需求
1. 打開 Try this API(在最下方)，Request body 請依下圖設定，title 的內容可以自行調整
2. 按下 EXCUTE 按鈕後，確認自己的 Google Sheets真的成功新增一個 title 為 test1 的 Sheet
3. 從回傳資料中找出 sheetId 的位置：replies[0].addSheet.properties.sheetId
確認這個 api 能新增 Sheet 後，我們便可參考官方提供的範例程式開始實作啦

3.2 調整範例以符合專案需求：`addSheets`

這個函式的目標是用提供的 title 建立一個新 Sheet，Google Sheets 在新增一個 Sheet 時會自動產生一個不重複的 sheetId，我們將 sheetId 回傳代表我們新增成功(sheetId 在後面的章節會使用到)

async function addSheet (title, auth) {//新增一個sheet到指定的Google Sheets
    const sheets = google.sheets({ version: 'v4', auth });
    const request = {
        // The ID of the spreadsheet
        "spreadsheetId": process.env.SPREADSHEET_ID,
        "resource": {
            "requests": [{
                "addSheet": {//這個request的任務是addSheet
                // 你想給這個sheet的屬性
                "properties": {
                    "title": title
                }
                },
            }]
        }
    };
    try {
        const response = (await sheets.spreadsheets.batchUpdate(request)).data;
        const sheetId = response.replies[0].addSheet.properties.sheetId
        console.log('added sheet:' + title)
        return sheetId
    }
    catch (err) {
        console.log('The API returned an error: ' + err);
    }
}

4. 重新架構 Google Sheets 程式

4.1 建立外部函式模組：`updateGoogleSheets`

別忘記我們學習 Google Sheets 是為了寫入爬蟲的資料，所以要建立一個給主程式用來更新 Google Sheets 的外部函式模組，這個函式今天有兩個任務：

取得 Google Sheets 授權：getAuth
取得 FB粉專、IG帳號的 sheet 資訊：getFBIGSheet

//讓其他程式在引入時可以使用這個函式
exports.updateGoogleSheets = updateGoogleSheets;
async function updateGoogleSheets () {
    try {
        const auth = await getAuth()
        let sheets = await getFBIGSheet(auth)//取得線上FB、IG的sheet資訊
        console.log(sheets)
    } catch (err) {
        console.error('更新Google Sheets失敗');
        console.error(err);
    }
}

4.2 將取得 auth(認證)的步驟改寫為函式：`getAuth`

考慮到 Google Sheets 的 api 都需要通過憑證取得授權才能操作，所以我把這個步驟獨立成一個函式，由於取得授權這塊採用 callback 的函式，所以我們要用 Promise 的方式來處理。

function getAuth () {
    return new Promise((resolve, reject) => {
    try {
        const content = JSON.parse(fs.readFileSync('tools/google_sheets/credentials.json'))
        authorize(content, auth => {
            resolve(auth)
        })
    } catch (err) {
        console.error('憑證錯誤');
        reject(err)
    }
    })
}

5. 讓主程式呼叫外部函式：`updateGoogleSheets`

要爬蟲完成後才會把資料寫入 Google Sheet，所以將 updateGoogleSheets 這個函式放在最後執行

為了方便測試今天的功能先把爬蟲的功能暫時註解

index.js

require('dotenv').config(); //載入.env環境檔
const { initDrive } = require("./tools/initDrive.js");
const { crawlerFB } = require("./tools/crawlerFB.js");
const { crawlerIG } = require("./tools/crawlerIG.js");
const { updateGoogleSheets } = require("./tools/google_sheets");

async function crawler () {
    // const driver = await initDrive();
    // if (!driver) {//driver不存在就結束程式
    //     return
    // }
    // //因為有些人是用FB帳號登入IG，為了避免增加FB登出的動作，所以採取先對IG進行爬蟲
    // await crawlerIG(driver)
    // await crawlerFB(driver)
    // driver.quit();
    //處理Google Sheets相關動作
    await updateGoogleSheets()
}

crawler()

執行程式

在專案資料夾的終端機(Terminal)執行指令
```
yarn start
```
你會遇到如下的錯誤：

The API returned an error: Error: Insufficient Permission 的錯誤是因為 Google Sheets 權限不足(原本只有readonly)，所以我們要重新申請 token

刪除原本的 token.json

修改憑證的執行權限

// 原本的範本是有readonly，這樣只有讀取權限，將它拿掉後才擁有修改的權限
// const SCOPES = ['https://www.googleapis.com/auth/spreadsheets.readonly'];
const SCOPES = ['https://www.googleapis.com/auth/spreadsheets'];

在專案資料夾的終端機(Terminal)再次執行指令
```
yarn start
```
Google 會要求你再點一次連結重新取得授權碼，貼上後你會看到線上的 Google Sheets 成功新增 sheets 了
如果你重複執行指令 yarn start ，只會回傳建立好的 sheetId 給你，不會再重新建立

ℹ️ 專案原始碼

今天的完整程式碼可以在這裡找到喔
我也貼心地把昨天的把昨天的程式碼打包成壓縮檔，你可以用裡面乾淨的環境來實作今天Google Sheets的Sheet處理喔
- 請記得在終端機下指令 yarn 才會把之前的套件安裝
- 要在tools/google_sheets資料夾放上自己的憑證，申請流程請參考Day17
- 調整你.env檔填上SPREADSHEET_ID

參考資源

callback、Promise 和 async/await 那些事兒

在許多人的幫助下，本系列文章已出版成書，並添加了新的篇章與細節補充：

加入更多實務經驗，用完整的開發流程讓讀者了解專案每個階段要注意的事項

將爬蟲的步驟與技巧做更詳細的說明，讓讀者可以輕鬆入門

調整專案架構

優化爬蟲程式，以更廣的視角來擷取網頁資訊

增加資料驗證、錯誤通知等功能，讓爬蟲執行遇到問題時可以第一時間通知使用者

排程部分改用 node-schedule & pm2 的組合，讓讀者可以輕鬆管理專案程序並獲得更精確的 log 資訊

有興趣的朋友可以到天瓏書局選購，感謝大家的支持。

購書連結：https://www.tenlong.com.tw/products/9789864348008

【Day18】Google Sheets - 加入版控後被github警告了，官方範例做了什麼？

林鼎淵 — Sat, 03 Oct 2020 09:08:54 +0800

盡信書不如無書

你知道官方範例在做什麼事情嗎?

在跟著官方步驟完成後，這些也是我們要注意的事情

我們安裝了什麼套件?
- 如果你有用 github 版控在做這份專案，你應該會收到 github 給你的警告通知，今天會說明如何閱讀這個通知並解決他
官方的範例程式在做什麼?
- 會教你如何觀察官方的範例程式，知道他運行的邏輯，學會改寫，拒絕只當 copycat

今日目標

1. 了解 github 警告通知的原因並處理

2. 改寫官方範例讀取自己指定的 Google Sheets

2.1 分析官方範例程式

2.2 取得自己的 spreadsheetId 並加入程式

2.3 撰寫函式 listMySheet 來讀取自己的 sheet

1. 了解 github 警告通知的原因並處理

昨天雖然我們按照官方給的範例完成了，但你把 code 上傳到 github 後應該會收到警告通知如下
1. 我們先點開 high severity(高嚴重性) 的通知，閱讀後發現這是相依套件版本過低造成的警告
2. 接著我們以 node-forge 為關鍵字在 yarn.lock 檔案裡面搜尋，發現真的版本過低
3. 同時發現這個套件是跟 google 有關聯性的，一路順藤摸瓜往上查會發現根源就是昨天安裝的 googleapis 這個套件
4. 來回顧一下昨天官方是指定我們安裝 39 這個版本的
5. 接著我們直接搜尋 googleapis npm 來看看套件的資訊，你就會發現最新的套件已經來到了 59 這個版本
官方建議安裝的套件版本跟最新的套件版本整整差了 20 個大版，雖然每次更新版本都會有 release note，但我相信會認真看的沒有幾個，所以這20個大版本改了多少功能也是我們所不清楚的，固定的版本可以給你穩定的功能，但是潛在的漏洞你無法知曉，所以如果在確認最新版本功能穩定的狀態下我會更新套件
1. 輸入指令安裝最新版本的 googleapis 套件
```
yarn add googleapis@59
```
2. 每次更新版本後記得執行程式確認有無異常
```
node tools/google_sheets/index.js
```
  - 可能遇到的的錯誤
  - 在 google 搜尋 googleapis export { default as v1 } from ‘./v1.js’; 就能找到問題是出在 node.js 版本上面，輸入指令安裝並套用新版本(請選用LTS版本)就能解決嚕
```
nvm install 12.19
nvm use 12.19
```

2. 改寫官方範例讀取自己指定的 Google Sheets

2.1 分析官方範例程式

以下說明建議你打開昨日的範例程式方便相互印證

首先要理解 Google 提供範例程式，理解程式最快的方式的就是從輸出結果的位置開始回推，所以我反推的順序會是：
1. 找到輸出結果 console.log() 的位置 → console.log(‘Name, Major:’);
2. 這個結果是在哪個 function 輸出的 → listMajors(auth)
3. 程式在哪裏呼叫 listMajors 這個 function → authorize(JSON.parse(content), listMajors)
4. 程式的根源：要先要取得憑證才能 authorize(授權) → fs.readFile(’tools/google_sheets/credentials.json’…)
根據上面的架構分析，我們先觀察輸出console.log()的函式： listMajors，裡面有兩個參數我們要特別注意：
1. spreadsheetId：你的Google Sheets id
2. range：你指定讀取的範圍
知道要處理的參數後我們就能開始改寫了，步驟：
1. 取得自己的 spreadsheetId 並加入程式
2. 撰寫函式：listMySheet 讀取自己的sheet

2.2 取得自己的 spreadsheetId 並加入程式

我們先觀察官方對 listMajors 這隻函式的註解

/**
 * Prints the names and majors of students in a sample spreadsheet:
* @see https://docs.google.com/spreadsheets/d/1BxiMVs0XRA5nFMdKvBdBZjgmUUqptlbs74OgvE2upms/edit
* @param {google.auth.OAuth2} auth The authenticated Google OAuth client.
*/

再觀察裡面 spreadsheetId 的參數
```
spreadsheetId: '1BxiMVs0XRA5nFMdKvBdBZjgmUUqptlbs74OgvE2upms'
```
就會發現 spreadsheetId 這個參數在範例網址中間：
docs.google.com/spreadsheets/d/ 1BxiMVs0XRA5nFMdKvBdBZjgmUUqptlbs74OgvE2upms /edit

我們建立好 Google Sheets 後把 spreadsheetId 替換成自己的(實際網頁位置如下圖紅框處)

spreadsheetId: process.env.SPREADSHEET_ID

因為 spreadsheetId 並不適合公開放到git上面(你應該不會想公布這份 Google Sheets 給全世界吧)，所以我們要把spreadsheetId 複製起來放到 .env 裡面設定為環境變數，以下是目前環境檔需要做的設定

.env.exmaple

#填寫自己登入IG的真實資訊(建議開小帳號來實驗，因為帳號使用太頻繁會被官方鎖住)
IG_USERNAME='ig username'
IG_PASSWORD='ig password'

#填寫自己登入FB的真實資訊(建議開小帳號來實驗，因為帳號使用太頻繁會被官方鎖住)
FB_USERNAME='fb username'
FB_PASSWORD='fb password'

#FB跑經典版還是新版(classic/new)
FB_VERSION='new'

#填寫你目標放入的spreadsheetId
SPREADSHEET_ID='your spreadsheetId'

2.3 撰寫函式 `listMySheet` 來讀取自己的 sheet

你可以由官方範例的Google Sheets 發現昨天程式印出來的是這個 Sheets 第一欄、第五欄 的值

看看官方範例是如何印出這兩欄的數值

console.log('Name, Major:');
// Print columns A and E, which correspond to indices 0 and 4.
rows.map((row) => {
    console.log(`${row[0]}, ${row[4]}`);
});

接下來我們把原本 Google 範例程式的 listMajors() 刪除，改寫成非同步函式listMySheet()

async function listMySheet (auth) {
    const sheets = google.sheets({ version: 'v4', auth });
    const title = '我的sheet'//請你更改成自己設定的sheet(工作表)名稱
    const request = {
        spreadsheetId: process.env.SPREADSHEET_ID,
        range: [
            //這是指抓取的範圍，你也可以改寫成A1:A300(抓第1欄的第1列到第300列)
            `'${title}'!A:ZZ`
        ],
        valueRenderOption: "FORMULA"//FORMATTED_VALUE|UNFORMATTED_VALUE|FORMULA
    }
    try {
        //這裡改寫為await，之後會有順序執行的需求
        let values = (await sheets.spreadsheets.values.get(request)).data.values;
        console.log(values)
    } catch (err) {
        console.error(err);
    }
}

valueRenderOption 這個參數是把資料抓出來時的類型，感興趣可參考Google官方文件

執行程式

先在自己的 Google Sheets 表格上隨機輸入文字
在專案資料夾的終端機(Terminal)執行指令
```
node tools/google_sheets/index.js
```
看看輸出的結果是否與你 Google Sheets 上的一致呢～

ℹ️ 專案原始碼

今天的完整程式碼可以在這裡找到喔
我也貼心地把昨天的把昨天的程式碼打包成壓縮檔，你可以用裡面乾淨的環境來改寫Google Sheets的範例喔
- 請記得在終端機下指令 yarn 才會把之前的套件安裝
- 要在tools/google_sheets資料夾放上自己的憑證，今天的程式才能執行喔，申請流程請參考Day17

在許多人的幫助下，本系列文章已出版成書，並添加了新的篇章與細節補充：

加入更多實務經驗，用完整的開發流程讓讀者了解專案每個階段要注意的事項

將爬蟲的步驟與技巧做更詳細的說明，讓讀者可以輕鬆入門

調整專案架構

優化爬蟲程式，以更廣的視角來擷取網頁資訊

增加資料驗證、錯誤通知等功能，讓爬蟲執行遇到問題時可以第一時間通知使用者

排程部分改用 node-schedule & pm2 的組合，讓讀者可以輕鬆管理專案程序並獲得更精確的 log 資訊

有興趣的朋友可以到天瓏書局選購，感謝大家的支持。

購書連結：https://www.tenlong.com.tw/products/9789864348008

【Day17】Google Sheets - 免費儲存資料的好選擇，一起進入省錢起手式

林鼎淵 — Fri, 02 Oct 2020 09:14:06 +0800

專案最基本的就是：符合客戶預算與實際使用需求

為什麼選擇 Google Sheets 作為資料載體?

一般來說爬蟲的資料都是儲存到資料庫，但是我相信絕大多數的人不太可能隨時隨地打開資料庫觀看，而且存在資料庫除非你請網頁工程師幫你完成前端視覺化，不然直接看資料庫絕對會讓你懷疑人生XD

經過多方思慮我最後採用 Google Sheets 的服務，主要理由：

只要有網路我就能看
絕大多數人都有使用 Google Sheets 的經驗
使用者能輕易的將 Google Sheets 轉化成圖表
你不需要一台 Server 專門來存這些資料
免費

儘管 Google Sheets 並不完美，但他真的很適合用在這個專案上面

今日目標

取得 Google Sheets 憑證(credentials)
在專案加入官方提供的範例程式做測試
將 Google Sheets 的憑證、授權檔加入 .gitignore

1. 取得 Google Sheets 憑證(credentials)

如果把 Google Sheets 想像成一個藏寶庫，憑證(credentials)就像是一把鑰匙，只有擁有這把鑰匙的人才有打開門的資格；不然這個藏寶庫誰都能任意進出豈不是很危險？

憑證(credentials)取得的步驟

請先確認已經安裝過 Node.js & npm(跟著教學走的人都安裝過)，有 Goolge 帳號
進入 Google Sheet Node.js 申請憑證(credentials)的網頁
1. 按下紅框處按鈕 Enable theGoogle Sheets API
2. 輸入專案的名稱，建議填寫符合專案功能的命名
3. 本轉案選擇 Desktop app 即可
4. 千萬不要忘記下載這個憑證，下面的Client ID、Client Secret不需特別複製，都存在憑證檔裡面了
在專案的tools 資料夾下新增一個 google_sheets 資料夾，專門存放 Google Sheets 相關檔案
將下載好的憑證(credentials.json)放進去 google_sheets 資料夾，這樣的目錄節結構會方便我們日後管理

2. 在專案加入官方提供的範例程式做測試

在詳細的閱讀官方文件之前，我會先用官方的範例程式確認他能否在我的專案順利運作，如果遇到太多環境衝突才能儘早尋求替代方案

下載 googleapis 套件
```
yarn add googleapis@39
```

在 tools/google_sheets 資料夾中新增 index.js 檔案，並複製 Google 範例程式碼貼上

const fs = require('fs');
const readline = require('readline');
const { google } = require('googleapis');

// If modifying these scopes, delete token.json.
const SCOPES = ['https://www.googleapis.com/auth/spreadsheets.readonly'];
// The file token.json stores the user's access and refresh tokens, and is
// created automatically when the authorization flow completes for the first
// time.
const TOKEN_PATH = 'tools/google_sheets/token.json';

// Load client secrets from a local file.
fs.readFile('credentials.json', (err, content) => {
if (err) return console.log('Error loading client secret file:', err);
// Authorize a client with credentials, then call the Google Sheets API.
authorize(JSON.parse(content), listMajors);
});

/**
* Create an OAuth2 client with the given credentials, and then execute the
* given callback function.
* @param {Object} credentials The authorization client credentials.
* @param {function} callback The callback to call with the authorized client.
*/
function authorize (credentials, callback) {
const { client_secret, client_id, redirect_uris } = credentials.installed;
const oAuth2Client = new google.auth.OAuth2(
    client_id, client_secret, redirect_uris[0]);

// Check if we have previously stored a token.
fs.readFile(TOKEN_PATH, (err, token) => {
    if (err) return getNewToken(oAuth2Client, callback);
    oAuth2Client.setCredentials(JSON.parse(token));
    callback(oAuth2Client);
});
}

/**
* Get and store new token after prompting for user authorization, and then
* execute the given callback with the authorized OAuth2 client.
* @param {google.auth.OAuth2} oAuth2Client The OAuth2 client to get token for.
* @param {getEventsCallback} callback The callback for the authorized client.
*/
function getNewToken (oAuth2Client, callback) {
const authUrl = oAuth2Client.generateAuthUrl({
    access_type: 'offline',
    scope: SCOPES,
});
console.log('Authorize this app by visiting this url:', authUrl);
const rl = readline.createInterface({
    input: process.stdin,
    output: process.stdout,
});
rl.question('Enter the code from that page here: ', (code) => {
    rl.close();
    oAuth2Client.getToken(code, (err, token) => {
    if (err) return console.error('Error while trying to retrieve access token', err);
    oAuth2Client.setCredentials(token);
    // Store the token to disk for later program executions
    fs.writeFile(TOKEN_PATH, JSON.stringify(token), (err) => {
        if (err) return console.error(err);
        console.log('Token stored to', TOKEN_PATH);
    });
    callback(oAuth2Client);
    });
});
}

/**
* Prints the names and majors of students in a sample spreadsheet:
* @see https://docs.google.com/spreadsheets/d/1BxiMVs0XRA5nFMdKvBdBZjgmUUqptlbs74OgvE2upms/edit
* @param {google.auth.OAuth2} auth The authenticated Google OAuth client.
*/
function listMajors (auth) {
const sheets = google.sheets({ version: 'v4', auth });
sheets.spreadsheets.values.get({
    spreadsheetId: '1BxiMVs0XRA5nFMdKvBdBZjgmUUqptlbs74OgvE2upms',
    range: 'Class Data!A2:E',
}, (err, res) => {
    if (err) return console.log('The API returned an error: ' + err);
    const rows = res.data.values;
    if (rows.length) {
    console.log('Name, Major:');
    // Print columns A and E, which correspond to indices 0 and 4.
    rows.map((row) => {
        console.log(`${row[0]}, ${row[4]}`);
    });
    } else {
    console.log('No data found.');
    }
});
}

在終端機(Terminal)執行指令，測試能否運行
```
node tools/google_sheets/index.js
```
1. 你應該會先遇到找不到 credentials.json 的錯誤
  
  請將範例程式中讀取 'credentials.json' 路徑修改成專案的路徑 'tools/google_sheets/credentials.json'
```
//fs.readFile('credentials.json', (err, content) => {
fs.readFile('tools/google_sheets/credentials.json', (err, content) => {
    if (err) return console.log('Error loading client secret file:', err);
    // Authorize a client with credentials, then call the Google Sheets API.
    authorize(JSON.parse(content), listMajors);
});
```
2. 再執行一次 node tools/google_sheets/index.js 時下面會有連結請你打開
3. 打開後的網頁會要你選擇登入的 Google 帳號，看到下面的網頁時別害怕，點擊 進階 然後再點擊 前往「Quickstart」(不安全)
4. 接著所有的授權都必須按 允許 ，最後你會看到一組授權碼，把他複製下來貼回終端機(Terminal)就完成惹
5. 如果終端機(Terminal)有輸出類似下面的資料時就代表你成功了
```
Name, Major:
Alexandra, English
Andrew, Math
Anna, English
Becky, Art
Benjamin, English
Carl, Art
Carrie, English
Dorothy, Math
...
```
6. 聰明的你會發現 專案根目錄下多了一個 token.json 的檔案，如果說 credentials.json 是打開藏寶庫的鑰匙，token.json 就像是能夠把裡面寶藏搬進搬出的權杖，而這個權杖是有期限的(expiry_date)，期限過了就需要再申請
  1. 為了方便管理我們把 token.json 搬移到 tools/google_sheets 的資料夾下
  2. 修改範例程式中讀取 token.json 的路徑
```
//const TOKEN_PATH = 'token.json';
const TOKEN_PATH = 'tools/google_sheets/token.json';
```

3. 將 Google Sheets 的憑證、授權檔加入 .gitignore

我想應該不會有人想把藏寶庫的鑰匙跟權杖公開讓大家使用吧？如果你不小心把 credentials.json、token.json 兩個檔案加入版控就等於把你 Google Sheets 的權限送給別人了，所以你要調整 .gitignore 如下：

node_modules
.env
chromedriver.exe
debug.log
credentials.json
token.json

不熟悉的朋友可以參考【Day7】gitignore-請勿上傳敏感、主程式以外的資料的文章

ℹ️ 專案原始碼

今天的完整程式碼可以在這裡找到喔
我也貼心地把昨天的把昨天的程式碼打包成壓縮檔，你可以用裡面乾淨的環境來實作今天Google Sheets的起手式喔
- 請記得在終端機下指令 yarn 才會把之前的套件安裝
- 要在tools/google_sheets資料夾放上自己的憑證，今天的程式才能執行喔

在許多人的幫助下，本系列文章已出版成書，並添加了新的篇章與細節補充：

加入更多實務經驗，用完整的開發流程讓讀者了解專案每個階段要注意的事項

將爬蟲的步驟與技巧做更詳細的說明，讓讀者可以輕鬆入門

調整專案架構

優化爬蟲程式，以更廣的視角來擷取網頁資訊

增加資料驗證、錯誤通知等功能，讓爬蟲執行遇到問題時可以第一時間通知使用者

排程部分改用 node-schedule & pm2 的組合，讓讀者可以輕鬆管理專案程序並獲得更精確的 log 資訊

有興趣的朋友可以到天瓏書局選購，感謝大家的支持。

購書連結：https://www.tenlong.com.tw/products/9789864348008

【Day16】不藏私，加上5行程式就能優化爬蟲的小技巧＆學會爬蟲，之後呢？

林鼎淵 — Thu, 01 Oct 2020 09:42:52 +0800

當技術為你的生活帶來便利，他才有存在的意義

為什麼寫這篇文章

如果你跟著這幾天的教學走還是遇到一些莫名其妙的問題，希望在今天的文章有得到你想要的解答
這幾天所教的技巧足以讓你爬下絕大多數的網頁資訊了，學習爬蟲只是一個過程，我們的目標是希望能靠這些數據給我們帶來便利，所以今天也分享一些思路給大家

今日目標

1. 優化爬蟲

1.1 優化分成哪些面向?

1.2 優化執行效率及穩定度

1.3 背景執行並減少記憶體的消耗

2. 學會爬蟲，之後呢？

1. 優化爬蟲

昨天我們已經完成爬蟲所需要的功能了，下一步要思考的是如何優化

1.1 優化分成哪些面向?

前面【Day13】refactor-重構程式碼，讓合作夥伴對你比讚在討論如何讓你在開發上更有效率，原則上不影響輸出的結果；而今天討論的優化是一個多面向的問題，我把他區分成顯性及隱性兩種：

顯性：使用者肉眼可見
- 改善使用者操作流程、介面
- 程式執行過程的畫面優化
隱性：使用者覺得自己的電腦變順了(不過他們通常不會聯想到是程式優化了)
- 更好地執行效率
- 使用更少的記憶體
- 執行的穩定性

優化是一條沒有盡頭的路，上面我只是提了幾個常見要注意的點而已，接下來我們就來實際優化現在的爬蟲吧～

1.2 優化執行效率及穩定度

遇到的問題
1. 在 driver.wait 加上等待時間後偶爾還是會出現登入失敗或是抓不到追蹤人數的問題
2. 在爬蟲的時候會影響到我看 youtube 的流暢程度
判斷造成的原因
1. 本身的網路速度太慢，造成網頁過了 driver.wait 的等待時間後依舊還沒完成載入
2. FB、IG 粉專都是充滿圖片的頁面，載入這些資源時消耗太多流量
優化的方式
因為本專案爬蟲所分析的內容都跟圖片無關，所以只要不載入這些資源就有以下好處：
1. 減少瀏覽器使用流量
2. 減少瀏覽器載入時間
想要知道如何不載入圖片，你可以在 Google 搜尋 selenium chrome參數 ，有很多熱心的大神已經幫你整理好常用的參數了
- 打開 initDrive.js 在 chrome 的 option 加入不載入圖片的參數
```
options.addArguments('blink-settings=imagesEnabled=false')//不加載圖片提高效率
```
  加上這段程式後，在專案資料夾的終端機(Terminal)執行指令 yarn start ，便可以很明顯的感受到網頁載入速度變快很多，並且所有圖片都沒有載入(下圖)

1.3 背景執行並減少記憶體的消耗

遇到的問題
1. 有時爬蟲執行到一半手賤點一下爬蟲瀏覽器導致程式拋出例外
2. 爬蟲執行時候的畫面一直閃好煩
3. 在記憶體 8G 的電腦執行爬蟲時覺得電腦變得很頓
判斷造成的原因
1. 人有時控制不住自己的手
2. 執行爬蟲時干擾到使用者的日常工作
3. chrome 吃太多記憶體
優化的方式
在爬蟲每個步驟及功能都穩定後，其實不需跳出瀏覽器視窗來觀察他的動作，讓瀏覽器在背景執行不但不會干擾使用者工作更能減少記憶體的浪費
- 打開 initDrive.js 並在 chrome 的 option 加入不打開瀏覽器視窗的參數如下
```
options.addArguments('--headless')//瀏覽器不提供頁面觀看，linux下如果系統是純文字介面不加這條會啓動失敗
options.addArguments('--log-level=3')//這個option可以讓你跟headless時網頁端的console.log說掰掰

//下面參數能提升爬蟲穩定性    
options.addArguments('--disable-dev-shm-usage')//使用共享內存RAM
options.addArguments('--disable-gpu')//規避部分chrome gpu bug
```
  設定完這些後，在專案資料夾的終端機(Terminal)執行指令 yarn start ，就會發現爬蟲變成背景執行，並且電腦順暢許多

2. 學會爬蟲，之後呢？

原本我打算用兩天的文章來教取得當日貼文數量的方法，但文章寫完後就刪掉了，因為讀者完全有能力用這幾天所教的技術自行實踐這項功能；我希望用這30天分享更多不同的技術及有幫助的觀念

授人以魚不如授人以漁

使用模擬瀏覽器來爬蟲我認為是最符合初學者的，你不用去分析複雜的 api，去猜裡面的參數是甚麼意義

你需要做的只是把你平常操作的流程用程式的方式來替你做一遍，然後抓取你所需要的資訊

我寫的文章只是爬蟲的技巧的冰山一角，但只要有了開頭以及研究的方向我相信你是有能力獨立完成其他網頁的爬蟲

現在人工智慧流行，大數據當道，爬蟲是取得大數據的方法之一，你能透過這些數據分析的東西太多了，我在這裡簡單舉例：

追蹤人數爆減/爆增
- 是因為某一篇貼文引起的嗎?
- 當天是否有媒體新聞的報導?
- 粉專經營者是否有特殊決策?
發文頻率與追蹤人數的關係
- 發文頻率是否與追蹤人數成長正相關
- 怎麼樣的發文頻率是最恰當的
- 不同行業的發文頻率比較
貼文按讚與回應
- 什麼樣的貼文會獲得最多迴響
- 獲得最多讚的貼文有什麼共同特徵

隨便舉的例子都能獨立出來都能成為一篇論文或是商品，爬蟲是一個很強的武器，但這把武器的強度要看使用者如何發揮他，我想會看這系列教學文章的讀者心中都有想要爬蟲的目標，開始動手實作吧！

再次提醒，技術沒有善惡，人的使用方式才會有善惡，希望這份技術可以幫大家節省時間以及避免重工；如果你把它拿來盜取智慧財產、個人檔案及機敏資訊請自行負擔後續法律責任

筆者碎碎念

我希望看完文章的讀者能夠吸收到問題思考的方式，不要只是單純的 copy & paste ，這樣對技術長期來講是在累積負債

如果你是程式的新手，你可以透過修改一些參數來看看結果會有什麼樣的變化，少加哪些參數是不是真的會有錯誤

不要害怕犯錯，因為學習程式的路上幾乎不存在一條完美的道路

你現在滿意的程式往往在幾個月後你會覺得當時怎麼寫的這麼爛

當你誕生出這個想法的時候就是成長了

⏭️ 下個階段

關於使用網頁爬蟲的技術文章就分享到今天，接下來我們要來研究爬蟲資料如何儲存，敬請期待

ℹ️ 專案原始碼

今天的完整程式碼可以在這裡找到喔
我也貼心地把昨天的把昨天的程式碼打包成壓縮檔，你可以用裡面乾淨的環境來實作今天json改寫的部分喔
- 請記得在終端機下指令 yarn 才會把之前的套件安裝
- windows需下載與你chrome版本相同的chrome driver放在專案根目錄
- 調整.env檔
  - 填上FB登入資訊
  - 填上FB版本(classic/new)
  - 填上IG登入資訊
- 調整fanspages資料夾內目標爬蟲的粉專網址

參考資源

selenium啓動Chrome的進階配置參數

免責聲明:文章技術僅抓取公開數據作爲研究，任何組織和個人不得以此技術盜取他人智慧財產、造成網站損害，否則一切后果由該組織或個人承擔。作者不承擔任何法律及連帶責任！

在許多人的幫助下，本系列文章已出版成書，並添加了新的篇章與細節補充：

加入更多實務經驗，用完整的開發流程讓讀者了解專案每個階段要注意的事項

將爬蟲的步驟與技巧做更詳細的說明，讓讀者可以輕鬆入門

調整專案架構

優化爬蟲程式，以更廣的視角來擷取網頁資訊

增加資料驗證、錯誤通知等功能，讓爬蟲執行遇到問題時可以第一時間通知使用者

排程部分改用 node-schedule & pm2 的組合，讓讀者可以輕鬆管理專案程序並獲得更精確的 log 資訊

有興趣的朋友可以到天瓏書局選購，感謝大家的支持。

購書連結：https://www.tenlong.com.tw/products/9789864348008

【Day15】json x 爬蟲 = 瑣事自動化，生命應該浪費在美好的事情上

林鼎淵 — Wed, 30 Sep 2020 08:51:22 +0800

即使客戶不懂程式，你也可以讓他學習一點工程師的知識

我們要請客戶將爬蟲的網址列表填寫到什麼檔案呢?

專案在需求規格中有一條是在自己的電腦執行，在分析完各種檔案格式的優缺點後我決定使用json格式：

txt
- 優點：在所有作業系統中都能夠打開做編輯
- 缺點：格式難以律定，只要使用者多個空格、表點符號…都容易造成程式的誤判
excel
- 優點：這是對使用者而言最友善的一種編輯器了，視覺化良好、操作友善
- 缺點：不是所有人電腦都有安裝 excel 編輯器(像我朋友就沒有)
json
- 優點：在所有作業系統中都能夠打開做編輯，key-value 的格式易於理解、程式可直接讀取
- 缺點：使用者需要花幾分鐘時間理解 json 格式的規則

今日目標

1. 了解 json 格式與基本規則，並建立 json 格式的粉專清單

1.1 json 格式與基本規則

1.2 在專案中建立 json 格式的粉專清單

2. 讓程式讀取 json 裡面的資料進行爬蟲

2.1 在專案引入 json 檔案

2.2 批量爬蟲程式撰寫

1. 了解 json 格式與基本規則，並建立一份 json 格式的粉專清單

今天說的這個部分應該是大部分小編最關心的，要每天手動瀏覽那麼多的粉專想想都很崩潰

所以要來跟大家介紹的一個很棒的文本格式：json (JavaScript Object Notation) ，他能幫助我們批量爬蟲，同時也是網頁 api 最常見的一種回傳格式

1.1 json格式與基本規則

json 可以包含 object (物件) 與 array (陣列)

物件

為 key-value 的格式，用{...}包起來

{ "key" : "value" }

{ "姓名" : "寶寶不說" } //通常用於描寫一項屬性的數值

多個物件使用 , 做為分隔

{ "key" : "value" , "key" : "value" }

{ "姓名" : "寶寶不說" , "性別" : "不明" } //多個物件可表達一個東西的多種屬性

陣列

多個 value 之間使用 , 分隔，用[...]包起來

[ value, value ]

// 陣列與物件裡面value可以使用多種資料型態如下
[ 0 , { "傳奇寶寶" : null } , "string" , false , ['test'] ]

1.2 在專案中建立json格式的粉專清單

建構邏輯：

我們有許多粉專需要去追蹤，所以最外層會用 陣列(array)

而每個粉專都有自己的屬性(title為粉專名稱、url為粉專網址)，所以陣列裡面的 value 採用 物件(object)

[
    {
        "title": "粉專A",
        "url": "粉專A連結"
    },
    {
        "title": "粉專B",
        "url": "粉專B連結"
    }  
]

在專案建立的步驟：

在專案資料夾中建立 fanspages 的資料夾，專門存放粉專頁面爬蟲要使用的json檔案
在 fanspages 資料夾中新增 ig.json、fb.json 這兩個檔案，並依照上述json結構填上你要爬蟲的資訊
你可以先複製下方範例做測試(筆者是以下貼圖的狂熱愛好者，歡迎一起追蹤按愛心XD)

ig.json

[
    {
        "title": "寶寶不說",
        "url": "https://www.instagram.com/baobaonevertell/"
    },
    {
        "title": "松尼",
        "url": "https://www.instagram.com/sweethouse.sl/"
    },
    {
        "title": "麻糬爸",
        "url": "https://www.instagram.com/mochi_dad/"
    },
    {
        "title": "好想兔",
        "url": "https://www.instagram.com/chien_chien0608/"
    },
    {
        "title": "ㄇㄚˊ幾兔",
        "url": "https://www.instagram.com/machiko324/"
    }
]

2. 讓爬蟲程式讀取 json 裡面的資料

2.1 在專案引入 json 檔案

引入 json 檔案時請注意相對路徑，建議先用 console.log 確認是否有正確引入
因為這個檔案是人工撰寫，可能會不小心複製到重複粉專，所以使用 filter 來過濾

let fanpage_array = require('../fanspages/ig.json');
//過濾掉重複的粉專頁面，減少資源浪費
fanpage_array = fanpage_array.filter((fanpage, index, self) =>
    index === self.findIndex(f => f.url === fanpage.url)
)
console.log(fanpage_array)

2.2 批量爬蟲程式撰寫

將前往粉專頁面與爬蟲的部分用 for/of迴圈 包起來(因迴圈內用到 async/await)，讓他依序前往粉專頁面抓資料
```
for (fanpage of fanpage_array) {
    // 撰寫你要對fanpage做的事       
}
```
我們要當個好爬蟲，每個頁面設定爬蟲停留 3-6 秒，不要因為自己的爬蟲造成別人伺服器的負擔

這裡我們使用Math.random()取得區間亂數
```
await driver.sleep((Math.floor(Math.random()*4)+3)*1000)
```

統整後完整程式如下

crawlerIG.js

let fanpage_array = require('../fanspages/ig.json');
//過濾掉重複的粉專頁面，減少資源浪費
fanpage_array = fanpage_array.filter((fanpage, index, self) =>
    index === self.findIndex(f => f.url === fanpage.url)
)
const ig_username = process.env.IG_USERNAME
const ig_userpass = process.env.IG_PASSWORD
const { By, until } = require('selenium-webdriver')
exports.crawlerIG = crawlerIG;

async function crawlerIG (driver) {
    const isLogin = await loginInstagram(driver, By, until)
    if (isLogin) {
        console.log(`IG開始爬蟲`)
        for (fanpage of fanpage_array) { // 用迴圈爬蟲每個粉專
            let trace = null
            const isGoFansPage = await goFansPage(driver, fanpage.url)
            if (isGoFansPage) {
                //每個頁面爬蟲停留3~6秒，不要造成別人的伺服器負擔
                await driver.sleep((Math.floor(Math.random() * 4) + 3) * 1000)
                trace = await getTrace(driver, By, until)
            }
            if (trace === null) {
                console.log(`${fanpage.title}無法抓取追蹤人數`)
            } else {
                console.log(`${fanpage.title}追蹤人數：${trace}`)
            }

        }
    }
}
.//後面程式一樣
.
.

執行程式

在專案資料夾的終端機(Terminal)執行指令
```
yarn start
```
確認畫面執行順序如你預期：Instagram自動登入 → 依序跳轉到指定帳號 → Facebook自動登入 → 依序跳轉到粉絲頁 → 關閉
大概裝完一壺水的時間後，你就能看到 FB & IG 的追蹤人數嚕～

搭配上json後有沒有覺得自己功力大增XD，上面的是IG的範例，大家可以自己嘗試看看FB部分的如何改寫喔～

ℹ️ 專案原始碼

今天的完整程式碼可以在這裡找到喔
我也貼心地把昨天的把昨天的程式碼打包成壓縮檔，你可以用裡面乾淨的環境來實作今天json改寫的部分喔
- 請記得在終端機下指令 yarn 才會把之前的套件安裝
- windows需下載與你chrome版本相同的chrome driver放在專案根目錄
- 調整.env檔
  - 填上FB登入資訊
  - 填上FB版本(classic/new)
  - 填上IG登入資訊
- 調整fanspages資料夾內目標爬蟲的粉專網址

參考資源

免責聲明:文章技術僅抓取公開數據作爲研究，任何組織和個人不得以此技術盜取他人智慧財產、造成網站損害，否則一切后果由該組織或個人承擔。作者不承擔任何法律及連帶責任！

在許多人的幫助下，本系列文章已出版成書，並添加了新的篇章與細節補充：

加入更多實務經驗，用完整的開發流程讓讀者了解專案每個階段要注意的事項

將爬蟲的步驟與技巧做更詳細的說明，讓讀者可以輕鬆入門

調整專案架構

優化爬蟲程式，以更廣的視角來擷取網頁資訊

增加資料驗證、錯誤通知等功能，讓爬蟲執行遇到問題時可以第一時間通知使用者

排程部分改用 node-schedule & pm2 的組合，讓讀者可以輕鬆管理專案程序並獲得更精確的 log 資訊

有興趣的朋友可以到天瓏書局選購，感謝大家的支持。

購書連結：https://www.tenlong.com.tw/products/9789864348008

【Day14】爬蟲執行時又又又崩潰了嗎？來點 try-catch 吧

林鼎淵 — Tue, 29 Sep 2020 10:23:54 +0800

你的絕望我懂！

回憶一下專案之前的應用場景

在 Day8 selenium-webdriver：爬蟲起手式有使用到 try-catch 來解決抓不到 chrome driver 的例外事件，今天我們會更清楚的說明如何讓 try-catch 幫助你更高效的 debug 以及增加程式穩定性

今日目標

1. 了解什麼情境下需要用到 try-catch

1.1 try-catch-finally 基礎語法說明

1.2 專案如果少了 try-catch 會發生哪些悲劇

2. 在專案中應用 try-catch 實作

2.1 loginInstagram：確認登入的步驟是否順利

2.2 crawlerIG：利用 loginInstagram函式 回傳值判斷是否繼續執行

2.3 goFansPage：確認傳入的參數符合網址規則

2.4 getTrace：確認網頁能抓到追蹤人數的元件

1. 什麼情境下需要用到 try-catch?

1.1 try-catch-finally 基礎語法說明

在 javascript 執行過程發成錯誤時會拋出例外，接著尋找有沒有能處理這個例外的程式，如果找不到就會從拋出例外的函式跳出，尋找上一層的函式能否處理這個例外，這個過程直到觸及最外層的函式後終止

如果我們沒有做錯誤處理，程式執行過程中發生意外就會直接在那裡crash，不過我們可以用try-catch-finally的語句來避免程式crash

try {
  // 我們要執行的程式內容
  // 如果這裡執行發生錯誤就會立即進入 catch
} catch (exception) {
  // 在這裡處理例外狀況
  // 通常都會用console.log印出錯誤訊息
} finally {
  // 無論try-catch怎麼跑，最後這塊都一定會執行到
}

1.2 專案如果少了try-catch會發生哪些悲劇

程式在缺乏 try-catch 的機制下是非常脆落的，只要發生例外事件就容易崩潰，下面舉例幾個讓程式崩潰或是卡住的方式：
1. 把 Facebook 跟 Instagram 登入網址改成不存在的網址 → 會因為網頁不存在而卡在那個畫面
2. 把粉專的網址改成不存在的網址 → 會因為無法抓到要讀取的元件而崩潰
3. 把粉專的網址改成不存在的粉專(或是移除的粉專) → 會因為無法抓到要讀取的元件而崩潰
為了避免這些悲劇的發生，try-catch 就是我們的好朋友，以下是應用上要注意的地方：
1. 一個try-catch區塊只判斷一件事有沒有做好
  - 與上一篇重構提到的概念類似，一個函式專注做好一件事，try-catch 也是專注在確認這一件事執行時有沒有發生意外
2. 除了系統自行吐出的 exception 以外，建議你也要加上console.error(‘我在哪個步驟錯了’)
  - 在程式結構龐大且長時間執行的狀態下，系統吐出的 exception 有時多到你眼花，這時你撰寫的 console.error 可以幫助你對發生錯誤的位置快速定位
3. 程式需要設計中斷邏輯避免進入無窮的等待
  - 我們在抓網頁元件時用了 wait…until 的結構，如果我們沒有設定最多等待幾秒，你等到天荒地老，因為他永遠停在 try 的區塊出不去，所以 try-catch 也幫不了你
4. 透過例外處理減少多餘的步驟
  - 像是 Instagram 我們一定要登入後才能爬蟲，所以我們就可以設定當登入失敗時(讓函式return false)不會執行後續步驟

2. 在專案中應用 try-catch 實作

實踐出真知，下面以 crawlerIG.js 裡面的函式為範例

2.1 `loginInstagram`

調整參數讓程式GG

把 IG 的登入網址改成非網址格式的字串(如：’error’)
- 程式會crash
把 IG 的登入網址改成其他網址
- 找不到網頁上帳號密碼的文字輸入框、點擊登入的按鈕元件，程式會無限期等待
輸入錯誤的登入帳密
- 因為登入失敗網頁右上角永遠不會出現頭像元件，程式會無限期等待

解決方式

把這段登入的邏輯用 try-catch 包起來
執行成功時回傳 true，如果執行上發生錯誤則回傳 false，終止後續爬蟲動作

為 driver.wait 加上合理的等待時間(3~5秒鐘)

PS.在程式的世界中通常時間都是以毫秒為單位，填上 3000 就是 3 秒鐘的意思

async function loginInstagram (driver) {
    const web = 'https://www.instagram.com/accounts/login';
    try {
        await driver.get(web)

        //為 driver.wait 加上合理的等待時間(3~5秒鐘)
        let ig_username_ele = await driver.wait(until.elementLocated(By.css("input[name='username']")), 3000);
        ig_username_ele.sendKeys(ig_username)
        let ig_password_ele = await driver.wait(until.elementLocated(By.css("input[name='password']")), 3000);
        ig_password_ele.sendKeys(ig_userpass)

        const login_elem = await driver.wait(until.elementLocated(By.css("button[type='submit']")), 3000)
        login_elem.click()

        //為 driver.wait 加上合理的等待時間(3~5秒鐘)
        await driver.wait(until.elementLocated(By.xpath(`//*[@id="react-root"]//*[contains(@class,"_47KiJ")]`)), 5000)
        return true
    } catch (e) {
        console.error('IG登入失敗')
        console.error(e)
        return false
    }
}

GOTCHA！捕獲野生錯誤

將 IG 登入網址改為錯誤字串

//const web = 'https://www.instagram.com/accounts/login';
const web = 'error';

會因不符合網址格式跳錯誤訊息

將 IG 登入網址改為其他無關網址
```
//const web = 'https://www.instagram.com/accounts/login';
const web = 'https://www.google.com';
```
會因找不到使用者輸入框元件超時而跳錯誤訊息
把 .env環境檔裡面的登入帳號密碼改成錯誤的
```
IG_USERNAME='error'
IG_PASSWORD='error'
```
會因找不到頭像元件超時而跳錯誤訊息

2.2 `crawlerIG`

如果 loginInstagram函式回傳 false 代表 IG 登入失敗，後續爬蟲的動作就無需執行
如果 goFansPage函式回傳 false 代表該 IG帳號網址無效，就不需要去取得追蹤人數了

async function crawlerIG (driver) {
    const isLogin = await loginInstagram(driver, By, until)
    if (isLogin) {//如果登入成功才執行下面的動作
        const fanpage = "https://www.instagram.com/baobaonevertell/"
        const isGoFansPage = await goFansPage(driver, fanpage)
        if (isGoFansPage) {
            await driver.sleep(3000)
            const trace = await getTrace(driver)
            console.log(`IG追蹤人數：${trace}`)
        }
    }
}

2.3 `goFansPage`

調整參數讓程式GG

將傳入的 web_url 改成非網址格式的字串(如：’error_page')
- 程式會crash

解決方式

把這段登入的邏輯用 try-catch 包起來

async function goFansPage (driver, web_url) {
    //登入成功後要前往粉專頁面
    try {
        await driver.get(web_url)
        return true
    } catch (e) {
        console.error('無效的網址')
        console.error(e)
        return false
    }
}

GOTCHA！捕獲野生錯誤

將 IG 帳號網址改為錯誤字串

//const fanpage = "https://www.instagram.com/baobaonevertell/"
const fanpage = "error_page"

會因不符合網址格式跳錯誤訊息

2.4 `getTrace`

調整參數讓程式GG

上一步 goFansPage 如果導向的並非 IG帳號網址，或者該IG帳號不存在時

會因為找不到網頁上追蹤人數的元件，使程式陷入無限期等待

解決方式

把這段登入的邏輯用 try-catch 包起來

為 driver.wait 加上合理的等待時間(5秒鐘)

async function getTrace (driver) {
    let ig_trace = 0;//這是紀錄IG追蹤人數
    try {
        const ig_trace_xpath = `//*[@id="react-root"]/section/main/div/header/section/ul/li[2]/a/span`
        //我們採取5秒內如果抓不到該元件就跳出的條件
        const ig_trace_ele = await driver.wait(until.elementLocated(By.xpath(ig_trace_xpath)), 5000)
        // ig因為當人數破萬時文字不會顯示，所以改抓title
        ig_trace = await ig_trace_ele.getAttribute('title')
        ig_trace = ig_trace.replace(/\D/g, '')

        return ig_trace
    } catch (e) {
        console.error('無法抓取IG追蹤人數')
        console.error(e)
        return null
    }
}

GOTCHA！捕獲野生錯誤

將 IG 帳號網址改為不存在帳號的網址(或是無關網址)

//const fanpage = "https://www.instagram.com/baobaonevertell/"
const fanpage = "https://www.instagram.com/error_page_ex/"

會因找不到追蹤人數的元件而跳錯誤訊息

筆者碎碎念

程式越龐大 try-catch 的機制越重要，因為隨著開發的時間軸拉長，你對過去撰寫的程式掌握度會越來越低，甚至會忘記自己曾經寫了這一段程式碼；萬一在遙遠的某一天運轉好好的程式突然崩潰了，沒有撰寫 try-catch 的人在 debug 會浪費非常多的時間，因為他無法掌握是哪裡出錯了，所以建議大家培養撰寫 try-catch 的好習慣

如果有時麼解釋不夠清楚的歡迎在下方留言討論喔

ℹ️ 專案原始碼

今天的完整程式碼可以在這裡找到喔
我也貼心地把昨天的把昨天的程式碼打包成壓縮檔，你可以用裡面乾淨的環境來實作今天try-catch的部分喔
- 請記得在終端機下指令 yarn 才會把之前的套件安裝
- windows需下載與你chrome版本相同的chrome driver放在專案根目錄
- 調整.env檔
  - 填上FB登入資訊
  - 填上FB版本(classic/new)
  - 填上IG登入資訊

免責聲明:文章技術僅抓取公開數據作爲研究，任何組織和個人不得以此技術盜取他人智慧財產、造成網站損害，否則一切后果由該組織或個人承擔。作者不承擔任何法律及連帶責任！

在許多人的幫助下，本系列文章已出版成書，並添加了新的篇章與細節補充：

加入更多實務經驗，用完整的開發流程讓讀者了解專案每個階段要注意的事項

將爬蟲的步驟與技巧做更詳細的說明，讓讀者可以輕鬆入門

調整專案架構

優化爬蟲程式，以更廣的視角來擷取網頁資訊

增加資料驗證、錯誤通知等功能，讓爬蟲執行遇到問題時可以第一時間通知使用者

排程部分改用 node-schedule & pm2 的組合，讓讀者可以輕鬆管理專案程序並獲得更精確的 log 資訊

有興趣的朋友可以到天瓏書局選購，感謝大家的支持。

購書連結：https://www.tenlong.com.tw/products/9789864348008

【Day13】重構程式碼，減少歷史業障

林鼎淵 — Mon, 28 Sep 2020 08:45:12 +0800

數據顯示，工程師完成最後 20% 的工作時間跟之前的 80% 一樣多

完成功能後，重構是另一個開始

昨天我們完成了一個跑得動的程式，但很明顯這不是一個好的程式

大家應該有感受到隨著程式越來越長，我們對他的掌握力逐步下降

根據 Clean Code 的原則而言就是說這程式寫得很爛XD

很多人為了盡快完成功能而埋頭狂寫，但這樣容易導致你日後維護以及交接的困難性，你所負責的專案越大這個感受會更明顯

所以在完成功能後重構是必要的任務，他能提升你日後解決 bug、需求變更的工作效率

接下來就以昨天程式為範例來重構吧！

今日目標

了解 & 修正目前專案所犯下的錯誤

主程式做了太多事情
一個函式做了太多事情
物件宣告的方式太複雜且多次被使用

1. 主程式做了太多事情

主程式就像是專案的總經理，他只需要知道大方向的架構；而架構裡面的細節就交給各部門處理，他只是溝通資料的橋樑

根據上述的邏輯，我們應該把在主程式中的函式轉移到另外的資料夾(ex:tools)，依據功能去命名檔名，範例如下:

主程式 - index.js
初始化瀏覽器 - tools/initDrive.js
Facebook爬蟲 - tools/crawlerFB.js
Instagram爬蟲 - tools/crawlerIG.js

在這樣的分工後我們的主程式是不是變得很乾淨呢？

index.js

require('dotenv').config(); //載入.env環境檔
const { initDrive } = require("./tools/initDrive.js");
const { crawlerFB } = require("./tools/crawlerFB.js");
const { crawlerIG } = require("./tools/crawlerIG.js");

async function crawler () {

    const driver = await initDrive();
    if (!driver) {//driver不存在就結束程式
        return
    }
    //因為有些人是用FB帳號登入IG，為了避免增加FB登出的動作，所以採取先對IG進行爬蟲
    await crawlerIG(driver)
    await crawlerFB(driver)

    driver.quit();
}

crawler()

2. 一個函式做了太多事情

記住一個大原則：一個函式只需要做一件事情！

現在我們把 FB 登入並取得追蹤人數寫在同一隻函式，這樣會增加你日後維護的困難度，因為函式越長，你越難除錯(debug)；以 loginFacebookGetTrace 這隻函式舉例，它實際上可以解構成好幾個功能：

取得 Facebook(經典版/新版) 的爬蟲路徑 - getCrawlerPath
Facebook爬蟲 - crawlerFB
登入Facebook - loginFacebook
前往粉絲頁 - goFansPage
取得追蹤人數 - getTrace

把每個功能獨立成函式，你就能輕鬆除錯(debug)。下面程式以 FB 爬蟲作為解構範例，你可以自己練習改寫 IG 的部分喔

crawlerFB.js

const fb_username = process.env.FB_USERNAME
const fb_userpass = process.env.FB_PASSWORD
const { By, until } = require('selenium-webdriver') // 從套件中取出需要用到的功能
exports.crawlerFB = crawlerFB;//讓其他程式在引入時可以使用這個函式

// FB有經典版以及新版的區分，兩者的爬蟲路徑不同，我們藉由函式取得各自的路徑
const { fb_head_path, fb_trace_path } = getCrawlerPath();

function getCrawlerPath () {
    if (process.env.FB_VERSION === 'new') {//如果是新版FB
        return {
            "fb_head_path": `//*[contains(@class,"fzdkajry")]`,
            "fb_trace_path": `//*[contains(@class,"knvmm38d")]`
        }
    } else {//如果為設定皆默認為舊版
        return {
            "fb_head_path": `//*[contains(@class,"_1vp5")]`,
            "fb_trace_path": `//*[@id="PagesProfileHomeSecondaryColumnPagelet"]//*[contains(@class,"_4bl9")]`
        }
    }
}

async function crawlerFB(driver) {    
    await loginFacebook(driver)
    const fanpage = "https://www.facebook.com/baobaonevertell/"
    await goFansPage(driver, fanpage)
    await driver.sleep(3000)
    await getTrace(driver)
}

async function loginFacebook(driver) {
    const web = 'https://www.facebook.com/login';//我們要前往FB
    await driver.get(web)//在這裡要用await確保打開完網頁後才能繼續動作

    //填入fb登入資訊
    const fb_email_ele = await driver.wait(until.elementLocated(By.xpath(`//*[@id="email"]`)));
    fb_email_ele.sendKeys(fb_username)
    const fb_pass_ele = await driver.wait(until.elementLocated(By.xpath(`//*[@id="pass"]`)));
    fb_pass_ele.sendKeys(fb_userpass)

    //抓到登入按鈕然後點擊
    const login_elem = await driver.wait(until.elementLocated(By.xpath(`//*[@id="loginbutton"]`)))
    login_elem.click()

    //因為登入這件事情要等server回應，你直接跳轉粉絲專頁會導致登入失敗
    //用登入後才有的元件，來判斷是否登入
    await driver.wait(until.elementLocated(By.xpath(fb_head_path)))
}

async function goFansPage(driver, web_url) {
    //登入成功後要前往粉專頁面
    await driver.get(web_url)
}

async function getTrace(driver) {
    let fb_trace = 0;//這是紀錄FB追蹤人數
    
    //因為考慮到登入之後每個粉專顯示追蹤人數的位置都不一樣，所以就採用全抓在分析    
    const fb_trace_eles = await driver.
        wait(until.elementsLocated(By.xpath(fb_trace_path)))
    for (const fb_trace_ele of fb_trace_eles) {
        const fb_text = await fb_trace_ele.getText()
        if (fb_text.includes('人在追蹤')) {
            fb_trace = fb_text.replace(/\D/g, '')//只取數字
            break
        }
    }
    console.log(`FB追蹤人數：${fb_trace}`)
}

3. 物件宣告的方式太複雜且多次被使用

我們要將建立瀏覽器的部分獨立成一隻js，原因如下

建立瀏覽器前需要做事前確認及複雜的設定
這個瀏覽器作為物件會被多次使用
如果瀏覽器的參數需要變更可以在一個檔案集中管理

基於上述原因，我們應該把他獨立出來，這樣你只需要在一個檔案管理你宣告的物件(瀏覽器)設定，而主程式很單純的使用回傳的物件(瀏覽器)即可

initDrive.js

exports.initDrive = initDrive;//讓其他程式在引入時可以使用這個函式

const webdriver = require('selenium-webdriver') // 加入虛擬網頁套件
const chrome = require('selenium-webdriver/chrome');
const options = new chrome.Options();
options.setUserPreferences({ 'profile.default_content_setting_values.notifications': 1 });//因為FB會有notifications干擾到爬蟲，所以要先把它關閉

const path = require('path');//用於處理文件路徑的小工具
const fs = require("fs");//讀取檔案用

async function initDrive () {
    if (!checkDriver()) {// 檢查Driver是否是設定，如果無法設定就結束程式
        return
    }
    
    // 建立這個broswer的類型
    let driver = await new webdriver.Builder().forBrowser("chrome").withCapabilities(options).build();
    
    //考慮到ig在不同螢幕寬度時的Xpath不一樣，所以我們要在這裡設定統一的視窗大小
    await driver.manage().window().setRect({ width: 1280, height: 800, x: 0, y: 0 });

    return driver
}

function checkDriver() {
    try {
        chrome.getDefaultService()//確認是否有預設
    } catch {
        console.warn('找不到預設driver!');
        //'../chromedriver.exe'記得調整成自己的路徑
        const file_path = '../chromedriver.exe'
        //請確認印出來日誌中的位置是否與你路徑相同
        console.log(path.join(__dirname, file_path));
        
        //確認路徑下chromedriver.exe是否存在            
        if (fs.existsSync(path.join(__dirname, file_path))) {
            const service = new chrome.ServiceBuilder(path.join(__dirname, file_path)).build();//設定driver路徑
            chrome.setDefaultService(service);
            console.log('設定driver路徑');
            return true
        } else {
            console.error('無法設定driver路徑');
            return false
        }
    }
    return true
}

這篇文章是以自己的程式作為範例講解，如果你想更深入了解重構請閱讀重構—改善既有的程式設計，他深入淺出說明重構的原則讓我受益良多

程式碼往往沒有所謂最好的寫法，只有當下最合理的選擇。而需求永遠在變動，就算當下重構到很滿意，可能下個月再回來看又覺得不夠了。 - YH Yu

執行程式

在專案資料夾的終端機(Terminal)執行指令
```
yarn start
```
觀察執行順序：Instagram 自動登入 → 跳轉到指定帳號 → Facebook自動登入 → 跳轉到粉絲頁 → 關閉
確定與程式重構後能順利取得FB & IG的追蹤人數

如果你還有什麼問題或是覺得有可以改善的地方歡迎在下方留言討論

ℹ️ 專案原始碼

今天的完整程式碼可以在這裡找到喔
我也貼心地把昨天的把昨天的程式碼打包成壓縮檔，你可以用裡面乾淨的環境來實作今天的重構喔
- 請記得在終端機下指令 yarn 才會把之前的套件安裝
- windows需下載與你chrome版本相同的chrome driver放在專案根目錄
- 調整.env檔
  - 填上FB登入資訊
  - 填上FB版本(classic/new)
  - 填上IG登入資訊

參考資源

免責聲明:文章技術僅抓取公開數據作爲研究，任何組織和個人不得以此技術盜取他人智慧財產、造成網站損害，否則一切后果由該組織或個人承擔。作者不承擔任何法律及連帶責任！

在許多人的幫助下，本系列文章已出版成書，並添加了新的篇章與細節補充：

加入更多實務經驗，用完整的開發流程讓讀者了解專案每個階段要注意的事項

將爬蟲的步驟與技巧做更詳細的說明，讓讀者可以輕鬆入門

調整專案架構

優化爬蟲程式，以更廣的視角來擷取網頁資訊

增加資料驗證、錯誤通知等功能，讓爬蟲執行遇到問題時可以第一時間通知使用者

排程部分改用 node-schedule & pm2 的組合，讓讀者可以輕鬆管理專案程序並獲得更精確的 log 資訊

有興趣的朋友可以到天瓏書局選購，感謝大家的支持。

購書連結：https://www.tenlong.com.tw/products/9789864348008

【Day12】合體吧！用一隻程式搞定FB、IG爬蟲

林鼎淵 — Sun, 27 Sep 2020 07:59:57 +0800

有些需求不是複製貼上就能解決的

今日目標

1. 分析實作過程中可能會遇到的問題

1.1 瀏覽器關閉導致無法讀取網頁元件

1.2 跨網域(CORS)錯誤

2. 一隻程式爬完 FB & IG 粉專

2.1 分析程式結構邏輯

2.2 思考程式上有什麼地方需要改進

1. 實作過程中可能會遇到的問題

1.1 瀏覽器關閉導致無法讀取網頁元件

如果你直接把兩天文章複製貼上爬的話一定會看到這個錯誤訊息

WebDriverError: element not interactable

這是因為一次跳出兩個瀏覽器在執行，只要其中一個瀏覽器完成爬蟲任務觸發 driver.quit() 就會導致另一個還沒爬蟲完畢的瀏覽器因無法讀取元件而掛掉
面對這個問題，我建議開一個瀏覽器來處理：
1. 因為跑爬蟲會消耗電腦的記憶體以及網路流量，我希望電腦跑爬蟲的時候不要影響我做其他事情的效率
2. 使用一個瀏覽器在跑遇到問題時方便除錯

1.2 跨網域(CORS)錯誤

如果你把他改成一個瀏覽器執行，跑完 FB 粉專再跑 IG 粉專應該又會出現跨網域(CORS)問題的錯誤(目前只有 windows 作業系統才會遇到)

這是網域切換時因為一些安全性的疑慮而拒絕跳轉，像是從 https://www.facebook.com/ 跳轉到 https://www.instagram.com 就會遇到這個問題

這個問題在建立瀏覽器時加上設定 { acceptSslCerts: true, acceptInsecureCerts: true } 即可解決

let driver = new webdriver.Builder().forBrowser("chrome").withCapabilities(options,
    { acceptSslCerts: true, acceptInsecureCerts: true }//這是為了解決跨網域問題
).build();

2. 一隻程式爬完 FB & IG 粉專

2.1 分析程式結構邏輯

為了幫助讀者能較快掌握程式的邏輯，我根據每個函式所做的功能以及執行步驟列出結構如下：

crawler : 觸發爬蟲的函式
1. 檢查 Driver 是否是設定
2. 建立這個 browser 的類型
3. 設定 browser 的視窗大小
4. loginInstagramGetTrace : 登入IG並取得指定帳號的追蹤人數
  
  先執行 IG 爬蟲是因為有些人登入 IG 的方式是綁定 FB 帳號，這會導致我們程式需要判斷更多狀況；而讓IG先爬蟲就能避免這個問題嚕～
  1. 前往 IG 登入頁，填入登入資訊
  2. 點擊登入按紐
  3. 判斷是否登入成功
  4. 登入成功後跳轉指定帳號頁面
  5. 獲取指定帳號追蹤人數
5. loginFacebookGetTrace : 登入 FB 並取得粉絲專業的追蹤人數
  1. 前往 FB 登入頁，填入登入資訊
  2. 點擊登入按紐
  3. 判斷是否登入成功
  4. 登入成功後跳轉指定粉專頁面
  5. 獲取指定粉專追蹤人數
6. 關閉 browser

寫程式如同拼積木，隨著功能的增加程式的體積會越來越大，這裡我建議你寫一份程式架構圖的文件來輔助，未來遇到需求變更時看架構圖就能迅速修改

index.js

require('dotenv').config(); //載入.env環境檔
const path = require('path');//用於處理文件路徑的小工具
const fs = require("fs");//讀取檔案用
//取出.env檔案的FB、IG資訊
const ig_username = process.env.IG_USERNAME
const ig_userpass = process.env.IG_PASSWORD
const fb_username = process.env.FB_USERNAME
const fb_userpass = process.env.FB_PASSWORD

const webdriver = require('selenium-webdriver'), // 加入虛擬網頁套件
    By = webdriver.By,//你想要透過什麼方式來抓取元件，通常使用xpath、css
    until = webdriver.until;//直到抓到元件才進入下一步(可設定等待時間)

const chrome = require('selenium-webdriver/chrome');
const options = new chrome.Options();
options.setUserPreferences({ 'profile.default_content_setting_values.notifications': 1 });//因為FB會有notifications干擾到爬蟲，所以要先把它關閉

function getCrawlerPath () {
    if (process.env.FB_VERSION === 'new') {//如果是新版FB
        return {
            "fb_head_path": `//*[contains(@class,"fzdkajry")]`,
            "fb_trace_path": `//*[contains(@class,"knvmm38d")]`
        }
    } else {//如果為設定皆默認為舊版
        return {
            "fb_head_path": `//*[contains(@class,"_1vp5")]`,
            "fb_trace_path": `//*[@id="PagesProfileHomeSecondaryColumnPagelet"]//*[contains(@class,"_4bl9")]`
        }
    }
}

async function loginFacebookGetTrace (driver) {
    const web = 'https://www.facebook.com/login';//我們要前往FB
    await driver.get(web)//在這裡要用await確保打開完網頁後才能繼續動作

    //填入fb登入資訊
    const fb_email_ele = await driver.wait(until.elementLocated(By.xpath(`//*[@id="email"]`)));
    fb_email_ele.sendKeys(fb_username)
    const fb_pass_ele = await driver.wait(until.elementLocated(By.xpath(`//*[@id="pass"]`)));
    fb_pass_ele.sendKeys(fb_userpass)

    //抓到登入按鈕然後點擊
    const login_elem = await driver.wait(until.elementLocated(By.xpath(`//*[@id="loginbutton"]`)))
    login_elem.click()

    // FB有經典版以及新版的區分，兩者的爬蟲路徑不同，我們藉由函式取得各自的路徑
    const { fb_head_path, fb_trace_path } = getCrawlerPath();
    
    //因為登入這件事情要等server回應，你直接跳轉粉絲專頁會導致登入失敗
    //用登入後才有的元件，來判斷是否登入
    await driver.wait(until.elementLocated(By.xpath(fb_head_path)))

    //登入成功後要前往粉專頁面
    const fanpage = "https://www.facebook.com/baobaonevertell/"
    await driver.get(fanpage)
    let fb_trace = 0;//這是紀錄FB追蹤人數
    
    //因為考慮到登入之後每個粉專顯示追蹤人數的位置都不一樣，所以就採用全抓在分析
    const fb_trace_eles = await driver.wait(until.elementsLocated(By.xpath(fb_trace_path)))
    
    for (const fb_trace_ele of fb_trace_eles) {
        const fb_text = await fb_trace_ele.getText()
        if (fb_text.includes('人在追蹤')) {
            fb_trace = fb_text
            break
        }
    }
    console.log(`FB追蹤人數：${fb_trace}`)
}
async function loginInstagramGetTrace (driver) {
    const web = 'https://www.instagram.com/accounts/login';//前往IG登入頁面
    await driver.get(web)//在這裡要用await確保打開完網頁後才能繼續動作

    //填入ig登入資訊
    let ig_username_ele = await driver.wait(until.elementLocated(By.css("input[name='username']")));
    ig_username_ele.sendKeys(ig_username)
    let ig_password_ele = await driver.wait(until.elementLocated(By.css("input[name='password']")));
    ig_password_ele.sendKeys(ig_userpass)

    //抓到登入按鈕然後點擊
    const login_elem = await driver.wait(until.elementLocated(By.css("button[type='submit']")))
    login_elem.click()

    //登入後才會有右上角功能列，我們以這個來判斷是否登入
    await driver.wait(until.elementLocated(By.xpath(`//*[@id="react-root"]//*[contains(@class,"_47KiJ")]`)))

    //登入成功後要前往粉專頁面
    const fanpage = "https://www.instagram.com/baobaonevertell/"
    await driver.get(fanpage)

    let ig_trace = 0;//這是紀錄IG追蹤人數
    const ig_trace_xpath = `//*[@id="react-root"]/section/main/div/header/section/ul/li[2]/a/span`
    const ig_trace_ele = await driver.wait(until.elementLocated(By.xpath(ig_trace_xpath)))
    // ig因為當人數破萬時文字不會顯示，所以改抓title
    ig_trace = await ig_trace_ele.getAttribute('title')
    console.log(`IG追蹤人數：${ig_trace}`)
}

function checkDriver() {
    try {
        chrome.getDefaultService()//確認是否有預設
    } catch {
        console.warn('找不到預設driver!');
        //'../chromedriver.exe'記得調整成自己的路徑
        const file_path = '../chromedriver.exe'
        //請確認印出來日誌中的位置是否與你路徑相同
        console.log(path.join(__dirname, file_path));
        
        //確認路徑下chromedriver.exe是否存在            
        if (fs.existsSync(path.join(__dirname, file_path))) {
            //設定driver路徑
            const service = new chrome.ServiceBuilder(path.join(__dirname, file_path)).build();
            chrome.setDefaultService(service);
            console.log('設定driver路徑');
        } else {
            console.error('無法設定driver路徑');
            return false
        }
    }
    return true
}

async function crawler () {
    if (!checkDriver()) {// 檢查Driver是否是設定，如果無法設定就結束程式
        return
    }
    // 建立這個browser的類型
    let driver = await new webdriver.Builder().forBrowser("chrome").withCapabilities(options).build();
    
    //考慮到ig在不同螢幕寬度時的Xpath不一樣，所以我們要在這裡設定統一的視窗大小
    await driver.manage().window().setRect({ width: 1280, height: 800, x: 0, y: 0 });

    //因為有些人是用FB帳號登入IG，為了避免增加FB登出的動作，所以採取先對IG進行爬蟲
    await loginInstagramGetTrace(driver)
    await loginFacebookGetTrace(driver)

    driver.quit();
}

crawler()

2.2 思考程式上有什麼地方需要改進

看完上面的程式後，我想大部分的人都有點暈了XD，如果你有認真看程式應該有以下體會：

閱讀起來有點吃力
遇到錯誤時不好找問題
很難掌握每個函式的功能
幾個月後回來看這隻程式估計一臉茫然

如果還有更多的體會歡迎大家在下方留言(請鞭小力一點QQ)

明天會講程式碼的重構，透過重構我們可以更有效率的掌握程式；後天會講try-catch在本專案的應用，方便日後的除錯

執行程式

在專案資料夾的終端機(Terminal)執行指令
```
yarn start
```
觀察執行順序是否為：Instagram自動登入 → 跳轉到指定帳號 → Facebook自動登入 → 跳轉到粉絲頁 → 關閉
如果想要中斷終端機(Terminal)執行的程式，可以用下面按鍵組合:
- Windows: Ctrl + c
- Mac: control + c
順利的話就能看到FB & IG的追蹤人數嚕～

ℹ️ 專案原始碼

今天的完整程式碼可以在這裡找到喔
我也貼心地把昨天的把昨天的程式碼打包成壓縮檔，你可以用裡面乾淨的環境來實作今天的功能喔
- 請記得在終端機下指令 yarn 才會把之前的套件安裝
- windows需下載與你chrome版本相同的chrome driver放在專案根目錄
- 調整.env檔
  - 填上FB登入資訊
  - 填上FB版本(classic/new)
  - 填上IG登入資訊

免責聲明:文章技術僅抓取公開數據作爲研究，任何組織和個人不得以此技術盜取他人智慧財產、造成網站損害，否則一切后果由該組織或個人承擔。作者不承擔任何法律及連帶責任！

在許多人的幫助下，本系列文章已出版成書，並添加了新的篇章與細節補充：

加入更多實務經驗，用完整的開發流程讓讀者了解專案每個階段要注意的事項

將爬蟲的步驟與技巧做更詳細的說明，讓讀者可以輕鬆入門

調整專案架構

優化爬蟲程式，以更廣的視角來擷取網頁資訊

增加資料驗證、錯誤通知等功能，讓爬蟲執行遇到問題時可以第一時間通知使用者

排程部分改用 node-schedule & pm2 的組合，讓讀者可以輕鬆管理專案程序並獲得更精確的 log 資訊

有興趣的朋友可以到天瓏書局選購，感謝大家的支持。

購書連結：https://www.tenlong.com.tw/products/9789864348008

【Day11】舉一反三，帶你了解IG爬蟲不可忽略的細節

林鼎淵 — Sat, 26 Sep 2020 08:44:52 +0800

學習，從複製開始

筆者有話先說

有了 Facebook 爬蟲的經驗後，我相信這篇大家是有能力獨自完成的，建議大家先用自己的方式來完成今日目標，這篇文章適合實作遇到問題或是你實作完成後再來參考

今日目標

1. 完成 IG 自動登入

1.1 分析 IG 登入頁面的元件

1.2 改用 css 抓取元件，完成 IG 自動登入

2. 從畫面判斷使用者是否登入成功

3. 前往 IG 帳號並取得追蹤人數

3.1 了解響應式網頁對爬蟲的影響

3.2 設定瀏覽器開啟時的視窗大小

3.3 完成前往 IG 帳號並取得追蹤人數的程式

1. IG 自動登入

1.1 分析 IG 登入頁面的元件

我在反覆使用 IG 登入時發現登入的畫面偶爾會長不一樣(如下圖)導致Xpath路徑錯誤

版本1 版本2

|
先進入開發者模式確認紅框內元件的特徵
- 在下圖我們觀察到 電話號碼、用戶名稱或電子郵件 以及密碼這兩個元件的 共通點：
  1. 都是 input 的 html 標籤
  2. 用 name 這個 attribute 來表示他們的作用
- 登入按鈕 則用以下條件來取出：
  1. 使用 button 的 html 標籤
  2. 用 type 這個 attribute 來表示他要執行的動作

1.2 改用 css 抓取元件，完成 IG 自動登入

根據上面的分析後我們改用 css 抓取 IG 登入的元件來操作

//填入ig登入資訊
let ig_username_ele = await driver.wait(until.elementLocated(By.css("input[name='username']")));
ig_username_ele.sendKeys(ig_username)
let ig_password_ele = await driver.wait(until.elementLocated(By.css("input[name='password']")));
ig_password_ele.sendKeys(ig_userpass)

//抓到登入按鈕然後點擊
const login_elem = await driver.wait(until.elementLocated(By.css("button[type='submit']")))
login_elem.click()

別忘記在 .env檔填寫 IG登入的帳號密碼

#填寫自己登入IG的真實資訊(建議開小帳號來實驗，因為帳號使用太頻繁會被官方鎖住)
IG_USERNAME='ig username'
IG_PASSWORD='ig password'

2. 判斷使用者是否登入成功

與 FB 類似，IG 要登入之後才會有右上角功能列，這裡我使用他作為判斷登入與否

//登入後才會有右上角功能列，我們以這個來判斷是否登入
await driver.wait(until.elementLocated(By.xpath(`//*[@id="react-root"]//*[contains(@class,"_47KiJ")]`)))

3. 抓出 IG 追蹤人數

3.1 了解響應式網頁對爬蟲的影響

響應式網頁設計(RWD)是什麼？：網頁會根據瀏覽器解析度的不同重新排版，同一個網頁你在手機、平板、電腦看到的畫面配置都是不一樣的
如果你跟我一樣充滿實驗精神，你會發現 IG 的頁面會隨著螢幕寬度更改而重新排版，Xpath 的路徑也會跟著改變
- 寬螢幕 Xpath
```
//*[@id="react-root"]/section/main/div/header/section/ul/li[2]/a/span
```
- 窄螢幕 Xpath
```
//*[@id="react-root"]/section/main/div/ul/li[2]/a/span
```

3.2 設定瀏覽器開啟時的視窗大小

為了避免因為螢幕寬度不一樣造成 Xpath 不同，所以我們要設定瀏覽器開啟時的視窗大小(本專案以寬螢幕作為範例)，這樣才能保證你的爬蟲在不同電腦有一樣的執行結果

// 建立browser的類型
let driver = await new webdriver.Builder().forBrowser("chrome").withCapabilities(options).build();
//考慮到ig在不同螢幕寬度時的Xpath不一樣，所以我們要在這裡設定統一的視窗大小
await driver.manage().window().setRect({ width: 1280, height: 800, x: 0, y: 0 });

3.3 完成前往 IG 帳號並取得追蹤人數的程式

在固定螢幕寬度後，使用 Xpath 就能穩定的抓出帳號追蹤人數

//登入成功後要前往粉專頁面
const fanpage = "https://www.instagram.com/baobaonevertell/"
await driver.get(fanpage)
await driver.sleep(3000)

let ig_trace = 0;//這是紀錄IG追蹤人數
const ig_trace_xpath = `//*[@id="react-root"]/section/main/div/header/section/ul/li[2]/a/span`
const ig_trace_ele = await driver.wait(until.elementLocated(By.xpath(ig_trace_xpath)))
// ig因為當人數破萬時文字不會顯示，所以改抓title
ig_trace = await ig_trace_ele.getAttribute('title')
console.log(`追蹤人數：${ig_trace}`)
driver.quit();

執行程式

在專案資料夾的終端機(Terminal)執行指令
```
yarn start
```
你會看到 Instagram 自動登入 → 跳轉到指定帳號 → 關閉
確認輸出正確的粉專追蹤人數你就成功嚕～

到目前為止我們已經可以抓出 FB & IG 粉專的追蹤人數了，充滿好奇心的讀者可以先試著看看利用爬蟲爬完 FB 粉專後繼續爬 IG

ℹ️ 專案原始碼

今天的完整程式碼可以在這裡找到喔
我也貼心地把昨天的把昨天FB爬蟲的程式碼打包成壓縮檔，你可以用裡面乾淨的環境來實作今天的功能喔
- 請記得在終端機下指令 yarn 才會把之前的套件安裝
- windows需下載與你chrome版本相同的chrome driver放在專案根目錄
- 調整你.env檔填上IG登入資訊

參考資源

Filling in login forms in Instagram using selenium and webdriver (chrome) python OSX

免責聲明:文章技術僅抓取公開數據作爲研究，任何組織和個人不得以此技術盜取他人智慧財產、造成網站損害，否則一切后果由該組織或個人承擔。作者不承擔任何法律及連帶責任！

在許多人的幫助下，本系列文章已出版成書，並添加了新的篇章與細節補充：

加入更多實務經驗，用完整的開發流程讓讀者了解專案每個階段要注意的事項

將爬蟲的步驟與技巧做更詳細的說明，讓讀者可以輕鬆入門

調整專案架構

優化爬蟲程式，以更廣的視角來擷取網頁資訊

增加資料驗證、錯誤通知等功能，讓爬蟲執行遇到問題時可以第一時間通知使用者

排程部分改用 node-schedule & pm2 的組合，讓讀者可以輕鬆管理專案程序並獲得更精確的 log 資訊

有興趣的朋友可以到天瓏書局選購，感謝大家的支持。

購書連結：https://www.tenlong.com.tw/products/9789864348008

FB & IG 爬蟲專案從零開始｜林鼎淵 Dean Lin

【Day30】時間只是考驗，心中信念絲毫未減

專案總結

1. 鐵人賽的收穫

2. 在鐵人賽過程中遇到的挑戰

3. 完整專案程式碼 & 基礎設定說明

1. 鐵人賽的收穫

1.1 了解技術文章與技術文件的差異

1.2 深刻體會以前寫的程式有多爛

1.3 突破過去程式的盲點

2. 在鐵人賽過程中遇到的挑戰

2.1 在週末跟連假期發文

2.2 發現有專案有 bug，而且這個 bug 在好幾天前的文章就有了

2.3 瀏覽人數太低，沒人在你的文章留言跟按 LIKE

3. 完整專案程式碼 & 基礎設定說明

致謝

【Day29】為爬蟲加上通知 - 成功收到 LINE 通知爬蟲摘要訊息，專案大功告成！

筆者有話先說

今日目標

1. 分析爬蟲摘要訊息來源

2. 調整爬蟲函式回傳的資料結構

3. 調整主程式傳遞 lineNotify 所需的參數

index.js

4. 在 lineNotify 中整合摘要訊息

執行程式

ℹ️ 專案原始碼

【Day28】為爬蟲加上通知 - 用 axios 發出 LINE 通知

如何選擇 Node.js 中發出 Request 的套件？

今日目標

1. axios 基礎介紹

2. 用 axios 發出 LINE 通知

1. axios 基礎介紹

1.1 安裝 / GET / POST 基礎用法

1.2 請求配置說明

2. 用 axios 發出 LINE 通知

tools/lineNotify.js

執行程式

ℹ️ 專案原始碼

參考資源

【Day27】為爬蟲加上通知 - 透過 POSTMAN 了解 LINE Notify 如何使用

為什麼通知很重要？

今日目標

1. 取得 LINE Notify 權杖

2. 使用 POSTMAN 測試 LINE Notify

1. 取得 LINE Notify 權杖

.env.exmaple

2. 使用 POSTMAN 測試 LINE Notify

2.1 為什麼要先用 POSTMAN 測試 LINE Notify 呢？

補充：

2.2 用 POSTMAN 發出 LINE 的訊息

2.3 透過 POSTMAN 傳送錯誤參數來了解 HTTP狀態碼的意思

參考資源

【Day26】排程 - 重開機後排程不見惹？簡單幾個步驟，從此以後完全自動

為什麼寫這篇文章

今日目標

1. 設定 mac 排程

2. 設定 windows 排程

1. 設定 mac 排程

1.1 撰寫執行排程的 shell script ：crawler_cron.sh

crawler_cron.sh

1.2 將 crawler_cron.sh 設定為可以被執行

1.3 設定 crawler_cron.sh 在使用者登入後自動執行

1.4 重新登入確認 forever 是否運行

2. 設定 windows 排程

2.1 進入排程設定頁面

2.2 設定觸發條件

2.3 打開 windows 歷程紀錄

2.4 重開機確認 forever 是否運行

ℹ️ 專案原始碼

參考資源

【Day25】排程 - 用forever套件來控管排程，背景執行才是王道！

思考一下昨天的排程有什麼缺點

今日目標

1. 砍掉執行中的排程

ps (process status) - 顯示進程狀態的指令

kill - 刪除執行中的 process

實際操作範例

2. 使用套件 forever 來管理排程

.foreverignore

3. 在 package.json 中加入驅動 forever 的 scripts

4. 在 `lineNotify` 中整合摘要訊息

1.1 撰寫執行排程的 shell script ：`crawler_cron.sh`

2. 使用套件 `forever` 來管理排程

2.1 將主程式的函式`crawler`設定成外部函式，供排程呼叫

2.2 建立專門管控排程的程式：`cron.js`

2.3 調整 `package.json`，建立專門跑排程的 scripts

3.1 插入一個空白欄位：`insertEmptyCol`

4.1 取得 Google Sheets 第一欄的粉專名稱：`readTitle`

4.2 讓新的爬蟲資料正確寫入 Google Sheets：`writeSheet`

1. 改寫`crawlerIG、crawler`這兩隻函式，讓他們依照我們想要格式回傳爬蟲資料

2. 以主程式當橋樑，將爬蟲資料傳遞到`updateGoogleSheets`