JavaScript 爬蟲新思路！從零開始帶你用 Node.js 打造 FB＆IG 爬蟲專案（iT邦幫忙鐵人賽系列書）

林鼎淵(Dean Lin)

待過專業的接案公司、也有獨立接案的經驗，這本書教的是從談需求到真實商業環境的程式開發，可以讓讀者接地氣的學習。

筆者擁有5年的全端開發經驗，熟悉 Vuetify、Node.js、Laravel 等前後端技術；同時也兼職公司內部伺服器管理與 Gitlab 架設部署等相關任務。

除了精進工作上的技術外，也會研究新的技術領域；在2019年出於對魔術的愛好， 學習並運用 React Native 開發了能在行動裝置 Android/iOS 運行的魔術 APP。

在空閒時會與朋友交流 idea，碰上有趣的想法就會研究相關技術並將其寫成 Side Project，像本書的爬蟲技術就是為了幫朋友解決工作遇到的困擾而研究的。

不僅對技術充滿熱情，更會將自身的經驗分享到部落格上，希望可以幫助遇到相同問題的人：
https://medium.com/dean-lin

PART 1 先了解專案需求，再思考如何實作

01 需求訪談
 1.1 傾聽客戶的需求
 1.2 向客戶推薦解決問題的方法

02 撰寫需求規格書
 2.1 專案分析
 2.2 需求規格
 2.3 新手接案的注意事項
 2.4 如何避免接案後無法完成功能交付的困境

PART 2 開發前環境介紹& 設定

03 開發前環境介紹＆設定
 3.1 Node.js
 3.2 nvm
 3.3 Git
 3.4 Yarn
 3.5 VSCode

PART 3 寫程式所需的基礎常識（Node.js）

04 寫程式時該注意的基本原則
 4.1 正確的宣告變數
 4.2 有意義的命名
 4.3 避免重複的程式碼
 4.4 避免寫出大眾難以理解的程式
 4.5 好的註解
 4.6 錯誤處理 & 日誌（log）

05 認識 Node.js 專案
 5.1 建立 Node.js 程式
 5.2 執行 Node.js
 5.3 認識專案管家：「package.json」
 5.4 善用 scripts （腳本）執行程式
 5.5 使用 license 保護自己的權益
 5.6 取得筆者專案原始碼

06 用 Yarn 安裝及控管套件
 6.1 套件對工程師的幫助
 6.2 如何找出適合的套件
 6.3 安裝套件，觀察安裝後目錄結構的變化
 6.4 控制套件版本範圍
 6.5 下關鍵字找工具的方法

07 善用「.env」管理環境變數，幫你快速遷移專案
 7.1 為什麼專案需要環境變數？
 7.2 環境變數的使用時機
 7.3 分析專案中哪些參數適合當環境變數
 7.4 學會使用環境變數

08 在「.gitignore」設定不加入版控的資料
 8.1 慘痛經驗分享
 8.2 哪些檔案/ 資料夾不需要放入版控？
 8.3 在專案加入「.gitignore」
 8.4 透過 VSCode 確認是否成功將檔案加入忽略清單
 8.5 為環境變數建立一個可以上傳的範例檔

PART 4 用 selenium-webdriver 爬蟲網頁資訊

09 爬蟲之前
 9.1 學習爬蟲對我有什麼好處?
 9.2 爬蟲前請注意這些事情避免違法
 9.3 選擇符合需求的爬蟲工具

10 認識 selenium-webdriver，操作所見即所得的爬蟲工具
 10.1 安裝 selenium-webdriver 套件 & 環境
 10.2 使用 selenium-webdriver 套件開啟瀏覽器
 10.3 解決 Windows 無法讀取 chromedriver.exe 的問題
 10.4 解決 Windows 開啟瀏覽器時跳出 USB: usb_device_handle_win.cc 的錯誤

11 爬蟲第一步，FB 先登入
 11.1 學會分析網頁結構 - 以 FB 登入頁為範例
 11.2 打造自動登入 FB 的小程式
 11.3 專案原始碼 & 執行程式

