บทที่ 02 / 02 · งานฝึกปฏิบัติ

เขียน Prompt 6 ส่วนเพื่อเปลี่ยนชื่อโรงแรม

แบบฝึกหัดนี้สอนให้สั่งงาน AI coding agent อย่างชัดเจน: บอกข้อมูล บริบท ข้อห้าม งานเดิม จุดที่ต้องแก้ และวิธีตรวจ

เริ่มหลังขั้นติดตั้งผ่านมีแบบฟอร์มสร้างข้อความให้คัดลอก

ก่อนส่งงานให้ AI

ถ้าจะลงมือแก้เว็บ ให้เปิดระบบและทำ แบบฝึกพื้นฐาน ให้ได้ก่อน ส่วนการฝึกเขียนข้อความด้านล่างเริ่มได้แม้เครื่องยังติดตั้งไม่เสร็จ
เปิดโปรแกรม AI coding agent ที่ผู้จัดอบรมกำหนด หากยังไม่มีโปรแกรมหรือบัญชี ให้ขอผู้สอนช่วยเตรียมก่อน ไม่ต้องเลือกซื้อเอง แล้วเปิดโฟลเดอร์โปรเจกต์ที่มี package.json ให้โปรแกรมเห็นไฟล์จริง
เตรียม ชื่อโรงแรมใหม่ ที่ต้องการใช้ในแบบฝึกหัด และสโลแกนใหม่ถ้าต้องการเปลี่ยน
สำรองโฟลเดอร์โปรเจกต์ก่อนเริ่ม เพราะชุดนี้ยังไม่ใช้ Git

ใช้ข้อมูลสมมติในการฝึก

นี่เป็นงานฝึกเปลี่ยนข้อความบนเว็บทดลอง อย่าใส่ชื่อโรงแรมจริง ข้อมูลแขก รหัสผ่าน หรือข้อมูลชำระเงินใน prompt

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

ฝึกบอกงานให้ชัด ก่อนใช้ข้อความยาว

Prompt คือข้อความบอกงานให้ AI ลองนึกว่ากำลังอธิบายให้เพื่อนที่ยังไม่รู้เรื่องงานนี้ฟัง ใช้ภาษาไทยธรรมดาได้ ไม่ต้องเริ่มจากศัพท์เทคนิค

ข้อความ	AI รู้อะไรจากข้อความนี้
“ช่วยแก้เว็บให้หน่อย”	ยังไม่รู้ว่าต้องแก้อะไรและแบบไหนจึงถือว่าเสร็จ
“เปลี่ยนชื่อที่แสดงบนเว็บจาก SALA เป็น โรงแรมตัวอย่างริมสวน คงสีและการทำงานเดิม แล้วบอกวิธีตรวจว่าชื่อเปลี่ยนครบ”	รู้สิ่งที่ต้องเปลี่ยน ขอบเขตที่ให้คงไว้ และผลที่ต้องส่งกลับ

ลองทำเอง: เลือกชื่อโรงแรมสมมติหนึ่งชื่อ แล้วเขียนคำสั่ง 3 ประโยค: อยากเปลี่ยนอะไร / อะไรต้องคงเดิม / จะตรวจผลอย่างไร เขียนลงกระดาษหรือโปรแกรมจดบันทึกก่อนก็ได้

แบบฟอร์มด้านล่างจะเติมรายละเอียดของโปรเจกต์ให้ครบ 6 ส่วน อ่านส่วนที่ 1, 5 และ 6 เพื่อยืนยันว่าเป็นงานที่ต้องการก่อนคัดลอกไปใช้

กด “สร้าง Prompt” แล้วยังไม่ได้แก้เว็บ

ปุ่มนี้เพียงสร้างข้อความ เมื่อคัดลอกไปส่งในโปรแกรมช่วยแก้โค้ดที่เปิดโฟลเดอร์งานแล้ว จึงเริ่มสั่งให้ AI ทำงาน ไม่ต้องวาง Prompt นี้ใน Terminal หรือแชตหน้าแขกของ SALA

ทำไมต้องมี 6 ส่วน

ส่วน	บอกอะไร	ช่วยลดปัญหาอะไร
1 · ข้อมูลที่กรอก	ชื่อโรงแรมและสโลแกน	AI ไม่เดาชื่อเอง
2 · บริบท	โปรเจกต์นี้ทำอะไร ใช้เทคโนโลยีอะไร	AI ไม่แก้ผิดระบบ
3 · ข้อห้าม	คง sandbox และขอบเขตงาน	ไม่แตะการเงิน/cloud/งานรออนุมัติ
4 · งานเดิม	Recheck และเทสต์ที่มีอยู่	ไม่เขียนทับสิ่งที่ทำงานแล้ว
5 · งานที่สั่ง	ระบุไฟล์และจุดที่ต้องเปลี่ยน	ไม่ค้นแล้วแทนที่ทุกคำแบบผิด ๆ
6 · วิธีตรวจ	ค้นคำ รันเทสต์ เปิดเว็บดู	รู้ว่าเสร็จจริงหรือยัง

