#教學 打造你的智慧家庭吧! 把LINE提醒變得更有型

4月17日 18:06
在好久好久以前我曾經寫過一篇教學文,據說救了蠻多想要將 HA 串接 LINE Notify 的人
但是啊~ LINE Notify 的通知怎麼看怎麼單調
由於我們用的是 LINE Notify 的 API,從 HA 發送的訊息頂多是文字、圖片、LINE 貼圖
而我們平常使用 LINE 傳的訊息都是走 LINE 的 Messaging API,這能夠讓你傳文字、圖片、LINE 貼圖、LINE emoji、m4a 音檔、位置等等的訊息,這些統稱 Message types 在這篇文章中有詳細的說明
在 2018 年,LINE 推出了 Flex 訊息,主打 "免寫程式的高客製化訊息樣板",樣式全用 CSS 來寫 因為主打免寫程式,所以官方提供了線上 Flex 訊息模擬器,而且在線上編輯完就可以直接匯出 json
Messaging API 套用在 HA 上能幹嘛呢? 優點是什麼? 1. 你可以傳影片了,比如說監視器的影片
2. 透過 Flex 訊息讓 HA 的 LINE 通知更美觀
3. 透過 Flex 訊息讓你可以跟 HA 互動
那 HA 使用 Messaging API 來傳通知的缺點是什麼? 1. 前置作業比單純用 LINE Notify 要多一個取得 ID 的步驟,這個 ID 並不是你的 LINE ID,這就是麻煩的點
2. 在 HA 中你必須用 json 格式來寫訊息,比如說... 使用 osk2 大大寫的第三方元件 "line-bot"
或是不透過第三方元件,直接使用 HA 的 RESTful Command
不管是哪種方法你都會看到 json 3. 如果你傳的是精美的 Flex 訊息,你在搜尋訊息時會搜不到,因為 Flex 訊息不是文字 可以看看下圖,同樣都是使用 Messaging API 的訊息,但 Flex 訊息是無法以關鍵字做搜尋的 所以我是建議後續有需要做追查的訊息就不要用 Flex 了
看完優點跟缺點,若是想使用 Messaging API 的話,那就繼續往下看教學吧 在前面我有提到兩種方法 1. 使用 osk2 大大寫的第三方元件 "line-bot" 2. 使用 HA 的 RESTful Command 依照所需來選擇你要用哪種方式,兩者可以並存 不管是哪種方式,前置作業都是相同的... 1. 建立官方帳號: 這在我上一篇有教學,就是 "登錄服務" 的流程
2. 取得 token: 登入 LINE Developers 後台
點你的官方帳號
切換到 Messaging API 頁籤
往下拉到底就會看到你的長效 token
這時 LINE Developers 後台網頁不要急著關掉,下一個步驟還會用到 3. 取得 userId 或 groupId: 在做這個步驟前,先請你要推送通知的聯絡人加你建立好的官方帳號為好友,如果你要傳到群組,那個這官方帳號需要被邀請至該群組 好友加完、群組邀請完後就可以繼續做下去... 我們要抓取 webhook 訊息來拿到 userId 或 groupId 打開
網頁 這時你會看到網頁上顯示 Your unique URL,這是你個人的 webhook 網址
回到 LINE Developers,同樣在 Messaging API 頁籤,往上拉一點會看到 Webhook settings 如果之前有照我 Dialogflow 教學串接的人,這邊會有 dialogflow 的 webhook 網址
先把這網址給複製起來貼到記事本中,因為等等我們要把它改回 dialogflow 的 webhook 網址
再回到 webhook site 網頁,將你個人的 webhook 網址貼到 LINE Developers 的 Webhook URL 欄位中
接下來,用 "你的 LINE 帳號" 隨便傳幾個字給你的官方帳號,比如說我傳個 123 這時你會看到 webhook site 的網頁側邊攔會多出一個 POST 的訊息 往下拉到 Raw Content 的位置就可以看到剛剛傳的123訊息 userId 就是你這個帳號的 userId
如果你要用官方帳號傳訊息給其他人,比如說家人,你必須用同樣的方法取得他們的 userId 那群組的 groupId 怎麼取得? 很簡單,隨便在那個群組裡傳幾個字 你就可以從 webhook 訊息中拿到 groupId 了
以上就是取得 userId 或 groupId 的方式,其實還有更簡單的方式,直接用 API 去取 但這功能只開放給已認證及付費的官方帳號
我們自己做官方帳號只是為了讓 HA 來發提醒,所以應該不會有人會想提交給 LINE 做認證,也應該不會有人想要花錢升級帳號吧? 那就勤勞點自己抓 webhook 囉 如果有要繼續使用 Dialogflow 來控制 HA 的設備的話,要記得將 LINE Developers 的 Webhook URL 改回 dialogflow 的 webhook 網址 好啦,前置作業都準備好了,準備來折騰 HA 吧~ 在開始前有個小小小小建議步驟,可做可不做 還記得我之前有篇介紹 !include 跟 !secret 用法的文章嗎
我建議 LINE 的 token、userId、groupId 都直接先放進 secrets.yaml 裡存放,後續在使用會方便些
我先來介紹使用 osk2 大大的第三方元件 "line-bot" 先在 HACS 添加第三方源:
就可以安裝 LINE Bot 這個第三方元件了
安裝後必須在 notify: 底下新增 line_bot 平台 - platform: line_bot name: (名稱) client_id: (填入userId) access_token: (填入token)
有幾個聯絡人就要新增幾個,但通常應該只會新增群組的就好,除非你想要做到個別通知 如果用 !secret 的話優勢就出來了
新增完通知的平台後重新啟動 HA,我們就可以來寫訊息了 在前面提到我們將用 Messaging API 來取代 LINE Notify API,那 Messaging API 該怎麼寫? 官方有範例教學,我們就以官方教學來介紹會用到幾種推送訊息方式 1. push 訊息: 傳送訊息給指定的單一使用者
要注意 osk2 大大的第三方元件用的是這個 2. multicast 訊息: 一次傳送訊息給指定的多個使用者
3. broadcast 訊息: 不指定使用者的群推,只要有加你的官方帳號為好友的人都收的到
這邊我準備了 Postman 的 json 匯入檔可以讓大家玩玩 首先先下載 LINE BOT.postman_collection 這個 json 檔
打開 Postman 後點選左上角的 Import
選擇下載回來的 json 檔做上傳並匯入
匯入後先按下 ...→ Edit,切換到 Variables 的頁籤,將你的 token 跟 userId 先填在這裡做變數使用,填完後按下 Update
展開 LINE Bot 的資料夾就可以看到我準備好的幾個 API 點擊其中一個,例如 Send push message,再按下藍色的 Send,你的 LINE 就會立即收到通知了
可以用前三支 API 來玩玩 push、multicast、broadcast 訊息 接下來把頁籤切換到 Body 的位置,你會看到推送到你手機的訊息的 json
而從 "messages" 開始的段落就是我們要填入 HA 的內容了 我們先在 HA 中建一個 LINE Bot 訊息的腳本 osk2 大大的第三方元件要使用時是要呼叫 notify.xxxxx 的服務 依據你設定的名稱,要呼叫的服務就不同 像我設定了兩個通知對象
那我要呼叫的服務就會是...
那腳本的內容就會是這樣... message: 先保持下圖這樣,前後兩個 { } 不能少!!!
我們把剛剛 Postman 的 Body 紅框的地方整段複製起來
再整段貼到 { } 當中,調整一下縮排...
存檔後重整腳本,你就可以測試這個腳本了
以上就是用 osk2 大大的第三方元件的方式 接下來介紹不使用第三方元件的方式 - RESTful Command RESTful Command 是 HA 官方的元件,你需要在 rest_command 底下新增... line_bot_message: url: '
' method: POST content_type: 'application/json' headers: Authorization: (填入token) payload: ''
這邊要注意的是,如果你要用 !secret 的方式將 token 引用進來,那你得在 secrets.yaml 再新增一個給 RESTful Command 用的 token 因為 RESTful Command 用的 token 前面要加 Bearer,插件的則不用
這次我們要從 Postman 貼過來的內容多了一些 直接從頭複製到尾
貼到 payload: 的兩個單引號中間 將 {{user_id_1}} 改成你的 userId,這邊我們先用一般的玩法,我後面會教用變數的代換法,能做到同個 rest_command 模板用來傳給不同的人、不同的訊息內容
存檔後重啟 HA,這時你的 rest_command LINE 訊息模板就完成了 要怎麼使用這個 rest_command 呢? 直接呼叫這個服務就好XD
但其實 rest_command 這樣寫很不方便,一個 rest_command 只能送給一個人以及相同訊息 那我們來玩點進階的,用變數來玩 把 to、 text 都用 {{ 變數名 }} 給取代後存檔並重啟 HA
腳本增加 data 值,也就是你的變數名,存檔後重整腳本
你會發現這樣送出的訊息跟剛剛不用變數時是一樣的,但多了很大的彈性 你可以在寫自動化或腳本時直接填入你要傳給誰,訊息內容也是可以彈性的寫,而且都是共用同一個 rest_command 還記得前面說過 Messaging API 有 push、multicast、broadcast 嗎? 而 osk2 大大的第三方元件僅支援 push RESTful Command 不受限於 push,你可以自由的修改 rest_command 的 url,來做不同型態的訊息推送
以上就是用 RESTful Command 的作法 上面都是純文字的基礎 Messaging API 用法 我最前面提到他傳文字、圖片、LINE 貼圖、LINE emoji、m4a 音檔、位置等等的訊息 那如果我要傳影片呢 來~ 我也幫大家準備好 Postman 了 用 osk2 大大元件的複製紅框,用 RESTful Command 的複製藍框 複製後要貼到哪裡? 有認真看上面教學的應該會知道XD
最後來介紹今天的重點 - Flex 訊息 Flex 訊息在這篇中也有詳細的介紹
你必須在 Flex Message Simulator 上製作你的 Flex 訊息
教學在上面那篇也有 如果你不知道怎麼開始,你也可以點下 Showcase 去選取樣板來編輯
怎麼製作 Flex 訊息我就不贅述了,我只教怎麼把做好的 Flex 訊息拿到 HA 來用 我們先拿官方的 Flex 範例來做示範
我們將選取的地方複製起來
如果是用 osk2 大大的插件,腳本原本會是長這樣
我們把 [ ] 中間的東西先刪除,貼上官方的 Flex 訊息範例 json,再縮排一下 存檔後重整腳本
接著執行腳本 恭喜你,你已經用插件完成了 Flex 訊息
如果是用 RESTful Command,rest_command 原本會是長這樣
我們把 [ ] 中間的東西先刪除,貼上官方的 Flex 訊息範例 json,再縮排一下 存檔後重開 HA
去執行呼叫此 rest_command 的腳本 恭喜你,你已經用插件完成了 Flex 訊息
接下來我們來套用我們自己做好的 Flex 訊息 當你做好你的 Flex 訊息後,點下右上方的 View as JSON
會將你 Flex 訊息轉成 JSON 格式,點選最下方的 Copy 按鈕將整段複製起來
如果是用 osk2 大大的插件,使用官方的 Flex 訊息的腳本原本會是長這樣
我們把 contents: 後面 { } 東西先刪除,貼上你的 Flex 訊息 json,再縮排一下
接著執行腳本 恭喜你,你已經用插件完成了 Flex 訊息
如果是用 RESTful Command,使用官方的 Flex 訊息的 rest_command 原本會是長這樣
我們把 contents: 後面 { } 東西先刪除,貼上你的 Flex 訊息 json,再縮排一下 存檔後重開 HA
去執行呼叫此 rest_command 的腳本 恭喜你,你已經用 RESTful Command 完成了 Flex 訊息
以上就是在 HA 中使用 Flex 訊息的方法 RESTful Command 的方式花樣比較多,你可以將任何東西給變數化,文字大小、文字顏色、圖片連結、圖片比例、背景顏色等等都可以
然後在自動化或腳本當中做變數的指定
變數也可以玩 template
這次的教學就到這裡囉
39
回應 15
文章資訊
共 15 則留言
元培醫事科技大學
頭香
webhook.site 看起來好方便 不然每次研究 LINE Api 都一直改程式與 ngrok 網址
感謝版主介紹,實在是太懶得寫文件了我 😂
國立嘉義大學 園藝學系
未看先推,有空再來好好研究
國立臺中科技大學
請問有辦法關掉每次傳訊息的時候都會傳出 line bot 名稱嗎
國立金門大學
B6 你用的是 LINE Notify 吧
國立臺中科技大學
B7 對因為我用群組..
國立金門大學
B8 群組也能用 LINE Bot LINE Bot 跟 LINE Notify 是不一樣的服務 LINE Notify 的發言帳號都是 LINE Notify 因此必須在訊息中告知服務名稱 LINE Bot 就不一樣了 LINE Bot 的發言帳號是 LINE 官方帳號 接收者可以清楚的辨識出是哪個服務在發言
國立臺中科技大學
但我記得line bot 有上限🤔
僑光科技大學
國立嘉義大學
推!
國立金門大學
經版主提醒才發現 我忘了這篇的內容 只記得按讚 我感到非常抱歉🙇 我重新複習了一遍 希望能對得起版主的用心 看的這個留言忘了文章內容的人 趕快再看一遍才不會辜負版主的用心
國立屏東大學
我研究智慧家電的東西好幾個月現在才知道原來可以跟line連結 太酷了 能講您的經驗回饋在我們研究的智慧家庭問卷嗎 致上萬分感謝🙏🏽 🔗問卷連結