12 關閉干擾爬蟲的彈窗，取得 FB 粉專追蹤數
 12.1 關閉通知彈窗
 12.2 將大目標拆解成小目標，以前往 FB 粉專取得追蹤人數資訊為例
 12.3 前往 FB 粉專
 12.4 分析 FB 粉專頁面結構
 12.5 取得 FB 粉專追蹤人數
 12.6 完成爬蟲後關閉瀏覽器
 12.7 專案原始碼 & 執行程式

13 舉一反三，帶你了解 IG 爬蟲不可忽略的細節
 13.1 分析 IG 登入畫面元件
 13.2 使用 css 抓取元件，完成 IG 自動登入
 13.3 分析畫面判斷使用者是否登入成功
 13.4 了解響應式網頁對爬蟲的影響
 13.5 設定瀏覽器開啟時的視窗大小
 13.6 前往 IG 帳號並取得追蹤人數
 13.7 專案原始碼 & 執行程式

14 合體吧！用一隻程式搞定 FB、IG 爬蟲
 14.1 瀏覽器關閉時機錯誤導致爬蟲中斷
 14.2 跨網域（CORS）錯誤
 14.3 一隻程式爬完 FB & IG 粉專
 14.4 思考程式上有什麼地方需要改進
 14.5 專案原始碼 & 執行程式

15 重構程式碼，減少歷史業障
 15.1 主程式做了太多事情
 15.2 一個函式做了太多事情
 15.3 物件宣告的方式太複雜且多次被使用
 15.4 專案原始碼 & 執行程式

16 用try-catch 捕獲爬蟲過程發生的錯誤
 16.1 了解 try-catch-finally 的語法
 16.2 思考專案中有哪些地方需要加上 try-catch 的機制
 16.3 try-catch 設計時要注意的重點
 16.4 加入 preCheck.js 做為第一道防線
 16.5 在專案的 crawlerIG.js 加入 try-catch
 16.6 將等待時間設定為變數
 16.7 專案原始碼 & 執行程式

17 json x 爬蟲 = 瑣事自動化
 17.1 客戶要將爬蟲的網址列表填到什麼檔案呢？
 17.2 了解 json 格式與基本規則
 17.3 在專案中加入 json 格式的粉專清單
 17.4 在 JavaScript 檔引入 json 檔案
 17.5 撰寫批量爬蟲程式
 17.6 專案原始碼 & 執行程式

18 驗證 json 的內容是否符合格式
 18.1 為什麼 json 在使用前要先驗證格式？
 18.2 認識驗證 json 格式的套件：「jsonschema」
 18.3 測試 jsonschema 的範例程式
 18.4 用 jsonschema 來驗證 json 粉專清單
 18.5 將驗證的程式統整為函式：「jsonValidator」
 18.6 專案原始碼 & 執行程式

19 優化爬蟲的小技巧
 19.1 思考優化的方向
 19.2 優化爬蟲執行效率及穩定度
 19.3 讓爬蟲在背景執行
 19.4 偽裝瀏覽器的 user-agent
 19.5 將優化的起動條件設定到「.env」
 19.6 專案原始碼 & 執行程式

20 學會爬蟲，之後呢？
 20.1 感覺爬蟲技術還沒學夠
 20.2 我還是想不到爬蟲可以用來做什麼

PART 5 使用 Google Sheets 儲存爬蟲資訊

21 免費儲存資料的好選擇，一起進入省錢起手式
 21.1 取得 Google Sheets 憑證（credentials）
 21.2 在專案加入官方提供的範例程式做測試
 21.3 將 Google Sheets 的憑證、授權檔加入「.gitignore」
 21.4 專案原始碼

22 了解官方範例在做什麼事
 22.1 套件不是照著官方文件安裝就沒事了
 22.2 分析官方範例程式
 22.3 取得「spreadsheetId」，並加入「.env」
 22.4 撰寫讀取指定 Google Sheets 的函式
 22.5 專案原始碼 & 執行程式

