DAY 10 LINE Bot 進階互動功能(下篇)

2022 iThome 鐵人賽

DAY 10

自我挑戰組

30天建構出一個簡單 LineBot 機器人系列第 10 篇

14th鐵人賽

Lumeowmo

2022-09-24 17:09:26

1311 瀏覽

分享至

今天和大家介紹最後一種樣板訊息圖片轉盤樣版，以及圖片地圖、日期時間按鈕。
圖片地圖為點選圖片的特定區域以執行指定功能，日期時間功能則會顯示日期時間圖形介面讓使用者選取日期及時間。

1. 圖片轉盤樣版

圖片轉盤樣版與轉盤樣版相似，只是轉盤的元素由按鈕樣版改為圖片，也就是圖片為按鈕本身。

基本語法

image_carousel_template_message = TemplateSendMessage(
    alt_text = 取代文字,
    template=ImageCarouselTemplate(
        columns=[
            ImageCarouselColumn(
                ithumbnail_image_url = 圖片網址一,
                action = 按鈕元件一
                )
            ),
            ImageCarouselColumn(
                ithumbnail_image_url = 圖片網址二,
                action = 按鈕元件二
                )
            ),
            ......
        ]
    )
)

練習程式

def sendImgCarousel(event):
    try:
        message = TemplateSendMessage(
            alt_text = '圖片轉盤樣板',
            template = ImageCarouselTemplate(
                columns = [
                    ImageCarouselColumn(
                    image_url='https://i.imgur.com/pRdaAmS.jpg',
                        action = PostbackTemplateAction(
                            label='選擇披薩',
                            text='選擇披薩',
                            data='action=sell&item=披薩'
                        )
                    ),
                    ImageCarouselColumn(
                    image_url='https://i.imgur.com/MyLoA5d.jpg',
                        action = PostbackTemplateAction(
                            label='選擇飲料',
                            text='選擇飲料',
                            data='action=sell&item=飲料'
                        )
                    )
                ]
            )
              
        )
      
        line_bot_api.reply_message(event.reply_token,message)
    except:
        line_bot_api.reply_message(event.reply_token,TextSendMessage(text='發生錯誤!'))

def sendBack_sell(event, backdata):
    try:
        message = TextSendMessage(
            text = '你選擇的是'+backdata.get('item')
        )
        
        line_bot_api.reply_message(event.reply_token,message)
    except:
        line_bot_api.reply_message(event.reply_token,TextSendMessage(text='發生錯誤!'))

2. 圖片地圖

圖片地圖為一個矩形圖片，提供使用者點選某矩形區域時，就會執行該矩形區域對應的程式指令。

基本語法

imagemap_message = ImagemapSendMessage(
    base_url = 圖片網址,
    alt_text = 替代文字,
    base_size=BaseSize(height=圖片高度, width=圖片寬度),
    actions=[
        圖片地圖按鈕一,
        圖片地圖按鈕二,
        ......
    ]
)

「base_url」為圖片的儲存雲端空間網址，需特別注意的是：用於圖片地圖功能的照片其寬度需為1040puxel才可以在手機上正常顯示
圖片地圖按鈕有兩種：文字圖片地圖按鈕、連結圖片地圖按鈕

文字圖片地圖按鈕

使用者點選文字圖片地圖按鈕就會回傳文字訊息

基本語法

MessageImagemapAction(
    text = 回傳文字訊息內容,
    area=ImagemapArea(
        x = 矩形左上角X座標, 
        y = 矩形左上角Y座標,  
        width = 矩形寬度, 
        height = 矩形高度
    )
),

連結圖片地圖按鈕

使用者點選連結圖片地圖按鈕就會開啟指定的網頁。

基本語法

URIImagemapAction(
    link_uri = 要開啟的網頁連結網址,
    area = ImagemapArea(
        x = 矩形左上角X座標, 
        y = 矩形左上角Y座標,  
        width = 矩形寬度, 
        height = 矩形高度
    )
),

練習程式


