Cara Membuat 5 AI Agent untuk Membangun API Lengkap (Dari Spesifikasi hingga Pengujian)

Berhentilah menggunakan satu asisten AI generik untuk segalanya. Siapkan 5 agen khusus untuk membangun API lengkap: Arsitek Backend mendesain sistem, Pengoptimal Basis Data meninjau skema, Pengembang Frontend membangun klien, Peninjau Kode memeriksa keamanan, dan Pemeriksa Realitas memvalidasi sebelum pengiriman.

Anda perlu membangun API dengan cepat. Godaannya: meminta satu AI untuk melakukan segalanya. Ini akan mendesain basis data, menulis endpoint, membangun frontend, meninjau kode, dan menguji hasilnya.

Inilah yang terjadi: basis data kurang indeks, endpoint memiliki celah keamanan, frontend mengabaikan status kesalahan, dan pengujian hanya berupa "terlihat bagus bagi saya."

Agen khusus memperbaikinya. Setiap agen mengetahui domain mereka. Setiap agen memiliki daftar periksa. Setiap agen menghasilkan hasil yang spesifik. Arsitek Backend memikirkan skala. Pengoptimal Basis Data menemukan indeks yang hilang. Peninjau Kode menemukan kerentanan. Pemeriksa Realitas membutuhkan bukti.

Dalam tutorial ini, Anda akan menyiapkan 5 agen dari koleksi The Agency dan menjalankan alur kerja pembangunan API yang lengkap. Anda akan berintegrasi dengan Apidog untuk pengujian dan dokumentasi API, memastikan endpoint Anda divalidasi terhadap spesifikasi OpenAPI sebelum deployment.

tombol

5 Agen yang Akan Anda Gunakan

Agen	Divisi	Tanggung Jawab
Arsitek Backend	Rekayasa	Desain API, skema basis data, autentikasi
Pengoptimal Basis Data	Rekayasa	Rekomendasi indeks, optimasi kueri
Pengembang Frontend	Rekayasa	Komponen React, klien API, manajemen state
Peninjau Kode	Rekayasa	Audit keamanan, keamanan tipe, penanganan kesalahan
Pemeriksa Realitas	Pengujian	Validasi berbasis bukti, bukti tangkapan layar

Instal agen-agen:

# Kloning repo The Agency
git clone https://github.com/msitarzewski/agency-agents.git
cd agency-agents

# Salin agen ke Claude Code
cp engineering/engineering-backend-architect.md ~/.claude/agents/
cp engineering/engineering-database-optimizer.md ~/.claude/agents/
cp engineering/engineering-frontend-developer.md ~/.claude/agents/
cp engineering/engineering-code-reviewer.md ~/.claude/agents/
cp testing/testing-reality-checker.md ~/.claude/agents/

Langkah 1: Arsitek Backend Mendesain Sistem

Mulai sesi Claude Code baru:

Aktifkan mode Arsitek Backend.

Rancang API REST untuk platform e-commerce dengan:
- Autentikasi pengguna (JWT dengan token penyegar)
- Katalog produk dengan kategori dan penyaringan
- Manajemen keranjang belanja
- Pemrosesan pesanan dengan pelacakan status
- Integrasi webhook pembayaran

Output:
1. Spesifikasi OpenAPI 3.0
2. Skema basis data PostgreSQL dengan relasi
3. Struktur folder proyek (Express.js + TypeScript)
4. Diagram alur autentikasi

Hasil yang diharapkan:

Arsitek Backend akan mengeluarkan:

Spesifikasi OpenAPI (parsial):

openapi: 3.0.0
info:
  title: E-commerce API
  version: 1.0.0
paths:
  /auth/login:
    post:
      summary: User login
      requestBody:
        content:
          application/json:
            schema:
              type: object
              properties:
                email: { type: string, format: email }
                password: { type: string, minLength: 8 }
      responses:
        '200':
          description: JWT tokens
          content:
            application/json:
              schema:
                type: object
                properties:
                  accessToken: { type: string }
                  refreshToken: { type: string }

