如何在 Bottender 中使用 LIFF

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

今天我要教大家如何在 Bottender 當中使用 LIFF。

Bottender 是使用 Node.js 開發的多平台聊天機器人框架(multi-platform chatbot framework)，而 LIFF 則是 LINE 提供的前端框架(LINE Front-end Framework)。

LIFF 主要的功能是讓用戶可以在 LINE 當中，只佔用部分版面的情況下開啟網頁，而這個網頁可以和 LINE App 進行互動，比方說獲取用戶資訊、代替用戶傳送訊息、掃描 QR Code 等功能。

因為開發 LIFF 需要寫網頁，而在 Bottender 1.0 之後的版本會自動幫我們用 Express 作為 HTTP server，我們若想要在 Bottender 開發時同時也開發網頁的話，就要自己寫一個 HTTP server，然後開發網頁，並且做好 LIFF 的設定。

對於進階的朋友們，在 Bottender 當中使用 LIFF 可以直接參考這個最精簡的範例：https://github.com/Yoctol/bottender/tree/master/examples/line-liff-v2

如果你有開發過 LINE Bot，但沒有使用過 LIFF 和 Bottender，想要試玩看看的話，可以參考以下步驟：

安裝 Node.js

Node.js 是可以在本機執行 js 的環境。如果你的電腦沒有安裝 Node.js，那麼你可以到這裡安裝：https://nodejs.org/en/

安裝 Ngrok

Ngrok 是可以把本機的開發環境暫時公開到網路上進行串接和測試的工具。如果你的電腦沒有安裝 Ngrok，那麼你可以到這裡安裝：https://ngrok.com/

裝好之後就先跑起來：

./ngrok http 5000

然後你就可以看到其中一行訊息：

Forwarding https://xxxxxxxx.ngrok.io -> localhost:5000

這就表示 https://xxxxxxxx.ngrok.io 這個網址目前會對應到你本機上的 localhost:5000。

待會我們會用到這個網址。

建立 Bottender 專案

要建立一個 Bottender 專案最快的方式就是使用 create-bottender-app 來生成專案資料夾。找到一個你喜歡的資料夾，在 bash 下輸入以下指令：

npx create-bottender-app liff_demo

用方向鍵以及空白鍵選擇使用 LINE 平台進行開發，在 session store 方面則選擇使用 memory 儲存。

就完成了。

安裝套件

我們要用到的套件有 express、body-parser 和 nodemon，在專案資料夾下輸入以下指令進行安裝：

yarn add express body-parser nodemon

使用客製化 Express

在專案根目錄新增一個 server.js 檔案，內容如下：

現在我們有了客製化的 Express，我們需要指定專案從我們寫好的這個 Express 開始啟動，需要修改 package.json 如下：

nodemon 的功能就是當資料夾中的任何一個檔案被修改時，他會自動重啓 server。

撰寫 LIFF 程式

在 server.js 當中加入以下兩段程式碼：

/liff 是我們網頁的進入點，而 /send-id 則是負責提供 LIFF ID 給網頁使用。

接著我們開發網頁的部分，在專案根目錄下新增 liff.html 內容如下：

這個網頁包含了一個按鈕，按下按鈕後會使用 LIFF 代替用戶傳送訊息。

在 Bottender 上傳送 LIFF 連結

在這裡我們用最簡單的作法，不論用戶對 LINE Bot 進行什麼操作，我們都傳送 LIFF 連結給用戶。

註冊 LINE Login

本文假設你已經有註冊過 LINE Messaging API 的經驗，所以只講 LIFF 需要的註冊流程，第一步是到 LINE 開發者後台。

選擇跟 LINE Messaging API 相同的 Provider 進入：

點選 Create a new channel

選擇 LINE Login

在填寫表單，註冊好之後：

點選 LIFF 分頁

點選 Add

在填寫表單的時候：

注意紅色標記的地方一定要填對

其中 Endpoint URL 的值就是你的 Ngrok 網域再加上 /liff

LIFF_ID 就藏在 LIFF URL 當中，箭頭標記處

設定專案環境變數

在專案根目錄下修改 .env 內容如下：

其中 LINE_ACCESS_TOKEN 和 LINE_CHANNEL_SECRET 是來自 LINE Message API，而 LINE_LIFF_ID 則是來自 LINE Login。

然後就完成啦！

測試

使用以下指令執行程式：

yarn dev

使用手機試著跟你的 LINE Bot 說話看看：）