[Day 8]用Django架構建置專屬的LINEBOT吧 - 各種訊息API及quick_reply - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

第 12 屆 iThome 鐵人賽

DAY 8

影片教學

用Django架構建置專屬的LINEBOT吧系列第 8 篇

[Day 8]用Django架構建置專屬的LINEBOT吧 - 各種訊息API及quick_reply

12th鐵人賽 python line bot django

Maso的萬事屋

團隊迷途羔羊

2020-09-23 00:52:42

9133 瀏覽

分享至

LINE提供了許多種形式的訊息格式API，
讓開發者可以針對不同應用情境去設計內容呈現方式，

LINE API基礎聊天訊息

今天就針對一些基本的訊息格式做些示範，
之前已經有針對這個部分錄製了兩小段的影片，
雖然是以Flask的架構下做的，但LINE API這個部分是相同的，
所以今天就參考以下兩段影片做介紹囉，也會稍微提到一下quick_reply，
先上影片：

LINE訊息API

這篇稍微統整一下，LINE官方開放的API訊息格式可用的如下列：
1.文字訊息
2.貼圖訊息
3.圖片訊息
4.影片訊息
5.聲音訊息
6.位置訊息
7.影像地圖(ImageMap)訊息
8.模板/模塊(Template)訊息

上面是基礎的幾種訊息格式，
但要注意的是模塊訊息在電腦版的LINE上面是無法顯示的，
因此僅供手機用戶瀏覽使用，

以下為各種基礎的API在python中使用的範例：

文字訊息及Quick Reply

1.文字訊息：

message = TextSendMessage(text='要傳送的文字訊息')

文字訊息沒什麼問題，只要能夠以字串形式傳遞的都可以使用，
主要限制是文字字串長度5000，

除此之外，TextSendMessage後來還開放了quick_reply的功能，
讓你的文字訊息回傳之後，用戶可以透過小圖式進行互動，
如下圖所示，

quick_reply的圖示一共可以放以下幾種動作：
1.Postback Action
2.Message Action
3.Datetime Picker Action
4.Camera Action
5.Camera Roll Action
6.Location Action
*Quick Reply無法使用URI action

使用方法範例：

message=TextSendMessage(
    text="文字訊息",
    quick_reply=QuickReply(
        items=[
            QuickReplyButton(
                action=PostbackAction(label="Postback",data="回傳資料")
                ),
            QuickReplyButton(
                action=MessageAction(label="文字訊息",text="回傳文字")
                ),
            QuickReplyButton(
                action=DatetimePickerAction(label="時間選擇",data="時間選擇",mode='datetime')
                ),
            QuickReplyButton(
                action=CameraAction(label="拍照")
                ),
            QuickReplyButton(
                action=CameraRollAction(label="相簿")
                ),
            QuickReplyButton(
                action=LocationAction(label="傳送位置")
                )
            ]
        )
    )

在手機畫面的顯示結果就像下圖，
在LINE回傳文字訊息的同時會跳出幾個按鈕，
讓使用者可以更快速的進行下一步選擇，
是不是很方便!

不過這個功能並不適用於電腦版的LINE，
除此之外，如果想要更改圖示的話，
可以在action上面新增一個變數image_url='圖片url'即可
不過限制是必須為https網址，格式限制為png檔，長寬比1:1且小於1MB，

譬如我希望可以將圖示更改為以下兩張

圖示1 圖示2

則方法如下：

message=TextSendMessage(
    text="Quick Reply",
    quick_reply=QuickReply(
        items=[
            QuickReplyButton(
                image_url='https://image.flaticon.com/icons/png/128/91/91639.png',
                action=PostbackAction(label="Postback",data="回傳資料")
                ),
            QuickReplyButton(
                image_url='https://image.flaticon.com/icons/png/128/91/91617.png',
                action=MessageAction(label="文字訊息",text="回傳資料")
                )
            ]
        )
    )

呈現結果

今天在文字內容中主要介紹之前的影片中沒有提到的quick_reply，
其他訊息的部分，就不在這裡做一一介紹囉，訊息設定的部分大致上如下：

