Web App การทำระบบเช็คอินขั้นเทพ กรอกแค่ชื่อ..แล้วระบบแจ้งพิกัด แจ้งแผนที่ แจ้งเตือนไลน์

siri
โพสต์: 1796
ลงทะเบียนเมื่อ: จันทร์ พ.ค. 25, 2020 9:57 am
ติดต่อ:

Web App การทำระบบเช็คอินขั้นเทพ กรอกแค่ชื่อ..แล้วระบบแจ้งพิกัด แจ้งแผนที่ แจ้งเตือนไลน์

โพสต์ที่ยังไม่ได้อ่าน โดย siri » อาทิตย์ มิ.ย. 19, 2022 1:06 pm

Web App การทำระบบเช็คอินขั้นเทพ กรอกแค่ชื่อ..แล้วระบบแจ้งพิกัด แจ้งแผนที่ แจ้งเตือนไลน์



youtu.be/Z7tUTD85LUg
https://www.youtube.com/watch?v=Z7tUTD85LUg
https://gist.github.com/neno-tech/92638 ... 0fb5a2ced0

code.gs
function doGet(e) {
return HtmlService.createTemplateFromFile("index").evaluate()
}

function userClick(data) {
let ss = SpreadsheetApp.openById('xxx');
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,Utilities.formatDate(new Date(), "GMT+7", "MM/dd/yyyy HH:mm:ss"), `${data.lat},${data.lon}`, geoAddress])


var strYear543 = parseInt(Utilities.formatDate(new Date(), "Asia/Bangkok", "yyyy")) + 543;
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 = '📣 แจ้งพิกัดการเช็คอิน\n';
text_data1 += '⏰วัน-เวลา\n'+daytime+'\n👨‍💼ชื่อ-นามสกุล\n'+data.username+'\n📌พิกัด\n'+data.lat+","+data.lon + '\n🏡ที่อยู่\n'+geoAddress

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 = "xxx";
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);
}
index.html
<!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/bootstrap@ ... ap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<script src="https://unpkg.com/sweetalert/dist/sweet ... "></script>
</head>

<body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@ ... dle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="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">
</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.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>

ตอบกลับโพส

ย้อนกลับไปยัง “ไอที คอมพิวเตอร์ โปรแกรมมิ่ง โค้ดดิ่ง แอพพลิเคชั่น ML, AI, IOT, Microcontroller, Robot”

ผู้ใช้งานขณะนี้

สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 4