iT邦幫忙

2021 iThome 鐵人賽

DAY 19
1
自我挑戰組

Line Bot 以python及Django建構系列 第 19

DAY19 專案進度按鈕功能實現-3

  • 分享至 

  • xImage
  •  
class Root_Team():
    def content(self):
        flex_message = FlexSendMessage(
            alt_text='hello',
            contents={
            "type": "bubble",
            "header": {
                "type": "box",
                "layout": "vertical",
                "contents": [
                {
                    "type": "text",
                    "text": "Root_選擇查看的組別",
                    "size": "lg",
                    "color": "#ffffff"
                }
                ],
                "backgroundColor": "#0066ff"
            },
            "body": {
                "type": "box",
                "layout": "vertical",
                "contents": [
                {
                    "type": "button",
                    "action": {
                    "type": "postback",
                    "label": "WEB",
                    "data": "Root:WEB",
                    "displayText": "組別:WEB"
                    },
                    "margin": "sm",
                    "color": "#0066ff",
                    "style": "primary"
                },
                {
                    "type": "button",
                    "action": {
                    "type": "postback",
                    "label": "IOT",
                    "data": "Root:IOT",
                    "displayText": "組別:IOT"
                    },
                    "color": "#0066ff",
                    "style": "primary",
                    "margin": "sm"
                },
                {
                    "type": "button",
                    "action": {
                    "type": "postback",
                    "label": "IOS",
                    "data": "Root:IOS",
                    "displayText": "組別:IOS"
                    },
                    "color": "#0066ff",
                    "margin": "sm",
                    "style": "primary"
                },
                {
                    "type": "button",
                    "action": {
                    "type": "postback",
                    "label": "Android",
                    "data": "Root:Android",
                    "displayText": "組別:Android"
                    },
                    "color": "#0066ff",
                    "style": "primary",
                    "margin": "sm"
                },
                {
                    "type": "button",
                    "action": {
                    "type": "postback",
                    "label": "碩班",
                    "data": "Root:碩班",
                    "displayText": "組別:碩班"
                    },
                    "color": "#0066ff",
                    "style": "primary",
                    "margin": "sm"
                }
                ]
            }
            }
        )
        return flex_message

當使用者成為管理員之後便可以按下“查看”按鈕去查看當前四個team的一些狀態為何,“IOT”“IOS”“Android”“碩班”


補充LINE Flex 輔助開發工具

因為LINE 的 Flex 模擬器畢竟不是實際手機畫面,測試時頻繁的佈署 Heroku 伺服器都是時間成本,好在已經有LINE API Expert 戴均民大神製作了輔助開發 LINE Flex 訊息的工具,巧妙的貼上 JSON 讓 LINE 在使用者端即時回饋設計結果,相當方便。

小結

LINE 除了介紹的文字、圖片訊息,在互動介面提到的 Flex Message,還有 Rich Menu 、 QuickReply 、 LIFE 等豐富介面供使用者與聊天服務互動,但相信您在閱讀本文時已經有一定思路可以查閱相關資源,這也是自學開發的寶貴歷程,我們下篇見。


今天的歌曲是 周杰倫-給我一首歌的時間 Give me the time of a song
https://www.youtube.com/watch?v=wt0RKW3aC84&list=PLFl6Na2uUoOZBEhBtQ_jeGA4P1V20JvpW&index=18&ab_channel=%E5%91%A8%E6%9D%B0%E5%80%ABJayChou


上一篇
DAY18 專案進度按鈕功能實現-2
下一篇
DAY20 本日尚未簽到、時刻表按鈕實現
系列文
Line Bot 以python及Django建構30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言