AI LINE Bot練功坊-L8 Message Type (2) Template Message

Template Message

匯入函式庫

from linebot.v3.messaging import (
    ConfirmTemplate,
    ButtonsTemplate,
    CarouselTemplate,
    ImageCarouselTemplate
)

Action objects

匯入函式庫

from linebot.v3.messaging import (
    PostbackAction,
    MessageAction,
    URIAction,
    DatetimePickerAction,
    CameraAction,
    CameraRollAction,
    LocationAction
)

Template Message、Flex Message都可以使用到messagingAPI裡的Action objects。
Action objects是當使用者點擊訊息中的按鈕或影像時機器人會執行的操作類型，共有以下幾種Type：

• Postback action : 回傳指定給伺服器的內容
• Message action : 讓使用者傳出指定訊息
• URI action連結 : 讓使用者連結指定網址
• Datetime picker action : 讓使用者選擇時間日期
• Camera action : 讓使用者開啟相機
• Camera roll action : 讓使用者開啟相簿
• Location action位置 : 讓使用者開啟地圖

使用範例_程式碼

URIAction(label='連結', uri='https://www.facebook.com/NTUEBIGDATAEDU'),
PostbackAction(label='回傳值', data='ping', text='傳了'),
MessageAction(label='傳"哈囉"', text='哈囉'),
DatetimePickerAction(type="datetimepicker", label="Select date",data ='storeId=12345', mode='datetime'),
CameraAction(type='camera',label='Camera'),
CameraRollAction(type='cameraRoll',label='cameraRoll'),
LocationAction(type="location",label="Location")

---

Reference：https://developers.line.biz/en/reference/messaging-api/#action-objects

Template types

Template message 是一個事先模板化的訊息，我們只需要透過調整各項參數來製作客製化的訊息。
跟 Flex message 有類似的功能，但是Template message只能在手機上查看訊息，在電腦版只會看到一串文字。
總共有四種類型的樣式可以選擇，分別為 Buttons、Confirm、Carousel、ImageCarousel。

1. Buttons Template
2. Confirm Template
3. Carousel Template
4. ImageCarousel Template

1. Confirm Template

簡短提問的訊息模板，會提供最多兩個按鈕供使用者點選。
只能有兩個 action，通常用來用在使用者只有兩個選擇的時候。

text 樣板說明文字。
actions 點擊按鈕觸發的行為，一個按鈕一種行為，最多支援兩個按鈕。

程式碼:

confirm_template = ConfirmTemplate(
    text='今天學程式了嗎?',
    actions=[
        MessageAction(label='是', text='是!'),
        MessageAction(label='否', text='否!')
    ]
)
template_message = TemplateMessage(
    alt_text='Confirm alt text',
    template=confirm_template
)

Reference：https://developers.line.biz/en/docs/messaging-api/message-types/#confirm-template

2. Buttons Template

是一種包含按鈕的訊息，提供 最多4個 按鈕供使用者點選

thumbnailImageUrl 縮圖連結，支援 jpg 和 png，最大寬度 1024px。
title 樣板標題。
text 樣板說明文字。
actions 點擊按鈕觸發的行為，一個按鈕一種行為，最多支援四個按鈕。

這裡使用三種action type 分別是 uri、postback、message，可以根據需要的功能去設定按鈕動作。
uri 是使用者按下後會導入 web連結。
postback 在使用者按下的時候可以用 event postback 接收這個資訊來做後續處理。
message 是使用者按下去會自動變成輸入文字模式，而 label 通常與 text 設定一樣就可以了。

程式碼:

buttons_template = ButtonsTemplate(
    thumbnail_image_url=url,
    title='示範',
    text='詳細說明',
    actions=[
        URIAction(
            label='連結',
            uri='https://www.facebook.com/NTUEBIGDATAEDU'),
            PostbackAction(label='回傳值', data='ping', displayText='傳了'),
            MessageAction(label='傳"哈囉"', text='哈囉'),
            DatetimePickerAction(label="選擇時間", data="時間", mode="datetime")
    ]
)
template_message = TemplateMessage(
    alt_text="This is a buttons template",
    template=buttons_template
)

