PATIPHAN DEV
หน้าแรกคอร์สเรียนผลงานสินค้าบทความเกี่ยวกับผมติดต่อ
เข้าสู่ระบบ
AI Full Stack Developer
ความคืบหน้า0/15 บทเรียน (0%)

บทที่ 1 · ปูพื้นฐาน AI-Driven Development

  • แนะนำคอร์ส + สิ่งที่คุณจะสร้างได้12 นาที
  • ติดตั้งเครื่องมือ: Claude Code / Cursor / Node.js20 นาที
  • หลักการสั่งงาน AI ให้ได้ code ระดับ production25 นาที

บทที่ 2 · สร้างเว็บแรกด้วย Next.js + AI

  • โครงสร้างโปรเจกต์ Next.js ที่ AI ทำงานด้วยได้ดี18 นาที
  • สร้าง landing page ด้วย AI ใน 30 นาที30 นาที
  • Tailwind + responsive design แบบมืออาชีพ22 นาที

บทที่ 3 · Database & Auth ด้วย Supabase

  • ออกแบบ database schema ให้ถูกตั้งแต่แรก20 นาที
  • Auth + Row Level Security25 นาที
  • สร้างระบบ CRUD จริงทั้ง flow28 นาที

บทที่ 4 · เชื่อม AI เข้าแอปของคุณ

  • เรียกใช้ LLM API จากแอปของคุณ20 นาที
  • สร้างฟีเจอร์ AI chat แบบ streaming30 นาที
  • จัดการ cost และ token ไม่ให้บานปลาย15 นาที

บทที่ 5 · Deploy & Workshop

  • Deploy ขึ้น production บน Vercel18 นาที
  • Custom domain + environment variables15 นาที
  • Workshop: สร้าง SaaS จริงตั้งแต่ต้นจนจบ60 นาที
100%
ติดตั้งเครื่องมือ: Claude Code / Cursor / Node.js

ติดตั้งเครื่องมือ: Claude Code / Cursor / Node.js

ใช้เวลาประมาณ 20 นาที

ในบทนี้

  1. 1.สิ่งที่ต้องมีก่อนเริ่ม
  2. 2.1. ติดตั้ง Node.js
  3. 3.2. ติดตั้ง Editor: VS Code หรือ Cursor
  4. 4.3. ติดตั้ง Claude Code
  5. 5.4. ทดสอบสั่งงาน AI ครั้งแรก
  6. 6.เช็กลิสต์ก่อนไปต่อ
  7. 7.แก้ปัญหาที่เจอบ่อย

ติดตั้งเครื่องมือ: Claude Code / Cursor / Node.js

บทนี้เราจะ setup เครื่องให้พร้อมทำงานกับ AI ตลอดทั้งคอร์ส ใช้เวลาประมาณ 20 นาที ทำตามทีละขั้นได้เลย — จบบทนี้คุณจะสั่งงาน AI ให้เขียน code ได้เป็นครั้งแรก

สิ่งที่ต้องมีก่อนเริ่ม

  • คอมพิวเตอร์ macOS, Windows 10/11 หรือ Linux
  • พื้นที่ว่างอย่างน้อย 2 GB
  • อินเทอร์เน็ตเสถียร (ตัว AI ทำงานผ่าน cloud)

1. ติดตั้ง Node.js

Node.js คือ runtime ที่ทั้ง Next.js และ Claude Code ต้องใช้ แนะนำเวอร์ชัน LTS ล่าสุด (22.x ขึ้นไป)

macOS / Linux — ติดตั้งผ่าน nvm จะเปลี่ยนเวอร์ชันทีหลังได้ง่ายที่สุด:

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.1/install.sh | bash
# ปิด-เปิด terminal ใหม่ แล้ว:
nvm install --lts

บทถัดไป

หลักการสั่งงาน AI ให้ได้ code ระดับ production

ใช้เวลาประมาณ 25 นาที

 บทก่อนหน้า: แนะนำคอร์ส + สิ่งที่คุณจะสร้างได้

Windows — โหลด installer จาก nodejs.org เลือกปุ่ม LTS แล้ว Next รัวๆ ได้เลย (ติ๊ก "Add to PATH" ไว้ตามค่าเริ่มต้น)

ตรวจว่าติดตั้งสำเร็จ — เปิด terminal (macOS: Terminal, Windows: PowerShell) แล้วพิมพ์:

node -v   # ควรขึ้น v22.x.x หรือใหม่กว่า
npm -v    # ควรขึ้นเลขเวอร์ชัน เช่น 10.x.x

ถ้าขึ้นเลขเวอร์ชันทั้งสองตัว ผ่านขั้นแรกแล้ว 🎉

2. ติดตั้ง Editor: VS Code หรือ Cursor

