สร้าง Full-Stack Apps ด้วย AI: แบบฟรี!!

1. บทนำ#

การพัฒนา full-stack application ในอดีตใช้เวลาหลายสัปดาห์ แต่วันนี้ด้วย AI tools เช่น ChatGPT สามารถสร้างและ deploy application ที่สมบูรณ์ได้ภายในไม่กี่ชั่วโมง - ฟรี

Tutorial นี้จะสอนวิธี:

1. Generate REST API ที่สมบูรณ์ด้วย AI prompts
2. Set up database ฟรี (TiDB Serverless)
3. Deploy API ไปยัง Vercel (ฟรี)
4. Generate frontend โดยใช้ API spec
5. Deploy frontend ไปยัง Vercel (ฟรี)

ราคาทั้งหมด: $0

สิ่งที่เราจะสร้าง: E-Commerce API ที่มี:

• Customers (name, email)
• Products (name, price, stock)
• Orders (พร้อม transaction support)

2. สิ่งที่ต้องเตรียม#

ก่อนเริ่ม ให้สร้าง free accounts ดังนี้:

• GitHub ↗ - สำหรับเก็บโค้ด
• Vercel ↗ - สำหรับ deployment
• TiDB Cloud ↗ - สำหรับ database ฟรี
• ChatGPT ↗ - สำหรับ AI code generation

Tools ที่ต้องการ:

• Node.js ติดตั้งในเครื่อง
• Code editor (แนะนำ VS Code)
• Terminal/Command Prompt

3. Part 1: Generate Backend API ด้วย AI#

Step 1: สร้าง Project Folder#

เปิด terminal และรันคำสั่ง:

mkdir ecommerce-api
cd ecommerce-api
npm init -y

Step 2: AI Prompt สำหรับ Backend#

เปิด ChatGPT ↗ และใช้ prompt นี้:

Create a RESTful API for an e-commerce system using Express.js and mysql2 (no ORM).

Project structure:
ecommerce-api/
├── db.js
├── index.js
├── schema.sql
├── seed.sql
├── .env
└── routes/
    ├── customers.js
    ├── products.js
    └── orders.js

Database: TiDB
Database name: ecommerce

Tables:
- customers (id, name, email, created_at)
- products (id, name, price, stock, created_at)
- orders (id, customer_id, total, status, created_at)
- order_items (id, order_id, product_id, quantity, price)

Required endpoints for each resource (customers, products, orders):
- GET all - returns array
- GET by id - returns single item or 404
- POST - create new item
- DELETE by id - delete item

For POST /api/orders:
- Use database transactions
- Validate stock before creating order
- Decrease stock when order is placed
- Rollback on any error

Requirements:
- Default port: 3333 (for local development)
- Use parameterized queries (security)
- Return JSON only
- Proper HTTP status codes (200, 201, 404, 500)
- Enable CORS for all origins
- Include error handling
- Export app for Vercel deployment (serverless function)
- Start server only when not in production (NODE_ENV !== 'production')
- .env include DB_SSL

Generate complete code for each file in the exact structure above.

Also provide:
1. npm install command
2. .env file template with database variables
3. Testing commands using curl

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

ChatGPT จะ generate โค้ดไฟล์ทั้งหมด ให้สร้างไฟล์แต่ละไฟล์ใน project และ copy โค้ด:

ecommerce-api/
├── db.js
├── index.js
├── schema.sql
├── seed.sql
├── .env
├── package.json
└── routes/
    ├── customers.js
    ├── products.js
    └── orders.js

Step 4: Install Dependencies#

npm install express mysql2 cors dotenv

4. Part 2: Set Up Database ฟรี (TiDB)#

Step 1: สร้าง TiDB Serverless Cluster#

1. ไปที่ tidbcloud.com ↗ และสมัครสมาชิก
2. คลิก Create Cluster → TiDB Serverless
3. เลือก region ที่ใกล้ที่สุด
4. รอให้ cluster สร้างเสร็จ (1-2 นาที)

Step 2: สร้าง Database#

1. ใน TiDB Cloud คลิก SQL Editor หรือ Chat to TiDB
2. รัน: CREATE DATABASE ecommerce;

Step 3: รับ Connection Details#

