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

Prompt ครั้งที่ 1
1. โครงสร้างหน้าจอ
– **Header**: โลโก้ (https://imprnoom.com/logonoom1.png) ขนาดเหมาะสม (ไม่เกิน 150px) มี title ระบบกรอกพิกัดการเยี่ยมบ้านนักเรียน อยู่ด้านล่าง ไม่ต้องมี background
– **Footer**: ข้อความ “© 2025 ระบบกรอกพิกัดการเยี่ยมบ้านนักเรียน | Pichayanart Reerak” อยู่ตรงกลาง ไม่ต้องมี blackground
2. ฟอนต์และธีม
– ใช้ Google Font “Noto Sans Thai”
– ธีมสีสดใส สไตล์ Educational Tech (ผสมสีฟ้า-ขาว)
– ดีไซน์เรียบง่าย ทันสมัย สวยงาม รองรับ Responsive (มือถือ/แท็บเล็ต/เดสก์ท็อป)
3. แท็บจัดการข้อมูล
– **แท็บที่ 1:เพิ่มข้อมูล**
ฟอร์มกรอกข้อมูล:
- เลขประจำตัวนักเรียน (input text)
- คำนำหน้า (select เช่น เด็กชาย / เด็กหญิง / นาย / นางสาว)
- ชื่อ-นามสกุล (input text)
- ระดับชั้น (select ม.1 - ม.6)
- ห้อง (select 1-11)
- เบอร์โทรศัพท์ (input text พร้อมตรวจสอบรูปแบบเบอร์)
- ชื่อหมู่บ้าน (input text)
- ตำบล (input text)
- อำเภอ (input text)
- จังหวัด (input text)
- พิกัดละติจูด (input number หรือ map picker)
- พิกัดลองจิจูด (input number หรือ map picker)
- อัปโหลดรูปบ้าน 2 รูป (file upload พร้อม preview) และเก็บไว้ใน Google drive
แจ้งการรองรับไฟล์ .jpg .jpeg .png ไม่เกิน 5MB
– **แท็บที่ 2:แสดงข้อมูล**
ตารางแสดงข้อมูล (ใช้ DataTable) หัวข้อ ข้อมูลพิกัดการเยี่ยมบ้านนักเรียน
- คอลัมน์: เลขประจำตัว คำนำหน้า ชื่อ-นามสกุล ระดับชั้น ห้อง เบอร์โทรศัพท์ พิกัดละติจูด ลองจิจูด
และแสดงข้อมูลที่บันทึกทั้งหมดให้สามารถคลิกเข้าไปดูข้อมูลเพิ่มเติมของแต่ละบุคคลได้ โดยไม่ต้องแสดงรูปภาพบ้าน แต่ให้แสดงลิงค์รูปภาพจาก Google drive
เมื่อกดอัปโหลด
- แปลงรูปภาพเป็น base64
- ส่งข้อมูลไปยัง Web App URL ด้วย POST
- มีแจ้งเตือน SweetAlert2 อย่างสวยงามในการบันทึกข้อมูลและอัพโหลดรูปภาพเสร็จสิ้น
- มีปุ่ม refresh ข้อมูลในหน้าแสดงข้อมูล
– **แท็บที่ 3 : Dashboard สารสนเทศ**
- ใช้ Chart.js แสดงกราฟสรุปข้อมูลทั้งหมด
แผนภูมิแท่งแสดงจำนวนนักเรียนแต่ละระดับชั้น
แผนภูมิวงกลมแสดงตำบล
4. เทคโนโลยีที่ใช้ (ระบุให้ AI รู้จัก)
– HTML5, CSS3, JavaScript
– Tailwind CSS CDN
– jQuery, jQuery Validate
– DataTables CDN
– SweetAlert2 CDN
– Chart.js CDN
5. ฟีเจอร์เพิ่มเติม
– เก็บข้อมูลใน LocalStorage (สำหรับ Demo)
– รองรับภาษาไทยเต็มรูปแบบ
– UI/UX: ปุ่ม, ฟอร์ม, ตาราง, กราฟ ดีไซน์สวยงาม ใช้งานง่าย
- ไม่ต้องมีการแก้ไขหรือลบให้สามารถกรอกข้อมูลได้เท่านั้น
โปรดสร้างโค้ดหน้าตาเว็บทั้งหมดให้สวยงาม พร้อมไฟล์ HTML/CSS/JS และตัวอย่าง Mock Data JSON ที่ใช้งานจริง
Prompt ครั้งที่ 2
ฉันอยากเก็บข้อมูลจริง โดยใช้ google sheet เป็นที่เก็บข้อมูล และใช้ google apps script เป็น api และเรียกใช้ api ผ่าน url=”XXXXXXXX” เพื่อใช้งานระบบกรอกข้อมูลพิกัดการเยี่ยมบ้านให้หน่อย และการเรียกใช้ API ขอให้เป็น รูปแบบ json data และการส่งผ่านขอเป็น contentType=text/plain แปลงรูปภาพเป็น base64 ส่งข้อมูลไปยัง Web App URL ด้วย POST
สร้างระบบหรือเวิร์กโฟลว์ที่เมื่อฉันอัปโหลดภาพ
ระบบจะ:
1. อัปโหลดรูปภาพเข้าโฟลเดอร์ที่ฉันกำหนดไว้ใน Google Drive
2. สร้างลิงก์แบบ “แชร์ได้” ของรูปภาพ (Anyone with the link can view)
3. เพิ่มข้อมูลลงใน Google Sheet โดยระบุชื่อไฟล์ และลิงก์ภาพที่คลิกได้