คู่มือ การแจ้งเตือน Line Notify แบบใหม่

คมู อื การแจงเตือน Line Notify + Sheet + WebApp

1. ขนั้ ตอนแรกใหเราสรา ง Sheet ขั้นมาจาก Google Sheet จากน้นั ออกแบบ Record
ทีเ่ ราตองการจะใชง านเพ่ือเกบ็ ขอ มูลตางๆ ในภาพจะเปน “แบบบนั ทึกการรับมอบทรัพยส ิน IT”

2. เมือ่ เราทำการออกแบบ Record เสร็จแลว ใหไป “เคร่อื งมือ” เลอื กไปท่ี “โปรแกรม
แกไ ขสครปิ ต”

3. เราจะเขา สูหนา ตา งของ Apps Script เพ่ือท่ีจะทำการเขยี น Code ใหเกดิ การแจง
เตอื นยงั Line Notify

4. โดยเราจะตอ งเขียน Code ข้ึนมา 2 ตวั คือ Code Notify ท่ใี ชส ำหรับการแจง เตอื น
ซง่ึ เปนไฟล Script และ ไฟลร ับขอมูล Input เขา ไป จะเปน ไฟล html โดยสง่ิ สำคัญท่เี ราตอ งใช
น่นั กค็ อื ID ของ Sheet ทีเ่ ราสรา งไว และ Token ของกลมุ Line ท่จี ำใหท ำการแจง เตือนเขาไป

5. โดย ID ของ Sheet เราสามารถดไู ดจ ากหนา URL Sheet ของเรา จากตำแหนง หลัง
/d ไปจนถงึ หนา /edit ทำการ Copy แลว นำไปวางท่หี นา App Script ของเราใน Function
userClick(data) สงั เกตบุ รรทัดที่ 6 ตรงตำแหนง openByID นำ ID ของ Sheet ไปวางไวในวงเลบ็

6.จากนน้ั กอ็ อก Token จากกลุมของเราในเวบ็ ของ Line Notify โดยทำตามขนั้ ตอนดงั นี้
1). Login เขา Line Notify ดว ย Line ท่เี ราจะใช จากนั้นคลกิ ไปท่ชี ่อื ผูใชงาน

2). เลือก “หนาของฉนั ”

3). ดา นบนเปน การแสดงบรกิ ารท่ีเราเช่ือมตอกับ Line Notify อยู หากเราตอ งการสรางการแจง เตอื น
ใหมใ หก ดไปที่ “ออก Token”

4). ใสชื่อ Token (1) จากนน้ั เลือกกลมุ ที่จะทำการแจง เตือน (2) แลวกด “ออก Token” (3)

5). เราก็จะได Token ของกลุมที่จะทำการสง แจง เตอื น กด “คดั ลอก” เพอ่ื จะนำไปวางใน Apps
Script ของฟอรม ท่เี ราสรางไว **** ในกลุม Line ทีเ่ ราจะให Line Notify แจงเตือนน้ัน ใหเราทำการเชิญ Line

Notify เขา กลมุ ดว ย โดยการกดคนหาชอื่ Line Notify แลว กดเพมิ่ เขา ไปในกลุม ****

7.หลงั จากออก Token เรียบรอยแลว ใหนำไปใสใน Function sendHttpPostImage ใน
บรรทดั ท่ี 40 token = “นำ Token ทเ่ี ราไดมาใส” เปน อนั เสร็จสนิ้

7. เมื่อเราทำกการใส Sheet ID และ Token เสรจ็ เรยี บรอย จากนน้ั เราจะมาทำใหเ จาสง่ิ ทที่ ี่เรา
ทำข้ึนมาใชงานไดโดยการ เลือกไปที่ “การทำใหใ ชง านได” จากนนั้ เลอื ก “การทำใหใ ชงานไดร าย
ใหม”

8. จะปรากฎหนาตา ง การทำใหใชงานไดรายการใหขน้ึ ใหเราทำการเลอื กไปที่ “เลอื ก
ประเภท” ตรงรปู ฟน เฟอง เลอื กประเภทเปน “เวป็ แอป” จากน้นั ตรงชอ งผูมสี ิทธิ์เขาถึง เลอื กไปท่ี
“ทุกคน” เสรจ็ แลวกด “การทำใหใชง านได”

9. จะปรากฏหนาตางนขี้ ึ้นมา ใหเราทำการ “คัดลอก” Link ดา นลาง เพอ่ื นำไปเปดใน
แทบ็ ใหม

10. จะปรากฎหนาทเี่ ราจะสามารถทำการบันทกึ ขอ มลู เรากก็ รอกขอมลู ท่ตี อ งการ เสรจ็
แลว กด “บนั ทกึ ขอ มลู ”

11. Line Notify จะทำการแจงเตอื นเขา มาในกลุมที่เราใส Token ไว เปน อนั เสร็จ
เรยี บรอ ย

Code Notify

function doGet(e) {
return HtmlService.createTemplateFromFile("Inputdata").evaluate()
}