Reference：https://developers.line.biz/en/docs/messaging-api/message-types/#buttons-template

3. Carousel Template

是一種多個 Buttons template 的集合，如果要做一個左右滑的 Buttons template 就可以用 Carousel template。
最多有五個區塊，每個區塊內最多三個 action，這些區塊會呈橫向排列，並可以滑動。

columns 要出現的按鈕樣板，使用串列格式。
thumbnailImageUrl 縮圖連結，支援 jpg 和 png，最大寬度 1024px。
title 樣板標題。
text 樣板說明文字。
actions 點擊按鈕觸發的行為，一個按鈕一種行為，最多支援四個按鈕。
有三種action type 分別是 uri、postback、message，可以根據需要的功能去設定按鈕動作。
uri 是使用者按下後會導入 web連結。
postback 在使用者按下的時候可以用 event postback 接收這個資訊來做後續處理。
message 是使用者按下去會自動變成輸入文字模式，而 label 通常與 text 設定一樣就可以了。
程式碼:

url = request.url_root + '/static/Logo.jpg'
url = url.replace("http", "https")
app.logger.info("url=" + url)
carousel_template = CarouselTemplate(
    columns=[
        CarouselColumn(
            thumbnail_image_url=url,
            title='第一項',
            text='這是第一項的描述',
            actions=[
                URIAction(
                    label='按我前往 Google',
                    uri='https://www.google.com'
                )
            ]
        ),
        CarouselColumn(
            thumbnail_image_url=url,
            title='第二項',
            text='這是第二項的描述',
            actions=[
                URIAction(
                    label='按我前往 Yahoo',
                    uri='https://www.yahoo.com'
                )
            ]
        )
    ]
)

carousel_message = TemplateMessage(
    alt_text='這是 Carousel Template',
    template=carousel_template
)

Reference：https://developers.line.biz/en/docs/messaging-api/message-types/#carousel-template

4. ImageCarousel Template

會提供最多十張可以滑動選擇的圖片，作為按鈕供使用者點選。
和 Carousel template 相似，不同的地方是每個區中沒有選項，而是顯示一張大圖

columns 要出現的圖片樣板，使用串列格式。
image_Url 圖片網址，支援 jpg 和 png，最大寬度 1024px。
actions 點擊圖片所觸發的行為，一張圖片一種行為，最多支援十張圖片。
uri 點擊會連結的網址

程式碼:

url = request.url_root + '/static'
url = url.replace("http", "https")
app.logger.info("url=" + url)
image_carousel_template = ImageCarouselTemplate(
    columns=[
        ImageCarouselColumn(
            image_url=url+'/facebook.png',
            action=URIAction(
                label='造訪FB',
                uri='https://www.facebook.com/NTUEBIGDATAEDU'
            )
        ),
        ImageCarouselColumn(
            image_url=url+'/instagram.png',
            action=URIAction(
                label='造訪IG',
                uri='https://instagram.com/ntue.bigdata?igshid=YmMyMTA2M2Y='
            )
        ),
        ImageCarouselColumn(
            image_url=url+'/youtube.png',
            action=URIAction(
                label='造訪YT',
                uri='https://www.youtube.com/@bigdatantue'
            )
        ),
    ]
)

image_carousel_message = TemplateMessage(
    alt_text='圖片輪播範本',
    template=image_carousel_template
)

Reference：https://developers.line.biz/en/docs/messaging-api/message-types/#image-carousel-template

Youtube 課程影片

關於我們

國立臺北教育大學 教育大數據微學程

先修微課程

🤖 AI LineBot 練功坊系列課程
從入門到精通，學習如何開發並應用 LINE Bot，讓你輕鬆掌握最前沿的聊天機器人技術。

👨‍💻 Python 初學小教室
針對零基礎學員設計，循序漸進地教授 Python 基本語法及實作技巧，幫助你快速上手。

📊 統計學小教室
系統講解統計學理論及其應用，適合想要提升數據分析能力的學習者。

Facebook

Instagram

Threads

YouTube

Line官方帳號

相關教材連結

◀◀◀ L07 Message Type(1) ◀◀◀

▶▶▶ L09 Message Type(3) Flex Message ▶▶▶