Prompt Library ครูนุ่มเดฟเทค

คุณคือผู้เชี่ยวชาญด้านการพัฒนา Web Application ด้วย Google Apps Script (GAS) และการใช้งาน Google Sheets เป็นฐานข้อมูล เป้าหมายของคุณคือการสร้าง "ระบบจองเลขทะเบียนเกียรติบัตร (Certificate Number Reservation System)" แบบจองเป็นชุด (Block Reservation)

[รายละเอียดการทำงานของระบบ]

Frontend (UI): สร้างหน้าเว็บฟอร์มแบบ Single Page Application

มีช่องกรอกข้อมูลดังนี้:

กลุ่มสาระการเรียนรู้/ฝ่ายงาน (Dropdown List)

ชื่อโครงการ/กิจกรรม (Text)

จำนวนเกียรติบัตรที่ต้องการจอง (Number, ขั้นต่ำ 1)

วันที่ลงในเกียรติบัตร (Date, ค่าเริ่มต้นคือวันปัจจุบัน)

มีปุ่ม "ยืนยันการจอง" พร้อมสถานะ Loading และ Disable ปุ่มระหว่างรอประมวลผลเพื่อป้องกันการกดซ้ำ

เมื่อบันทึกสำเร็จ ให้แสดง Pop-up (ใช้ SweetAlert2) สรุปข้อมูลที่จอง โดยเฉพาะ "ช่วงเลขทะเบียนที่ได้รับ" (ตั้งแต่เลขที่... ถึงเลขที่...)

Backend (Google Apps Script - Code.gs):

มีฟังก์ชัน doGet(e) เพื่อแสดงผลหน้าเว็บ

มีฟังก์ชัน saveRecord(data) เพื่อรับข้อมูลจากฟอร์ม และคำนวณเลขทะเบียน

Logic การรันเลข:

รูปแบบเลขคือ พ.ศ./ลำดับ4หลัก เช่น 2569/0001

ให้เช็คคอลัมน์ "ถึงเลขที่" ในบรรทัดล่าสุดของ Google Sheet

ถ้าเป็นปี พ.ศ. ปัจจุบัน ให้นำเลขลำดับ 4 หลักล่าสุดมาบวก 1 เพื่อเป็น "เลขเริ่มต้น" (Start Number) ของการจองครั้งนี้

ถ้ารายการล่าสุดเป็นปีเก่า (ขึ้นปีใหม่) ให้เริ่ม "เลขเริ่มต้น" ที่ 0001

คำนวณ "เลขสิ้นสุด" (End Number) โดยนำ: เลขเริ่มต้น + จำนวนที่จอง - 1

Database (Google Sheets):

บันทึกข้อมูลลงแผ่นงานชื่อ "Data" โดยเรียงคอลัมน์ดังนี้:
A: วันที่/เวลาที่บันทึก (Timestamp)
B: ตั้งแต่เลขที่ (Start Number)
C: ถึงเลขที่ (End Number)
D: จำนวนที่จอง (ใบ)
E: กลุ่มสาระฯ / ฝ่ายงาน
F: ชื่อโครงการ / กิจกรรม
G: วันที่ลงในเกียรติบัตร

[เทคโนโลยีและไลบรารีที่ต้องใช้]

HTML, CSS, JavaScript พื้นฐาน

Tailwind CSS (ผ่าน CDN) สำหรับจัดการ UI ให้สวยงาม ทันสมัย และ Responsive

SweetAlert2 (ผ่าน CDN) สำหรับแจ้งเตือน Pop-up (Success, Error)

Lucide Icons (ผ่าน CDN) สำหรับไอคอนตกแต่งฟอร์ม

Google Apps Script (HTML Service)

[สิ่งที่ต้องการให้สร้าง]
กรุณาสร้างไฟล์ต่อไปนี้:

index.html: โค้ดส่วนหน้าเว็บทั้งหมด (รวม CSS และ JS ไว้ในไฟล์เดียวตามข้อจำกัดของ GAS)