เลือกอย่างใดอย่างหนึ่ง (คอร์สนี้ใช้ได้ทั้งคู่):

VS CodeCursor
ราคาฟรีฟรี (มี Pro ~$20/เดือน)
AI ในตัวผ่าน extensionฝังมาในตัว เขียน/แก้ code ด้วย AI ได้ทันที
เหมาะกับคนที่จะใช้ Claude Code เป็นหลักคนที่อยากได้ AI แนะนำ code ระหว่างพิมพ์ด้วย
  • VS Code: code.visualstudio.com
  • Cursor: cursor.com

ติดตั้งเสร็จ เปิดโปรแกรม แล้วเปิด terminal ในตัว editor ขึ้นมา — เราจะใช้ terminal นี้ตลอดคอร์ส

วิธีที่ชัวร์ที่สุดคือเปิดจากเมนู: View → Terminal (หรือ Terminal → New Terminal) จะมีช่อง terminal โผล่ขึ้นมาครึ่งล่างของหน้าจอ

ทางลัดคือ Ctrl+` (Windows) / Cmd+` (macOS) แต่ถ้ากดแล้วไม่ขึ้น ไม่ต้องตกใจ — ปุ่ม ` (backtick, อยู่ซ้ายบนใต้ปุ่ม Esc) จะถูกทับด้วยปุ่ม _ / ฿ เมื่อสลับเป็น แป้นพิมพ์ภาษาไทย ทำให้ editor จับ shortcut ไม่ได้ ให้สลับกลับเป็นภาษาอังกฤษก่อนแล้วลองใหม่ หรือใช้เมนูข้างบนไปเลย

อีกทางที่ใช้ได้เสมอ: กด Ctrl+Shift+P (Windows) / Cmd+Shift+P (macOS) เพื่อเปิด Command Palette แล้วพิมพ์ Toggle Terminal แล้วกด Enter

3. ติดตั้ง Claude Code

Claude Code คือ AI pair programmer — สั่งเป็นภาษาคนได้เลยว่าอยากได้อะไร แล้วมันจะอ่านโปรเจกต์ เขียน code แก้บั๊ก และรันคำสั่งให้

ใช้ได้ 2 ทาง และเป็นตัวเดียวกัน ต่างแค่หน้าตา:

Desktop appCLI (terminal)
หน้าตาUI มีปุ่มกด เห็น diff เป็นสีพิมพ์คำสั่งใน terminal
ต้องมี Node.js ก่อนไหมไม่ต้องไม่ต้อง (ตัวติดตั้งเป็น binary)
เหมาะกับผู้เริ่มต้น เห็นภาพว่า AI แก้อะไรบ้างคนที่ชินกับ terminal แล้ว

ทั้งสองใช้ engine เดียวกัน อ่าน config ชุดเดียวกัน (CLAUDE.md, MCP, skills) และเปิดพร้อมกันบนโปรเจกต์เดียวกันได้

คอร์สนี้จะสอนผ่าน desktop app เป็นหลัก เพราะเห็นชัดกว่าว่า AI กำลังจะแก้ไฟล์ไหน บรรทัดไหน แล้วเรากด Accept / Reject ได้ทีละจุด ส่วน CLI จะแนะนำไว้ให้ด้วย เพราะบางงาน (เช่น รันใน server) ใช้ CLI สะดวกกว่า

⚠️ Claude Code ต้องใช้แผนแบบเสียเงิน — Pro, Max, Team หรือ Enterprise อย่างใดอย่างหนึ่ง แผนฟรีของ claude.ai ใช้ Claude Code ไม่ได้ ถ้ากดแท็บ Code แล้วมันเด้งให้ upgrade แปลว่าบัญชียังเป็นแผนฟรีอยู่ ดูราคาที่ claude.com/pricing

3.1 ทางหลัก — Desktop app

  1. โหลดตัวติดตั้งที่ claude.com/download แล้วรัน
  2. เปิดโปรแกรม — macOS อยู่ใน Applications, Windows อยู่ใน Start menu
  3. Sign in ด้วยบัญชี Claude
  4. กดแท็บ Code ด้านบนกลางจอ

โปรแกรมมี 3 แท็บ: Chat (คุยเฉยๆ ไม่เห็นไฟล์), Cowork (ปล่อยให้ทำงานเบื้องหลังบน cloud), และ Code (ตัวที่เราจะใช้ — แก้ไฟล์บนเครื่องเราจริง)

💡 Windows ต้องติดตั้ง Git ก่อน ไม่งั้น local session จะไม่ทำงาน โหลดที่ git-scm.com/downloads/win — ส่วน Mac มี Git มาให้อยู่แล้ว ไม่ต้องทำอะไร

3.2 ทางเลือก — CLI

ถ้าอยากเรียก claude จาก terminal ได้ด้วย ติดตั้งเพิ่มแยกต่างหาก:

# macOS / Linux
curl -fsSL https://claude.ai/install.sh | bash

# Windows PowerShell
irm https://claude.ai/install.ps1 | iex

ตรวจว่าใช้ได้:

claude --version   # ขึ้นเลขเวอร์ชัน = ผ่าน
claude doctor      # ตรวจ config ละเอียดกว่า ถ้ามีปัญหาจะบอกวิธีแก้

4. ทดสอบสั่งงาน AI ครั้งแรก

สร้างโฟลเดอร์เปล่าชื่อ hello-ai ไว้ที่ไหนก็ได้ที่หาเจอ (ใช้ Finder / File Explorer สร้างได้เลย ไม่ต้องพิมพ์คำสั่ง)

จากนั้นในแท็บ Code:

  1. เลือก environment เป็น Local — คือให้ Claude ทำงานกับไฟล์บนเครื่องเราตรงๆ
  2. กด Select folder แล้วเลือกโฟลเดอร์ hello-ai
  3. เลือกโมเดลจาก dropdown ข้างปุ่มส่ง
  4. พิมพ์สิ่งที่อยากได้ลงช่อง prompt:
สร้างไฟล์ hello.js ที่ print ตารางสูตรคูณแม่ 2 ถึง 12 แบบจัด format สวยๆ แล้วรันให้ดูหน่อย

ค่าเริ่มต้นคือ Manual mode — Claude จะยังไม่แตะไฟล์จนกว่าเราจะอนุมัติ มันจะเสนอ diff ขึ้นมาให้ดูก่อนว่าจะเขียนอะไรลงไฟล์ไหนบ้าง แล้วมีปุ่ม Accept / Reject ให้กด

กด Accept แล้วปล่อยให้มันรันไฟล์ — ถ้าเห็นตารางสูตรคูณโผล่มา แปลว่าทุกอย่างพร้อมแล้ว 🎉

💡 ถ้าอยากได้ terminal ไว้รันคำสั่งเองข้างๆ session ก็เปิด terminal pane ในตัว desktop app ได้ (ทางลัด Ctrl+` — ถ้ากดไม่ติดเพราะแป้นภาษาไทย ให้สลับเป็นภาษาอังกฤษก่อน เหมือนที่เจอในหัวข้อ 2)

