App Inventor學習記錄159-用 ifttt的 webhook功能,發送 line的訊息到群組

這個設定實際上在挺快的,但是分步驟說明的話,還挺長的……

好的,記錄一下。
App Inventor學習記錄159-用 ifttt的 webhook功能,發送 line的訊息到群組


這次範例的完成品如下。

很明顯的,就是在按下按鈕之後,
經由 ifttt的 webhook功能,加上 line notify,把訊息送到群組上
聽名子好像很厲害的樣子,但還真的挺容易,又挺好玩的。


第 1步,登入 ifttt網站。

我們要利用 ifttt的功能來做,所以我們進入 ifttt網站
已經註冊過帳號,就請直接登入。
沒有帳號的,請註冊一個帳號使用,註冊的過程就不額外說明了。

登入帳號之後,如果還沒有建立過任何的 applets小程式的話,畫面應該跟我是一樣的。
我們點擊右上角的 create按鈕。來建立一個新的小程式。


第 2步,點擊 add按鈕。

說明一點 ifttt的使用概念。
先設定一個條件,然後當這個條件發生的時候,就讓小程式自動去執行我們設定好的下一個步驟。

我們if this這裡,按下 add,就是要建立這個觸發的條件。


第 3步,搜尋 webhook後,點擊 webhooks圖示

ifttt提供的條件真的有夠多,所以我們用搜尋框,直接搜尋這次我們要使用的功能 webhooks會比較快。


第 4步,選擇 receive a web

webhooks的條件有 2種,receive a web request是利用網址組合的方式送出資料。它的方法就像是我們之前介紹過的這兩篇的用法。
App Inventor學習記錄122-用google表單,把資料傳到 google sheet上
App Inventor學習記錄157-怎麼把資料上傳到 thingspeak


第 5步,建立觸發的字串後,按下 create trigger按鈕。

這裡我建立的觸發字串是 call_me,這個字串會包含在我們等一下要送出的網址中。
隨意設,記得住就可以。

按下 create trigger按鈕之後,就完成條件的設定了。


第 6步,按下 then that這裡的 add按鈕,設定要自動執行的程式。

上面的 if是設定觸發的條件。
下面的 then that,是設定要自動做的事情


第 7步,搜尋 line,並點擊 line的圖示

一樣哦,可以做的事情一樣是很多,建議大家很搜尋的方式來找,這樣會比較快些。


第 8步,選擇 send message

line自動執行程式,目前只有一個就是 send message,肯定不會選錯,我們就直接按下去。


第 9步,點擊 connect按鈕。連結 line的帳號

第一次用這個服務的時候,會讓我們連結我們自己的 line帳號。
如果之前已經做過的話,這個步驟就會跳過。


第 10步,填入我們 line的帳號和密碼。


第 11步,填確認代碼。


第 12步,點擊同意並連結按鈕。

這裡我們可以稍微的注意一下左上角的紅框處。
這次要用的服務是 line notify


第 13步,設定要收到訊息的群組。

我們可以在 recipient這裡,選擇那個群組要收到訊息
也可以選擇直接從 line notify直接對我們發送訊息。

我選擇我們自己常用的 0-自用這個群組。
點擊 create action按鈕,就完成設定了。


第 14步,按下 finish按鈕。

按下 finish按鈕之後,就完成我們用 ifttt的 webhook功能,發送 line的訊息到群組的設定。


第 15步,確認一下我們的程式狀態是不是 connected。

要 connected的時候,我們設定的程式才會動作。


第 16步,回到首頁,點擊 my applets,點擊我們剛剛設定好的程式。

特別把這個步驟列出來,是因為我一開始在用的時候,真的找不到……


第 17步,點擊 webhooks在上方的圖示

我們進入到我們設定的程式之後:
點擊 webhooks在上方的圖示。
點擊 webhooks在上方的圖示。
點擊 webhooks在上方的圖示。

這個超超超重要的,特別列出三次的理由,當然也是我一開始找不到設定的地方。


第 18步,點擊 documentation

從這裡我們才可以取得我們要的網址和設定的說明。


第 19步,終於看見我們要取得網址和 api key了。

這裡我們分幾個地方說明一下。我用紅框把它們框出來。
紅框 1,很明顯,這個就是我們的 api key了。
紅框 2,我們在這裡填入我們設定的觸發字串,這次填的就是 call_me。
紅框 3,要輸入的資料 1。
紅框 4,要輸入的資料 2。
紅框 5,要輸入的資料 3。

這裡很好的地方是,ifttt提供了測試的功能,可以讓我們測試前面的設定有沒有出錯。
所以我們把紅框 1~5的地方確認一下,按下 test it按鈕。


第 20步,測試。

如果前面的設定都正確的話,我們就會看到 line notify已經在群組上發通知給我們了。


第 21步,問題排除。

如果按下 test it按鈕,在我們設定的群組中,沒有收到訊息,那是正常的。
因為我們還沒有把 line notify這個服務拉到我的群組中。
所以它發的訊息,我們當然看不到。
我們來把它加入我們的群組中。


第 22步,搜尋 line notify,並加入群組。

這部份相信大家都很熟了。很快的帶過。

萬一,我們真的搜尋不到 line notify怎麼辦。
這應該是之前有封鎖了 line notify,把它加入黑名單了。
請記得把 line notify移出黑名單中。


第 23步,確認 line notify已經在群組中了。

請再測試一下,按下 test it按鈕之後,會不會收到通知哦。
要能收到通知,我們再進行下一步。


第 24步,終於進入 app inventor畫面編排的部份了。

排版和文字輸入盒的部份就不說了,相信大家一眼就懂。
重點還是放在 web元件這裡。
請一定要拉一個 web元件進來。


第 25步,程式碼說明。

全部的程式碼就是這樣。
要注意的地方就是 api key要填上去。

設定好網址之後,call web 1.get呼叫網路元件執行就可以了。


這一次絕大部份都是在說明怎麼使用 ifttt的設定。
在使用上,我們可以結合其它的感測器元件,設定比如說溫度幾度以下,或是空氣品質怎麼了,就發一個 line通知進來。可以組合的功能還挺多的。我再慢慢的測試過去。

好的,這次的 aia檔的下載連結如下:
NO_159_iffft_line.aia

之前介紹過的一些 appinventor的使用記錄,都整理在下面這個頁面上了。
APP INVENTOR學習記錄及資源整理頁面

發表迴響