Code.gs: โค้ดฝั่ง Server สำหรับประมวลผลและติดต่อ Google Sheets

README.md: คำแนะนำวิธีการตั้งค่าหัวคอลัมน์ใน Google Sheets และวิธีการ Deploy Web App

ทำหน้าที่เป็นนักพัฒนาโปรแกรมผู้เชี่ยวชาญด้าน Google Apps Script และ Web Application โปรดสร้าง "ระบบเก็บข้อมูลผู้ป่วยติดเตียงพร้อมแผนที่" โดยใช้ Google Sheets เป็นฐานข้อมูล

กรุณาเขียนโค้ดออกมา 2 ไฟล์ คือ Code.gs (สำหรับ Backend) และ index.html (สำหรับ Frontend) โดยมีรายละเอียดฟังก์ชันการทำงานดังนี้:

1. ส่วนหน้าเว็บ (UI/UX) และฟอร์ม:

ใช้ Tailwind CSS ผ่าน CDN ในการตกแต่งให้สวยงาม สะอาดตา และรองรับการใช้งานบนมือถือ (Responsive)

ใช้ SweetAlert2 สำหรับแสดงกล่องข้อความแจ้งเตือนต่างๆ (เช่น กำลังโหลดพิกัด, บันทึกสำเร็จ, แจ้งข้อผิดพลาด)

มีฟอร์มรับข้อมูล: ชื่อ-สกุลผู้ป่วย, อายุ, เบอร์โทรศัพท์, ชื่อผู้ดูแล, ที่อยู่/จุดสังเกต, Latitude, Longitude

2. ส่วนแผนที่ (Map Integration):

ใช้ Leaflet.js ในการแสดงผลแผนที่

ระบบเลเยอร์ (Layer): ให้มีปุ่มสลับแผนที่ได้ 2 แบบ คือ แผนที่ถนนปกติ (OpenStreetMap) และ แผนที่ดาวเทียม (Google Satellite Hybrid)

การระบุพิกัด:

มีปุ่ม "ดึงพิกัดปัจจุบัน" โดยใช้ Geolocation API ของเบราว์เซอร์

ผู้ใช้สามารถคลิกบนแผนที่เพื่อสร้าง "หมุดสีแดง" สำหรับดึงค่า Latitude/Longitude ลงในช่องฟอร์มได้อัตโนมัติ

หมุดสีแดงต้องตั้งค่าเป็น Draggable (ลากได้) เพื่อให้ผู้ใช้ลากปรับตำแหน่งให้แม่นยำขึ้นได้ และเมื่อลากเสร็จให้ค่าในช่องพิกัดเปลี่ยนตามอัตโนมัติ

3. การแสดงผลข้อมูลและการทำงานหลังบ้าน (Backend):

เมื่อโหลดหน้าเว็บ ให้ดึงข้อมูลผู้ป่วยจาก Google Sheets มาแสดงเป็น "หมุดสีน้ำเงิน" บนแผนที่

เมื่อคลิกที่หมุดสีน้ำเงิน ให้แสดง Popup ข้อมูลผู้ป่วย และมีปุ่ม "นำทาง (Google Maps)" ที่กดแล้วจะเปิดแอป Google Maps พร้อมเส้นทางไปยังพิกัดนั้น

ในไฟล์ Code.gs ให้เขียนฟังก์ชัน doGet() สำหรับแสดงผล Web App, ฟังก์ชันรับข้อมูลมาต่อท้ายแถว (Append) ลงใน Google Sheets พร้อมสร้างหัวตารางอัตโนมัติหากยังไม่มี และฟังก์ชันส่งข้อมูลกลับไปที่หน้าเว็บ

กรุณาใส่ Mock Data จำลองข้อมูลผู้ป่วยไว้ในไฟล์ HTML เล็กน้อย เพื่อให้สามารถพรีวิวหน้าเว็บและทดสอบแผนที่ได้แม้ไม่ได้รันบน Google Apps Script ก็ตาม

