iT邦幫忙

2022 iThome 鐵人賽
DAY 24
0
自我挑戰組

30天建構出一個簡單 LineBot 機器人系列 第 24 篇

DAY 24 專案介紹-3 （飲料訂購機器人實作-2）

14th鐵人賽
851 瀏覽

  • 分享至 

  • xImage
    •  

上篇做出選擇飲料品項，這篇將會介紹如何選擇飲料的冰塊、甜度、加什麼配料以及杯數，最後購買確認。

選擇飲料冰塊、甜度、加料以及杯數

1. 冰塊。

  • 選擇完飲料後會回傳冰塊表
  • view.py 設定當回傳事件是 A 時，回傳冰塊表。
  • 將回傳程式寫在 func.py

↓ view,py

#view,py
    result = event.postback.data[2:].split('&') #將 data 值用 & 分開，並取前面的值
        elif event.postback.data[0:1] == "A": #上篇 data="A&飲料名稱"，
            ice = event.postback.data[2:] #拿取冰塊資料
            func.sendback_ice(event, backdata,ice)

↓ func.py
設定 data 為 B 以讓程式回傳甜度表，。

#func.py
def sendback_ice(event, backdata, ice):
    try:
        bubble = BubbleContainer(
            direction='ltr',
            body = BoxComponent(
                layout='horizontal',
                spacing='xs',
                contents=[
                    ImageComponent(
                        url="https://raw.githubusercontent.com/shakuneko/pic0412/main/%E5%86%B0%E5%A1%8A%E7%94%9C%E5%BA%A6/%E5%B8%B8%E6%BA%AB-03.jpg",
                        size="lg",
                        aspect_mode="cover",
                        action=PostbackTemplateAction(
                            label='常溫',
                            text='想要 常溫',
                            data='B&' + ice + '&常溫'
                        )
                    ),
                    ImageComponent(
                        url="https://raw.githubusercontent.com/shakuneko/pic0412/main/%E5%86%B0%E5%A1%8A%E7%94%9C%E5%BA%A6/%E5%8E%BB%E5%86%B0-03.jpg",
                        size="lg",
                        aspect_mode="cover",
                        action=PostbackTemplateAction(
                            label='去冰',
                            text='想要 去冰',
                            data='B&' + ice + '&去冰'
                        )
                    ),
                    ImageComponent(
                        url="https://raw.githubusercontent.com/shakuneko/pic0412/main/%E5%86%B0%E5%A1%8A%E7%94%9C%E5%BA%A6/%E5%BE%AE%E5%86%B0-03.jpg",
                        size="lg",
                        aspect_mode="cover",
                        action=PostbackTemplateAction(
                            label='微冰',
                            text='想要 微冰',
                            data='B&' + ice + '&微冰'
                        )
                    ),
                    ImageComponent(
                        url="https://raw.githubusercontent.com/shakuneko/pic0412/main/%E5%86%B0%E5%A1%8A%E7%94%9C%E5%BA%A6/%E5%B0%91%E5%86%B0-03.jpg",
                        size="lg",
                        aspect_mode="cover",
                        action=PostbackTemplateAction(
                            label='少冰',
                            text='想要 少冰',
                            data='B&' + ice + '&少冰'
                        )
                    ),
                    ImageComponent(
                        url="https://raw.githubusercontent.com/shakuneko/pic0412/main/%E5%86%B0%E5%A1%8A%E7%94%9C%E5%BA%A6/%E6%AD%A3%E5%B8%B8-03.jpg",
                        size="lg",
                        aspect_mode="cover",
                        action=PostbackTemplateAction(
                            label='正常',
                            text='想要 正常',
                            data='B&' + ice + '&正常'
                        )
                    ),
                ]
                )
            )
        
        message = FlexSendMessage(alt_text="冰塊",contents=bubble)
        line_bot_api.reply_message(event.reply_token, message)
        
    except:
        line_bot_api.reply_message(event.reply_token,TextSendMessage(text='ice no'))

手機上的樣子(❀╹◡╹)

2. 甜度。

  • 選擇完冰量後會回傳甜度表
  • view.py 設定當回傳事件是 B 時，回傳甜度表。
  • 將回傳程式寫在 func.py

