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 專案原始碼 & 執行程式



?