"สวมบทบาทเป็นนักพัฒนาเว็บแอปพลิเคชันและผู้เชี่ยวชาญด้าน Google Apps Script โปรดสร้าง 'ระบบฐานข้อมูลผลงานวิชาการ' (Academic Database System) โดยใช้ Google Sheets เป็นฐานข้อมูล (Backend) และใช้ HTML/JS/CSS เป็นหน้าเว็บ (Frontend)

ข้อกำหนดของระบบมีดังนี้:

1. โครงสร้างไฟล์ที่ต้องการ (ให้แยก Code Block ชัดเจน):

index.html: สำหรับหน้าเว็บ (UI)

code.gs: โค้ดฝั่ง Google Apps Script (Backend)

setup_guide.md: คู่มือการติดตั้งทีละขั้นตอนที่เข้าใจง่าย

2. ข้อมูลที่ต้องการจัดเก็บ (Fields):

ID (สร้างอัตโนมัติจาก Timestamp)

ชื่อผลงาน (Text - บังคับกรอก)

ผู้แต่ง/ผู้วิจัย (Text - บังคับกรอก)

ปีที่เผยแพร่ (Number - บังคับกรอก)

ประเภท (Dropdown: งานวิจัย, บทความวิชาการ, วิทยานิพนธ์, หนังสือ/ตำรา, อื่นๆ - บังคับกรอก)

ลิงก์เอกสาร/URL (URL - ไม่บังคับ)

3. ฟีเจอร์และการทำงาน (Functions):

สามารถ เพิ่มข้อมูล (Create) จากฟอร์มลง Google Sheets ได้

สามารถ ดึงข้อมูล (Read) มาแสดงผลในรูปแบบตารางได้ โดยเรียงลำดับจากปีล่าสุดไปเก่าสุด

สามารถ ลบข้อมูล (Delete) เป็นรายบรรทัดได้ โดยมีหน้าต่าง Confirm ก่อนลบ

มีฟังก์ชัน setupSheet() ฝั่ง Backend เพื่อสร้างหัวตารางอัตโนมัติในครั้งแรกหากชีตว่างเปล่า

4. การออกแบบหน้าเว็บ (UI/UX):

ใช้ Tailwind CSS ผ่าน CDN ในการตกแต่งให้ดูทันสมัย สะอาดตา และรองรับมือถือ (Responsive)

แบ่งหน้าจอเป็น 2 ส่วนหลักๆ (ซ้าย: ฟอร์มเพิ่มข้อมูล, ขวา: ตารางแสดงผล) แบบ Grid

ใช้ Font Awesome สำหรับไอคอนต่างๆ

ทำ Badge สีสำหรับแยก 'ประเภทผลงาน' ในตารางให้ดูง่าย (เช่น งานวิจัยสีฟ้า, บทความสีเขียว)

มี Loading State (ไอคอนหมุน) ตอนกดปุ่มบันทึก หรือกำลังโหลดตาราง

มีระบบ Toast Notification (แจ้งเตือนมุมจอ) สีเขียวเมื่อสำเร็จ สีแดงเมื่อมีข้อผิดพลาด

5. เงื่อนไขพิเศษเพิ่มเติม:

ในไฟล์ index.html ให้เขียนระบบ Mock Data (ข้อมูลจำลอง) เอาไว้ด้วย เพื่อให้หน้าเว็บสามารถแสดงผลตัวอย่าง ฟังก์ชันเพิ่มตาราง และฟังก์ชันลบข้อมูลได้ทันทีในโหมด Preview (เมื่อ google.script.run ยังไม่ทำงาน) เพื่อให้ผู้ใช้เห็นภาพก่อนนำไปเชื่อมต่อจริง"

บทบาท (Role):
คุณคือนักพัฒนาเว็บไซต์และผู้เชี่ยวชาญด้าน Google Apps Script (GAS)

