สร้าง Full-Stack CRUD แบบ Data-Driven จากฐานข้อมูล ด้วย AI

บทนำ#

ลองนึกภาพว่าอยากสร้าง ร้านค้าออนไลน์ ที่ลูกค้าเข้ามาดูสินค้าและสั่งซื้อได้ ส่วนเจ้าของร้าน สามารถเพิ่ม/แก้ไข/ลบสินค้าได้ — นี่คือสิ่งที่จะสร้างในบทความนี้ โดยใช้ AI เป็นผู้ช่วยเขียนโค้ดให้

ไม่ต้องกังวล ถ้ายังไม่เคยเขียนโค้ดมาก่อน — จะให้ AI เขียนให้ และอธิบายทุกขั้นตอนเป็นภาษาง่ายๆ

เราจะสร้างอะไร?#

เว็บแอปพลิเคชัน (Web App) ที่ “สมบูรณ์” ทั้งส่วนที่ผู้ใช้เห็นและส่วนเบื้องหลัง โครงสร้างแบบนี้เรียกว่า Full-Stack:

ฟังก์ชันที่จะทำ: CRUD#

CRUD คือการจัดการข้อมูล 4 อย่างพื้นฐานที่มีในแทบทุกระบบ:

แนวคิดหลัก: Data-Driven (เริ่มจากข้อมูลก่อน)#

วิธี Data-Driven คือ “ออกแบบฐานข้อมูลให้เรียบร้อยก่อน แล้วค่อยสร้างเว็บตามโครงสร้างข้อมูลนั้น” — เมื่อรู้ชัดว่าจะเก็บข้อมูลอะไรบ้าง การสร้างหน้าเว็บและ API จะตรงประเด็นและเร็วขึ้นมาก และด้วย AI เช่น ChatGPT หรือ Claude สามารถให้ AI ออกแบบฐานข้อมูลและเขียนโค้ดให้ได้ในเวลาไม่นาน

ขั้นตอนทั้งหมด#

1. ออกแบบฐานข้อมูลด้วย AI — บอก AI ว่าจะเก็บข้อมูลอะไรบ้าง แล้ว AI จะเขียนคำสั่งสร้างฐานข้อมูลให้
2. สร้างฐานข้อมูลด้วย CAMPP — เอาคำสั่งนั้นไปรันบนเครื่องเราเพื่อสร้างฐานข้อมูลจริง
3. Generate Web App ด้วย Next.js + AI — ให้ AI เขียนโค้ดเว็บทั้ง Frontend และ API ให้พร้อมใช้

ตัวอย่างระบบ: ร้านค้าออนไลน์ (E-Commerce) ง่ายๆ ที่มี:

• Products (สินค้า)
• Customers (ลูกค้า)
• Orders (คำสั่งซื้อ)

ก่อนเริ่มต้น: ติดตั้ง CAMPP และเปิด phpMyAdmin#

ในการสร้างเว็บแอป ต้องมีโปรแกรมบนเครื่องที่ทำหน้าที่เป็น “เซิร์ฟเวอร์” (คอมพิวเตอร์ที่ให้บริการเว็บและเก็บฐานข้อมูล) ปกติต้องติดตั้งหลายโปรแกรมแยกกัน แต่ CAMPP รวมทุกอย่างไว้ในแพ็กเกจเดียว ติดตั้งง่ายและฟรี — เหมือน “ชุดเริ่มต้นพร้อมใช้” ที่มีทั้งเว็บเซิร์ฟเวอร์ ฐานข้อมูล (MySQL/MariaDB) และเครื่องมือจัดการฐานข้อมูล (phpMyAdmin)

ดาวน์โหลดและติดตั้ง CAMPP ได้จาก https://campp.melivecode.com/ ↗

เมื่อติดตั้งแล้ว เปิด CAMPP แล้วกด Start เพื่อเริ่มบริการต่าง ๆ

จากนั้นเปิด phpMyAdmin โดยคลิกปุ่ม phpMyAdmin บนหน้าเว็บของ CAMPP หรือเข้าใช้งานโดยตรงผ่าน http://127.0.0.1:8080/phpmyadmin/ ↗ เพื่อจัดการฐานข้อมูลผ่านส่วนติดต่อผู้ใช้แบบกราฟิก (GUI)

