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='請選擇項目')]
```
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"
)
),
]
)
)]
```
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
)
]
)
)]
```
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
),
```
2. `max`
設定選擇的**最大**日期時間
3. `min`
設定選擇的**最小**日期時間
4. `mode`
1. **date(日期)**
將 `mode` 設定成 `date`
```python
QuickReplyItem(
action=DatetimePickerAction(
label="Date Picker",
data="datetimepicker",
mode="date"
)
)
```
2. **time(時間)**
將 `mode` 設定成 `time`
```python
QuickReplyItem(
action=DatetimePickerAction(
label="Time Picker",
data="datetimepicker",
mode="time"
)
)
```
3. **datetime(日期與時間)**
將 `mode` 設定成 `datetime`
```python
QuickReplyItem(
action=DatetimePickerAction(
label="Datetime Picker",
data="datetimepicker",
mode="datetime"
)
)
```
```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")
)
]
)
)]
)
)
```
---
>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>
Sign in with Wallet
Connect another wallet