ok，前幾天我們連接好資料庫之後，
我們就該來慢慢修改我們的畫面以及新建功能啦
第一個畫面是功能列表，
我們設計的用途就是讓它當作面板呼叫其他功能，
首先由於那個json格式又長又佔空間，
我們先建立一個message.py來做引用，
所以說目前我們的目錄應該長這樣
line_bot (project dir)
├ line_bot (project settings)
├ echobot (app)
├ requirements.txt
├ runtime.txt
├ Procfile
├ message.py (儲存json)
└ manage.py
以後我們就在裡面新增上所以需要用到的模板在呼叫就好囉！
首先第一個我們前天所刻好的功能列表放進乃，
import requests
from abc import ABC, abstractmethod
from linebot.models import TemplateSendMessage , ButtonsTemplate, PostbackAction , MessageAction , URIAction , CarouselColumn , CarouselTemplate , PostbackTemplateAction , FlexSendMessage
from pymongo import MongoClient
from bs4 import BeautifulSoup
client = MongoClient("mongodb://nutc.iot:nutciot5891@ds237922.mlab.com:37922/smart-data-center")
db = client["smart-data-center"]
# 訊息抽象類別
class Message(ABC):
def __init__(self):
pass
@abstractmethod
def content(self):
pass
# 「功能列表」按鈕樣板訊息
class Featuresmodel():
def content(self):
flex_message = FlexSendMessage(
alt_text='hello',
contents={
"type": "bubble",
"size": "mega",
"header": {
"type": "box",
"layout": "vertical",
"contents": [
{
"type": "box",
"layout": "vertical",
"contents": [
{
"type": "text",
"text": "功能列表",
"color": "#ffffff",
"size": "xl",
"flex": 4,
"weight": "regular",
"margin": "xs"
}
]
}
],
"paddingAll": "20px",
"backgroundColor": "#0367D3",
"spacing": "md",
"height": "80px",
"paddingTop": "22px"
},
"body": {
"type": "box",
"layout": "vertical",
"contents": [
{
"type": "box",
"layout": "vertical",
"contents": [
{
"type": "button",
"action": {
"type": "postback",
"label": "電流",
"data": "電流",
"displayText": "電流"
},
"color": "#ffffff"
}
],
"backgroundColor": "#0367D3"
},
{
"type": "box",
"layout": "vertical",
"contents": [
{
"type": "button",
"action": {
"type": "postback",
"label": "濕度",
"data": "濕度",
"displayText": "濕度"
},
"color": "#ffffff"
}
],
"backgroundColor": "#0367D3"
},
{
"type": "box",
"layout": "vertical",
"contents": [
{
"type": "button",
"action": {
"type": "postback",
"label": "溫度",
"data": "溫度",
"displayText": "溫度"
},
"color": "#ffffff"
}
],
"backgroundColor": "#0367D3"
},
{
"type": "box",
"layout": "vertical",
"contents": [
{
"type": "button",
"action": {
"type": "message",
"label": "控制",
"text": "控制"
},
"color": "#ffffff"
}
],
"backgroundColor": "#0367D3"
},
{
"type": "box",
"layout": "vertical",
"contents": [
{
"type": "button",
"action": {
"type": "message",
"type": "postback",
"label": "電錶度數",
"data": "電錶度數",
"displayText": "電錶度數"
},
"color": "#ffffff"
}
],
"backgroundColor": "#0367D3"
},
{
"type": "box",
"layout": "vertical",
"contents": [
{
"type": "button",
"action": {
"type": "message",
"label": "設定機房資訊",
"text": "設定機房資訊"
},
"color": "#ffffff"
}
],
"backgroundColor": "#0367D3"
},
{
"type": "box",
"layout": "vertical",
"contents": [
{
"type": "button",
"action": {
"type": "message",
"label": "查看設定結果",
"text": "查看設定結果"
},
"color": "#ffffff"
}
],
"backgroundColor": "#0367D3"
},
{
"type": "box",
"layout": "vertical",
"contents": [
{
"type": "button",
"action": {
"type": "message",
"label": "機房資訊",
"text": "機房資訊"
},
"color": "#ffffff"
}
],
"backgroundColor": "#0367D3"
},
{
"type": "box",
"layout": "vertical",
"contents": [
{
"type": "button",
"action": {
"type": "message",
"label": "每日通報資訊",
"text": "每日通報資訊"
},
"color": "#ffffff"
}
],
"backgroundColor": "#0367D3"
},
{
"type": "box",
"layout": "vertical",
"contents": [
{
"type": "button",
"action": {
"type": "message",
"label": "機房服務列表",
"text": "機房服務列表"
},
"color": "#ffffff"
}
],
"backgroundColor": "#0367D3"
}
],
"spacing": "xs"
}
}
)
return flex_message
ok，這樣就可以了，
下一篇會告訴你如何用linebot顯示出來這些內容！
gogo！
今天是 珂拉琪 Collage 的 這該死的拘執與愛 網址如下~~~
iThome鐵人賽
看影片追技術