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

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

NVX Stack Builder คืออะไร#

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

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

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

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

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/components/builder.tsx
• ภาพหน้าจอเวอร์ชันล่าสุด: screenshots/v0.5/ และหน้าเอกสาร screenshots/v0.6/