ตัวอย่างPrompt Canva Code

Prompt ระบบบันทึกการเยี่ยมบ้านนักเรียน

1. เป้าหมายหลัก (Primary Goal):

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

2. กลุ่มเป้าหมาย (Target Audience):

นักเรียน คณะครูและบุคลากรทางการศึกษาของโรงเรียนแม่จันวิทยาคม

3. โทนและสไตล์ (Tone & Style):

เป็นทางการและน่าเชื่อถือ: ใช้ภาษาที่เหมาะสมและมีการจัดวางที่เป็นระเบียบสะอาดและทันสมัย (Clean & Modern): ออกแบบให้ดูเรียบง่าย สบายตา ไม่ซับซ้อน

ใช้งานง่าย (User-Friendly): ผู้ใช้สามารถเข้าใจและกรอกข้อมูลได้โดยไม่ต้องมีคู่มือ

4. โครงสร้างและเลย์เอาต์ (Structure & Layout):

Responsive Design: หน้าเว็บต้องปรับขนาดและการจัดวางให้เหมาะสมกับทุกขนาดหน้าจอ โดยเฉพาะบนมือถือ

Single-Column Layout: จัดวางเนื้อหาหลักในคอลัมน์เดียวเพื่อให้อ่านง่ายบนอุปกรณ์พกพา

การแบ่งส่วนที่ชัดเจน (Clear Sectioning): ใช้การ์ด (Card) หรือกล่อง (Box) ที่มีเงาและขอบมนเพื่อแยกแต่ละส่วนของฟอร์มออกจากกันอย่างชัดเจน

หัวข้อที่โดดเด่น: แต่ละส่วนต้องมีหัวข้อ (Legend/Heading) ที่ชัดเจนและอ่านง่าย

5. องค์ประกอบหลัก (Key Components):

อ้างอิงข้อมูลจากเอกสาร "แบบบันทึกการเยี่ยมบ้านนักเรียน" ให้ครบถ้วน โดยแบ่งเป็นส่วนต่างๆ ดังนี้:

ส่วนหัว (Header):

ใส่ Logo โรงเรียน http://bit.ly/logomwk ขนาด 150px

หัวข้อหลัก: "แบบบันทึกการเยี่ยมบ้านนักเรียน"

ชื่อโรงเรียน: "โรงเรียนแม่จันวิทยาคม"

ส่วนข้อมูลทั่วไป:

ช่องสำหรับกรอก "วันที่บันทึกข้อมูล" (Date Input)

ส่วนข้อมูลนักเรียน:

ช่องกรอกข้อความ (Text Input) สำหรับ: ชื่อ-สกุล, ชั้นมัธยมศึกษาปีที่, หมายเลขโทรศัพท์

ส่วนข้อมูลผู้ปกครอง:

ช่องกรอกข้อความสำหรับ: ชื่อ-สกุล, ความสัมพันธ์กับนักเรียน, หมายเลขโทรศัพท์

ส่วนข้อมูลที่พักอาศัยและการเดินทาง:

กลุ่มตัวเลือก (Radio Button) สำหรับ "บ้านที่พักอาศัย" บ้านของตัวเอง ,บ้านเช่า เดือนละ.....บาท ,อาศัยอยู่กับผู้อื่น/ญาติ, หอพัก, อื่นๆ

ช่องกรอกตัวเลข (Number Input) สำหรับ: ระยะทาง, เวลาเดินทาง (ชั่วโมง/นาที), ค่าใช้จ่ายในการเดินทาง

กลุ่มตัวเลือกสำหรับ "การเดินทางมาโรงเรียน" พร้อมตัวเลือกย่อยสำหรับ "รถจักรยานยนต์" (มี/ไม่มีใบขับขี่)

ส่วนข้อมูลครอบครัว:

ช่องกรอกตัวเลขสำหรับ "จำนวนสมาชิกในครัวเรือน"