def sendImgmap(event):
    try:
        image_url = 'https://i.imgur.com/Yz2yzve.jpg'
        imgwidth = 1040
        imgheight = 300

        message =  ImagemapSendMessage(
            base_url = image_url,
            alt_text = "圖片地圖範例",
            base_size = BaseSize(height=imgheight, width=imgwidth),
            actions=[
                MessageImagemapAction(
                    text = '選擇紅色',
                    area = ImagemapArea( #設定圖片範圍左方1/4
                        x = 0, 
                        y = 0,  
                        width = imgwidth * 0.25, 
                        height = imgheight
                    )
                ),
                MessageImagemapAction(
                    text = '選擇藍色',
                    area = ImagemapArea( #設定圖片範圍右方1/4
                        x = imgwidth * 0.75, 
                        y = 0,  
                        width = imgwidth * 0.25, 
                        height = imgheight
                    )
                ),
            ]
        )
        line_bot_api.reply_message(event.reply_token,message)
    except:
        line_bot_api.reply_message(event.reply_token,TextSendMessage(text='發生錯誤!'))

3. 日期時間

日期時間按鈕為回應樣板訊息的按鈕件，包含日期、時間及日期時間三種模式。

基本語法

DatetimePickerTemplateAction(
    label = 按鈕文字,
    data = postback資料,
    mode = 模式,
    initial = 顯示時間初始值,
    min = 最小日期,
    max = 最大日期
)

mode為日期時間模式，有三種模式：date(日期模式)、time(時間模式)、datetime(日期時間模式)
initial為日期時間初始值，即開啟日期時間圖形介面時顯示的日期時間，不同模式的日期時間格式不同，其格式如下：
(1).日期模式：「YYYY-mm-DD」,如 2019-06-01
(2).時間模式：「HH:MM」,如 16:05(小時:分鐘)
(3).日期時間模式：「YYYY-mm-DDTHH:MM」,如 2019-06-01T16:05

練習程式


def sendDatetime(event):
    try:
        message =  TemplateSendMessage(
            alt_text = "日期時間範例",
            template = ButtonsTemplate(
            thumbnail_image_url='https://i.imgur.com/pRdaAmS.jpg',
                title='日期時間練習',
                text='請選擇：',
                actions=[
                    DatetimePickerTemplateAction(
                        label = "選取日期",
                        data = "action=sell_time&mode=date",
                        mode = "date",
                        initial = "2022-09-24",
                        min = "2022-03-24",
                        max = "2022-12-25"
                    ),
                    DatetimePickerTemplateAction(
                        label = "選取時間",
                        data = "action=sell_time&mode=time",
                        mode = "time",
                        initial = "10:00",
                        min = "00:00",
                        max = "23:59"
                    ),
                    DatetimePickerTemplateAction(
                        label = "選取日期時間",
                        data = "action=sell_time&mode=datetime",
                        mode = "datetime",
                        initial = "2022-09-24T10:00",
                        min = "2022-03-24T00:00",
                        max = "2022-12-25T23:59"
                    )
                ]
                    
            )
        )
        line_bot_api.reply_message(event.reply_token,message)
    except:
        line_bot_api.reply_message(event.reply_token,TextSendMessage(text='發生錯誤!'))

def sendData_sell(event, backdata):
    try:
        if backdata.get('mode') == 'date':
            dt = '日期為：'+ event.postback.params.get('date')
        elif backdata.get('mode') == 'time':
            dt = '時間為：'+ event.postback.params.get('time')

        elif backdata.get('mode') == 'datetime':
            # 讀取日期時間
            dt = datetime.datetime.strptime(event.postback.params.get('datetime'), '%Y-%m-%dT%H:%M')
            
            #轉為字串
            dt = dt.strftime('{d}%Y-%m-%d, {t}%H:%M').format(d='日期為:', t='時間為:')

        message = TextSendMessage(
            text = dt
        )
        
        line_bot_api.reply_message(event.reply_token,message)
    except:
        line_bot_api.reply_message(event.reply_token,TextSendMessage(text='發生錯誤!'))

日期模式：