เครื่องมือ AI Review โค้ด: เพิ่มคุณภาพโค้ดอัตโนมัติ

Code Review เป็นกระบวนการสำคัญที่ช่วยรักษาคุณภาพโค้ด แต่ใช้เวลามาก ด้วย AI ตอนนี้คุณสามารถให้ AI review โค้ดได้อัตโนมัติ รวดเร็ว และแม่นยำ บทความนี้จะแนะนำเครื่องมือและวิธีการใช้ AI ทำ code review

ทำไมต้อง Code Review?

ประโยชน์ของ Code Review

1. จับ Bugs ก่อน Production

• หา logic errors
• Edge cases ที่พลาด
• Potential crashes
• ป้องกันปัญหาในอนาคต

2. รักษาคุณภาพโค้ด

• Coding standards
• Best practices
• Clean code principles
• Maintainability

3. แชร์ความรู้

• เรียนรู้จากคนอื่น
• Spread best practices
• Onboard new developers

4. ลด Technical Debt

• จับปัญหาตั้งแต่เนิ่นๆ
• Refactor ก่อนซับซ้อน
• Architecture improvements

ปัญหาของ Manual Code Review

ใช้เวลามาก:

• Review 1 PR: 30-60 นาที
• ต้องมี senior developer
• Bottleneck ในการ deploy

คุณภาพไม่สม่ำเสมอ:

• ขึ้นกับ reviewer
• เหนื่อย = พลาดได้
• Bias และ politics

ล่าช้า:

• รอ reviewer available
• Timezone issues (remote team)
• Block การพัฒนาต่อ

อ่านเพิ่มเติม: Debugging with AI

AI Code Review Tools

1. GitHub Copilot Workspace

ความสามารถ:

• Pull Request review อัตโนมัติ
• Suggest improvements
• Security vulnerability detection
• Code quality scoring

ราคา: รวมใน GitHub Copilot ($10-19/เดือน)

จุดเด่น:

• Integrate ใน GitHub
• Context-aware
• Learning from repo

2. CodeRabbit

ความสามารถ:

• Automated PR reviews
• Line-by-line comments
• Security & performance analysis
• Custom rules

ราคา: $15-50/เดือน

จุดเด่น:

• Review ละเอียดมาก
• อธิบายชัดเจน
• ปรับแต่งได้

3. Bito AI

ความสามารถ:

• Code review
• Generate tests
• Explain code
• Security scanning

ราคา: ฟรี, Pro $15/เดือน

จุดเด่น:

• IDE extension
• Real-time feedback
• Multi-language

4. SonarQube + AI

ความสามารถ:

• Static code analysis
• Code smells detection
• Security hotspots
• Technical debt tracking

ราคา: Community (ฟรี), Enterprise (custom)

จุดเด่น:

• Production-grade
• มาตรฐานอุตสาหกรรม
• รายงานละเอียด

5. DeepCode (Snyk Code)

ความสามารถ:

• Security vulnerability scan
• Code quality analysis
• Best practices suggestions
• Auto-fix suggestions

ราคา: ฟรี, Team $0-25/เดือน

จุดเด่น:

• Security focused
• Fast scanning
• Open source friendly

อ่านเพิ่มเติม: Cursor AI Guide

วิธีใช้ AI Review โค้ด

Method 1: ChatGPT / Claude Review

Step 1: เตรียมโค้ด

เลือกโค้ดที่ต้องการ review
→ 1 file หรือ 1 feature

Step 2: Craft Prompt

"Review this code และให้ feedback:

[paste code]

ต้องการ:
1. Bugs หรือ potential issues
2. Performance problems
3. Security vulnerabilities
4. Code smells
5. Best practices violations
6. Suggestions for improvement
7. Rating (1-10) พร้อมเหตุผล

Language: [Python/JavaScript/etc]
Framework: [React/Django/etc]
Context: [อธิบายว่าโค้ดทำอะไร]"

Step 3: รับ Feedback

AI จะให้:
- Issues พบ (พร้อมอธิบาย)
- Severity (Critical/High/Medium/Low)
- แนวทางแก้ไข
- ตัวอย่างโค้ดที่ดีกว่า
- Overall score และเหตุผล

Step 4: ปรับปรุง