กลุ่มตัวเลือกสำหรับ "สถานภาพครอบครัว" และ "นักเรียนอาศัยอยู่กับ"

กลุ่มตัวเลือกสำหรับ "ความสัมพันธ์ของสมาชิกในครอบครัว"

พื้นที่ข้อความ (Text Area) สำหรับ "ภาระงาน/ความรับผิดชอบของนักเรียน"

ส่วนพฤติกรรมความเสี่ยง (ใช้ Checkbox เพราะเลือกได้มากกว่า 1 ข้อ):

ด้านสุขภาพ

พฤติกรรมการใช้สารเสพติด

พฤติกรรมเสี่ยงทางเพศ

การติดเกม

ส่วนปัญหาด้านการเรียน (ใช้ Checkbox):

รวมตัวเลือกต่างๆ เช่น ไม่มี, ติด 0/ร, เรียนซ้ำชั้น, ขาดเรียนบ่อย, หนีเรียน

ส่วนความช่วยเหลือที่ต้องการจากโรงเรียน:

กลุ่มตัวเลือก (Checkbox) สำหรับ: ด้านการเรียน, ด้านพฤติกรรม, ด้านทุนการศึกษา

พื้นที่ข้อความสำหรับ "ความช่วยเหลืออื่นๆ"

ปุ่มส่งข้อมูล (Submit Button):

ปุ่มขนาดใหญ่เต็มความกว้าง แสดงข้อความ "บันทึกข้อมูล" อย่างชัดเจน

6. เทคโนโลยีและเครื่องมือ (Technology & Tools):

Frontend: HTML5, CSS3

Framework: Tailwind CSS เพื่อความรวดเร็วในการสร้างดีไซน์ที่สวยงามและ Responsive

Font: ใช้ฟอนต์ภาษาไทยที่อ่านง่ายและเป็นทางการ เช่น 'Sarabun' จาก Google Fonts

7. สีและกราฟิก (Color & Graphics):