function userClick(data) {
let ss = SpreadsheetApp.openById('19eX3fOyTxZCdPuBG-qzL-
MqWhSHuLQ7En0bPqgh1XyE');
let sheet = ss.getSheets()[0];
let response = Maps.newGeocoder().reverseGeocode(data.lat, data.lon);
let geoAddress = response.results[0].formatted_address;
sheet.appendRow([data.username,data.userid,data.assetid,data.assetname,Utilities.fo
rmatDate(new Date(), "GMT+7", "MM/dd/yyyy HH:mm:ss"), `${data.lat},${data.lon}`, geo
Address, data.status])

var strYear543 = parseInt(Utilities.formatDate(new Date(), "Asia/Bangkok", "yyyy")) + 5
43;
var strhour=Utilities.formatDate(new Date(), "Asia/Bangkok", "HH");
var strMinute=Utilities.formatDate(new Date(), "Asia/Bangkok", "mm");
var strMonth1 = Utilities.formatDate(new Date(), "Asia/Bangkok", "M");
var strMonthCut1 = ["", "มกราคม", "กุมภาพนั ธ", "มีนาคม", "เมษายน", "พฤษภาคม", "มิถุนายน"
, "กรกฎาคม", "สิงหาคม", "กันยายน", "ตลุ าคม", "พฤศจกิ ายน", "ธนั วาคม"]
var strMonthThai = strMonthCut1[strMonth1];
var strDay = Utilities.formatDate(new Date(), "Asia/Bangkok", "d"); // d ไม
มี 0 นำ dd มี 0 นำ

var daytime=strDay+' '+strMonthThai+' '+strYear543+ ' เวลา '+strhour+':'+strMinute+'
น.';

var text_data1 = ' แจง เตอื นการรบั ทรพั ยส นิ IT\n';
text_data1 += '⏰วนั -เวลา :\n'+daytime+'\n�ชอื่ -
นามสกุล พนักงาน :'+data.username+'\nรหัสพนักงาน :'+data.userid+'\nรหสั
ทรัพยสนิ :'+data.assetid+'\nรายการทรัพยสิน :'+data.assetname+'\n
ตำแหนง\n'+data.lat+","+data.lon + '\n ทีอ่ ย\ู n'+geoAddress + '\n สถานะการรบั
ทรพั ยส นิ :'+data.status

var latitude = data.lat
var longitude = data.lon
var map = Maps.newStaticMap()
.setSize(600,600) //(Max:1300 X 1300
.setLanguage('TH')
.setMobile(true)
.setMapType(Maps.StaticMap.Type.HYBRID)

map.addMarker(latitude, longitude)
var mapBlob = map.getBlob()
var mapUrl = map.getMapUrl()
sendHttpPostImage(text_data1,mapBlob)
}

function sendHttpPostImage(mapUrl, mapBlob){
var token = "e9ziGOUoi7OXyo0JyrKX5xTxIJjWB3D88NYivtmJT7z";

var formData = {
'message' : '\n'+mapUrl,
'imageFile': mapBlob
}
var options =
{
"method" : "post",
"payload" : formData, // message, imageFile, formData, Post
"headers" : {"Authorization" : "Bearer "+ token}
};

UrlFetchApp.fetch("https://notify-api.line.me/api/notify",options);
}

Code Inputdata

<!DOCTYPE html>
<html lang="en">

<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]

beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-
giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossori
gin="anonymous">

<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
</head>

<body>
<script src="https://cdn.jsdelivr.net/npm/[email protected]

beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-
ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossori
gin="anonymous"></script>

<div class="container">
<h2>บันทกึ การรบั ของ</h2>
<form id="mainform">
<div class="form-group">
<label for="username">ชื่อ-สกลุ พนักงาน:</label>
<input type="text" class="form-control" id="username">
<label for="userid">รหสั พนักงาน:</label>

<input type="text" class="form-control" id="userid">
<label for="assetid">รหัสทรพั ยสิน:</label>
<input type="text" class="form-control" id="assetid">
<label for="assetname">รายการทรพั ยสนิ :</label>
<input type="text" class="form-control" id="assetname">
<label for="status">สถานะการรับทรัพยส นิ :</label>
<input type="text" class="form-control" id="status">
</div>
<br>

<button id="btn" class="btn btn-primary">บันทึกขอมูล</button>
</form>
</div>
<script>
getLocation()
let lat, lon
function getLocation() {

if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(position => {
lat = position.coords.latitude
lon = position.coords.longitude
});

}
}

</script>
<script>

document.getElementById("btn").addEventListener("click", saveData)

function saveData() {
event.preventDefault()
var data = {}
data.username = document.getElementById("username").value
data.userid = document.getElementById("userid").value
data.assetid = document.getElementById("assetid").value
data.assetname = document.getElementById("assetname").value
data.status = document.getElementById("status").value
data.lat = lat
data.lon = lon
google.script.run.withSuccessHandler(saveSuccess).userClick(data)
document.getElementById("mainform").reset()

}
function saveSuccess(result) {

if (result) {
sweetAlert({
text: "บันทึกขอ มลู เรยี บรอ ยแลว",
icon: "success",
timer: 5000
})

}
}
</script>
</body>

</html>
Code By Apiwat Wongkanha