1. คลิก Connect บน cluster
2. เลือก General connection
3. สร้าง password
4. Copy connection string

อัปเดตไฟล์ .env ด้วย TiDB credentials:

DB_HOST=your-tidb-host.gateway.prod.aws.tidbcloud.com
DB_PORT=4000
DB_USERNAME=xxx.root
DB_PASSWORD=your-password
DB_DATABASE=ecommerce
DB_SSL=true

Step 4: รัน Schema และ Seed#

1. ใน TiDB Cloud SQL Editor วางเนื้อหาจาก schema.sql
2. คลิก Run
3. จากนั้นวางและรัน seed.sql

5. Part 3: ทดสอบ API ในเครื่อง#

เริ่ม Server#

node --watch index.js

จะเห็น: Server running on port 3333

ทดสอบด้วย curl (หรือ Postman)#

# Get all customers
curl http://localhost:3333/api/customers

# Create a customer
curl -X POST http://localhost:3333/api/customers \
  -H "Content-Type: application/json" \
  -d '{"name":"John Doe","email":"john@example.com"}'

# Get all products
curl http://localhost:3333/api/products

# Create an order
curl -X POST http://localhost:3333/api/orders \
  -H "Content-Type: application/json" \
  -d '{"customer_id":1,"items":[{"product_id":1,"quantity":2}]}'

Generate Postman Collection (ตัวเลือก)#

สำหรับการทดสอบที่ง่ายขึ้น ให้ขอ ChatGPT generate Postman collection:

Generate a Postman collection JSON file for my e-commerce API.

Base URL: http://localhost:3333

Create a complete Postman collection export JSON that I can import.

1. Copy JSON ที่ generate ได้
2. Save เป็น ecommerce-api.postman_collection.json
3. เปิด Postman → Import → Upload ไฟล์
4. จะได้ API requests ทั้งหมดพร้อมทดสอบด้วยคลิกเดียว

6. Part 4: Deploy API ไปยัง Vercel#

สร้าง .gitignore#

node_modules
.env

Push ไป GitHub ด้วย VS Code#

Initialize git และ push ไป GitHub ด้วย VS Code:

1. เปิด project ใน VS Code
2. คลิกไอคอน Source Control (หรือกด Ctrl+Shift+G)
3. คลิก Initialize Repository
4. คลิกไอคอน + ข้าง “Changes” เพื่อ stage การเปลี่ยนแปลงทั้งหมด
5. ใส่ commit message: Initial commit - E-commerce API
6. คลิก Commit
7. คลิกปุ่ม Publish Branch
8. ทำตาม prompts เพื่อสร้าง GitHub repository ใหม่ (ทำเป็น Public)

โค้ดตอนนี้อยู่บน GitHub ที่: https://github.com/YOUR_USERNAME/ecommerce-api

Deploy บน Vercel#

1. ไปที่ vercel.com ↗
2. คลิก Add New → Project
3. Import GitHub repository
4. คลิก Environment Variables
5. เพิ่มตัวแปรทั้งหมดจากไฟล์ .env:
   • DB_HOST
   • DB_PORT
   • DB_USERNAME
   • DB_PASSWORD
   • DB_DATABASE
   • DB_SSL
6. คลิก Deploy

API ตอนนี้ live ที่: https://your-project.vercel.app

ทดสอบ: https://your-project.vercel.app/api/customers

7. Part 5: Generate API Reference#

ก่อน generate frontend ต้องมี API specification ที่สมบูรณ์ก่อน ให้ AI generate จากโค้ด!

Prompt สำหรับ API Reference#

เปิด ChatGPT และวาง prompt นี้พร้อมกับ route files:

Generate a complete API reference documentation for my e-commerce API.

Here are my route files:

=== File: index.js ===
[PASTE CONTENTS of index.js]

=== File: routes/customers.js ===
[PASTE CONTENTS of routes/customers.js]

=== File: routes/products.js ===
[PASTE CONTENTS of routes/products.js]

=== File: routes/orders.js ===
[PASTE CONTENTS of routes/orders.js]

