Support Google Sheet

build.js

@@ -27,9 +27,9 @@ exports.build = async () => {
     GA_MEASUREMENT_ID: getenv('GA_MEASUREMENT_ID', 'UA-39556213-12'),
     NODE_ENV: getenv('NODE_ENV', 'production'),
     ..._.fromPairs(_.map([
-      'LIFFID_SHARE',
-      'LIFFID_SHARE_CSV',
       'LIFFID_FULL',
+      'LIFFID_SHARE_CSV',
+      'LIFFID_SHARE',
     ], k => [_.camelCase(k), getenv(k)])),
   }
 

public/businesscards.csv

@@ -1,7 +1,8 @@
 form,name,author,lang,preview,description
-forms/acnh-postcard-1.html,動物森友會卡片,taichunmin,zh_TW,https://i.imgur.com/3WhiaK2.png,「集合吧！動物森友會」的卡片
-forms/csv.html,CSV,taichunmin,zh_TW,https://i.imgur.com/j017Uof.png,從 CSV 讀取名片資料來產生名片
-forms/chatbot-tw-1.html,Chatbot 台灣開發者,taichunmin,zh_TW,https://i.imgur.com/oScjWVD.png,「Chatbot Developers Taiwan」的名片
-forms/acnh-passport-1.html,動物森友會護照,taichunmin,zh_TW,https://i.imgur.com/YqW1e5j.png,「集合吧！動物森友會」的護照
+forms/google-sheet.html,Google Sheet,taichunmin,zh_TW,https://i.imgur.com/Jdb68bE.png,從 Google Sheet 讀取名片資料來產生名片
+forms/csv.html,CSV,taichunmin,zh_TW,https://i.imgur.com/CU3myIc.png,從 CSV 讀取名片資料來產生名片
 forms/psprint-3949.html,Right Align,taichunmin,zh_TW,https://i.imgur.com/g8GdiVN.png,PsPrint Right Align One
+forms/acnh-passport-1.html,動物森友會護照,taichunmin,zh_TW,https://i.imgur.com/YqW1e5j.png,「集合吧！動物森友會」的護照
+forms/acnh-postcard-1.html,動物森友會心意卡,taichunmin,zh_TW,https://i.imgur.com/3WhiaK2.png,「集合吧！動物森友會」的心意卡
+forms/chatbot-tw-1.html,Chatbot 台灣開發者,taichunmin,zh_TW,https://i.imgur.com/oScjWVD.png,「Chatbot Developers Taiwan」的名片
 forms/microprogram.html,微程式資訊,taichunmin,zh_TW,https://i.imgur.com/NXiylpJ.png,微程式資訊的名片範例

src/forms/acnh-postcard-1.pug

@@ -1,11 +1,11 @@
 extends /layout-forms
 
 block beforehtml
-  - const title = '動物森友會卡片'
+  - const title = '動物森友會心意卡'
 
 block meta
   meta(property="fb:app_id", content="2133031763635285")
-  meta(property="og:description", content="點此連結來製作「動物森友會」的卡片吧！")
+  meta(property="og:description", content="點此連結來製作「動物森友會」的心意卡吧！")
   meta(property="og:image:height", content="640")
   meta(property="og:image:width", content="1280")
   meta(property="og:image", content="https://i.imgur.com/3WhiaK2.png")

src/forms/csv.pug

@@ -9,7 +9,7 @@ block meta
   meta(property="og:description", content="點此連結來製作自己的 LINE 數位版名片吧！")
   meta(property="og:image:height", content="640")
   meta(property="og:image:width", content="1280")
-  meta(property="og:image", content="https://i.imgur.com/j017Uof.png")
+  meta(property="og:image", content="https://i.imgur.com/CU3myIc.png")
   meta(property="og:locale", content="zh_TW")
   meta(property="og:site_name", content="筆記國度")
   meta(property="og:title", content=title)

src/forms/google-sheet.pug

