Prompt Library ครูนุ่มเดฟเทค
prompthub.krudevtech.com
prompthub.krudevtech.com
สำหรับครูและนักพัฒนา
ค้นพบ Prompt ที่หลากหลายเพื่อช่วยในการสอน การสร้างสื่อ การจัดการเรียนการสอน และการทำงานอย่างมีประสิทธิภาพ
พบ 85 รายการ
บทบาท (Role)
คุณคือ Senior Full Stack Developer และ UX/UI Designer ที่เชี่ยวชาญ
- Google Apps Script
- HTML5
- CSS3
- JavaScript ES6
- Google Sheets
- Chart.js
- DataTables
- Bootstrap 5
มีประสบการณ์พัฒนาระบบ Dashboard สำหรับหน่วยงานราชการ โรงเรียน และองค์กรขนาดใหญ่
------------------------------------------------
งานที่ต้องการ
สร้างระบบ Dashboard สำหรับหน่วยงานราชการ
โดยใช้
Google Apps Script
เป็น Backend
Google Sheet
เป็นฐานข้อมูล
สามารถนำเข้าข้อมูลจากไฟล์ CSV ได้
ระบบทั้งหมดต้อง Responsive รองรับ
- Desktop
- Tablet
- Mobile
------------------------------------------------
โครงสร้างไฟล์
โปรดสร้างไฟล์ทั้งหมด ได้แก่
Code.gs
Index.html
Sidebar.html
Header.html
Footer.html
Dashboard.html
ImportCSV.html
DataTable.html
Chart.html
Style.html
Script.html
README.md
พร้อมอธิบายทุกไฟล์
------------------------------------------------
หน้า Dashboard
หน้าแรกแสดง
การ์ดสรุปข้อมูล (Summary Card)
เช่น
จำนวนข้อมูลทั้งหมด
จำนวนหน่วยงาน
จำนวนบุคลากร
จำนวนโครงการ
จำนวนงบประมาณ
จำนวนผู้รับบริการ
พร้อม Animation
------------------------------------------------
เมนูด้านซ้าย
Dashboard
นำเข้าข้อมูล CSV
ตารางข้อมูล
กราฟสถิติ
รายงาน
Export Excel
Export PDF
ตั้งค่าระบบ
------------------------------------------------
Dashboard
แสดง
Card Summary
Line Chart
Bar Chart
Pie Chart
Doughnut Chart
Radar Chart
Area Chart
Chart.js
------------------------------------------------
ตารางข้อมูล
ใช้ DataTables
สามารถ
Search
Sort
Pagination
Export Excel
Export CSV
Export PDF
Print
Responsive
Freeze Header
------------------------------------------------
Import CSV
สามารถ Upload CSV
Drag & Drop
Browse File
Preview ก่อนนำเข้า
Import
Update
Replace Data
Append Data
แสดง Progress
Loading
Import Success
Import Error
------------------------------------------------
โครงสร้างข้อมูล CSV
ตัวอย่าง
ลำดับ
ปีงบประมาณ
จังหวัด
อำเภอ
หน่วยงาน
ประเภท
โครงการ
งบประมาณ
จำนวนผู้รับบริการ
ผู้รับผิดชอบ
วันที่
สถานะ
หมายเหตุ
ระบบต้องอ่าน Header อัตโนมัติ
------------------------------------------------
Filter Dashboard
ปีงบประมาณ
จังหวัด
อำเภอ
หน่วยงาน
ประเภท
สถานะ
ช่วงวันที่
ค้นหาคำ
ทุก Filter ต้องทำงานแบบ Real Time
------------------------------------------------
กราฟ
Chart.js
Bar
Line
Pie
Radar
Polar Area
Doughnut
Bubble
Scatter
ทุกกราฟเปลี่ยนตาม Filter
------------------------------------------------
Theme
Modern Government Dashboard
สีหลัก
Blue
Indigo
White
Gray
Material Design
Glassmorphism
Shadow
Rounded
Hover Effect
Animation
------------------------------------------------
Header
โลโก้หน่วยงาน
ชื่อหน่วยงาน
ชื่อ Dashboard
วันที่ปัจจุบัน
เวลาปัจจุบัน
User Login
Notification
------------------------------------------------
Footer
Copyright
Developed by
Version
Last Update
------------------------------------------------
Google Apps Script
ต้องมีฟังก์ชัน
doGet()
include()
importCSV()
readCSV()
saveToSheet()
getDashboard()
getChartData()
getSummary()
getTable()
searchData()
filterData()
exportExcel()
exportPDF()
deleteData()
updateData()
------------------------------------------------
Google Sheet
เมื่อ Import
ถ้ายังไม่มี Sheet
สร้างให้อัตโนมัติ
ถ้ามีแล้ว
สามารถเลือก
Append
Replace
------------------------------------------------
UI
Bootstrap 5
Google Icons
SweetAlert2
Loading
Toast
Confirm Dialog
Progress Bar
Skeleton Loading
------------------------------------------------
Dashboard ต้องสวยเหมือน
Google Analytics
Looker Studio
Power BI
------------------------------------------------
คุณสมบัติพิเศษ
Dark Mode
Light Mode
Responsive
Fast Loading
Lazy Load
Animated Counter
Cards Animation
Chart Animation
------------------------------------------------
ความปลอดภัย
ตรวจสอบสิทธิ์ผู้ใช้
Session
Input Validation
ป้องกันข้อมูลซ้ำ
ตรวจสอบ CSV Format
------------------------------------------------
ผลลัพธ์
สร้าง Source Code ครบทุกไฟล์
อธิบายทุกไฟล์
อธิบายวิธี Deploy
อธิบายการเชื่อม Google Sheet
อธิบายการใช้งาน
อธิบายการ Import CSV
พร้อมโค้ดที่สามารถ Copy ไปใช้งานได้ทันที
บทบาท (Role)
คุณคือ Senior Full Stack Developer และ UX/UI Designer ที่เชี่ยวชาญ
- Google Apps Script
- HTML5
- CSS3
- JavaScript ES6
- Google Sheets
- Chart.js
- DataTables
- Bootstrap 5
มีประสบการณ์พัฒนาระบบ Dashboard สำหรับหน่วยงานราชการ โรงเรียน และองค์กรขนาดใหญ่
------------------------------------------------
งานที่ต้องการ
สร้างระบบ Dashboard สำหรับหน่วยงานราชการ
โดยใช้
Google Apps Script
เป็น Backend
Google Sheet
เป็นฐานข้อมูล
สามารถนำเข้าข้อมูลจากไฟล์ CSV ได้
ระบบทั้งหมดต้อง Responsive รองรับ
- Desktop
- Tablet
- Mobile
------------------------------------------------
โครงสร้างไฟล์
โปรดสร้างไฟล์ทั้งหมด ได้แก่
Code.gs
Index.html
Sidebar.html
Header.html
Footer.html
Dashboard.html
ImportCSV.html
DataTable.html
Chart.html
Style.html
Script.html
README.md
พร้อมอธิบายทุกไฟล์
------------------------------------------------
หน้า Dashboard
หน้าแรกแสดง
การ์ดสรุปข้อมูล (Summary Card)
เช่น
จำนวนข้อมูลทั้งหมด
จำนวนหน่วยงาน
จำนวนบุคลากร
จำนวนโครงการ
จำนวนงบประมาณ
จำนวนผู้รับบริการ
พร้อม Animation
------------------------------------------------
เมนูด้านซ้าย
Dashboard
นำเข้าข้อมูล CSV
ตารางข้อมูล
กราฟสถิติ
รายงาน
Export Excel
Export PDF
ตั้งค่าระบบ
------------------------------------------------
Dashboard
แสดง
Card Summary
Line Chart
Bar Chart
Pie Chart
Doughnut Chart
Radar Chart
Area Chart
Chart.js
------------------------------------------------
ตารางข้อมูล
ใช้ DataTables
สามารถ
Search
Sort
Pagination
Export Excel
Export CSV
Export PDF
Print
Responsive
Freeze Header
------------------------------------------------
Import CSV
สามารถ Upload CSV
Drag & Drop
Browse File
Preview ก่อนนำเข้า
Import
Update
Replace Data
Append Data
แสดง Progress
Loading
Import Success
Import Error
------------------------------------------------
โครงสร้างข้อมูล CSV
ตัวอย่าง
ลำดับ
ปีงบประมาณ
จังหวัด
อำเภอ
หน่วยงาน
ประเภท
โครงการ
งบประมาณ
จำนวนผู้รับบริการ
ผู้รับผิดชอบ
วันที่
สถานะ
หมายเหตุ
ระบบต้องอ่าน Header อัตโนมัติ
------------------------------------------------
Filter Dashboard
ปีงบประมาณ
จังหวัด
อำเภอ
หน่วยงาน
ประเภท
สถานะ
ช่วงวันที่
ค้นหาคำ
ทุก Filter ต้องทำงานแบบ Real Time
------------------------------------------------
กราฟ
Chart.js
Bar
Line
Pie
Radar
Polar Area
Doughnut
Bubble
Scatter
ทุกกราฟเปลี่ยนตาม Filter
------------------------------------------------
Theme
Modern Government Dashboard
สีหลัก
Blue
Indigo
White
Gray
Material Design
Glassmorphism
Shadow
Rounded
Hover Effect
Animation
------------------------------------------------
Header
โลโก้หน่วยงาน
ชื่อหน่วยงาน
ชื่อ Dashboard
วันที่ปัจจุบัน
เวลาปัจจุบัน
User Login
Notification
------------------------------------------------
Footer
Copyright
Developed by
Version
Last Update
------------------------------------------------
Google Apps Script
ต้องมีฟังก์ชัน
doGet()
include()
importCSV()
readCSV()
saveToSheet()
getDashboard()
getChartData()
getSummary()
getTable()
searchData()
filterData()
exportExcel()
exportPDF()
deleteData()
updateData()
------------------------------------------------
Google Sheet
เมื่อ Import
ถ้ายังไม่มี Sheet
สร้างให้อัตโนมัติ
ถ้ามีแล้ว
สามารถเลือก
Append
Replace
------------------------------------------------
UI
Bootstrap 5
Google Icons
SweetAlert2
Loading
Toast
Confirm Dialog
Progress Bar
Skeleton Loading
------------------------------------------------
Dashboard ต้องสวยเหมือน
Google Analytics
Looker Studio
Power BI
------------------------------------------------
คุณสมบัติพิเศษ
Dark Mode
Light Mode
Responsive
Fast Loading
Lazy Load
Animated Counter
Cards Animation
Chart Animation
------------------------------------------------
ความปลอดภัย
ตรวจสอบสิทธิ์ผู้ใช้
Session
Input Validation
ป้องกันข้อมูลซ้ำ
ตรวจสอบ CSV Format
------------------------------------------------
ผลลัพธ์
สร้าง Source Code ครบทุกไฟล์
อธิบายทุกไฟล์
อธิบายวิธี Deploy
อธิบายการเชื่อม Google Sheet
อธิบายการใช้งาน
อธิบายการ Import CSV
พร้อมโค้ดที่สามารถ Copy ไปใช้งานได้ทันที
บทบาทของคุณ (Role):
คุณคือ Senior Full Stack Developer ผู้เชี่ยวชาญด้าน Google Apps Script (GAS), HTML5, CSS3, Bootstrap 5, JavaScript ES6, Google Workspace (Sheets & Drive) และ LINE Messaging API / LIFF
งานที่ต้องทำ (Task):
ให้สร้าง Web Application "ระบบแจ้งซ่อมออนไลน์ (Smart Maintenance System)" เป็นรูปแบบ Single-Page Application โดยรวมไฟล์ HTML, CSS, JavaScript ไว้ในไฟล์เดียวกันทั้งหมด และเขียนโค้ด Backend (Code.gs) ไว้ให้คัดลอกไปใช้งาน
ข้อกำหนดทางเทคนิค (Technical Requirements):
1. Frontend: HTML5, CSS3, Bootstrap 5, Font Awesome, SweetAlert2, Chart.js
2. Backend: Google Apps Script (GAS)
3. Database: Google Sheets (บันทึกข้อมูลแบบต่อแถวลงท้าย)
4. Storage: Google Drive (อัปโหลดรูปภาพแบบแปลงเป็น Base64 แล้วเซฟเป็นไฟล์)
5. Notification: LINE Messaging API ส่งการ์ดแจ้งเตือนแบบ Flex Message เข้า LINE OA
6. Identity: ใช้ LINE LIFF SDK เพื่อให้ผู้ใช้เข้าสู่ระบบและดึง `userId` กับ `displayName` อัตโนมัติ
โครงสร้างหน้าเว็บ (UI/UX - Single Page Application สลับแท็บด้วย JS):
1. แถบ Navigation: เมนูเปลี่ยนหน้า (แจ้งซ่อม, แดชบอร์ด, โค้ดหลังบ้าน) ธีมสีน้ำเงินเข้มสไตล์ Admin
2. แท็บ แจ้งซ่อม (ฟอร์ม):
- แสดงรูปโปรไฟล์และชื่อจาก LIFF เมื่อโหลดสำเร็จ
- ช่องกรอกข้อมูล: ชื่อ (ดึงจาก LIFF อัตโนมัติ), แผนก (Dropdown), รหัสอุปกรณ์, ระดับความเร่งด่วน (ปกติ, ปานกลาง, สูง), รายละเอียดอาการ (Textarea)
- ฟังก์ชันแนบรูปภาพ: กดคลิกเพื่อเลือกรูป แสดง Preview และแปลงรูปภาพนั้นเป็น Base64 String เพื่อเก็บใน hidden input
- ปุ่ม Submit: มีระบบป้องกันการกดซ้ำ และขึ้น Loading
3. แท็บ Dashboard:
- การ์ดสรุปสถิติ (3 ใบ): จำนวนรวม, รอดำเนินการ, เสร็จสิ้น
- กราฟ Chart.js (2 กราฟ): กราฟโดนัท (สถานะงานซ่อม) และกราฟแท่ง (จำนวนซ่อมแยกตามแผนก)
- ตารางรายการแจ้งซ่อม: แสดงข้อมูลดึงมาจาก Google Sheets มี Badge สีแบ่งตามสถานะและความเร่งด่วน
4. แท็บ โค้ดหลังบ้าน (GAS Setup):
- แสดงโค้ด Code.gs ฉบับสมบูรณ์ พร้อมปุ่มกดคัดลอก (Copy to clipboard) เพื่อให้นำไปติดตั้งง่าย
ฟังก์ชันการทำงานส่วน Backend (Code.gs):
1. `doGet(e)`: โหลดหน้าเว็บ Index.html พร้อมตั้ง viewport
2. `submitMaintenanceRequest(formObj)`:
- แปลง Base64 กลับเป็นไฟล์รูปและบันทึกลง Google Drive
- นำ URL รูป และข้อมูลอื่นๆ บันทึกลง Google Sheet
- สร้างรหัส Ticket ID (เช่น REQ-YYYYMMDDHHMMSS)
- เรียกใช้ฟังก์ชันส่ง LINE
3. `sendLineNotification(...)`:
- ส่ง Flex Message ด้วย `UrlFetchApp` แจ้งสถานะ แผนก อาการ และความเร่งด่วน (เปลี่ยนสีข้อความตามความเร่งด่วน) และมีปุ่มเปิดดูรูปภาพ
4. `getDashboardData()`: ดึงข้อมูลจาก Google Sheets ส่งกลับมาให้หน้าบ้านแสดงตารางและวาดกราฟ
เงื่อนไขพิเศษสำหรับการเขียนโค้ด:
- โค้ด HTML ทั้งหมดต้องอยู่ในแท็ก
\`\`\`\`html\`
- ให้เขียน JS ดักจับสภาพแวดล้อม: หากรันใน `google.script.run` ให้เชื่อมต่อฐานข้อมูลจริง แต่ถ้าไม่พบ (เช่นรันเปิดไฟล์ในเครื่องปกติ) ให้ใช้ `setTimeout` จำลองข้อมูล (Mock Data) แทนเพื่อไม่ให้หน้าจอพังตอน Preview
- อธิบายขั้นตอนการตั้งค่าหลังบ้าน (Sheet, Drive Folder, LINE Token, LIFF ID) ไว้ในหน้าเว็บหรือใต้โค้ดให้เข้าใจง่าย
บทบาทของคุณ (Role):
คุณคือ Senior Full Stack Developer ผู้เชี่ยวชาญด้าน Google Apps Script (GAS), HTML5, CSS3, Bootstrap 5, JavaScript ES6, Google Workspace (Sheets & Drive) และ LINE Messaging API / LIFF
งานที่ต้องทำ (Task):
ให้สร้าง Web Application "ระบบแจ้งซ่อมออนไลน์ (Smart Maintenance System)" เป็นรูปแบบ Single-Page Application โดยรวมไฟล์ HTML, CSS, JavaScript ไว้ในไฟล์เดียวกันทั้งหมด และเขียนโค้ด Backend (Code.gs) ไว้ให้คัดลอกไปใช้งาน
ข้อกำหนดทางเทคนิค (Technical Requirements):
1. Frontend: HTML5, CSS3, Bootstrap 5, Font Awesome, SweetAlert2, Chart.js
2. Backend: Google Apps Script (GAS)
3. Database: Google Sheets (บันทึกข้อมูลแบบต่อแถวลงท้าย)
4. Storage: Google Drive (อัปโหลดรูปภาพแบบแปลงเป็น Base64 แล้วเซฟเป็นไฟล์)
5. Notification: LINE Messaging API ส่งการ์ดแจ้งเตือนแบบ Flex Message เข้า LINE OA
6. Identity: ใช้ LINE LIFF SDK เพื่อให้ผู้ใช้เข้าสู่ระบบและดึง `userId` กับ `displayName` อัตโนมัติ
โครงสร้างหน้าเว็บ (UI/UX - Single Page Application สลับแท็บด้วย JS):
1. แถบ Navigation: เมนูเปลี่ยนหน้า (แจ้งซ่อม, แดชบอร์ด, โค้ดหลังบ้าน) ธีมสีน้ำเงินเข้มสไตล์ Admin
2. แท็บ แจ้งซ่อม (ฟอร์ม):
- แสดงรูปโปรไฟล์และชื่อจาก LIFF เมื่อโหลดสำเร็จ
- ช่องกรอกข้อมูล: ชื่อ (ดึงจาก LIFF อัตโนมัติ), แผนก (Dropdown), รหัสอุปกรณ์, ระดับความเร่งด่วน (ปกติ, ปานกลาง, สูง), รายละเอียดอาการ (Textarea)
- ฟังก์ชันแนบรูปภาพ: กดคลิกเพื่อเลือกรูป แสดง Preview และแปลงรูปภาพนั้นเป็น Base64 String เพื่อเก็บใน hidden input
- ปุ่ม Submit: มีระบบป้องกันการกดซ้ำ และขึ้น Loading
3. แท็บ Dashboard:
- การ์ดสรุปสถิติ (3 ใบ): จำนวนรวม, รอดำเนินการ, เสร็จสิ้น
- กราฟ Chart.js (2 กราฟ): กราฟโดนัท (สถานะงานซ่อม) และกราฟแท่ง (จำนวนซ่อมแยกตามแผนก)
- ตารางรายการแจ้งซ่อม: แสดงข้อมูลดึงมาจาก Google Sheets มี Badge สีแบ่งตามสถานะและความเร่งด่วน
4. แท็บ โค้ดหลังบ้าน (GAS Setup):
- แสดงโค้ด Code.gs ฉบับสมบูรณ์ พร้อมปุ่มกดคัดลอก (Copy to clipboard) เพื่อให้นำไปติดตั้งง่าย
ฟังก์ชันการทำงานส่วน Backend (Code.gs):
1. `doGet(e)`: โหลดหน้าเว็บ Index.html พร้อมตั้ง viewport
2. `submitMaintenanceRequest(formObj)`:
- แปลง Base64 กลับเป็นไฟล์รูปและบันทึกลง Google Drive
- นำ URL รูป และข้อมูลอื่นๆ บันทึกลง Google Sheet
- สร้างรหัส Ticket ID (เช่น REQ-YYYYMMDDHHMMSS)
- เรียกใช้ฟังก์ชันส่ง LINE
3. `sendLineNotification(...)`:
- ส่ง Flex Message ด้วย `UrlFetchApp` แจ้งสถานะ แผนก อาการ และความเร่งด่วน (เปลี่ยนสีข้อความตามความเร่งด่วน) และมีปุ่มเปิดดูรูปภาพ
4. `getDashboardData()`: ดึงข้อมูลจาก Google Sheets ส่งกลับมาให้หน้าบ้านแสดงตารางและวาดกราฟ
เงื่อนไขพิเศษสำหรับการเขียนโค้ด:
- โค้ด HTML ทั้งหมดต้องอยู่ในแท็ก
\`\`\`\`html\`
- ให้เขียน JS ดักจับสภาพแวดล้อม: หากรันใน `google.script.run` ให้เชื่อมต่อฐานข้อมูลจริง แต่ถ้าไม่พบ (เช่นรันเปิดไฟล์ในเครื่องปกติ) ให้ใช้ `setTimeout` จำลองข้อมูล (Mock Data) แทนเพื่อไม่ให้หน้าจอพังตอน Preview
- อธิบายขั้นตอนการตั้งค่าหลังบ้าน (Sheet, Drive Folder, LINE Token, LIFF ID) ไว้ในหน้าเว็บหรือใต้โค้ดให้เข้าใจง่าย
คุณเป็น Senior Full Stack Developer และ System Analyst
ช่วยสร้าง ระบบสารสนเทศหน่วยงาน (Organization Information System) แบบครบวงจร รองรับการใช้งานจริงของหน่วยงานราชการ โรงเรียน มหาวิทยาลัย หรือองค์กรเอกชน
Technology
ใช้
* PHP 8.2
* MySQL
* HTML5
* CSS3
* Bootstrap 5
* AdminLTE 3
* JavaScript
* jQuery
* SweetAlert2
* DataTables
* Chart.js
* Font Awesome
* PHPMailer
* mPDF
* PhpSpreadsheet
ออกแบบโค้ดแบบ MVC
แบ่ง
* Controller
* Model
* View
โค้ดต้องเป็นมาตรฐาน
มี Security
* SQL Injection
* XSS
* CSRF
* Password Hash
* Session Login
* Input Validation
⸻
Dashboard
Dashboard สวยงาม Modern
แสดง
* จำนวนบุคลากร
* จำนวนหน่วยงาน
* จำนวนข่าวประชาสัมพันธ์
* จำนวนเอกสาร
* จำนวนครุภัณฑ์
* จำนวนรถราชการ
* จำนวนผู้ใช้งาน
* จำนวนผู้เข้าชมเว็บไซต์
แสดงกราฟ
* บุคลากรแต่ละฝ่าย
* ข่าวย้อนหลัง
* งบประมาณ
* การใช้งานระบบ
* Login Report
Chart.js
⸻
ระบบ Login
รองรับ
Admin
Director
Manager
Officer
Staff
Guest
Login
Forgot Password
Reset Password
Remember Me
Google Login (Optional)
OTP Email
2FA
Log Login
Logout
⸻
ระบบผู้ใช้งาน
เพิ่ม
แก้ไข
ลบ
ค้นหา
กำหนดสิทธิ์
Reset Password
Upload รูป
Export Excel
Export PDF
Print
⸻
ระบบบุคลากร
ข้อมูล
รหัส
เลขบัตรประชาชน
ชื่อ
นามสกุล
เพศ
วันเกิด
อายุ
ตำแหน่ง
วิทยฐานะ
ระดับ
กลุ่มงาน
หน่วยงาน
เบอร์โทร
Email
Line ID
Facebook
ที่อยู่
วุฒิการศึกษา
ประวัติการทำงาน
ประวัติการอบรม
รูปภาพ
แนบไฟล์
⸻
ระบบหน่วยงาน
เพิ่ม
แก้ไข
ลบ
ค้นหา
ลำดับ
ชื่อหน่วยงาน
หัวหน้าหน่วยงาน
คำอธิบาย
Logo
สีประจำหน่วยงาน
⸻
ระบบข่าวประชาสัมพันธ์
เพิ่ม
แก้ไข
ลบ
หมวดหมู่
Tag
Banner
Gallery
Video
PDF
กำหนดวันเผยแพร่
ปักหมุดข่าว
SEO URL
Share Facebook
⸻
ระบบเอกสาร
รับหนังสือ
ส่งหนังสือ
เลขที่หนังสือ
วันที่
เรื่อง
ผู้ส่ง
ผู้รับ
สถานะ
ไฟล์ PDF
ค้นหา
Export
QR Code
Barcode
⸻
ระบบครุภัณฑ์
เลขครุภัณฑ์
ชื่อ
ประเภท
ยี่ห้อ
รุ่น
Serial
ราคา
ปีงบประมาณ
ห้อง
ผู้รับผิดชอบ
รูปภาพ
QR Code
Barcode
ยืมคืน
แจ้งซ่อม
ประวัติ
⸻
ระบบรถราชการ
ทะเบียน
รุ่น
ยี่ห้อ
สี
ประเภทรถ
ผู้รับผิดชอบ
ประกัน
ภาษี
ตรวจสภาพ
ประวัติซ่อม
จองรถ
อนุมัติ
ปฏิทินการใช้งาน
⸻
ระบบห้องประชุม
เพิ่มห้อง
รูปภาพ
จำนวนที่นั่ง
อุปกรณ์
จองห้อง
อนุมัติ
Calendar
Google Calendar
⸻
ระบบปฏิทิน
กิจกรรม
ประชุม
อบรม
วันหยุด
Google Calendar
FullCalendar
⸻
ระบบดาวน์โหลดเอกสาร
หมวดหมู่
ไฟล์
จำนวนดาวน์โหลด
Version
Upload
Preview PDF
⸻
ระบบประกาศ
Popup
Banner
Scrolling Text
Notification
⸻
ระบบแบบฟอร์มออนไลน์
สร้างแบบฟอร์มเองได้
Text
Textarea
Date
Time
Number
Dropdown
Checkbox
Radio
Upload File
Signature
Export Excel
PDF
⸻
ระบบร้องเรียน
ส่งเรื่อง
แนบไฟล์
ติดตามสถานะ
Admin ตอบกลับ
Email แจ้งเตือน
⸻
ระบบติดต่อเรา
Google Maps
เบอร์โทร
Email
Social
ฟอร์มติดต่อ
Captcha
⸻
ระบบรายงาน
รายงานทุกโมดูล
Export
PDF
Excel
CSV
Word
Print
Dashboard
⸻
ระบบแจ้งเตือน
Notification
Bell
Email
Line Notify (Optional)
Telegram (Optional)
⸻
ระบบเว็บไซต์
หน้าแรก
เกี่ยวกับเรา
วิสัยทัศน์
พันธกิจ
โครงสร้างองค์กร
ผู้บริหาร
บุคลากร
ข่าว
กิจกรรม
ดาวน์โหลด
FAQ
ติดต่อเรา
Responsive
SEO
⸻
ตั้งค่าระบบ
Logo
Favicon
ชื่อระบบ
ชื่อหน่วยงาน
ที่อยู่
โทรศัพท์
Email
SMTP
Theme
Dark Mode
Light Mode
ภาษา
ปีงบประมาณ
Backup Database
Restore Database
Maintenance Mode
⸻
ระบบ Log
Log Login
Log User
Log Delete
Log Edit
Log Export
Activity Log
Audit Trail
⸻
Database
ออกแบบ ER Diagram
MySQL
Primary Key
Foreign Key
Normalization
สร้าง SQL พร้อมใช้งาน
⸻
UI
Modern
Professional
Responsive
Bootstrap 5
AdminLTE 3
Sidebar
Mega Menu
Card
Modal
Animation
Loading
Skeleton
Dark Mode
Mobile Friendly
⸻
Dashboard Widget
Weather
Calendar
Clock
Announcement
Quick Menu
Recent Activity
Visitors
Statistics
Charts
⸻
Search
Global Search
Filter
Advanced Search
Auto Complete
⸻
API
REST API
JSON
JWT Authentication
Swagger Documentation
⸻
Security
CSRF
XSS
SQL Injection
Password Hash
Role Permission
Session Timeout
reCAPTCHA
HTTPS Ready
⸻
Backup
Auto Backup
Manual Backup
Restore
Download SQL
⸻
File Upload
PDF
DOCX
XLSX
ZIP
PNG
JPG
WEBP
MP4
จำกัดขนาดไฟล์
Rename File
Preview
⸻
AI Features
ค้นหาข้อมูลด้วย AI
สรุปรายงานด้วย AI
Chatbot ผู้ช่วยใช้งานระบบ
AI ช่วยเขียนข่าว
AI ช่วยตอบคำถาม
AI วิเคราะห์ข้อมูล Dashboard
⸻
ผลลัพธ์ที่ต้องการ
ให้สร้างระบบทั้งหมดแบบพร้อมใช้งานจริง
ประกอบด้วย
* โครงสร้างโฟลเดอร์ทั้งหมด
* Database SQL
* ER Diagram
* Source Code ทุกไฟล์
* Controller
* Model
* View
* Config
* Assets
* Login
* Dashboard
* CRUD ทุกโมดูล
* Export PDF
* Export Excel
* Responsive Design
* API
* คู่มือการติดตั้ง
* คู่มือการใช้งาน
* คู่มือผู้ดูแลระบบ
ทุกหน้าต้องมี UI ระดับมืออาชีพ ใช้งานง่าย โหลดเร็ว รองรับมือถือ และสามารถนำไป Deploy บน Shared Hosting หรือ VPS ได้ทันที
คุณเป็น Senior Full Stack Developer และ System Analyst
ช่วยสร้าง ระบบสารสนเทศหน่วยงาน (Organization Information System) แบบครบวงจร รองรับการใช้งานจริงของหน่วยงานราชการ โรงเรียน มหาวิทยาลัย หรือองค์กรเอกชน
Technology
ใช้
* PHP 8.2
* MySQL
* HTML5
* CSS3
* Bootstrap 5
* AdminLTE 3
* JavaScript
* jQuery
* SweetAlert2
* DataTables
* Chart.js
* Font Awesome
* PHPMailer
* mPDF
* PhpSpreadsheet
ออกแบบโค้ดแบบ MVC
แบ่ง
* Controller
* Model
* View
โค้ดต้องเป็นมาตรฐาน
มี Security
* SQL Injection
* XSS
* CSRF
* Password Hash
* Session Login
* Input Validation
⸻
Dashboard
Dashboard สวยงาม Modern
แสดง
* จำนวนบุคลากร
* จำนวนหน่วยงาน
* จำนวนข่าวประชาสัมพันธ์
* จำนวนเอกสาร
* จำนวนครุภัณฑ์
* จำนวนรถราชการ
* จำนวนผู้ใช้งาน
* จำนวนผู้เข้าชมเว็บไซต์
แสดงกราฟ
* บุคลากรแต่ละฝ่าย
* ข่าวย้อนหลัง
* งบประมาณ
* การใช้งานระบบ
* Login Report
Chart.js
⸻
ระบบ Login
รองรับ
Admin
Director
Manager
Officer
Staff
Guest
Login
Forgot Password
Reset Password
Remember Me
Google Login (Optional)
OTP Email
2FA
Log Login
Logout
⸻
ระบบผู้ใช้งาน
เพิ่ม
แก้ไข
ลบ
ค้นหา
กำหนดสิทธิ์
Reset Password
Upload รูป
Export Excel
Export PDF
Print
⸻
ระบบบุคลากร
ข้อมูล
รหัส
เลขบัตรประชาชน
ชื่อ
นามสกุล
เพศ
วันเกิด
อายุ
ตำแหน่ง
วิทยฐานะ
ระดับ
กลุ่มงาน
หน่วยงาน
เบอร์โทร
Email
Line ID
Facebook
ที่อยู่
วุฒิการศึกษา
ประวัติการทำงาน
ประวัติการอบรม
รูปภาพ
แนบไฟล์
⸻
ระบบหน่วยงาน
เพิ่ม
แก้ไข
ลบ
ค้นหา
ลำดับ
ชื่อหน่วยงาน
หัวหน้าหน่วยงาน
คำอธิบาย
Logo
สีประจำหน่วยงาน
⸻
ระบบข่าวประชาสัมพันธ์
เพิ่ม
แก้ไข
ลบ
หมวดหมู่
Tag
Banner
Gallery
Video
PDF
กำหนดวันเผยแพร่
ปักหมุดข่าว
SEO URL
Share Facebook
⸻
ระบบเอกสาร
รับหนังสือ
ส่งหนังสือ
เลขที่หนังสือ
วันที่
เรื่อง
ผู้ส่ง
ผู้รับ
สถานะ
ไฟล์ PDF
ค้นหา
Export
QR Code
Barcode
⸻
ระบบครุภัณฑ์
เลขครุภัณฑ์
ชื่อ
ประเภท
ยี่ห้อ
รุ่น
Serial
ราคา
ปีงบประมาณ
ห้อง
ผู้รับผิดชอบ
รูปภาพ
QR Code
Barcode
ยืมคืน
แจ้งซ่อม
ประวัติ
⸻
ระบบรถราชการ
ทะเบียน
รุ่น
ยี่ห้อ
สี
ประเภทรถ
ผู้รับผิดชอบ
ประกัน
ภาษี
ตรวจสภาพ
ประวัติซ่อม
จองรถ
อนุมัติ
ปฏิทินการใช้งาน
⸻
ระบบห้องประชุม
เพิ่มห้อง
รูปภาพ
จำนวนที่นั่ง
อุปกรณ์
จองห้อง
อนุมัติ
Calendar
Google Calendar
⸻
ระบบปฏิทิน
กิจกรรม
ประชุม
อบรม
วันหยุด
Google Calendar
FullCalendar
⸻
ระบบดาวน์โหลดเอกสาร
หมวดหมู่
ไฟล์
จำนวนดาวน์โหลด
Version
Upload
Preview PDF
⸻
ระบบประกาศ
Popup
Banner
Scrolling Text
Notification
⸻
ระบบแบบฟอร์มออนไลน์
สร้างแบบฟอร์มเองได้
Text
Textarea
Date
Time
Number
Dropdown
Checkbox
Radio
Upload File
Signature
Export Excel
PDF
⸻
ระบบร้องเรียน
ส่งเรื่อง
แนบไฟล์
ติดตามสถานะ
Admin ตอบกลับ
Email แจ้งเตือน
⸻
ระบบติดต่อเรา
Google Maps
เบอร์โทร
Email
Social
ฟอร์มติดต่อ
Captcha
⸻
ระบบรายงาน
รายงานทุกโมดูล
Export
PDF
Excel
CSV
Word
Print
Dashboard
⸻
ระบบแจ้งเตือน
Notification
Bell
Email
Line Notify (Optional)
Telegram (Optional)
⸻
ระบบเว็บไซต์
หน้าแรก
เกี่ยวกับเรา
วิสัยทัศน์
พันธกิจ
โครงสร้างองค์กร
ผู้บริหาร
บุคลากร
ข่าว
กิจกรรม
ดาวน์โหลด
FAQ
ติดต่อเรา
Responsive
SEO
⸻
ตั้งค่าระบบ
Logo
Favicon
ชื่อระบบ
ชื่อหน่วยงาน
ที่อยู่
โทรศัพท์
Email
SMTP
Theme
Dark Mode
Light Mode
ภาษา
ปีงบประมาณ
Backup Database
Restore Database
Maintenance Mode
⸻
ระบบ Log
Log Login
Log User
Log Delete
Log Edit
Log Export
Activity Log
Audit Trail
⸻
Database
ออกแบบ ER Diagram
MySQL
Primary Key
Foreign Key
Normalization
สร้าง SQL พร้อมใช้งาน
⸻
UI
Modern
Professional
Responsive
Bootstrap 5
AdminLTE 3
Sidebar
Mega Menu
Card
Modal
Animation
Loading
Skeleton
Dark Mode
Mobile Friendly
⸻
Dashboard Widget
Weather
Calendar
Clock
Announcement
Quick Menu
Recent Activity
Visitors
Statistics
Charts
⸻
Search
Global Search
Filter
Advanced Search
Auto Complete
⸻
API
REST API
JSON
JWT Authentication
Swagger Documentation
⸻
Security
CSRF
XSS
SQL Injection
Password Hash
Role Permission
Session Timeout
reCAPTCHA
HTTPS Ready
⸻
Backup
Auto Backup
Manual Backup
Restore
Download SQL
⸻
File Upload
PDF
DOCX
XLSX
ZIP
PNG
JPG
WEBP
MP4
จำกัดขนาดไฟล์
Rename File
Preview
⸻
AI Features
ค้นหาข้อมูลด้วย AI
สรุปรายงานด้วย AI
Chatbot ผู้ช่วยใช้งานระบบ
AI ช่วยเขียนข่าว
AI ช่วยตอบคำถาม
AI วิเคราะห์ข้อมูล Dashboard
⸻
ผลลัพธ์ที่ต้องการ
ให้สร้างระบบทั้งหมดแบบพร้อมใช้งานจริง
ประกอบด้วย
* โครงสร้างโฟลเดอร์ทั้งหมด
* Database SQL
* ER Diagram
* Source Code ทุกไฟล์
* Controller
* Model
* View
* Config
* Assets
* Login
* Dashboard
* CRUD ทุกโมดูล
* Export PDF
* Export Excel
* Responsive Design
* API
* คู่มือการติดตั้ง
* คู่มือการใช้งาน
* คู่มือผู้ดูแลระบบ
ทุกหน้าต้องมี UI ระดับมืออาชีพ ใช้งานง่าย โหลดเร็ว รองรับมือถือ และสามารถนำไป Deploy บน Shared Hosting หรือ VPS ได้ทันที
"จงสร้างและออกแบบระบบปฏิทินกิจกรรมหน่วยงาน (Public Calendar) โดยใช้ Google Apps Script ทำงานร่วมกับ Google Sheets โดยมีรายละเอียดความต้องการดังต่อไปนี้:
1. ข้อกำหนดทางเทคนิค (Tech Stack):
ใช้ไลบรารี FullCalendar.js สำหรับแสดงผลปฏิทิน
ใช้ Bootstrap 5 สำหรับออกแบบ UI ให้สวยงาม ทันสมัย และรองรับการแสดงผลบนมือถือ (Responsive)
ใช้การเขียนโค้ดแบบฝั่ง Server (Code.gs) และฝั่ง Client (Index.html)
2. ฟีเจอร์ที่ต้องการ (Features):
ระบบสามารถดึงข้อมูลจาก Google Sheets (ชื่อกิจกรรม, วันเวลาเริ่มต้น, วันเวลาสิ้นสุด, รายละเอียด, สีของป้ายกิจกรรม) มาแสดงบนปฏิทินได้
มีปุ่ม "เพิ่มกิจกรรม" เปิดเป็น Modal Form ให้ผู้ใช้กรอกข้อมูล
เมื่อกดบันทึก ให้ข้อมูลถูกส่งไปเพิ่มในแถวใหม่ของ Google Sheets ทันที (พร้อมอัปเดตปฏิทินบนหน้าเว็บโดยไม่ต้องรีเฟรชหน้า)
คลิกที่กิจกรรมบนปฏิทินเพื่อดูรายละเอียดเพิ่มเติมแบบ Modal ได้
3. สิ่งที่ต้องการให้ตอบกลับ (Deliverables):
โค้ดทั้งหมด: Code.gs และ Index.html พร้อมคอมเมนต์อธิบายโค้ด
การตั้งค่า Google Sheets: อธิบายวิธีตั้งชื่อแผ่นงานและระบุหัวคอลัมน์ที่ต้องใช้
ข้อมูลจำลอง (Mock Data): ขอตารางข้อมูลตัวอย่างประมาณ 5 แถว เพื่อนำไปกรอกทดสอบ
วิธีติดตั้ง (Deployment): อธิบายขั้นตอนการนำไปใช้งาน (Deploy as Web App)
สรุประบบ (Overview): สรุปภาพรวมสถาปัตยกรรมของระบบ (System Architecture) และเส้นทางการไหลของข้อมูล (Data Flow) แบบเข้าใจง่าย"
"จงสร้างและออกแบบระบบปฏิทินกิจกรรมหน่วยงาน (Public Calendar) โดยใช้ Google Apps Script ทำงานร่วมกับ Google Sheets โดยมีรายละเอียดความต้องการดังต่อไปนี้:
1. ข้อกำหนดทางเทคนิค (Tech Stack):
ใช้ไลบรารี FullCalendar.js สำหรับแสดงผลปฏิทิน
ใช้ Bootstrap 5 สำหรับออกแบบ UI ให้สวยงาม ทันสมัย และรองรับการแสดงผลบนมือถือ (Responsive)
ใช้การเขียนโค้ดแบบฝั่ง Server (Code.gs) และฝั่ง Client (Index.html)
2. ฟีเจอร์ที่ต้องการ (Features):
ระบบสามารถดึงข้อมูลจาก Google Sheets (ชื่อกิจกรรม, วันเวลาเริ่มต้น, วันเวลาสิ้นสุด, รายละเอียด, สีของป้ายกิจกรรม) มาแสดงบนปฏิทินได้
มีปุ่ม "เพิ่มกิจกรรม" เปิดเป็น Modal Form ให้ผู้ใช้กรอกข้อมูล
เมื่อกดบันทึก ให้ข้อมูลถูกส่งไปเพิ่มในแถวใหม่ของ Google Sheets ทันที (พร้อมอัปเดตปฏิทินบนหน้าเว็บโดยไม่ต้องรีเฟรชหน้า)
คลิกที่กิจกรรมบนปฏิทินเพื่อดูรายละเอียดเพิ่มเติมแบบ Modal ได้
3. สิ่งที่ต้องการให้ตอบกลับ (Deliverables):
โค้ดทั้งหมด: Code.gs และ Index.html พร้อมคอมเมนต์อธิบายโค้ด
การตั้งค่า Google Sheets: อธิบายวิธีตั้งชื่อแผ่นงานและระบุหัวคอลัมน์ที่ต้องใช้
ข้อมูลจำลอง (Mock Data): ขอตารางข้อมูลตัวอย่างประมาณ 5 แถว เพื่อนำไปกรอกทดสอบ
วิธีติดตั้ง (Deployment): อธิบายขั้นตอนการนำไปใช้งาน (Deploy as Web App)
สรุประบบ (Overview): สรุปภาพรวมสถาปัตยกรรมของระบบ (System Architecture) และเส้นทางการไหลของข้อมูล (Data Flow) แบบเข้าใจง่าย"
ช่วยเขียนโค้ดสำหรับ "ระบบจองห้องประชุมออนไลน์" (Meeting Room Booking System) โดยใช้ Google Apps Script ทำงานร่วมกับ Google Sheets ให้หน่อยครับ ระบบต้องเป็นแบบ Single Page Application (SPA) ประกอบด้วยไฟล์ Code.gs และ index.html
ข้อกำหนดของระบบมีดังนี้:
1. โครงสร้าง Database (Google Sheets)
- เมื่อรันระบบครั้งแรก ให้สคริปต์ตรวจสอบว่ามีชีตชื่อ "Bookings" หรือไม่ ถ้าไม่มีให้สร้างใหม่
- กำหนด Header ของชีตดังนี้: ['ID', 'ชื่อผู้จอง', 'ห้องประชุม', 'วันที่', 'เวลาเริ่ม', 'เวลาสิ้นสุด', 'วัตถุประสงค์', 'เวลาที่บันทึก', 'สถานะ']
2. ข้อกำหนดฝั่ง Backend (Code.gs)
- มีฟังก์ชัน doGet() สำหรับ render หน้าเว็บแบบ ALLOWALL
- ฟังก์ชัน getBookings(): ดึงข้อมูลจากชีตเพื่อส่งให้ Frontend **สำคัญมาก:** ต้องมีการแปลงค่าเวลาจาก Google Sheets ให้อยู่ในรูปแบบ String 'HH:mm' และวันที่เป็น 'YYYY-MM-DD' เพื่อป้องกันบั๊กเวลาส่งข้อมูลไปแสดงผลในปฏิทิน
- ฟังก์ชัน addBooking(): รับข้อมูลจากฟอร์มมาบันทึก
- **Conflict Checking:** ในฟังก์ชัน addBooking ต้องมีการเช็คเวลาทับซ้อน หากผู้ใช้เลือกห้องเดียวกัน วันเดียวกัน และมีเวลาคาบเกี่ยวกับการจองที่มีอยู่แล้ว ให้ return error กลับไปและไม่อนุญาตให้บันทึก
3. ข้อกำหนดฝั่ง Frontend (index.html)
- การออกแบบ: ใช้ Tailwind CSS (ผ่าน CDN), ใช้ฟอนต์ Google Fonts (Kanit), และ FontAwesome (Icons) แบบ Responsive หน้าจอมือถือ
- Layout แบ่งเป็น 2 ส่วน (Grid):
- ด้านซ้าย/ด้านบน: "ฟอร์มจองห้องประชุม" (ชื่อ, เลือกห้อง [Room A, Room B, Boardroom], วันที่, เวลาเริ่ม, เวลาสิ้นสุด, วัตถุประสงค์)
- ด้านขวา/ด้านล่าง: "ปฏิทินแสดงการจอง" ใช้ไลบรารี FullCalendar (ผ่าน CDN)
- UX/UI Interactivity:
- ไม่ใช้ alert() ธรรมดา ให้สร้าง Custom Toast Notification (มุมขวาล่าง) สีเขียวสำหรับสำเร็จ สีแดงสำหรับ error
- ปุ่ม Submit ต้องมี Loading Spinner และ disable ระหว่างรอ Google Apps Script ประมวลผล
- ฟอร์มตรวจสอบขั้นพื้นฐาน: เวลาสิ้นสุดต้องมากกว่าเวลาเริ่ม และวันที่ต้องไม่ใช่อดีต
- เมื่อบันทึกสำเร็จ ให้ดึงข้อมูลมาอัปเดตปฏิทินใหม่ทันทีโดยที่หน้าเว็บไม่ต้อง Refresh (ผ่าน google.script.run)
- การทำงานของ FullCalendar:
- นำข้อมูลจากฝั่ง Backend มา render เป็น Event บนปฏิทิน
- ตั้งค่าแถบสี (Background Color) ของ Event ตามชื่อห้องให้แตกต่างกัน
- เมื่อผู้ใช้ "คลิก" ที่ Event บนปฏิทิน ให้เปิดหน้าต่าง Modal (Tailwind Modal) ขึ้นมาตรงกลางจอ เพื่อแสดงรายละเอียด (ชื่อผู้จอง, ห้อง, เวลา, วัตถุประสงค์) พร้อมปุ่มปิด Modal
กรุณาเขียนโค้ดออกมาให้ครบถ้วน พร้อมใช้งาน และแยกไฟล์ Code.gs กับ index.html ออกจากกันอย่างชัดเจน โค้ดควรมีการคอมเมนต์อธิบายภาษาไทยในจุดสำคัญด้วย
ช่วยเขียนโค้ดสำหรับ "ระบบจองห้องประชุมออนไลน์" (Meeting Room Booking System) โดยใช้ Google Apps Script ทำงานร่วมกับ Google Sheets ให้หน่อยครับ ระบบต้องเป็นแบบ Single Page Application (SPA) ประกอบด้วยไฟล์ Code.gs และ index.html
ข้อกำหนดของระบบมีดังนี้:
1. โครงสร้าง Database (Google Sheets)
- เมื่อรันระบบครั้งแรก ให้สคริปต์ตรวจสอบว่ามีชีตชื่อ "Bookings" หรือไม่ ถ้าไม่มีให้สร้างใหม่
- กำหนด Header ของชีตดังนี้: ['ID', 'ชื่อผู้จอง', 'ห้องประชุม', 'วันที่', 'เวลาเริ่ม', 'เวลาสิ้นสุด', 'วัตถุประสงค์', 'เวลาที่บันทึก', 'สถานะ']
2. ข้อกำหนดฝั่ง Backend (Code.gs)
- มีฟังก์ชัน doGet() สำหรับ render หน้าเว็บแบบ ALLOWALL
- ฟังก์ชัน getBookings(): ดึงข้อมูลจากชีตเพื่อส่งให้ Frontend **สำคัญมาก:** ต้องมีการแปลงค่าเวลาจาก Google Sheets ให้อยู่ในรูปแบบ String 'HH:mm' และวันที่เป็น 'YYYY-MM-DD' เพื่อป้องกันบั๊กเวลาส่งข้อมูลไปแสดงผลในปฏิทิน
- ฟังก์ชัน addBooking(): รับข้อมูลจากฟอร์มมาบันทึก
- **Conflict Checking:** ในฟังก์ชัน addBooking ต้องมีการเช็คเวลาทับซ้อน หากผู้ใช้เลือกห้องเดียวกัน วันเดียวกัน และมีเวลาคาบเกี่ยวกับการจองที่มีอยู่แล้ว ให้ return error กลับไปและไม่อนุญาตให้บันทึก
3. ข้อกำหนดฝั่ง Frontend (index.html)
- การออกแบบ: ใช้ Tailwind CSS (ผ่าน CDN), ใช้ฟอนต์ Google Fonts (Kanit), และ FontAwesome (Icons) แบบ Responsive หน้าจอมือถือ
- Layout แบ่งเป็น 2 ส่วน (Grid):
- ด้านซ้าย/ด้านบน: "ฟอร์มจองห้องประชุม" (ชื่อ, เลือกห้อง [Room A, Room B, Boardroom], วันที่, เวลาเริ่ม, เวลาสิ้นสุด, วัตถุประสงค์)
- ด้านขวา/ด้านล่าง: "ปฏิทินแสดงการจอง" ใช้ไลบรารี FullCalendar (ผ่าน CDN)
- UX/UI Interactivity:
- ไม่ใช้ alert() ธรรมดา ให้สร้าง Custom Toast Notification (มุมขวาล่าง) สีเขียวสำหรับสำเร็จ สีแดงสำหรับ error
- ปุ่ม Submit ต้องมี Loading Spinner และ disable ระหว่างรอ Google Apps Script ประมวลผล
- ฟอร์มตรวจสอบขั้นพื้นฐาน: เวลาสิ้นสุดต้องมากกว่าเวลาเริ่ม และวันที่ต้องไม่ใช่อดีต
- เมื่อบันทึกสำเร็จ ให้ดึงข้อมูลมาอัปเดตปฏิทินใหม่ทันทีโดยที่หน้าเว็บไม่ต้อง Refresh (ผ่าน google.script.run)
- การทำงานของ FullCalendar:
- นำข้อมูลจากฝั่ง Backend มา render เป็น Event บนปฏิทิน
- ตั้งค่าแถบสี (Background Color) ของ Event ตามชื่อห้องให้แตกต่างกัน
- เมื่อผู้ใช้ "คลิก" ที่ Event บนปฏิทิน ให้เปิดหน้าต่าง Modal (Tailwind Modal) ขึ้นมาตรงกลางจอ เพื่อแสดงรายละเอียด (ชื่อผู้จอง, ห้อง, เวลา, วัตถุประสงค์) พร้อมปุ่มปิด Modal
กรุณาเขียนโค้ดออกมาให้ครบถ้วน พร้อมใช้งาน และแยกไฟล์ Code.gs กับ index.html ออกจากกันอย่างชัดเจน โค้ดควรมีการคอมเมนต์อธิบายภาษาไทยในจุดสำคัญด้วย
ทำหน้าที่เป็น Full Stack Web Developer และผู้เชี่ยวชาญด้าน Google Apps Script โปรดสร้าง "ระบบบริหารจัดการครุภัณฑ์ (Equipment Management System)" โดยใช้ Google Sheets เป็นฐานข้อมูล
ข้อกำหนดของระบบ:
1. เทคโนโลยีที่ใช้:
- Frontend: HTML, CSS, JavaScript (เขียนรวมในไฟล์เดียว) โดยใช้ Bootstrap 5 (CDN) และ Bootstrap Icons
- Backend: Google Apps Script (Code.gs)
- QR Code: ใช้ไลบรารี qrcodejs (CDN)
2. โครงสร้างไฟล์ที่ต้องการ:
- ไฟล์ 1: `index.html` (สำหรับ Frontend ทั้งหมด)
- ไฟล์ 2: `Code.gs` (สำหรับ Google Apps Script)
3. ฟีเจอร์ของแอปพลิเคชัน (Frontend - Single Page Application):
ออกแบบให้มี Navbar ด้านบน และมี 3 เมนูหลักที่สามารถสลับหน้าจอ (ซ่อน/แสดง) ได้ด้วย JavaScript:
3.1) หน้า "เพิ่มครุภัณฑ์":
- มีฟอร์มรับข้อมูล: รหัสครุภัณฑ์, ชื่อรายการ, หมวดหมู่ (Dropdown), วันที่รับเข้า, สถานที่ตั้ง, ผู้รับผิดชอบ และ สถานะ (ใช้งานปกติ, ส่งซ่อม, ชำรุด)
- เมื่อกด "บันทึก" ให้แสดง Loading Overlay
- ส่งข้อมูลไปที่ Backend ด้วยคำสั่ง `google.script.run`
- เมื่อบันทึกสำเร็จ ให้ซ่อนฟอร์ม แล้วแสดงหน้าต่าง "ผลลัพธ์" ที่มี QR Code (สร้างจาก URL ปัจจุบันต่อท้ายด้วย ?view=รหัสครุภัณฑ์) พร้อมปุ่มสำหรับ "พิมพ์ QR Code" (Print) และปุ่ม "เพิ่มรายการใหม่"
3.2) หน้า "รายการครุภัณฑ์":
- แสดงตารางข้อมูลครุภัณฑ์ทั้งหมด โดยดึงข้อมูลจาก Backend ด้วย `google.script.run`
- คอลัมน์สถานะ ให้ใช้ Badge สีของ Bootstrap (เช่น สีเขียว=ใช้งานปกติ, สีเหลือง=ส่งซ่อม, สีแดง=ชำรุด)
- ในคอลัมน์สุดท้ายของตาราง ให้มีปุ่มไอคอน QR Code เพื่อกดดูและพิมพ์ QR Code ของครุภัณฑ์ชิ้นนั้นๆ ได้แบบย้อนหลัง
3.3) หน้า "สแกน QR":
- ออกแบบ UI ให้ดูเหมือนพื้นที่สำหรับเปิดกล้อง (มีไอคอนกล้องตรงกลาง)
- ทำปุ่ม "จำลองการสแกน" โดยใช้ JavaScript `prompt()` เพื่อรับค่ารหัสครุภัณฑ์จำลอง และแสดง `alert()` แจ้งเตือน
4. ฟีเจอร์ของ Backend (Code.gs):
- มีฟังก์ชัน `doGet(e)` สำหรับ render หน้าเว็บ (ตั้งค่า SandboxMode.IFRAME)
- มีฟังก์ชัน `addEquipmentData(data)` สำหรับบันทึกข้อมูลลง Google Sheet ที่ชื่อแท็บว่า "Data" (ต่อท้ายด้วยคอลัมน์ Timestamp)
- มีฟังก์ชัน `getEquipmentData()` สำหรับอ่านข้อมูลทั้งหมดจาก Sheet ส่งกลับไปให้ Frontend
5. การออกแบบ (UI/UX):
- เน้นความสวยงาม ทันสมัย สะอาดตา (Clean Design) ขอบมน (border-radius) และมีการใช้ Box-shadow เล็กน้อย
- รองรับการใช้งานบนมือถือ (Responsive)
- มีระบบ Loading (Spinner) ตรงกลางจอระหว่างที่มีการติดต่อกับ Google Apps Script เพื่อป้องกันผู้ใช้กดปุ่มซ้ำ
- จัดการ Error Handling ให้ครบถ้วน (เช่น try-catch ตอน parse JSON กลับมาจาก Apps Script)
ขอโค้ดที่สมบูรณ์ นำไปวางใน Google Apps Script แล้วใช้งานได้ทันที พร้อมอธิบายวิธีการติดตั้ง (Setup) ทีละขั้นตอนเป็นภาษาไทย
ทำหน้าที่เป็น Full Stack Web Developer และผู้เชี่ยวชาญด้าน Google Apps Script โปรดสร้าง "ระบบบริหารจัดการครุภัณฑ์ (Equipment Management System)" โดยใช้ Google Sheets เป็นฐานข้อมูล
ข้อกำหนดของระบบ:
1. เทคโนโลยีที่ใช้:
- Frontend: HTML, CSS, JavaScript (เขียนรวมในไฟล์เดียว) โดยใช้ Bootstrap 5 (CDN) และ Bootstrap Icons
- Backend: Google Apps Script (Code.gs)
- QR Code: ใช้ไลบรารี qrcodejs (CDN)
2. โครงสร้างไฟล์ที่ต้องการ:
- ไฟล์ 1: `index.html` (สำหรับ Frontend ทั้งหมด)
- ไฟล์ 2: `Code.gs` (สำหรับ Google Apps Script)
3. ฟีเจอร์ของแอปพลิเคชัน (Frontend - Single Page Application):
ออกแบบให้มี Navbar ด้านบน และมี 3 เมนูหลักที่สามารถสลับหน้าจอ (ซ่อน/แสดง) ได้ด้วย JavaScript:
3.1) หน้า "เพิ่มครุภัณฑ์":
- มีฟอร์มรับข้อมูล: รหัสครุภัณฑ์, ชื่อรายการ, หมวดหมู่ (Dropdown), วันที่รับเข้า, สถานที่ตั้ง, ผู้รับผิดชอบ และ สถานะ (ใช้งานปกติ, ส่งซ่อม, ชำรุด)
- เมื่อกด "บันทึก" ให้แสดง Loading Overlay
- ส่งข้อมูลไปที่ Backend ด้วยคำสั่ง `google.script.run`
- เมื่อบันทึกสำเร็จ ให้ซ่อนฟอร์ม แล้วแสดงหน้าต่าง "ผลลัพธ์" ที่มี QR Code (สร้างจาก URL ปัจจุบันต่อท้ายด้วย ?view=รหัสครุภัณฑ์) พร้อมปุ่มสำหรับ "พิมพ์ QR Code" (Print) และปุ่ม "เพิ่มรายการใหม่"
3.2) หน้า "รายการครุภัณฑ์":
- แสดงตารางข้อมูลครุภัณฑ์ทั้งหมด โดยดึงข้อมูลจาก Backend ด้วย `google.script.run`
- คอลัมน์สถานะ ให้ใช้ Badge สีของ Bootstrap (เช่น สีเขียว=ใช้งานปกติ, สีเหลือง=ส่งซ่อม, สีแดง=ชำรุด)
- ในคอลัมน์สุดท้ายของตาราง ให้มีปุ่มไอคอน QR Code เพื่อกดดูและพิมพ์ QR Code ของครุภัณฑ์ชิ้นนั้นๆ ได้แบบย้อนหลัง
3.3) หน้า "สแกน QR":
- ออกแบบ UI ให้ดูเหมือนพื้นที่สำหรับเปิดกล้อง (มีไอคอนกล้องตรงกลาง)
- ทำปุ่ม "จำลองการสแกน" โดยใช้ JavaScript `prompt()` เพื่อรับค่ารหัสครุภัณฑ์จำลอง และแสดง `alert()` แจ้งเตือน
4. ฟีเจอร์ของ Backend (Code.gs):
- มีฟังก์ชัน `doGet(e)` สำหรับ render หน้าเว็บ (ตั้งค่า SandboxMode.IFRAME)
- มีฟังก์ชัน `addEquipmentData(data)` สำหรับบันทึกข้อมูลลง Google Sheet ที่ชื่อแท็บว่า "Data" (ต่อท้ายด้วยคอลัมน์ Timestamp)
- มีฟังก์ชัน `getEquipmentData()` สำหรับอ่านข้อมูลทั้งหมดจาก Sheet ส่งกลับไปให้ Frontend
5. การออกแบบ (UI/UX):
- เน้นความสวยงาม ทันสมัย สะอาดตา (Clean Design) ขอบมน (border-radius) และมีการใช้ Box-shadow เล็กน้อย
- รองรับการใช้งานบนมือถือ (Responsive)
- มีระบบ Loading (Spinner) ตรงกลางจอระหว่างที่มีการติดต่อกับ Google Apps Script เพื่อป้องกันผู้ใช้กดปุ่มซ้ำ
- จัดการ Error Handling ให้ครบถ้วน (เช่น try-catch ตอน parse JSON กลับมาจาก Apps Script)
ขอโค้ดที่สมบูรณ์ นำไปวางใน Google Apps Script แล้วใช้งานได้ทันที พร้อมอธิบายวิธีการติดตั้ง (Setup) ทีละขั้นตอนเป็นภาษาไทย
ทำหน้าที่เป็นผู้เชี่ยวชาญด้าน Google Apps Script และ Web Development
ช่วยเขียนโค้ดสร้าง Web App "ระบบประเมินความพึงพอใจและดาวน์โหลดเกียรติบัตร" โดยใช้ Google Apps Script (ไฟล์ Code.gs) และ HTML/JS (ไฟล์ index.html) โดยมี Requirement ดังนี้:
1. ส่วน Frontend (index.html)
ใช้ Framework Bootstrap 5 ในการจัด Layout ให้ Responsive รองรับทั้งมือถือและคอมพิวเตอร์
ใช้ฟอนต์ภาษาไทย "Sarabun" โทนสีเว็บไซต์เป็นสีฟ้า-ขาว เรียบง่าย สบายตา
มีฟอร์มให้กรอกข้อมูลดังนี้:
ชื่อ-นามสกุล (สำหรับพิมพ์ลงเกียรติบัตร) *บังคับกรอก
แบบประเมิน 5 ข้อ เป็น Radio Button 1-5 (1=น้อยที่สุด, 5=มากที่สุด) ได้แก่:
ความสะดวกในการใช้งานเว็บไซต์
ความรวดเร็วในการโหลดหน้าเว็บ
ความเหมาะสมของการจัดวางข้อมูล
ความสวยงามและความน่าสนใจของเว็บไซต์
ความพึงพอใจโดยรวม
ข้อเสนอแนะเพิ่มเติม (Textarea)
การส่งข้อมูล: ให้ดึงคะแนนจากข้อ 5 เป็นคะแนนหลัก (Rating) ส่วนคะแนนข้อ 1-4 ให้นำไปต่อท้ายข้อความในช่องข้อเสนอแนะ (Comment) เพื่อส่งไปเก็บใน Database รวดเดียว
มีปุ่ม "ส่งแบบประเมิน"
เมื่อกดส่ง ต้องมีการซ่อนฟอร์มและแสดงหน้าจอ Loading (กำลังประมวลผล)
เมื่อประมวลผลสำเร็จ ให้เปลี่ยนหน้าจอเป็น Success พร้อมแสดงปุ่ม "ดาวน์โหลดเกียรติบัตร (PDF)" และปุ่ม "ทำรายการใหม่"
2. ส่วน Backend (Code.gs)
ฟังก์ชัน doGet() สำหรับเรียกหน้า index.html
ฟังก์ชันรับข้อมูลจากฟอร์ม นำไปบันทึกลง Google Sheets (ประกอบด้วย Timestamp, ชื่อ, คะแนนรวม, ความคิดเห็น)
ฟังก์ชันสร้างเกียรติบัตร:
ดึงไฟล์ Google Slides ที่เป็น Template (ใช้ ID)
สร้างไฟล์สำเนา (Copy)
ค้นหาคำว่า {{name}} ใน Slide และแทนที่ด้วยชื่อผู้ใช้งานที่กรอกมา
แปลงไฟล์ Slide เป็น PDF
ลบไฟล์ Slide สำเนาทิ้งเพื่อไม่ให้รก Drive
แปลงไฟล์ PDF เป็น Base64 String เพื่อส่งกลับไปให้หน้า Frontend สร้างปุ่มดาวน์โหลด
ขอโค้ดที่สมบูรณ์ สะอาด จัดระเบียบอย่างดี และมีคอมเมนต์อธิบายการทำงานที่สำคัญ รวมถึงขั้นตอนสั้นๆ ในการเตรียม Sheet, Slide และวิธีการ Deploy ด้วย
ทำหน้าที่เป็นผู้เชี่ยวชาญด้าน Google Apps Script และ Web Development
ช่วยเขียนโค้ดสร้าง Web App "ระบบประเมินความพึงพอใจและดาวน์โหลดเกียรติบัตร" โดยใช้ Google Apps Script (ไฟล์ Code.gs) และ HTML/JS (ไฟล์ index.html) โดยมี Requirement ดังนี้:
1. ส่วน Frontend (index.html)
ใช้ Framework Bootstrap 5 ในการจัด Layout ให้ Responsive รองรับทั้งมือถือและคอมพิวเตอร์
ใช้ฟอนต์ภาษาไทย "Sarabun" โทนสีเว็บไซต์เป็นสีฟ้า-ขาว เรียบง่าย สบายตา
มีฟอร์มให้กรอกข้อมูลดังนี้:
ชื่อ-นามสกุล (สำหรับพิมพ์ลงเกียรติบัตร) *บังคับกรอก
แบบประเมิน 5 ข้อ เป็น Radio Button 1-5 (1=น้อยที่สุด, 5=มากที่สุด) ได้แก่:
ความสะดวกในการใช้งานเว็บไซต์
ความรวดเร็วในการโหลดหน้าเว็บ
ความเหมาะสมของการจัดวางข้อมูล
ความสวยงามและความน่าสนใจของเว็บไซต์
ความพึงพอใจโดยรวม
ข้อเสนอแนะเพิ่มเติม (Textarea)
การส่งข้อมูล: ให้ดึงคะแนนจากข้อ 5 เป็นคะแนนหลัก (Rating) ส่วนคะแนนข้อ 1-4 ให้นำไปต่อท้ายข้อความในช่องข้อเสนอแนะ (Comment) เพื่อส่งไปเก็บใน Database รวดเดียว
มีปุ่ม "ส่งแบบประเมิน"
เมื่อกดส่ง ต้องมีการซ่อนฟอร์มและแสดงหน้าจอ Loading (กำลังประมวลผล)
เมื่อประมวลผลสำเร็จ ให้เปลี่ยนหน้าจอเป็น Success พร้อมแสดงปุ่ม "ดาวน์โหลดเกียรติบัตร (PDF)" และปุ่ม "ทำรายการใหม่"
2. ส่วน Backend (Code.gs)
ฟังก์ชัน doGet() สำหรับเรียกหน้า index.html
ฟังก์ชันรับข้อมูลจากฟอร์ม นำไปบันทึกลง Google Sheets (ประกอบด้วย Timestamp, ชื่อ, คะแนนรวม, ความคิดเห็น)
ฟังก์ชันสร้างเกียรติบัตร:
ดึงไฟล์ Google Slides ที่เป็น Template (ใช้ ID)
สร้างไฟล์สำเนา (Copy)
ค้นหาคำว่า {{name}} ใน Slide และแทนที่ด้วยชื่อผู้ใช้งานที่กรอกมา
แปลงไฟล์ Slide เป็น PDF
ลบไฟล์ Slide สำเนาทิ้งเพื่อไม่ให้รก Drive
แปลงไฟล์ PDF เป็น Base64 String เพื่อส่งกลับไปให้หน้า Frontend สร้างปุ่มดาวน์โหลด
ขอโค้ดที่สมบูรณ์ สะอาด จัดระเบียบอย่างดี และมีคอมเมนต์อธิบายการทำงานที่สำคัญ รวมถึงขั้นตอนสั้นๆ ในการเตรียม Sheet, Slide และวิธีการ Deploy ด้วย
บทบาท (Role): คุณคือผู้เชี่ยวชาญด้าน Full Stack Web Development และ Google Apps Script
คำสั่ง (Task):
โปรดเขียนโค้ดสร้าง "ระบบจัดคิวอัตโนมัติ (Queue Management System)" โดยใช้ Google Apps Script ทำหน้าที่เป็น Backend API และใช้ Google Sheets เป็นฐานข้อมูล (Database) ส่วน Frontend ให้เป็น Web App แบบ Single Page Application (SPA) ที่รวมทุกหน้าจอไว้ในไฟล์ HTML เดียว
รายละเอียดความต้องการ (Requirements):
โครงสร้างฐานข้อมูล (Google Sheets):
บันทึกข้อมูลรายวันลงใน Sheet ชื่อ "Data"
คอลัมน์ประกอบด้วย: วันที่, เวลาที่กดรับคิว, หมายเลขคิว, สถานะ (Waiting / Called), เวลาที่เรียกคิว
หมายเลขคิวต้องรันใหม่ทุกวัน โดยเริ่มจาก A001, A002, A003 ไปเรื่อยๆ ตรวจสอบจากวันที่ปัจจุบัน
Backend (Google Apps Script - Code.gs):
doGet() สำหรับเรนเดอร์หน้า HTML Web App
ฟังก์ชันสร้างคิวใหม่ (Generate Queue) และบันทึกลง Sheet
ฟังก์ชันเรียกคิวถัดไป (Call Next Queue) โดยหาคิวที่สถานะเป็น "Waiting" ที่เก่าที่สุด (FIFO) แล้วเปลี่ยนสถานะเป็น "Called"
ฟังก์ชันดึงข้อมูลสำหรับจอแสดงผล (Get Display Data) ส่งคืนข้อมูล: คิวที่กำลังเรียกปัจจุบัน, จำนวนคิวที่รอทั้งหมด, และรายการหมายเลขคิวที่กำลังรอ (จำกัด 5 คิวถัดไป)
Frontend (UI/UX - Index.html):
ใช้ Tailwind CSS ผ่าน CDN สำหรับการออกแบบ UI ให้ดูทันสมัยและสะอาดตา
ใช้ฟอนต์ภาษาไทย (เช่น Kanit)
สร้าง Navigation Bar ด้านบนสำหรับสลับหน้าจอ (ซ่อน/แสดง div) แบ่งเป็น 3 โหมด:
3.1 โหมดจุดรับคิว (Kiosk - สำหรับลูกค้า):
มีปุ่มขนาดใหญ่ "รับคิว"
เมื่อกดแล้ว ให้แสดงหมายเลขคิวที่ได้ตัวใหญ่ๆ บนหน้าจอเป็นเวลา 5 วินาที แล้วซ่อนไป
3.2 โหมดจุดเรียกคิว (Staff - สำหรับพนักงาน):
แสดงหมายเลขคิวที่เรียกล่าสุด
มีปุ่ม "เรียกคิวถัดไป" เมื่อกดแล้วให้ไปดึงคิวที่รออยู่มาแสดง ถ้าไม่มีให้แจ้งเตือนว่า "ไม่มีคิวรอ"
3.3 โหมดจอแสดงผล (Display - สำหรับทีวีส่วนกลาง):
แบ่งหน้าจอเป็น 2 ฝั่ง (ซ้าย: คิวปัจจุบันตัวใหญ่มาก / ขวา: รายการคิวรอ 5 คิวและจำนวนคิวรอทั้งหมด)
มีระบบ Auto-refresh ดึงข้อมูลทุกๆ 3 วินาที
ระบบเสียง (Text-to-Speech): เมื่อมีคิวใหม่ถูกเรียก ให้เบราว์เซอร์อ่านออกเสียงภาษาไทย เช่น "ขอเชิญหมายเลขคิว [A 0 0 1] ที่ช่องบริการค่ะ"
มีตัวหนังสือกระพริบเมื่อเรียกคิวใหม่
ข้อบังคับ: ต้องมีหน้าต่าง Overlay ปุ่ม "เริ่มจอแสดงผล" ให้กดก่อน 1 ครั้ง เพื่อปลดล็อคข้อจำกัด Autoplay ของเบราว์เซอร์ในการเล่นเสียง
เงื่อนไขเพิ่มเติม (Constraints):
โค้ดฝั่ง Frontend ต้องอยู่ในไฟล์ Index.html เพียงไฟล์เดียว (รวม CSS และ JS ไว้ในนั้น)
โค้ดฝั่ง Backend ต้องอยู่ในไฟล์ Code.gs
โค้ดต้องพร้อมนำไป Deploy ใช้งานได้ทันที มีการจัดการ Error พื้นฐาน และมีคอมเมนต์อธิบายโค้ดภาษาไทยที่ชัดเจน
บทบาท (Role): คุณคือผู้เชี่ยวชาญด้าน Full Stack Web Development และ Google Apps Script
คำสั่ง (Task):
โปรดเขียนโค้ดสร้าง "ระบบจัดคิวอัตโนมัติ (Queue Management System)" โดยใช้ Google Apps Script ทำหน้าที่เป็น Backend API และใช้ Google Sheets เป็นฐานข้อมูล (Database) ส่วน Frontend ให้เป็น Web App แบบ Single Page Application (SPA) ที่รวมทุกหน้าจอไว้ในไฟล์ HTML เดียว
รายละเอียดความต้องการ (Requirements):
โครงสร้างฐานข้อมูล (Google Sheets):
บันทึกข้อมูลรายวันลงใน Sheet ชื่อ "Data"
คอลัมน์ประกอบด้วย: วันที่, เวลาที่กดรับคิว, หมายเลขคิว, สถานะ (Waiting / Called), เวลาที่เรียกคิว
หมายเลขคิวต้องรันใหม่ทุกวัน โดยเริ่มจาก A001, A002, A003 ไปเรื่อยๆ ตรวจสอบจากวันที่ปัจจุบัน
Backend (Google Apps Script - Code.gs):
doGet() สำหรับเรนเดอร์หน้า HTML Web App
ฟังก์ชันสร้างคิวใหม่ (Generate Queue) และบันทึกลง Sheet
ฟังก์ชันเรียกคิวถัดไป (Call Next Queue) โดยหาคิวที่สถานะเป็น "Waiting" ที่เก่าที่สุด (FIFO) แล้วเปลี่ยนสถานะเป็น "Called"
ฟังก์ชันดึงข้อมูลสำหรับจอแสดงผล (Get Display Data) ส่งคืนข้อมูล: คิวที่กำลังเรียกปัจจุบัน, จำนวนคิวที่รอทั้งหมด, และรายการหมายเลขคิวที่กำลังรอ (จำกัด 5 คิวถัดไป)
Frontend (UI/UX - Index.html):
ใช้ Tailwind CSS ผ่าน CDN สำหรับการออกแบบ UI ให้ดูทันสมัยและสะอาดตา
ใช้ฟอนต์ภาษาไทย (เช่น Kanit)
สร้าง Navigation Bar ด้านบนสำหรับสลับหน้าจอ (ซ่อน/แสดง div) แบ่งเป็น 3 โหมด:
3.1 โหมดจุดรับคิว (Kiosk - สำหรับลูกค้า):
มีปุ่มขนาดใหญ่ "รับคิว"
เมื่อกดแล้ว ให้แสดงหมายเลขคิวที่ได้ตัวใหญ่ๆ บนหน้าจอเป็นเวลา 5 วินาที แล้วซ่อนไป
3.2 โหมดจุดเรียกคิว (Staff - สำหรับพนักงาน):
แสดงหมายเลขคิวที่เรียกล่าสุด
มีปุ่ม "เรียกคิวถัดไป" เมื่อกดแล้วให้ไปดึงคิวที่รออยู่มาแสดง ถ้าไม่มีให้แจ้งเตือนว่า "ไม่มีคิวรอ"
3.3 โหมดจอแสดงผล (Display - สำหรับทีวีส่วนกลาง):
แบ่งหน้าจอเป็น 2 ฝั่ง (ซ้าย: คิวปัจจุบันตัวใหญ่มาก / ขวา: รายการคิวรอ 5 คิวและจำนวนคิวรอทั้งหมด)
มีระบบ Auto-refresh ดึงข้อมูลทุกๆ 3 วินาที
ระบบเสียง (Text-to-Speech): เมื่อมีคิวใหม่ถูกเรียก ให้เบราว์เซอร์อ่านออกเสียงภาษาไทย เช่น "ขอเชิญหมายเลขคิว [A 0 0 1] ที่ช่องบริการค่ะ"
มีตัวหนังสือกระพริบเมื่อเรียกคิวใหม่
ข้อบังคับ: ต้องมีหน้าต่าง Overlay ปุ่ม "เริ่มจอแสดงผล" ให้กดก่อน 1 ครั้ง เพื่อปลดล็อคข้อจำกัด Autoplay ของเบราว์เซอร์ในการเล่นเสียง
เงื่อนไขเพิ่มเติม (Constraints):
โค้ดฝั่ง Frontend ต้องอยู่ในไฟล์ Index.html เพียงไฟล์เดียว (รวม CSS และ JS ไว้ในนั้น)
โค้ดฝั่ง Backend ต้องอยู่ในไฟล์ Code.gs
โค้ดต้องพร้อมนำไป Deploy ใช้งานได้ทันที มีการจัดการ Error พื้นฐาน และมีคอมเมนต์อธิบายโค้ดภาษาไทยที่ชัดเจน
"ทำหน้าที่เป็น Full-stack Developer ที่เชี่ยวชาญด้าน Google Apps Script, HTML, JavaScript และ Tailwind CSS
กรุณาเขียนโค้ดสำหรับสร้าง 'ระบบขอแลกเวรออนไลน์' (Web App) โดยทำงานร่วมกับ Google Sheets โดยมีรายละเอียดและข้อกำหนดดังนี้:
1. ส่วนหน้าบ้าน (Frontend - index.html):
สร้างหน้าฟอร์มที่สวยงาม ดูสะอาดตา และรองรับมือถือ (Responsive) โดยใช้ Tailwind CSS
มีช่องรับข้อมูลดังนี้:
ชื่อ-นามสกุลผู้ขอ (Text)
เวรเดิม: แยกเป็น 2 ช่องคือ ช่องเลือกวันที่ (Date picker) และช่องเลือกกะ (Dropdown: เช้า, บ่าย, ดึก)
เวรใหม่: แยกเป็น 2 ช่องคือ ช่องเลือกวันที่ (Date picker) และช่องเลือกกะ (Dropdown: เช้า, บ่าย, ดึก)
เหตุผลการขอแลก (Textarea)
อีเมลของหัวหน้า/ผู้อนุมัติ (Email)
มีระบบป้องกันการกดปุ่ม Submit ซ้ำ โดยเปลี่ยนข้อความปุ่มเป็น 'กำลังส่งข้อมูล...' และทำปุ่มจางลงขณะรอการประมวลผล
มีการแปลงรูปแบบวันที่ (Date format) จาก YYYY-MM-DD เป็น DD/MM/YYYY ก่อนส่งข้อมูลไปหลังบ้าน
2. ส่วนหลังบ้าน (Backend - Code.gs):
รับข้อมูลจากหน้าเว็บและบันทึกลง Google Sheet ชื่อแผ่นงาน 'Data'
โครงสร้างคอลัมน์ใน Sheet มี 9 คอลัมน์: Timestamp, ชื่อ-สกุล, วันที่เวรเดิม, กะเวรเดิม, วันที่เวรใหม่, กะเวรใหม่, เหตุผล, อีเมลผู้อนุมัติ, สถานะ (เริ่มต้นให้บันทึกเป็น 'รออนุมัติ')
หลังจากบันทึกข้อมูลเสร็จ ให้ดึงหมายเลขแถว (Row ID) และส่งอีเมลแจ้งเตือนอัตโนมัติไปยังอีเมลของหัวหน้าที่กรอกไว้
3. ส่วนระบบอนุมัติผ่านอีเมล (Email Approval):
ในเนื้อหาอีเมล (HTML Body) ให้สรุปข้อมูลการขอแลกเวรทั้งหมดให้อ่านง่าย
สร้างปุ่ม (หรือลิงก์ที่มีสไตล์คล้ายปุ่ม) 2 ปุ่มคือ '✅ อนุมัติ' และ '❌ ไม่อนุมัติ'
เมื่อหัวหน้าคลิกปุ่มใดปุ่มหนึ่ง ระบบจะเรียกฟังก์ชัน doGet(e) พร้อมพารามิเตอร์ action และ row
ตรวจสอบสถานะปัจจุบันใน Sheet ก่อน หากไม่ใช่ 'รออนุมัติ' ให้แสดงหน้าเว็บแจ้งเตือนว่าทำรายการไปแล้ว เพื่อป้องกันการกดซ้ำ
หากยังไม่ทำรายการ ให้อัปเดตสถานะใน Sheet เป็น 'อนุมัติแล้ว' หรือ 'ไม่อนุมัติ' ตามที่กด และแสดงหน้าเว็บยืนยันผลการดำเนินการ
กรุณาแยกไฟล์เป็น Code.gs และ index.html พร้อมอธิบายขั้นตอนการติดตั้งและการเตรียม Google Sheet ให้ครบถ้วน"
"ทำหน้าที่เป็น Full-stack Developer ที่เชี่ยวชาญด้าน Google Apps Script, HTML, JavaScript และ Tailwind CSS
กรุณาเขียนโค้ดสำหรับสร้าง 'ระบบขอแลกเวรออนไลน์' (Web App) โดยทำงานร่วมกับ Google Sheets โดยมีรายละเอียดและข้อกำหนดดังนี้:
1. ส่วนหน้าบ้าน (Frontend - index.html):
สร้างหน้าฟอร์มที่สวยงาม ดูสะอาดตา และรองรับมือถือ (Responsive) โดยใช้ Tailwind CSS
มีช่องรับข้อมูลดังนี้:
ชื่อ-นามสกุลผู้ขอ (Text)
เวรเดิม: แยกเป็น 2 ช่องคือ ช่องเลือกวันที่ (Date picker) และช่องเลือกกะ (Dropdown: เช้า, บ่าย, ดึก)
เวรใหม่: แยกเป็น 2 ช่องคือ ช่องเลือกวันที่ (Date picker) และช่องเลือกกะ (Dropdown: เช้า, บ่าย, ดึก)
เหตุผลการขอแลก (Textarea)
อีเมลของหัวหน้า/ผู้อนุมัติ (Email)
มีระบบป้องกันการกดปุ่ม Submit ซ้ำ โดยเปลี่ยนข้อความปุ่มเป็น 'กำลังส่งข้อมูล...' และทำปุ่มจางลงขณะรอการประมวลผล
มีการแปลงรูปแบบวันที่ (Date format) จาก YYYY-MM-DD เป็น DD/MM/YYYY ก่อนส่งข้อมูลไปหลังบ้าน
2. ส่วนหลังบ้าน (Backend - Code.gs):
รับข้อมูลจากหน้าเว็บและบันทึกลง Google Sheet ชื่อแผ่นงาน 'Data'
โครงสร้างคอลัมน์ใน Sheet มี 9 คอลัมน์: Timestamp, ชื่อ-สกุล, วันที่เวรเดิม, กะเวรเดิม, วันที่เวรใหม่, กะเวรใหม่, เหตุผล, อีเมลผู้อนุมัติ, สถานะ (เริ่มต้นให้บันทึกเป็น 'รออนุมัติ')
หลังจากบันทึกข้อมูลเสร็จ ให้ดึงหมายเลขแถว (Row ID) และส่งอีเมลแจ้งเตือนอัตโนมัติไปยังอีเมลของหัวหน้าที่กรอกไว้
3. ส่วนระบบอนุมัติผ่านอีเมล (Email Approval):
ในเนื้อหาอีเมล (HTML Body) ให้สรุปข้อมูลการขอแลกเวรทั้งหมดให้อ่านง่าย
สร้างปุ่ม (หรือลิงก์ที่มีสไตล์คล้ายปุ่ม) 2 ปุ่มคือ '✅ อนุมัติ' และ '❌ ไม่อนุมัติ'
เมื่อหัวหน้าคลิกปุ่มใดปุ่มหนึ่ง ระบบจะเรียกฟังก์ชัน doGet(e) พร้อมพารามิเตอร์ action และ row
ตรวจสอบสถานะปัจจุบันใน Sheet ก่อน หากไม่ใช่ 'รออนุมัติ' ให้แสดงหน้าเว็บแจ้งเตือนว่าทำรายการไปแล้ว เพื่อป้องกันการกดซ้ำ
หากยังไม่ทำรายการ ให้อัปเดตสถานะใน Sheet เป็น 'อนุมัติแล้ว' หรือ 'ไม่อนุมัติ' ตามที่กด และแสดงหน้าเว็บยืนยันผลการดำเนินการ
กรุณาแยกไฟล์เป็น Code.gs และ index.html พร้อมอธิบายขั้นตอนการติดตั้งและการเตรียม Google Sheet ให้ครบถ้วน"