前言：需求來自於實務

其實會想做這個功能，是因為不久前出版書籍後，陸續有人填寫 Google 表單回傳自己的心得。

而我這次有給填寫表單的讀者「30 分鐘免費諮詢」的回饋，但因為把諮詢的報名連結放在 Google 表單「確認訊息」的位置，導致有些讀者根本沒注意到它的存在，因此便想透過自動寄送 email，來解決這個囧境。

你也可以先體驗看看筆者完成的 Demo，只要填寫電子郵件，並在「是否願意收到電子報」的欄位選擇「是」，提交後便會收到自動發送的郵件嚕！

STEP 1 ：產生 HTML email

其實這個步驟並非必需，但為了讓寄送的 email 有基礎的質感，筆者還是決定製作一個 HTML email。

看到 HTML 先別慌，現在網路上有非常多的資源，只要拖拉點選，一行程式碼都不用寫就能產生出來，這邊筆者是使用 Beefree 這個網站提供的服務，在這裡有擁有豐富的版型供你選擇（雖然筆者還是選用空白模板）。

它的使用非常方便，你甚至可以在不註冊的狀態下製作自己的 HTML email；不過如果你擔心自己會失手關閉網頁，還是建議註冊登入。

在完成 HTML email 後，點擊右上角的 Download 會獲得一個壓縮檔，解壓縮後你會看到裡面的「beefree-xxx.html」檔，筆者建議重新命名成「email-content.html」方便辨識（這個 HTML 在後面的步驟會用到，請妥善保存）。

備註：

1. 免費版在最下面會有 Beefree 的 Logo，它可以在下載後透過編輯 HTML 來刪除。

2. 如果有使用到圖片，建議先上傳到 Imgur，再把產生連結貼回來（ex：https://i.imgur.com/Oonq5Gy.jpg），詳細流程這邊不再贅述。

SETP 2：建立 Google 表單

建立表單的步驟我就不再示範了，需要注意的是「電子郵件（email）」這個欄位需要設定為必填，不然你也沒有寄信的對象啊！

為了驗證 Google 表單的參數可以作為邏輯判斷使用，我這邊再新增一個「是否願意收到電子報」的問題，依照回答的「是/否」來決定要不要寄送 email。

SETP 3：從 Google 表單產生 Google 試算表

在「回覆」的 Tab 中，點擊「Google 試算表」的 icon 便會跳出建立 Google 試算表的詢問視窗。

下面是自動產生的 Google 試算表。

STEP 4：從 Google 試算表建立 Apps Script

點擊工具列的「擴充功能」，再點擊「Apps Script」便會產生嚕！

在 Apps Script 裡面用「新增檔案」建立一個 HTML，並將 STEP 1 產生的 HTML 程式碼貼回去。

接著要撰寫 Apps Script 裡面的程式邏輯（程式碼.gs）。

我們要先抓取 Google Form 裡面提交的值，如果「是否願意收到電子報」的值為「否」，我們就跳出函式；若為「是」，我們便將 HTML email 寄出（相關注意事項請看備註描述）。

function onSubmit(datas) {
  
  // 取得提交的值（你的欄位名稱可能與我不同）
  var data = datas.namedValues;
  var replyEmail = data['電子郵件地址'][0];
  var isReceiveEDM = data['是否願意收到電子報'][0];

  if (isReceiveEDM === '否'){
    // 如果拒絕收到電子報就直接結束
    return;
  }

  // 取得上傳的 HTML 檔
  var edmHTML = HtmlService.createTemplateFromFile('email-content');
  
  // 設定HTML裡的變數
  edmHTML.data = data;
  
  // 產出成要發送的 HTML
  var output = edmHTML.evaluate().getContent();

  // 發送信件
  MailApp.sendEmail({
    to: replyEmail,
    subject: "[系統發送] 感謝您填寫「Dean Lin 的回饋表單」",
    htmlBody: output
  });
}

