---
# System prepended metadata

title: AI LINE Bot練功坊-L11 Quick Reply
tags: [Python, Line Bot]

---

AI LINE Bot練功坊-L11 Quick Reply
===
### 匯入函式庫
```python
from linebot.v3.messaging import (
    QuickReply,
    QuickReplyItem,
    PostbackAction,
    MessageAction,
    DatetimePickerAction,
    CameraAction,
    CameraRollAction,
    LocationAction
)
```
# Quick Reply
### 什麼是 Quick Reply？
> Quick Reply 是 Line Bot 中的一種功能，支援一對一和一對多聊天，可以讓使用者快速回覆訊息，而不必手動輸入文字。它通常以按鈕的形式呈現，讓使用者可以直接點擊回覆
> 
### Quick Reply的優點
> Quick Reply 可以提高使用者體驗，使互動更加流暢和便捷

# 設定 Quick Reply
建立Quick Reply方法簡單，僅需要依據所設定的數量在`text message object`中新增多個`quickReply`的物件`items`

**＊注意**：至多**使用13個**`items`

1. 建立一個文字訊息物件來詢問使用者的請求。
```python
messages=[TextMessage(text='請選擇項目')]
```
![image](https://hackmd.io/_uploads/H1FJisVGC.png)

2. 新增多個`quickReply`的物件`items`
```python
messages=[TextMessage(
    text='請選擇項目',
    quick_reply=QuickReply(
        items=[
            QuickReplyItem(
                action=PostbackAction(
                    label="Postback",
                    data="postback",
                    display_text="postback"
                )
            ),
            QuickReplyItem(
                action=MessageAction(
                    label="Message",
                    text="message"
                )
            ),
            QuickReplyItem(
                action=DatetimePickerAction(
                    label="Date Picker",
                    data="datetimepicker",
                    mode="date"
                )
            ),
        ]
    )
)]
```
![image](https://hackmd.io/_uploads/HkLT9oNzC.png)

3. 皆可以透過`imageUrl`設定按鈕圖示，而部分`action`若沒有設定`imageUrl`會顯示預設圖示。圖示有格式限制，請參考[開發者文件](https://developers.line.biz/en/reference/messaging-api/#quick-reply-button-object)
```python
messages=[TextMessage(
    text='Quick reply',
    quick_reply=QuickReply(
        items=[
            QuickReplyItem(
                action=PostbackAction(
                    label="Postback",
                    data="postback",
                    display_text="postback"
                ),
                image_url=postback_icon
            ),
            QuickReplyItem(
                action=MessageAction(
                    label="Message",
                    text="message"
                )
                image_url=message_icon
            ),
            QuickReplyItem(
                action=DatetimePickerAction(
                    label="Date Picker",
                    data="datetimepicker",
                    mode="date"
                ),
                image_url=date_icon
            )
        ]
    )
)]
```
![image](https://hackmd.io/_uploads/ByllHsoNMC.png)

4. 選擇按鈕要使用的`action`
* 只有**手機**才可以使用
    * Camera action 開啟相機
    * Location action 開啟選單
    
* 其他訊息都可以通用
    * Postback action 
    * Message action 
    * URI action 
    * Datetime picker action 
    * Clipboard action
    * Camera roll action 開啟相簿

### Datetime picker action
可以設定以下幾個參數
1. `initial`
設定進入選擇日期畫面的初始日期時間
```python!
QuickReplyItem(
    action=DatetimePickerAction(
        label="Datetime Picker",
        data="datetimepicker",
        mode="datetime",
        initial="2024-01-01T00:00"
    ),
    image_url=datetime_icon
),
```
![image](https://hackmd.io/_uploads/H1NxI9NfA.png)

2. `max`
設定選擇的**最大**日期時間

3. `min`
設定選擇的**最小**日期時間

4. `mode`
    1. **date(日期)**
    將 `mode` 設定成 `date`
    ```python
    QuickReplyItem(
        action=DatetimePickerAction(
            label="Date Picker",
            data="datetimepicker",
            mode="date"
        )
    )
    ```
    ![image](https://hackmd.io/_uploads/Sy29Q94G0.png)


    2. **time(時間)**
    將 `mode` 設定成 `time`
    ```python
    QuickReplyItem(
        action=DatetimePickerAction(
            label="Time Picker",
            data="datetimepicker",
            mode="time"
        )
    )
    ```
    ![image](https://hackmd.io/_uploads/r1ylEcVMA.png)

    3. **datetime(日期與時間)**
    將 `mode` 設定成 `datetime`
    ```python
    QuickReplyItem(
        action=DatetimePickerAction(
            label="Datetime Picker",
            data="datetimepicker",
            mode="datetime"
        )
    )
    ```
![image](https://hackmd.io/_uploads/rynCX5NfR.png)

```python
postback_icon = request.url_root + 'static/postback.png'
postback_icon = postback_icon.replace("http", "https")
message_icon = request.url_root + 'static/message.png'
message_icon = message_icon.replace("http", "https")
datetime_icon = request.url_root + 'static/calendar.png'
datetime_icon = datetime_icon.replace("http", "https")
date_icon = request.url_root + 'static/calendar.png'
date_icon = date_icon.replace("http", "https")
time_icon = request.url_root + 'static/time.png'
time_icon = time_icon.replace("http", "https")
line_bot_api.reply_message(
    ReplyMessageRequest(
        reply_token=event.reply_token,
        messages=[TextMessage(
            text='請選擇以下其中一個選項',
            quick_reply=QuickReply(
                items=[
                    QuickReplyItem(
                        action=PostbackAction(
                            label="Postback",
                            data="postback",
                            display_text="postback"
                        ),
                        image_url=postback_icon
                    ),
                    QuickReplyItem(
                        action=MessageAction(
                            label="Message",
                            text="message"
                        ),
                        image_url=message_icon
                    ),
                    QuickReplyItem(
                        action=DatetimePickerAction(
                            label="Date Picker",
                            data="datetimepicker",
                            mode="date"
                        ),
                        image_url=date_icon
                    ),
                    QuickReplyItem(
                        action=DatetimePickerAction(
                            label="Time Picker",
                            data="datetimepicker",
                            mode="time"
                        ),
                        image_url=time_icon
                    ),
                    QuickReplyItem(
                        action=DatetimePickerAction(
                            label="Datetime Picker",
                            data="datetimepicker",
                            mode="datetime"
                        ),
                        image_url=datetime_icon
                    ),
                    QuickReplyItem(
                        action=CameraAction(label="Camera")
                    ),
                    QuickReplyItem(
                        action=CameraRollAction(label="Camera Roll")
                    ),
                    QuickReplyItem(
                        action=LocationAction(label="Location")
                    )
                ]
            )
        )]
    )
)
```
![image](https://hackmd.io/_uploads/rylaYoEzA.png)

---
>Reference：https://developers.line.biz/en/reference/messaging-api/#quick-reply

Youtube 課程影片
---
<iframe width="560" height="315" src="https://www.youtube.com/embed/kwAJwh40z3I?si=lbzWhjMfiVKldr5u" 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-4-imagemap-message" style="color:white;width:300px;text-overflow:ellipsis;overflow:hidden">◀◀◀ L10 Message Type(4) Imagemap Message ◀◀◀</a>
  </div>
  <div>
    <a class="btn btn-info" href="https://hackmd.io/@ntuebigdata/rich-menu" style="color:white;width:300px;text-overflow:ellipsis;overflow:hidden">▶▶▶ L12 Rich Menu ▶▶▶</a>
  </div>
</div>