在決定以爬蟲作為主題時有朋友勸我不要寫這類有爭議的主題，但因為以下幾點我還是選了這個主題：

1. 爬蟲道德觀：有些網路文章道德觀崩壞，把一個好的技術變成智慧財產的盜賊
2. 中文資源缺乏，技術過時：中文的教學文章較少，許多範例的技術到今天已經無法使用了
3. 缺乏系統性的整合：網路上的資源相對零碎，學習上缺乏系統性，容易在學習過程中遇到問題而半途而廢

學習爬蟲對我有什麼好處?

• 如果你是工程師
  1. 最直接的好處就是讓你在未來職涯上有更多的選擇
  2. 可以大量訓練你對網頁架構的認知
  3. 當你學會爬蟲時，你就能寫出相對來說反爬蟲的網頁了
• 如果你是行銷廣告、電商小編
  1. 你可以透過爬蟲來了解網路世界在資料這塊的邏輯
  2. 就算你看完文章後還是無法完全掌握，但當你請工程師來撰寫爬蟲時，你能很具體地說出你的需求並與工程師溝通順暢
  3. 我認為掌握分析資料能力的人才最有機會做出能說服公司的策略

今日目標

1. 知道如何選擇適合的爬蟲工具
2. 使用 selenium-webdriver 套件開啟瀏覽器：openCrawlerWeb
3. 解決 windows 無法自動讀取 chromedriver.exe 路徑的問題
   • 寫判斷 Driver 是否設定的函式：checkDriver
4. 將 checkDriver 整合進 openCrawlerWeb

1. 如何選擇適合的爬蟲工具?

在Day5有提到尋找工具的方法，現在我們依序來說明:

1. 官方資源
   • 由於近年 FB & IG 的 api 改版頻繁，加上各式各樣權限的限制導致我們連公開資料都無法得到，所以在這裡我們放棄使用官方提供的 api
2. 網路資源
   • 透過下關鍵字我們可以看到很多人分享爬蟲的經驗，我們把這些經驗中看起來能用的套件記錄下來
3. npm 套件
   • 先在 npm 官網 確認這些套件健康程度，太少人用或太久沒更新的就淘汰掉，接著進入實際測試確認是否符合專案需求，以下是我當時找到的資源並附上實測後的分析:
     1. request & cheerio
        • 下關鍵字候第一個找到的資源，使用範例程式測試後確認他可以透過網址抓到網頁元素並進行分析
        • but…他在 FB、IG 面前毫無用武之地，因為 FB 會偵測你使用的瀏覽器，所以在第一關他就陣亡了
     2. selenium-webdriver
        • 基本上他是一個無論是什麼網頁都能夠爬蟲的工具了，我認為非常適合新手使用
        • 工具運行時會開啟一個瀏覽器，這個瀏覽器會依據撰寫的腳本來模擬人類操作的每個步驟
        • 所見即所得，看得到的資訊都能夠抓下來，學習起來非常容易且直覺，所以這是本專案最後選擇的工具
     3. Puppeteer
        • 操作邏輯與 selenium-webdriver 非常類似
        • 預設附帶 Chronium 瀏覽器，不會有瀏覽器匹配問題(但是只能用這個瀏覽器QQ)
        • 只能使用 Node.js 撰寫，不像 selenium-webdriver 有多種語言的 binding

2. 使用 selenium-webdriver 套件開啟瀏覽器：openCrawlerWeb

我的文章會會依據需求使用到它的各種功能，如果有迫不及待的小夥伴也可以先去官網來更深刻的了解他

1. selenium-webdriver前置環境安裝

   • 先在終端機(Terminal)下指令安裝他

     yarn add selenium-webdriver
     

   • 本專案使用的模擬器是 chrome，電腦還沒裝的請先下載

   • 因為跑 selenium 需要用到 driver，大家可以依照自己的作業系統做設定

     • mac 作業系統
       • 如果你用的電腦是 mac，恭喜你，不要需要額外下載 chrome driver 就能夠直接寫使用(不過 chrome 還是要下載)
     • windows 作業系統

       1. 先確認自己 chrome 版本：將chrome://settings/help貼到你的網址列

          

       2. 下載與你 chrome 版本相同的chrome driver

          

          

       3. 下載的檔案解壓縮後將 chromedriver.exe 放到專案根目錄下

2. 用openCrawlerWeb函式打開爬蟲用網頁

   • 因為 selenium-webdriver 是使用非同步函式建立瀏覽器(browser)，所以我們需要加上 await 明確告訴程式必須建立完瀏覽器才能打開網頁

     PS. 因為 javascript 支援非同步語法，所以我們必須很明確地告訴程式他要執行的順序(在 async 的函式中用 await，是標明必須等待這項工作完成才能進入下一步)，否則他跑起來的順序跟你想的不一樣 (並非完成前面工作才執行下一步的順序)，想更深入理解的朋友可以參考這篇文章喔

   index.js

   require('dotenv').config(); //載入.env環境檔
   const webdriver = require('selenium-webdriver') // 加入虛擬網頁套件
   
   async function openCrawlerWeb() {
   
       // 建立這個browser的類型
       let driver = await new webdriver.Builder().forBrowser("chrome").build();
       const web = 'https://www.google.com/';//填寫你想要前往的網站
       driver.get(web)//透國這個driver打開網頁
   }
   openCrawlerWeb()//打開爬蟲網頁
   