原始碼：email-response.gs（GitHub Gist）

STEP 5：設定觸發條件

在上面的步驟完成後，我們要將 Google 表單的事件與剛剛撰寫的程式綁定；因此我們要到左側的功能列，點擊「觸發條件」。

接著點擊右下角的「新增觸發條件」。

觸發條件可以參考筆者在紅框的選擇，完成後按右下角的「儲存即可」。

接下來 Google 會跳出一堆需要你授權的彈窗，順序大概是「選擇帳戶 → 驗證 app → 允許 app 權限」。

Final：測試發信

終於走到最後一步惹 🤣

我們來填寫 Google 表單，確認是否會順利自動寄信。

如果收到 email，就大功告成嚕！

教學到這邊就結束啦～希望大家按照步驟都能順利完成，提供更多的資訊給目標 TA，讓宣傳效果 Up Up！

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

今日目標

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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);
  }
}

執行程式

1. 在執行程式之前請先把 Google Sheets 的’FB粉專’、‘IG帳號’這兩個 sheet 刪除，因為要觸發 addSheet 才會有窗口凍結的功能

2. 刪除 sheet 後在專案資料夾的終端機(Terminal)執行指令

   yarn start
   

   

3. 執行完畢後確認 Google Sheets 是否有符合今天設定的格式：窗口凍結、欄位寬度調整

   

⏭️ 下個階段

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

ℹ️ 專案原始碼

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

參考資源

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

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

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

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

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

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

今日目標

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

2. 談需求變更

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

3.1 插入一個空白欄位：insertEmptyCol

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

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

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

2. 談需求變更

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

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

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

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

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

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

客戶：對，麻煩了

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

客戶：恩…可以

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

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

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

1. 先在第二欄插入一個空白欄位
2. 把空白欄位更新成最新的追蹤人數資訊

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 的參數，我們需要對以下程式做調整：

1. 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)
     }
   }
   

2. writeSheet :

   1. 傳入 sheet_id 參數讓 insertEmptyCol 使用

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

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

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

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

執行程式

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

   yarn start
   

2. 在終端機我們可以看到事先插入新欄位再更新資料

   

3. 確認新的爬蟲資料有正確插入到 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

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

為什麼寫這篇文章？

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

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

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

第 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

1. 我們這裡用 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/"
       }
   ]
   

2. 執行程式 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)
}

執行程式

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

1. 依照自己的想法去編修線上的 Google Sheets、調整爬蟲json 內容

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

   yarn start
   

3. 在爬蟲跑完後看看線上的 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

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

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 長得像下圖：

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

1. 第一欄為 粉專名稱+粉專網址 組合的 HYPERLINK，每次執行爬蟲時我們會用 writeTitle 這個函式來更新第一欄的資料
2. 因為希望新的爬蟲紀錄會寫入到下一欄，所以我們寫一個函式 getLastCol 來取得 Sheet 最後一欄的空白欄位
3. 取得目標寫入欄位後，我們用函式 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 的範例

1. 有了昨天的經驗我們可以很容易找到今天所需的資源，在範例首頁的大標題Basic Writing就符合今天的需求

   

2. 在閱讀 Basic Writing 描述時有兩個標題吸引我的注意

   • Append Values：在閱讀標題時我原本覺得是最好的選擇，但發現他只能插入列(row)，與我們插入欄(col)的需求不符

   • Write a single range：在開頭便提供了一個連結，並說這個方法能寫入指定 Sheet 範圍內的資料

     

3. 接著你可以用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);
    }
}

執行程式

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

   yarn start
   

2. 確認執行過程中爬蟲資料抓取正常且更新 Google sheets 時沒有錯誤

   

3. 點進去連結看看線上的 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

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

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

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

