Vue 前端語法讀取 Google Sheets 試算表作為小型資料庫

本次實作是透過 Google Sheets 作為小型資料庫，然後使用Vue 前端語法做資料的讀取，而且無需透過後端程式來插手。

學習內容大綱

1. 初始化建立 Vue 專案
2. 建立 Google Sheets 試算表
3. 啟動你的 Google Sheets API 存取
4. 準備 Vue 前端 Google Sheets API 執行讀取
   4.1 安裝套件 VueGapi 與使用
5. 執行結果

初始化建立 Vue 專案

首先一開始我們先建立 webpack Vue 專案，指令如下：

$ vue init webpack vue-googlesheets-api

初始化過程中會詢問一些問題，在這裏我沒有全部安裝，因為做基本的練習，有些就選澤 No 就可以了。

  A newer version of vue-cli is available.

  latest:    2.9.6
  installed: 2.9.5

? Project name vue-googlesheets-api
? Project description A Vue.js project
? Author XXXXXX <XXXXXXX@gmail.com>
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? No
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) yarn
   vue-cli · Generated "vue-googlesheets-api".


# Installing project dependencies ...
# ========================

安裝了一兩分鐘過後，前往目錄夾並且執行

$ cd vue-googlesheets-api
$ npm start

DONE  Compiled successfully in 8371ms
I  Your application is running here: http://localhost:8080

完成編譯之後，請打開瀏覽器進入 http://localhost:8080 就會看到以下畫面。

好的，此時 Vue 專案基本的就完成了。

建立 Google Sheets 記帳本試算表

我們先暫時將專案擱著一下，先前往 Google Drive 建立一個 Google Sheets 試算表檔案

由於要實作的目的是讓程式來讀取儲存格的值，因此我們可以在 A1 這個欄位填入標題欄，假設我們以簡單的記帳本為例，可以知道就以 日期、付款方式、項目、收支、備註 這五個基本欄位做依序的填入。

接著，我們任意的先填入記帳本的紀錄，在這裡輸入兩筆紀錄

啟動你的 Google Sheets API 存取

有了試算表的檔案是不夠的，還需要一個能夠讓程式做讀取的權限，也就是說程式會透過 API 的形式向 Google Sheets 取得資源，啟動權限的方式務必到 Google APIs 網站做設定。

我們將 Google Sheets API 權限打開，那麼在應用程式專案裡就能夠使用金鑰 (key)、Client ID 的搭配獲得服務上的請求喔。

(不過在這裡就不贅述如何啟用 sheets api …)

我在網路上找了幾篇相關文章都寫得滿好的，可以參考看看

• Authorize Requests@Google Sheets指南
• Google Sheet API 與Google OAuth2 API授權研究

準備 Vue 前端 Google Sheets API 執行讀取

在儲存格有值了以及 Google Sheets API 授權開啟之後，我們就回到 Vue 前端的部分，還記得前面裝好的專案並且可以用瀏覽器閱覽嗎？網址是：http://localhost:8080/#/，在這裡我們需要編寫一些檔案

安裝套件 VueGapi 與使用

首先的是要能夠讓 Vue 讀取 Google API 的方法，就需要使用 vue-gapi 套件，這個可以用來實作對 google 文件的 api 套件，那麼我們在 vue 專案下將套件裝起來。

$ yarn add vue-gapi

很好，裝好了對吧？接著趕緊到 /src/main.js 文件裡面將 vue-gapi 載入，讓全域環境裡面可以使用它，新增以下語法用來連線你的應用程式與 Google Sheets 服務

import VueGAPI from "vue-gapi"

const apiConfig = {
  apiKey: "在這裡輸入 api key (請到 google apis 服務查詢)",
  clientId: "在這裡輸入 client id (請到 google apis 服務查詢).apps.googleusercontent.com",
  discoveryDocs: ["https://sheets.googleapis.com/$discovery/rest?version=v4"],
  scope: "https://www.googleapis.com/auth/spreadsheets" // See, edit, create, and delete your spreadsheets in Google Drive
  // see all available scopes here: https://developers.google.com/identity/protocols/googlescopes'
};
 
