ให้ AI Agent ดำเนินการแทนทั้งหมด — คุณเพียงระบุความต้องการให้ชัดเจน
สิ่งที่ต้องเตรียม: คอมพิวเตอร์โน้ตบุ๊กและอีเมลเท่านั้น — เครื่องมือหลักคือ AI Agent ที่หลายท่านใช้งานอยู่แล้ว
ไม่เพียงความรู้ แต่เป็นผลงานจริงที่จับต้องได้
เผยแพร่ออนไลน์จริง มีลิงก์สำหรับแชร์ เปิดได้จากทุกอุปกรณ์ — สร้างเสร็จภายในคลาสนี้
หลักการเดียว นำไปประยุกต์สร้างเว็บไซต์ได้ทุกรูปแบบ โดยไม่ต้องเขียนโค้ด
แยกแยะได้ว่างานใดดำเนินการเองได้ และงานใดควรให้ Developer ร่วมตรวจสอบ
แนวทางของคลาสนี้: ผิดพลาดได้โดยไม่มีผลเสีย — หากผลลัพธ์ไม่ถูกต้อง สามารถสั่งใหม่ได้ทันที ทุกคำถามมีคุณค่า และใช้เพียงภาษาไทยทั่วไปในการสั่งงาน
บรรยายกระชับ เน้นการลงมือปฏิบัติเป็นหลัก
ผู้สอนจะสาธิตให้ชมทั้งกระบวนการ — ขั้นตอนนี้ยังไม่ต้องปฏิบัติตาม
กระบวนการเดียวกันนี้ ผู้เรียนทุกท่านทำได้ด้วยตนเอง
ผู้สั่งไม่จำเป็นต้องทำอาหารเป็น — เพียงสื่อสารความต้องการให้ชัดเจน
ระบุความต้องการให้ครบถ้วนและชัดเจน เช่นเดียวกับการสั่งอาหาร
ดำเนินการทั้งหมด (เขียนโค้ด) แทนคุณ ด้วยความเร็วสูง
ผลลัพธ์ไม่ตรงใจ สั่งปรับแก้ได้ไม่จำกัดจำนวนครั้ง
คำว่า "Vibe Coding" เกิดขึ้นต้นปี 2025 — ปัจจุบันเป็นวิธีการทำงานมาตรฐาน แม้แต่นักพัฒนามืออาชีพก็ใช้แนวทางนี้
ความเชื่อ 4 ประการที่เคยเป็นจริง แต่ไม่เป็นจริงอีกต่อไปในปี 2026
สิ่งที่ยังคงเป็นจริง: ระบบขนาดใหญ่ที่เกี่ยวข้องกับธุรกรรมการเงินหรือข้อมูลลูกค้าจริง ยังควรมี Developer ร่วมตรวจสอบ — ช่วงท้ายของหลักสูตรจะอธิบายขอบเขตอย่างชัดเจน
เครื่องมือหลักคือ AI Agent — AI ที่ไม่เพียง "ตอบคำถาม" แต่ "ลงมือดำเนินการ" และแนะนำเราทีละขั้นตอน
สั่งงานด้วยภาษาไทย → agent เขียนโค้ดและสร้างเว็บไซต์ทั้งหมด พร้อมหน้าต่างแสดงตัวอย่างแบบเรียลไทม์ — สั่งปรับแก้ต่อเนื่องได้ในบทสนทนาเดิม
ที่อยู่ของเว็บไซต์เรา — Pages สำหรับเผยแพร่เว็บด้วยการอัปโหลดไฟล์ และ D1 ฐานข้อมูลสำหรับเว็บที่บันทึกข้อมูล
การเตรียมความพร้อม: ลงชื่อเข้าใช้ claude.ai (หรือ agent ที่ท่านใช้ประจำ) และสมัคร dash.cloudflare.com (ไม่มีค่าใช้จ่าย ใช้อีเมลหรือบัญชี Google/Apple) — กรุณาดำเนินการให้เรียบร้อยในขั้นตอนนี้
หมายเหตุ: ยังมีเครื่องมือประเภท App Builder (Lovable, Bolt) ซึ่งจะแนะนำในภายหลัง — หลักสูตรนี้เลือกใช้ agent ที่ผู้เรียนส่วนใหญ่มีอยู่แล้ว
ระบุข้อมูลครบทั้ง 3 ส่วนนี้ สามารถสร้างเว็บไซต์ได้ทุกรูปแบบ
"เว็บแนะนำบริการรับทำบัญชี สำหรับเจ้าของร้านค้าออนไลน์"
ระบุเป็นรายการ: ชื่อ, บริการ 3 รายการ, ราคา, รีวิว, ช่องทางติดต่อ
"โทนน้ำเงินดูน่าเชื่อถือ ภาษาไทย ดูดีบนมือถือ"
ยึดหลักทั้งสามข้อนี้ จะช่วยให้การทำงานราบรื่นขึ้นอย่างมาก
สร้างโครงสร้างหลักก่อน แล้วจึงเพิ่มรายละเอียดทีละส่วน — การสั่งหลายรายการพร้อมกันทำให้ผลลัพธ์คลาดเคลื่อนได้ง่าย
"เปลี่ยนพื้นหลังเป็นสีครีม" ให้ผลดีกว่า "ทำให้สวยกว่านี้" — ยิ่งระบุชัดเจน ผลลัพธ์ยิ่งตรงตามต้องการ
เมื่อพบความผิดปกติหรือข้อความ Error ให้บันทึกภาพหน้าจอส่งให้ AI พร้อมคำอธิบาย — AI ในปัจจุบันวิเคราะห์ภาพได้อย่างแม่นยำ
เลือกโจทย์ที่ตรงกับสายงานของท่าน 1 หัวข้อ — หรือใช้โจทย์จากธุรกิจ/ทีมของท่านเองได้
เว็บนำเสนอบริการของธุรกิจ (เช่น บริการรับทำบัญชี) พร้อมราคาและรีวิวลูกค้า
นำเสนอสินค้า 1 รายการ พร้อมจุดเด่น โปรโมชั่น และปุ่มสั่งซื้อ
หน้าโปรไฟล์ส่วนบุคคล นำเสนอผลงาน บริการ และปุ่มนัดหมาย
ประกาศรับสมัคร 1 ตำแหน่ง แสดงรายละเอียดงาน สวัสดิการ และปุ่มสมัคร
เป้าหมายที่วัดผลได้: เมื่อจบ Workshop นี้ ผู้เรียนทุกท่านมีลิงก์เว็บไซต์ที่เผยแพร่จริง ส่งเข้ากลุ่มของห้องได้ 1 ลิงก์
หากติดขัดขั้นตอนใด กรุณาแจ้งผู้สอน — ทุกท่านต้องผ่านขั้นตอนนี้ก่อนดำเนินการต่อ
(ช่องแชทของ AI Agent)
คัดลอกแบบฟอร์มนี้ แล้วแก้ไขเฉพาะข้อความในช่องเส้นประให้เป็นข้อมูลของท่าน
เปิด agent อีกแท็บ แล้วสั่ง: "ช่วยคิดสโลแกนบริการรับทำบัญชี 5 แบบ สั้น ๆ ภาษาไทย" จากนั้นเลือกแบบที่เหมาะสมมาใช้
เบอร์โทร ราคา และรีวิว สามารถใส่ข้อมูลตัวอย่างไปก่อนและแก้ไขภายหลังได้ — ไม่จำเป็นต้องใช้เวลามากในขั้นตอนนี้
Agent จะแสดง "หน้าต่างตัวอย่างเว็บไซต์" ข้างบทสนทนา — หน้าจอจะมีลักษณะดังนี้
ปิดงบไว ไร้กังวลภาษี
ระหว่างรอ AI ดำเนินการ แนะนำให้จดรายการที่ต้องการแก้ไข 3 รายการ (สี ข้อความ หรือรูปภาพ)
ผลลัพธ์ครั้งแรกอาจยังไม่ตรงตามต้องการ — ถือเป็นเรื่องปกติ ขั้นตอนถัดไปคือการสั่งปรับแก้
พิมพ์ต่อในบทสนทนาเดิม — ตัวอย่างประโยคสำเร็จรูป เลือกใช้ได้ตามความเหมาะสม
ข้อแนะนำ: ส่งคำสั่งทีละรายการ รอผลลัพธ์ ตรวจสอบ แล้วจึงส่งรายการถัดไป — โดยทั่วไปปรับแก้ 3 รอบก็ได้ผลลัพธ์ที่ดี ไม่จำเป็นต้องสมบูรณ์แบบภายในคลาส
หมายเหตุ: ผู้ใช้ Claude มีทางเลือกเพิ่มเติม — ปุ่ม Share/Publish ที่หน้าต่างตัวอย่าง สำหรับแชร์ลิงก์อย่างรวดเร็ว (Cloudflare เหมาะสำหรับลิงก์ถาวรและการเชื่อมต่อโดเมนองค์กร)
✓ เผยแพร่สำเร็จ
pp-accounting.pages.devขอแสดงความยินดี — ท่านได้สร้างเว็บไซต์แรกสำเร็จ โดยไม่ต้องเขียนโค้ดแม้แต่บรรทัดเดียว
นอกจาก AI Agent ยังมีแพลตฟอร์มสำเร็จรูป เช่น Lovable, Bolt.new, v0 — สั่งงานด้วยภาษาไทยในลักษณะเดียวกัน
ประเด็นสำคัญ: โครงสร้าง 3 ส่วนและหลักปฏิบัติ 3 ข้อ ใช้ได้กับเครื่องมือทั้งสองประเภท — ทักษะถ่ายโอนถึงกันได้ทันที
เชิญชมผลงานของเพื่อนร่วมคลาสในกลุ่ม — และเตรียมแลกเปลี่ยนความเห็นเมื่อกลับมา
ช่วงถัดไป: เว็บที่ "บันทึกข้อมูลได้" — ระบบที่นำไปใช้งานจริงในองค์กรได้ทันที
ช่วงแรกเราสร้าง "โปสเตอร์" — ช่วงนี้เราจะสร้าง "สมุดบันทึก"
เปรียบเสมือนโปสเตอร์หน้าร้าน — ผู้เข้าชมทุกคนเห็นเนื้อหาเดียวกัน อ่านได้อย่างเดียว เช่น เว็บแนะนำบริการ หน้าประชาสัมพันธ์
เปรียบเสมือนสมุดบันทึกของทีม — บันทึกข้อมูลได้ ข้อมูลคงอยู่ถาวร และทุกคนเห็นข้อมูลชุดเดียวกัน
ตารางที่เว็บนำข้อมูลไปบันทึกไว้ — ในหลักสูตรนี้ใช้ D1 ฐานข้อมูลของ Cloudflare ซึ่งอยู่บนแพลตฟอร์มเดียวกับเว็บของเรา (ไม่มีค่าใช้จ่าย)
| ชื่อลูกค้า | เบอร์ | สถานะ |
|---|---|---|
| คุณเมย์ | 081-xxx-1234 | ลูกค้าใหม่ |
| คุณต้น | 089-xxx-5678 | กำลังติดตาม |
| คุณฝน | 092-xxx-9012 | ปิดการขาย |
ประเด็นสำคัญ: ท่านไม่จำเป็นต้องเข้าใจกลไกภายใน — AI Agent จะเขียนโค้ดทั้งหมด และแนะนำการตั้งค่าใน Cloudflare ทีละขั้นตอน (ทุกบริการไม่มีค่าใช้จ่าย)
เลือกโจทย์ 1 หัวข้อ — แนะนำหัวข้อที่นำไปใช้งานจริงในทีมได้ทันที
เป้าหมายที่วัดผลได้: บันทึกข้อมูลผ่านเว็บ → รีเฟรชแล้วข้อมูลคงอยู่ (จัดเก็บในฐานข้อมูลจริง) — และผู้อื่นบันทึกข้อมูลจากอุปกรณ์ของตนได้
เปิดบทสนทนาใหม่กับ agent ใช้โครงสร้าง 3 ส่วนเช่นเดิม และเพิ่มสองบรรทัดสำคัญต่อท้าย
โจทย์ B/C/D ใช้โครงสร้างเดียวกัน — เปลี่ยนเฉพาะส่วน "องค์ประกอบในเว็บ" ตามโจทย์ที่เลือก โดยสองบรรทัดสุดท้ายต้องระบุทุกครั้ง — คำศัพท์ใหม่มีเพียง 2 คำ: Worker = ส่วนที่ประมวลผลเว็บของเรา, D1 = ตารางจัดเก็บข้อมูล
บรรทัดแรกระบุปลายทางของข้อมูล (Cloudflare D1) และรูปแบบโค้ดที่นำไปใช้เองได้ — บรรทัดที่สองกำหนดให้ agent ทำหน้าที่พี่เลี้ยง แนะนำทีละขั้นตอน แทนการส่งขั้นตอนทั้งหมดมาพร้อมกัน
ส่วนแรกคือ "ตารางข้อมูล (D1)" ส่วนที่สองคือ "ตัวประมวลผลเว็บ (Worker)" — agent จะแนะนำโดยละเอียด ต่อไปนี้คือภาพรวม
หากพบหน้าจอที่ไม่แน่ใจ → ส่งภาพหน้าจอสอบถาม agent ว่าควรดำเนินการอย่างไร — นี่คือข้อได้เปรียบของการมี agent เป็นพี่เลี้ยง
Storage & Databases ▸ D1 → Create database: crm-db ✓
Workers & Pages ▸ Create ▸ Worker: สมุดลูกค้า ✓
Edit code → วางโค้ดจาก agent ทั้งชุด → Save
ขั้นตอนสุดท้ายของการเชื่อมระบบ: กำหนดให้ Worker รู้จักตารางข้อมูล (เรียกว่า Binding) — agent จะระบุชื่อที่ต้องใช้ให้ตรงกัน
ที่ Worker → Settings → Bindings → Add → เลือก D1 database → เลือก crm-db
(ชื่อตัวแปรต้องตรงตามที่ agent ระบุทุกตัวอักษร)
กด Deploy → ได้ลิงก์เว็บไซต์
สมุดลูกค้า.workers.dev
เว็บเผยแพร่ออนไลน์ตั้งแต่ขั้นตอนนี้
เปิดลิงก์ → บันทึกข้อมูลตัวอย่าง 2–3 รายการ → รีเฟรช F5 → ข้อมูลคงอยู่ = ผ่านเกณฑ์
กรณีพบ Error หรือข้อมูลไม่ถูกบันทึก: ส่งภาพหน้าจอให้ agent พร้อมขอให้ตรวจสอบทีละจุด — สาเหตุส่วนใหญ่คือชื่อ Binding ไม่ตรงกับในโค้ด ซึ่ง agent แก้ไขให้ได้
เหตุผลที่ใช้ข้อมูลตัวอย่าง: เว็บที่สร้างเพื่อฝึกฝนยังไม่ควรบันทึกข้อมูลลูกค้าจริง — จะอธิบายรายละเอียดในช่วงท้ายของหลักสูตร
หลักการเดิม: ส่งคำสั่งทีละรายการ ตรวจสอบผล แล้วจึงส่งรายการถัดไป
วิธีอัปเดตเว็บ: สั่ง agent → ได้โค้ดชุดใหม่ → เปิด Worker กด Edit code → วางแทนที่โค้ดเดิม → Deploy — ทำซ้ำได้ไม่จำกัด | ต้องการความสามารถนอกเหนือจากรายการนี้ อธิบายด้วยภาษาไทยทั่วไปได้เช่นกัน
นี่คือ "ระบบ" ที่ทีมใช้งานร่วมกันได้จริง — และเป็นผลงานที่ท่านสร้างด้วยตนเองทั้งหมด
| ชื่อลูกค้า | สถานะ |
|---|---|
| คุณทดสอบ หนึ่ง | ลูกค้าใหม่ |
| คุณทดสอบ สอง | กำลังติดตาม |
| ← ข้อมูลจากเครื่องของเพื่อน | ลูกค้าใหม่ |
นอกเหนือจากแนวทาง Cloudflare ยังมีทางเลือกอื่นที่ควรรู้จัก — เลือกใช้ตามความเหมาะสมของงาน
ระบุคำสั่งดังนี้:
จากนั้นใช้ปุ่ม Publish/Share ที่ตัวแอปพลิเคชันได้ทันที — ไม่ต้องตั้งค่าเพิ่มเติม เหมาะสำหรับเครื่องมือภายในทีมที่ต้องการความรวดเร็ว
สำหรับสายงานบัญชี/ธุรการที่ต้องการดูข้อมูลในตารางที่คุ้นเคย — สั่ง agent ว่า "ให้ข้อมูลที่กรอกไปบันทึกลง Google Sheets ของฉัน ช่วยพาทำทีละขั้น" agent จะแนะนำการเชื่อมต่อผ่าน Apps Script ให้เช่นกัน (ขั้นตอนโดยละเอียดอยู่ในเอกสารประกอบ) — หรือใช้ App Builder (Lovable/Bolt) ซึ่งมีฐานข้อมูลและระบบเผยแพร่ในตัว
ขั้นตอนโดยละเอียดของทุกทางเลือก อยู่ในเอกสารประกอบท้ายหลักสูตร
คำตอบขึ้นอยู่กับ "วิธี Deploy" ที่เลือกใช้ — เว็บที่เชื่อมฐานข้อมูล ทำได้ทั้งสองวิธี
สรุป: ทำตามหลักสูตรนี้ทั้งหมด ไม่ต้องติดตั้ง Node — Node จำเป็นเฉพาะเมื่อต้องการ Deploy ด้วยคำสั่ง ซึ่งการติดตั้งอยู่ในสองสไลด์ถัดไป
ทำเพียงครั้งเดียวต่อเครื่อง — หลังจากนั้น Deploy ได้จากเครื่องตนเองตลอดไป
เมื่อเครื่องพร้อมแล้ว การสร้างเว็บพร้อมฐานข้อมูลทั้งระบบ เหลือเพียงการรันคำสั่งที่ agent เตรียมให้
ไม่ต้องผูก Binding ด้วยมือในหน้าเว็บอีก — ทุกอย่างประกาศไว้ในไฟล์ตั้งค่าของโปรเจค การอัปเดตเว็บครั้งถัดไปเหลือเพียงคำสั่งเดียว และหากใช้ Claude Code agent จะเป็นผู้รันคำสั่งเองทั้งหมด ผู้ใช้เพียงกดยืนยันแต่ละขั้น
เว็บที่สร้างในวันนี้ เปรียบเสมือนบ้านที่สมบูรณ์แต่ยังไม่ได้ติดตั้งระบบล็อก
มีองค์กรหลายแห่งทั่วโลกที่พนักงานสร้างเว็บด้วย AI แล้วนำข้อมูลลูกค้าจริงเข้าระบบทันที โดยไม่ได้กำหนดสิทธิ์การเข้าถึงข้อมูล ส่งผลให้บุคคลภายนอกเข้าถึงข้อมูลลูกค้าได้ทั้งหมด กลายเป็นเหตุการณ์ข้อมูลรั่วไหลครั้งใหญ่ และเข้าข่ายผิดกฎหมายคุ้มครองข้อมูลส่วนบุคคล (PDPA)
ใช้ข้อมูลตัวอย่างเพื่อฝึกฝน หรือใช้ภายในทีมกับข้อมูลที่ไม่เป็นความลับ (ตารางเวร, จองห้องประชุม, ตรวจสอบสต๊อก)
กรณีจะบันทึกข้อมูลจริงของลูกค้าหรือบุคคลอื่น (ชื่อ เบอร์โทร ที่อยู่ ยอดซื้อ) หรือเปิดให้บุคคลภายนอกใช้งาน — ต้องให้ Developer ตรวจสอบด้านความปลอดภัยก่อนเสมอ
หลักการสำคัญ: ข้อมูลของบุคคลอื่น = ต้องให้ Developer ตรวจสอบก่อนใช้งานจริง
พิจารณาตามหลักสัญญาณไฟจราจร — ตรวจสอบก่อนเริ่มงานทุกครั้ง
บทบาทเปลี่ยนจาก "ผู้ลงมือก่อสร้าง" เป็น "วิศวกรควบคุมงาน" — โครงสร้างทีมรูปแบบใหม่เป็นดังนี้
เข้าใจงานและปัญหาจริง
→ สร้างต้นแบบได้ด้วยตนเอง
ผู้ดำเนินการที่รวดเร็ว
→ Developer เองก็ใช้ agent (Claude Code, Cursor) เพิ่มประสิทธิภาพหลายเท่า
วิศวกรควบคุมงาน
→ ตรวจสอบความปลอดภัย ออกแบบระบบขนาดใหญ่ แก้ปัญหาที่ซับซ้อน
รูปแบบเดิม: จัดทำเอกสารความต้องการจำนวนมาก ใช้เวลาสื่อสารหลายรอบ → รูปแบบใหม่: สร้างต้นแบบด้วย AI ด้วยตนเอง แล้วส่งลิงก์ให้ Developer พร้อมโจทย์ "ต้องการระบบลักษณะนี้ ขอให้ช่วยพัฒนาต่อให้ปลอดภัยและพร้อมใช้งานจริง" — การสื่อสารแม่นยำขึ้นอย่างมาก และงานเสร็จเร็วขึ้นทั้งสองฝ่าย
การสร้างเว็บเปรียบได้กับการสั่งอาหาร — ระบุความต้องการให้ชัดเจน แล้ว AI Agent ดำเนินการให้
โครงสร้างการสั่งงาน 3 ส่วน: เว็บอะไรสำหรับใคร + องค์ประกอบในเว็บ + รูปแบบ/ภาษา
สั่งงานทีละรายการ ระบุสิ่งที่ต้องแก้อย่างเจาะจง และส่งภาพหน้าจอเมื่อพบปัญหา
ต้องการเว็บที่บันทึกข้อมูล → สั่ง agent "เก็บลง Cloudflare D1 ช่วยพาตั้งค่าทีละขั้น ฉันไม่ใช่โปรแกรมเมอร์"
ข้อมูลของบุคคลอื่น = ต้องให้ Developer ตรวจสอบก่อน — ข้อที่สำคัญที่สุด
ทักษะนี้พัฒนาได้ด้วยการฝึกฝนอย่างสม่ำเสมอ
ผลงานทั้งสองชิ้นในวันนี้คือข้อพิสูจน์ — คำถามถัดไปคือ ท่านจะสร้างสิ่งใดให้ทีมของท่าน
ช่วงถาม-ตอบ