盡信書不如無書

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

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

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 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