สังเกตอะไรจากรอบนี้: เราไม่ได้บอกวิธีเขียนเลยสักบรรทัด บอกแค่ ผลลัพธ์ที่อยากได้ — นี่คือหัวใจของการทำงานกับ AI ที่เราจะฝึกกันจริงจังในบทถัดไป

และสังเกตอีกอย่าง: เรา ดู diff ก่อนกด Accept ไม่ใช่ปล่อยให้ AI เขียนอะไรก็ได้ นิสัยนี้สำคัญมาก และเป็นเหตุผลที่คอร์สนี้เริ่มจาก UI ไม่ใช่ terminal

เช็กลิสต์ก่อนไปต่อ

  • node -v ขึ้น v22 ขึ้นไป
  • เปิด VS Code หรือ Cursor และใช้ terminal ในตัวได้
  • บัญชี Claude เป็นแผน Pro ขึ้นไป (ไม่ใช่แผนฟรี)
  • เปิด Claude desktop app แท็บ Code แล้วเลือกโฟลเดอร์ได้
  • สั่ง AI สร้างไฟล์แรก แล้วกด Accept diff ได้สำเร็จ

แก้ปัญหาที่เจอบ่อย

กดแท็บ Code แล้วเด้งให้ upgrade — บัญชียังเป็นแผนฟรี ต้องอัปเป็น Pro ขึ้นไปก่อน ถ้ามันเด้งให้ sign in ทั้งที่ login แล้ว ให้ทำตามหน้าจอแล้วปิด-เปิดโปรแกรมใหม่

Windows: เลือกโฟลเดอร์แล้ว local session ไม่ทำงาน — ยังไม่ได้ติดตั้ง Git ติดตั้งจาก git-scm.com/downloads/win แล้วเปิดโปรแกรมใหม่

command not found: node หลังติดตั้ง — ปิด terminal แล้วเปิดใหม่ ถ้ายังไม่หาย (macOS/Linux) รัน source ~/.zshrc หรือติดตั้ง nvm ใหม่อีกรอบ

Windows: รัน script ไม่ได้ (execution policy) — เปิด PowerShell แบบ Run as Administrator แล้วรัน Set-ExecutionPolicy RemoteSigned เลือก Y

ติดปัญหาอื่น: copy ข้อความ error ทั้งก้อนไปถาม Claude ได้เลย — ฝึกนิสัยนี้ไว้ตั้งแต่วันแรก แล้วเจอกันบทถัดไป: หลักการสั่งงาน AI ให้ได้ code ระดับ production