Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #20 from taichunmin/google-sheet
Support Google Sheet
- Loading branch information
Showing
6 changed files
with
101 additions
and
11 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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,微程式資訊的名片範例 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 請填寫名片樣板網址。你可以使用 #[code https://cors-anywhere.herokuapp.com/] 來繞過 CORS 的限制。 | ||
.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', | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 | ||
} | ||
} |