ให้ AI Agent ดำเนินการแทนทั้งหมด — คุณเพียงระบุความต้องการให้ชัดเจน
สิ่งที่ต้องเตรียม: คอมพิวเตอร์โน้ตบุ๊กและอีเมลเท่านั้น — เครื่องมือหลักคือ OpenCode + AI ของบริษัท ติดตั้งด้วยกันในคลาส
ไม่เพียงความรู้ แต่เป็นผลงานจริงที่จับต้องได้
เว็บที่รันบน server จริง มีลิงก์สำหรับแชร์ เปิดได้จากทุกอุปกรณ์ — สร้างเสร็จภายในคลาสนี้
หลักการเดียว นำไปประยุกต์สร้างเว็บไซต์ได้ทุกรูปแบบ โดยไม่ต้องเขียนโค้ด
ช่วยกำหนดขอบเขตได้ว่า งานส่วนใดสามารถทดลองทำด้วยตนเองได้ และงานส่วนใดควรชวน Developer มาช่วยซัพพอร์ต
แนวทางการเรียนรู้: คลาสนี้เปิดโอกาสให้ทดลองทำผิดพลาดได้โดยไม่ต้องกังวล หากได้ผลลัพธ์ที่ไม่ถูกต้อง สามารถพิมพ์คำสั่งใหม่ได้ทันที ทุกคำถามล้วนมีประโยชน์ และคุณสามารถใช้ภาษาไทยสื่อสารตามปกติได้เลย
บรรยายกระชับ เน้นการลงมือปฏิบัติเป็นหลัก
ผู้สอนจะสาธิตให้ชมทั้งกระบวนการ — ขั้นตอนนี้ยังไม่ต้องปฏิบัติตาม
กระบวนการเดียวกันนี้ ผู้เรียนทุกท่านทำได้ด้วยตนเอง
ผู้บรีฟไม่จำเป็นต้องออกแบบเป็น — เพียงสื่อสารโจทย์ให้ชัดเจน
บอกโจทย์ให้ครบและชัดเจน เหมือนกับการบรีฟงานดีไซเนอร์ — ยิ่งบรีฟชัด ยิ่งแก้น้อยรอบ
ลงมือทำทั้งหมด (เขียนโค้ด) แทนคุณ ส่งแบบร่างกลับมาภายในไม่กี่นาที
ไม่ตรงใจ คอมเมนต์แล้วสั่งแก้ได้ไม่จำกัดรอบ — ดีไซเนอร์คนนี้ไม่งอน ไม่คิดค่าแก้
คำว่า "Vibe Coding" เกิดขึ้นต้นปี 2025 — ปัจจุบันเป็นวิธีการทำงานมาตรฐาน แม้แต่นักพัฒนามืออาชีพก็ใช้แนวทางนี้
4 เรื่องที่เคยเชื่อกัน… วันนี้ไม่จริงแล้ว
"ทำเว็บต้องนั่งเรียนโค้ดเป็นปี"
แค่พิมพ์สั่งภาษาไทย ก็สร้างเว็บได้แล้ว
"ต้องจ้างคนทำ ค่าตัวแพงแน่ๆ"
เริ่มต้นฟรี! อย่างผลงาน 2 ชิ้นในวันนี้ก็ทำฟรีทั้งหมด
"เอาเว็บขึ้นออนไลน์ยากและซับซ้อน"
แค่อัปโหลดไฟล์ไม่กี่คลิก ก็ได้ลิงก์พร้อมแชร์ทันที
"มีระบบฐานข้อมูล ต้องพึ่งโปรแกรมเมอร์เท่านั้น"
AI เขียนให้และตั้งค่าให้เองทั้งหมด เรานั่งดูเฉย ๆ
หากเป็นโปรเจกต์สเกลใหญ่มีระบบจ่ายเงิน หรือเก็บข้อมูลจริงของลูกค้า ยังไงก็ควรชวน Developer มาช่วยซัพพอร์ต (เดี๋ยวช่วงท้ายคลาสเราจะมาอธิบายขอบเขตเรื่องนี้กัน)
ใช้แค่ 2 อย่าง ฟรีทั้งคู่
AI Agent ที่ลงมือทำให้ ไม่ใช่แค่ตอบคำถาม
พิมพ์สั่งภาษาไทย → ได้ไฟล์เว็บในโฟลเดอร์ทันที
ที่อยู่ของเว็บเราบนอินเทอร์เน็ต
ลากไฟล์ไปวาง → ได้ลิงก์แชร์ได้ทันที
เตรียมตอนนี้: ติดตั้ง OpenCode Desktop จาก opencode.ai/download, สมัคร dash.cloudflare.com · ส่วน Bun (ตัวรันโค้ดที่ใช้ใน Workshop 2) ให้ OpenCode ติดตั้งให้ในคลาส
กรอกเอง 3 ส่วน แล้วปิดท้ายด้วย 3 บรรทัดเดิมทุกครั้ง
เว็บรับทำบัญชี สำหรับเจ้าของร้านค้าออนไลน์
เขียนเป็นรายการ ใส่ข้อมูลจริงเท่าที่มี: ชื่อ · บริการ+ราคา · รีวิว · ช่องทางติดต่อ
น้ำเงิน-ขาว น่าเชื่อถือ ภาษาไทย ดูดีบนมือถือ
ขอเป็นไฟล์เดียว · ข้อมูลที่ยังไม่มี ให้ใส่ตัวอย่างไว้ก่อน · สรุปสั้น ๆ ว่าทำอะไรไป
ยึดหลักทั้งสามข้อนี้ จะช่วยให้การทำงานราบรื่นขึ้นอย่างมาก
สร้างโครงสร้างหลักก่อน แล้วจึงเพิ่มรายละเอียดทีละส่วน — การสั่งหลายรายการพร้อมกันทำให้ผลลัพธ์คลาดเคลื่อนได้ง่าย
"เปลี่ยนพื้นหลังเป็นสีครีม" ให้ผลดีกว่า "ทำให้สวยกว่านี้" — ยิ่งระบุชัดเจน ผลลัพธ์ยิ่งตรงตามต้องการ
เมื่อพบความผิดปกติหรือข้อความ Error ให้บันทึกภาพหน้าจอส่งให้ AI พร้อมคำอธิบาย — AI ในปัจจุบันวิเคราะห์ภาพได้อย่างแม่นยำ
เลือกโจทย์ที่ใกล้ตัวที่สุด 1 อย่าง หรือใช้เรื่องจริงจากงานของคุณก็ได้
ร้านหรือบริการที่คุณรู้จัก บอกว่าทำอะไร ราคาเท่าไหร่ มีรีวิวลูกค้า
จุดเด่น โปรโมชั่น รูปสินค้า และปุ่มสั่งซื้อหรือทักแชท
ประวัติ ผลงาน ความถนัด และปุ่มนัดคุย
หน้าที่ คุณสมบัติ สวัสดิการ และปุ่มสมัคร
กำหนดการ วิทยากร สถานที่ และปุ่มลงทะเบียน
งานเลี้ยง งานแต่ง วันเกิด บอกวันเวลา แผนที่ และปุ่มตอบรับ
ลิงก์เอกสารที่ใช้บ่อย ประกาศ ตารางวันหยุด รวมไว้ที่เดียว
คำตอบที่ลูกค้าถามซ้ำ ๆ จัดเป็นหมวด และปุ่มติดต่อ
เป้าหมาย: จบ Workshop นี้ ทุกคนมีลิงก์เว็บจริง 1 ลิงก์ ส่งเข้ากลุ่มห้อง · ปุ่มสมัคร/ลงทะเบียน ให้ลิงก์ไป Google Form หรือ LINE ก่อน — เว็บที่เก็บข้อมูลเองจะทำใน Workshop 2
ติดตรงไหน ยกมือเรียกผู้สอนได้เลย — ทุกคนต้องผ่านขั้นนี้ก่อนไปต่อ
ก๊อปแบบฟอร์มนี้ไปวางใน OpenCode แล้วแก้เฉพาะข้อความสีแดงในวงเล็บ ส่วนอื่นไม่ต้องแตะ
บรรทัดไหนไม่เกี่ยวกับเว็บของคุณ (เช่น สโลแกน รีวิว) ลบทิ้งได้เลย
ถาม OpenCode ก่อน: "ช่วยคิดสโลแกนให้ [เว็บของฉัน] 5 แบบ สั้น ๆ ภาษาไทย" แล้วเลือกอันที่ชอบมาใส่
เบอร์โทร ราคา รีวิว ถ้ายังไม่มี ปล่อย [ ] ไว้แบบนั้นได้เลย — 3 บรรทัดสุดท้ายบอก AI ไว้แล้วว่าให้ใส่ตัวอย่างและเขียนกำกับ [แก้ทีหลัง]
กด Enter แล้วทำตาม 3 ขั้นนี้ — หน้าจอจะเป็นแบบด้านล่าง
จะเห็น OpenCode เขียนไฟล์ไหลลงมาเรื่อย ๆ ปล่อยให้มันทำ
ตามบรรทัดสุดท้ายที่เราสั่งไว้ · ระหว่างรอ จดไว้ 3 อย่างที่อยากแก้ (สี ข้อความ รูป)
เปิดโฟลเดอร์ my-website บน Desktop → ดับเบิลคลิก index.html → วางหน้าต่างคู่กับ OpenCode
ปิดงบไว ไร้กังวลภาษี
รอบแรกไม่ตรงใจเป็นเรื่องธรรมดา — เดี๋ยว Step 4 สั่งแก้ต่อ
พิมพ์ต่อในหน้าต่างเดิม เสร็จแล้วกดรีเฟรชเบราว์เซอร์ (F5 หรือ Cmd+R) — ตัวอย่างประโยคที่ก๊อปไปใช้ได้เลย
เคล็ดลับ: สั่งทีละอย่าง ดูผล แล้วค่อยสั่งต่อ — แก้สัก 3 รอบก็สวยพอแล้ว ไม่ต้องเพอร์เฟกต์ในคลาส · แก้แล้วแย่กว่าเดิม? พิมพ์ /undo ย้อนกลับได้
อยากแก้เว็บทีหลัง: สั่ง OpenCode แก้ไฟล์ แล้วอัปโหลดโฟลเดอร์ซ้ำที่โปรเจคเดิม (Create deployment) — ลิงก์เดิมไม่เปลี่ยน
✓ เว็บออนไลน์แล้ว
pp-accounting.pages.devยินดีด้วย 🎉 เว็บแรกของคุณออนไลน์แล้ว โดยไม่ต้องเขียนโค้ดสักบรรทัด
ยังไม่ครบ? ไม่เป็นไร เดี๋ยวช่วงพักตามให้ทัน
นอกจาก AI Agent ยังมีแพลตฟอร์มสำเร็จรูป เช่น Lovable, Bolt.new, v0 — สั่งงานด้วยภาษาไทยในลักษณะเดียวกัน
ประเด็นสำคัญ: โครงสร้าง 3 ส่วนและหลักปฏิบัติ 3 ข้อ ใช้ได้กับเครื่องมือทั้งสองประเภท — ทักษะถ่ายโอนถึงกันได้ทันที
เชิญชมผลงานของเพื่อนร่วมคลาสในกลุ่ม — และเตรียมแลกเปลี่ยนความเห็นเมื่อกลับมา
ช่วงถัดไป: เว็บที่ "บันทึกข้อมูลได้" — ระบบที่นำไปใช้งานจริงในองค์กรได้ทันที
Workshop 1 เราทำ "โปสเตอร์" — รอบนี้จะทำ "สมุดบันทึกของทีม"
ใครเปิดก็เห็นเหมือนกัน คนดูแก้อะไรไม่ได้ — เช่น เว็บแนะนำบริการ การ์ดเชิญ หน้ารวมลิงก์
ใครก็กรอกได้ กรอกแล้วข้อมูลไม่หาย รีเฟรชก็ยังอยู่ และทุกคนเห็นข้อมูลชุดเดียวกัน
ในคลาสใช้ข้อมูลสมมติเท่านั้น — เว็บที่จะเก็บข้อมูลลูกค้าจริง ชวน Dev มาช่วยซัพพอร์ตก่อนเปิดใช้
ถังเก็บข้อมูลของเว็บ — ใครกรอกอะไรในเว็บ ข้อมูลจะถูกหย่อนลงถังนี้ รีเฟรชหรือปิดเครื่องก็ยังอยู่ · ในคลาสใช้ D1 ถังเก็บข้อมูลของ Cloudflare ที่อยู่ที่เดียวกับเว็บเรา (ฟรี)
เปิดดูข้างในถัง หน้าตาเหมือนตาราง Excel — 1 แถว = ลูกค้า 1 คน
| ชื่อลูกค้า | เบอร์ | สถานะ |
|---|---|---|
| คุณเมย์ | 081-xxx-1234 | ลูกค้าใหม่ |
| คุณต้น | 089-xxx-5678 | กำลังติดตาม |
| คุณฝน | 092-xxx-9012 | ปิดการขาย |
ไม่ต้องรู้ว่าข้างในถังทำงานยังไง — OpenCode เขียนโค้ดและตั้งค่า Cloudflare ให้เองทั้งหมด รวดเดียวจบ (ฟรีทุกบริการ)
OpenCode อ่านไฟล์นี้เองทุกครั้ง — คุณจึงพิมพ์แค่ว่าอยากได้เว็บอะไร
เลือกโจทย์ 1 อย่าง — แนะนำอันที่ทีมคุณเอาไปใช้ได้จริงทันที
เป้าหมาย: กรอกข้อมูลในเว็บ → รีเฟรชแล้วข้อมูลยังอยู่ → เพื่อนกรอกจากมือถือของเขา แล้วโผล่บนจอคุณ · รอบนี้ OpenCode ตั้งค่า Cloudflare ให้เองทั้งหมด คุณนั่งดูได้เลย
รอบนี้ OpenCode จะรันคำสั่งคุยกับ Cloudflare แทนเรา — ขั้นเตรียมเครื่องก็ให้มันทำให้เหมือนกัน ประโยคเดียวจบ
มันติดตั้ง Bun ให้เอง (บรรทัดเดียว ไม่ต้องใช้รหัสผ่าน) → เด้งเบราว์เซอร์ให้กด Allow → เห็น "logged in" = พร้อม
ปิด-เปิด OpenCode ใหม่ แล้วพิมพ์ประโยคเดิมอีกครั้ง มันจะข้ามไปล็อกอินให้เลย · ถ้าติดตั้งไม่สำเร็จจริง ๆ ดูวิธีติดตั้งที่ bun.com
ทำครั้งเดียว หลังจากนี้ใช้ได้ทุกโปรเจค · ถ้าเครื่องล็อกจนติดตั้งไม่ได้ ยกมือเรียกผู้สอน
พิมพ์แค่ว่าอยากได้เว็บอะไร — เรื่องเทคนิคทั้งหมดอยู่ในไฟล์ AGENTS.md ในโฟลเดอร์เริ่มต้นที่ทีม Dev เตรียมไว้
แตก zip → เปิดโฟลเดอร์นั้นใน OpenCode → วางข้อความ 3 ส่วน แล้ว Enter · โจทย์ B/C/D ใช้โครงเดียวกัน เปลี่ยนแค่ส่วน "ในเว็บมี"
สังเกตว่าใน prompt ไม่มีคำว่า Cloudflare, D1 หรือ deploy เลย เพราะอยู่ในไฟล์นี้แล้ว · วิธีคุยกับคุณ: ทำจนจบรวดเดียว บอกระหว่างทางว่าทำอะไร ถามเฉพาะตอนต้องเลือก ใส่ [แก้ทีหลัง] ให้ข้อมูลที่ขาด · เทคโนโลยี: Next.js + Tailwind เก็บข้อมูลลง D1 deploy ขึ้น Cloudflare — เป็นชุดเดียวกับที่ทีม Dev ใช้ ผลงานคุณจึงส่งต่อให้ Dev ต่อยอดได้ทันที · ลำดับงาน: สร้าง → ตั้งค่า → deploy → ส่งลิงก์
กด Enter แล้วทำตาม 3 ขั้นนี้ — เหมือน Workshop 1 แต่รอบนี้มันรันคำสั่งให้ด้วย
มันอ่านกติกาจาก AGENTS.md เขียนโค้ด แล้วรันคำสั่งต่อเนื่องจนจบ พร้อมบอกระหว่างทางว่าทำอะไร — จะถามก็ต่อเมื่อต้องเลือก เช่น ชื่อโปรเจค
สร้างถังเก็บข้อมูล → สร้างตารางในถัง → build แล้วเอาขึ้น Cloudflare พร้อมผูกถังกับเว็บ (ขั้นสุดท้ายนานสุด)
เว็บออนไลน์ตั้งแต่ตอนนี้ กดเปิดดูได้เลย · ไฟล์ทั้งหมดอยู่ในโฟลเดอร์ my-project
มี error ระหว่างทาง? ไม่ต้องทำอะไร มันอ่านแล้วแก้เอง — ถ้าค้างนาน พิมพ์ "แก้ให้ด้วย"
เปิดลิงก์ที่ได้ แล้วลองใช้จริง
เปิดลิงก์ my-project.xxx.workers.dev
จากคอมหรือมือถือก็ได้
กรอกข้อมูลสมมติ 2–3 รายการ
ชื่อ เบอร์ สถานะ — แต่งขึ้นมาเลย
รีเฟรช (F5 หรือ Cmd+R) → ข้อมูลยังอยู่ = ผ่าน
นี่คือความต่างจากเว็บใน Workshop 1
กรอกแล้วหาย หรือขึ้น Error: แคปหน้าจอส่งให้ OpenCode แล้วบอกว่า "กรอกแล้วรีเฟรชหาย ช่วยเช็กแล้วแก้ให้" — มันจะแก้โค้ดและ deploy ใหม่ให้เอง
ทำไมต้องข้อมูลสมมติ: เว็บฝึกยังไม่ได้ติดกลอนประตู ข้อมูลลูกค้าจริงรอชวน Developer มาช่วยก่อน — ช่วงท้ายคลาสจะเล่าให้ฟัง
หลักการเดิม: สั่งทีละอย่าง ดูผล แล้วค่อยสั่งต่อ — รอบนี้สั่งแล้วมัน deploy ให้เอง แค่รีเฟรชดู
ทุกครั้งที่สั่งแก้: OpenCode แก้โค้ด → รัน deploy ให้เอง → คุณรีเฟรชหน้าเว็บดูผล · อยากได้อะไรนอกจากนี้ พิมพ์บอกเป็นภาษาไทยธรรมดาได้เลย
นี่คือ "ระบบ" ที่ทีมใช้ร่วมกันได้จริง — และคุณสร้างมันเองทั้งหมด
| ชื่อลูกค้า | สถานะ |
|---|---|
| คุณทดสอบ หนึ่ง | ลูกค้าใหม่ |
| คุณทดสอบ สอง | กำลังติดตาม |
| ← ข้อมูลจากมือถือเพื่อน | ลูกค้าใหม่ |
เว็บที่ทำวันนี้เหมือนบ้านที่สร้างเสร็จแล้ว แต่ยังไม่ได้ติดกลอนประตู
หลายบริษัททั่วโลก พนักงานใช้ AI ทำเว็บแล้วใส่ข้อมูลลูกค้าจริงลงไปทันที โดยไม่มีใครตั้งค่าว่าใครดูได้บ้าง ผลคือคนนอกเปิดดูข้อมูลลูกค้าได้ทั้งหมด กลายเป็นข่าวข้อมูลรั่ว และเข้าข่ายผิด PDPA (กฎหมายคุ้มครองข้อมูลส่วนบุคคล)
ฝึกด้วยข้อมูลสมมติ หรือใช้ในทีมกับข้อมูลที่ไม่ใช่ความลับ เช่น ตารางเวร จองห้องประชุม เช็กสต๊อก
จะเก็บข้อมูลจริงของลูกค้าหรือคนอื่น (ชื่อ เบอร์ ที่อยู่ ยอดซื้อ) หรือเปิดให้คนนอกใช้? ชวน Developer มาช่วยติดกลอนประตูก่อน คือตั้งว่าใครเข้าดูได้และกันคนนอกไว้ แล้วค่อยเปิดใช้จริง
จำข้อเดียวพอ: ข้อมูลของคนอื่น = ชวน Developer มาช่วยซัพพอร์ตก่อนใช้จริง
ดูตามสัญญาณไฟจราจรก่อนเริ่มงานทุกครั้ง — ไฟเหลืองกับแดงไม่ได้แปลว่าห้ามทำ แค่ขอให้ Developer มาช่วย Consult
บทบาทเปลี่ยนจาก "คนรับโจทย์ไปสร้าง" เป็น "คู่หูที่ช่วยต่อยอดของคุณให้ใช้จริงได้" — ทีมแบบใหม่หน้าตาแบบนี้
เข้าใจงานและปัญหาจริง
→ สร้าง Prototype ได้ด้วยตนเอง
ผู้ดำเนินการที่รวดเร็ว
→ Developer เองก็ใช้ agent แบบเดียวกัน (OpenCode, Claude Code, Cursor) เพิ่มประสิทธิภาพหลายเท่า
คู่หูที่ทำให้ของจริงใช้ได้
→ ดูแลความปลอดภัย ต่อยอด Prototype ให้รองรับคนใช้จริง แก้ปัญหายาก ๆ ให้
แบบเดิม: เขียนเอกสารความต้องการยาว ๆ คุยกันหลายรอบ → แบบใหม่: ทำ Prototype ด้วย AI เอง แล้วส่งลิงก์ให้ Developer พร้อมบอกว่า "อยากได้แบบนี้ ช่วยต่อยอดให้ปลอดภัยและใช้จริงได้" — เข้าใจกันเร็วขึ้นมาก งานเสร็จไวขึ้นทั้งสองฝ่าย
การสร้างเว็บเปรียบได้กับการบรีฟงานดีไซเนอร์ — บอกโจทย์ให้ชัดเจน แล้ว AI Agent ลงมือทำและแก้ให้ได้ไม่จำกัดรอบ
โครงสร้างการสั่งงาน 3 ส่วน: เว็บอะไรสำหรับใคร + องค์ประกอบในเว็บ + รูปแบบ/ภาษา
สั่งงานทีละรายการ ระบุสิ่งที่ต้องแก้อย่างเจาะจง และส่งภาพหน้าจอเมื่อพบปัญหา
ต้องการเว็บที่บันทึกข้อมูล → เปิดโฟลเดอร์เริ่มต้นที่มี AGENTS.md แล้วพิมพ์แค่ 3 ส่วน — OpenCode สร้างและ deploy ให้เอง
ข้อมูลของคนอื่น = ชวน Developer มาช่วยซัพพอร์ตก่อน — ข้อที่สำคัญที่สุด
ทักษะนี้พัฒนาได้ด้วยการฝึกฝนอย่างสม่ำเสมอ
ผลงานทั้งสองชิ้นในวันนี้คือข้อพิสูจน์ — คำถามถัดไปคือ ท่านจะสร้างสิ่งใดให้ทีมของท่าน
ช่วงถาม-ตอบ