↓ view,py

#view,py
        elif event.postback.data[0:1] == "B":
            suger = event.postback.data[2:] #拿取甜度資料
            func.sendback_suger(event, backdata,suger)

↓ func.py
設定 data 為 C 以讓程式回傳數量選擇。

#func.py
def sendback_suger(event, backdata, suger):
    try:
        bubble = BubbleContainer(
            direction='ltr',
            body = BoxComponent(
                layout='horizontal',
                spacing='xs',
                contents=[
                    ImageComponent(
                        url="https://raw.githubusercontent.com/shakuneko/pic0412/main/%E5%86%B0%E5%A1%8A%E7%94%9C%E5%BA%A6/%E7%84%A1%E7%B3%96-03.jpg",
                        size="lg",
                        aspect_mode="cover",
                        action=PostbackTemplateAction(
                            label='無糖',
                            text='想要 無糖',
                            data='C&' + suger + '&無糖'
                        )
                    ),
                   ImageComponent(
                       url="https://raw.githubusercontent.com/shakuneko/pic0412/main/%E5%86%B0%E5%A1%8A%E7%94%9C%E5%BA%A6/%E5%BE%AE%E7%B3%96-03.jpg",
                       size="lg",
                       aspect_mode="cover",
                       action=PostbackTemplateAction(
                           label='微糖',
                           text='想要 微糖',
                           data='C&' + suger + '&微糖'
                       )
                   ),
                   ImageComponent(
                       url="https://raw.githubusercontent.com/shakuneko/pic0412/main/%E5%86%B0%E5%A1%8A%E7%94%9C%E5%BA%A6/%E5%8D%8A%E7%B3%96-03.jpg",
                       size="lg",
                       aspect_mode="cover",
                       action=PostbackTemplateAction(
                           label='半糖',
                           text='想要 半糖',
                           data='C&' + suger + '&半糖'
                       )
                   ),
                   ImageComponent(
                       url="https://raw.githubusercontent.com/shakuneko/pic0412/main/%E5%86%B0%E5%A1%8A%E7%94%9C%E5%BA%A6/%E5%B0%91%E7%B3%96-03.jpg",
                       size="lg",
                       aspect_mode="cover",
                       action=PostbackTemplateAction(
                           label='少糖',
                           text='想要 少糖',
                           data='C&' + suger + '&少糖'
                       )
                   ),
                   ImageComponent(
                       url="https://raw.githubusercontent.com/shakuneko/pic0412/main/%E5%86%B0%E5%A1%8A%E7%94%9C%E5%BA%A6/%E5%85%A8%E7%B3%96-03.jpg",
                       size="lg",
                       aspect_mode="cover",
                       action=PostbackTemplateAction(
                           label='全糖',
                           text='想要 全糖',
                           data='C&' + suger + '&全糖'
                       )
                   ),
                ]
                )
            )
        
        message = FlexSendMessage(alt_text="糖度",contents=bubble)
        line_bot_api.reply_message(event.reply_token, message)
        
    except:
        line_bot_api.reply_message(event.reply_token,TextSendMessage(text='suger no'))

手機上的樣子(❀╹◡╹)

3. 加料。

  • 選擇完甜度後會回傳加什麼料的 Flex Message
  • view.py 設定當回傳事件是 C 時回傳加料選擇。
  • 將回傳程式寫在 func.py

以下為所設有的加料選擇
黑糖珍珠、椰果、小芋原、蜂蜜白玉、仙草、布丁、不用加料。

↓ view,py

#view,py
        elif event.postback.data[0:1] == "C":
            add = event.postback.data[2:]
            func.sendback_add(event, backdata,add)

↓ func.py
設定 data 為 C 以讓程式回傳數量選擇。