Skema Basis Data:

CREATE TABLE users (
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    email VARCHAR(255) UNIQUE NOT NULL,
    password_hash VARCHAR(255) NOT NULL,
    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
    updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

CREATE TABLE products (
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    name VARCHAR(255) NOT NULL,
    description TEXT,
    price DECIMAL(10, 2) NOT NULL CHECK (price >= 0),
    category_id UUID REFERENCES categories(id),
    inventory_count INTEGER DEFAULT 0,
    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

CREATE TABLE orders (
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    user_id UUID REFERENCES users(id),
    total_amount DECIMAL(10, 2) NOT NULL,
    status VARCHAR(50) DEFAULT 'pending',
    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

Struktur Folder:

src/
├── controllers/
│   ├── auth.controller.ts
│   ├── products.controller.ts
│   └── orders.controller.ts
├── middleware/
│   ├── auth.middleware.ts
│   └── validation.middleware.ts
├── routes/
│   ├── auth.routes.ts
│   ├── products.routes.ts
│   └── orders.routes.ts
├── services/
│   ├── auth.service.ts
│   ├── products.service.ts
│   └── orders.service.ts
├── models/
│   ├── User.ts
│   ├── Product.ts
│   └── Order.ts
└── index.ts

Simpan outputnya. Anda akan meneruskannya ke agen berikutnya.

Langkah 2: Pengoptimal Basis Data Meninjau Skema

Buka sesi baru:

Aktifkan mode Pengoptimal Basis Data.

Tinjau skema PostgreSQL ini untuk API e-commerce:

[Tempel skema dari Langkah 1]

Periksa:
1. Indeks yang hilang pada foreign key dan kolom yang sering dikueri
2. Kinerja kueri pada pencarian produk (nama, kategori, rentang harga)
3. Batasan yang tepat untuk integritas data
4. Tabel yang hilang untuk fitur e-commerce umum (ulasan, daftar keinginan)
5. Pola penghapusan lunak untuk jejak audit

Output pernyataan ALTER TABLE spesifik dan definisi tabel baru.

Hasil yang diharapkan:

Rekomendasi Indeks:

-- Tambahkan indeks pada foreign key
CREATE INDEX idx_products_category_id ON products(category_id);
CREATE INDEX idx_orders_user_id ON orders(user_id);

-- Tambahkan indeks untuk pencarian produk
CREATE INDEX idx_products_name_search ON products USING gin(to_tsvector('english', name));
CREATE INDEX idx_products_price ON products(price) WHERE inventory_count > 0;

-- Tambahkan indeks komposit untuk penyaringan kategori
CREATE INDEX idx_products_category_price ON products(category_id, price);

Tabel yang Hilang:

CREATE TABLE reviews (
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    product_id UUID REFERENCES products(id),
    user_id UUID REFERENCES users(id),
    rating INTEGER CHECK (rating >= 1 AND rating <= 5),
    comment TEXT,
    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
    UNIQUE(product_id, user_id)
);

CREATE TABLE cart_items (
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    user_id UUID REFERENCES users(id),
    product_id UUID REFERENCES products(id),
    quantity INTEGER DEFAULT 1 CHECK (quantity > 0),
    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
    updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
    UNIQUE(user_id, product_id)
);

Batasan yang Akan Ditambahkan:

-- Validasi format email
ALTER TABLE users ADD CONSTRAINT chk_email_format
    CHECK (email ~* '^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,}$');

-- Kolom penghapusan lunak
ALTER TABLE products ADD COLUMN deleted_at TIMESTAMP WITH TIME ZONE NULL;
CREATE INDEX idx_products_deleted_at ON products(deleted_at) WHERE deleted_at IS NULL;

Terapkan rekomendasi ini pada skema Anda.

Langkah 3: Pengembang Frontend Membangun Klien

Buka sesi baru:

Aktifkan mode Pengembang Frontend.

Bangun dasbor React untuk API e-commerce ini:

[Tempel spesifikasi OpenAPI dari Langkah 1]

Persyaratan:
- TypeScript dengan mode ketat
- React Query untuk manajemen status server
- Daftar produk dengan filter (kategori, rentang harga, pencarian)
- Keranjang belanja dengan pembaruan real-time
- Riwayat pesanan dengan pelacakan status
- Penanganan kesalahan yang tepat dan status pemuatan
- Desain responsif (seluler, tablet, desktop)

Output:
1. Pengaturan proyek (Vite + React + TypeScript)
2. Klien API dengan hook React Query
3. Komponen inti (ProductList, ProductCard, Cart, OrderHistory)
4. Batas kesalahan dan skeleton pemuatan

Hasil yang diharapkan:

Klien API:

// src/lib/api-client.ts
import { QueryClient, useQuery, useMutation } from '@tanstack/react-query';

const API_BASE = 'http://localhost:3000/api';

async function fetcher<T>(endpoint: string, options?: RequestInit): Promise<T> {
  const response = await fetch(`${API_BASE}${endpoint}`, {
    ...options,
    headers: {
      'Content-Type': 'application/json',
      ...options?.headers,
    },
  });

  if (!response.ok) {
    const error = await response.json();
    throw new Error(error.message || 'Request failed');
  }

  return response.json();
}

export function useProducts(filters?: ProductFilters) {
  const params = new URLSearchParams(filters as Record<string, string>);
  return useQuery({
    queryKey: ['products', filters],
    queryFn: () => fetcher<Product[]>(`/products?${params}`),
  });
}

export function useAddToCart() {
  return useMutation({
    mutationFn: (item: CartItem) =>
      fetcher<CartItem>('/cart', {
        method: 'POST',
        body: JSON.stringify(item),
      }),
  });
}

Komponen Daftar Produk:

// src/components/ProductList.tsx
import { useProducts } from '@/lib/api-client';
import { ProductCard } from './ProductCard';
import { FilterSidebar } from './FilterSidebar';
import { Skeleton } from './ui/skeleton';

export function ProductList() {
  const [filters, setFilters] = useState<ProductFilters>({});
  const { data: products, isLoading, error } = useProducts(filters);

  if (error) {
    return <Alert variant="destructive">{error.message}</Alert>;
  }

  return (
    <div className="flex gap-4">
      <FilterSidebar filters={filters} onFilterChange={setFilters} />
      <div className="flex-1 grid grid-cols-1 md:grid-cols-3 gap-4">
        {isLoading ? (
          Array.from({ length: 6 }).map((_, i) => (
            <Skeleton key={i} className="h-64" />
          ))
        ) : products?.length === 0 ? (
          <EmptyState message="No products found" />
        ) : (
          products?.map(product => (
            <ProductCard key={product.id} product={product} />
          ))
        )}
      </div>
    </div>
  );
}

Batas Kesalahan:

// src/components/ErrorBoundary.tsx
export class ErrorBoundary extends React.Component<
  { children: React.ReactNode },
  { hasError: boolean; error: Error | null }
> {
  constructor(props: { children: React.ReactNode }) {
    super(props);
    this.state = { hasError: false, error: null };
  }

  static getDerivedStateFromError(error: Error) {
    return { hasError: true, error };
  }

  render() {
    if (this.state.hasError) {
      return (
        <div className="p-4 bg-red-50 border border-red-200 rounded">
          <h2 className="text-lg font-semibold text-red-800">Terjadi kesalahan</h2>
          <p className="text-red-600">{this.state.error?.message}</p>
          <Button onClick={() => window.location.reload()} className="mt-2">
            Muat ulang
          </Button>
        </div>
      );
    }

    return this.props.children;
  }
}

Langkah 4: Peninjau Kode Memeriksa Semuanya

Buka sesi baru:

Aktifkan mode Peninjau Kode.

Tinjau basis kode ini untuk:

1. Kerentanan keamanan:
   - Risiko injeksi SQL
   - Kerentanan XSS
   - Perlindungan CSRF
   - Kemungkinan bypass autentikasi

2. Kepatuhan mode ketat TypeScript:
   - Tidak ada any implisit
   - Definisi tipe yang tepat
   - Penanganan null/undefined

3. Celah penanganan kesalahan:
   - Penolakan promise yang tidak tertangkap
   - Blok try/catch yang hilang
   - Kegagalan diam

[Tempel kode dari Langkah 1-3]

Output laporan dengan peringkat tingkat keparahan (Kritis, Tinggi, Sedang, Rendah) dan perbaikan spesifik.

Hasil yang diharapkan:

Laporan Keamanan:

## Masalah Kritis

### 1. Injeksi SQL dalam Pencarian Produk
**Lokasi:** `src/controllers/products.controller.ts:24`
**Masalah:** Input pengguna digabungkan langsung ke dalam kueri SQL
```typescript
// RENTAN
const query = `SELECT * FROM products WHERE name LIKE '%${search}%'`;

Perbaikan: Gunakan kueri berparameter

const query = 'SELECT * FROM products WHERE name LIKE $1';
await db.query(query, [`%${search}%`]);

Masalah Tinggi

2. Perlindungan CSRF Hilang

Lokasi: src/index.tsMasalah: Tidak ada middleware CSRF untuk operasi pengubah status Perbaikan: Tambahkan middleware csurf

import csrf from 'csurf';
app.use(csrf({ cookie: true }));

Masalah Sedang

3. `Any` Implisit dalam Respons API

Lokasi: src/lib/api-client.ts:8Masalah: Tipe `any` generik untuk fungsi fetcher Perbaikan: Tambahkan batasan tipe yang tepat

async function fetcher<T extends Record<string, unknown>>(
  endpoint: string,
  options?: RequestInit
): Promise<T> { ... }


**Laporan Keamanan Tipe:**
```markdown
## Pelanggaran TypeScript

1. `products.controller.ts:45` - Anotasi tipe kembalian hilang
2. `auth.middleware.ts:12` - any implisit di blok catch
3. `orders.service.ts:78` - Objek mungkin tidak terdefinisi

Jalankan `tsc --noEmit` untuk melihat daftar lengkap. Perbaiki sebelum deployment.

Terapkan perbaikan sebelum melanjutkan.

Langkah 5: Pemeriksa Realitas Memvalidasi Sebelum Pengiriman

Buka sesi baru:

Aktifkan mode Pemeriksa Realitas.

API e-commerce ini siap untuk validasi produksi.

Jalankan proses pemeriksaan realitas wajib Anda:

1. Verifikasi file ada
2. Lakukan verifikasi silang fitur yang diklaim dengan kode aktual
3. Membutuhkan bukti tangkapan layar dari pengujian Playwright
4. Tinjau test-results.json untuk metrik kinerja

URL Proyek: http://localhost:3000
Hasil pengujian: ./public/qa-screenshots/test-results.json

Output: LULUS atau PERLU PERBAIKAN dengan masalah pemblokiran spesifik.

Hasil yang diharapkan:

Perintah Pemeriksaan Realitas:

# 1. Verifikasi file ada
ls -la src/controllers/ src/services/ src/routes/
ls -la src/components/ src/lib/

# 2. Verifikasi silang fitur yang diklaim
grep -r "jwt\|jsonwebtoken" . --include="*.ts" || echo "TIDAK DITEMUKAN JWT"
grep -r "bcrypt\|argon2" . --include="*.ts" || echo "TIDAK DITEMUKAN PENGHASILAN KATA SANDI"
grep -r "rateLimit\|express-rate-limit" . --include="*.ts" || echo "TIDAK DITEMUKAN PEMBATASAN LAJU"

# 3. Jalankan pengambilan tangkapan layar Playwright
npx playwright test --config=qa-playwright.config.ts --grep "@screenshot"

# 4. Tinjau hasil pengujian
cat public/qa-screenshots/test-results.json

Laporan Validasi:

## Hasil Pemeriksaan Realitas

### Verifikasi File: LULUS
- Semua file controller ada
- Semua file komponen ada

### Verifikasi Fitur: PERLU PERBAIKAN
- Autentikasi JWT: DITEMUKAN
- Penghasilan kata sandi: DITEMUKAN
- Pembatasan laju: TIDAK DITEMUKAN (memblokir)

### Bukti Tangkapan Layar: PERLU PERBAIKAN
- Tata letak desktop: LULUS
- Tata letak tablet: LULUS
- Tata letak seluler: GAGAL (grid produk rusak pada 375px)

### Metrik Kinerja: PERLU PERBAIKAN
- Waktu muat rata-rata: 2,3 detik (target: <1 detik)
- Kesalahan konsol: 3 (target: 0)
- Permintaan jaringan gagal: 1 (target: 0)

## Status Akhir: PERLU PERBAIKAN

### Masalah Pemblokiran:
1. Pembatasan laju belum diimplementasikan
2. Tata letak seluler rusak pada daftar produk
3. 3 kesalahan konsol yang perlu diperbaiki
4. Waktu muat melebihi target 1 detik

### Tidak Memblokir:
- Tambahkan skeleton pemuatan ke riwayat pesanan
- Tingkatkan pesan kesalahan

Perbaiki masalah pemblokiran dan jalankan Pemeriksa Realitas lagi.

Ringkasan Alur Kerja

┌─────────────────────────────────────────────────────────────────┐
│  Arsitek Backend                                                │
│  → Spesifikasi OpenAPI, skema basis data, struktur folder       │
└─────────────────────────────────────────────────────────────────┘
                              ↓
┌─────────────────────────────────────────────────────────────────┐
│  Pengoptimal Basis Data                                         │
│  → Rekomendasi indeks, tabel yang hilang, batasan               │
└─────────────────────────────────────────────────────────────────┘
                              ↓
┌─────────────────────────────────────────────────────────────────┐
│  Pengembang Frontend                                            │
│  → Komponen React, klien API, penanganan kesalahan              │
└─────────────────────────────────────────────────────────────────┘
                              ↓
┌─────────────────────────────────────────────────────────────────┐
│  Peninjau Kode                                                  │
│  → Audit keamanan, keamanan tipe, celah penanganan kesalahan    │
└─────────────────────────────────────────────────────────────────┘
                              ↓
┌─────────────────────────────────────────────────────────────────┐
│  Pemeriksa Realitas                                             │
│  → Validasi berbasis bukti, bukti tangkapan layar, LULUS/GAGAL  │
└─────────────────────────────────────────────────────────────────┘

Eksekusi Agen Paralel (Lanjutan)

Jalankan agen secara paralel untuk mengurangi total waktu:

# Terminal 1: Arsitek Backend
claude "Aktifkan Arsitek Backend. Rancang API e-commerce..."

# Terminal 2: Pengoptimal Basis Data (tunggu output skema)
claude "Aktifkan Pengoptimal Basis Data. Tinjau skema ini..."

# Terminal 3: Pengembang Frontend (tunggu spesifikasi API)
claude "Aktifkan Pengembang Frontend. Bangun dasbor React..."

# Terminal 4: Peninjau Kode (tunggu kode)
claude "Aktifkan Peninjau Kode. Tinjau basis kode ini..."

# Semua terminal: Pemeriksa Realitas (validasi akhir)
claude "Aktifkan Pemeriksa Realitas. Jalankan pemeriksaan wajib..."

Dengan eksekusi paralel, Anda dapat menyelesaikan alur kerja dalam 2-4 jam, bukan 6-8 jam.

Apa yang Anda Bangun

Hasil	Agen	Output
Desain API	Arsitek Backend	Spesifikasi OpenAPI, skema basis data, struktur folder
Optimasi Skema	Pengoptimal Basis Data	Rekomendasi indeks, tabel tambahan, batasan
Frontend	Pengembang Frontend	Komponen React, klien API, batas kesalahan
Audit Keamanan	Peninjau Kode	Laporan kerentanan, perbaikan keamanan tipe
Validasi Akhir	Pemeriksa Realitas	Bukti tangkapan layar, sertifikasi LULUS/GAGAL

Langkah Selanjutnya

Deploy API:

Siapkan PostgreSQL produksi dengan pengelompokan koneksi
Konfigurasi variabel lingkungan untuk rahasia
Tambahkan endpoint pemeriksaan kesehatan
Siapkan pemantauan (Prometheus, Grafana)

Perluas alur kerja:

Tambahkan agen Benchmarker Kinerja untuk pengujian beban
Tambahkan agen Penulis Teknis untuk dokumentasi
Tambahkan agen Automator DevOps untuk pipeline CI/CD

Gunakan kembali pola:

Simpan prompt sebagai template
Buat skrip alur kerja yang merangkai sesi agen
Bagikan dengan tim Anda

Lima agen khusus. Satu API lengkap. Tanpa saran generik.

Itulah kekuatan spesialisasi. Setiap agen mengetahui domainnya. Setiap agen memiliki daftar periksa. Setiap agen menghasilkan hasil yang spesifik.

Giliran Anda: pilih proyek, aktifkan agen, dan kirimkan lebih cepat.

Poin-Poin Penting

Agen khusus mengungguli asisten generik — Setiap agen memiliki keahlian domain, daftar periksa, dan hasil spesifik
Alur kerja berurutan menjamin kualitas — Arsitek Backend mendesain, Pengoptimal Basis Data meninjau, Pengembang Frontend membangun, Peninjau Kode mengaudit, Pemeriksa Realitas memvalidasi
Persetujuan berbasis bukti mencegah bug — Pemeriksa Realitas membutuhkan bukti tangkapan layar, hasil grep, dan metrik kinerja sebelum sertifikasi LULUS
Eksekusi paralel mengurangi total waktu — Jalankan 4 terminal secara bersamaan untuk menyelesaikannya dalam 2-4 jam, bukan 6-8 jam
Simpan prompt sebagai template — Gunakan aktivasi agen yang sama untuk hasil yang konsisten di seluruh proyek

Pertanyaan Umum

Apa itu agen AI untuk pengembang?Agen AI adalah asisten AI khusus dengan keahlian domain. Tidak seperti chatbot generik, agen seperti Arsitek Backend atau Peninjau Kode memiliki daftar periksa spesifik dan menghasilkan hasil yang konsisten.

Bagaimana cara menginstal agen dari The Agency?Kloning repo di github.com/msitarzewski/agency-agents, lalu salin file .md ke ~/.claude/agents/ untuk Claude Code atau gunakan skrip instalasi untuk alat lain.

Apa itu agen Pemeriksa Realitas?Pemeriksa Realitas adalah agen QA berbasis bukti yang menolak untuk menyetujui pekerjaan tanpa bukti. Ini membutuhkan tangkapan layar, hasil grep, dan metrik kinerja sebelum memberikan sertifikasi LULUS.

Bisakah saya menjalankan beberapa agen secara paralel?Ya. Buka beberapa terminal dan aktifkan agen yang berbeda di masing-masing terminal. Teruskan hasil dengan menyalin output atau menggunakan memori MCP untuk serah terima otomatis.

Bagaimana cara meneruskan konteks antar agen?Salin output dari satu agen dan tempelkan sebagai input untuk agen berikutnya. Untuk serah terima otomatis, gunakan memori MCP untuk menyimpan hasil yang dapat dipanggil kembali oleh agen berikutnya.

Bagaimana jika agen mengatakan PERLU PERBAIKAN?Perbaiki masalah pemblokiran yang diidentifikasi agen, lalu jalankan kembali agen tersebut. Pemeriksa Realitas secara spesifik mencantumkan apa yang perlu diperbaiki sebelum sertifikasi LULUS.

Apakah saya membutuhkan kelima agen untuk setiap proyek?Tidak. Mulai dengan Arsitek Backend dan Peninjau Kode untuk proyek API. Tambahkan Pengoptimal Basis Data untuk skema kompleks, Pengembang Frontend untuk pekerjaan UI, dan Pemeriksa Realitas sebelum pengiriman.