แก้ตาม feedback
→ Review อีกรอบ
→ จนกว่าจะ pass

Method 2: Cursor AI Review

Step 1: เลือกโค้ด

เลือกฟังก์ชันหรือไฟล์

Step 2: Cmd+L (Chat)

"Review this code:
- Find bugs
- Check performance
- Security issues
- Best practices
- Suggest improvements"

Step 3: Apply Fixes

AI แนะนำการแก้ไข
→ Cmd+K เพื่อ apply
→ หรือ copy ไป paste

Method 3: Automated PR Review

Setup (CodeRabbit example):

1. Install GitHub App

ไปที่ github.com/apps/coderabbitai
→ Install on repositories
→ Choose repos

2. Configure Settings

# .coderabbit.yaml
reviews:
  profile: "strict"  # strict/moderate/relaxed
  auto_review: true
  exclude:
    - "**/*.test.js"
    - "**/*.spec.ts"

checks:
  - name: "Security"
    severity: "high"
  - name: "Performance"
    severity: "medium"
  - name: "Best Practices"
    severity: "low"

3. Create Pull Request

git checkout -b feature/new-feature
# ... make changes ...
git commit -m "Add new feature"
git push origin feature/new-feature

# Create PR on GitHub

4. AI Auto-Review

CodeRabbit จะ:
1. อ่านโค้ดทั้งหมด
2. วิเคราะห์ changes
3. Comment บนแต่ละไฟล์
4. สรุป PR overview
5. แนะนำการปรับปรุง

ใช้เวลา: ~30 วินาที

อ่านเพิ่มเติม: Vibe Coding vs Traditional

Review Checklist

1. Code Quality

AI จะเช็ค:

Readability:

• ชื่อตัวแปรชัดเจนไหม
• ฟังก์ชันสั้นพอไหม (< 20 บรรทัด)
• Comments เพียงพอไหม
• Consistent naming convention

Structure:

• DRY (Don’t Repeat Yourself)
• Single Responsibility Principle
• Proper abstraction
• Modular design

Complexity:

• Cyclomatic complexity score
• Nesting levels
• Function parameters (< 3-4)
• Code duplication

2. Performance

AI จะเช็ค:

Algorithms:

• Time complexity (O(n), O(n²), etc.)
• Space complexity
• Optimizable loops
• Inefficient operations

React/Frontend Specific:

• Unnecessary re-renders
• Missing memoization
• Large bundle size
• Unoptimized images

Backend:

• N+1 queries
• Missing indexes
• Inefficient database queries
• Memory leaks

3. Security

AI จะเช็ค:

Common Vulnerabilities:

• SQL Injection
• XSS (Cross-Site Scripting)
• CSRF
• Insecure dependencies
• Hardcoded secrets

Best Practices:

• Input validation
• Output sanitization
• Authentication/Authorization
• Secure communication (HTTPS)
• Error handling (no sensitive info)

4. Testing

AI จะเช็ค:

• Unit tests coverage
• Edge cases tested
• Error cases handled
• Integration tests
• E2E tests for critical paths

5. Documentation

AI จะเช็ค:

• Function/class comments
• Complex logic explained
• API documentation
• README updated
• CHANGELOG updated

อ่านเพิ่มเติม: AI Mobile App Development

ตัวอย่าง Reviews

Example 1: React Component Review

Code:

const ProductList = (props) => {
  const [products, setProducts] = useState([]);

  useEffect(() => {
    fetch('/api/products')
      .then(res => res.json())
      .then(data => setProducts(data));
  });

  return (
    <div>
      {products.map(p => (
        <div onClick={() => props.onSelect(p.id)}>
          <img src={p.image} />
          <h3>{p.name}</h3>
          <p>${p.price}</p>
        </div>
      ))}
    </div>
  );
};

AI Review:

## Issues Found: 8

### Critical (2)
1. **Infinite Loop** (Line 5-8)
   - Missing dependency array in useEffect
   - Causes infinite API calls
   - Fix: Add empty array `useEffect(() => {...}, [])`

2. **Missing Key Prop** (Line 12)
   - Map without key prop
   - Performance issue
   - Fix: Add `key={p.id}`

### High (3)
3. **No Error Handling** (Line 5)
   - API call can fail
   - User sees nothing
   - Fix: Add try-catch and error state

