🛡️ Daily Duty Report System (DDRS)

ระบบรายงานการปฏิบัติหน้าที่เวรประจำวัน ด้วย Google Apps Script

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

ปัญหาที่พบจากการรายงานในรูปแบบกระดาษ คือข้อมูลกระจัดกระจาย ค้นหาย้อนหลังยาก ภาพประกอบแยกจากรายงาน และเมื่อต้องการสรุปข้อมูลหรือจัดพิมพ์รายงานก็ต้องนำข้อมูลมาจัดทำใหม่

จึงพัฒนา Daily Duty Report System (DDRS) – ระบบรายงานการปฏิบัติหน้าที่เวรประจำวัน ขึ้น โดยใช้ Google Apps Script + Google Sheets + Google Drive ทำให้สามารถบันทึก แก้ไข ค้นหา แนบภาพ ดูรายงาน และพิมพ์เอกสารได้จากระบบเดียว

🌐 ทดลองใช้งาน Daily Duty Report (DDR)

✨ ความสามารถของระบบ

ระบบที่พัฒนาขึ้นรองรับการใช้งานทั้งคอมพิวเตอร์ แท็บเล็ต และโทรศัพท์มือถือ โดยมีความสามารถสำคัญดังนี้

📊 Dashboard สรุปจำนวนรายงานทั้งหมด รายงานวันนี้ รายงานเดือนปัจจุบัน และรายการที่พบปัญหา
📝 บันทึกรายงานการปฏิบัติหน้าที่เวรประจำวัน
✏️ แก้ไขข้อมูลเดิม
🗑️ ลบข้อมูล
👁️ เปิดดูรายละเอียดรายงาน
🔍 ค้นหารายงานจากคำค้นและช่วงวันที่
📸 แนบภาพประกอบได้สูงสุด 4 รูป
🖼️ ย่อภาพก่อนส่งไปยัง Google Drive
🔗 จัดเก็บ URL ภาพในรูปแบบ lh3.googleusercontent.com
🖼️ ภาพใช้ object-fit: contain ทำให้เห็นภาพครบโดยไม่ Crop หรือตัดส่วนของภาพ
🖨️ Preview รายงานบนหน้าจอก่อนสั่งพิมพ์
📄 รองรับการพิมพ์กระดาษ A4
⚙️ มีหน้า Settings สำหรับปรับแต่งระบบ
📊 มีปุ่มเปิด Google Sheets โดยตรง
🔐 CRUD ป้องกันด้วย Password
💾 สามารถจำ Password ภายใน sessionStorage จนกว่าจะปิดแท็บ
🔔 แจ้งเตือนด้วย SweetAlert2
⏳ Loading Animation พร้อมระบบป้องกัน Loading ค้าง
📱 Responsive รองรับหน้าจอมือถือ
📖 มีคู่มือการใช้งานภายในโปรแกรม

ระบบฝั่งเซิร์ฟเวอร์ยังสามารถตรวจสอบและสร้างชีต Reports, Settings และ Lists พร้อมข้อมูลตัวอย่างให้โดยอัตโนมัติ

🗂️ โครงสร้างโปรแกรม

สร้างโปรเจกต์ Google Apps Script และแบ่งออกเป็น 4 ไฟล์

Daily Duty Report System
│
├── Code.gs
├── index.html
├── javascript.html
└── style.html

โดยหน้าหลักเรียก CSS และ JavaScript ผ่าน

<?!= include('style'); ?>

และ

<?!= include('javascript'); ?>

ไฟล์ javascript.html ของระบบจึงต้องมี <script>...</script> ครอบ JavaScript ไว้ด้วย ซึ่งไฟล์ต้นฉบับที่แนบมาได้จัดโครงสร้างไว้เรียบร้อยแล้ว

📊 โครงสร้าง Google Sheets

ไม่จำเป็นต้องสร้างชีตด้วยตนเองทั้งหมด เพราะเมื่อระบบเริ่มต้นจะตรวจสอบและสร้างฐานข้อมูลที่จำเป็นให้

1. Sheet: Reports

ใช้สำหรับจัดเก็บรายงานเวร

ID
วันที่
วัน
ผู้ปฏิบัติหน้าที่
ตำแหน่ง
ช่วงเวลาเวร
จุดปฏิบัติหน้าที่
เหตุการณ์ทั่วไป
ปัญหาที่พบ
การแก้ไข
ข้อเสนอแนะ
รูปภาพ1
รูปภาพ2
รูปภาพ3
รูปภาพ4
ผู้บันทึก
วันที่บันทึก
วันที่แก้ไข

เวอร์ชันนี้ ไม่มีช่องจำนวนนักเรียนมาเรียนและจำนวนนักเรียนขาด และมีระบบย้ายโครงสร้างจากชีตรุ่นเก่าให้อัตโนมัติหากตรวจพบคอลัมน์ดังกล่าว

2. Sheet: Settings

ใช้สำหรับตั้งค่าระบบ เช่น