วัตถุประสงค์ (Objective):
เขียนโค้ดสร้าง "ระบบจัดการพัสดุสำหรับองค์กร/โรงเรียน" โดยใช้ Google Sheets เป็นฐานข้อมูล และสร้างหน้า Web App ด้วย Google Apps Script (Code.gs และ Index.html)

ข้อกำหนดของฐานข้อมูล (Google Sheets - ชื่อชีต "Data"):
กำหนดหัวคอลัมน์ A ถึง F ดังนี้:

วันที่รับพัสดุเข้า

เลขพัสดุ (Tracking)

ชื่อผู้รับ

ขนส่ง

สถานะ

วันที่มารับของ

ข้อกำหนดของหน้าเว็บ (User Interface):

ใช้ Bootstrap 5 ในการตกแต่งให้ดูสะอาดตา ทันสมัย และรองรับการแสดงผลบนมือถือ (Responsive)

แบ่งหน้าจอเป็น 2 Tabs (เมนู) คือ:

Tab 1: รับพัสดุเข้า (ลงทะเบียนพัสดุใหม่) - มีแบบฟอร์มให้กรอก เลขพัสดุ, ชื่อผู้รับ, และเลือกบริษัทขนส่ง (Drop-down) เมื่อกดบันทึก ให้ระบบประทับเวลาปัจจุบันลงในคอลัมน์ A และตั้งค่าสถานะในคอลัมน์ E เป็น "รอผู้รับมารับ"

Tab 2: รายการรอรับของ (พัสดุตกค้าง) - แสดงตารางดึงข้อมูลจาก Google Sheets เฉพาะรายการที่มีสถานะ "รอผู้รับมารับ" มาแสดงผล ท้ายรายการแต่ละแถวให้มีปุ่ม "ยืนยันการรับ"

เมื่อกดปุ่ม "ยืนยันการรับ" ใน Tab 2 ให้ระบบอัปเดตข้อมูลใน Google Sheets โดยเปลี่ยนสถานะเป็น "รับของแล้ว" และประทับเวลาปัจจุบันลงในคอลัมน์ F (วันที่มารับของ) พร้อมทั้งรีโหลดตารางใหม่เพื่อนำรายการที่รับแล้วออก

ผลลัพธ์ที่ต้องการ (Output):

โค้ดสำหรับไฟล์ Code.gs ทั้งหมด

โค้ดสำหรับไฟล์ Index.html ทั้งหมด (รวม HTML, CSS และ JavaScript ในไฟล์เดียว)

คำแนะนำสั้นๆ ในการนำไป Deploy ใช้งานจริง

ทำหน้าที่เป็นนักพัฒนา Web Application และผู้เชี่ยวชาญด้าน Google Apps Script
จงสร้าง "ระบบติดตามการไปราชการของบุคลากร" โดยใช้ Google Sheets เป็นฐานข้อมูล (Backend) และสร้างหน้า Web App ด้วย HTML, JavaScript และ Tailwind CSS (Frontend)

กรุณาสร้างและแยกโค้ดออกเป็น 3 ไฟล์ ได้แก่:
1. README.md (คู่มือการติดตั้งแบบเข้าใจง่าย)
2. Code.gs (ฝั่ง Backend)
3. index.html (ฝั่ง Frontend)

โดยมีรายละเอียดสเปคการทำงานดังนี้:

[1. โครงสร้าง Database (Google Sheets)]
- ใช้แผ่นงาน (Sheet) ชื่อว่า "Data"
- มี Header ในแถวที่ 1 (คอลัมน์ A ถึง H) ดังนี้: Timestamp, ชื่อ-สกุล, ตำแหน่ง, สถานที่ไปราชการ, วันที่เริ่มต้น, วันที่สิ้นสุด, วัตถุประสงค์, สถานะ