#func.py
def sendback_add(event, backdata, add):
    try:
        bubble = BubbleContainer(
            direction='ltr',
            header=BoxComponent(
                layout='vertical',
                background_color='#DBD3D8',
                contents=[
                    TextComponent(
                        text="加料 +10，只能選一種!",
                        size="md",
                        weight="bold",
                        margin="sm"
                        )
                    ]
                ),
            body = BoxComponent(
                layout='vertical',
                margin="sm",
                contents=[
                    BoxComponent(
                        layout='horizontal',
                        spacing='xs',
                        contents=[
                            ImageComponent(
                                url="https://raw.githubusercontent.com/shakuneko/pic0412/main/%E9%85%8D%E6%96%99/%E9%BB%91%E7%B3%96%E7%8F%8D%E7%8F%A0.JPG",
                                size="lg",
                                aspect_mode="cover",
                                action=PostbackTemplateAction(
                                    label='黑糖珍珠',
                                    text='想要 黑糖珍珠',
                                    data='D&' + add + '&黑糖珍珠'
                                )
                            ),
                            ImageComponent(
                                url="https://raw.githubusercontent.com/shakuneko/pic0412/main/%E9%85%8D%E6%96%99/%E6%A4%B0%E6%9E%9C.JPG",
                                size="lg",
                                aspect_mode="cover",
                                action=PostbackTemplateAction(
                                    label='椰果',
                                    text='想要 椰果',
                                    data='D&' + add + '&椰果'
                                )
                            ),
                            ImageComponent(
                                url="https://raw.githubusercontent.com/shakuneko/pic0412/main/%E9%85%8D%E6%96%99/%E5%B0%8F%E8%8A%8B%E5%9C%93.JPG",
                                size="lg",
                                aspect_mode="cover",
                                action=PostbackTemplateAction(
                                    label='小芋圓',
                                    text='想要 小芋圓',
                                    data='D&' + add + '&小芋圓'
                                )
                            ),
                            ]   
                        ),
                    BoxComponent(
                        layout='horizontal',
                        spacing='xs',
                        contents=[
                            ImageComponent(
                                url="https://raw.githubusercontent.com/shakuneko/pic0412/main/%E9%85%8D%E6%96%99/%E8%9C%82%E8%9C%9C%E7%99%BD%E7%8E%89.JPG",
                                size="lg",
                                aspect_mode="cover",
                                action=PostbackTemplateAction(
                                    label='蜂蜜白玉',
                                    text='想要 蜂蜜白玉',
                                    data='D&' + add + '&蜂蜜白玉'
                                )
                            ),
                            ImageComponent(
                                url="https://raw.githubusercontent.com/shakuneko/pic0412/main/%E9%85%8D%E6%96%99/%E4%BB%99%E8%8D%89.JPG",
                                size="lg",
                                aspect_mode="cover",
                                action=PostbackTemplateAction(
                                    label='仙草',
                                    text='想要 仙草',
                                    data='D&' + add + '&仙草'
                                )
                            ),
                            ImageComponent(
                                url="https://raw.githubusercontent.com/shakuneko/pic0412/main/%E9%85%8D%E6%96%99/%E5%B8%83%E4%B8%81.JPG",
                                size="lg",
                                aspect_mode="cover",
                                action=PostbackTemplateAction(
                                    label='布丁',
                                    text='想要 布丁',
                                    data='D&' + add + '&布丁'
                                )
                            ),
                            ]   
                        ),
                ]
                ),
            footer=BoxComponent(
                layout='horizontal',
                spacing='xs',
                contents=[
                    ButtonComponent(
                        style='secondary',
                        color="#C4DABB",
                        action=PostbackTemplateAction(
                            label='不用加料',
                            text='想要 不用加料',
                            data='D&' + add + '&不用加料'
                        )
                        )
                    ]
                )
            
            )
        
        message = FlexSendMessage(alt_text="加料嗎",contents=bubble)
        line_bot_api.reply_message(event.reply_token, message)
        
    except:
        line_bot_api.reply_message(event.reply_token,TextSendMessage(text='不add'))

手機上的樣子(❀╹◡╹)

4. 數量。

  • 選擇完加料後會回傳數料選擇（限制使用者購買數量，使用 Quick Reply）
  • view.py 設定當回傳事件是 D 時回傳數量選擇。
  • 將回傳程式寫在 func.py

↓ view,py

#view,py
        elif event.postback.data[0:1] == "D":
            num = event.postback.data[2:]
            func.sendback_num(event, backdata, num)

↓ func.py
設定 data 為 C 以讓程式回傳數量選擇。

