เตรียมเครื่องและเริ่มโปรเจกต์แรก | Vibe Coding สำหรับคนไม่ใช่โปรแกรมเมอร์ | Vibe Coding Thailand$ cat 03-setup-first-project.md บทที่ 3เตรียมเครื่องและเริ่มโปรเจกต์แรก
แก่นของบทนี้
ก่อนให้ Claude Code สร้างอะไร คุณต้องเตรียม “พื้นที่ทำงาน” ให้พร้อมก่อน
ไม่ใช่เพื่อให้คุณกลายเป็น programmer
แต่เพื่อให้คุณมีที่ปลอดภัยพอสำหรับให้ AI อ่านไฟล์ แก้ไฟล์ รันคำสั่ง และย้อนกลับได้ถ้าพัง
บทนี้จะทำให้คุณมี 4 อย่าง:
1. เครื่องพร้อมใช้ Claude Code
2. โฟลเดอร์ project ที่เป็นระเบียบ
3. Git สำหรับย้อนกลับ
4. prompt แรกสำหรับให้ Claude Code อ่าน project โดยไม่แก้ไฟล์
ถ้าทำ 4 อย่างนี้ได้ คุณพร้อมเริ่มบทถัดไป
ถ้าคุณต้องการทำตามแบบทีละขั้นจริง ๆ ไม่ต้องเดา command เอง ให้เปิด Appendix H — Setup Playbook คู่กับบทนี้ บทนี้อธิบายภาพรวม ส่วน Appendix H คือ checklist ลงมือทำ
สิ่งที่ต้องมีก่อนเริ่ม
เส้นทาง setup ขั้นต่ำก่อนเริ่ม project
ภาพนี้คือ setup path แบบย่อ: terminal, runtime, Claude Code, Git, project folder และ safety check
คุณไม่ต้อง setup ระบบซับซ้อน
แต่ควรมีสิ่งเหล่านี้:
- เครื่อง macOS, Windows หรือ Linux ที่ใช้งานประจำ
- internet connection
- terminal หรือ command prompt
- account ที่ใช้ Claude Code ได้
- Git/GitHub พื้นฐาน
- project folder หนึ่งอันสำหรับทดลอง
Claude Code official docs ระบุว่ามันใช้ได้หลาย interface เช่น terminal, web, desktop app, VS Code และ JetBrains
แต่ในเล่มนี้เราจะใช้แนวคิดหลักจาก terminal เพราะเข้าใจ workflow ได้ชัดที่สุด
ถ้าคุณใช้ desktop app หรือ VS Code หลายอย่างจะคล้ายกัน แค่หน้าตาเปลี่ยน
Terminal ไม่ได้น่ากลัวอย่างที่คิด
สำหรับเล่มนี้ terminal คือช่องสั่งงานเครื่องด้วยข้อความ
cd my-project
claude
git status
npm run dev
| คำสั่ง | ความหมาย |
|---|
cd my-project | เข้าโฟลเดอร์ project |
claude | เปิด Claude Code ในโฟลเดอร์นี้ |
git status | ดูว่าไฟล์ไหนเปลี่ยน |
npm run dev | เปิดเว็บในเครื่องเพื่อทดลอง |
คุณไม่ต้องจำทุกคำสั่งตั้งแต่แรก
ถ้าไม่เข้าใจคำสั่ง ให้ถาม Claude Code ก่อน approve:
คำสั่งนี้ทำอะไร อธิบายแบบ non-coder
มีความเสี่ยงไหม
ถ้าฉันไม่รันตอนนี้จะเกิดอะไรขึ้น
นิสัยนี้สำคัญกว่าการจำ command
ติดตั้ง Claude Code แบบไม่หลงรายละเอียด
เช็กว่า Claude Code ใช้งานได้จริงหลังติดตั้ง อย่าดูแค่ว่า install ผ่าน ให้ verify command, diagnostic และ login ให้เรียบร้อย
Official docs ของ Claude Code มีหลายวิธีติดตั้งตามระบบปฏิบัติการ
- เปิด terminal หรือ command prompt
- ใช้คำสั่งติดตั้งตามระบบของคุณ
- เปิด project folder
- พิมพ์
claude
- login เมื่อระบบถาม
ตัวอย่างจาก official quickstart คือเปิด project แล้วรัน:
หลังจาก login สำเร็จ คุณจะเริ่ม session กับ Claude Code ได้
ถ้าคุณติดตั้งแล้วพิมพ์ claude ไม่เจอ ให้มองหา error ก่อน ไม่ต้อง panic
error ที่เจอบ่อยคือเครื่องหา command ไม่เจอ เพราะ PATH ยังไม่ถูก หรือเปิด terminal เก่าที่ยังไม่ refresh
ให้ถาม Claude หรือดู troubleshooting ด้วยข้อความประมาณนี้:
ฉันติดตั้ง Claude Code แล้ว แต่พิมพ์ claude แล้วขึ้น command not found
ช่วยอธิบายสาเหตุแบบ non-coder และบอกขั้นตอนตรวจทีละข้อ
Project folder คือพื้นที่ทดลอง
Project แรกต้องเป็นพื้นที่ทดลองที่พังได้ก่อนแตะ project จริง ให้แยก playground ออกจากงานธุรกิจและข้อมูลลูกค้าจริง
อย่าเริ่มจาก project สำคัญของธุรกิจทันที
ให้เริ่มจากโฟลเดอร์ทดลองก่อน
vibe-coding-practice/
ข้างในอาจเป็น project ใหม่ หรือ project ตัวอย่างที่คุณตั้งใจใช้ฝึก
project แรกควรพังได้โดยไม่ทำให้ธุรกิจเสียหาย
ถ้าคุณมีเว็บบริษัทจริงอยู่แล้ว อย่าเพิ่งให้ AI แก้เว็บจริงตั้งแต่วันแรก
ให้ copy มาทดลอง หรือเริ่มจาก landing page ใหม่ที่ไม่กระทบระบบหลัก
Git คือปุ่ม save ที่ย้อนกลับได้
Git คือ save point ก่อนให้ AI แก้ไฟล์Git ช่วยให้คุณเห็นไฟล์ที่เปลี่ยน ดู diff และบันทึก checkpoint ก่อนงานใหญ่
สำหรับ non-coder ให้คิดว่า Git คือระบบบันทึก version ของ project
ไม่ต้องเข้าใจทุกคำสั่งลึก ๆ ตั้งแต่แรก
git status = ตอนนี้ไฟล์ไหนเปลี่ยน
git diff = เปลี่ยนอะไรบ้าง
git commit = บันทึก checkpoint
git log = ดูประวัติ checkpoint
เพราะ Claude Code แก้ไฟล์ได้จริง
ถ้าไม่มี Git คุณอาจไม่รู้ว่า AI เปลี่ยนอะไรไปบ้าง
- ไฟล์ไหนถูกแก้
- แก้อะไร
- ก่อนแก้เป็นยังไง
- จะย้อนกลับได้ไหม
ก่อนให้ Claude Code ทำงานใหญ่ ให้เริ่มจากสถานะที่สะอาด
ถ้ามีไฟล์เปลี่ยนอยู่แล้ว ให้รู้ก่อนว่าเป็นของใครและสำคัญไหม
อย่าให้ AI แก้ทับงานที่คุณยังไม่ได้บันทึกโดยไม่ตั้งใจ
GitHub จำเป็นไหม
GitHub คือที่เก็บ repo บน cloud เพื่อ backup, share, deploy หรือทำงานร่วมกับคนอื่น
สำหรับ project ฝึก คุณอาจยังไม่ต้องใช้ GitHub ทันที
แต่ถ้าจะ deploy กับ Vercel หรืออยาก backup project ไว้ GitHub จะมีประโยชน์มาก
- project ฝึกส่วนตัว: ใช้ Git local ก่อนก็ได้
- project ที่จะ deploy: ใช้ GitHub จะสะดวก
- project ที่มีข้อมูลลับ: อย่า push ขึ้น public repo โดยไม่ตรวจ
ก่อน push ขึ้น GitHub ให้เช็กว่าไม่มีไฟล์ลับ เช่น:
.env
API key
token
password
service role key
บท security จะลงรายละเอียด แต่จำไว้ก่อนว่า:
GitHub public repo ไม่ใช่ที่เก็บความลับ
เริ่ม session แรกอย่างปลอดภัย
เมื่อเข้า project folder แล้วเปิด Claude Code:
อย่าเริ่มด้วยคำสั่งให้แก้ไฟล์ทันที
เริ่มด้วยการให้มันอ่านและอธิบาย project ก่อน
ช่วยอ่าน project นี้แบบไม่แก้ไฟล์
สรุปให้ฉันเข้าใจแบบ non-coder:
1. project นี้น่าจะทำอะไร
2. ใช้ stack หรือเครื่องมืออะไร
3. ไฟล์สำคัญอยู่ตรงไหน
4. คำสั่งที่น่าจะใช้ run/test/build คืออะไร
5. มีอะไรที่ควรระวังก่อนแก้ไฟล์ไหม
คำว่า “แบบไม่แก้ไฟล์” สำคัญมาก
เพราะ session แรกควรเป็นการทำความเข้าใจ ไม่ใช่การลงมือทันที
ถ้า Claude Code เสนอจะรันคำสั่งหรือแก้ไฟล์ ให้คุณหยุดและถามก่อน:
ตอนนี้ฉันต้องการให้วิเคราะห์อย่างเดียว
อย่าเพิ่งแก้ไฟล์หรือรันคำสั่งที่เปลี่ยน project
คำสั่งตรวจความพร้อม
หลังจาก Claude Code อ่าน project แล้ว ให้ถามต่อ:
ช่วยทำ readiness checklist สำหรับ project นี้ก่อนเริ่มแก้ไฟล์
แยกเป็น:
1. สิ่งที่พร้อมแล้ว
2. สิ่งที่ยังไม่รู้
3. สิ่งที่ต้องระวัง
4. คำสั่งที่ควรใช้ run/test/build
5. ไฟล์ที่ไม่ควรแตะโดยไม่ถามก่อน
output นี้จะกลายเป็นแผนที่ของ project
คุณไม่ต้องเข้าใจทุกไฟล์ทันที
แต่คุณควรรู้ว่าอะไรคือพื้นที่ปลอดภัย และอะไรคือพื้นที่ที่ต้องถามก่อน
ถ้าไม่มี project เดิม ให้เริ่มจาก project ง่าย ๆ
ถ้าคุณยังไม่มี project ให้เริ่มจากสิ่งที่เล็กมาก
landing page 1 หน้า สำหรับบริการสมมติ
ไม่มี login
ไม่มี payment
ไม่มี database
มีแค่ headline, benefit, CTA และ contact form mockup
project ฝึกที่ดีควรมีคุณสมบัติ 4 อย่าง:
- ลบได้โดยไม่เสียดาย
- ไม่มีข้อมูลลูกค้าจริง
- ไม่มีเงินเกี่ยวข้อง
- ใช้ทดสอบ workflow ได้ครบ
เป้าหมายของ project แรกไม่ใช่สร้างธุรกิจทันที
เป้าหมายคือทำให้คุณคุ้นกับการสั่ง อ่าน plan ดู diff test และแก้จาก error
อย่าให้ AI install ทุกอย่างโดยไม่ถาม
เวลาเริ่ม project ใหม่ Claude Code อาจเสนอให้ติดตั้ง package หรือใช้ framework บางตัว
แต่สำหรับ non-coder อย่า approve การติดตั้งทุกอย่างแบบไม่อ่าน
ก่อนติดตั้ง package ใหม่ ให้ถาม:
ทำไมต้องติดตั้ง package นี้
ใช้ทำอะไร
มีทางเลือกที่ไม่ต้องติดตั้งเพิ่มไหม
package นี้จำเป็นกับ version แรกจริงไหม
ถ้าไม่ติดตั้ง ตอนนี้ยังทำงานต่อได้ไหม
version แรกควรใช้ของน้อยที่สุดเท่าที่พอทำงานได้
ยิ่ง dependency เยอะ คุณยิ่งต้องดูแลเยอะ
Folder ที่ควรระวัง
ในหลาย project จะมีไฟล์หรือโฟลเดอร์ที่ควรระวังเป็นพิเศษ
.env
.env.local
node_modules/
.git/
package-lock.json
supabase/
.vercel/
.env มักเกี่ยวกับ secret/config.git คือประวัติ version controlnode_modules คือ packages จำนวนมาก ไม่ควรแก้เอง- lock file เกี่ยวกับ version ของ dependency
ถ้า Claude Code จะไปแตะไฟล์กลุ่มนี้ ให้ถามเหตุผลก่อน
ทำไมต้องแก้ไฟล์นี้
มีความเสี่ยงอะไร
ถ้าแก้ผิดจะกระทบอะไร
มีวิธีที่ปลอดภัยกว่านี้ไหม
Checklist: เครื่องและ project พร้อมหรือยัง
ก่อนจบบทนี้ ให้เช็ก 12 ข้อนี้
แต่ให้แก้ให้ครบก่อนเริ่ม project จริง
Prompt รวมท้ายบท
ใช้ prompt นี้หลังเปิด Claude Code ใน project folder
ฉันเพิ่งเปิด Claude Code ใน project นี้
ฉันไม่ใช่ programmer และยังไม่ต้องการให้คุณแก้ไฟล์
ช่วยทำ project onboarding ให้ฉันแบบ non-coder:
1. project นี้น่าจะทำอะไร
2. โครงสร้าง folder หลัก ๆ คืออะไร
3. ไฟล์ไหนสำคัญที่สุด
4. command สำหรับ run/test/build น่าจะมีอะไรบ้าง
5. มีไฟล์ secret/config ที่ควรระวังไหม
6. ถ้าจะเริ่มแก้งานเล็ก ๆ ควรเริ่มตรงไหน
7. สิ่งที่ไม่ควรแตะโดยไม่ถามฉันก่อนคืออะไร
กติกา:
- ห้ามแก้ไฟล์
- ห้ามติดตั้ง package
- ห้ามรันคำสั่งที่เปลี่ยน project
- ถ้าต้องการรัน command เพื่ออ่านข้อมูล ให้บอกก่อนว่าคำสั่งนั้นทำอะไร
ถ้า Claude ตอบมาแล้วยัง technical เกินไป ให้ถามต่อ:
ช่วยอธิบายใหม่แบบคนไม่เคยเขียนโค้ดมาก่อน และสรุปเป็น checklist ที่ฉันทำตามได้
สรุป
บทนี้ไม่ได้ต้องการให้คุณ setup ทุกอย่างแบบ developer มืออาชีพ
ต้องการแค่ให้คุณมีพื้นที่ทำงานที่ปลอดภัยพอสำหรับเริ่มใช้ Claude Code
- เริ่มจาก project ที่พังได้
- ใช้ Git เป็น checkpoint
- เปิด Claude Code ใน folder ที่ถูกต้อง
- ให้ AI อ่านและสรุปก่อนแก้ไฟล์
- อย่า approve command/install/change ที่ไม่เข้าใจ
บทต่อไป เราจะทำให้ project เข้าใจง่ายขึ้นสำหรับ Claude Code ด้วยไฟล์ context เช่น CLAUDE.md เพื่อให้ AI ไม่ต้องเดา requirement สำคัญทุกครั้งที่เริ่ม session ใหม่
อัปเดตล่าสุด: 25 พ.ค. 2569
ความคิดเห็น
ยังไม่มีความคิดเห็น
เป็นคนแรกได้เลย