1. 取得放 FB、IG爬蟲資料的 Sheet 資訊(今日目標)
2. 將 FB、IG爬蟲資料寫入各自的 Sheet Day20
3. 插入新的爬蟲資料前先分析粉專欄位，再將資料放入正確的位置 Day21
4. 將新的爬蟲資料改為插入第二欄，日期由近而遠排列 Day22
5. 調整 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 的範例

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

   標題 Sheet Operations 的描述上比較符合我們需求，因為我們要找出 spreadsheet 底下的 sheet 資訊

   

2. 進入Sheet Operations頁面後一樣先從標題下手

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

   

3. 看Determine sheet ID and other properties的描述

   第一段給了一個連結，並說 這個方法能取得特定 spreadsheet 底下 sheet 的屬性

   

4. 接下來要確認 spreadsheets.get 這個方法是否真的符合我們的需求

   1. 首先我們看到 Google 非常貼心提供線上測試 api 的地方

      

   2. 進入測試 api 全螢幕模式後，填寫自己的 spreadsheetId、憑證權限 接著按下 EXCUTE 即可在右下角看到 api 的回傳資訊

      

   3. 打開自己的 Google Sheets 來與 api 的回傳資訊做對照

      

      • 從回傳的 json 我們就能知道所需的資訊被放在 sheets 這個陣列中，並且可用 sheets[].properties.title 這個參數判斷 ‘FB粉專’、‘IG帳號’ 的 Sheet 是否已經建立

        

5. 確認這個 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 資訊分成幾個步驟

1. 先取得線上的 sheets：getSheets
2. 判斷 ‘FB粉專’、‘IG帳號’ 是否在getSheets回傳的資料裡面
   • 存在就將 sheetId 資訊儲存
   • 不存在就用函式新增一個 Sheet：addSheet
3. 回傳更新後的 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 的範例

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

   標題 Add a sheet 超級直觀，就是他惹！

   

2. 看Add a sheet的描述

   • 第一段提供一個連結，並說這方法能新增 sheet 到 spreadsheet

   • 下方提供了 request 的範例，讓我們能大概了解新增 Sheet 可以調整哪些參數

     

3. 接著來確認Method: spreadsheets.batchUpdate是否符合需求

   1. 打開 Try this API(在最下方)，Request body 請依下圖設定，title 的內容可以自行調整

      

   2. 按下 EXCUTE 按鈕後，確認自己的 Google Sheets真的成功新增一個 title 為 test1 的 Sheet

      

   3. 從回傳資料中找出 sheetId 的位置：replies[0].addSheet.properties.sheetId

      

4. 確認這個 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 的外部函式模組，這個函式今天有兩個任務：

1. 取得 Google Sheets 授權：getAuth
2. 取得 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()

執行程式

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

   yarn start
   

   你會遇到如下的錯誤：

   

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

   1. 刪除原本的 token.json

   2. 修改憑證的執行權限

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

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

   yarn start
   

4. Google 會要求你再點一次連結重新取得授權碼，貼上後你會看到線上的 Google Sheets 成功新增 sheets 了

   

   

5. 如果你重複執行指令 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

盡信書不如無書

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

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

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

1. 我們先觀察官方對 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.
   */
   

2. 再觀察裡面 spreadsheetId 的參數

   spreadsheetId: '1BxiMVs0XRA5nFMdKvBdBZjgmUUqptlbs74OgvE2upms'
   

   就會發現 spreadsheetId 這個參數在範例網址中間：
   docs.google.com/spreadsheets/d/ 1BxiMVs0XRA5nFMdKvBdBZjgmUUqptlbs74OgvE2upms /edit

3. 我們建立好 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官方文件

執行程式

1. 先在自己的 Google Sheets 表格上隨機輸入文字

   

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

   node tools/google_sheets/index.js
   

3. 看看輸出的結果是否與你 Google Sheets 上的一致呢～

   

ℹ️ 專案原始碼

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

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

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

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

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

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

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

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

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

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

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

今日目標

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

1. 取得 Google Sheets 憑證(credentials)

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

憑證(credentials)取得的步驟