APP_NAME
SCHOOL_NAME
DEVELOPER
FOLLOW_URL
CRUD_PASSWORD
DRIVE_FOLDER_ID
SPREADSHEET_URL
LOGO_URL
REPORT_TITLE
FOOTER_TEXT

ค่า Password ตัวอย่างเริ่มต้นคือ

หลังติดตั้งจริงควรเปลี่ยนเป็นรหัสของตนเองทันที

3. Sheet: Lists

ใช้เป็นฐานข้อมูลรายการตัวเลือก เช่น

POSITION
DUTY_TIME
DUTY_POINT

ดังนั้น หากต้องการเพิ่มตำแหน่ง จุดเวร หรือช่วงเวลาปฏิบัติหน้าที่ สามารถจัดการรายการจากชีตนี้ได้

📸 ระบบอัปโหลดภาพ 4 รูป

จุดเด่นอีกส่วนคือสามารถแนบภาพประกอบได้สูงสุด 4 ภาพต่อรายงาน

ฝั่ง Browser จะย่อภาพก่อนส่งขึ้นเซิร์ฟเวอร์ เช่น

resizeImage(f,1600,.82)

จากนั้น Code.gs จะสร้างไฟล์ใน Google Drive และสร้าง URL ในรูปแบบประมาณ

https://lh3.googleusercontent.com/d/FILE_ID=w1600

ระบบจึงไม่จำเป็นต้องบันทึก Base64 ขนาดใหญ่ลง Google Sheets โดยตรง

และส่วนแสดงภาพกำหนดเป็น

object-fit: contain;
object-position: center;

ทั้งหน้ากรอกข้อมูล หน้าดูรายละเอียด และหน้าพิมพ์ ทำให้ เห็นรูปภาพครบทั้งภาพ ไม่มีการตัดขอบภาพ

🔐 ระบบ Password สำหรับ CRUD

การเพิ่ม แก้ไข ลบ และจัดการ Settings จะมีการตรวจสอบ Password

เพื่อไม่ให้ผู้ใช้ต้องกรอกรหัสใหม่ทุกครั้ง โปรแกรมใช้

sessionStorage

สำหรับจดจำรหัสผ่านเฉพาะแท็บปัจจุบัน

เมื่อปิดแท็บ Browser ข้อมูลดังกล่าวจะหายไป

ฟังก์ชันหลักประกอบด้วย

getSavedPassword()
savePassword()
requestCrudPassword()

ก่อนใช้งาน Password ที่จำไว้ ระบบจะส่งไปตรวจสอบกับ verifyCrudPassword() ฝั่ง Apps Script อีกครั้ง

⏳ ป้องกัน Loading ค้าง

ระบบมี Loading Overlay แบบนุ่มนวล พร้อมข้อความบอกสถานะ เช่น

กำลังโหลดข้อมูลรายงาน...
กำลังเตรียมรูปภาพ...
กำลังบันทึกรายงาน...
กำลังจัดทำรายงาน...

นอกจากนี้ยังมี Timeout สำหรับการเรียก Apps Script และ Safety Timer สำหรับ Loading ทำให้กรณีการเชื่อมต่อผิดพลาด Overlay ไม่ควรค้างอยู่บนหน้าจออย่างไม่สิ้นสุด

🖨️ ระบบรายงานและพิมพ์

เลือกเมนู

รายงาน / พิมพ์

จาก Sidebar

สามารถกำหนด

จากวันที่
ถึงวันที่
ผู้ปฏิบัติหน้าที่ / คำค้น

จากนั้นกดปุ่ม 👁️ เพื่อสร้าง Preview

ระบบจะนำข้อมูลมาจัดรูปแบบเป็นรายงาน ประกอบด้วยวันที่ ผู้ปฏิบัติหน้าที่ ตำแหน่ง ช่วงเวลา จุดปฏิบัติ เหตุการณ์ ปัญหา การแก้ไข ข้อเสนอแนะ ภาพประกอบ และพื้นที่ลงชื่อ

เมื่อตรวจสอบเรียบร้อยจึงกด 🖨️ เพื่อพิมพ์

CSS สำหรับพิมพ์กำหนดไว้เป็น

@page {
  size: A4 portrait;
  margin: 10mm;
}

พร้อมซ่อน Sidebar, Topbar, Footer และส่วนควบคุมที่ไม่จำเป็นในการพิมพ์

⚙️ หน้า Settings

ผู้ดูแลสามารถแก้ไขค่าหลักจากหน้าเว็บได้ เช่น

ชื่อโปรแกรม
ชื่อสถานศึกษา
ชื่อผู้พัฒนา
ลิงก์ติดตาม
Google Sheet URL
Google Drive Folder ID
URL โลโก้
หัวข้อรายงาน
ข้อความ Footer
Password CRUD

ทำให้สามารถนำระบบชุดเดียวกันไปประยุกต์ใช้กับโรงเรียนอื่นได้ง่ายขึ้น

🚀 วิธีติดตั้งโปรแกรม

ขั้นแรกให้สร้าง Google Sheets ใหม่ แล้วไปที่