Generate documentation in **markdown format** with:
- Base URL: [Vercel Based URL, for example: https://your-project.vercel.app]
- Each endpoint grouped by resource (CUSTOMERS, PRODUCTS, ORDERS)
- For each endpoint include:
  - HTTP method and path (e.g., GET /api/customers)
  - Description
  - Request body (if POST/PUT)
  - Response format with actual example data
  - HTTP status codes

Make it easy to copy-paste for frontend development.

บันทึก API Reference#

ChatGPT จะ output API reference ที่สะอาด บันทึกไว้ - จะต้องใช้ใน frontend prompt

ควรจะมีหน้าตาประมาณนี้ (endpoint จริงอาจต่างกัน):

Base URL: https://your-project.vercel.app

=== CUSTOMERS ===
GET /api/customers
Description: Get all customers
Response: [{"id":1,"name":"Karn Yong","email":"karn@example.com","created_at":"..."}]
...

8. Part 6: Generate Frontend ด้วย AI#

เมื่อ API ถูก deploy แล้ว มา generate Next.js frontend กันเถอะ

AI Prompt สำหรับ Frontend#

เปิด ChatGPT conversation ใหม่และใช้ prompt:

Create a Next.js 15 frontend for an e-commerce system using App Router.

Use these API endpoints:
[PASTE CONTENTS of API Reference]

Requirements:
- Use Tailwind CSS for styling (shadcn/ui components preferred)
- Create pages: Customers, Products, Orders, Create Order
- Display data in tables
- Simple forms to add data
- Show loading states and error messages
- Use fetch for API calls
- Keep it simple and clean

File structure:
- app/page.js - home/dashboard
- app/customers/page.js
- app/products/page.js
- app/orders/page.js
- app/layout.js - with navigation
- components/ - reusable components
- lib/api.js - API functions

Provide complete code for all files.

สร้าง Frontend Project#

npx create-next-app@15 ecommerce-frontend --tailwind --app

เมื่อถูกถาม ให้เลือก No สำหรับ TypeScript

cd ecommerce-frontend
npm install

Copy โค้ดที่ ChatGPT generate มาใส่ใน project

อัปเดต API URL#

อย่าลืมแทนที่ https://your-project.vercel.app ด้วย deployed API URL จริงใน lib/api.js

ทดสอบ Frontend ในเครื่อง#

ก่อน deploy ให้ทดสอบ frontend ในเครื่องก่อน:

npm run dev

1. เปิด http://localhost:3000 ↗ ใน browser
2. ทดสอบทุกหน้า: Customers, Products, Orders
3. ลองสร้างข้อมูลใหม่
4. ตรวจสอบว่า API calls ทำงานถูกต้อง

ถ้าทำงานได้ทั้งหมด พร้อม deploy แล้ว!

กด Ctrl+C เพื่อหยุด dev server เมื่อทดสอบเสร็จ

9. Part 7: Deploy Frontend ไปยัง Vercel#

Push Frontend ไป GitHub ด้วย VS Code#

1. สร้าง repository ใหม่บน GitHub (ทำเป็น Public)
2. เปิด ecommerce-frontend ใน VS Code
3. คลิกไอคอน Source Control (หรือกด Ctrl+Shift+G)
4. คลิก Initialize Repository
5. Stage การเปลี่ยนแปลงทั้งหมด (คลิกไอคอน +)
6. ใส่ commit message: Initial commit - E-commerce frontend
7. คลิก Commit
8. คลิก Publish Branch
9. ทำตาม prompts เพื่อ publish ไปยัง GitHub

Deploy บน Vercel#

1. ไปที่ Vercel → Add New → Project
2. Import ecommerce-frontend repository
3. คลิก Deploy (ไม่ต้องการ environment variables)

Frontend ตอนนี้ live ที่: https://your-frontend-project.vercel.app

10. Summary#

สิ่งที่สร้างไปด้วย $0:

Next Steps:

• Add authentication with JWT
• Implement pagination
• Add search and filtering
• Set up custom domain
• Add payment processing

Tips สำหรับ AI Prompts ที่ดีกว่า:

1. ระบุ tech stack อย่างชัดเจน
2. รวม sample request/response formats
3. ระบุ security requirements
4. ขอ error handling
5. ขอ file structure ที่สมบูรณ์

กุญแจสำคัญในการ build ด้วย AI คือการให้ specifications ที่ชัดเจน Prompt ที่ละเอียดยิ่ง โค้ดที่ generate ได้ยิ่งดี

Happy building!