สร้างแอป Full-Stack ด้วย Claude Code (GLM)

1. บทนำ#

การพัฒนาแอป full-stack ในอดีตใช้เวลาหลายสัปดาห์ วันนี้ด้วยเครื่องมือ AI อย่าง Claude Code สามารถสร้างแอปฯ สมบูรณ์ได้ในไม่กี่ชั่วโมง

บทความนี้จะแนะนำวิธี:

1. ติดตั้งและตั้งค่า Claude Code ด้วย GLM
2. สร้างแอป full-stack สมบูรณ์ด้วย Claude Code prompt เดียว
3. ตั้งค่าฐานข้อมูลเฉพาะที่ด้วย CAMPP (MySQL)

สิ่งที่เราจะสร้าง: แอป E-Commerce full-stack ที่มี:

• Backend API: Next.js App Router route handlers (Customers, Products, Orders พร้อมรองรับ transaction)
• Frontend: Next.js 15 พร้อม TypeScript และ Tailwind CSS สำหรับจัดการข้อมูล e-commerce
• ทุกอย่างในโปรเจค Next.js เดียวพร้อม TypeScript!

2. ติดตั้ง Claude Code#

การติดตั้งแบบ Native (แนะนำ)#

ใช้วิธีการติดตั้งโดยตรงผ่าน command line สำหรับ macOS, Linux และ Windows:

macOS, Linux, WSL:

curl -fsSL https://claude.ai/install.sh | bash

Windows PowerShell:

irm https://claude.ai/install.ps1 | iex

Windows CMD:

curl -fsSL https://claude.ai/install.cmd -o install.cmd && install.cmd && del install.cmd

ตั้งค่า GLM เป็น Model Provider#

หากต้องการใช้ GLM กับ Claude Code ต้องตั้งค่า GLM Coding Plan

ขั้นตอนที่ 1: รับ API Key จาก Z.AI#

1. เข้าไปที่ Z.AI Platform ↗ และสมัครหรือล็อกอิน
2. ไปที่หน้าจัดการ API Keys
3. สร้าง API Key ใหม่
4. คัดลอก API Key เพื่อใช้ในขั้นตอนถัดไป

ขั้นตอนที่ 2: ตั้งค่า GLM Coding Plan#

ใช้ Coding Tool Helper เพื่อตั้งค่า GLM โดยอัตโนมัติ:

# Run Coding Tool Helper directly in your terminal
npx @z_ai/coding-helper

กด Enter เพื่อเลือกตัวเลือก API Key

วาง API Key เมื่อถูกถาม

เมื่อตั้งค่าเสร็จ ให้รีสตาร์ท Claude Code เพื่อใช้ GLM เป็น AI model provider

3. สิ่งที่ต้องใช้#

เครื่องมือที่ต้องการ:

• Node.js ที่ติดตั้งในเครื่อง
• Claude Code ที่ตั้งค่า GLM แล้ว (ด้านบน)
• CAMPP ↗ - Local web development stack (Caddy, PHP, MySQL)
• Terminal (แนะนำ VS Code)

4. ส่วนที่ 1: สร้าง Full-Stack Application ด้วย Claude Code#

ขั้นตอนที่ 1: สร้างโปรเจค Next.js#

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

mkdir ecommerce-app
cd ecommerce-app
npx create-next-app@15 . --tailwind --app --typescript

สิ่งนี้จะสร้างโปรเจค Next.js 15 ที่มี:

• TypeScript เปิดใช้งาน
• Tailwind CSS สำหรับ styling
• App Router

ขั้นตอนที่ 2: ติดตั้ง MySQL Dependency#

npm install mysql2

ขั้นตอนที่ 3: AI Prompt สำหรับ Full-Stack Application#

เปิด Claude Code ในโปรเจค#

ตรวจสอบให้แน่ใจว่าอยู่ใน project directory จากนั้นเปิด Claude Code:

ใช้ terminal:

cd ecommerce-app
claude

หรือจาก VS Code:

• เปิด project folder ใน VS Code
• กด Ctrl+Shift+P (Windows/Linux) หรือ Cmd+Shift+P (macOS)
• พิมพ์ “Claude Code: Start New Chat” แล้วกด Enter

สร้าง Project Context#

ก่อนใช้ prompt ให้ Claude Code เข้าใจ project structure โดยรัน:

/init

จะสแกน project และช่วยให้ Claude Code สร้างโค้ดที่เหมาะกับ setup ที่มี

ใช้ Prompt นี้#

หลังจาก /init เสร็จ ให้วาง prompt นี้:

Create a full-stack e-commerce application using Next.js 15 with App Router and TypeScript.

The frontend and API must be in the same Next.js project using App Router route handlers.

Use this exact project structure:

