From 9219c2044f09d5768cd2cc2c98d8737bc7a9ba2d Mon Sep 17 00:00:00 2001 From: taichunmin Date: Wed, 16 Sep 2020 02:47:29 +0800 Subject: [PATCH] Support Google Sheet --- build.js | 4 +- public/businesscards.csv | 9 ++-- src/forms/acnh-postcard-1.pug | 4 +- src/forms/csv.pug | 2 +- src/forms/google-sheet.pug | 61 ++++++++++++++++++++++++++++ src/liff-full/share-google-sheet.pug | 28 +++++++++++++ 6 files changed, 99 insertions(+), 9 deletions(-) create mode 100644 src/forms/google-sheet.pug create mode 100644 src/liff-full/share-google-sheet.pug diff --git a/build.js b/build.js index f8b8f95d..eac5b129 100644 --- a/build.js +++ b/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)])), } diff --git a/public/businesscards.csv b/public/businesscards.csv index 47ca8474..df090de4 100644 --- a/public/businesscards.csv +++ b/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,微程式資訊的名片範例 \ No newline at end of file diff --git a/src/forms/acnh-postcard-1.pug b/src/forms/acnh-postcard-1.pug index be4e6077..5a5dd4d5 100644 --- a/src/forms/acnh-postcard-1.pug +++ b/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") diff --git a/src/forms/csv.pug b/src/forms/csv.pug index 2b46eb3b..f8904573 100644 --- a/src/forms/csv.pug +++ b/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) diff --git a/src/forms/google-sheet.pug b/src/forms/google-sheet.pug new file mode 100644 index 00000000..f85d0ec0 --- /dev/null +++ b/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', + } diff --git a/src/liff-full/share-google-sheet.pug b/src/liff-full/share-google-sheet.pug new file mode 100644 index 00000000..19b2daef --- /dev/null +++ b/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 + } + }