1. 請先確認已經安裝過 Node.js & npm(跟著教學走的人都安裝過)，有 Goolge 帳號
2. 進入 Google Sheet Node.js 申請憑證(credentials)的網頁

   1. 按下紅框處按鈕 Enable theGoogle Sheets API

      

   2. 輸入專案的名稱，建議填寫符合專案功能的命名

      

   3. 本轉案選擇 Desktop app 即可

      

   4. 千萬不要忘記下載這個憑證，下面的Client ID、Client Secret不需特別複製，都存在憑證檔裡面了

      

3. 在專案的tools 資料夾下新增一個 google_sheets 資料夾，專門存放 Google Sheets 相關檔案
4. 將下載好的憑證(credentials.json)放進去 google_sheets 資料夾，這樣的目錄節結構會方便我們日後管理

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

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

1. 下載 googleapis 套件

   yarn add googleapis@39
   

2. 在 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.');
       }
   });
   }
   

3. 在終端機(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

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

為什麼選擇這個題目？

因朋友職業需求需要搜集與公司同類型品牌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

為什麼撰寫這篇文章

在上一篇文章已經介紹了Google App Script如何串接Line Message Api的應用，在這裡我將延續之前的議題，讓Line機器人變成你的小秘書

文章目標

1. 使用Google Sheet裡面Script的功能
2. 使用簡單的SQL語法抓出Google Sheet中你需要的資訊

本文章使用到的技術：

1. Google App Script : 這次著重在執行SQL語法
2. Google Sheet : 會把它當成讀取/寫入的資料庫

STEP 1: 結合Google Sheet的衍生應用

Google App Script功能很多，但能做到什麼地步就看個人的想像能力，接下來我提供的只是一條思路，如果大家想到有趣的應用歡迎下方留言

如果大家平常有使用Google sheet當成工作記錄習慣的話，你可以嘗試看看這個應用

這裡我先創建一個Google Sheet，裡面建立一些清單(你可以直接複製我的)：

接著建立Google Sheet的Script

將以下程式複製貼上，如果您願意可以自由更改，記得將上一篇取得的line token放上去喔

var ss = SpreadsheetApp.getActiveSpreadsheet()//抓取這張excel
function doPost (e) {
    var msg = JSON.parse(e.postData.contents);
    // 取出 replayToken 和發送的訊息文字
    var replyToken = msg.events[0].replyToken;
    var userMessage = msg.events[0].message.text;

    if (userMessage.indexOf("未完成") > -1) {//分析傳遞字串確認是否有“未完成”
        // QUERY(目標文件及範圍,SQL語法)
        // 尋找sheet1範圍A2到C100裡面A跟B欄位的資料且C欄位為FALSE
        var formulaToUse = '=QUERY(Sheet1!A2:C100,"SELECT A,B WHERE C = FALSE")'
        var result = query(formulaToUse)

        var userMessage = '未完成文件如下：\n';//單純的文字組成
        result.forEach(row => {
            userMessage = userMessage + row[0] + ':' + row[1] + '\n'
        })
        return sendLineMsg(userMessage, replyToken);
    }
    if (userMessage.indexOf("已完成") > -1) {//分析傳遞字串確認是否有“已完成”
        var formulaToUse = '=QUERY(Sheet1!A2:C100,"SELECT A,B WHERE C = TRUE")'
        var result = query(formulaToUse)
        var userMessage = '已完成文件如下：\n';
        result.forEach(row => {
            userMessage = userMessage + row[0] + ':' + row[1] + '\n'
        })
        return sendLineMsg(userMessage, replyToken);
    }
    if (userMessage.indexOf("功能") > -1) {//這是列出你有提供功能的列表
        return sendLineMsg('朕不給的你不能搶ㄎㄎ\n• 未完成 ：列出excel未完成清單\n• 已完成 ：列出excel已完成清單', replyToken);
    }
}
function query (request) { //執行SQL語法的地方
    var sheet = ss.insertSheet(); //先插入一張新的sheet(也許有更好的做法，如果有請告訴我ＱＱ)
    sheet.getActiveRange().setFormula(request); //執行SQL
    var result = sheet.getDataRange().getValues(); //把整張表抓下來
    ss.deleteSheet(sheet); //把sheet刪除
    Logger.log(result);//可透過log來看輸出的資訊(上方的View Logs)
    return result; //回傳結果
}
function sendLineMsg (Message, replyToken) {
    var CHANNEL_ACCESS_TOKEN = '你的 Channel access token';

    var url = 'https://api.line.me/v2/bot/message/reply';
    UrlFetchApp.fetch(url, {
        'headers': {
            'Content-Type': 'application/json; charset=UTF-8',
            'Authorization': 'Bearer ' + CHANNEL_ACCESS_TOKEN,
        },
        'method': 'post',
        'payload': JSON.stringify({
            'replyToken': replyToken,
            'messages': [{
                'type': 'text',
                'text': Message,
            }],
        }),
    });
}

原始碼：line_secretary.gs（GitHub Gist）

接下來要將這個程式發布（如果有授權相關問題必須都接受才會通過）

Project version記得每次都要選擇New(否則不會更新)，並且要允許任何人可以存取這隻app，不然你的程式無法被line機器人執行

接下來複製你這串web app URL給LINE Message Api使用

貼到webhook URL上面後按下Save

STEP 2 : 驗證串接成功

打開你的LINE就可以輸入下面三種文字，機器人就會做相對應的回覆喔！

1. 功能
2. 未完成
3. 已完成

希望大家喜歡這篇文章的應用～

為什麼撰寫這篇文章

Google App Script在以前我就非常的喜愛，也曾用他來當我專案後台登入的api來使用，搭配上Google Sheet，你簡直獲得了免費資料庫(不過他執行的速度就…反正就免費的速度XD)

但為了讓技術經過這段日子獲得更多提升，我想在原先資料庫的應用上加點料，比如說串接機器人，讓機器人對你定期提醒

本文章僅僅是示範最簡單的應用層面，實際上應該有非常多的應用等待大家去發掘

文章目標

1. 了解Google App Script，可撰寫簡單api並附帶參數
2. Google App Script串接Line機器人，讓你可以自由決定使用功能

本文章使用到的技術：

1. Google App Script : 撰寫你想要執行的邏輯
2. LINE developers : 打造自己的lINE機器人

SETP 1: 建立 LINE Messaging API

我們要先在這裡申請到line發送訊息所需要的token

除了Channel type要寫Messaging API外其他就自由發揮，反正你填錯或是漏填LINE會逼著你填完

新增完成後在Messaging Api裡面的basic id就是這個機器人在line的id

你就能在line裡面透過id找到他惹

除了id之外最重要的就是token，這個也是在Messaging Api裡面的Channel access token

另外我們不需要Greeting message、Auto response的功能

STEP 2 : 建立 Google Apps Script 接收 LINE 訊息

你可以在這裡開始你的Google App Script的故事 ，點擊Start Scripting，開啟一個Google App Script的專案吧

將以下程式複製貼上，如果您願意可以自由更改，記得將剛剛取得的line token放上去喔

function doPost (e) { //凡事使用post method皆要通過這個function 

  var CHANNEL_ACCESS_TOKEN = '你的 Channel access token';
  var msg = JSON.parse(e.postData.contents);

  // 取出 replayToken 和發送的訊息文字
  var replyToken = msg.events[0].replyToken;
  var userMessage = msg.events[0].message.text;

  if (typeof replyToken === 'undefined') {
    return;
  }

  var url = 'https://api.line.me/v2/bot/message/reply';
  UrlFetchApp.fetch(url, {
    'headers': {
      'Content-Type': 'application/json; charset=UTF-8',
      'Authorization': 'Bearer ' + CHANNEL_ACCESS_TOKEN,
    },
    'method': 'post',
    'payload': JSON.stringify({
      'replyToken': replyToken,
      'messages': [{
        'type': 'text', // 格式為文字，line可以傳送多種個格式(carousel、image)，有興趣的可以自己研究
        'text': userMessage, //你目標傳遞的訊息
      }],
    }),
  });
}

原始碼：code.gs（GitHub Gist）

接下來要將這個程式發布（如果有授權相關問題必須都接受才會通過）

Project version記得每次都要選擇New(否則不會更新)，並且要允許任何人可以存取這隻app，不然你的程式無法被line機器人執行

接下來複製你這串web app URL給LINE Message Api使用

貼到webhook URL上面後按下Save

STEP 3: 驗證串接成功

打開你的LINE就可以測試功能是否正常嚕～如果你是按照我的程式碼複製貼上，那他現在應該是回聲狗的功能XD

今天的教學就到這裡了～串接Google Sheet的部分我會放到下一篇文章，歡迎有興趣的人來觀看喔！

參考資源：簡易後端實作 ( Google Apps Script )

為什麼撰寫這篇文章

常常使用Google Form當問卷的你是否覺得Google Form有點太過制式化，或者說讓人覺得用Google Form有點誠意不足

但自己撰寫網頁問卷還要花錢買(租)一台Server放網頁跟建立資料庫，才能讓大家進來這個網頁填寫問卷，我覺得這樣一點都不划算，因為我只是想要讓這個問卷看起來有質感，不是Google Form而已XD

於是我就誕生一個想法

為什麼不要讓Google Form乖乖當後台就好，我放一個靜態網頁到Github上面就能省去過去在Server上面的花費

文章目標

1. 如何把Google Form的功能抽出來在一般靜態網頁使用
2. 可全客製化自己心目中漂亮的表單(內文使用Bootstrap 4為範例)
3. 讓你了解撰寫網頁會遇到的問題(謹以本範例為說明)

本文章使用到的技術：

1. 前端:static web(Bootstrap 4)
2. 後端:Google Form
3. 資料庫:Google Sheets

Demo區讓你搶先體驗

DEMO網頁 (看完文章後你可以自己客製化一個)

Google Form (他其實才是執行動作的本體)

Google Sheets (資料最終儲存的地方)

專案原始碼

Github Source code (如果實作上遇到問題可以參考)

STEP 1 / 7: 建立Google Form表單

先建立一個Google Form，選取個人的即可：

您可以按造自己的需求建立一個簡單的表單：

STEP 2 / 7: 抽出Google Form表單裡面的元素

建立好表單後進入預覽模式

接下來進入網頁的開發者模式(按下F12)，選擇Elements檢視網頁元素，然後搜尋”entry”，這些name的標籤是之後會使用的參數欄位，請把他們複製起來

2021/2/26 更新，朋友提醒新版的 ”entry” 已經轉移到了 <input type=”hidden” name=”entry.xxx" value=””> 的位置，大家操作時注意一下

輸入必填欄位資料按下送出(submit)按鈕後複製上面的網址，這個網址是之後網頁用來發送訊息的url

STEP 3 / 7: 選一個你喜歡的表單模板

在這裡我提供一些大家可以直接使用的表單模板，大家可以去找自己喜歡的，接下來我直接說明細節，完整的程式碼可以在這裡下載

因為我設計的這份問卷裡面需要填寫：姓名、email、評分、您的建議，並且需要要以form表單傳送，所以會有html結構如下(您的結構可能跟我有些許不同)：

<form id="google-form" class="contact100-form validate-form">
        <span class="contact100-form-title">
          餐後回饋
        </span>

        <label class="label-input100" for="first-name">姓名 *</label>
        <div class="wrap-input100 validate-input" data-validate="姓名為必填">
          <input id="name" class="input100" type="text" placeholder="王大明">
          <span class="focus-input100"></span>
        </div>

        <label class="label-input100" for="email">email</label>
        <div class="wrap-input100">
          <input id="email" class="input100" type="text" placeholder="Eg. example@email.com">
          <span class="focus-input100"></span>
        </div>

        <label class="label-input100" for="email">評分(最高五分) *</label>
        <div class="wrap-input100 validate-input" data-validate="煩請評分">
          <select class="form-control" id="score" style="border: 0px;">
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
          </select>
        </div>

        <label class="label-input100" for="message">您的建議</label>
        <div class="wrap-input100" data-validate="Message is required">
          <textarea id="message" class="input100" placeholder="Write us a message"></textarea>
          <span class="focus-input100"></span>
        </div>

        <div class="container-contact100-form-btn">
          <button class="contact100-form-btn">
            送出
          </button>
        </div>
      </form>

原始碼：form_elements（GitHub Gist）

但請記得在<form>、<input>、<select>這些tag裡面設定id，這樣後續在jquery裡面才能抓到相應的元素

STEP 4 / 7: 將Google Form表單裡抽出的元素放進去HTML網頁

Google Form建立好了，網頁元素也都建立完成後就是將兩者bind在一起，以下是用jquery抓取html元素，並使用ajax將這個訊息送出，程式細節情看註解

記得在要 把 jquery 引入<script>裡面，我朋友卡在這個問題很久 XD

<script>
    $('#google-form').submit(function (e) {
      //在這裡我們要先擋掉form默認事件
      e.preventDefault();

      if ($('#name').val() && $('#score').val()) {//需要先確認必填欄位是否填寫
        $.ajax({
          // url為Google Form按下submit的aciotn
          url: "https://docs.google.com/forms/d/e/1FAIpQLSeijRuLDQE62gbapDYgd_3pbmg7GyWY1CWPVeaEK-TiLDKzPw/formResponse",
          crossDomain: true,//解決跨網域CORS的問題
          data: {// entry.xxxxx 這些需要填寫您表單裡面的值，與其相互對應
            "entry.2040133429": $('#name').val(),
            "entry.304089069": $('#email').val(),
            "entry.207113062": $('#score').val(),
            "entry.1310220291": $('#message').val()
          },
          type: "POST", //因為是要進行insert的動作，故事用POST
          dataType: "JSONP",
          complete: function () {
            //完成後把這些欄位清空
            $('#name').val('')
            $('#email').val('')
            $('#score').val('')
            $('#message').val('')
            //最後跳轉到感謝的頁面
            window.location.replace("thank.html");
          }
        });
      }
    });
  </script>

原始碼：bind-html-googeForm（GitHub Gist）

STEP 5 / 7:測試是否正常運作

你可以直接開啟html檔(點擊兩下就會跳出網頁了)，輸入數值後按下送出(如果你使用我的程式會看到如下成果)

接下來去Google Form的Responses區域看看是否資訊正常進入

到這裡就能確認你的程式正常運作了(撒花～)

STEP 6 / 7:登入github帳戶，並上傳你的專案

github帳戶的創建應該很多地方都有教學，這裡我就簡化這個步驟，說明最簡單上傳的方式

登入帳號後選擇Repositories，在按下New新增一個

填寫一些基礎資訊，這裡需要特別注意的是你必須要選擇Public，不然你這個專案是無法讓大家在網路上觀看的

STEP 7 / 7:將專案開放給大家連線

接下來要對這個專案做一些設定，先點擊最右側的Settings

找到Source的位置，選擇master branch後，上方就會出現連結了

不過要注意這個連結是這個專案的根目錄，如果要導向到你的網頁需要設定路徑喔：

EX:

根目錄 https://dean9703111.github.io/test/

實體檔案位置 https://dean9703111.github.io/test/index.html

做到這裡順利的話就能分享連結給朋友炫耀自己的表單啦～

如果在實作的過程中遇到任何問題歡迎在下方留言

參考資源：Bootstrap form templete、Bootstrap thank you page、

Create websites using Google Forms