[2. ฝั่ง Backend (Code.gs)]
- มีฟังก์ชัน doGet(e) เพื่อ Render ไฟล์ index.html พร้อมรองรับ Responsive ผ่าน Meta Viewport
- มีฟังก์ชัน saveData(formObject) รับข้อมูลจากหน้าเว็บ เพิ่ม Timestamp และกำหนดสถานะเริ่มต้นเป็น "รอดำเนินการ" จากนั้นต่อท้ายข้อมูลลงแถวใหม่ในชีต "Data" พร้อมจัดการ Error Handling
- มีฟังก์ชัน getData() เพื่อดึงข้อมูลทั้งหมดจากชีต (ยกเว้นแถว Header) ส่งกลับไปเป็น Array เพื่อให้หน้าเว็บนำไปแสดงผล

[3. ฝั่ง Frontend (index.html)]
- การตกแต่ง: ใช้ Tailwind CSS ผ่าน CDN, ใช้ฟอนต์ "Sarabun" (Google Fonts)
- การแจ้งเตือน: ใช้ SweetAlert2
- เลย์เอาต์: แบบ Responsive หน้าจอมือถือแสดงเรียงลงมา หน้าจอคอมพิวเตอร์แบ่งเป็น 2 ส่วน (ซ้าย: ฟอร์ม 1 ส่วน / ขวา: ตาราง 2 ส่วน)
- แบบฟอร์มขออนุญาต: มีช่องกรอก ชื่อ-สกุล, ตำแหน่ง, สถานที่ไปราชการ, วันที่เริ่มต้น (type=date), วันที่สิ้นสุด (type=date), และวัตถุประสงค์ (textarea)
- ระบบตรวจสอบ (Validation): แจ้งเตือนหากผู้ใช้เลือก "วันที่สิ้นสุด" ก่อน "วันที่เริ่มต้น"
- ปุ่ม Submit: เมื่อกดส่งข้อมูล ให้เปลี่ยนเป็นสถานะ Loading (Spinner) ป้องกันการกดซ้ำ
- ตารางแสดงผล:
- โหลดข้อมูลอัตโนมัติเมื่อเปิดหน้าเว็บผ่าน google.script.run
- เรียงข้อมูลจากใหม่ไปเก่า (Reverse Array)
- มีป้ายกำกับสถานะ (Status Badge) แบบเปลี่ยนสีอัตโนมัติ: "รอดำเนินการ" (สีเหลือง), "อนุมัติ" (สีเขียว), "ไม่อนุมัติ" หรือ "ยกเลิก" (สีแดง)
- หลังจากบันทึกข้อมูลสำเร็จ ให้ล้างค่าในฟอร์ม แสดง Pop-up สำเร็จ และอัปเดตตารางโดยไม่ต้องรีเฟรชหน้าเว็บ

เขียนโค้ดสร้าง "ระบบลงทะเบียนใช้งาน Goodnotes Education" สำหรับโรงเรียนเทิงวิทยาคม โดยทำงานผ่านหน้าเว็บ (Frontend) และใช้ Google Apps Script (Backend) เพื่อบันทึกข้อมูลลง Google Sheets พร้อมส่งแจ้งเตือนผ่าน Telegram Bot

ให้แยกโค้ดเป็น 2 ไฟล์หลัก คือ 1. `index.html` (รวม HTML, CSS Tailwind, JS ไว้ในไฟล์เดียวเพื่อนำไป Host ภายนอก) และ 2. `Code.gs` (สำหรับฝั่ง Apps Script) โดยมีข้อกำหนดดังนี้:

ส่วนที่ 1: หน้าเว็บ Frontend (index.html)
1. การออกแบบ: ใช้ Tailwind CSS ให้หน้าเว็บสวยงาม ดูสะอาดตา Responsive รองรับมือถือ แท็บเล็ต และ PC ใช้โทนสีแดง (โรงเรียน) และเหลือง
2. ส่วนหัว (Header): แสดงโลโก้จำลอง (ตัวอักษร ท.ว.) และชื่อ "โรงเรียนเทิงวิทยาคม"
3. ระบบแท็บ (Tabs): มี 2 แท็บ คือ "ฟอร์มลงทะเบียน" และ "คู่มือการใช้งาน" (เนื้อหาคู่มืออธิบายการรับคำเชิญทางอีเมลและการโหลดแอปบน iPad/Mac)
4. ฟอร์มลงทะเบียน มีตัวเลือก (Radio button) ให้เลือกสถานะ: "คุณครู / บุคลากร" หรือ "นักเรียน" (Default เป็นครู)
5. ช่องกรอกข้อมูลสำหรับ "ครู":
- คำนำหน้า (นาย, นาง, นางสาว, อื่นๆ)
- ชื่อ และ นามสกุล
- อีเมล (บังคับต้องลงท้ายด้วย @thoengwit.ac.th หรือ @ndlp.go.th เท่านั้น)
6. ช่องกรอกข้อมูลสำหรับ "นักเรียน" (จะแสดงก็ต่อเมื่อเลือกสถานะเป็นนักเรียน โดยจัดกลุ่มให้ดูแตกต่างจากฟอร์มปกติ เช่น พื้นหลังสีเทาอ่อน):
- รหัสนักเรียน
- ระดับชั้น (ม.1 - ม.6)
- ห้อง (1 - 13 สร้างตัวเลือกด้วย JS)
- คำนำหน้า (เด็กชาย, เด็กหญิง, นาย, นางสาว, อื่นๆ)
- ชื่อ, นามสกุล, อีเมล (เงื่อนไขเดียวกับครู)
7. ระบบแจ้งเตือน (Alert): ใช้ SweetAlert2 ทั้งหมด ห้ามใช้ alert() ธรรมดา
- ตรวจสอบอีเมลโดเมนก่อนส่ง ถ้าผิดให้แจ้งเตือน
- แสดงหน้าต่างยืนยันข้อมูลก่อนกดส่ง (Confirm dialog)
- แสดงสถานะ Loading ขณะกำลังส่งข้อมูล
- แจ้งเตือนเมื่อสำเร็จ หรือเกิดข้อผิดพลาด
8. การเชื่อมต่อ API: ให้ใช้ fetch ส่งข้อมูลไปที่ Web App URL ของ Apps Script แบบ `text/plain` เพื่อป้องกันปัญหา CORS พร้อมอธิบายวิธีใส่ URL

ส่วนที่ 2: ฝั่ง Backend (Code.gs)
1. โครงสร้าง: สร้างฟังก์ชัน `doPost(e)` รับค่า JSON และ `doGet(e)` สำหรับทดสอบ
2. ตั้งค่าตัวแปร (Configuration) ไว้บนสุดให้แก้ไขง่าย: SPREADSHEET_ID, TELEGRAM_BOT_TOKEN, TELEGRAM_CHAT_ID (สำหรับแชทส่วนตัว)
3. การบันทึกข้อมูล Google Sheets:
- ตรวจสอบว่าอีเมลมีโดเมนที่ถูกต้อง (Server-side validation)
- แยกชีตบันทึกเป็น 2 ชีต: "Teachers" และ "Students"
- ครู บันทึก: Timestamp, Prefix, FirstName, LastName, Email
- นักเรียน บันทึก: Timestamp, StudentID, Prefix, FirstName, LastName, Grade, Room, Email
4. ระบบป้องกันข้อมูลซ้ำ (Duplicate Check):
- เช็คห้ามใช้อีเมลซ้ำ (ต้องตรวจสอบทั้งในชีต Teachers และ Students)
- เช็คห้ามรหัสนักเรียนซ้ำ (ตรวจสอบเฉพาะในชีต Students)
- หากซ้ำให้ Return JSON แจ้ง error กลับไปยัง Frontend
5. การแจ้งเตือน Telegram:
- เมื่อบันทึกสำเร็จ ให้ยิง API ไปที่ Telegram Bot
- ข้อความแจ้งเตือนจัดรูปแบบ HTML สวยงาม แสดง: สถานะ (ครู/นักเรียน), ชื่อ-สกุล, รหัสนักเรียน (ถ้ามี), ชั้น/ห้อง (ถ้ามี), และอีเมล

