พอเริ่มทำเว็บจริง จะเจอชื่อเครื่องมือเต็มไปหมด หลายคนสับสนว่าตัวไหนทำอะไร และทำไมต้องมีหลายตัวขนาดนี้
บทนี้วางแผนที่ให้เห็นทั้งเส้นในหน้าเดียว
สไลด์ 1 — เครื่องมือเหล่านี้สัมพันธ์กันยังไง
ลำดับที่ต้องจำคือ ทำงานในเครื่อง → บันทึกด้วย Git → ฝากบน GitHub → Vercel ปล่อยเป็นเว็บจริง
- คอมของเรา ที่ที่งานเกิดขึ้นทั้งหมด
- VS Code ที่เปิดและแก้ไฟล์
- Claude Code AI ที่ช่วยคิด แก้ไฟล์ และรันคำสั่งให้
- Git ปุ่มเซฟของงาน บันทึกเวอร์ชันในเครื่อง
- GitHub ที่เก็บโค้ดออนไลน์ สำรองและแชร์ให้ทีม
- Vercel ตัวที่เอาโค้ดไปทำให้กลายเป็นเว็บจริงที่คนเปิดได้
- Supabase ฐานข้อมูล เก็บลูกค้าและออเดอร์
สไลด์ 2 — ภาพเต็มของทั้งสาย
สไลด์ใหญ่ใบนี้ไล่ครบทั้งเจ็ดตัว ไม่ต้องจำทั้งหมดในรอบเดียว ให้จำแค่ว่ามันแบ่งเป็นสามฝั่ง
- ฝั่งเครื่องเรา VS Code กับ Claude Code กับ Git
- ฝั่งออนไลน์ GitHub กับ Vercel
- ฝั่งข้อมูล Supabase
งานวิ่งจากซ้ายไปขวาเสมอ คือเขียนในเครื่อง เก็บเวอร์ชัน ส่งขึ้นออนไลน์ แล้วเว็บดึงข้อมูลจากฐานข้อมูลมาแสดง
สไลด์ 3 — ศัพท์ที่ต้องรู้ในบทนี้
- Local บนเครื่องเรา ไฟล์ที่อยู่ในคอมของเราคนเดียว ยังไม่มีใครเห็น
- Repository ที่เก็บโค้ด กล่องเก็บไฟล์ทั้งโปรเจคพร้อมประวัติการแก้
- Deploy ปล่อยขึ้นเว็บ เอาโค้ดไปวางบนเครื่องที่คนอื่นเปิดได้
- Database ฐานข้อมูล ที่เก็บข้อมูลลูกค้าและออเดอร์ ไม่หายเมื่อปิดหน้าจอ
รู้สี่คำนี้ ฟังคนอื่นคุยเรื่องทำเว็บออกทันที
สไลด์ 4 — ทำไมต้องมี Git คั่นกลาง
ไม่มี Git ไฟล์ในเครื่องมีเวอร์ชันเดียว แก้ทับไปเรื่อย ๆ พอพังแล้วย้อนกลับไม่ได้ สุดท้ายต้องก๊อปโฟลเดอร์เก็บไว้หลายชุดจนไม่รู้ว่าอันไหนล่าสุด
มี Git ทุกจุดที่เราบันทึกไว้ ย้อนกลับไปได้หมด และรู้ว่าแต่ละจุดแก้อะไรไปบ้าง
Git คือปุ่มเซฟของงาน ไม่ใช่เรื่องของโปรแกรมเมอร์เท่านั้น คนทำธุรกิจที่สั่ง AI แก้งานทุกวัน ยิ่งต้องมี
ลองทำเลย
สั่ง AI ว่า "ช่วยตั้ง Git ให้โปรเจคนี้ แล้วบันทึกจุดปัจจุบันไว้เป็นจุดแรก พร้อมอธิบายว่าทำอะไรไปบ้าง" แล้วอ่านคำอธิบายที่มันตอบ จะเข้าใจเร็วกว่าอ่านคู่มือ
สไลด์ 5 — หนึ่งวันของการทำเว็บ ใช้ตัวไหนตอนไหน
- สั่งงานให้ AI เขียนโค้ดในเครื่อง
- บันทึกจุดที่ทำเสร็จไว้ด้วย Git
- ส่งขึ้นที่เก็บโค้ดออนไลน์
- เว็บอัปเดตให้เองอัตโนมัติ
- ข้อมูลลูกค้าเก็บแยกไว้อีกที่
จำเป็นประโยคเดียวได้เลยว่า ทำในเครื่อง เซฟด้วย Git ส่งขึ้นเว็บ ข้อมูลอยู่อีกที่
เช็คลิสต์ก่อนไปบทถัดไป
- บอกได้ว่าเครื่องมือแต่ละตัวทำหน้าที่อะไร
- เข้าใจว่าทำไมต้องมี Git คั่นระหว่างเครื่องเรากับออนไลน์
- แยกออกว่าอะไรอยู่ในเครื่อง อะไรอยู่ออนไลน์
- มีโปรเจคที่ตั้ง Git ไว้แล้วอย่างน้อยหนึ่งอัน