บทความนี้เป็นการหาความรู้จากแหล่งเปิด Open Source เพื่อฝึกฝนตนเองในการเขียน Code ภาษา โดยจะใช้บริการของ Google Sheet เป็นฐานข้อมูล และ ใช้ภาษา App Script ในการเขียน
ขั้นตอนแรก ให้เราไปที่ google Sheet ของเรา แล้วสร้าง ไฟล์ใหม่ขึ้นมา ตั้งชื่อว่า Test Form
สำหรับการฝึกฝนตามตัวอย่าง จะมีแค่ 2 คอลัมน์คือ Name กับ Date
บนเมนูบาร์ให้เราไปที่คำสั่ง ส่วนขยาย หรือ extension แล้วคลิก app script
จะได้ไฟล์ชื่อว่า รหัส.gs ให้เราฝึกเขียน code หรือ จะcopy ไปวางก็ได้
function AddRecord(name) {
var ss= SpreadsheetApp.getActiveSpreadsheet();
var mainSheet = ss.getSheetByName("MAIN");
mainSheet.appendRow([name, new Date()]);
}
function startForm()
{
var form = HtmlService.createHtmlOutputFromFile('AddForm');
SpreadsheetApp.getUi().showModalDialog(form, 'Add Record');
}
function addMenu()
{
var menu = SpreadsheetApp.getUi().createMenu('Custom');
menu.addItem('Add Record Form', 'startForm');
menu.addToUi();
}
function onOpen(e)
{
addMenu();
}ในไฟล์จะมี 3 ส่วนหลักๆ คือส่วนที่เชื่อมต่อกับตารางฐานข้อมูล google sheet
ส่วนที่เรียกใช้งานแบบฟอร์ม html ในการกรอกข้อมูล
และส่วนที่เพิ่มเมนูในการเพิ่มข้อมูล Name
ขั้นตอนต่อมา ให้เราสร้างไฟล์สำหรับผู้ใช้งาน กรอกข้อมูล name เข้ามา
กำหนดชื่อไฟล์เป็น AddForm.html
จะเขียน code ที่ละบรรทัด หรือจะ copy วางก็ตามสะดวกและถนัด
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<script>
function AddRow()
{
var name = document.getElementById("name").value;
google.script.run.AddRecord(name);
}
</script>
</head>
<body>
Name: <input type="text" id="name" />
<input type="button" value="Add" onclick="AddRow()" />
</body>
</html>อธิบาย Code ในส่วนนี้ จะมีช่องให้กรอกชื่อ และปุ่ม Add เพื่อเพิ่มข้อมูลส่วนที่ 2 จะอาศัยภาษา java script ในการทำงานร่วมกัน โดยชุดคำสั่งดังกล่าวจะอยู่ในแท็ก <script> </script>เมื่อผู้ใช้งานคลิกปุ่ม add จะเรียนใช้งานฟังก์ชั่น ที่ชื่อว่า AddRow สำหรับคอลัมน์ date วันที่ จะเป็นอัตโนมัติของ google sheet ก็ว่าได้ ขั้นตอนการทดสอบการทำงานของไฟล์
กลับมาที่ไฟล์ google sheet แล้วกด refresh จะมีเมนูบาร์ custom เพิ่มขึ้นมา ให้คลิกเลือกใช้งานฟังก์ชั่นในการเพิ่มข้อมูล
ไม่มีความคิดเห็น:
แสดงความคิดเห็น