LINE Bot - Google Sheets Demo

大家好,我是卡米哥,LINE 官方認證的 API 專家,LINE API Expert。目前在維護知名 Node.js 聊天機器人框架 Bottender

今天要來帶給大家的是一個用 Bottender 實作的 LINE Bot 範例程式,核心功能是當用戶在 LINE 上發送訊息時,就將訊息儲存至 Google Sheets 上。

動線設計

當用戶隨便打字的時候就會顯示一個 Flex Message,點擊 Flex Message 上的按鈕後會看到一個 LIFF:

點擊按鈕後彈跳出 LIFF

這是為了使用 LIFF 的「用外部瀏覽器開啟網頁」功能。如果用戶已經在外部瀏覽器上登入 Google,就不必重新輸入帳號密碼。

用戶直接選擇帳戶
未經審核的 App
確認授權內容

用戶同意後,開啟「加入好友」的網址就可以從外部瀏覽器回到 LINE。

自動回到 LINE 上
隨便打一些字
Image for post
Image for post
自動同步至 Google Sheets 上

怎麼做的

本範例程式已經寫好放在 https://github.com/Yoctol/bottender-google-sheet-sync-demo。本篇文章著重於講解 Google 以及 LINE 後台的設定,目標是讓這份 Code 能在你的電腦上跑起來。

建議的讀者程度:使用 JS 寫過 LINE Bot

我們需要到 Google 的後台以及 LINE 的後台做一些設定,並且把設定的結果放到專案內。整個流程大致上可以分成以下 4 個步驟:

  • 開啟 Ngrok
  • 建立及設定 Google API 專案
  • 設定 LINE Bot
  • 建立及設定開發環境

開啟 Ngrok

由於各個平台都需要與我們的伺服器做串接,也就需要在對方的後台填寫我們的伺服器網址。在此同時,我們的伺服器也需要對方提供的設定值,最好的方法就是二話不說先開啟 Ngrok,先建立我們的伺服器網址但是先不做內容。

ngrok http 5000

建立及設定 Google API 專案

首先開啟開發者後台頁面 https://console.developers.google.com/

第一次進入 Google 開發者後台頁面會看到的樣子

點擊「同意並繼續」

尚未選取 Project 的資訊主頁

點擊右側的「建立」

新增專案

填寫完成後按下「建立」

在 Project 內的資訊主頁

點擊「API程式庫」

API 程式庫

搜尋「sheets」

API 程式庫搜尋結果

點擊「Google Sheets API」

Google Sheets API

點擊「啟用」

Google Sheets API 總覽

點擊「新增憑證」

新增憑證

照著下方的圖片填寫

新增憑證 - 填好後的樣子

點擊「我需要哪些憑證?」

建立 OAuth 2.0 用戶端 ID

點擊「設定同意畫面」

OAuth 同意畫面

點擊「外部」後點擊「建立」

OAuth 同意畫面設定

填寫「應用程式名稱」:bottender-sheets-demo

上傳「應用程式標誌」:自己隨便找一張圖

點擊「新增範圍」

OAuth 同意畫面 — 新增範圍

勾選 Scope「../auth/drive.file」

點擊「新增」

點擊「儲存」

回到上一個分頁點擊「重新整理」

新增憑證

填寫「已授權的重新導向 URI」,填寫範例如下:

https://1b69df02.ngrok.io/googleRedirect

請自行修改成自己的 Ngrok 網址。

點擊「建立 OAuth 用戶端 ID」

建立好的 OAuth 2.0 用戶端 ID

點擊「下載 JSON」下載檔案,並且將檔名修改為「client_secret.json」

到此完成整個 Google API 專案設定

設定 LINE Bot

由於本文假設讀者做過 LINE Bot,所以建立 LINE Bot 的部分跳過,本次需要設定的內容如下:

  • Webhook URL
  • 設定 LIFF

設定 Webhook URL

正確的 Webhook URL 範例如下:

https://1b69df02.ngrok.io/webhooks/line

行修改成自己的 Ngrok 網址。

設定 LIFF

LINE Developers 後台的 LIFF 分頁

點擊「Add」

Add a LIFF app

填寫「LIFF app name」:bottender google sheets demo

填寫「Size」:Compact

填寫「Endpoint URL」:https://1b69df02.ngrok.io/liff

請自行修改成自己的 Ngrok 網址。

勾選「Scopes」:雖然沒用到,但不勾就不能點下一步

Add a LIFF app 填好後

點擊「Add」

建立好的 LIFF

新建立的 LIFF ID 可以從 LIFF URL 當中的 line://app/159… 找到。

由於 LIFF 網址的格式如下:

line://app/這是 LIFF ID

以我的情況來說的話, LIFF ID 就是:

159…

我相信 LINE 之後會直接在介面上顯示 LIFF ID,而不是藏在 LIFF URL 裡面。

建立及設定開發環境

準備一台安裝好 node 的電腦,並且到 https://github.com/Yoctol/bottender-google-sheet-sync-demo 下載程式碼。

  • 將「client_secret.json」複製到專案資料夾根目錄下
  • 將「.env.example」改名為「.env」
  • 填寫 LINE_ACCESS_TOKEN、LINE_CHANNEL_SECRET、LIFF_ID
  • 在 console 下輸入「yarn install」或「npm install」
  • 在 console 下輸入「yarn dev」或「npm run dev」

到此就完成所有步驟了。

關於程式碼的部分,如果本文拍手到達 1000次以上,我就會專門寫文章給大家講解。

在追求真理的道路上

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store