Course Details · ZenityX Institute
รายละเอียดหลักสูตร AI Agent for Web Application
หลักสูตรลงมือทำแบบเริ่มจากศูนย์ ที่พาผู้เรียนเปลี่ยนไอเดียในหัวให้กลายเป็นเว็บแอปพลิเคชันที่ใช้งานได้จริง โดยไม่ต้องเขียนโค้ดเป็น — สั่ง Claude Code เป็น AI Agent สร้างเว็บ Sales Page ขายสินค้า ที่มีฐานข้อมูลจริง เพิ่ม–แก้ราคา–ลบสินค้าเองได้ผ่านหลังบ้าน แล้วนำขึ้นออนไลน์ด้วย Cloudflare ภายใน 1 วัน
Section 01
1. ภาพรวมหลักสูตร
หัวใจของหลักสูตรคือการ “สั่งงาน” AI Agent อย่าง Claude Code ให้คิด สร้าง และแก้งานแทน ในขณะที่ผู้เรียนเป็นผู้กำหนดทิศทางและตรวจงาน โจทย์ของทั้งวันคือสร้าง เว็บ Sales Page ขายสินค้า ให้เสร็จและขึ้นออนไลน์จริง
ผู้ใช้งาน
เปิดเว็บผ่านเบราว์เซอร์
›
Frontend
หน้าตาเว็บที่ผู้ใช้เห็น
›
Backend
ตรรกะเบื้องหลัง
›
Database
ที่เก็บข้อมูลสินค้า
คำศัพท์ที่ผู้เรียนจะเข้าใจและใช้งานได้จริงในวันนี้ ได้แก่ Frontend, Backend, Database, Full-Stack, API, CRUD, Responsive, Deploy, Domain และ Hosting โดยอธิบายด้วยภาษาที่เข้าใจง่าย ไม่ต้องมีพื้นฐานสายไอที
Core Promise
เข้าใจว่าเว็บแอปทำงานอย่างไร แล้วสั่ง AI Agent สร้างเว็บ Sales Page ขายสินค้าที่มีฐานข้อมูลจริง จัดการสินค้าผ่านหลังบ้านได้เอง และขึ้นออนไลน์ด้วย Cloudflare — จบใน 1 วัน
ผู้เรียนไม่ได้เรียนเพื่อจำคำสั่งยาว ๆ แต่เรียนเพื่อได้ workflow ที่ทำซ้ำได้ พร้อมเว็บขายสินค้าจริงหนึ่งเว็บที่นำไปใช้และพัฒนาต่อได้ทันทีหลังจบคลาส
FULL-STACK
ครบทั้งหน้าเว็บและฐานข้อมูล
ไม่ใช่แค่หน้าเว็บนิ่ง ๆ แต่มีระบบจัดการสินค้าจริงเบื้องหลัง
SHIP จริง
ได้เว็บขายของที่ใช้งานได้จริง
จบวันแล้วเว็บอยู่บนออนไลน์ เปิดบนมือถือแล้วสั่งซื้อได้ทันที
ต่อยอดเอง
ดูแลและพัฒนาต่อได้
รู้วิธีสั่ง Agent แก้งานเดิม เพิ่มสินค้า และ deploy ซ้ำด้วยตัวเอง
Section 02
2. วัตถุประสงค์การเรียนรู้
ทุกวัตถุประสงค์เชื่อมกับผลลัพธ์ที่จับต้องได้จริงในคลาส ไม่ใช่เพียงทฤษฎี ผู้เรียนจะได้ลงมือทำครบทุกขั้นของการสร้างเว็บขายสินค้า
01
เข้าใจ Vibe Coding และเว็บแอป
มองภาพรวมออกว่าเว็บแอปทำงานอย่างไร และ Vibe Coding เปลี่ยนวิธีสร้างเว็บไปแบบไหน
02
เข้าใจคำศัพท์ที่ต้องใช้จริง
Frontend, Backend, Database, Full-Stack, API, CRUD และ Responsive อธิบายด้วยภาษาที่เข้าใจง่าย
03
สั่ง Claude Code สร้างหน้า Sales Page
เขียน brief และ prompt สั่ง AI Agent ให้สร้างหน้าขายสินค้า พร้อมดีไซน์และรองรับมือถือ
04
เชื่อมฐานข้อมูลและทำ CRUD สินค้า
ต่อ Supabase เข้ากับเว็บ เพิ่ม–แสดง–แก้ราคา–ลบสินค้าผ่านหลังบ้านโดยไม่ต้องแตะโค้ด
05
Deploy ขึ้นออนไลน์ด้วย Cloudflare
นำเว็บขึ้นใช้งานจริงบน Cloudflare Pages พร้อมเข้าใจวิธีผูกโดเมนและเปิด SSL
06
ดูแล แก้ปัญหา และต่อยอดได้เอง
สั่ง Agent แก้งานเดิมโดยไม่พัง จัดการ token/ค่าใช้จ่าย และมองเห็นเส้นทางพัฒนาต่อ
วัดผลได้จริง
ทุกวัตถุประสงค์จบลงด้วยผลงานที่จับต้องได้ — ไม่ใช่แค่ฟังบรรยาย ผู้เรียนจะได้เว็บขายสินค้า ฐานข้อมูล และ workflow ติดมือกลับไปใช้จริง
Section 03
3. กลุ่มผู้เรียน
หลักสูตรออกแบบสำหรับผู้เริ่มต้นที่อยากสร้างเว็บขายสินค้าของตัวเองได้จริง โดยไม่จำเป็นต้องมีพื้นฐานการเขียนโปรแกรมมาก่อน
| กลุ่มผู้เรียน | ความต้องการหลัก | สิ่งที่หลักสูตรช่วยตอบ |
|---|---|---|
| เจ้าของร้าน / ผู้ประกอบการ | อยากมีหน้าเว็บขายสินค้าเป็นของตัวเอง ไม่อยากจ้างทำและรอแก้นาน | สร้างเว็บ Sales Page ที่เพิ่ม–แก้ราคา–ลบสินค้าเองได้ทุกเมื่อผ่านหลังบ้าน |
| ฟรีแลนซ์ / นักการตลาด | ต้องทำหน้าขายหรือแลนดิ้งเพจให้ลูกค้าหรือแคมเปญได้เร็ว | ใช้ AI Agent สร้างและปรับหน้าขายได้เองในเวลาไม่กี่ชั่วโมง |
| พนักงานออฟฟิศ / ผู้ประสานงานทีมพัฒนา | อยากเข้าใจโครงสร้างเว็บและสื่อสารกับทีมพัฒนาได้ชัดขึ้น | เห็นภาพรวมระบบและคำศัพท์จริง พร้อมสร้างต้นแบบเองได้ |
| ผู้เริ่มต้นสาย Vibe Coding | อยากเริ่มสร้างเว็บแอปแบบเห็นผลลัพธ์จริงตั้งแต่วันแรก | ลงมือสร้างเว็บขายสินค้าที่มีฐานข้อมูลและขึ้นออนไลน์ได้จริงใน 1 วัน |
สิ่งที่ต้องเตรียมโน้ตบุ๊กส่วนตัว 1 เครื่อง พร้อมอีเมลสำหรับสมัครใช้งานเครื่องมือ
พื้นฐานที่ต้องมีใช้คอมพิวเตอร์ทั่วไปได้ ไม่ต้องเคยเขียนโค้ดมาก่อน
เรียนแล้วต่อยอดนำเว็บขายสินค้าและ workflow กลับไปใช้กับงานหรือธุรกิจของตนเองได้ทันที
เริ่มจากศูนย์ได้
ไม่ว่าจะมาจากสายไหน ขอแค่ใช้คอมพิวเตอร์ทั่วไปได้ ก็เรียนคอร์สนี้ได้ เพราะทุกขั้นตอนมีอาจารย์และ TA ดูแลและใช้ AI Agent ช่วยทำงานให้ตลอดทั้งวัน
Section 04
4. ผลลัพธ์ที่ผู้เรียนจะได้กลับไป
ทุกผลลัพธ์เป็นของจริงที่นำไปใช้ต่อได้ ไม่ใช่ไฟล์ตัวอย่างหรือเดโมที่ใช้งานจริงไม่ได้
1
เว็บ Sales Page ขายสินค้าที่ขึ้นออนไลน์แล้ว
เว็บจริงที่เปิดบนมือถือแล้วสั่งซื้อได้ พร้อมลิงก์ใช้งานทันที
2
ระบบ CRUD จัดการสินค้าผ่านหลังบ้าน
เพิ่มสินค้า–แก้ราคา–ลบ ได้เอง โดยไม่ต้องกลับไปแก้โค้ด
3
ฐานข้อมูล Supabase (ตารางสินค้า) ของตัวเอง
โครงสร้างตารางข้อมูลที่พร้อมต่อยอดกับโปรเจกต์อื่นได้
4
Playbook การสั่งงาน AI Agent
ชุด prompt สำเร็จและ Golden Workflow สำหรับสั่ง Claude Code ให้ทำงานตรงใจ
5
ความเข้าใจ workflow ครบวงจร
มองภาพออกตั้งแต่ไอเดีย จนถึงการดูแลเว็บหลังขึ้นออนไลน์
6
Subdomain ฟรีและวิธีผูกโดเมนจริง
ได้ลิงก์ *.pages.dev ทันที พร้อมรู้ขั้นตอนต่อโดเมนของตัวเอง
นำไปใช้ต่อได้ทันที
ทุกผลลัพธ์เป็นของจริงที่ใช้งานต่อได้ — เว็บขายสินค้าที่ขึ้นออนไลน์แล้ว ฐานข้อมูลของตัวเอง และ Playbook สำหรับสั่ง AI Agent ในโปรเจกต์ถัดไป
Workshop Showcase
ตัวอย่างผลงานที่ผู้เรียนจะสร้างได้
ตัวอย่างแนวเว็บ Sales Page ขายสินค้าที่สั่ง Claude Code สร้าง เชื่อม Supabase และขึ้นออนไลน์ด้วย Cloudflare — สื่อถึงระดับงานที่ทำได้จริงใน 1 วัน (ผลงานจริงปรับตามสินค้าและสไตล์ของแต่ละคน)
Workshop 1 · Frontend
หน้าขายสินค้า (Hero + ปุ่มสั่งซื้อ)
หน้าแรกโชว์สินค้าเด่น พร้อมหัวเรื่อง ปุ่ม call-to-action และรองรับมือถือ
Workshop 1 · Frontend
รายการสินค้า (Product Cards)
แสดงสินค้าเป็นการ์ด รูป–ชื่อ–ราคา–ปุ่มดูรายละเอียด ดึงจากฐานข้อมูลจริง
Workshop 2 · Connect
ฟอร์มสั่งซื้อ (Order Form)
ฟอร์มสั่งซื้อ/ติดต่อที่บันทึกข้อมูลเข้า Supabase ได้จริง
Workshop 3 · Admin CRUD · จุดเด่น
หลังบ้านจัดการสินค้า (CRUD)
เชื่อม Supabase เพิ่มสินค้า–แก้ราคา–ลบ ผ่านหลังบ้านได้เอง ไม่ต้องแตะโค้ด
Section 05
5. โครงสร้างหลักสูตรรายวัน
ภาพรวมของวัน
จากความเข้าใจพื้นฐาน สู่เว็บขายสินค้าที่ขึ้นออนไลน์จริงช่วงเช้าปูพื้น–ติดตั้ง · ช่วงบ่ายลงมือ 4 Workshop
เวลาเรียน
10.00–17.00 น.พักเที่ยง 12.15–13.15
Workshop
4 WORKSHOPทุกช่วงมีผลลัพธ์จับต้องได้
ช่วงเช้า · เข้าใจระบบ ติดตั้ง และสร้างหน้าขาย
10.00–10.45Concept
เปิดโลก Vibe Coding และเข้าใจเว็บแอป
Vibe Coding และ Web Application คืออะไร · flow การทำงาน ผู้ใช้ → Frontend → Backend → Database · คำศัพท์หลัก Full-Stack, API, CRUD, Responsive, Deploy · Claude Code ทำงานเป็น AI Agent อย่างไร
10.45–11.30Setup
ติดตั้งเครื่องมือและหลักการสั่งงาน Agent
ติดตั้ง Claude Code + เตรียม 3 บัญชี (Claude · Supabase · Cloudflare) · รู้จัก terminal แบบไม่กลัว · Golden Workflow และการเขียน prompt ให้ได้งาน ผลลัพธ์: เครื่องพร้อมและสั่ง Agent สร้างโปรเจกต์ได้สำเร็จ
11.30–12.15WORKSHOP 1
Frontend — สร้างหน้า Sales Page ขายสินค้า
สั่ง Agent สร้างหน้าขาย: Hero สินค้า · รายการสินค้าเป็นการ์ด · ราคา · ปุ่มสั่งซื้อ · ฟอร์ม พร้อมทำให้ Responsive ผลลัพธ์: หน้า Sales Page รันได้บนเครื่องและเปิดบนมือถือได้
12.15–13.15Break
พักกลางวัน
พักรับประทานอาหารและเตรียมเข้าสู่ช่วงฐานข้อมูลและ CRUD ในภาคบ่าย
ช่วงบ่าย · ต่อฐานข้อมูล ทำ CRUD และขึ้นออนไลน์
13.15–14.15WORKSHOP 2
Connect & Keys — เชื่อม Supabase เข้ากับเว็บ
Database คืออะไร ทำไมต้องมี · สร้างตารางสินค้าใน Supabase · จัดการ API Key อย่างปลอดภัย · เชื่อมให้เว็บดึงสินค้ามาแสดง ผลลัพธ์: เว็บดึงสินค้าจากฐานข้อมูลจริงมาแสดง (Read)
14.15–15.15WORKSHOP 3
Admin CRUD — หลังบ้านจัดการสินค้า
สั่ง Agent สร้างหน้า admin: เพิ่มสินค้า (Create) · แสดงเป็นตาราง (Read) · แก้ราคา (Update) · ลบ (Delete) แล้วหน้าเว็บอัปเดตทันที ผลลัพธ์: จัดการสินค้าผ่านหลังบ้านได้จริงโดยไม่ต้องแตะโค้ด
15.15–15.30Break
พักเบรก
พักสั้น ก่อนนำเว็บขายสินค้าขึ้นออนไลน์จริง
15.30–16.30WORKSHOP 4
Deploy — ขึ้นจริงด้วย Cloudflare Pages
นำเว็บขึ้น Cloudflare Pages ได้ subdomain ฟรี *.pages.dev · ต่อ Supabase ให้ทำงานบน production · เดโมผูกโดเมนจริง + เปิด SSL ผลลัพธ์: เว็บขายสินค้า live ใช้งานได้จริงจากทุกอุปกรณ์
16.30–17.00สรุป
ดูแลต่อ แก้ปัญหา และ Q&A
Troubleshooting เมื่อแอปมีปัญหา · บริหาร token และค่าใช้จ่าย · คลัง Prompt ดูแลเว็บเอง · เส้นทางต่อยอด (ระบบสมาชิก/ชำระเงิน) · มอบใบประกาศ
ผลลัพธ์หลังเรียน
ผู้เรียนทุกคนมีเว็บ Sales Page ขายสินค้าที่มีฐานข้อมูลจริง จัดการสินค้าผ่านหลังบ้านได้เอง และขึ้นออนไลน์แล้วบนลิงก์ของตนเอง พร้อม workflow ที่ทำซ้ำได้
Section 06
6. ขอบเขตการสอน
หลักสูตรโฟกัสที่การสร้างเว็บขายสินค้าให้เสร็จและใช้งานได้จริงใน 1 วัน โดยกำหนดขอบเขตให้ชัดเพื่อให้ทุกคนไปถึงผลลัพธ์พร้อมกัน
| หัวข้อ | แนวทางในหลักสูตร |
|---|---|
| การเขียนโค้ด | ไม่สอนเขียนโค้ดด้วยมือ เน้นการสั่ง AI Agent ให้สร้างและแก้โค้ดแทน โดยผู้เรียนเป็นผู้กำหนดทิศทางและตรวจงาน |
| โปรเจกต์หลัก | เว็บ Sales Page ขายสินค้าที่มีระบบ CRUD เป็นโปรเจกต์แกนของทั้งวัน เพื่อให้ทุกคนได้ลงมือครบทุกขั้นตอนจริง |
| ฐานข้อมูล | ใช้ Supabase เป็นฐานข้อมูลหลัก ครอบคลุมการสร้างตารางสินค้า เชื่อมต่อกับเว็บ และทำ CRUD ระดับใช้งานจริง |
| การนำขึ้นออนไลน์ | Deploy ด้วย Cloudflare Pages และใช้ subdomain ฟรี *.pages.dev ในคลาส ส่วนการผูกโดเมนจริงสอนแบบสาธิตให้เห็นทุกขั้นตอน |
| เครื่องมือที่ใช้ | Claude Code, Supabase และ Cloudflare เป็นเครื่องมือหลัก ใช้งานผ่านบัญชีฟรีหรือแพ็กเริ่มต้นได้ในระดับของคอร์ส |
| การดูแลหลังเรียน | ผู้เรียนได้ Playbook และคลัง Prompt เพื่อแก้ไข เพิ่มสินค้า และอัปเดตเว็บของตัวเองต่อได้เองหลังจบคลาส |
| ระบบที่ซับซ้อนขึ้น | ระบบสมาชิก/ล็อกอิน การชำระเงินออนไลน์ หรือระบบสต็อกเต็มรูปแบบ นำเสนอเป็นเส้นทางต่อยอด ไม่ลงลึกภายในวันเดียว |
สิ่งที่รวมอยู่ในคอร์ส
เนื้อหาและเวิร์กช็อปทั้งวัน · Handbook พร้อมคลัง Prompt คัดลอกได้ · Playbook การสั่งงาน AI Agent · ตัวอย่างโครงสร้างฐานข้อมูลสินค้า และใบประกาศเมื่อจบคอร์ส
สิ่งที่แนะนำให้เตรียม
โน้ตบุ๊กส่วนตัวพร้อมอินเทอร์เน็ต · อีเมลสำหรับสมัคร 3 บัญชี (Claude · Supabase · Cloudflare) · ไอเดียสินค้า/ร้านคร่าว ๆ ที่อยากนำมาทำเป็นเว็บขายจริง
Section 07
7. แนวทางการประเมินผลในคลาส
ประเมินจากผลงานที่ทำได้จริง ไม่ใช่การสอบ โดยดูจากความสมบูรณ์ของเว็บขายสินค้าและความเข้าใจ workflow
ความสมบูรณ์ของหน้าขาย
เว็บ Sales Page มีครบทั้ง Hero สินค้า รายการสินค้า และฟอร์ม แสดงผลถูกต้องทั้งบนคอมพิวเตอร์และมือถือ
ระบบ CRUD สินค้าใช้งานได้
เพิ่มสินค้า แก้ราคา และลบผ่านหลังบ้านได้จริง และข้อมูลอัปเดตถูกต้องบนหน้าเว็บ
การขึ้นออนไลน์สำเร็จ
เว็บเปิดใช้งานได้จากลิงก์จริง และเชื่อมต่อฐานข้อมูลบน production ได้
คุณภาพการสั่งงาน Agent
เขียน brief และ prompt ได้ชัดเจน สั่ง Agent แก้งานเดิมได้โดยไม่ทำให้เว็บพัง
Section 08
8. สรุปภาพรวม
One Day · One Real Sales Page
เริ่มจากศูนย์ ก็มีเว็บขายสินค้าที่ขึ้นออนไลน์จริงของตัวเองได้ ภายในวันเดียว
AI Agent for Web Application ทำให้ผู้เรียนที่ไม่เคยเขียนโค้ด สามารถสั่ง Claude Code สร้างเว็บ Sales Page ขายสินค้าที่มีฐานข้อมูลจริง จัดการสินค้าผ่านหลังบ้านได้เอง และนำขึ้นออนไลน์ด้วย Cloudflare พร้อม workflow และ Playbook ที่นำกลับไปต่อยอดในงานของตนเองได้ทันที