ecommerce-app/
├── schema.sql
├── seed.sql
├── .env.local
├── 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

=== DATABASE REQUIREMENTS ===

Database: MySQL
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)

=== API REQUIREMENTS ===

Use Next.js App Router route handlers with TypeScript.

Customers:
- GET /api/customers → return all customers
- GET /api/customers/[id] → return one customer or 404
- POST /api/customers → create customer
- DELETE /api/customers/[id] → delete customer

Products:
- GET /api/products → return all products
- GET /api/products/[id] → return one product or 404
- POST /api/products → create product
- DELETE /api/products/[id] → delete product

Orders:
- GET /api/orders → return all orders
- GET /api/orders/[id] → return one order with items or 404
- POST /api/orders → create order
- DELETE /api/orders/[id] → optional, only include if implemented

POST /api/orders must:
- use database transactions
- validate product stock before creating the order
- decrease stock after order creation
- rollback on any error

API rules:
- use mysql2 with parameterized queries
- return JSON only
- use proper status codes: 200, 201, 400, 404, 500
- include error handling
- use NextResponse
- use proper TypeScript types/interfaces

=== FRONTEND REQUIREMENTS ===

Use Next.js 15 + App Router + TypeScript + Tailwind CSS.

Pages:
- Dashboard
- Customers
- Products
- Orders

UI requirements:
- responsive tables
- simple forms to add data
- loading states
- error messages
- fetch using relative URLs like /api/customers
- clean modern UI
- navigation using Next.js Link
- proper TypeScript interfaces
- **NO dark mode toggle - use light theme only**

Orders page:
- allow selecting customer
- allow selecting products and quantity
- calculate order total
- submit order to /api/orders

=== DATABASE CONNECTION ===

Create lib/db.ts using mysql2/promise:
- connection pool
- environment variables
- promise-based query helper
- TypeScript types

Environment variables:
DB_HOST=localhost
DB_PORT=3307
DB_USER=root
DB_PASSWORD=
DB_NAME=ecommerce
DB_SSL=false

If DB_SSL=true, support SSL config for TiDB.

=== OUTPUT REQUIREMENTS ===

Provide:
1. Complete code for every file in the structure above
2. .env.local template
3. schema.sql
4. seed.sql
5. TypeScript interfaces/types
6. Commands to install dependencies and run the project
7. Ensure the code is build-ready and TypeScript-safe
8. If any assumption is made, state it clearly

ขั้นตอนที่ 4: ตรวจสอบโค้ดที่สร้าง#

Claude Code จะสร้างไฟล์โค้ดทั้งหมดใน project จะเห็น structure ดังนี้:

ecommerce-app/
├── schema.sql
├── seed.sql
├── .env.local
├── 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

5. ส่วนที่ 2: ตั้งค่าฐานข้อมูลเฉพาะที่ด้วย CAMPP#

ขั้นตอนที่ 1: ติดตั้งและเริ่มต้น CAMPP#

CAMPP เป็น Local Web Development Stack ที่รวม Caddy, PHP, MySQL และ phpMyAdmin ไว้ด้วยกัน ดาวน์โหลดได้ที่ https://campp.melivecode.com/ ↗

ขั้นตอนการติดตั้ง:

1. ดาวน์โหลด CAMPP จากเว็บไซต์
2. ติดตั้งตามระบบปฏิบัติการที่ใช้
3. เปิด CAMPP และกด Start สำหรับ Caddy, PHP และ MySQL

การตั้งค่าการเชื่อมต่อ MySQL เริ่มต้นของ CAMPP:

หมายเหตุ: CAMPP ใช้พอร์ต 3307 สำหรับ MySQL เพื่อหลีกเลี่ยงความขัดแย้งกับบริการ MySQL อื่นที่อาจทำงานอยู่บนเครื่อง

ขั้นตอนที่ 2: เข้าถึง phpMyAdmin#

เข้าถึง phpMyAdmin ผ่าน CAMPP:

1. กดปุ่ม phpMyAdmin ที่ Dashboard ของ CAMPP
2. จะเปิด http://localhost:8080/phpmyadmin ↗

ขั้นตอนที่ 3: สร้างฐานข้อมูล#

สร้างฐานข้อมูลใหม่ใน phpMyAdmin:

1. คลิกที่ New ใน phpMyAdmin
2. ตั้งชื่อฐานข้อมูล: ecommerce
3. คลิก Create

ขั้นตอนที่ 4: สร้างตารางด้วย SQL#

ใน phpMyAdmin เลือกฐานข้อมูล ecommerce และคลิกที่ SQL วางเนื้อหาจาก schema.sql จาก project:

คลิก Go เพื่อสร้างตาราง

ขั้นตอนที่ 5: ตั้งค่า Environment Variables#

