今日練習 Github 連結
昨天我們做出了天氣預報的 BOT ，今天我們要以昨天的成果為基底做一點改良

改良方向

前一版我們是透過訊息選擇回傳的城市
但是每次要查詢都必須要重新輸入一次文字是很麻煩的，所以這次想要做到的是 傳送使用者當前的地點，我們直接回傳當地結果

另外，因為我們回傳的文字量有點多，所以這裡改用 Flex 會更好

1. 新增傳送地點資訊回傳當地天氣狀況
2. 將 Carousel 改為 Flex

設計 Flex

一樣的，我們可以透過 LINE Flex Message Simulator 設計
我們會先初步做出版型，文字的部分會在透過程式修正

hero

這裡要放的是圖片，要調整的參數有

• url
• size
• aspectRatio
• aspectMod

body

這個區塊是最重要的部分，我們要在這裡顯示資訊
因為這次可以寫的內容更多了，所以這次我們會將所有狀態輸出，包含

1. 標題
2. 時間區段
3. 天氣狀況
4. 溫度狀況
5. 降雨機率
6. 舒適度

我希望它的結構會是這個樣子

• body
  • Box
    • title
    • Box
      • time
    • Box
      • Box
        • weather
      • Box
        • temperature
      • Box
        • rain
      • Box
        • comfort

title 我希望格式是 {縣市}未來 36 小時天氣
time 我希望格式是 MM-DD HH:MM ~ MM-DD HH:MM

與昨天相同，希望每 12 小時一個區間做成一個區塊
最終想像是這樣

title

• text
  XX市未來 36 小時天氣
• size
  xl
• weight
  bold
• align
  center

time

• text
  MM-DD HH:MM ~ MM-DD HH:MM
  

weather

這邊我設定了 horizontal box ，讓我們這個 Box 的字都會待在同一行
其中包含了 天氣狀況 以及 {天氣狀況}

• text
  天氣狀況
• color
  #0099FF
• weight
  bold

• text
  {天氣狀況}
• weight
  bold
• offsetEnd
  xxl

temperature

這邊一樣設定 horizontal box
其中包含了 溫度狀況 以及 {溫度狀況}

• text
  溫度狀況
• color
  #0099FF
• weight
  bold

• text
  {最低溫}°C ~ {最高溫}°C
• weight
  bold
• offsetEnd
  xxl
  

rain

這邊一樣設定 horizontal box
其中包含了 降雨機率 以及 {降雨機率}

• text
  降雨機率
• color
  #0099FF
• weight
  bold

• text
  {降雨機率}
• weight
  bold
• offsetEnd
  xxl
  

comfort

這邊一樣設定 horizontal box
其中包含了 舒適度 以及 {舒適度}

• text
  舒適度
• color
  #0099FF
• weight
  bold

• text
  {舒適度}
• weight
  bold
• offsetEnd
  xxl
  

footer

在這裡我們要放一個按鈕，導向中央氣象局的網站

• height
  sm
• style
  link
• Action
  • type
    uri
  • label
    詳細內容
  • uri
    https://www.cwb.gov.tw/V8/C/W/County/index.html
    

到這邊，每個版型都長一樣，我們不需要複製三次，只需要複製一個版型之後透過迴圈處理即可
最終的 JSON 檔，包含一個Bubble

處理資料

接下來，我們要將所有的資料放入到 Bubble ，接下來再放進 Flex 即可
在這部分，需要修改的只有 reply 的部分，改以 FlexSendMessage 處理

if(message_type == 'text'):
    message = event.message.text
    if(message[:2] == '天氣'):
        city = message[3:]
        city = city.replace('台','臺')
        if(not (city in cities)):
            line_bot_api.reply_message(reply_token,TextSendMessage(text="查詢格式為: 天氣 縣市"))
        else:
            res = get(city)
            line_bot_api.reply_message(reply_token, FlexSendMessage(city + '未來 36 小時天氣預測',res))
    else:
        line_bot_api.reply_message(reply_token, TextSendMessage(text=message))

再來就是處理 get 的函數了
我們先設定 Flex 的基礎模板 card

{
  "type":"carousel",
  "contents":[
    
  ]
}

我們接下來要把剛剛設計的內容 append 到 contents 的 list 中

def get(city):
    token = 'TOKEN'
    url = 'https://opendata.cwb.gov.tw/api/v1/rest/datastore/F-C0032-001?Authorization=' + token + '&format=JSON&locationName=' + str(city)
    Data = requests.get(url)
    Data = (json.loads(Data.text,encoding='utf-8'))['records']['location'][0]['weatherElement']
    res = json.load(open('card.json','r',encoding='utf-8'))
    print(Data)
    for j in range(3):
        bubble = json.load(open('bubble.json','r',encoding='utf-8'))
        # title
        bubble['body']['contents'][0]['text'] = city + '未來 36 小時天氣'
        # time
        bubble['body']['contents'][1]['contents'][0]['text'] = '{} ~ {}'.format(Data[0]['time'][j]['startTime'][5:-3],Data[0]['time'][j]['endTime'][5:-3])
        # weather
        bubble['body']['contents'][3]['contents'][1]['contents'][1]['text'] = Data[0]['time'][j]['parameter']['parameterName']
        # temp
        bubble['body']['contents'][3]['contents'][2]['contents'][1]['text'] = '{}°C ~ {}°C'.format(Data[2]['time'][j]['parameter']['parameterName'],Data[4]['time'][j]['parameter']['parameterName'])
        # rain
        bubble['body']['contents'][3]['contents'][3]['contents'][1]['text'] = Data[1]['time'][j]['parameter']['parameterName']
        # comfort
        bubble['body']['contents'][3]['contents'][4]['contents'][1]['text'] = Data[3]['time'][j]['parameter']['parameterName']
        res['contents'].append(bubble)
    return res

到這邊，我們就完成資料處理的部分了

處理輸入

輸入的部分，文字輸入與前一篇相同
但是這次要加上接收位置資訊
透過使用者傳送過來的地址，只取得縣市的區段，放到剛剛設計好的 get 就可以囉~

elif(message_type == 'location'):
    city = event.message.address[5:8].replace('台','臺')
    res = get(city)
    line_bot_api.reply_message(reply_token, FlexSendMessage(city + '未來 36 小時天氣預測',res))

最終完整的程式碼

測試

1. 開啟 ngrok

   ngrok.exe http 80
   

2. 將 webhook 連結放入LINE Official Account Manager
3. 執行 main.py

   python main.py