// Use the plugin and pass along the configuration
Vue.use(VueGAPI, apiConfig);

main.js 檔案完整內容如下：

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
// import the plugin
import VueGAPI from "vue-gapi"

const apiConfig = {
  apiKey: "在這裡輸入 api key (請到 google apis 服務查詢)",
  clientId: "在這裡輸入 client id (請到 google apis 服務查詢).apps.googleusercontent.com",
  discoveryDocs: ["https://sheets.googleapis.com/$discovery/rest?version=v4"],
  scope: "https://www.googleapis.com/auth/spreadsheets" // See, edit, create, and delete your spreadsheets in Google Drive
  // see all available scopes here: https://developers.google.com/identity/protocols/googlescopes'
};
 
// Use the plugin and pass along the configuration
Vue.use(VueGAPI, apiConfig);
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

設定好之後，再到前端的部分 /src/components/HelloWorld.vue 檔案內修改內容

<template>
  <div class="hello">
    <h2>Vue Google Sheets api 實作</h2>
    <button @click="login">讀取 Google Sheets 檔案</button>
    <br />
    <br />
    <table align="center">
      <tr v-for="record in records">
        <td v-for="r in record">{{ r }}</td>
      </tr>  
    </table>
  </div>
</template>

前面我們透過 api key 以及 client id 確立了可以授權存取，接著我們要對剛剛建立好的 sheets 做讀取時，要先知道這個檔案的 ID，這樣才能讓程式知道要讀取的檔案是哪一個，而尋找 ID 的方法也很簡單，打開 Google Sheets 檔案，找到網址上面的一串亂碼的字，如下圖框起來的部分就是 SpreadsheetId 了

接著是 script 的部分，這邊要特別注意的是，參數的部分可以到 Google Sheets 指南找到參數必要項目

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      records: [],
    }
  },
  mounted () {
    let vm = this;
    vm.login();
  },
  methods: {
    login () {
      let vm = this;
      this.$getGapiClient()
      .then(gapi => {
        var params = {
          spreadsheetId: '1GnvjCutd-z8iYb3LrsOruRopNS7Lf2VVQ_4zBcK84TQ',
          range: 'A1:E100',
          valueRenderOption: 'FORMATTED_VALUE',
          dateTimeRenderOption: 'FORMATTED_STRING',
        };
        var request = gapi.client.sheets.spreadsheets.values.get(params)
        request.then(function(response) {
          var result = response.result;
          vm.records = result.values;
          for(var i = 0; i <= vm.records.length; i++) {
            // title
            var title = vm.records[0];
            var objTitle = {};
            for(var j = 0; j<= title.length; j++) {
              objTitle = title[j]
            }
          }
        }, function(reason){
          console.error('error:', reason)
        });
      })
    }
  }
}
</script>

執行結果

太好了，做到這裡就差不多語法都完成了，接下來就看看結果吧，前往 http://localhost:8080/#/，是一個簡易畫面，裡面放了一個按鈕 讀取 Google Sheets 檔案

按下按鈕之後，就會讀取指定的 Google Sheets 檔案了喔

是不是很美妙呀，若你只是單純的想要有資料庫做讀取，那麼你可以用利用這個方式讓 Google Sheets 作為儲存資料使用，在網站前端的部分就可以有更多的發揮，專注於前端上的開發，也無需苦惱要裝哪一套結構化資料庫 (ex: MySQL, MSSQL) 或是非結構化資料庫 (MongoDB) 之類的，這方式絕對是最棒的解決方案了。

參考

• 建立Vue專案
• Google Apps Scripts
• Spreadsheet Service
• VUE vue-gapi 套件