ApexHuasคู่มือช่างเว็บ GitHub repo

บทที่ 1 — สร้างเว็บด้วย AI: ภาพรวมทั้งระบบ

คู่มือนี้สอนวิธีทำงานแบบที่โปรเจกต์นี้ทำจริง คือ ให้ AI (Claude Code) เขียนโค้ด ส่วนคุณเป็นคนกำหนดทิศทาง ตรวจงาน และกดปุ่มปล่อยของ

ผลลัพธ์คือเว็บ ApexHuas ที่ออนไลน์อยู่จริงตอนนี้ที่ https://apexhuas.choiceflowhub.com — สร้างจากศูนย์จนเสร็จ ~45 หน้า สองภาษา พร้อมระบบ deploy อัตโนมัติ ในเวลาไม่กี่วัน

เรื่องสำคัญที่สุดที่ต้องเข้าใจก่อน

AI เขียนโค้ดได้เร็วมาก แต่ มันไม่รู้ว่าอะไรถูกสำหรับธุรกิจของคุณ และมันไม่รับผิดชอบตอนเว็บล่ม

งานของคุณจึงเปลี่ยนไป — ไม่ใช่ "คนพิมพ์โค้ด" แต่เป็น คนคุมคุณภาพ ที่ต้องรู้ว่ากำลังจะปล่อยอะไรออกไป

งานเปลี่ยนไปยังไงเมื่อมี AI ช่วยเขียน

งานของคุณ (คนคุม)

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

กับดักที่พบบ่อย

  • สั่งลอย ๆ ว่า 'ทำเว็บให้หน่อย' แล้วหวังว่าจะตรงใจ
  • merge โดยไม่เคยเปิดดูโค้ดเลยสักบรรทัด
  • เชื่อว่า 'AI บอกว่าเทสต์ผ่าน' โดยไม่ดูผลจริง
  • ไม่รู้ว่าโค้ดที่ merge ไปแล้วไปโผล่ที่ไหน
  • ไม่มีระบบตรวจอัตโนมัติ — พังแล้วรู้ตอนลูกค้าโทรมา

คู่มือนี้จะทำให้คุณอยู่ฝั่งซ้ายได้ โดยไม่ต้องเป็นวิศวกรอาวุโส

ระบบทั้งหมดมีอะไรบ้าง

ลองคลิกดูทีละกล่อง — แต่ละอันจะอธิบายว่ามันคืออะไรและอยู่ตรงไหนของเรื่อง

แผนที่ระบบ: ของอยู่ที่ไหนบ้าง

เครื่องคุณ

GitHub (คลาวด์)

Server (VM บนคลาวด์)

คลิกกล่องด้านบนเพื่อดูคำอธิบาย

ยังไม่ต้องจำ — แค่รู้ว่ามีอะไรบ้าง แล้วบทต่อ ๆ ไปจะเจาะทีละกล่อง

เส้นทางของโค้ด: จากที่คุณพิมพ์สั่ง จนคนทั้งโลกเห็น

นี่คือหัวใจของคู่มือทั้งเล่ม กดปุ่ม ถัดไป เพื่อเดินดูทีละขั้น

วงจรงานหนึ่งรอบ (ตั้งแต่สั่ง AI จนเว็บอัปเดต)

1. บอก AI ว่าจะทำอะไร

อธิบายงานที่ต้องการเป็นภาษาคน ยิ่งบอกบริบทและข้อจำกัดชัด ผลยิ่งตรงใจ AI จะอ่านกฎของโปรเจกต์จากไฟล์ AGENTS.md ให้เองก่อนลงมือ

คนสั่ง AI ทำ

1 / 10

สังเกตว่า 'คน' ตัดสินใจแค่ 3 จุด: สั่งงาน, รีวิว, กดปล่อย — ที่เหลือเป็นงานอัตโนมัติทั้งหมด

คุณต้องรู้อะไรบ้าง (และไม่ต้องรู้อะไร)

ขอบเขตความรู้ที่จำเป็นจริง ๆ

ต้องรู้ (คู่มือนี้สอนครบ)

  • Git พื้นฐาน: commit / branch / PR คืออะไร
  • อ่านผล CI เป็น แดงเพราะอะไร
  • เข้าใจว่า Docker คือการห่อโค้ดเป็นก้อน
  • รู้ว่าเว็บรันอยู่ที่ไหน และเข้าไปดูได้
  • รู้ว่าจะสั่ง AI ยังไงให้ได้งานที่ใช้ได้
  • รู้ว่าต้องตรวจอะไรก่อนกดปล่อยของ

ยังไม่ต้องรู้ตอนนี้

  • เขียน Dockerfile เองตั้งแต่ต้น
  • ตั้งค่า Linux server ด้วยมือทุกขั้น
  • เขียน YAML ของ GitHub Actions เองทั้งไฟล์
  • ระบบ TLS/ใบรับรองทำงานยังไงในระดับลึก
  • จำคำสั่ง Git ครบทุกตัว (มี cheat sheet ให้)

เตรียมเครื่อง

เครื่องมือ ใช้ทำอะไร เช็คด้วยคำสั่ง
Git จัดการเวอร์ชันโค้ด git --version
Node.js 20.9+ รันเว็บในเครื่อง (โปรเจกต์นี้ใช้ 24) node --version
Claude Code AI ที่จะช่วยเขียนโค้ด claude --version
บัญชี GitHub เก็บโค้ด + รัน CI/CD เปิดที่ github.com

Docker ยังไม่ต้องติดตั้ง (ค่อยว่ากันบทที่ 9)

เช็คความเข้าใจก่อนไปต่อ

พร้อมแล้วไปบทที่ 2 — ทำความรู้จักเครื่องมือหลักที่จะใช้ทุกวัน คือ Claude Code