การใช้งานผ่าน Cursor IDE

สำหรับผู้ที่ต้องการพัฒนาบนเครื่องของตัวเอง การใช้ Cursor IDE เป็นตัวเลือกที่แนะนำ เพราะมี AI ในตัวที่ช่วยเขียนโค้ดได้อย่างมีประสิทธิภาพ

Cursor IDE คืออะไร?

Cursor เป็น code editor ที่พัฒนาต่อยอดจาก VS Code โดยมี AI ในตัวที่ช่วย:

เขียนโค้ดอัตโนมัติ
อธิบายโค้ด
แก้ไข bug
ตอบคำถามเกี่ยวกับโปรเจค

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

รายการ	รายละเอียด
Node.js 20.19+	ดาวน์โหลดได้ที่ nodejs.org
Git	ดาวน์โหลดได้ที่ git-scm.com
Git SSH Key	สำหรับ clone private repository
Supabase Account	สำหรับ database (ต่างจาก Codespaces ที่มี database ในตัว)
Google OAuth credentials	สำหรับระบบ Login
Google Cloud Storage	(Optional) สำหรับระบบอัพโหลดไฟล์

⚠️ ข้อแตกต่างจาก Codespaces: เมื่อทำงานแบบ local คุณ ต้องตั้งค่า Supabase เป็น database เพราะไม่มี Docker container เหมือน Codespaces

ดูวิธีตั้งค่า Third-Party Services:

Google Cloud OAuth

Supabase

Google Cloud Storage

ขั้นตอนที่ 1: ติดตั้ง Cursor IDE

เข้าไปที่ cursor.com แล้วดาวน์โหลด Cursor สำหรับระบบปฏิบัติการของคุณ (macOS, Windows, หรือ Linux)

ขั้นตอนที่ 2: ตั้งค่า Git SSH

ก่อน clone repository คุณต้องตั้งค่า SSH key สำหรับ GitHub ก่อน (ถ้ายังไม่เคยทำ)

📚 อ่านคู่มือจาก GitHub:

ขั้นตอนที่ 3: Clone Repository

ไปที่หน้า GitHub repository แล้วคลิกปุ่ม Code (1) > เลือก tab Local (2) > เลือก tab SSH (3) > คลิก Copy URL (4)

เปิด Terminal แล้วรันคำสั่ง:

git clone git@github.com:your-username/your-repo.git
cd your-repo

จากนั้นเปิดโฟลเดอร์โปรเจคใน Cursor:

File > Open Folder แล้วเลือกโฟลเดอร์ที่ clone มา

ขั้นตอนที่ 4: เปิด Terminal ใน Cursor

ไปที่เมนู Terminal > New Terminal เพื่อเปิด terminal ภายใน Cursor

ขั้นตอนที่ 5: ติดตั้ง Dependencies

รันคำสั่งต่อไปนี้ใน terminal:

npm install

เมื่อเสร็จสิ้น คุณจะเห็น:

โฟลเดอร์ node_modules ปรากฏใน file explorer
ข้อความ “added X packages” ใน terminal

ขั้นตอนที่ 6: รัน Setup Wizard

รันคำสั่ง:

npm run setup

Setup Wizard จะถามข้อมูลที่จำเป็น เริ่มจาก Google OAuth credentials, Database URL ฯลฯ

💡 ไม่แน่ใจว่าแต่ละค่าคืออะไร? ดู Appendix A: คำอธิบาย Environment Variables

ขั้นตอนที่ 7: Initialize Database

หลังจาก setup เสร็จสิ้น (มีไฟล์ .env แล้ว) ให้รัน:

npx prisma generate
npx prisma db push && npx prisma db seed

คำสั่งเหล่านี้จะ:

prisma generate — สร้าง Prisma Client สำหรับเชื่อมต่อ database
prisma db push — สร้างตารางในฐานข้อมูลตาม schema
prisma db seed — ใส่ข้อมูลเริ่มต้น (roles, permissions)

ขั้นตอนที่ 8: เปิด Development Server

รันคำสั่ง:

npm run dev

จากนั้นเปิด browser ไปที่ http://localhost:3000 เพื่อดู application

สรุป

ขั้นตอน	คำสั่ง/การกระทำ
1. ติดตั้ง Cursor	ดาวน์โหลดจาก cursor.com
2. ตั้งค่า Git SSH	ตาม GitHub Docs
3. Clone repo	`git clone git@github.com:...`
4. ติดตั้ง dependencies	`npm install`
5. Setup environment	`npm run setup` (ต้องมี credentials พร้อม)
6. Initialize database	`npx prisma generate && npx prisma db push && npx prisma db seed`
7. เปิด dev server	`npm run dev`