ส่วนขยาย
→ Apps Script

สร้างไฟล์ทั้งหมด 4 ไฟล์

Code.gs
index.html
javascript.html
style.html

นำ Code ด้านล่างไปวางให้ตรงกับชื่อไฟล์

จากนั้นบันทึกโปรเจกต์

เลือกฟังก์ชัน

setupSystem

แล้วกด Run

ครั้งแรก Google จะขอสิทธิ์ในการเข้าถึง Google Sheets และ Google Drive ให้ดำเนินการอนุญาตสิทธิ์ตามขั้นตอน

เมื่อทำงานสำเร็จ ระบบจะสร้างฐานข้อมูลและ Folder สำหรับเก็บภาพให้โดยอัตโนมัติ

🌐 การ Deploy เป็น Web App

ไปที่

Deploy
→ New deployment
→ Web app

ตั้งค่า

Execute as:
Me

Who has access:
Anyone

จากนั้นกด

Deploy

คัดลอก URL ที่ลงท้ายด้วย

/exec

นำไปเปิดใน Browser ก็สามารถเริ่มใช้งานได้

💻 SOURCE CODE โปรแกรม

ต่อจากหัวข้อนี้ให้นำ Code ต้นฉบับทั้ง 4 ไฟล์ที่แนบไว้ ลง Blogger ตามลำดับนี้โดยตรง เพราะเป็นชุดเดียวกับระบบที่อธิบายข้างต้นและไม่ควรย่อหรือตัดฟังก์ชันออก:

1. Code.gs

ใช้ไฟล์ Code.gs ที่แนบมา ซึ่งเป็น Backend หลักทั้งหมดของระบบ ตั้งแต่การสร้างชีต CRUD, Settings, Lists, Drive Folder, lh3 และรายงาน

2. index.html

ใช้ไฟล์ index.html ที่แนบมา เป็นโครงสร้างหน้า Dashboard, Sidebar, CRUD Form, Report และ Settings

3. javascript.html

ใช้ไฟล์ javascript.html ที่แนบมา ทั้งไฟล์ รวม <script> เปิดและปิด เพื่อให้สามารถ Include เข้า index.html ได้โดยตรง

4. style.html

ใช้ไฟล์ style.html ที่แนบมา ทั้งไฟล์ รวม <style> เปิดและปิด ซึ่งมี Responsive UI, Loading, รูปแบบ A4 และ object-fit: contain สำหรับภาพ

📖 ขั้นตอนการใช้งาน

หลังติดตั้งเรียบร้อยแล้ว การใช้งานหลักแบ่งได้ดังนี้

1. Dashboard — ตรวจสอบจำนวนรายงานทั้งหมด รายงานวันนี้ รายงานเดือนนี้ และรายการที่พบปัญหา

2. บันทึกรายงาน — เลือกวันที่ กรอกชื่อผู้ปฏิบัติหน้าที่ เลือกตำแหน่ง ช่วงเวลา และจุดปฏิบัติหน้าที่

3. บันทึกรายละเอียด — กรอกเหตุการณ์ทั่วไป ปัญหาที่พบ การดำเนินการแก้ไข และข้อเสนอแนะ

4. เพิ่มภาพประกอบ — เลือกภาพได้สูงสุด 4 รูป ระบบจะย่อภาพให้อัตโนมัติก่อนอัปโหลด

5. บันทึก — กรอก Password สำหรับ CRUD จากนั้นระบบจะบันทึกข้อมูลลง Google Sheets และรูปภาพลง Google Drive

6. ข้อมูลรายงาน — สามารถค้นหา 👁️ ดูรายละเอียด ✏️ แก้ไข หรือ 🗑️ ลบข้อมูล

7. รายงาน / พิมพ์ — เลือกช่วงวันที่ กด Preview ตรวจสอบเอกสารบนหน้าจอ แล้วจึงสั่งพิมพ์

8. Settings — ผู้ดูแลระบบสามารถเปลี่ยนชื่อโรงเรียน โลโก้ ผู้พัฒนา Password และค่าต่าง ๆ ได้

💡 แนวทางนำไปประยุกต์ใช้

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

เพราะแกนหลักของโปรแกรมมีทั้ง CRUD + Google Sheets + Google Drive + Image Upload + Dashboard + Search + Report + Print + Settings อยู่แล้ว

❤️ สรุป

Daily Duty Report System (DDRS) ช่วยเปลี่ยนงานรายงานเวรจากเอกสารกระดาษมาเป็นระบบออนไลน์ สามารถบันทึกข้อมูลพร้อมภาพประกอบ ค้นหาย้อนหลัง แก้ไขข้อมูล ตรวจสอบปัญหา และจัดพิมพ์รายงานได้ในระบบเดียว

เหมาะสำหรับสถานศึกษาที่ต้องการเริ่มต้นพัฒนาระบบงานด้วย Google Apps Script โดยไม่จำเป็นต้องมี Server หรือฐานข้อมูลภายนอก