這篇主要先做出能點選飲料，並回傳飲料名稱的功能。
就跟大部分官方帳號一樣，首先要先設定好圖文選單，並想好點擊後觸發的事件。
「啪噠啪噠河馬精靈茶鋪」 選擇了大尺寸，四格來做設定。
↓ view,py
#view,py
from django.conf import settings
from django.http import HttpResponse, HttpResponseBadRequest, HttpResponseForbidden
from django.views.decorators.csrf import csrf_exempt
from urllib.parse import parse_qsl
from module import func
from linebot import LineBotApi, WebhookParser
from linebot.exceptions import InvalidSignatureError, LineBotApiError
from linebot.models import (
MessageEvent,
TextSendMessage,
PostbackEvent,
PostbackAction
)
from "連結的專案名稱".models import order
line_bot_api = LineBotApi(settings.LINE_CHANNEL_ACCESS_TOKEN)
parser = WebhookParser(settings.LINE_CHANNEL_SECRET)
for event in events:
if isinstance(event, MessageEvent): # 如果有訊息事件
if mtext =="我要菜單":
func.sendMenu(event)
↓ func.py
#func.py
from django.conf import settings
from linebot import LineBotApi
from linebot.models import *
from linebot.models import FlexSendMessage
from linebot.models.flex_message import (
BubbleContainer, ImageComponent,BoxComponent
)
from linebot.models.actions import URIAction
from testapi.models import order
line_bot_api = LineBotApi(settings.LINE_CHANNEL_ACCESS_TOKEN)
def sendMenu(event):
try:
message = ImageSendMessage(
original_content_url="https://raw.githubusercontent.com/shakuneko/pic0412/main/menu%20(1).jpg",
preview_image_url="https://raw.githubusercontent.com/shakuneko/pic0412/main/menu%20(1).jpg"
)
line_bot_api.reply_message(event.reply_token,message)
except:
line_bot_api.reply_message(event.reply_token,TextSendMessage(text='不'))
手機上樣子(❀╹◡╹)
↓ view,py
elif mtext =="我要點餐":
func.sendButton(event)
↓ func.py
def sendButton(event):
try:
deleteData = order.objects.all()
deleteData.delete()
message = TemplateSendMessage(
alt_text='Buttons template',
template = ButtonsTemplate(
thumbnail_image_url="https://raw.githubusercontent.com/shakuneko/pic0412/main/%E6%88%91%E8%A6%81%E8%8F%9C%E5%96%AE.JPG",
title='Menu',
text='請問要哪個種類的飲料',
actions=[
PostbackTemplateAction(
label='啪噠原茶',
text='啪噠原茶',
data='action=啪噠原茶'
),
PostbackTemplateAction(
label='精靈純鮮奶茶',
text='精靈純鮮奶茶',
data='action=精靈純鮮奶茶'
),
PostbackTemplateAction(
label='啪噠奶茶',
text='啪噠奶茶',
data='action=啪噠奶茶'
)
]
)
)
line_bot_api.reply_message(event.reply_token,message)
except:
line_bot_api.reply_message(event.reply_token,TextSendMessage(text='不'))
手機上的樣子(❀╹◡╹)
選完種類之後就要選擇想要的飲料，也要選擇中杯或是大杯。
↓ 以下為 啪噠啪噠河馬精靈茶鋪 的飲料品項
| 啪噠原茶 | 精靈純鮮奶茶 | 啪噠奶茶 |
|---|---|---|
| 啪噠紅茶 | 精靈珍珠黑糖鮮奶茶 | 啪噠奶茶 |
| 四季烏龍 | 深焙鮮奶茶 | 茉香奶綠 |
| 啪噠普洱茶 | 四季烏龍鮮奶茶 | 鐵觀音奶茶 |
| 啪噠焙茶 | 鮮芋鮮奶茶 | 鮮芋奶綠 |
這裡會用到 postback event ，利用種類設的 data值 來做相對應飲料品項的呼叫。
↓ view,py
if isinstance(event, PostbackEvent):
backdata = dict(parse_qsl(event.postback.data))
if backdata.get('action') == '啪噠原茶':
func.sendback_original(event, backdata)
elif backdata.get('action') == '精靈純鮮奶茶':
func.sendback_pure(event, backdata)
elif backdata.get('action') == '啪噠奶茶':
func.sendback_milktea(event, backdata)
↓ func.py
設定三個種類的回傳飲料項目，data值前面的 A& 是為了再呼叫飲料其他調整項目所設。
因為項目太多因此這裡使用 Flex message simulator 設定後再將他生成的 json 複製過來使用（回傳的飲料 Flex message 程式重複性太高，因此此處以啪噠原茶作範例）。
def sendback_original(event, backdata):
try:
flex_message = FlexSendMessage(
alt_text='啪噠原茶',
contents={
"type": "carousel",
"contents": [
{
'type': 'bubble',
'direction': 'ltr',
"header": {
"type": "box",
"layout": "vertical",
"contents": [
{
"type": "text",
"text": "啪噠紅茶",
"weight": "bold",
"margin": "sm",
"size": "md",
"wrap": True
}
]
},
'hero': {
'type': 'image',
'url': 'https://raw.githubusercontent.com/shakuneko/pic0412/main/%E9%A3%B2%E6%96%99/%E5%95%AA%E5%99%A0%E7%B4%85%E8%8C%B6.JPG',
'size': 'full',
'aspectRatio': '1:1',
'aspectMode': 'cover',
},
'body':{
"type": "box",
"layout": "vertical",
"spacing":"sm",
"contents": [
{
"type": "button",
"style": "secondary",
"color":"#F6DCCB",
"action": {
'type': 'postback',
'label':'M 啪噠紅茶',
'text':'想喝 M 啪噠紅茶',
'data':'A&M啪噠紅茶'
}
},
{
"type": "button",
"style": "secondary",
"color":"#C4DABB",
"action": {
'type': 'postback',
'label':'L 啪噠紅茶',
'text':'想喝 L 啪噠紅茶',
'data':'A&L啪噠紅茶'
}
},
]
}
},
{
'type': 'bubble',
'direction': 'ltr',
"header": {
"type": "box",
"layout": "vertical",
"contents": [
{
"type": "text",
"text": "四季烏龍",
"weight": "bold",
"margin": "sm",
"size": "md",
"wrap": True
}
]
},
'hero': {
'type': 'image',
'url': 'https://raw.githubusercontent.com/shakuneko/pic0412/main/%E9%A3%B2%E6%96%99/%E5%9B%9B%E5%AD%A3%E7%83%8F%E9%BE%8D.JPG',
'size': 'full',
'aspectRatio': '1:1',
'aspectMode': 'cover',
},
'body':{
"type": "box",
"layout": "vertical",
"spacing":"sm",
"contents": [
{
"type": "button",
"style": "secondary",
"color":"#F6DCCB",
"action": {
'type': 'postback',
'label':'M 四季烏龍',
'text':'想喝 M 四季烏龍',
'data':'A&M四季烏龍'
}
},
{
"type": "button",
"style": "secondary",
"color":"#C4DABB",
"action": {
'type': 'postback',
'label':'L 四季烏龍',
'text':'想喝 L 四季烏龍',
'data':'A&L四季烏龍'
}
},
]
}
},
{
'type': 'bubble',
'direction': 'ltr',
"header": {
"type": "box",
"layout": "vertical",
"contents": [
{
"type": "text",
"text": "啪噠普洱茶",
"weight": "bold",
"margin": "sm",
"size": "md",
"wrap": True
}
]
},
'hero': {
'type': 'image',
'url': 'https://raw.githubusercontent.com/shakuneko/pic0412/main/%E9%A3%B2%E6%96%99/%E5%95%AA%E5%99%A0%E6%99%AE%E6%B4%B1%E8%8C%B6.JPG',
'size': 'full',
'aspectRatio': '1:1',
'aspectMode': 'cover',
},
'body':{
"type": "box",
"layout": "vertical",
"spacing":"sm",
"contents": [
{
"type": "button",
"style": "secondary",
"color":"#F6DCCB",
"action": {
'type': 'postback',
'label':'M 啪噠普洱茶',
'text':'想喝 M 啪噠普洱茶',
'data':'A&M啪噠普洱茶'
}
},
{
"type": "button",
"style": "secondary",
"color":"#C4DABB",
"action": {
'type': 'postback',
'label':'L 啪噠普洱茶',
'text':'想喝 L 啪噠普洱茶',
'data':'A&L啪噠普洱茶'
}
},
]
}
},
{
'type': 'bubble',
'direction': 'ltr',
"header": {
"type": "box",
"layout": "vertical",
"contents": [
{
"type": "text",
"text": "啪噠焙茶",
"weight": "bold",
"margin": "sm",
"size": "md",
"wrap": True
}
]
},
'hero': {
'type': 'image',
'url': 'https://raw.githubusercontent.com/shakuneko/pic0412/main/%E9%A3%B2%E6%96%99/%E5%95%AA%E5%99%A0%E7%84%99%E8%8C%B6.JPG',
'size': 'full',
'aspectRatio': '1:1',
'aspectMode': 'cover',
},
'body':{
"type": "box",
"layout": "vertical",
"spacing":"sm",
"contents": [
{
"type": "button",
"style": "secondary",
"color":"#F6DCCB",
"action": {
'type': 'postback',
'label':'M 啪噠焙茶',
'text':'想喝 M 啪噠焙茶',
'data':'A&M啪噠焙茶'
}
},
{
"type": "button",
"style": "secondary",
"color":"#C4DABB",
"action": {
'type': 'postback',
'label':'L 啪噠焙茶',
'text':'想喝 L 啪噠焙茶',
'data':'A&L啪噠焙茶'
}
},
]
}
},
]
}
)
line_bot_api.reply_message(event.reply_token, flex_message)
except:
line_bot_api.reply_message(event.reply_token,TextSendMessage(text='不'))
手機上的樣子(❀╹◡╹)
這樣就做完基本的飲料選擇囉~(◍•ᴗ•◍)ゝ
下篇會介紹如何選擇飲料的冰塊、甜度、加什麼配料以及杯數，敬請期待！
iThome鐵人賽
看影片追技術