ก่อนเริ่มต้น: ติดตั้ง Node.js และ VS Code#

ก่อนสร้างเว็บแอปในหัวข้อ 3 ต้องติดตั้งอีก 2 โปรแกรมบนเครื่อง

ติดตั้ง Node.js#

Node.js คือโปรแกรมที่ทำให้เครื่องสามารถ “รัน” (เปิดใช้งาน) เว็บแอปที่เขียนด้วย JavaScript ได้ เหมือนที่ต้องติดตั้ง Java ก่อนถึงจะเปิดไฟล์บางประเภทได้

ดาวน์โหลดและติดตั้ง Node.js LTS ได้จาก https://nodejs.org/ ↗

แนะนำให้เลือกเวอร์ชัน LTS (Long Term Support) เพื่อความเสถียร

หลังติดตั้งเสร็จ ตรวจสอบเวอร์ชันใน Terminal หรือ Command Prompt:

node --version
npm --version

npm และ npx คืออะไร? npm เปรียบเสมือน “App Store” สำหรับดาวน์โหลดชุดโค้ดสำเร็จ (เรียกว่า package) ที่คนอื่นเขียนไว้แล้วให้ใช้ จะได้ไม่ต้องเขียนทุกอย่างขึ้นมาเองใหม่ ส่วน npx คือคำสั่งสำหรับรันโปรแกรมที่อยู่บน npm โดยตรง

ติดตั้ง VS Code#

VS Code (Visual Studio Code) คือโปรแกรมสำหรับเขียนและแก้ไขโค้ด (Text Editor) — เปรียบเสมือน Microsoft Word แต่สร้างมาสำหรับเขียนโค้ดแทนการพิมพ์เอกสาร

ดาวน์โหลดและติดตั้งได้จาก https://code.visualstudio.com/ ↗

แนะนำให้ติดตั้ง extension ESLint และ Prettier เพิ่มเติม เพื่อช่วยตรวจและจัดรูปแบบโค้ดให้อัตโนมัติ

1. ออกแบบฐานข้อมูลด้วย AI#

เคล็ดลับ: Prompt ที่ดีต้องระบุข้อมูลที่ต้องเก็บชัดเจน#

เวลาขอให้ AI ช่วยออกแบบฐานข้อมูล สิ่งสำคัญที่สุด คือการระบุว่าต้องการเก็บข้อมูลอะไรบ้าง ยกตัวอย่างเช่น:

❌ Prompt ไม่ดี:

ออกแบบฐานข้อมูลสำหรับระบบ E-Commerce ให้หน่อย

→ อาจได้โครงสร้างที่ไม่ตรงตามต้องการ เพราะ AI ไม่รู้ว่าต้องการฟิลด์ไหนบ้าง

✅ Prompt ดี:

ออกแบบฐานข้อมูลสำหรับระบบ E-Commerce ที่เก็บ:
- สินค้า: ชื่อ, ราคา, จำนวนสต็อก, รายละเอียด
- ลูกค้า: ชื่อ, อีเมล, เบอร์โทร, ที่อยู่
- คำสั่งซื้อ: ลูกค้าที่สั่ง, ยอดรวม, สถานะ, รายการสินค้าที่สั่ง

→ ได้โครงสร้างที่ตรงความต้องการ เพราะระบุฟิลด์ที่ต้องการชัดเจน

Step 1: ใช้ AI Generate SQL + Seed Data ในครั้งเดียว#

เปิด ChatGPT ↗ หรือ Claude ↗ และใช้ prompt นี้:

ช่วยออกแบบและเขียน SQL สำหรับฐานข้อมูลระบบ E-Commerce ที่มี:

**ข้อมูลที่ต้องเก็บ:**
1. Products (สินค้า) - ชื่อสินค้า, ราคา, จำนวนสต็อก, รายละเอียด
2. Customers (ลูกค้า) - ชื่อ, อีเมล, เบอร์โทร, ที่อยู่
3. Orders (คำสั่งซื้อ) - ลูกค้าที่สั่ง, ยอดรวม, สถานะ, วันที่สั่ง
4. Order Items (รายการในคำสั่งซื้อ) - ออเดอร์, สินค้า, จำนวน, ราคาตอนสั่ง

