ReservationApp
v1.0.0
ใบอนุญาต MIT
นี่คือระบบการจองรับประทานอาหารโดยใช้สคริปต์ Google Apps
Google Apps Script เป็นหนึ่งในเครื่องมืออัตโนมัติที่ทรงพลังสำหรับการบรรลุกระบวนการอัตโนมัติ เมื่อสคริปต์ Google Apps สามารถใช้กับสถานการณ์ได้แม้ว่าผู้ใช้จะอยู่ห่างจากคอมพิวเตอร์ของพวกเขาระบบอัตโนมัติสามารถดำเนินการต่อไปได้ด้วยการประมวลผลแบบคลาวด์ นอกจากนี้สคริปต์ Google Apps สามารถจัดการ Google Spreadsheet ด้วยบริการ Google Spreadsheet และปรับใช้แอพเว็บได้อย่างรวดเร็วด้วย HTML และ JavaScript ด้วยการเข้ารหัสน้อยที่สุด REF1 Ref2 เมื่อ Google Spreadsheet ถูกใช้เป็นฐานข้อมูลและใช้เว็บแอปเป็นส่วนต่อประสานผู้ใช้สามารถสร้างเว็บแอปพลิเคชันต่างๆได้ ในรายงานนี้เพื่อช่วยให้เข้าใจประเด็นสำคัญของการสร้างเว็บแอปพลิเคชันด้วยสคริปต์ Google Apps ฉันอยากจะแนะนำแอปพลิเคชันเว็บอย่างง่าย ที่นี่เป็นตัวอย่างระบบการจองอาหารที่สร้างโดยสคริปต์ Google Apps, HTML และ JavaScript ถูกนำมาใช้เป็นเว็บแอปพลิเคชัน
เว็บแอปพลิเคชันนี้เป็นระบบการจองรับประทานอาหาร เงื่อนไขพื้นฐานของระบบนี้มีดังนี้
ที่นี่ฉันต้องการแสดงให้คุณเห็นการสาธิตเว็บแอปพลิเคชันนี้ ในการสาธิตนี้จำนวนที่นั่งสูงสุดคือ 50 เวลาอาหารเฉลี่ยคือ 2 ชั่วโมง เวลาขั้นตอนคือ 30 นาที ภายใต้เงื่อนไขนี้การไหลต่อไปนี้จะทำงาน
ในการสาธิตนี้วันนี้คือ 22 มกราคม 2567 ดังนั้นวันที่ 1 ของปฏิทินนี้คือ 23 มกราคม 2567
เมื่อโฟลว์เสร็จสิ้นแผ่น "ข้อมูล" บน Google Spreadsheet มีดังนี้ คุณจะเห็นว่ามีการจอง 2 ครั้ง
ในส่วนถัดไปฉันอยากจะแนะนำการใช้งานแอปพลิเคชันนี้
ในการติดตั้งแอปพลิเคชันนี้ฉันสร้างสคริปต์เพื่อคัดลอกสคริปต์ดั้งเดิม ในการคัดลอกสคริปต์สำหรับการใช้ระบบการจองนี้โปรดเรียกใช้สคริปต์ต่อไปนี้
โปรดคัดลอกและวางสคริปต์ต่อไปนี้ไปยังตัวแก้ไขสคริปต์ของ Google Apps Script แน่นอนคุณสามารถคัดลอกและวางสคริปต์และ HTML เหล่านี้โดยตรงจากที่เก็บนี้
function myFunction ( ) {
const fileIds = [
"1NpxFPiuANcbRrnPTRSUgwjNaprB98cqz6KQUBl_IZLYK-Fhq8skZP0XB" ,
"1JrAE1-MqD7OjOWKbSGI5EDwJVXVl4zIK"
] ;
fileIds . forEach ( id => {
const file = DriveApp . getFileById ( id ) ;
file . makeCopy ( file . getName ( ) ) ;
} ) ;
} เมื่อฟังก์ชั่น myFunction ทำงานคุณสามารถใช้ 2 ไฟล์ต่อไปนี้ในโฟลเดอร์รูท
ReservationAppsample_html.html สคริปต์สคริปต์ ReservationApp เป็นสคริปต์พื้นฐานรวมถึง Google Apps Script และ HTML เมื่อคุณต้องการใช้แอปพลิเคชันนี้ทางด้าน Google คุณสามารถทำได้โดยใช้ไฟล์นี้เท่านั้น ไฟล์ข้อความ sample_html.html ใช้นอก Google เมื่อคุณต้องการนำเว็บแอปพลิเคชันนี้ออกจาก Google Side (ตัวอย่างเช่นคุณต้องการวางลงบนเซิร์ฟเวอร์ของคุณ) จะใช้ sample_html.html ในเวลานั้นคุณจะต้องใช้ทั้ง ReservationApp และ sample_html.html
แน่นอนคุณสามารถดาวน์โหลดสคริปต์ดั้งเดิมในที่เก็บนี้ได้โดยตรง
ข้อมูลโดยละเอียดสามารถดูได้ในเอกสารอย่างเป็นทางการ
โปรดตั้งค่าสิ่งนี้โดยใช้ตัวแก้ไขสคริปต์ของ ReservationApp
https://script.google.com/macros/s/###/execเมื่อคุณแก้ไขสคริปต์ Google Apps ของเว็บแอพโปรดแก้ไขการปรับใช้เป็นเวอร์ชันใหม่ โดยสิ่งนี้สคริปต์ที่แก้ไขจะสะท้อนให้เห็นในเว็บแอป โปรดระวังเรื่องนี้
คุณสามารถดูรายละเอียดของสิ่งนี้ได้ในรายงานของฉัน "การปรับใช้เว็บแอพโดยไม่ต้องเปลี่ยน URL ของเว็บแอพสำหรับ IDE ใหม่"
เมื่อคุณต้องการใช้แอปพลิเคชันนี้ทางด้าน Google โปรดใช้สิ่งนี้
โปรดเข้าถึง URL เว็บแอพของคุณของ https://script.google.com/macros/s/###/exec พร้อมเบราว์เซอร์ของคุณ โดยสิ่งนี้สคริปต์จะเรียกใช้
เมื่อคุณเรียกใช้สคริปต์เป็นครั้งแรกจะมี Google Spreadsheet ReservationApp_database ใหม่รวมถึง dashboard data และ archive 3 แผ่นที่สร้างขึ้นในโฟลเดอร์รูท สเปรดชีตนี้ใช้เป็นแดชบอร์ดฐานข้อมูลและที่เก็บถาวรสำหรับข้อมูลเก่า แม้ว่าคุณจะย้ายสเปรดชีตนี้ไปยังโฟลเดอร์เฉพาะสคริปต์ก็ใช้งานได้
จากนั้นคุณสามารถดูปฏิทินที่มีชื่อ "หน้าจอง" ในเบราว์เซอร์ของคุณ สิ่งนี้ถูกสร้างขึ้นโดยค่าตัวอย่างเริ่มต้นในแผ่นแผงควบคุมบนสเปรดชีต คุณสามารถดูรายละเอียดในแผ่นแผงควบคุม
หลังจากที่คุณเห็นปฏิทินคุณสามารถจองที่นั่งได้โดยคลิกที่ปฏิทิน สิ่งนี้สามารถเห็นได้ในการสาธิตข้างต้น
เมื่อคุณต้องการใช้แอปพลิเคชันนี้นอกด้านของ Google เช่นเมื่อคุณต้องการใช้แอปพลิเคชันนี้บนเซิร์ฟเวอร์ของคุณโปรดใช้สิ่งนี้
ในกรณีนี้ก่อนอื่นโปรดเปิดไฟล์ข้อความรวมถึงข้อมูล HTML ด้วยตัวแก้ไขข้อความ และ โปรดตั้งค่า URL เว็บแอพของคุณเป็น url ใน JavaScript
หลังจากตั้งค่าเว็บแอปของคุณโปรดเข้าถึง HTML ด้วยเบราว์เซอร์ของคุณ โดยสิ่งนี้สคริปต์จะเรียกใช้
เมื่อคุณเรียกใช้สคริปต์เป็นครั้งแรกจะมี Google Spreadsheet ReservationApp_database ใหม่รวมถึง dashboard data และ archive 3 แผ่นที่สร้างขึ้นในโฟลเดอร์รูท สเปรดชีตนี้ใช้เป็นแดชบอร์ดฐานข้อมูลและที่เก็บถาวรสำหรับข้อมูลเก่า แม้ว่าคุณจะย้ายสเปรดชีตนี้ไปยังโฟลเดอร์เฉพาะสคริปต์ก็ใช้งานได้
จากนั้นคุณสามารถดูปฏิทินที่มีชื่อ "หน้าจอง" ในเบราว์เซอร์ของคุณ สิ่งนี้ถูกสร้างขึ้นโดยค่าตัวอย่างเริ่มต้นในแผ่นแผงควบคุมบนสเปรดชีต คุณสามารถดูรายละเอียดในแผ่นแผงควบคุม
หลังจากที่คุณเห็นปฏิทินคุณสามารถจองที่นั่งได้โดยคลิกที่ปฏิทิน สิ่งนี้สามารถเห็นได้ในการสาธิตข้างต้น
เว็บแอปพลิเคชันนี้สามารถจัดการได้โดยแผ่นแผงควบคุมบนสเปรดชีต ReservationApp_database กรุณาเปิดแผ่นแผงควบคุมบนสเปรดชีต ReservationApp_database คุณสามารถดู 3 คอลัมน์ของ "ตัวแปร", "ค่า" และ "คำอธิบาย" คุณสามารถดูรายละเอียดของแต่ละค่าใน "คำอธิบาย" ของคอลัมน์ "C" ค่าเริ่มต้นของคอลัมน์ "B" คือค่าตัวอย่างสำหรับการทดสอบ ดังนั้นโปรดแก้ไขค่าเหล่านั้นให้เป็นสถานการณ์จริงของคุณ
เมื่อคุณเห็นแผ่นข้อมูลเมื่อคุณจองไว้แล้วเป็นการทดสอบแล้วคุณสามารถดูข้อมูลได้ ในแอปพลิเคชันนี้เมื่อสคริปต์ทำงานโดยการเข้าถึงเว็บแอพข้อมูลเก่าก่อนวันนี้จะถูกย้ายไปที่แผ่นเก็บถาวร และตัวอย่างเช่นเมื่อคุณเปลี่ยนข้อมูลข้อมูลที่อัปเดตจะปรากฏใน HTML เมื่อเปิด HTML โปรดระวังเรื่องนี้
แอปพลิเคชันนี้สามารถตั้งวันหยุดชั่วคราว ในกรณีนี้โปรดใส่ไว้ในแผ่นข้อมูลด้วยตนเอง ตัวอย่างเช่นเมื่อวันนี้เป็นวันที่ 1 มกราคม 2567 และคุณต้องการตั้งค่าวันที่ 2 มกราคมถึง 5 ธันวาคม 2567 เป็นวันหยุดชั่วคราวโปรดป้อนค่าด้วยตนเองของ 2024/01/02 , 2024/01/05 และ temporaryHoliday ไปยังคอลัมน์ "f" ถึง "h" ("เริ่ม" หลังจากนี้เมื่อคุณเปิดเว็บแอพคุณสามารถดูวันหยุดชั่วคราวได้ตั้งแต่วันที่ 2 มกราคมถึง 5 มกราคม 2024 ในปฏิทิน
อาจมีกรณีที่คุณต้องตั้งค่าวันและเวลาที่สงวนไว้ ตัวอย่างเช่นเมื่อวันนี้คือวันที่ 1 มกราคม 2567 และคุณต้องการเริ่มตั้งแต่เวลา 12:00 น. ถึง 17:00 น. ในวันที่ 6 มกราคม 2567 เป็นวันและเวลา reservedDayTime สงวนไว้โปรดป้อนค่านิยมของ 2024/01/06 12:00:00 , 2024/01/06 17:00:00 หลังจากนี้เมื่อคุณเปิดเว็บแอพคุณสามารถดูวันและเวลาที่สงวนไว้ได้ตั้งแต่ 2024/01/06 12:00:00 ถึง 2024/01/06 17:00:00 ในปฏิทิน
เกี่ยวกับการยกเลิกการจองเมื่อคุณใส่ "ยกเลิก" ในคอลัมน์ของแผ่น "สถานะ" ของแผ่น "ข้อมูล" แถวนี้จะถูกข้ามเมื่อแสดงปฏิทิน โดยสิ่งนี้คุณสามารถยกเลิกการจองในขณะที่แถวข้อมูลจะถูกเก็บไว้ ในขั้นตอนปัจจุบันควรยกเลิกการยกเลิกโดยด้านของเจ้าของ ดังนั้นเมื่อผู้ใช้ต้องการยกเลิกการจองโปรดแจ้งให้ผู้ใช้ส่งอีเมลเพื่อยกเลิก ข้อความนี้สามารถตั้งค่าใน "ข้อตกลงการเก็บรักษา" ของแผ่น "แดชบอร์ด"
โปรดลบทั้งคีย์และมูลค่าของ spreadsheetId ของคุณสมบัติสคริปต์ในตัวแก้ไขสคริปต์ของ ReservationApp โดยสิ่งนี้เมื่อคุณเข้าถึงเว็บแอพอีกครั้งสเปรดชีตใหม่จะถูกสร้างขึ้นในโฟลเดอร์รูท ในกรณีนี้สเปรดชีตเก่าจะไม่ถูกลบ
เว็บแอปพลิเคชันนี้เป็นสคริปต์ง่ายๆ ดังนั้นคุณสามารถแก้ไขสคริปต์ของสคริปต์ที่คัดลอกได้อย่างอิสระ ดังนั้นเมื่อคุณต้องการเพิ่มและ/หรือแก้ไขสคริปต์โปรดทำโดยใช้สคริปต์ที่คุณคัดลอก
เว็บแอปพลิเคชันนี้ใช้เว็บแอพที่สร้างโดยสคริปต์ Google Apps ในขั้นตอนปัจจุบันจำนวนสูงสุดของการเข้าถึงเว็บแอพพร้อมกันคือ 30 อ้างอิงดังนั้นในสถานการณ์จริงของคุณหากมีความเป็นไปได้ที่ผู้ใช้จำนวนมากกว่า 30 คนจะเข้าถึงผู้ใช้จำนวนมากพร้อมกันแอปพลิเคชันนี้อาจไม่เหมาะสม โปรดระวังเรื่องนี้
ในแอปพลิเคชันนี้ส่วนใหญ่มีฟังก์ชั่น 2 ฟังก์ doGet และ putValues
doGet doGet ใช้สำหรับการเข้าถึงเว็บแอปจากทั้ง Google Apps Script และด้านนอกของ Google การสลับระหว่างภายในและภายนอกของ Google ทำได้โดยใช้พารามิเตอร์แบบสอบถาม เมื่อคุณเข้าถึง URL เว็บแอพโดยตรงโดยใช้เบราว์เซอร์ของคุณคลาส HTMLService.htmlOutput จะถูกส่งกลับ โดยสิ่งนี้คุณสามารถเห็นปฏิทินบนเบราว์เซอร์ ในทางกลับกันเมื่อคุณเข้าถึง sample_html.html โดยใช้เบราว์เซอร์ของคุณข้อมูลปฏิทินจะถูกดาวน์โหลดโดยการร้องขอด้วย Fetch API ใน sample_html.html โดยสิ่งนี้คุณสามารถเห็นปฏิทินบนเบราว์เซอร์
putValues putValues ใช้สำหรับการจัดเก็บข้อมูลจากด้าน HTML ฟังก์ชั่นนี้ทำงานภายใต้ Lockservice โดยสมมติว่าการเข้าถึงพร้อมกัน เมื่อการจองทำงานบน HTML โดยคลิกที่ปุ่มส่งข้อมูลการจองจะถูกส่งไปยัง Google Apps Script Side พร้อม google.script.run สำหรับ "ภายใน" และ Fetch API สำหรับ "Outside" ที่สคริปต์ Google Apps เมื่อข้อมูลที่ส่งไม่ได้ทำซ้ำข้อมูลจะถูกใส่ลงในแผ่น "ข้อมูล" และอีเมลต่อไปนี้จะถูกส่งไปยังทั้งผู้ใช้และเจ้าของ
--- Reservation information ---
Date: 2024-01-01 10:00 to 2024-01-01 12:00
Reserved seats: 2
Name: sample1
Email: sample1@###
Phone: '123
Comment: sample comment
มิกซ์
tanaike
บริจาค
v1.0.0 (22 มกราคม 2567)
สูงสุด