4. **No Loading State** (Line 11)
   - Shows nothing while loading
   - Bad UX
   - Fix: Add loading state

5. **Memory Leak Risk** (Line 5)
   - No cleanup function
   - Can cause issues if component unmounts
   - Fix: Add AbortController

### Medium (2)
6. **Missing Alt Text** (Line 13)
   - Accessibility issue
   - SEO issue
   - Fix: Add alt={p.name}

7. **Inline Function** (Line 12)
   - Creates new function every render
   - Performance issue
   - Fix: Use useCallback

### Low (1)
8. **Prop Types** (Line 1)
   - No TypeScript or PropTypes
   - Type safety issue
   - Fix: Add TypeScript interface

## Score: 3/10

## Improved Code:
```jsx
interface Product {
  id: number;
  name: string;
  price: number;
  image: string;
}

interface Props {
  onSelect: (id: number) => void;
}

const ProductList: React.FC<Props> = ({ onSelect }) => {
  const [products, setProducts] = useState<Product[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    const abortController = new AbortController();

    const fetchProducts = async () => {
      try {
        const res = await fetch('/api/products', {
          signal: abortController.signal
        });

        if (!res.ok) throw new Error('Failed to fetch');

        const data = await res.json();
        setProducts(data);
      } catch (err) {
        if (err.name !== 'AbortError') {
          setError(err.message);
        }
      } finally {
        setLoading(false);
      }
    };

    fetchProducts();

    return () => abortController.abort();
  }, []);

  const handleSelect = useCallback((id: number) => {
    onSelect(id);
  }, [onSelect]);

  if (loading) return <LoadingSpinner />;
  if (error) return <ErrorMessage message={error} />;
  if (products.length === 0) return <EmptyState />;

  return (
    <div className="product-grid">
      {products.map(product => (
        <ProductCard
          key={product.id}
          product={product}
          onSelect={handleSelect}
        />
      ))}
    </div>
  );
};

Summary:

• Fixed infinite loop (critical bug)
• Added proper error handling
• Added loading and empty states
• Improved performance
• Better accessibility
• TypeScript for type safety
• Extracted ProductCard component (cleaner)

New Score: 9/10

### Example 2: API Route Review

**Code:**
```javascript
app.post('/api/users', (req, res) => {
  const { name, email, password } = req.body;

  db.query(
    `INSERT INTO users (name, email, password)
     VALUES ('${name}', '${email}', '${password}')`,
    (err, result) => {
      if (err) {
        res.send({ error: err });
      } else {
        res.send({ id: result.insertId });
      }
    }
  );
});

AI Review:

## Issues Found: 7

### Critical (3)
1. **SQL Injection Vulnerability** 🚨
   - Direct string concatenation in SQL
   - Attacker can execute arbitrary SQL
   - Severity: CRITICAL
   - Fix: Use prepared statements

2. **Password Not Hashed** 🚨
   - Storing plain text password
   - Major security risk
   - Fix: Use bcrypt to hash

3. **No Input Validation** 🚨
   - Accepts any input
   - Can crash server
   - Fix: Validate all inputs

### High (2)
4. **No Authentication** (Line 1)
   - Anyone can create users
   - Fix: Add auth middleware

5. **Weak Error Handling** (Line 9)
   - Sends detailed errors to client
   - Information leakage
   - Fix: Generic error messages

### Medium (2)
6. **No Rate Limiting** (Line 1)
   - Vulnerable to spam/DoS
   - Fix: Add rate limiter

7. **No Email Verification** (Line 2)
   - Can use fake emails
   - Fix: Send verification email

## Score: 1/10 (๐Ÿšจ DANGEROUS)

