การเขียนโค้ดเพื่อบันทึกข้อมูลลงในตาราง Google Sheet

 เดิมแอดมินเองก็เคยศึกษาการเขียน Code ในการบันทึกข้อมูล เข้าสู่ตารางข้อมูลในรูปแบบของ ASP และ HTML โดยอาศัย Script การทำงาน ต้นแบบจากเว็บไซต์ต่างๆ เป็นแนวทางและ ปรับปรุงใช้งาน ตามต้องการ 

สำหรับยุค 2020 ตอนนี้ ตอนที่ระบบฐานข้อมูลแบบเปิด Cloud มีบทบาทและความสำคัญมากขึ้น และผู้ใช้งานอินเตอร์เน็ต ก็เข้าถึงได้มากขึ้น รวดเร็วขึ้น สะดวกขึ้น ข้อมูลภาพ ข้อความ วีดีโอ สามารถเข้าถึงประมวลผลได้รวดเร็ว บนอุปกรณ์พกพา โทรศัพท์มือถือ แท็บเล็บ โน้ตบุ้ค เป็นต้น 

สำหรับความรู้ที่อยากนำมาแชร์ ในวันนี้ คือ การ ใช้พื้นที่ cloud ส่วนตัวของทุกคน Google Drive ในการสร้างตารางสำหรับจัดเก็บข้อมูล จาก User หรือผู้ใช้งาน ผ่านการเขียน Code หรือ Script ง่ายๆ สำหรับ นักเรียน นักศึกษา หรือผู้ใช้งานคอมพิวเตอร์ทั่วไป ที่สนใจเริ่มต้นการเขียน Code เพื่อจัดการข้อมูล โดยไม่มีค่าใช้จ่าย 


ขั้นแรกไปที่ Google drive : GD สร้าง scipt ขึ้นมาตั้งชื่อว่า MY FOM

เพื่อใช้ลิงค์ไปที่ตาราง Google sheet และรับข้อมูลจากหน้าแบบฟอร์ม HTML 

เริ่มต้นด้วย 

Function doget() {

การส่งกลับค่า เป็นตัวเลข หรืออักษร

retun HtmlSevice.createHtmlOutputFromFile("ชื่อไฟล์")

โดยไปสร้างไฟล์ที่เมนู File ตั้งชื่อไฟล์เป็น Form HTML

แล้วเขียน code เพื่อแสดงข้อมูลพื้นฐาน 

แสดงส่วนหัว

<h1>Heading</h1>

เพิ่มส่วน input

<label>Name:</label><input type="text" id="username">

<button id="btn">ส่งข้อมูล</button>

บันทึกแล้วลองทดสอบ Script 

จะแสดงข้อมูล Heading 

เพิ่มการติดต่อกับผู้ใช้งาน โดยพื้นฐานคือการส่งผ่านค่าข้อมูล passing parameter 

เพิ่มปุ่มกด 

และระบุรหัส ID ให้ปุ่มกด เพื่อโยงกับภาษา JAVA SCIPT อีกที เริ่มด้วย

เมื่อมีคนกดปุ่ม จะให้ script ทำงานอะไร 

<script>

document.getElementById("btn").addEventListener("click",doStuff);

function doStuff(){

var uname=document.getElementById("username").value; ค่าที่ผู้ใช้งานป้อนชื่อเข้ามา 

google.script.run.userClicked(uname); 

document.getElementById("username").value="";

}

</script>



กลับไปเขียนโค้ดรองรับการทำงานของ script นี้ ในส่วนของ code ใน MY FORM

Function doget(e) {

Logger.log(e.parameter);

retun HtmlSevice.createHtmlOutputFromFile("Form HTML")

}

function userClicked(name){

คัดลอก url ของตาราง google sheet มาใส่

var url ="ใส่ค่า url ไฟล์ตาราง google sheet ของเรา";

var ss = SpreadsheetApp.openByUrl(url);

var ws =ss.getSheetByName("ชื่อชีทไฟล์ของเรา");

ws.appenRow([name]);

ws.appenRow([name,new Date]);

Logger.log(name+"Someone Clicked the Button");

}

กลับไปเพิ่ม script ที่หน้าฟอร์ม HTML 

ทดสอบรัน script จะพบว่า ดูใน Log ไฟล์ จะมีข้อมูลเก็บ Log ไว้ 

เราจะใช้พื้นฐานการเก็บค่า Log ในการเพิ่มช่องนำเข้าข้อมูล input ในส่วนของฟอร์มผู้ใช้งาน 

ขั้นตอนสุดท้าย คือการส่งค่าที่ได้รับจากการเปิดดูใน Log ไฟล์ ไปบันทึกลงในตาราง Google sheet 


Post a Comment