Webduino使用LINE自訂積木(二)：LINE Notify
在Webduino Blockly程式積木中使用自訂積木，
匯入：https://buberhu.github.io/webduino_LINE_V3/blockly.json
(此積木非官方提供，僅供測試，請勿用於正式專案)
在【進階功能 > LINE】找到【LINE Notify】積木
接下來說明如何取得LINE Notify權杖(token)
開啟LINE Notify網站：https://notify-bot.line.me/zh_TW/，
登入自己的LINE帳號
按下【發行】按鈕
傳送圖片的尺寸與格式，請參閱官網文件：https://notify-bot.line.me/doc/en/
匯入：https://buberhu.github.io/webduino_LINE_V3/blockly.json
(此積木非官方提供，僅供測試，請勿用於正式專案)
在【進階功能 > LINE】找到【LINE Notify】積木
接下來說明如何取得LINE Notify權杖(token)
開啟LINE Notify網站：https://notify-bot.line.me/zh_TW/，
登入自己的LINE帳號
從網頁右上角帳戶的下拉選單中挑選【個人頁面】
首先看到【已連動的服務】，
如果有做過上一篇介紹的 IFTTT服務，會在這裡看到如下圖的項目
往下捲動頁面，看到發行存取權杖(開發人員用)，
點擊【發行權杖】
輸入自訂的【權杖名稱】，權杖名稱會顯示在傳送的訊息前面
選擇傳送訊息的對象，例如：【透過1對1聊天接收LINE Notify的通知】，按下【發行】按鈕
紀錄或複製【已發行的權杖】，關閉頁面後，不會再看到權杖的資料
如果遺失權杖，可以再發行另一個新權杖，但與原來這個無關
現在，回到Webduino Blockly程式積木，設定【權杖】
加入LINE Notify的訊息積木
還可以加入【傳送表情符號】或【傳送圖片】
傳送表情符號需串接數字
表情符號的【STKPKGID】與【STKID】，請參閱官網：https://developers.line.biz/zh-hant/docs/messaging-api/sticker-list/
傳送圖片需串接網址字串
執行看看，應該可以收到LINE訊息了
現在，我們想了解LINE Notify自訂積木背後運作的原理
LINE Notify不使用上一篇介紹的IFTTT服務幫我們傳訊息，而是透過自己撰寫的Google Apps Script程序傳送
如果您熟悉網頁程式語言，我們可以自己建立Google Apps Script程序，再以網頁執行Google Apps Script傳送訊息
使用Google帳號登入Google Apps Script網站 https://script.google.com/
點選左上角的新增指令碼
看到【程式碼.gs】的區域
以下面的程式碼取代
function doPost(e) {
var param = e.parameter;
UrlFetchApp.fetch('https://notify-api.line.me/api/notify', {
'headers': {
'Authorization': 'Bearer ' + param.token,
},
'method': 'post',
'payload': {
'message':param.message,
'stickerPackageId':param.stickerPackageId,
'stickerId':param.stickerId,
'imageThumbnail':param.imageThumbnail,
'imageFullsize':param.imageFullsize
}
});
}
儲存後，點選【發佈 > 部署為網路應用程式...】
專案版本設定【新增】
將應用程式執行為【我】
具有應用程式存取權的使用者設定為【任何人，甚至是匿名使用者】
首次部署，需要使用google帳戶進行授權
記下網路應用程式的網址
寫一個html檔，內容如下
<html>
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<script>
$(function () {
var data = {
token: "申請的權杖"
};
data.message = "測試訊息";
data.stickerPackageId = "1";
data.stickerId = "4";
data.imageThumbnail = "縮圖網址";
data.imageFullsize = "圖檔網址";
$.post('Google Apps Script網路應用程式網址',
data,
function(e){
console.log(e);
});
});
</script>
</body>
</html>
現在，執行這個網頁也可以傳送LINE訊息了