สีหลัก: ใช้สีน้ำเงิน (#3b82f6) สำหรับองค์ประกอบที่ต้องการเน้น เช่น ปุ่ม, ลิงก์, หรือเส้นขอบของช่องที่กำลังใช้งาน (Focus State)

สีพื้นหลัง: ใช้สีเทาอ่อน (#f3f4f6) สำหรับพื้นหลังของหน้า และสีขาวสำหรับพื้นหลังของการ์ดฟอร์มเพื่อสร้างความแตกต่าง

สีตัวอักษร: ใช้สีเทาเข้ม (#1f2937) สำหรับเนื้อหาทั่วไปและหัวข้อ เพื่อให้อ่านง่าย

8. ประสบการณ์ผู้ใช้ (User Experience - UX):

Visual Feedback: เมื่อผู้ใช้คลิกที่ช่องกรอกข้อมูล ควรมีเส้นขอบสีหรือเงาปรากฏขึ้น

Placeholders: ในช่องกรอกข้อความควรมีข้อความแนะนำ (Placeholder) เพื่อบอกใบ้ว่าควรกรอกข้อมูลอะไร

Logical Flow: ลำดับของหัวข้อในฟอร์มต้องเรียงตามเอกสารต้นฉบับเพื่อให้ผู้ใช้กรอกข้อมูลได้อย่างลื่นไหล

9. Footer:

ข้อความ: “© 2025 แบบบันทึกการเยี่ยมบ้าน โรงเรียนแม่จันวิทยาคม” อีกบรรทัด

Dev by Pichayanart Reerak

ระบบ ส่งงานออนไลน์ + แดชบอร์ดสถิติ บันทึกลง Google Sheet

Prompt ครั้งที่ 1

คุณคือผู้เชี่ยวชาญในการพัฒนาเว็บแอปพลิเคชั่น ให้สร้างระบบส่งงานออนไลน์แบบรวม โดยมีฟีเจอร์ 3 ส่วนในหน้าเดียว ได้แก่ 

1. ฟอร์มส่งงานของนักเรียน  

2. ระบบครูตรวจงานและให้คะแนน  

3. แดชบอร์ดแสดงผลการส่งงาน

ออกแบบหน้าเว็บแอปสำหรับ ระบบส่งงานออนไลน์  ให้ดูทันสมัย สวยงาม เรียบร้อย เน้นการใช้งานจริงในโรงเรียน ใช้โทนสีชมพูไล่โทนม่วง  แบบ minimal + professional ออกแบบ UI สไตล์มินิมอลน่ารักแบบเกาหลี (K-Minimal), ใช้โทนสีพาสเทล (ชมพู,  ม่วง, ขาว), ใช้งานง่ายบนมือถือและคอมพิวเตอร์ โดยบันทึกข้อมูลเชื่อมกับ google sheet ได้ มีไอคอนทุกหัวข้อสไตล์ Flat icon น่ารัก 

✅ ส่วน Header:

ใส่โลโก้ https://img5.pic.in.th/file/secure-sv1/logo-2262040b59d8d55b7.png

ขนาดกว้าง 150px ที่กึ่งกลางหรือมุมซ้ายบนของหน้า

ใต้โลโก้แสดงชื่อระบบ: "ระบบส่งงานออนไลน์ – วิชาวิทยาการคำนวณ ม.2"

ใช้ฟอนต์ Google “Prompt” ทั้งหน้า

โดยบันทึกข้อมูลลงใน google sheet คอลัมภ์ดังนี้

• วันเวลาที่ส่ง

• เลขที่

• ชื่อ-นามสกุล (มีคำนำหน้า)

• ชั้น/ห้อง (ม.2/1-ม.2/13)

• ชิ้นงานที่ส่ง (งานที่ 1-งานที่ 10)

• คำอธิบาย

• ลิงก์ผลงาน

• ไฟล์แนบ   

• สถานะ

• คะแนน

• ความคิดเห็นครู

สิ่งที่ต้องการ

1. นักเรียนกรอกข้อมูลและอัพโหลดไฟล์เข้าระบบเชื่อมไปยัง google drive ได้

2. ครู ให้มีระบบ Login เข้าถึงด้วยรหัสผ่าน เช่น  admin999  เพื่อป้องกันนักเรียนเข้าไปให้คะแนนตัวเอง

3. แดชบอร์ดแสดงผล (Dashboard Visualization)

ดีไซน์หน้าเว็บไซต์โดยรวม**

- แบ่งเป็น 3 Section ชัดเจน (บน-กลาง-ล่าง)  

- ใช้กล่องโค้งมน (Rounded) ทุกส่วน  

- มีไอคอนน่ารักประกอบ เช่น ดาว, สมุด, แฟ้ม  สไตล์ Flat icon

✅ แนวทางจัดหน้าเว็บให้ดูง่าย:

แนวตั้งแบบยาว (Single Page Layout)

เหมาะกับมือถือ/ฝัง Google Sites

แบ่ง Section ด้วยพื้นหลังสลับสี หรือใส่ Header สีอ่อน

เพิ่มปุ่มเมนูด้านบนแบบ Smooth Scroll:

[ส่งงาน] | [แดชบอร์ดครู] | [สถิติ]

(กดแล้วเลื่อนลงอัตโนมัติ)

ใช้ Emoji/ไอคอนประกอบหัวข้อย่อย เช่น

"คะแนนเฉลี่ย ⭐", "ยังไม่ส่ง ❗", "ตรวจแล้ว ✅"

footer ใส่รายละเอียดเป็น พัฒนาโดย ศน.อ๊อด :: ฐิติวัฒน์  จัดดี | www.krunites.in.th

© 2025 ระบบส่งงานออนไลน์

Prompt ครั้งที่ 2

ฉันต้องการที่จะใช้ webapp นี้เรียกใช้ backend api url=”XXX”

ซึ่งเป็น google apps script เพื่อบันทึกข้อมูลไว้ใน google sheet id=”1NqkLUccAkYTFQerBNqAp1x3E3HlYveJnyjy9nYsDlro” 

เมื่อนักเรียนแนบไฟล์และกดส่งงาน ให้อัพโหลดไฟล์ไปที่ google drive folder id=”1ycpbXYIvXUNQZN7theMYOU9s7e_Oky2L”

// อัปโหลดเข้าโฟลเดอร์ที่กำหนด 

และมีสคริปต์สำหรับดึงข้อมูลมาจาก google sheet มาแสดงผลในแดชบอร์ดสถิติแบบ realtime 

ช่วยแสดงโค้ด appscript สำหรับรับข้อมูลการกรอก form ให้หน่อย 

แนวทางการอัพโหลดงานไปที่โฟลเดอร์ใน google drive ดังนี้

const FOLDER_ID = "1ycpbXYIvXUNQZN7theMYOU9s7e_Oky2L"; // 👈 วาง Folder ID ของคุณตรงนี้

function doPost(e) {

 try {

   const params = e.parameter;

   // ตรวจสอบว่าข้อมูลครบไหม

   if (!params.name || !params.email || !params.message || !params.file || !params.filename) {

     return message("Error: Missing parameters");

   }

   // แปลง base64 เป็นไฟล์ PDF blob

   const data = Utilities.base64Decode(params.file, Utilities.Charset.UTF_8);

   const blob = Utilities.newBlob(data, MimeType.PDF, params.filename);

   // อัปโหลดเข้าโฟลเดอร์ที่กำหนด

   const folder = DriveApp.getFolderById(FOLDER_ID);

   const file = folder.createFile(blob);

   const fileUrl = "https://drive.google.com/file/d/" + file.getId() + "/view?usp=sharing";

   // บันทึกข้อมูลลง Google Sheet

   const sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();

   sheet.appendRow([

     new Date(),                // วันเวลาที่ส่ง

     params.studentNumber,      // เลขที่

     params.studentName,        // ชื่อ-นามสกุล

     params.classroom,          // ชั้น/ห้อง

     params.assignmentNumber,   // ชิ้นงาน

     params.description || "",  // คำอธิบาย

     params.workLink || "",     // ลิงก์ผลงาน

     fileUrl,                   // ไฟล์แนบ

     params.submissionDate,     // วันที่ส่ง

     "ยังไม่ตรวจ",                // สถานะ

     "",                        // คะแนน

     ""                         // ความคิดเห็นครู

   ]);

   return message("completed");

 } catch (err) {

   return message("Error: " + err.message);

 }

}

function message(msg) {

 return ContentService.createTextOutput(JSON.stringify({ result: msg }))

   .setMimeType(ContentService.MimeType.JSON);

}

โดยแสดง code appscript ลงในช่องแชทด้านซ้ายนี้ 

หลังจากที่สร้างหน้าเว็บไซต์ Frontend เรียบร้อยแล้ว

--------------------------

Prompt ครั้งที่ 3

Copy the web app URL and replace 'https://script.google.com/macros/s/..../exec' in your HTML code with this URL

--------------------------

Prompt ครั้งที่ 4 (ถ้ายังเชื่อม Google Sheet ไม่ได้)

ระบบหน้า Frontend ถูกต้อง สวยงาม ดีทุกอย่าง ขอให้บันทึกข้อมูลลงใน sheet id = "xxx"

ให้ frontend เรียก backend ด้วยการใช้ contentType = text/plain

ปรับเพิ่มเติม คือ ให้ frontend เรียก backend โดยการใช้ contentType = text/plain

--------------------------

Prompt ครั้งที่ 5 (ถ้ายังเชื่อม Google Sheet ไม่ได้)

เว็บไซต์สวยงามแล้ว ขอแก้ไขแค่ส่วนของการเชื่อม Database ขอแนวทางให้เชื่อมฐานข้อมูลลง sheet id="xxx"

—————————————————————————————————————————

—————————————————————————————————————————