คู่มือลงมือทำสำหรับมือใหม่ — สั่ง Claude Code สร้างหน้าเว็บขายสินค้าที่มีฐานข้อมูลจริง แก้เพิ่ม/ลบสินค้าเองได้ผ่านหลังบ้าน แล้วขึ้นออนไลน์ด้วย Cloudflare
ทุกขั้นตอนมี prompt สำเร็จรูปให้คัดลอกใช้ได้ทันที แค่แก้ข้อมูลใน [วงเล็บเหลี่ยม] แล้ววางให้ Agent ทำงานต่อ
ผู้ใช้ เปิดเว็บ → Frontend หน้าตาที่เห็น → Backend ตรรกะเบื้องหลัง → Database ที่เก็บข้อมูลจริง — คู่มือนี้พาคุณสั่ง AI Agent สร้างครบทั้งเส้นทาง
จำสี 4 สีนี้ไว้ แล้วจะรู้ทันทีว่าตรงไหนต้องพิมพ์ ตรงไหน Agent ทำให้ ตรงไหนต้องระวัง และตรงไหนคือผลลัพธ์ที่ควรได้
สมัครฟรีทั้งหมด ใช้อีเมลเดียวกันได้ทั้งสามที่ เตรียมโน้ตบุ๊ก 1 เครื่องพร้อมอินเทอร์เน็ต
ไม่ต้องกลัว terminal — วาง prompt นี้ให้ Agent ตรวจเครื่องและบอกวิธีติดตั้งทีละขั้น
ฉันเป็นมือใหม่ ใช้ [Windows / macOS] อยากเริ่มทำเว็บด้วย Claude Code
ช่วยตรวจว่าเครื่องฉันมี Node.js และ Git แล้วหรือยัง
ถ้ายังไม่มี ให้บอกวิธีติดตั้งทีละขั้นแบบละเอียด ภาษาไทย
และอธิบายสั้น ๆ ว่าแต่ละอย่างมีไว้ทำอะไรทำตามลำดับ 1 → 4 แต่ละ Workshop ต่อยอดจากอันก่อนหน้า ตัวอย่างใช้ร้านสมมติ “NORTHPEAK” (ร้านขายอุปกรณ์กิจกรรมกลางแจ้ง) — เปลี่ยนเป็นข้อมูลจริงของร้านคุณได้ทุกจุด ติ๊ก “ทำแล้ว” เพื่อนับความคืบหน้า
เป้าหมาย: สั่ง Agent สร้างเว็บขายสินค้าครบชุด 4 หน้า — หน้าแรก · สินค้า · เกี่ยวกับเรา · ติดต่อกับทางร้าน — ดีไซน์สวยและเปิดบนมือถือได้ดี
สร้างโฟลเดอร์ใหม่ เช่น northpeak-shop เปิด Claude Code ในโฟลเดอร์นั้น แล้ววาง prompt แรก
ช่วยสร้างโปรเจกต์เว็บใหม่ในโฟลเดอร์นี้ให้หน่อย
- เป็นเว็บแบบ static ใช้ HTML, CSS, JavaScript ธรรมดา (ยังไม่ต้องใช้ framework)
- ทำหน้า index.html ที่มีข้อความว่า "NORTHPEAK — เร็ว ๆ นี้" ไว้ก่อน
- ตั้งค่าให้รันดูในเบราว์เซอร์ได้ด้วยคำสั่งเดียว
เสร็จแล้วบอกฉันว่าต้องพิมพ์คำสั่งอะไรเพื่อเปิดดูเว็บ
และอธิบายสั้น ๆ ว่าแต่ละไฟล์ที่สร้างมีหน้าที่อะไรทำตามคำสั่งรันที่ Agent บอก แล้วเปิด http://localhost ในเบราว์เซอร์ — เห็นข้อความ NORTHPEAK แปลว่าพร้อมทำต่อ
ยิ่ง brief ชัด เว็บยิ่งตรงใจ เติมข้อมูลร้านคุณในช่อง [...] ให้ครบ แล้วส่ง prompt นี้
ฉันอยากได้เว็บ Sales Page สำหรับร้านนี้:
- ชื่อร้าน: [NORTHPEAK]
- ขายอะไร: [อุปกรณ์และของใช้สำหรับกิจกรรมกลางแจ้ง]
- กลุ่มลูกค้า: [นักเดินป่าและคนชอบตั้งแคมป์]
- โทนแบรนด์: [น่าเชื่อถือ ทันสมัย โทนเขียวเข้ม–ดำ]
ช่วยสร้างเว็บ 4 หน้า: หน้าแรก, สินค้า, เกี่ยวกับเรา, ติดต่อกับทางร้าน
- มีเมนูนำทางด้านบนที่ลิงก์ทุกหน้าถึงกัน
- หน้าแรกมี hero พร้อมหัวข้อใหญ่และปุ่ม call-to-action ("ดูสินค้า")
- หน้าสินค้าแสดงสินค้าเป็นการ์ด (รูป ชื่อ ราคา ปุ่มดูรายละเอียด) ใส่สินค้าตัวอย่างไปก่อน
- หน้าติดต่อมีข้อมูลร้าน ช่องทางติดต่อ และแผนที่
- ดีไซน์สะอาด ทันสมัย และต้อง responsive เปิดบนมือถือสวย
ทำทีละหน้าและให้ฉันเปิดดูผลได้เรื่อย ๆพอโครงหน้าตาลงตัว มักมีรอบ “ใส่ของจริง” เสมอ — เอาโลโก้ รูปสินค้า ฟอนต์จริงมาให้ Agent สลับให้ในคำสั่งเดียว
ช่วยแก้ไขเพิ่มเติมให้หน่อย:
- เปลี่ยนโลโก้เป็นไฟล์จริงที่ [วางพาธ/ชื่อไฟล์โลโก้]
- เปลี่ยนรูป Banner หน้าแรกเป็นรูปจริงที่ [วางพาธ/ชื่อไฟล์รูป]
- ใช้ฟอนต์ [ชื่อฟอนต์ เช่น Kanit] ทั้งเว็บ
- ห้ามใช้อีโมจิในหน้าเว็บเด็ดขาด ให้เปลี่ยนเป็นไอคอนที่สื่อความหมายแทนทั้งหมด
ช่วยปรับให้หน้าเว็บดูมีความเป็นมืออาชีพมากยิ่งขึ้น
เป้าหมาย: สร้างตารางสินค้าใน Supabase, รู้ วิธีไปหา Key ที่หน้าเว็บของ Supabase และ Cloudflare, เก็บ Key ไว้อย่างปลอดภัย แล้วเชื่อมให้หน้า “สินค้า” ดึงข้อมูลจริง
ฉันอยากเก็บ "รายการสินค้า" ของร้านไว้ในฐานข้อมูล Supabase
เพื่อให้แก้เพิ่ม/ลบสินค้าได้ทีหลังโดยไม่ต้องแก้โค้ด
ช่วยอธิบายแบบมือใหม่ว่าควรมีตารางอะไร มีคอลัมน์อะไรบ้าง
(เช่น ชื่อสินค้า, รายละเอียด, ราคา, รูปสินค้า, สถานะขาย/หมด)
แล้วเขียนขั้นตอนสร้างตารางนี้ใน Supabase ให้ฉันทำตามทีละคลิกSupabase key: เปิด Supabase → เลือกโปรเจกต์ → Settings → API จะเห็น Project URL และ anon key — คัดลอกทั้งสองค่ามาเก็บในไฟล์ข้อความในโฟลเดอร์โปรเจกต์ (เช่น Key.txt) ไม่พิมพ์ลงแชตตรง ๆ แล้วให้ Agent อ่านจากไฟล์แทน
Cloudflare key: เตรียม API Token ของ Cloudflare ไว้ในไฟล์เดียวกันด้วย (จะได้ใช้ต่อตอน Deploy ใน Workshop 4) — ไม่รู้จะเริ่มตรงไหน กดดูคู่มือทีละขั้นได้เลย
คู่มือสร้าง Cloudflare API Key →ฉันเก็บวิธีเชื่อมต่อ Supabase (Project URL และ anon key) ไว้ที่ไฟล์ [ชื่อไฟล์] แล้ว
ช่วยเชื่อมเว็บนี้เข้ากับ Supabase ให้หน่อย
- ทำให้หน้า "สินค้า" ดึงรายการสินค้าจากตารางใน Supabase มาแสดงแทนข้อมูลที่ hardcode ไว้
- ถ้าฐานข้อมูลยังว่าง ให้แสดงข้อความว่า "ยังไม่มีสินค้าในขณะนี้"
อธิบายให้ฉันเข้าใจด้วยว่าข้อมูลเดินทางจากฐานข้อมูลมาที่หน้าเว็บอย่างไร
เป้าหมาย: นี่คือหัวใจของ “แก้เองได้ ใช้ระยะยาว” — สร้างหน้า admin หลังบ้านที่เพิ่ม ลบ แก้ไขสินค้าได้เองผ่านหน้าเว็บ (CRUD) เข้าผ่าน Modal กรอก PIN 6 หลัก โดยไม่ต้องทำระบบ Login — Basic ง่าย ๆ แต่ยืดหยุ่นพอสำหรับใช้งานจริง
ระบุทุกอย่างในคำสั่งเดียว: การเข้าด้วย PIN, ฟอร์ม, ตาราง และปุ่มแก้/ลบ — ไม่ต้องทำระบบ Login เต็มรูปแบบ
ช่วยสร้างหน้า admin สำหรับจัดการ "รายการสินค้า" ในตาราง Supabase
โดยวิธีการเข้าถึงหน้านี้ ไม่ต้องทำหน้า Login อะไรให้มันยิ่งใหญ่ ขอแค่เมื่อเข้ามาที่หน้า admin.html
ให้มี Modal เด้งขึ้นมาให้กรอกรหัส PIN 6 หลัก ถ้ากรอกถูกเข้าหน้า admin ได้ ถ้ากรอกผิดจะเข้าไม่ได้
- มีฟอร์มเพิ่มสินค้าใหม่ (Create)
- แสดงสินค้าทั้งหมดเป็นตาราง (Read)
- แต่ละแถวมีปุ่มแก้ไข (Update) และปุ่มลบ (Delete) พร้อมถามยืนยันก่อนลบ
- เมื่อเพิ่ม/แก้/ลบ แล้ว ให้ตารางอัปเดตทันทีโดยไม่ต้องรีเฟรชเอง
ทำให้ใช้งานง่ายสำหรับคนที่ไม่ใช่โปรแกรมเมอร์Agent จะถามรหัส PIN — ตอบเลข 6 หลักที่จำง่ายแต่คนอื่นเดายาก แล้วปล่อยให้ Agent เก็บให้
จุดพลาดบ่อย: มีหน้า admin ไม่ได้แปลว่าหน้าสินค้าที่ลูกค้าเห็นจะอัปเดตเอง ต้องสั่งอีกรอบให้ดึงข้อมูลจากตารางเดียวกันไปแสดง
ตอนนี้ฉันเพิ่ม/แก้สินค้าผ่านหน้า admin ได้แล้ว
ช่วยทำให้หน้า "สินค้า" ที่ลูกค้าเห็นดึงข้อมูลจากตารางเดียวกันมาแสดงสดด้วย
ถ้ายังไม่มีสินค้าในตาราง ให้ขึ้นข้อความที่เข้าใจง่ายแทน เช่น "ยังไม่มีสินค้าในขณะนี้"
เป้าหมาย: นำ Sales Page ขึ้น Cloudflare Pages ให้ได้ลิงก์จริง (*.pages.dev) ที่เปิดได้ทุกอุปกรณ์ พร้อมต่อ Supabase บน production
Token ที่คุณสร้างและเก็บไว้ในไฟล์ตั้งแต่ Workshop 2 จะได้ใช้ตรงนี้ — ถ้ายังไม่ได้สร้าง กดดูคู่มือทีละขั้นตอนได้
คู่มือสร้าง Cloudflare API Key →ฉันอยากนำเว็บนี้ขึ้นออนไลน์ด้วย Cloudflare Pages
ฉันเก็บ Cloudflare API Token ไว้ที่ไฟล์ [ชื่อไฟล์] แล้ว
ช่วยพาฉันทำทีละขั้นแบบมือใหม่ ตั้งค่าให้ deploy สำเร็จ
อย่าลืมตั้งค่า Supabase URL / key บน production ให้เว็บจริงดึงข้อมูลได้ด้วย
บอกฉันทุกปุ่มที่ต้องกด และถ้าต้องใช้คำสั่งใน terminal ให้เขียนให้ครบเว็บขึ้นออนไลน์แล้วที่ลิงก์ [วางลิงก์ .pages.dev ของคุณ]
ช่วยไล่เช็คกับฉันว่าอะไรที่ต้องทดสอบบ้าง เช่น
- ทุกหน้าเปิดได้และเมนูใช้ได้
- หน้าสินค้าดึงข้อมูลจาก Supabase บน production ได้
- หน้า admin เข้าด้วย PIN แล้วเพิ่ม/แก้/ลบ ข้อมูลอัปเดตจริง
ถ้าเจอจุดที่พัง ให้ช่วยไล่หาสาเหตุทีละอย่างมีโดเมนของตัวเองอยู่แล้วก็ต่อเข้ากับ Pages project ได้เลย ไม่มีก็ข้ามขั้นนี้ไปได้ — ใช้ลิงก์ *.pages.dev ฟรีต่อไปก็ได้
ฉันมีโดเมนของตัวเองชื่อ [yourshop.com]
ช่วยบอกวิธีต่อโดเมนนี้เข้ากับ Cloudflare Pages project ของฉันทีละขั้น
ทั้งส่วนที่ต้องทำใน Cloudflare และส่วนที่ต้องไปตั้งค่าที่ผู้ให้บริการจดโดเมนหัวใจคอร์สนี้คือ “เว็บที่ดูแลต่อเองได้” — เก็บ prompt ชุดนี้ไว้ใช้ตอนอัปเดตข้อมูล เพิ่มหน้าใหม่ แก้ปัญหา หรือ deploy รอบใหม่
ช่วยแก้เนื้อหาในเว็บให้หน่อย:
- [เปลี่ยนเบอร์โทรในหน้าติดต่อเป็น 02-xxx-xxxx]
- [แก้ข้อความแนะนำร้านในหน้าเกี่ยวกับเราตามนี้: ...]
แก้แล้วให้ฉันดูผลบนเครื่องก่อน ถ้าโอเคค่อยพาฉัน deploy ขึ้น Cloudflare อีกรอบ
และบอกวิธีตรวจว่าเวอร์ชันใหม่ขึ้นแล้วจริงฉันอยากเพิ่มหน้าใหม่ชื่อ [โปรโมชั่น / รีวิวลูกค้า]
- ให้ดึงข้อมูลจากตารางใหม่ใน Supabase เหมือนหน้าสินค้า
- เพิ่มลิงก์หน้านี้เข้าไปในเมนูด้วย
- ทำให้จัดการข้อมูลหน้านี้ในหน้า admin ได้เหมือนกัน
ช่วยออกแบบตารางที่ควรใช้ให้ก่อน แล้วค่อยลงมือทำช่วยตรวจเว็บนี้ให้ฉันหน่อย:
- มี key หรือข้อมูลลับหลุดอยู่ในโค้ดฝั่งหน้าเว็บไหม
- สิทธิ์การเข้าถึงตารางใน Supabase ตั้งค่าปลอดภัยหรือยัง
- มีจุดไหนที่ควรปรับปรุงก่อนใช้งานจริงจัง
สรุปเป็นรายการให้ฉันเข้าใจง่าย พร้อมระดับความสำคัญไม่ต้องท่องจำ อ่านผ่าน ๆ ให้คุ้นตา เวลาเจอในคู่มือหรือตอนคุยกับ Agent จะได้ไม่งง
มือใหม่เกือบทุกคนเจอสถานการณ์เหล่านี้ กดเปิดดูแล้วคัดลอก prompt ไปวางให้ Agent ช่วยแก้ได้เลย
อย่าเพิ่งตกใจ ให้ย้อนกลับก่อน แล้วค่อยแก้ทีละจุด คัดลอก prompt นี้:
หลังจากแก้ล่าสุด เว็บพัง/ขึ้นหน้าขาว
ช่วยย้อนการแก้ครั้งล่าสุดกลับไปสถานะที่ยังใช้ได้
แล้วอธิบายว่าอะไรทำให้พัง จากนั้นค่อยแก้ใหม่ทีละขั้นมักเป็นเพราะ server ยังไม่รัน หรือใช้ลิงก์/พอร์ตผิด ลองส่ง prompt นี้:
ฉันเปิด localhost แล้วไม่ขึ้นอะไรเลย
ช่วยตรวจว่า server รันอยู่ไหม ต้องเปิดที่ลิงก์และพอร์ตอะไร
บอกฉันทีละขั้นว่าต้องพิมพ์คำสั่งอะไรและเปิดลิงก์ไหนเช็คได้หลายจุด ทั้ง key, ชื่อตาราง, และสิทธิ์ ให้ Agent ไล่ให้:
หน้าสินค้าดึงข้อมูลจาก Supabase มาแสดงไม่ได้ (ว่างเปล่า)
ช่วยไล่ตรวจให้ทีละอย่าง: ค่า URL/key ถูกไหม ชื่อตารางตรงไหม
สิทธิ์ (RLS/policy) เปิดให้อ่านหรือยัง และมี error ใน console ไหม
เจออะไรให้บอกวิธีแก้ทีละขั้นให้ Agent ไล่ตรวจ Modal และการตรวจ PIN ทีละจุด:
ฉันกรอก PIN ในหน้า admin ถูกแล้วแต่ยังเข้าไม่ได้ (หรือ Modal ไม่ยอมปิด)
ช่วยไล่ตรวจว่าโค้ดเทียบ PIN ถูกต้องไหม เก็บค่า PIN ไว้ที่ไหน
และมี error ใน console หรือเปล่า เจออะไรให้บอกวิธีแก้ทีละขั้นคัดลอกข้อความ error สีแดงจากหน้า Cloudflare มาแนบไปกับ prompt นี้:
Deploy บน Cloudflare Pages แล้ว build ไม่ผ่าน
นี่คือ log ที่ขึ้น: [วาง error ทั้งหมดตรงนี้]
ช่วยอ่านและบอกสาเหตุกับวิธีแก้แบบทีละขั้น ภาษาไทยสูตรง่าย ๆ: บอก (1) สิ่งที่อยากได้ (2) บริบท (3) รูปแบบผลลัพธ์ แล้วขอให้ทำทีละขั้น ถ้ายังไม่ตรงให้บอก “ยังไม่ใช่ตรงนี้…” แล้วชี้จุดที่อยากแก้