ขอโค้ดที่สมบูรณ์แบบ ทำงานได้จริง มีการจัดการ Error อย่างครบถ้วน และเขียนคอมเมนต์อธิบายในจุดที่สำคัญด้วยภาษาไทย

"ในฐานะผู้เชี่ยวชาญด้าน Google Apps Script และ Web Development ขอให้คุณเขียนโค้ดสำหรับสร้าง 'ระบบยืม-คืนอุปกรณ์โสตทัศนูปกรณ์' โดยใช้ Google Sheets เป็นฐานข้อมูล (Backend) และใช้ HTML/JS/CSS (Frontend) แสดงผลเป็น Web App

ขอให้แบ่งไฟล์เป็น Code.gs และ Index.html โดยมีรายละเอียดความต้องการดังนี้:

1. ส่วน Backend (Code.gs):

มีฟังก์ชัน doGet() สำหรับเรียกหน้าเว็บ

มีฟังก์ชันสำหรับตรวจสอบและสร้างชีตชื่อ 'Log' อัตโนมัติหากยังไม่มี โดยมีหัวตาราง ได้แก่: Timestamp, รหัสการยืม, ชื่อ-สกุล, สถานะ/ตำแหน่ง, อุปกรณ์ที่ยืม, วันที่ยืม, กำหนดคืน, วัตถุประสงค์, สถานะการยืม, เวลาที่คืนจริง

มีฟังก์ชันบันทึกข้อมูลการยืม โดยให้สร้าง 'รหัสการยืม' อัตโนมัติ (เช่น AV-YYYYMMDD-HHMMSS) และตั้งค่า 'สถานะการยืม' เป็น 'กำลังยืม'

มีฟังก์ชันดึงข้อมูลจากชีตเพื่อส่งไปแสดงผลที่ตาราง (เรียงจากรายการล่าสุดขึ้นก่อน) โดยให้แนบหมายเลขแถว (Row Index) ไปด้วยเพื่อใช้อ้างอิงตอนคืนของ

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

2. ส่วน Frontend (Index.html):

ใช้ Tailwind CSS (ผ่าน CDN) ในการตกแต่งให้ดูทันสมัย สะอาดตา และรองรับการแสดงผลบนมือถือ (Responsive)

ใช้ฟอนต์ภาษาไทย เช่น Google Font 'Prompt'

ส่วนฟอร์มยืมอุปกรณ์: ให้มีช่องกรอกข้อมูล ชื่อ-สกุล, ตำแหน่ง (Dropdown: นักเรียน, ครู/บุคลากร), อุปกรณ์ (Dropdown), วันที่ยืม, กำหนดคืน, และวัตถุประสงค์

ส่วนตารางประวัติ: แสดงประวัติการยืมทั้งหมด

หากสถานะเป็น 'กำลังยืม' ให้แสดงป้ายสีเหลือง และมีปุ่มกด 'คืนของ'

หากสถานะเป็น 'คืนแล้ว' ให้แสดงป้ายสีเขียว และแสดงเวลาที่คืน (ซ่อนปุ่มคืนของ)

การทำงานทั้งหมด (บันทึกฟอร์ม, โหลดตาราง, กดคืนของ) ต้องใช้ google.script.run เพื่อให้ระบบทำงานแบบเบื้องหลัง (Asynchronous) โดยไม่ต้องรีเฟรชหน้าเว็บ

มีสถานะ Loading (ตัวหมุนๆ) เวลาที่กำลังดึงข้อมูลหรือกำลังบันทึกข้อมูล

เมื่อกดปุ่ม 'คืนของ' ให้มีหน้าต่าง Confirm ถามความแน่ใจก่อนเสมอ

ขอให้แนบ ขั้นตอนการนำไปใช้งาน (Deployment) อย่างละเอียดมาให้ด้วย"

บทบาท (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) ไว้ในหน้าเว็บหรือใต้โค้ดให้เข้าใจง่าย