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，這些區塊會呈橫向排列，並可以滑動。
<img src='https://hackmd.io/_uploads/ryVapH0-0.gif' width=300 height=300/>

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 相似，不同的地方是每個區中沒有選項，而是顯示一張大圖
<img src='https://hackmd.io/_uploads/SkO0aHAZR.gif' width=300 height=300/>

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 課程影片
---
<iframe width="560" height="315" src="https://www.youtube.com/embed/ag4EMzhIxqQ?si=99KseSKMh8IXhmSF" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

{%hackmd @ntuebigdata/about %}

## 相關教材連結

<div style="display: flex; justify-content:space-between;">
<div>
<a class="btn btn-warning" href="https://hackmd.io/@ntuebigdata/message-type-1" style="color:white;width:300px;text-overflow:ellipsis;overflow:hidden">◀◀◀ L07 Message Type(1) ◀◀◀</a>
</div>
<div>
<a class="btn btn-info" href="https://hackmd.io/@ntuebigdata/message-type-3-flex-message" style="color:white;width:300px;text-overflow:ellipsis;overflow:hidden">▶▶▶ L09 Message Type(3) Flex Message ▶▶▶</a>
</div>
</div>