ข้อความด้านล่างดัดแปลงจาก PDF ต้นทาง ให้กรอกง่ายขึ้น แต่ยังคงขอบเขตและข้อควรระวังหลัก

กรอกชื่อ แล้วสร้างข้อความพร้อมส่ง

พิมพ์ชื่อโรงแรมสมมติในช่องแรก หากไม่อยากเปลี่ยนสโลแกน ปล่อยช่องที่สองว่าง จากนั้นกด “สร้าง Prompt” และ “คัดลอก” ข้อความจะสร้างในเบราว์เซอร์ของคุณเอง

ชื่อโรงแรมที่ต้องการใช้ในงานฝึก *สโลแกนใต้โลโก้ (ไม่บังคับ)

ข้อความที่ต้องส่งให้ AI coding agent

กรอกชื่อโรงแรม แล้วกด “สร้าง Prompt” ก่อนคัดลอก

ตัวอย่างวิธีกรอก

ถ้าต้องการชื่อ “โรงแรมตัวอย่างริมสวน” ให้พิมพ์ชื่อนี้ในช่องแรกเท่านั้น ไม่ต้องพิมพ์วงเล็บเหลี่ยม [ ] หรือคำว่า “ชื่อโรงแรม:” ซ้ำ

ส่งข้อความให้ AI coding agent

ในโปรแกรม AI coding agent ให้ตรวจว่าเปิดโฟลเดอร์โปรเจกต์ SALA ถูกอันแล้ว โดยเห็น AGENTS.md, README.md และ package.json
กลับมาหน้านี้ กด คัดลอก ในกรอบ Prompt ที่สร้างแล้ว
คลิกช่องแชตของ agent กด ⌘ + V (Mac) หรือ Ctrl + V (Windows) วางข้อความทั้งหมด แล้วกดส่ง
รอให้ agent แก้ไฟล์ รัน npm test และรายงานผล ให้ตรวจรายงานกับไฟล์จริงก่อนบอกว่าเสร็จ

✓ข้อความที่ส่งมีชื่อโรงแรมสมมติที่คุณกรอกในส่วนที่ 1 และมีครบทั้ง 6 ส่วน ไม่เหลือคำว่า __HOTEL_NAME__

ตรวจผลงานก่อนส่งให้ผู้สอน

ดูชื่อใหม่ที่แท็บเบราว์เซอร์ หน้าแขก หน้าเข้าสู่ระบบพนักงาน และหน้าผู้ดูแล
ตรวจค่าชื่อโรงแรมในหน้าผู้ดูแล “บริการและนโยบาย” เพราะฐานข้อมูลเดิมไม่เปลี่ยนตามโค้ดอัตโนมัติ
รัน npm test จากโฟลเดอร์โปรเจกต์ ผลของโค้ดต้นฉบับคือ 56 ผ่าน 0 ไม่ผ่าน
ตรวจว่า src/recheck.js และ src/ai.js ยังทำงาน และระบบยังเป็น sandbox
ให้ agent สรุปไฟล์ที่แก้ จุดที่ตั้งใจคงไว้ และปัญหาที่พบ โดยไม่แก้งานอื่นนอกโจทย์

ชื่อภายในอาจคง SALA

ชื่อ cookie อย่าง sala_session หรือคีย์ภาษา sala-language เป็นชื่อภายใน การเปลี่ยนอาจทำให้คนที่ล็อกอินอยู่หลุดหนึ่งครั้ง จึงคงไว้ได้ถ้าบอกเหตุผล ห้ามแก้ไฟล์ผลทดสอบเก่า .json หรือ .txt เพื่อให้ดูเหมือนผลดีขึ้น

ส่งผลงานและทบทวนด้วยตัวเอง

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

หากชื่อยังไม่เปลี่ยน: ลองโหลดหน้าเว็บใหม่ จากนั้นเข้า “ตั้งค่าโรงแรม” → “บริการและนโยบาย” ตรวจช่อง “ชื่อโรงแรม” หากแก้โค้ดฝั่งระบบแล้ว ให้หยุดและเปิดระบบใหม่ตาม วิธีเปิดใช้งาน

ถ้ายังติดขัด ส่งต่อให้ AI ด้วยข้อความเจาะจง เช่น “หน้าแขกยังแสดงชื่อ SALA หลังโหลดหน้าใหม่ แต่หน้าเข้าสู่ระบบแสดงชื่อใหม่แล้ว ช่วยตรวจสาเหตุโดยคงขอบเขตงานเดิม”