3. 執行程式
   在專案資料夾的終端機(Terminal)執行指令

   yarn start
   

   如果執行順利，你會看到 chrome 應用程式自動打開並且進入 google 的首頁

   

3. 解決 windows 無法自動讀取 chromedriver.exe 路徑

因為有人回報部分 windows 就算把 chromedriver.exe 放在專案根目錄也讀不到，所以特別寫了一個 checkDriver 的函式，邏輯如下：

• 判斷電腦是否有預設的 chromedriver
  • Yes → 無須設定
  • No → 確認路徑下是否有 chromedriver.exe 的檔案
    • Yes → 設定 driver 路徑
    • No → 無法設定 driver 路徑回傳 false
• 備註
  • try-catch：顧名思義就是先 try，如果發生問題就會 catch 並執行錯誤處理；之後會有文章深入討論 try-catch 對專案的重要性
  • __dirname：目前檔案所在的資料夾路徑

const chrome = require('selenium-webdriver/chrome');
const path = require('path');//用於處理文件路徑的小工具
const fs = require("fs");//讀取檔案用

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
}

• 將 chromedriver.exe 放到根目錄後記得在 .gitignore 把它加進去忽略清單喔，他屬於不需要版控的檔案

  .gitignore

  node_modules
  .env
  chromedriver.exe
  

4. 將checkDriver整合到openCrawlerWeb

在建立瀏覽器之前，我們先用 checkDriver 函式來確認 Driver 是否是設定，如果無法設定會跳出錯誤提醒，統整後程式如下

index.js

require('dotenv').config(); //載入.env環境檔
const webdriver = require('selenium-webdriver') // 加入虛擬網頁套件
const chrome = require('selenium-webdriver/chrome');
const path = require('path');//用於處理文件路徑的小工具
const fs = require("fs");//讀取檔案用

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 openCrawlerWeb() {

    if (!checkDriver()) {// 檢查Driver是否是設定，如果無法設定就結束程式
        return
    }
    
    // 建立這個broswer的類型
    let driver = await new webdriver.Builder().forBrowser("chrome").build();
    const web = 'https://www.google.com/';//填寫你想要前往的網站
    driver.get(web)//透國這個driver打開網頁
}
openCrawlerWeb()//打開爬蟲網頁

ℹ️ 專案原始碼

• 今天的完整程式碼可以在這裡找到喔
• 我也貼心地把昨天的把昨天的程式碼打包成壓縮檔，你可以用裡面乾淨的環境來實作今天的功能喔
  • 請記得在終端機下指令 yarn 才會把之前的套件安裝
  • windows需下載與你chrome版本相同的chrome driver放在專案根目錄

參考資源

1. [JS] 談談 JavaScript 中的錯誤處理 Error Handling
2. 為什麼用 (或不用) Puppeteer
3. 重新認識 JavaScript: Day 26 同步與非同步
4. 鐵人賽：JavaScript Await 與 Async

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

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

• 加入更多實務經驗，用完整的開發流程讓讀者了解專案每個階段要注意的事項
• 將爬蟲的步驟與技巧做更詳細的說明，讓讀者可以輕鬆入門
• 調整專案架構
  • 優化爬蟲程式，以更廣的視角來擷取網頁資訊
  • 增加資料驗證、錯誤通知等功能，讓爬蟲執行遇到問題時可以第一時間通知使用者
  • 排程部分改用 node-schedule & pm2 的組合，讓讀者可以輕鬆管理專案程序並獲得更精確的 log 資訊

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

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

你不用很厲害才開始，你要開始了才會很厲害！

為什麼選擇這個題目？

因朋友職業需求需要搜集與公司同類型品牌FB及IG粉專的資料，用每日追蹤人數的變化及貼文數量來做數據分析，像是：

1. 觀察發文頻率是否與紛絲成長數量成正比
2. 某個粉專突然因為某篇貼文而紛絲爆量成長

有這些數據後方便研擬各項策略，但需要追蹤的FB跟IG品牌頁面加起來超過 200 個(真的狂，這是現實案例)，如果靠手指一個一個點開，複製貼上到 excel，這個機械式的動作重複兩百多次我想想都很崩潰，於是他便向我詢問是否有辦法讓這些步驟自動化

這三十天我能學到什麼？

說點喪志的話，無論我分享什麼技術，他遲早會被這個世界淘汰

所以我認為與其透過文章讓你掌握技術，不如透過技術培養解決問題的邏輯

這系列文章是透過一個真實外包案例，從零開始逐步分析如何完成它

文章大綱