@@ -0,0 +1,61 @@
+extends /layout-forms
+
+block beforehtml
+  - const title = 'LINE 數位版名片 (Google Sheet)'
+  - const liffid = liffidShareCsv // for layout-forms.pug
+
+block meta
+  meta(property="fb:app_id", content="2133031763635285")
+  meta(property="og:description", content="點此連結來製作自己的 LINE 數位版名片吧！")
+  meta(property="og:image:height", content="640")
+  meta(property="og:image:width", content="1280")
+  meta(property="og:image", content="https://i.imgur.com/Jdb68bE.png")
+  meta(property="og:locale", content="zh_TW")
+  meta(property="og:site_name", content="筆記國度")
+  meta(property="og:title", content=title)
+  meta(property="og:type", content="website")
+  meta(property="og:url", content=baseUrl+"forms/google-sheet.html")
+
+block form
+  .form-group.my-2
+    label(for="vcard-template") 名片樣板
+    input#vcard-template.form-control.form-control-sm(type="url", v-model="vcard.template")
+    small#help-label.form-text.text-muted 請填寫名片樣板網址。
+  .form-group.my-2
+    label(for="vcard-apiKey") Google Sheets API 金鑰
+    input#vcard-apiKey.form-control.form-control-sm(type="url", v-model="vcard.apiKey")
+    small#help-label.form-text.text-muted 請參考官方文件#[a(href="https://developers.google.com/sheets/api/guides/authorizing#APIKey", target="_blank") 「取得 API 金鑰」]，你可以幫這個 API 金鑰加上一些適當的限制避免濫用，如：限制金鑰只能呼叫「Google Sheets API」。
+  .form-group.my-2
+    label(for="vcard-spreadsheetId") spreadsheetId
+    input#vcard-spreadsheetId.form-control.form-control-sm(type="url", v-model="vcard.spreadsheetId")
+    small#help-label.form-text.text-muted 請先將指定的工作表改成「任何知道連結的使用者都能查看」，然後從網址列取得 Google 試算表的 spreadsheetId 並填在此處，通常網址格式會像是這樣：#[code https://docs.google.com/spreadsheets/d/{spreadsheetId}/edit#gid=0]。
+  .form-group.my-2
+    label(for="vcard-range") 工作表名稱
+    input#vcard-range.form-control.form-control-sm(type="url", v-model="vcard.range")
+    small#help-label.form-text.text-muted 請填寫 Google 試算表的工作表名稱。
+  .form-group.my-2
+    label(for="vcard-key") 比對欄位
+    input#vcard-key.form-control.form-control-sm(type="text", v-model="vcard.key")
+    small#help-label.form-text.text-muted 請填寫您想要比對的名片資料欄位。
+  .form-group.my-2
+    label(for="vcard-value") 比對資料
+    input#vcard-value.form-control.form-control-sm(type="text", v-model="vcard.value")
+    small#help-label.form-text.text-muted 請填寫您想要比對的名片資料欄位內容。
+
+block vue-config
+  script.
+    /* global httpBuildQuery, encodeBase64url */
+    const cfg = window.vueConfig
+    cfg.computed.shortcut = function () {
+      const params = httpBuildQuery(_.mapValues(this.vcard, encodeBase64url))
+      if (!_.isString(params) || !params.length) return
+      return `https://liff.line.me/#{liffidFull}/share-google-sheet.html?${params}`
+    }
+    cfg.data.vcard = {
+      apiKey: '',
+      key: 'id',
+      range: '工作表1',
+      spreadsheetId: '1Bu3Kg7_RPxOq51ELYI3NzHtc_rXStcezlf7d_RoPBXQ',
+      template: '#{baseUrl}cards/chatbot-tw-coscup-2020.txt',
+      value: '6',
+    }

src/liff-full/share-google-sheet.pug

@@ -0,0 +1,28 @@
+extends /liff-full/share
+
+block vue-config
+  script.
+    const cfg = window.vueConfig
+    cfg.computed.shortcut = function () {
+      return `https://liff.line.me/#{liffidFull}/share-google-sheet.html${new URL(location).search}`
+    }
+    cfg.methods.getVcard = async function () {
+      try {
+        const args = _.fromPairs(_.map(['apiKey', 'spreadsheetId', 'range', 'key', 'value'], k => [k, this.paramBase64url(k)]))
+        if (!_.isString(args.apiKey) || !args.apiKey) throw new Error('無效的 Google Sheets API 金鑰')
+
+        const sheetUrl = `https://sheets.googleapis.com/v4/spreadsheets/${args.spreadsheetId}/values/${encodeURIComponent(args.range)}`
+        const rows = _.get(await axios.get(sheetUrl, { params: { key: args.apiKey } }), 'data.values', [])
+        if (!_.isArray(rows) || !rows.length) throw new Error('空的試算表')
+
+        console.log(rows)
+        const keyIdx = rows[0].indexOf(args.key)
+        if (keyIdx < 0) throw new Error(`在試算表的第一列中找不到「${args.key}」`)
+        this.vcard = _.zipObject(rows[0], _.find(rows.slice(1), row => row[keyIdx] === args.value))
+        window.gtagTiming('after getVcard')
+      } catch (err) {
+        err.message = err.message ? `無法從 Google 試算表讀取資料: ${err.message}` : '無法從 Google 試算表讀取資料'
+        this.render = null
+        throw err
+      }
+    }