iT邦幫忙

2021 iThome 鐵人賽

DAY 10
5
Modern Web

陪聊_伃時不候 Line Bot 聊天機器人系列 第 10

【Day 10】Button Template 應用

今天我們來講怎麼使用 Line Messaging API 的 Button Template

先送上官網傳送門 Template Message

Template Message 種類

  1. Buttons,一般的按鈕
  2. Confirm,確認按鈕
  3. Carousel,可以橫向滑動的多選項按鈕
  4. Image Carousel,多影像按鈕。

我們今天先來看看前兩種。

Buttons Template Message

我們做一個 Button,有兩個選項:

  1. 是,第一次見面:點選後會回傳
  2. 已經見過了:點選後會回傳見過了

先直上程式碼!

from django.shortcuts import render

from django.shortcuts import render
from django.http import HttpResponse, HttpResponseBadRequest, HttpResponseForbidden
from django.views.decorators.csrf import csrf_exempt
from django.conf import settings

from linebot import LineBotApi, WebhookParser
from linebot.exceptions import InvalidSignatureError, LineBotApiError
from linebot.models import *

line_bot_api = LineBotApi(settings.LINE_CHANNEL_ACCESS_TOKEN)
parser = WebhookParser(settings.LINE_CHANNEL_SECRET)

@csrf_exempt
def callback(request):
    if request.method == 'POST':
        signature = request.META['HTTP_X_LINE_SIGNATURE']
        body = request.body.decode('utf-8')

        try:
            events = parser.parse(body, signature)  # 傳入的事件
        except InvalidSignatureError:
            return HttpResponseForbidden()
        except LineBotApiError:
            return HttpResponseBadRequest()

        for event in events:
            print("event", event.message.id)
            # print("event", type(event))
            if isinstance(event, MessageEvent):  # 如果有訊息事件
                print("message", event.message)
                message = []

                if event.message.type == 'text':
                    mtext = event.message.text
                    if "嗨" in mtext:
                        message.append(
                            TemplateSendMessage(
                                alt_text='Buttons template',
                                template=ButtonsTemplate(
                                    title='Hello',
                                    text='第一次見面嗎',
                                    actions=[
                                        MessageTemplateAction(
                                            label='是,第一次見面',
                                            text='是',
                                        ),
                                        MessageTemplateAction(
                                            label='已經見過了',
                                            text='見過了',
                                        ),
                                    ]
                                )
                            )
                        )



                    print("type of mtext: {}".format(type(mtext)))

                # 回復傳入的訊息文字
                line_bot_api.reply_message( event.reply_token, message )

        return HttpResponse()
    else:
        return HttpResponseBadRequest()

接著我們專心在這塊

if "嗨" in mtext:
    message.append(
        TemplateSendMessage(
            alt_text='Buttons template',
                template=ButtonsTemplate(
                    title='Hello',
                    text='第一次見面嗎',
                    actions=[
                        MessageTemplateAction(
                            label='是,第一次見面',
                            text='是',
                        ),
                        MessageTemplateAction(
                            label='已經見過了',
                            text='見過了',
                        ),
                    ]
                )
        )
    )

我們順便來看看 Buttons template 的 json example
這個官方提供的範例顯示了所有可以使用的屬性(attribute)。

{
  "type": "template",
  "altText": "This is a buttons template",
  "template": {
      "type": "buttons",
      "thumbnailImageUrl": "https://example.com/bot/images/image.jpg",
      "imageAspectRatio": "rectangle",
      "imageSize": "cover",
      "imageBackgroundColor": "#FFFFFF",
      "title": "Menu",
      "text": "Please select",
      "defaultAction": {
          "type": "uri",
          "label": "View detail",
          "uri": "http://example.com/page/123"
      },
      "actions": [
          {
            "type": "postback",
            "label": "Buy",
            "data": "action=buy&itemid=123"
          },
          {
            "type": "postback",
            "label": "Add to cart",
            "data": "action=add&itemid=123"
          },
          {
            "type": "uri",
            "label": "View detail",
            "uri": "http://example.com/page/123"
          }
      ]
  }
}

我們那出想要(或是需要)用到的屬性,轉成 python 的寫法。
那我們就直接介紹比較常見的屬性。

  • alt_text:代表電腦如果無法顯示時,會在電腦上顯示的文字
  • template:這裡對應到 json 裡的
"template": {
      "type": "buttons",

剩下的 titletextlabel 我們直接用下面這張圖片來解釋。
應該很清楚!

  • actions:就是包含主體 按鈕,還有按下去的要做的動作。有多種選項可以選擇。
    • Postback action
    • Message action
    • URI action
    • Datetime picker action
    • Camera action
    • Camera roll action
    • Location action
    • Richmenu Switch Action

不過我主要都使用 Message action 而以,所以我們目前也只針對這個。

MessageTemplateAction(
    label='是,第一次見面',
    text='是',
),

text,表示當你點選按鈕後送出之後會傳送出去的字。

但是要注意!
按鈕最多只能放四個,就是 actions 裡面只能有四個。


上一篇
【Day 09】Text Message 應用
下一篇
【Day 11】Button Template 應用 part 2
系列文
陪聊_伃時不候 Line Bot 聊天機器人30

尚未有邦友留言

立即登入留言