สร้างไฟล์ .env.local ใน project root (Claude Code น่าจะสร้างไว้ให้แล้ว):

DB_HOST=localhost
DB_PORT=3307
DB_USER=root
DB_PASSWORD=
DB_NAME=ecommerce

สำคัญ: CAMPP ใช้พอร์ต 3307 ไม่ใช่ 3306

ขั้นตอนที่ 6: Run Seed Data#

ใน phpMyAdmin SQL Editor วางเนื้อหาจาก seed.sql และคลิก Run เพื่อเพิ่มข้อมูลตัวอย่าง

6. ส่วนที่ 3: ทดสอบแอปฯ บนเครื่อง#

เริ่ม Development Server#

npm run dev

จะเห็น: Ready on http://localhost:3000

เนื่องจากเราใช้ Next.js App Router ทั้งสำหรับ frontend และ API ทุกอย่างทำงานบน server เดียวกัน!

ทดสอบแอปฯ#

1. เปิด http://localhost:3000 ↗ ใน browser
2. ไปที่หน้า Dashboard, Customers, Products, และ Orders
3. ลองเพิ่ม customers, products ใหม่ และสร้าง orders
4. ตรวจสอบให้แน่ใจว่าทุกอย่างทำงานได้อย่างถูกต้อง

7. ส่วนที่ 4: Deploy ไปยัง TiDB และ Vercel#

ขั้นตอนที่ 1: สร้าง TiDB Cloud Cluster#

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

ขั้นตอนที่ 2: สร้างฐานข้อมูลใน TiDB#

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

ขั้นตอนที่ 3: Run Schema และ Seed ใน TiDB#

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

ขั้นตอนที่ 4: รับ TiDB Connection Details#

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

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

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

ขั้นตอนที่ 5: Build และแก้ไขข้อผิดพลาดด้วย Claude Code#

ก่อน push ไป GitHub ให้ใช้ Claude Code เพื่อ build และแก้ไขข้อผิดพลาด:

1. เปิด Claude Code ใน project: claude
2. ขอให้ Claude Code: Build the project with npm run build and fix any errors
3. Claude Code จะรัน build และแก้ไขปัญหาโดยอัตโนมัติ
4. ตรวจสอบให้แน่ใจว่า build ผ่านสำเร็จ

ขั้นตอนที่ 6: Push ไป GitHub#

สร้าง .gitignore ใน project root:

node_modules
.env.local

Push ไป GitHub โดยใช้ VS Code:

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

โค้ดอยู่บน GitHub แล้วที่: https://github.com/YOUR_USERNAME/ecommerce-app

ขั้นตอนที่ 7: Deploy บน Vercel#

ก่อน deploy หากพบข้อผิดพลาดในการ build บน Vercel ให้ใช้ Claude Code แก้ไข:

1. คัดลอกข้อความ error จาก Vercel
2. วางใน Claude Code และขอให้แก้ไขปัญหา
3. Commit และ push การแก้ไข
4. Vercel จะทำการ redeploy โดยอัตโนมัติ

Deploy แอปฯ:

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

เนื่องจาก Next.js จัดการทั้ง frontend และ API ใน project เดียวกัน ทุกอย่างจะ deploy พร้อมกัน!

แอปฯ อยู่ที่: https://your-project.vercel.app

ตัวอย่าง: https://ecommerce-app-amber-two.vercel.app/ ↗

ทดสอบแอปฯ ที่ Deploy แล้ว#

1. เปิด URL ที่ deploy แล้วใน browser
2. ทดสอบฟังก์ชันทั้งหมด: ดูและเพิ่ม customers, products, และ orders
3. ตรวจสอบให้แน่ใจว่าทำงานได้อย่างถูกต้อง

ยินดีด้วย! แอป e-commerce full-stack deploy ด้วย TiDB Cloud และ Vercel แล้ว!

8. สรุป#

สิ่งที่สร้าง:

ขั้นตอนถัดไป:

• เพิ่ม authentication ด้วย JWT
• Implement pagination
• เพิ่ม search และ filtering
• ตั้งค่า custom domain

เคล็ดลับ prompt ที่ดีกว่าสำหรับ Claude Code:

1. ระบุ tech stack อย่างชัดเจน
2. ระบุรูปแบบ request/response ตัวอย่าง
3. ระบุความต้องการด้านความปลอดภัย
4. ขอ error handling
5. ขอ file structure ที่สมบูรณ์

กุญแจสำคัญในการสร้างด้วย Claude Code คือการให้ specifications ที่ชัดเจน ยิ่ง prompt มีรายละเอียดมากเท่าไหร่ โค้ดที่ได้จะยิ่งดีขึ้นเท่านั้น

ขอให้สนุกกับการสร้างแอปฯ!