#func.py
def sendback_num(event,backdata,num):
    try:
        message = TextSendMessage(
            text='請問要幾份',
            quick_reply=QuickReply(items=[
                QuickReplyButton(action=PostbackTemplateAction(label="1", text="1份",data='E&' + num + '&1')),
                QuickReplyButton(action=PostbackTemplateAction(label="2", text="2份",data='E&' + num + '&2')),
                QuickReplyButton(action=PostbackTemplateAction(label="3", text="3份",data='E&' + num + '&3')),
                QuickReplyButton(action=PostbackTemplateAction(label="4", text="4份",data='E&' + num + '&4')),
                QuickReplyButton(action=PostbackTemplateAction(label="5", text="5份",data='E&' + num + '&5')),
                QuickReplyButton(action=PostbackTemplateAction(label="6", text="6份",data='E&' + num + '&6')),
                QuickReplyButton(action=PostbackTemplateAction(label="7", text="7份",data='E&' + num + '&7')),
                QuickReplyButton(action=PostbackTemplateAction(label="8", text="8份",data='E&' + num + '&8')),
                QuickReplyButton(action=PostbackTemplateAction(label="9", text="9份",data='E&' + num + '&9')),
                
            ]))
        
        line_bot_api.reply_message(event.reply_token,message)
    except:
        line_bot_api.reply_message(event.reply_token,TextSendMessage(text='不買'))

手機上的樣子(❀╹◡╹)

購買確認

將前面所獲取的資料（result 內）傳到程式，再將它用 Flex Message 回傳給使用者。
↓ view,py

#view,py
    nn = event.source.user_id #儲存使用者 ID
        elif event.postback.data[0:1] == "E": #確認當前輸入的訂單
            func.sendback_confirm(event, backdata, result,nn)

↓ func.py
設定 data 為 E 回傳所選擇的飲料訂單讓使用者確定要結帳，或繼續購買抑或是修改訂單。

因為要計算價格因此將資料寫在 func.py 最前面，加料會再加10元，因此menu不一樣。

menu = {"M啪噠紅茶":"30","L啪噠紅茶":"40",
        
        "M四季烏龍":"35","L四季烏龍":"45",
        
        "M啪噠普洱茶":"40","L啪噠普洱茶":"50",
        
        "M啪噠焙茶":"40","L啪噠焙茶":"50",
        
        "M精靈珍珠黑糖鮮奶茶":"65","L精靈珍珠黑糖鮮奶茶":"75",
        
        "M深焙鮮奶茶":"60","L深焙鮮奶茶":"70",
        
        "M四季烏龍鮮奶茶":"55","L四季烏龍鮮奶茶":"65",
        
        "M香芋鮮奶茶":"65","L香芋鮮奶茶":"75",
        
        "M啪噠奶茶":"45","L啪噠奶茶":"55",
        
        "M茉香奶綠":"45","L茉香奶綠":"55",
        
        "M鐵觀音奶茶":"50","L鐵觀音奶茶":"60",
        
        "M香芋奶綠":"55","L香芋奶綠":"65",
        }
menu_e = {"M啪噠紅茶":"40","L啪噠紅茶":"50",
        
        "M四季烏龍":"45","L四季烏龍":"55",
        
        "M啪噠普洱茶":"50","L啪噠普洱茶":"60",
        
        "M啪噠焙茶":"50","L啪噠焙茶":"60",
        
        "M精靈珍珠黑糖鮮奶茶":"75","L精靈珍珠黑糖鮮奶茶":"85",
        
        "M深焙鮮奶茶":"70","L深焙鮮奶茶":"80",
        
        "M四季烏龍鮮奶茶":"65","L四季烏龍鮮奶茶":"75",
        
        "M香芋鮮奶茶":"75","L香芋鮮奶茶":"85",
        
        "M啪噠奶茶":"55","L啪噠奶茶":"65",
        
        "M茉香奶綠":"55","L茉香奶綠":"65",
        
        "M鐵觀音奶茶":"60","L鐵觀音奶茶":"70",
        
        "M香芋奶綠":"65","L香芋奶綠":"75",
        }