**ความสัมพันธ์:**
- หนึ่งลูกค้าสั่งซื้อได้หลายคำสั่งซื้อ (1:N)
- หนึ่งคำสั่งซื้อมีหลายรายการสินค้า (1:N)
- สินค้าอยู่ในหลายคำสั่งซื้อ (M:N ผ่าน order_items)

**ที่ต้องการ:**
1. เขียน SQL สร้างฐานข้อมูลชื่อ ecommerce_db
2. สร้างตารางทั้งหมด (products, customers, orders, order_items)
3. กำหนด Primary Key และ Foreign Key ให้ถูกต้อง
4. เพิ่มข้อมูลตัวอย่าง (seed data) 5-10 records ในแต่ละตาราง

รวมทั้งหมดเป็นไฟล์ SQL ที่รันใน MySQL/MariaDB ได้เลย พร้อม comment อธิบายแต่ละส่วน

AI จะ generate SQL ที่สมบูรณ์พร้อมใช้งานทันที:

-- สร้างฐานข้อมูล
CREATE DATABASE IF NOT EXISTS ecommerce_db;
USE ecommerce_db;

-- ตารางสินค้า
CREATE TABLE products (
  id INT AUTO_INCREMENT PRIMARY KEY,
  name VARCHAR(255) NOT NULL,
  price DECIMAL(10,2) NOT NULL,
  stock INT DEFAULT 0,
  description TEXT,
  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

-- ตารางลูกค้า
CREATE TABLE customers (
  id INT AUTO_INCREMENT PRIMARY KEY,
  name VARCHAR(255) NOT NULL,
  email VARCHAR(255) UNIQUE,
  phone VARCHAR(50),
  address TEXT,
  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

-- ตารางคำสั่งซื้อ
CREATE TABLE orders (
  id INT AUTO_INCREMENT PRIMARY KEY,
  customer_id INT,
  total DECIMAL(10,2) NOT NULL,
  status VARCHAR(50) DEFAULT 'pending',
  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
  FOREIGN KEY (customer_id) REFERENCES customers(id)
);

-- ตารางรายการสินค้าในคำสั่งซื้อ
CREATE TABLE order_items (
  id INT AUTO_INCREMENT PRIMARY KEY,
  order_id INT,
  product_id INT,
  quantity INT NOT NULL,
  price DECIMAL(10,2) NOT NULL,
  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
  FOREIGN KEY (order_id) REFERENCES orders(id),
  FOREIGN KEY (product_id) REFERENCES products(id)
);

-- เพิ่มข้อมูลตัวอย่าง
INSERT INTO products (name, price, stock, description) VALUES
('Laptop', 25000.00, 10, 'High-performance laptop'),
('Mouse', 350.00, 50, 'Wireless mouse'),
('Keyboard', 800.00, 30, 'Mechanical keyboard'),
('Monitor', 4500.00, 15, '24-inch LED monitor');

INSERT INTO customers (name, email, phone, address) VALUES
('สมชาย ใจดี', 'somchai@example.com', '0812345678', '123 กรุงเทพฯ'),
('วิภา สุขใจ', 'wipa@example.com', '0823456789', '456 เชียงใหม่');

INSERT INTO orders (customer_id, total, status) VALUES
(1, 25350.00, 'completed'),
(2, 800.00, 'pending');

INSERT INTO order_items (order_id, product_id, quantity, price) VALUES
(1, 1, 1, 25000.00),
(1, 2, 1, 350.00),
(2, 3, 1, 800.00);

สังเกต: Prompt เดียวจบ — ออกแบบ + SQL + Seed Data พร้อมรันใน phpMyAdmin ทันที

2. สร้างฐานข้อมูลด้วย CAMPP#

Step 1: สร้างฐานข้อมูล#

1. เปิด phpMyAdmin ที่ http://127.0.0.1:8080/phpmyadmin/ ↗
2. คลิกแท็บ SQL ด้านบน
3. วาง SQL ที่ได้จาก AI แล้วคลิก Go

หรือจะสร้างฐานข้อมูลแยกก่อนก็ได้:

CREATE DATABASE ecommerce_db;
USE ecommerce_db;

Step 2: รัน SQL สร้างตาราง#

วาง SQL ทั้งหมดที่ AI generate ให้ในแท็บ SQL แล้วคลิก Go

phpMyAdmin จะแสดงตารางทั้งหมดที่แผงด้านซ้าย:

• customers
• products
• orders
• order_items

Step 3: ตรวจสอบความสัมพันธ์#

1. เลือกฐานข้อมูล ecommerce_db
2. คลิกแท็บ Designer ด้านบน
3. phpMyAdmin จะแสดง ER Diagram อัตโนมัติจากตารางและ Foreign Key

ถ้าต้องการดูข้อมูลในตาราง ให้คลิกชื่อตารางแล้วคลิกแท็บ Browse

3. Generate Full-Stack Web App ด้วย Next.js + AI#

เมื่อฐานข้อมูลพร้อมแล้ว มาสร้าง Full-Stack Web App ด้วย Next.js App Router ซึ่งรองรับทั้ง Frontend และ API Routes ในโปรเจกต์เดียว

Step 1: สร้าง Next.js Project#

เปิด Command Prompt หรือ Terminal (บน Windows ค้นหา “cmd” หรือกดเปิด PowerShell) จากนั้นรันคำสั่ง:

npx create-next-app@latest ecommerce-mysql-app

เมื่อถูกถาม Would you like to use the recommended Next.js defaults? ให้เลือก:

• Yes, use recommended defaults

จะได้: TypeScript, ESLint, Tailwind CSS, App Router (ไม่มี src/ directory)

cd ecommerce-mysql-app
npm install mysql2
npm install --save-dev @types/node

สร้างไฟล์ .env.local:

DB_HOST=localhost
DB_PORT=3307
DB_USERNAME=root
DB_PASSWORD=
DB_DATABASE=ecommerce_db

หมายเหตุ: CAMPP ใช้ port 3307 สำหรับ MySQL

Step 2: AI Prompt สำหรับ Full-Stack Next.js#

เปิด ChatGPT หรือ Claude และใช้ prompt นี้:

สร้าง Full-Stack E-Commerce CRUD App ด้วย Next.js App Router + TypeScript

นี่คือโครงสร้างฐานข้อมูล (SQL):

[PASTE SQL โครงสร้างข้อมูลตรงนี้]

**โครงสร้างโปรเจกต์ (TypeScript):**
ecommerce-mysql-app/
├── .env.local
├── lib/
│   └── db.ts (เชื่อมต่อ MySQL ด้วย mysql2)
├── app/
│   ├── layout.tsx
│   ├── page.tsx (Home/Dashboard)
│   ├── customers/
│   │   └── page.tsx (CRUD ลูกค้า)
│   ├── products/
│   │   └── page.tsx (CRUD สินค้า)
│   ├── orders/
│   │   └── page.tsx (CRUD คำสั่งซื้อ)
│   └── api/
│       ├── customers/
│       │   ├── route.ts (GET all, POST)
│       │   └── [id]/
│       │       └── route.ts (GET one, PUT, DELETE)
│       ├── products/
│       │   ├── route.ts (GET all, POST)
│       │   └── [id]/
│       │       └── route.ts (GET one, PUT, DELETE)
│       └── orders/
│           ├── route.ts (GET พร้อม JOIN customer, POST transaction)
│           └── [id]/
│               └── route.ts (GET one พร้อม order_items)

**API Endpoints:** RESTful CRUD สำหรับ `/api/customers`, `/api/products`, `/api/orders` (แต่ละอย่างมี `[id]` สำหรับ GET / PUT / DELETE) — orders ต้อง JOIN customer และทำ transaction ลด stock ตอนสร้าง

**Frontend Pages (Server Components):**
- ใช้ async/await ดึงข้อมูลโดยตรงใน Server Components
- Form เพิ่ม/แก้ไขใช้ Client Components หรือ Server Actions
- Tailwind CSS สำหรับ styling
- Loading และ Error states

**Requirements:**
- lib/db.ts เชื่อมต่อ MySQL ด้วย mysql2 pool
- TypeScript interfaces สำหรับ types
- Parameterized queries ทุกคำสั่ง (security)
- Transaction สำหรับสร้าง order (ตรวจ stock → ลด stock → rollback ถ้า error)
- JSON responses สำหรับ API
- Error handling ครบถ้วน

Generate โค้ดทุกไฟล์ให้ครบ พร้อม npm install เพิ่มเติม (ถ้ามี)

Step 3: Copy โค้ดที่ AI Generate#

เปิด VS Code แล้วเปิดโฟลเดอร์โปรเจกต์ (File → Open Folder เลือก ecommerce-mysql-app) จากนั้นสร้างไฟล์ตามโครงสร้างด้านล่าง แล้ว copy โค้ดที่ AI generate ใส่ลงในแต่ละไฟล์:

ecommerce-mysql-app/
├── lib/
│   └── db.ts
├── app/
│   ├── layout.tsx
│   ├── page.tsx
│   ├── customers/
│   │   └── page.tsx
│   ├── products/
│   │   └── page.tsx
│   ├── orders/
│   │   └── page.tsx
│   └── api/
│       ├── customers/
│       │   ├── route.ts
│       │   └── [id]/route.ts
│       ├── products/
│       │   ├── route.ts
│       │   └── [id]/route.ts
│       └── orders/
│           ├── route.ts
│           └── [id]/route.ts

Step 4: ทดสอบในเครื่อง#

npm run dev

เปิด http://localhost:3000 ↗ ใน browser

ทดสอบการทำงาน:

1. เปิดหน้า Home และนำทางไปหน้าต่างๆ
2. หน้า Customers: เพิ่ม/แก้ไข/ลบ ลูกค้า
3. หน้า Products: เพิ่ม/แก้ไข/ลบ สินค้า
4. หน้า Orders: สร้างคำสั่งซื้อ (ตรวจสอบว่า stock ลดลงจริง)

ถ้าทำงานได้ทั้งหมด แปลว่าสร้าง Full-Stack CRUD App สำเร็จแล้ว!

4. Debug ใน VS Code ด้วย AI#

ตอนรันโปรเจกต์แล้วเจอ error หรือโค้ดไม่ทำงานตามที่หวัง สามารถใช้ AI ช่วยแก้ไขได้ง่ายๆ ด้วยเทคนิคต่อไปนี้:

1. Copy error message#

เมื่อ Terminal หรือ browser แสดง error ให้ copy ข้อความ error ทั้งหมด

2. Copy Relative Path เพื่อระบุไฟล์#

ใน VS Code ให้คลิกขวาที่ไฟล์ที่มีปัญหาในแผง Explorer (ด้านซ้าย) เลือก Copy Relative Path (เช่น app/api/orders/route.ts)

นำข้อมูลทั้งสองอย่าง (ชื่อไฟล์ + error) ไปวางใน ChatGPT หรือ Claude เพื่อให้ AI ระบุและแก้ปัญหาได้แม่นยำขึ้น

ตัวอย่าง Prompt:

ไฟล์ app/api/orders/route.ts เจอ error:
[วาง error ตรงนี้]
ช่วยแก้ให้หน่อย

5. สรุป#

วิธีการพัฒนาแบบ Data-Driven เริ่มจากฐานข้อมูลช่วยให้:

ขั้นตอนต่อไป:

• เพิ่ม Authentication ด้วย JWT
• ทำ Pagination สำหรับข้อมูลจำนวนมาก
• เพิ่ม Search และ Filter
• ทำ Validation ที่เข้มงวดขึ้น
• Deploy ขึ้น Production

Tips สำหรับ AI Prompts:

1. ระบุ tech stack อย่างชัดเจน
2. ให้โครงสร้างโปรเจกต์อย่างละเอียด
3. ระบุ security requirements
4. ขอ error handling ที่ครบถ้วน
5. ขอตัวอย่าง response/request

Happy building!