1. 開發前環境設定 【day2】
   • 教你安裝本專案所需要的開發工具，確保能完成日後的實作
2. 寫程式所需的基礎常識(Node.js) 【day3~day7】
   • 如何撰寫不被同事嫌棄的程式
   • 喚醒開發過程中被忽略的小技巧提升工作效率
   • 結合經驗與專案實務，讓你了解沒常識有多可怕
3. 爬蟲抓取網頁資訊(selenium) 【day8~day16】
   • 理解為什麼挑選這個工具
   • 網頁結構的分析技巧
   • 完成需求後，程式重構與錯誤處理的重要性
4. 將取得的資訊儲存(Google Sheets) 【day17~day23】
   • 思考符合客戶需求的資訊載體
   • 學會閱讀官方的文件
   • 處理匯入爬蟲資料遇到的問題
   • 在專案發生bug、有新功能需求時與客戶溝通的技巧
5. 設定排程自動執行 【day24~day26】
   • 有時一個工具不足以完成需求，培養將多種工具串連解決問題的能力
6. 排程完成後透過LINE回報執行狀況 【day27~day29】
   • 了解使用 api 前先用第三方程式測試的重要性
   • 重構程式將專案爬蟲的訊息整合，透過 LINE 回傳當日爬蟲狀況

文章的內容著重於思考

我所提供的答案只是僅供參考

一道題目解決的方法肯定不只一種，對於工程師而言最珍貴的是思考的過程

直接看答案會限制你的思維

有了思考的過程你會給出一個更棒的解決方法

題目分析

• 專案目標： 透過爬蟲拯救一個沈淪在FB、IG分析報表的小編

• 使用工具： 只要能把他從每天重複的動作中拯救出來就好，不管你用什麼工具

• 外包預算： 友情無價，外包有價

  如果有朋友間的外包，我強烈建議一定要收錢，你的收費可以遠低於市場報價，但絕對要收錢，如果你不收錢，有超高機率鬧得雙方不愉快
  並且你在做功能前要先報價，確定對方可以接受後再開始實做
  技術是有價值的，你有收錢，你會給自己時間壓力；對方有付錢，會認真地使用你做出來的產品並給予回饋
  這樣才是正向循環
  我看過太多朋友間免費的專案，到最後不是胎死腹中就是爛尾，所以請報價吧，對雙方都好

• 專案期限:
  越快越好

需求規格

我想很多工程師都遇過親朋好友委託專案，而他們給需求時通常都是很不具體的，你也不可能要他們寫需求規格書

所以我建議你要自己研擬一份簡易的需求規格書，並說明一些但書以免日後爭議

1. FB
   1. 取得粉專追蹤人數
   2. 取得當日貼文數
   3. 頻率: 1次/天
   4. 報表出來時間: 22:00
2. IG
   1. 取得粉專追蹤人數
   2. 取得當日貼文數
   3. 頻率: 1次/天
   4. 報表出來時間: 22:00
3. 報表呈現
   1. excel格式
   2. 標題點進去可以直接連結粉專
   3. FB與IG粉專各自獨立分頁顯示
   4. 爬蟲日期為欄，粉專標題為列
   5. 首欄與首列需要凍結窗格，方便使用者操作(新增需求)
   6. 插入日期為倒序插入，由近到遠(新增需求)
4. 爬蟲完成通知(新增需求)
   1. 使用line進行通知(新增需求)
   2. 通知包含：總掃描粉專數量、共費時間、Google Sheets連結、無法正常爬蟲頁面列表(新增需求)
5. 專案執行位置
   1. 自己電腦
6. 預計交期
   1. 請研擬一個自己絕對能做出來的時間，只能多不能少
7. 功能報價
   1. 這個部分關係到你對工具的熟悉程度、程式執行的效率、程式的穩定性、功能項目多寡…，光這個估計都能完成鐵人30篇惹
8. 備註
   1. 如果FB或IG的網頁結構上的更動導致無法用原先程式運行時需與工程師討論維護報價

實作的步驟

1. 使用什麼工具完成
2. 列出功能項目報價
3. 哪個功能項目需要最先研究
4. 如何讓對方能夠使用及測試功能
5. 結案與維護

以上是我接案之前就會先思考的問題，但實際情況通常會比我列出這些步驟更為複雜，各位讀者也可以想想看自己在遇到這些需求時會怎麼設計呢～

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

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

感謝大家的閱讀，如果喜歡我的文章可以按Like支持一下喔，我們明天見

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

• 加入更多實務經驗，用完整的開發流程讓讀者了解專案每個階段要注意的事項
• 將爬蟲的步驟與技巧做更詳細的說明，讓讀者可以輕鬆入門
• 調整專案架構
  • 優化爬蟲程式，以更廣的視角來擷取網頁資訊
  • 增加資料驗證、錯誤通知等功能，讓爬蟲執行遇到問題時可以第一時間通知使用者
  • 排程部分改用 node-schedule & pm2 的組合，讓讀者可以輕鬆管理專案程序並獲得更精確的 log 資訊

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

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