def sendback_confirm(event,backdata,result,nn): #點完加料
    try:

        drink = result[0]
        ice = result[1]
        suger = result[2]
        add = result[3]
        amount = result[4]
        uid = nn
        
        if add == "不用加料":
            price = menu[drink]
        else:
            price = menu_e[drink]
             
        #將資料新增ˋ到資料庫
        unit = order.objects.create(drink=drink,ice=ice,suger=suger,add=add,price=price,amount=amount,uid=uid)
        unit.save()
        
        bubble = BubbleContainer(
            direction='ltr',
            header = BoxComponent(
                layout='vertical',
                #background_color='#DBD3D8',
                contents=[
                    
                    TextComponent(
                        text = "已加入： " + amount + " 杯 " + drink,
                        size="md",
                        weight="bold",
                        ),
                    SeparatorComponent(
                        color="#C8BCC3",
                        margin="xxl"
                        ),
                    ]
                ),
            body = BoxComponent(
                layout='vertical',
                contents=[

                    TextComponent(
                        text = "\n冰塊：" + ice
                        ),
                    TextComponent(
                        text = "\n糖度：" + suger 
                        ),
                    TextComponent(
                        text = "\n加料：" + add
                        ),
                    TextComponent(
                        text = " 加料 + 10 元喔!",
                        color="#C8BCC3",
                        size="xs",
                        margin='xs'
                        ),
                    TextComponent(
                        text = "\n一杯單價：" + price
                        ),
                    TextComponent(
                        text = "\n"
                        ),
                    TextComponent(
                        text = "\n請問要結束購買嗎",
                        weight="bold",
                        ),
                    
                ]
                ),
            footer=BoxComponent(
                layout='vertical',
                spacing='xs',
                contents=[
                    BoxComponent(
                        layout='horizontal',
                        spacing='xs',
                        contents=[
                            ButtonComponent(
                                style='secondary',
                                color="#E8F1E4",
                                action=PostbackTemplateAction(
                                    label='修改此筆訂單',
                                    text='修改此筆訂單',
                                    data='H'
                                )
                                ),
                            ButtonComponent(
                                style='secondary',
                                color="#C4DABB",
                                action=PostbackTemplateAction(
                                    label='繼續購物',
                                    text='繼續購物',
                                    data='G'
                                )
                                )
                            
                            ]
                        
                        ),
                    ButtonComponent(
                        style='secondary',
                        color="#F6DCCB",
                        action=PostbackTemplateAction(
                            label='結帳',
                            text='結帳',
                            data='F'
                        )
                        
                        )
                    
                    ]
                )
            
            )
        
        message = FlexSendMessage(alt_text="確認訂單",contents=bubble)
        line_bot_api.reply_message(event.reply_token,message)
    except:
        line_bot_api.reply_message(event.reply_token,TextSendMessage(text='不'))

手機上的樣子(❀╹◡╹)

繼續購物

如果使用者點擊繼續購物就會 postback G ，讓程式回傳飲料種類以繼續購買。

↓ view,py

#view,py
        elif event.postback.data[0:1] == "G": #繼續購物
            func.sendButton_Again(event)

↓ func.py

def sendButton_Again(event):
    try:
        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='不'))

手機上的樣子(❀╹◡╹)
最後將飲料、其他選項選好一樣會出現購買確認。

下篇會繼續完成此機器人，做到結帳及修改資料喔~


上一篇
DAY 23 專案介紹-2 （飲料訂購機器人實作-1）
下一篇
DAY 25 專案介紹-4 （飲料訂購機器人實作-3）
系列文
30天建構出一個簡單 LineBot 機器人 共 30 篇
  1. 26
    DAY 26 專案介紹-5 （飲料訂購機器人實作-4）
  2. 27
    DAY 27 LIFF 進階(資料回傳教學)
  3. 28
    DAY 28 LINE Beacon介紹
  4. 29
    DAY 29 額外功能介紹
  5. 30
    DAY 30 總結
完整目錄
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言
iThome鐵人賽
參賽組數
249 組
團體組數
6 組
累計文章數
785 篇
最後報名日
9/15
iT+看影片追技術 看影片追技術 看更多
熱門tag 看更多
15th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 2018鐵人賽 javascript 2017鐵人賽 python windows php c# windows server linux css react 程式設計 vue.js
熱門問題
熱門回答
熱門文章
IT邦幫忙