iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 8
0
影片教學

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

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

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回傳文字訊息的同時會跳出幾個按鈕,
讓使用者可以更快速的進行下一步選擇,
是不是很方便!

https://ithelp.ithome.com.tw/upload/images/20200909/20121176a4rCOkQkPk.png

不過這個功能並不適用於電腦版的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="回傳資料")
                )
            ]
        )
    )

呈現結果https://ithelp.ithome.com.tw/upload/images/20200909/20121176l1vwlaMYS7.jpg

今天在文字內容中主要介紹之前的影片中沒有提到的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囉~


上一篇
[Day 7]用Django架構建置專屬的LINEBOT吧 - Rich Menu
下一篇
[Day 9]用Django架構建置專屬的LINEBOT吧 - Flex Message(I)
系列文
用Django架構建置專屬的LINEBOT吧30

尚未有邦友留言

立即登入留言