用LINE bot api建立line@圖文選單

用LINE bot api建立line@圖文選單

根據LINE@生活圈的最新消息,2019/4/18陸續升級到2.0後,圖文選單就是免費帳號也能使用的功能了,這篇就當作接api的練功。

原來現在少年工程師都在玩line@啊

年假前就有同事跟一位前端朋友問說會不會line@ api?當時因為手上案子多,假日也忙,就說可以用line@提供的後台做訊息回覆的功能。

這次過年,一位表妹說她們公司的年輕工程師小弟用了line@給員工用,會定時提供空污資訊跟可以直接點選單查東西等等的,一直說這很厲害。才開始有「原來現在少年工程師都在玩line@啊」的想法。身為一位不算老鳥但也不能說是菜鳥的工程師,應該也來會一下才對,才開始有了這幾天的接觸。


關於自動回覆訊息 下集待續

如果只是單純的訊息回覆,可以直接用line@的後台,裡面就有「自動回應訊息」跟「關鍵字回應訊息」。

不過,對,就是這個「不過」突顯了工程師的偉大,看了一下如果是用api回應,回覆的格式有比後台設定的方式稍多了一點,像是可以回覆格式上可以是快速按鈕讓使用者點,或是一個附上圖片的列表給使用者點,可以參考這個npm套件:

https://www.npmjs.com/package/linebot

這篇主要是筆記怎麼製作圖文選單,關於訊息回覆的使用筆記就寫在其他篇。


關於line@圖文選單

平常加入一些line@帳號後,會看見聊天室的底部出現按鈕的選項,那個就是圖文選單了,英文名稱是Rich Menu。

底部紅色的那塊就是圖文選單(rich menu)
底部紅色的那塊就是圖文選單(rich menu)

實作:用line bot api製作圖文選單

要用api製作圖文選單,只需要3個步驟:

  1. 建立LINE Developers帳號
  2. 製作圖文選單的圖檔
  3. 用終端機、postman去POST/GET line server

第1、2個步驟很簡單,最麻煩的是第3步,也是這次研究過程中最要筆記的一步,主要是api說明文件第一眼看上去很難看懂,覺得不先記錄下來,下次實際要用就會忘記。


1 建立LINE Developers帳號

首先進入到LINE Developers的官網:https://developers.line.biz/en/

點選右上角的「Log in」:

點選右上角的「Log in」
點選右上角的「Log in」

會詢問要用哪種方式登入,會用line@的人基本上都有line的帳號,這邊就用line登入的方式。

選擇用line帳號登入
選擇用line帳號登入

會再次確認要用哪一個line的帳號,如果是幫公司建立的,記得要用公司的line帳號:

確認是用哪個line帳號
確認是用哪個line帳號

登入以後,首先要先建立一個provider,一個provider裡面,可以有多個line@的帳號,有點像是一個資料夾裡可以塞很多個檔案的概念。這邊就點選「Create New Provider」:

點選「Create New Provider」
點選「Create New Provider」

輸入完provider名稱後,按下「Confirm」,接著會再二次的要你確認,確認隱私權等的規定,就什麼都打勾,什麼都確定就行(咦?):

輸入provider名稱
輸入provider名稱

provider建立完成,就會看到要建立哪一種的功能,要用line訊息回覆跟圖文選單的話,選擇「Messaging API」:

選擇「Messaging API」
選擇「Messaging API」

接著會出現一張很長的資料表要填,這張表填完就會建立一個line@的帳號了,所以icon跟name請不要亂寫:

建立LINE@的註冊表格
建立LINE@的註冊表格

那如果是本來就有一個line@帳號,想要把帳號用成可以接api的狀態,只要進入line@後台 → 帳號設定 → Messaging API設定,然後一樣選擇或建立供應商(Provider),在按下「開始使用API」就行。

原有的line@轉用api
原有的line@轉用api

line@建立完後,就會看見出現在選單上了,接著點選進去:

建立完channel後,出現在選單上
建立完channel後,出現在選單上

會看到很長的一段資訊,Channel ID、Channel Secret、use Webhooks,這三個是自動回覆訊息會用到的,這篇還用不到,我們先點選「Channel access token」右側的「issue」,來拿一段要用到的token。

點擊issue拿token
點擊issue拿token

時效這邊選24小時,基本上如果不更新token,它會一直存在:

生成的token。token是示範用,之後會替換掉。
生成的token。token是示範用,之後會替換掉。

以上就是第一步的建立LINE Developer帳號,有了帳號及token後,下一步就是製作圖文選單的圖片。


2 製作圖文選單的圖檔

圖文選單用的圖片,文件上有尺寸限制:2500×1686、2500×843。

本篇用的尺寸是2500×843,製作成3個按鈕:

圖文選單範例圖檔
圖文選單範例圖檔

也把原始的psd放到github上了,歡迎取用:

https://github.com/letswritetw/letswrite-line-rich-menu/blob/master/rich-menu.psd

這一步算是最簡單的一步,就是在規定的尺寸內製作一張圖檔即可。

在line@的官網上也有提供一些範例,但尺寸要再調過:

https://events.line.me/tw/lineat/minisite/wp-content/themes/line/download.php


3 用終端機、postman去POST/GET line server

這步開始就需要api說明文件跟程式碼了,先附上會用到的說明文件:

line-bot-sdk-nodejs

line messaging API

主要用的是line-bot-sdk-nodejs這份,文件上如果是api的會有連結可連到api的說明。

