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

Augustus
· 13 min read

本文同步發表於:Let’s Write — 用LINE bot api建立line@圖文選單

本篇大綱:

  • 一、前言:原來現在少年工程師都在玩line@啊
  • 二、關於自動回覆訊息 下集待續
  • 三、關於line@圖文選單
  • 四、後台就可以製作,為什麼要用api做圖文選單?
  • 五、實作:用line bot api製作圖文選單
    -1 建立LINE Developers帳號
    -2 製作圖文選單的圖檔
    -3 用終端機、postman去POST/GET line server
    -- 3–1 建立圖文選單(create rich menu)
    -- 3–2 上傳圖文選單的圖片(upload a rich menu image
    -- 3–3 設定預設的圖文選單(set the rich menu as the default rich menu)
  • 六、補充:圖文選單相關API

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

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

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

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

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

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

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

這篇主要是筆記怎麼製作圖文選單,關於訊息回覆的使用筆記就在未來的某一天再寫。

關於line@圖文選單

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

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

後台就可以製作,為什麼要用api做圖文選單?

首先看一下LINE@方案介紹頁面,會看見圖文選單的功能是在「入門版」帳號才會有的,入門版帳號月費798元,一整個比我gihub pro+愛奇藝月租還貴,也比499的吃到飽網路費還貴啊!

而免費版的圖文選單,方案上寫了「API-type only」,因此口袋不夠深的工程師們還是認命的看api說明文件來建吧。

實作:用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」

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

選擇用line帳號登入

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

確認是用哪個line帳號

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

點選「Create New Provider」

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

輸入provider名稱

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

選擇「Messaging API」

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

建立LINE@的註冊表格

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

但要注意開通API後,除了下圖的2項功能無法再使用,line@ app維運功能也無法再使用!

原有的line@轉用api

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

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

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

點擊issue拿token

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

時效選24小時

按下Issue後就可以看到token了,這token先存下來,在下文做POST/GET時會用到:

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

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


2 製作圖文選單的圖檔

圖文選單用的圖片,文件上有尺寸限制:2500x1686、2500x843。

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

圖文選單範例圖檔

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

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

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


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

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

line-bot-sdk-nodejs

line messaging API

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

要用api建立圖文選單,有3個步驟:
3–1 建立圖文選單(create rich menu)
3–2 上傳圖文選單的圖片(upload a rich menu image)
3–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,之後會替換掉。

有了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。

2019/09/09補充:
本篇Jabow的回應中有提到,用終端機會回傳bad request的原因,主要是LINE本身的bug,詳情可以看這邊:https://github.com/line/line-platform-feedback/issues/73

下載、安裝完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設定預設圖文選單

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

成功的圖文選單

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

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

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

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

補充:圖文選單相關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都可以在這看到:


Augustus Front-End study notes

Augustus,前端工程師的學習筆記

Augustus

Written by

Augustus

努力學習中的前端工程師。目前心得:前端是條不歸路啊孩子……https://letswrite.tw/

Augustus Front-End  study notes

Augustus,前端工程師的學習筆記

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade