# เริ่มต้นใช้งาน · Getting started

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

## NVX Stack Builder คืออะไร

ตอนเริ่มโปรเจกต์ใหม่ พวกเราเองก็เคยต้องค้นคำสั่งจากหลายแหล่ง ทั้งติดตั้ง Node ผ่าน nvm, สร้างแอปด้วย `create-next-app`, ติดตั้ง dependency, เพิ่ม ESLint/Vitest/Docker แล้วยังต้องจำว่าคำสั่งไหนต้องรันก่อนหลัง และบน Windows ต้องเขียนต่างกันอย่างไร **NVX Stack Builder** ซึ่งเป็นผลิตภัณฑ์แรกของ DevStack ([devstack.bid](https://devstack.bid)) รวบรวมสิ่งเหล่านี้เป็น **Stack Template** คือชุดขั้นตอนที่เรียงลำดับแล้วและตัดคำสั่งซ้ำแล้ว แต่ละขั้นมีคำอธิบายไทย/อังกฤษ คำสั่งแบบ POSIX และ PowerShell หมายเหตุตามระบบปฏิบัติการ ผลลัพธ์ที่คาดหวัง และคำสั่งตรวจสอบ (verify)

หลักที่เรายึดไว้คือ **แอปไม่รันคำสั่งแทนคุณ** ทุกอย่างเป็นข้อความที่คุณอ่าน ตรวจ แล้วรันเองบนเครื่อง เพราะคำสั่งตั้งค่าโปรเจกต์แตะไฟล์ระบบและติดตั้งซอฟต์แวร์ เราเชื่อว่าการให้คนตรวจก่อนเสมอทั้งปลอดภัยกว่าและโปร่งใสกว่า (อ่านเหตุผลเต็มได้ที่ [Safety model](../concepts/safety-model.md))

## สามเส้นทางเริ่มต้น

1. **เลือกเทมเพลตเอง** ไปที่หน้า `/templates` ค้นด้วยคำ เช่น `python`, `game`, `react` หรือกรองตามหมวด แล้วเปิดดูขั้นตอน เหมาะเมื่อคุณรู้อยู่แล้วว่าอยากได้ stack แบบไหน ดู [templates.md](./templates.md)
2. **ให้ AI agent วางแผน** ไปที่ `/builder` แท็บ "Ask the AI agent" แล้วเล่าว่าอยากสร้างแอปอะไร จะพิมพ์ไทยหรืออังกฤษก็ได้ เช่น "แดชบอร์ดยอดขายพร้อม CI และเทสต์" agent จะเลือกเทมเพลตที่ใกล้ที่สุด เลือก add-on และอาจเพิ่มขั้นตอนพิเศษ ถึงเซิร์ฟเวอร์จะไม่มี API key ก็ยังใช้ได้ผ่าน offline planner ดู [ai-agent.md](./ai-agent.md)
3. **เปิดลิงก์ที่เพื่อนแชร์มา** ลิงก์รูปแบบ `/builder#s=...` จะพาไปยังขั้น Review พร้อมสแต็กเดิมทุกประการ ดู [sharing.md](./sharing.md)

## ลองครั้งแรกกับเรา

1. เปิดหน้าแรก กด **Ask the AI agent** หรือ **Browse templates**
2. ในตัวสร้าง (builder) ขั้น **Start** เลือก "Pick a template" แล้วเลือก *Next.js Analytics Dashboard*
3. ขั้น **Configure** ตั้งชื่อโปรเจกต์ เลือกเวอร์ชัน Node (LTS/24/22/20) ตัวจัดการแพ็กเกจ (npm/pnpm/yarn) และ add-on เช่น Testing หรือ Docker ลองสังเกตแถบสรุปสแต็ก (current stack) ด้านบนที่เปลี่ยนตามทันที
4. ขั้น **Review & reorder** อ่านแต่ละขั้น ลากเพื่อสลับลำดับ ลบขั้นที่ไม่ต้องการ หรือเพิ่มขั้นตอนของคุณเอง
5. ขั้น **Export** คัดลอกคำสั่งทั้งหมด หรือดาวน์โหลด `setup.sh` (macOS/Linux/WSL) / `setup.ps1` (Windows) / starter `.zip`
6. เปิดสคริปต์ อ่านทุกบรรทัด แล้วรันในโฟลเดอร์ว่าง ขั้นที่เป็น dev server หรือ publish เราตั้งใจคอมเมนต์ไว้ ให้คุณรันเองในเทอร์มินัลแยก

```bash
mkdir -p ~/projects && cd ~/projects
less setup.sh
bash setup.sh
```

## สิ่งที่ควรมีบนเครื่อง

- **Node.js** ผ่าน nvm (macOS/Linux) หรือ nvm-windows สำหรับเทมเพลตฝั่ง JavaScript ขั้นติดตั้ง nvm เป็นขั้น `requires: nvm` ถ้าสคริปต์หา nvm ไม่เจอจะข้ามพร้อมคำเตือน
- **Python 3.11–3.13** หรือ **uv** สำหรับเทมเพลตฝั่ง Python
- Git และเทอร์มินัล (bash/zsh หรือ PowerShell)

## เคล็ดลับจากทีมเรา

- เริ่มจากค่าเริ่มต้นของเทมเพลตก่อน แล้วค่อยเพิ่ม add-on ทีละตัว จะได้เห็นว่าแต่ละตัวเพิ่มขั้นตอนอะไร
- อ่าน "Expected result" และรัน "Verify" หลังแต่ละขั้น จะจับปัญหาได้เร็วกว่ารันรวดเดียวแล้วค่อยมาหาว่าพังตรงไหน
- เก็บลิงก์แชร์ไว้ในโน้ตของโปรเจกต์ เพื่อสร้างสแต็กเดิมซ้ำได้ภายหลัง
- เอกสารทุกหน้ามีปุ่ม **คัดลอก Markdown** และ URL แบบ `.md` ถ้าอยากเก็บคู่มือนี้ไว้ใน wiki ของทีมก็หยิบไปได้เลย

## อ้างอิง

- โค้ดหน้าแรก [`src/app/page.tsx`](../../src/app/page.tsx), ตัวสร้าง [`src/components/builder.tsx`](../../src/components/builder.tsx)
- ภาพหน้าจอเวอร์ชันล่าสุด: `screenshots/v0.5/` และหน้าเอกสาร `screenshots/v0.6/`