## Fixed Code:
```javascript
const bcrypt = require('bcrypt');
const { body, validationResult } = require('express-validator');

app.post(
  '/api/users',
  // Rate limiting
  rateLimit({
    windowMs: 15 * 60 * 1000, // 15 minutes
    max: 5 // 5 requests per IP
  }),
  // Input validation
  [
    body('name')
      .trim()
      .isLength({ min: 2, max: 50 })
      .escape(),
    body('email')
      .isEmail()
      .normalizeEmail(),
    body('password')
      .isLength({ min: 8 })
      .matches(/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)/)
  ],
  async (req, res) => {
    try {
      // Check validation errors
      const errors = validationResult(req);
      if (!errors.isEmpty()) {
        return res.status(400).json({
          error: 'Validation failed'
        });
      }

      const { name, email, password } = req.body;

      // Check if email exists
      const [existing] = await db.query(
        'SELECT id FROM users WHERE email = ?',
        [email]
      );

      if (existing.length > 0) {
        return res.status(409).json({
          error: 'Email already exists'
        });
      }

      // Hash password
      const hashedPassword = await bcrypt.hash(password, 10);

      // Insert user (prepared statement)
      const [result] = await db.query(
        'INSERT INTO users (name, email, password, verified) VALUES (?, ?, ?, ?)',
        [name, email, hashedPassword, false]
      );

      // Send verification email
      await sendVerificationEmail(email, result.insertId);

      // Don't send sensitive info
      res.status(201).json({
        message: 'User created. Please verify your email.',
        userId: result.insertId
      });

    } catch (err) {
      // Log error (don't send to client)
      logger.error('User creation failed:', err);

      res.status(500).json({
        error: 'Internal server error'
      });
    }
  }
);

New Score: 9/10

Security Improvements:

✅ SQL injection prevented ✅ Password hashing (bcrypt) ✅ Input validation ✅ Rate limiting ✅ Email verification ✅ Proper error handling ✅ No information leakage

อ่านเพิ่มเติม: [Build E-commerce Vibe Coding](/blog/build-ecommerce-vibe-coding/)

## Best Practices

### ✅ Do's

**1. Review ทุก PR**
- ไม่ว่าเล็กหรือใหญ่
- CI/CD integration
- Block merge ถ้าไม่ pass

**2. ใช้หลาย Tools**
- AI review (fast, broad)
- Static analysis (deep)
- Manual review (context)

**3. Act on Feedback**
- แก้ Critical/High ทันที
- Plan สำหรับ Medium/Low
- Track technical debt

**4. Continuous Learning**
- เรียนรู้จาก feedback
- ปรับปรุง coding style
- แชร์กับทีม

### ❌ Don'ts

**1. อย่าพึ่ง AI 100%**
- AI อาจพลาด context
- Business logic ต้องเข้าใจ
- Security critical ต้องมี human

**2. อย่าละเลย Warnings**
- "มันยัง run ได้" ≠ ดี
- Technical debt สะสม
- แก้ยากขึ้นเรื่อยๆ

**3. อย่าข้าม Testing**
- Review ไม่ทดแทน testing
- ต้องมีทั้งสอง

## Workflow Integration

### CI/CD Pipeline

```yaml
# .github/workflows/code-review.yml
name: AI Code Review

on:
  pull_request:
    types: [opened, synchronize]

jobs:
  ai-review:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3

      - name: CodeRabbit Review
        uses: coderabbitai/coderabbit@v1

      - name: SonarQube Scan
        uses: sonarsource/sonarqube-scan-action@master

      - name: Security Scan
        uses: snyk/actions/node@master

      - name: Comment Results
        if: always()
        uses: actions/github-script@v6
        with:
          script: |
            // Post combined results to PR

Pre-commit Hooks

# .husky/pre-commit
#!/bin/sh

# Lint
npm run lint

# Type check
npm run type-check

# AI quick review
cursor-ai review --staged

# Tests
npm run test:changed

สรุป

AI Code Review ช่วยให้การ review โค้ดเร็วและมีคุณภาพมากขึ้น:

ประโยชน์:

• ⚡ ประหยัดเวลา 70-80%
• 🎯 จับ bugs ก่อน production
• 📈 รักษาคุณภาพโค้ด
• 📚 เรียนรู้ best practices
• 💰 ลด technical debt

เริ่มต้นวันนี้:

1. เลือก tool (CodeRabbit/Bito/ChatGPT)
2. Review โค้ดด้วย AI
3. แก้ตาม feedback
4. Integrate เข้า workflow

หากต้องการเรียน AI Code Review และ Vibe Coding เจาะลึก เรียน คอร์ส Vibe Coding กับเราได้

---

บทความที่เกี่ยวข้อง:

• Debugging with AI
• Cursor AI Guide
• Vibe Coding vs Traditional