其他訊息格式API

2.貼圖訊息

message = StickerSendMessage(package_id=1, sticker_id=2)

3.圖片訊息

message = ImageSendMessage(original_content_url='圖片網址', preview_image_url='圖片網址')

4.影片訊息

message = VideoSendMessage(original_content_url='影片網址', preview_image_url='預覽圖片網址')

5.聲音訊息

message = AudioSendMessage(original_content_url='音訊網址', duration=100000)

6.位置訊息

message = LocationSendMessage(title='my location', address='Tainan', latitude=22.994821, longitude=120.196452)

7.組圖(ImageMap)訊息

message = ImagemapSendMessage(
    base_url='底圖URL',
    alt_text='組圖訊息',
    base_size=BaseSize(height=2000, width=2000),
    actions=[
        URIImagemapAction(
            link_uri='第一個按鈕URI',
            area=ImagemapArea(
                x=0, y=0, width=1000, height=1000
            )
        ),
        URIImagemapAction(
            link_uri='第二個按鈕URI',
            area=ImagemapArea(
                x=1000, y=0, width=1000, height=1000
            )
        ),
        URIImagemapAction(
            link_uri='第三個按鈕URI',
            area=ImagemapArea(
                x=0, y=1000, width=1000, height=1000
            )
        ),
        URIImagemapAction(
            link_uri='第四個按鈕URI',
            area=ImagemapArea(
                x=1000, y=1000, width=1000, height=1000
            )
        )
    ]
)

8.模板/模塊(Template)訊息

    message = TemplateSendMessage(
        alt_text='訂單預約資料',
        template=ConfirmTemplate(
            text="預約資料是否正確?",
            actions=[
                PostbackTemplateAction(
                    label="是",
                    data="預約資料正確"
                ),
                PostbackTemplateAction(
                    label="否",
                    data="預約資料錯誤"
                )
            ]
        )
    )

9.按鈕介面(BottonsTemplates)訊息

message = TemplateSendMessage(
    alt_text='確認會員資料',
    template=ButtonsTemplate(
        title='會員資料是否正確?',
        text="請確認您的會員資料",
        actions=[
            PostbackAction(
                label="是",
                data="會員資料正確"
            ),
            PostbackAction(
                label="否",
                data="會員資料錯誤"
            )
        ]
    )
)

10.確認介面(ConfirmTemplate)訊息

    message = TemplateSendMessage(
        alt_text='確認會員資料',
        template=ConfirmTemplate(
            text="會員資料是否正確?",
            actions=[
                PostbackTemplateAction(
                    label="是",
                    data="會員資料正確"
                ),
                PostbackTemplateAction(
                    label="否",
                    data="會員資料錯誤"
                )
            ]
        )
    )

11.旋轉木馬介面(CarouselTemplate)訊息

message = TemplateSendMessage(
    alt_text='Carousel template',
    template=CarouselTemplate(
        columns=[
            CarouselColumn(
                thumbnail_image_url='圖片連結放此',
                title='標題1',
                text='副標題1',
                actions=[
                    URITemplateAction(
                        label='連結點這邊',
                        uri='URL連結放此'
                    )
                ]
            ),
            CarouselColumn(
                thumbnail_image_url='圖片連結放此',
                title='標題2',
                text='副標題2',
                actions=[
                    URITemplateAction(
                        label='連結點這邊',
                        uri='URL連結放此'
                    )
                ]
            )
        ]
    )
)

12.圖片旋轉木馬(ImageCarouselTemplate)

message = TemplateSendMessage(
    alt_text='ImageCarouselTemplate',
    template=ImageCarouselTemplate(
        columns=[
            ImageCarouselColumn(
                image_url="圖片URL 1",
                action=URITemplateAction(
                    label="標籤1",
                    uri="連結URL 1"
                )
            ),
            ImageCarouselColumn(
                image_url="圖片URL 2",
                action=URITemplateAction(
                    label="標籤2",
                    uri="連結URL 2"
                )
            )
        ]
    )
)

以上為LINE API的基礎訊息介面，
下一篇將會講到非常好用的Flex Message囉~