最近因為 IFTTT 政策改變, 免費帳戶的可用功能大幅縮減, 而且許多 maker 愛用的 webhook 功能也更改成付費的 Pro 會員才能使用, 怨聲連連。雖然付費使用本來就天經地義, 不過是不是有更好的選擇呢?本文就以 Make 服務來取代 IFTTT, 實際展示利用 webhook 串接 LINE 傳送訊息。 ## 註冊 Make 帳號 要使用 Make 服務, 第一步當然就是註冊帳號, 請依以下這篇教學文章完成: - [註冊 make.com 帳號](/nQ-uZNAdR3Ohu008syHgAw) ## 建立腳本 在 Make 服務中, 類似 IFTTT Applet 的機制稱為 **腳本 (scenario)**, 腳本內要設定觸發事件的**觸發器 (trigger)** 以及事件發生後要執行的**動作 (action)**, 這兩者統稱為**模組 (modules)**。 ### 建立觸發器 以下就來建立一個可透過網址觸發事件的 webhook: 1. 請按右上方的 **Create a new scenario**: ![image](https://hackmd.io/_uploads/BydnMRGDT.png) 2. 如果出現教學畫面, 請按右上角的 × 關閉: ![image](https://hackmd.io/_uploads/r16TN0Gva.png) 按畫面上大大的 + 鈕: ![image](https://hackmd.io/_uploads/ry4bB0zw6.png) 請在模組清單最下方搜尋欄位輸入 "webhook" 後選取最上方搜尋到的 Webhooks 觸發器: ![image](https://hackmd.io/_uploads/S1suIRMPT.png) 選取上方 **Trigger** 區內的 **Custom Webhook**: ![image](https://hackmd.io/_uploads/rJZp8CzvT.png) 按 **Create a webhook** 建立: ![image](https://hackmd.io/_uploads/B1vIvRfPa.png) 填入自訂的名稱後按 **Save**: ![image](https://hackmd.io/_uploads/BJ8W_CGDa.png) 它會等待我們告訴它之後使用這個 webhook 時, 會傳遞什麼樣的資料給它: ![image](https://hackmd.io/_uploads/Bk_vuCGDp.png) 圖中框起來的地方就是未來要觸發這個 webhook 的網址, 假設我們將來要將這個 webhook 搭配雨量警示系統使用, 觸發時會傳送一項名稱為 level 的資料, 請複製剛剛看到的網址列後, 開啟新的瀏覽頁面在網址列輸入以下的網址: ``` https://hook.eu2.make.com/xl.....9ot4c.....pm.....83qt?level=low ``` 在問號之前就是從你自己建立的 webhook 複製的網址, 問號開始表示要送給 webhook 的資料, 以`項目名稱=資料內容`的格式輸入, 這裡就表示我們要傳送項目名稱為 level、內容為 low 的資料給 webhook。輸入後請按 Enter: ![image](https://hackmd.io/_uploads/BkPg9AfPp.png) 你會看到瀏覽器上顯示 "Accepted", 同時 Webhooks 上會顯示 "Successfuly determined" 字樣, 請按 **OK** 結束: ![image](https://hackmd.io/_uploads/Bymr9RGw6.png) 這表示有成功收到剛剛透過網址列送來的資料, 並且正確解析資料的格式, 稍後在執行動作的模組中才能取得收到的資料。 ### 建立動作 接著就要設計觸發之後要執行的動作: 1. 請按 + 加入新的模組: ![image](https://hackmd.io/_uploads/HyD_oRfDa.png) 2. 請直接在搜尋欄位輸入 "line": ![image](https://hackmd.io/_uploads/r1YaoCfDT.png) 選取最上方搜尋到的 LINE: ![image](https://hackmd.io/_uploads/SyBx3RMPp.png) 本文會以最簡單的 Line notify 展示, 請選 **Send a notification**: ![image](https://hackmd.io/_uploads/SkUQnCfPp.png) 再按 **Create a connection**: ![image](https://hackmd.io/_uploads/rJHYnAfva.png) 輸入自訂的名稱後按 **Save**: ![image](https://hackmd.io/_uploads/HkthnRGv6.png) 會跳出 LINE 登入畫面: ![image](https://hackmd.io/_uploads/By0Ah0zPa.png) 請自行輸入帳號密碼或是用手機 Line App 掃 QR Code 登入後, 在下一個畫面選**透過1對1聊天接收 LINE Notify 的通知**後按**同意並連動**: ![image](https://hackmd.io/_uploads/SkldaRMva.png) 你的 LINE 應該就會新增 LINE Notify 聯絡人, 並且看到已經和 Make 連動的訊息: ![Screenshot_2023-12-22-17-59-26-74](https://hackmd.io/_uploads/SJvRHkmvp.jpg =320x) 3. 連動完成後請按一下 **Message** 欄位, 在展開的資料項目選取交談窗中選透過網址傳來的資料項目 level: ![image](https://hackmd.io/_uploads/Hk0mJyQv6.png) 最後按下 **OK** 完成: ![image](https://hackmd.io/_uploads/rJAP1k7DT.png) 4. 完成後請將設計好的腳本存檔: ![image](https://hackmd.io/_uploads/B1kWxk7Pa.png) 接著啟用這個腳本: ![image](https://hackmd.io/_uploads/SJ-NxkQPp.png) 確認變成 ON 即可。 ### 測試腳本 接著就可以開啟新的瀏覽頁面, 在網址列輸入剛剛傳送資料給 webhook 檢測資料結構的網址。如果忘記網址, 只要點一下上方編輯區中 webhook 的圖示就會看到: ![image](https://hackmd.io/_uploads/HJQTl1Qwp.png) 如下輸入網址 (再次提醒問號前是你自己 webhook 的網址): ``` https://hook.eu2.make.com/xl.....9ot4c.....pm.....83qt?level=low ``` 按 Enter 後會在瀏覽頁面看到 "Accepted" 回覆: ![image](https://hackmd.io/_uploads/H1IgByQP6.png) 同時也應該會看到 LINE 收到通知: ![Screenshot_2023-12-22-18-28-21-80](https://hackmd.io/_uploads/rkMFryQDa.jpg =320x) 訊息中除了標示這是 Make 服務送來的 "【Make】" 以外, 也會代入你送給 webhook 的 "low"。 ### 變化傳送的資料 如果你要傳送給 webhook 的資料有變化, 例如我們想要多增加一項名稱為 "time" 的資料, 就可以這樣做: 1. 點一下 webhook 的圖示: ![image](https://hackmd.io/_uploads/Skg9IJQDT.png) 按一下中間的 **Redetermine data structure**: 就會變成等待你重新傳送資料給它判讀的狀態: ![image](https://hackmd.io/_uploads/SJ5RU17wT.png) 2. 現在透過一樣的方式在新的頁面傳送加入新資料的網址: ``` https://hook.eu2.make.com/xl.....9ot4c.....pm.....83qt?level=low&time=now ``` 我們在結尾處加上了 "&time=now": ![image](https://hackmd.io/_uploads/S1m7FymP6.png) 就會看到 webhook 成功解析資料格式的訊息: ![image](https://hackmd.io/_uploads/rJmqwkQwa.png) 按 OK 儲存變更。 2. 按一下 LINE 的圖示後按 **Message** 欄位: ![image](https://hackmd.io/_uploads/B1xxd17Da.png) 可以看到現在新增了 time 項目, 點選將它加入 Message 欄位: ![image](https://hackmd.io/_uploads/BJpQO1QvT.png) 按 OK 完成。 3. 請記得再按一下下方的儲存鈕將修改過的腳本儲存下來, 再重新以剛剛的網址測試就可以看到訊息已經包含新的資料了: ![Screenshot_2023-12-22-18-44-37-25](https://hackmd.io/_uploads/H1fRu1XDp.jpg =320x) ## 使用 Flag's Block 要使用 Flag's Block 搭配 D1 mini 控制板連接 make.com, 只要使用『**ESP8266 無線網路/執行 HTTP Get 請求**』積木即可, 以下就是一個簡單的範例[(下載)](https://FlagTech.github.io/samples/test_make.xml): ![圖片](https://hackmd.io/_uploads/BywIeamgC.png) 它會每 5 秒鐘傳送一次請求到 make.com 送出 line 訊息。測試時請記得修改成你要使用的無線網路名稱與密碼, 並且填入你的 make.com web hook 的網址。 ## 使用 MicroPython 連接 make.com 如果使用的是 D1 mini, 因為記憶體比較少, 而 make.com 的安全連線憑證較大, 無法直接連線, 請參考稍後的說明, 以橋接的方式間接連接 make.com, 以下先以 ESP32 控制板為例。 ### ESP32 控制板 以下是每 10 秒發送一次請求到 make.com 的 webhook 送出訊息到 line 的程式碼: ```python= import network import time import urequests sta = network.WLAN(network.STA_IF) sta.active(True) sta.connect('你的無線網路名稱', '你的無線網路密碼') while not sta.isconnected(): pass print('Wi-Fi 已連上') make_url = '你的 make.com web hook 網址' while True: response = urequests.get(make_url + '?level=high&time=now') response.close() time.sleep(5) ``` 請記得修改第 7 行為你使用的無線網路名稱與密碼、第 11 行改成你自己的 make.com 上 webhook 的網址。執行後, 你應該就會看到 line 每隔約 5 秒就會收到一次訊息。 ### D1 mini(ESP8266) 控制板 ESP8266 因為記憶體比較小, 所以如果直接用上面的程式, 會出現以下這樣的錯誤訊息: ``` MPY: soft reboot Traceback (most recent call last): File "<stdin>", line 14, in <module> File "urequests.py", line 116, in get File "urequests.py", line 62, in request OSError: -40 ``` 為了解決這個問題, 我們準備了一個在雲端開發環境執行的 Python 專案, 負責幫我們連接 make.com 的服務, 請依照以下說明建置好雲端專案, 即可讓 D1 mini 控制板間接連接 make.com 服務。 #### 建置 replit 線上開發環境 我們使用的線上開發環境是 replit, 請開啟瀏覽器, 連接 [https://replit.com/](https://replit.com/): ![圖片](https://hackmd.io/_uploads/rJ0XYomxA.png) 請直接點選 **Log in** 建議直接使用各平台帳號登入: ![圖片](https://hackmd.io/_uploads/HkW_FiXl0.png) 確認登入之後, 再重新連接專案網址 [https://replit.com/@flag-maker/bridgeget](https://replit.com/@flag-maker/bridgeget): ![圖片](https://hackmd.io/_uploads/BySASiXgA.png) 按一下畫面上的 **Fork & Run** 鈕將專案複製到你自己的帳號下。 ![圖片](https://hackmd.io/_uploads/ryiWqs7gA.png) 按 **Fork Repl** 即可 (replit 稱專案為 repl): ![圖片](https://hackmd.io/_uploads/Syx_qsXe0.png) 將專案複製到你的帳號下後會直接執行, 這個專案是一個網頁伺服器, replit 同時會在右上角自動開啟內嵌的小瀏覽器顯示連線後的網頁內容, 請按小瀏覽器右側按鈕在實際的瀏覽器開啟頁面 ![圖片](https://hackmd.io/_uploads/BJLQioQeA.png) 複製網址列的網址, 這個網址就是連接到你專案所建立伺服器的網址, 稍後 D1 mini 的 MicroPython 程式就會透過這個網址請求幫我們轉連接到 make.com 使用 web hook 的服務。 #### D1 mini(ESP8266 程式) 剛剛建立的伺服器在接受連線時, 可以在網址列加上參數 url 指定要轉向的網址, 例如以下是我測試時取得的 replit 專案執行網址: ``` https://d5460b72-xxxx-40f6-9105-9e745637bd95-00-2bjtrfv1dvvz4.spock.replit.dev/ ``` :::warning 請務必確認複製的網址結尾處有 '/', 如果沒有, 請自行加上。 ::: 以下則是我的 make.com 中 web hook 的網址: ``` https://hook.eu2.make.com/irllspixxxxpu7t425v1jjfl1bvl19id ``` 只要連線到以下組合的網址: ``` https://d5460b72-xxxx-40f6-9105-9e745637bd95-00-2bjtrfv1dvvz4.spock.replit.dev/?url=https://hook.eu2.make.com/irllspixxxxpu7t425v1jjfl1bvl19id&level=high&time=now ``` 開頭是 replit 專案伺服器的網址, 從 '?' 之後額外加入的參數, 每一個參數都是 "參數名稱=內容" 的格式, 參數之間再以 '&' 連接, 上面的組合網址總共有以下三個參數: ``` url=https://hook.eu2.make.com/irllspixxxxpu7t425v1jjfl1bvl19id level=high& time=now ``` 利用上述的組合網址, replit 那邊的專案網站就會幫你轉而連接以下的網址: ``` https://hook.eu2.make.com/irllspixxxxpu7t425v1jjfl1bvl19id?level=high&time=now ``` 也就是直接連到 make.com 的 web hook 網址, 並且把除了 url 以外的參數原封不動送過去。 以下就是利用上述方式改寫的程式: ```python= import network import time import urequests sta = network.WLAN(network.STA_IF) sta.active(True) sta.connect('你的無線網路名稱', '你的無線網路密碼') while not sta.isconnected(): pass print('Wi-Fi 已連上') make_url = '你的 make.com web hook 網址' replit_url = '你的 replit 專案網站網址' while True: response = urequests.get(replit_url + '?url=' + make_url +'&level=high&time=now') response.close() time.sleep(5) ``` 請記得修改第 7 行為你使用的無線網路名稱與密碼、第 12 行改成你自己的 make.com 上 web hook 的網址、第 13 行改成你自己 replit 專案執行後所建立網站的網址。執行後, 應該就會每隔五秒收到一次 line 訊息了。 #### 付費部署專案 免費帳戶的 replit 的專案必須在瀏覽器開啟該專案頁面的情況下才會自動執行接受外部連線, 所以如果關閉網頁, 之後要在測試, 就必須先開啟 replit 專案的網頁。如果你希望可以在任何時候都可以自動執行, 就必須**付費**將專案部署到雲端, 方式如下: ![圖片](https://hackmd.io/_uploads/HkMYWhmeC.png) 按一下右上方的 **Deploy** 鈕: ![圖片](https://hackmd.io/_uploads/r14a72mxA.png) 就會顯示 **Deploy** 窗格, 提供不同付費方案供你選擇, 一般來說, 選用 **Autoscale** 是最適合的, 它會以用多少扣多少的方式收取費用, 並且會在必要的時候幫你自動提升使用的資源, 如果你只是偶而測試, 不會有大量連線的話, 費用會低到你沒感覺。詳細的付費方案請參考選取不同方案時底下的說明。 如果你只是要部署這個專案, 就只要選取方案後按底下的 **or add a payment method** 加入信用卡付費方式資訊即可。如果按 **Upgrade your plan to deploy** 會變成月付費用會員, 這會提供給你 replit 上更多的功能: ![圖片](https://hackmd.io/_uploads/Sk2dH37gA.png) 我測試的時候, 填入信用卡資訊後它會預刷一筆 0 元的費用驗證信用卡, 接著會要求你進行電話驗證: ![圖片](https://hackmd.io/_uploads/S15FBn7xC.png) 請選台灣地區後, 填入你的行動電話號碼, 按 **Send code**: ![圖片](https://hackmd.io/_uploads/rycOUnQeR.png) 填入你收到的認證碼按 **Confirm code**: ![圖片](https://hackmd.io/_uploads/HJy9L27eR.png) 就可以按下 **Setup your deployment** 進入設定頁面: ![圖片](https://hackmd.io/_uploads/B1MhU2Xg0.png) 這裡可以設定你需要的運算能力以及上面, 避免自動調整到需要鉅額費用。確認設定完成, 就可以按下 **Approve and configure build settings** 設定建置參數: ![圖片](https://hackmd.io/_uploads/rkiPP37gA.png) 這裡最重要的就是主網域名稱, 你可以取一個簡短的名稱來取來剛剛未部署前那樣的一長串名稱, 都設定好就可以按下 **Deploy** 部署了: ![圖片](https://hackmd.io/_uploads/Syucu3QeR.png) 部署完成後, 就可以改用剛剛設定的網址連線了。 如果日後想要停止部署, 可以在 **Deploy** 窗格中按下 **Manage**: ![圖片](https://hackmd.io/_uploads/ryTYF3Xg0.png) 切換到 **Settings** 頁次, 就可以按下 **Shutdown** 把部署的虛擬機器停止, 不會再收費了。 如果你還不放心, 想要刪除剛剛填入的信用卡資訊, 可以如下操作: ![圖片](https://hackmd.io/_uploads/Syh6i27lA.png) 就會進入你的訂閱方案頁面, 在你的信用卡資訊右側按下 ╳ 即可刪除。