23 你在文件迷路了嗎？用兩個處理 Sheet 的範例帶你攻略官方文件
 23.1 拆解爬蟲資料寫入 Google Sheets 的步驟
 23.2 讀取 Google Sheets 內的 Sheet 資訊
 23.3 取得 FB 粉專、IG 帳號的 Sheet 資訊
 23.4 建立放 FB 粉專、IG 帳號爬蟲資料的 Sheet
 23.5 重新架構 Google Sheets 程式
 23.6 在主程式呼叫更新 Google Sheets 的函式
 23.7 專案原始碼 & 執行程式

24 寫入爬蟲資料，告別 Copy & Paste 的日子
 24.1 分析 Google Sheets 要呈現的資訊， 統整爬蟲函式要回傳的資料
 24.2 修改爬蟲函式，讓函式回傳我們需要的爬蟲資料
 24.3 以主程式為橋樑，將爬蟲回傳的資料更新至 Google Sheets
 24.4 將 FB、IG 粉專爬蟲資料寫入各自的 Sheet
 24.5 專案原始碼 & 執行程式

25 客戶：「爬蟲資料塞錯位置！」專案被報 Bug 的處理方式
 25.1 將客戶報的 Bug 做基礎分類
 25.2 引導客戶說出 Bug 發生原因及提出解決方案的小技巧
 25.3 重現客戶發生的 Bug
 25.4 改寫程式讓新的爬蟲資料塞入正確位置
 25.5 專案原始碼 & 執行程式

26 客戶：「我希望新資料插在最前面！」如何談需求變更
 26.1 了解驗收過程中需求規格書的重要性
 26.2 談需求變更
 26.3 將新的爬蟲資料寫到最前面，日期為由近而遠的排序
 26.4 專案原始碼 & 執行程式

27 優化格式，滿足客戶需求 & 談使用者體驗
 27.1 不好的使用者體驗來自於哪些因素
 27.2 從客戶回饋中，討論需要新增哪些需求
 27.3 優化用手機看 Google Sheets 的體驗
 27.4 專案原始碼 & 執行程式

PART 6 設定排程自動執行爬蟲程式

28 用Schedule 套件讓爬蟲自己動起來
 28.1 排程套件：「node-schedule」
 28.2 把排程加入爬蟲
 28.3 專案原始碼 & 執行程式

29 用 pm2 套件來控管 Node.js 排程，背景執行才是王道！
 29.1 在 Mac 砍掉執行中的 Node.js 排程
 29.2 在 Windows 砍掉執行中的 Node.js 排程
 29.3 使用套件「pm2」來管理 Node.js 程式
 29.4 使用「pm2-logrotate」來切割 log
 29.5 用「pm2 ecosystem」取代「pm2 CLI」
 29.6 在「package.json」中加入驅動 pm2 的 scripts
 29.7 讓 Mac 重啟時 pm2 自動啟動
 29.8 讓 Windows 重啟時 pm2 自動啟動
 29.9 專案原始碼 & 執行程式

30 今天爬蟲怎麼沒有跑？來試試系統內建的排程吧！
 30.1 用「Crontab」設定 Mac 排程
 30.2 用「taskschd」設定 Windows 排程
 30.3 一開始教內建的方法就好了，為什麼還要學 pm2、node-schedule ？

PART 7 透過 LINE 回報爬蟲狀況

31 透過 POSTMAN 了解 LINE Notify 如何使用
 31.1 取得 LINE Notify 權杖
 31.2 使用 POSTMAN 測試 LINE Notify

32 用 axios 發出 LINE 通知
 32.1 axios 基礎介紹
 32.2 用 axios 發出 LINE 通知
 32.3 專案原始碼 & 執行程式

33 整合 LINE 的爬蟲通知，專案大功告成！
 33.1 分析使用者需要的訊息及來源
 33.2 調整爬蟲函式回傳的資料結構
 33.3 調整主程式傳遞 lineNotify 所需的參數
 33.4 在「lineNotify」函式傳送通知
 33.5 專案原始碼 & 執行程式