要用api建立圖文選單,有3個步驟:

  1. 建立圖文選單(create rich menu)
  2. 上傳圖文選單的圖片(upload a rich menu image)
  3. 設定預設的圖文選單(set the rich menu as the default rich menu)

3–1 建立圖文選單(Create Rich Menu)

建立圖文選單,文件上使用的語法如下:

第一次看到「curl」開頭的語言,驚呆了,是個沒看過的新東西,後來google了一下,發現如果不懂這是什麼也沒關係,簡單來說他就是可以在終端機(命令提示字元)上執行POST/GET的玩意兒,意思就是只要開啟終端機,然後複製貼上curl的那一整段,再按下enter,就會執行了。

這一段要解釋一下參數。

‘Authorization: Bearer {token}’:

{token}請替換成第一步最後拿到的那個token,像是這篇筆記拿到的就是「A5g4fZZ1gamCXevRasBykU4YjH75N6QEaMEphIwU4Af4rq8ZNZUrMoPLyPDH6OSu+xTZME+eLR+1GtHgEpKTsILd/L9OS1UfBbF0OL/fDHO3J0xrdql8l8WPkAL7CrI+/xXlwpA8rvuTLvT4XUAxTAdB04t89/1O/w1cDnyilFU=」這串。

size:就是圖檔的尺寸。

select:文件中說true就會用成預設的樣式,但因為我們已經有準備自已用的圖了,這邊就寫false。

name:是指給這組圖文選單一個名字,給開發者用的,比如因為行銷活動要建立多個圖文選單,就要為每一個選單設定名字,之後要替換才找得到是要用哪一組。

chatBarText:進入line的聊天室,如果有圖文選單,那底部會增加一個長條按鈕,這個參數就是設定那個按鈕上的文字,比方國語小幫手的文字就是設定「功能顯示」。

area:這邊是陣列,圖文選單的圖片有幾個就要設幾組,這篇的範例圖用的是三組,就要寫三個物件。物件裡面的東西蠻多的,請直接看文件:Rich menu object

最後只要打開終端機(windows是命令提示字元),複製貼上再按下enter,就會看到回傳了一組圖文選單的id:

最後會拿到圖文選單的id(rich menu id)。本篇是範例用的id,之後會替換掉。
最後會拿到圖文選單的id(rich menu id)。本篇是範例用的id,之後會替換掉。

有了rich menu id後,就可以上傳這組圖文選單要用的圖了。

3–2 上傳圖文選單的圖片(upload a rich menu image)

上傳圖片的語法如下:

{rich menu id}:替換成上一步拿到的rich menu id。

{token}:替換成token。

image-path.png:要上傳的圖片,它的路徑。

一樣複製這段,在終端機貼上後按下enter,成功的話會看到一個空物件:

成功上傳圖片,回傳空物件。
成功上傳圖片,回傳空物件。

3–3 設定預設的圖文選單(set the rich menu as the default rich menu)

有了圖文選單的設定,也有了要用的圖檔,最後就是設定聊天室要用哪一個圖文選單就行,這邊如果一樣在終端機用,會看到一直回傳bad request,google後找不到解決方式,因此在這要改用postman。

下載、安裝完postman後,打開來會看見以下介面:

postman介面
postman介面

postman就是可以用它來POST/GET的工具,平常開發時也會拿來做API的測試。

要設定預設的圖文選單是哪一組,做以下設定就行:

methods選POST。

url填入:https://api.line.me/v2/bot/user/all/richmenu/{rich menu id},id記得替換。

Authorization選Bearer Token。token裡則填入token值。

最後按下send,成功的話就會顯示一個空物件:

postman設定預設圖文選單
postman設定預設圖文選單

完成以上三步,進到line的聊天室就可以看到了圖文選單了:

成功的圖文選單
成功的圖文選單

按下「文字」,會主動發訊息給這個bot,跟自動回覆的api串就可以reply一些東西,就之後再寫自動回覆的筆記。

按下「網址」,就會開啟網址,這篇是會進入到本篇筆記文。

按下「位置」,會沒反應,也是要跟其他api串才會有用,一樣之後有時間再來寫筆記文。

可以直接加入這個line@看效果:

https://line.me/R/ti/p/%40kaw7104e


補充:圖文選單相關API

圖文選單除了建立,也有刪除、查看等的API,直接用postman就可以了,這邊一併附上設定方式:

列出圖文選單的列表

methods:GET
url:https://api.line.me/v2/bot/richmenu/list
Authorization:Bearer Token

查看圖文選單

methods:GET
url:https://api.line.me/v2/bot/richmenu/{rich menu id}
Authorization:Bearer Token

查看預設的圖文選單是哪組

methods:GET
url:https://api.line.me/v2/bot/user/all/richmenu
Authorization:Bearer Token

下載圖文選單的圖片

methods:GET
url:https://api.line.me/v2/bot/richmenu/{rich menu id}/content
Authorization:Bearer Token

刪除圖文選單

methods:DELETE
url:https://api.line.me/v2/bot/richmenu/{rich menu id}
Authorization:Bearer Token

最後也附上官方api的說明,以上的api都可以在這看到:

https://line.github.io/line-bot-sdk-nodejs/api-reference/client.html#methods


Summary
用LINE bot api建立line@圖文選單
Article Name
用LINE bot api建立line@圖文選單
Description
本篇大綱:關於line@圖文選單、後台就可以製作,為什麼要用api做圖文選單?實作:用line bot api製作圖文選單 -1 建立LINE Developers帳號 -2 製作圖文選單的圖檔 -3 用終端機、postman去POST/GET line server、圖文選單相關API
Augustus
Let's Write
Let's Write
Publisher Logo

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *