Berhentilah mengandalkan satu asisten AI generik untuk seluruh proses pengembangan. Untuk membangun API secara efisien dan andal, siapkan 5 agen spesialisasi: Arsitek Backend (desain sistem), Pengoptimal Basis Data (audit skema), Pengembang Frontend (bangun klien), Peninjau Kode (cek keamanan & kualitas), dan Pemeriksa Realitas (validasi sebelum rilis).
Biasanya, ketika dikejar waktu, godaan terbesar adalah meminta satu AI untuk mengerjakan segalanya: desain database, penulisan endpoint, frontend, review kode, sampai pengujian. Namun, hasilnya sering tidak optimal: database tanpa indeks, endpoint rawan celah, frontend mengabaikan error, dan pengujian seadanya.
Solusinya: gunakan agen khusus yang masing-masing punya fokus dan checklist sendiri. Arsitek Backend memikirkan skala dan desain, Pengoptimal Basis Data mendeteksi kekurangan indeks, Peninjau Kode mencari kerentanan, Pemeriksa Realitas meminta bukti konkret sebelum rilis.
Tutorial ini akan memandu Anda menyiapkan 5 agen dari koleksi The Agency dan menjalankan workflow pengembangan API lengkap. Anda juga akan mengintegrasikan dengan Apidog untuk validasi, pengujian, dan dokumentasi API berbasis OpenAPI.
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:
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 output ini untuk digunakan pada langkah 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 (Contoh):
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
typescript
const query = 'SELECT * FROM products WHERE name LIKE $1';
await db.query(query, [%${search}%]);
typescript
Masalah Tinggi
2. Perlindungan CSRF Hilang
Lokasi: src/index.ts
Masalah: 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:8
Masalah: 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:
## 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 seluruh perbaikan sebelum lanjut ke tahap selanjutnya.
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 semua masalah pemblokir, lalu 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)
Untuk mempercepat workflow, jalankan agen secara paralel di beberapa terminal:
# 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, workflow bisa selesai 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 connection pool
- Konfigurasi variabel lingkungan untuk rahasia
- Tambahkan endpoint health check
- Siapkan monitoring (Prometheus, Grafana)
Perluas workflow:
- Tambahkan agen Benchmarker Kinerja untuk load testing
- Tambahkan agen Penulis Teknis untuk dokumentasi
- Tambahkan agen Automator DevOps untuk pipeline CI/CD
Gunakan kembali pola:
- Simpan prompt sebagai template
- Skrip alur kerja untuk chaining sesi agen
- Bagikan ke tim Anda
Lima agen khusus. Satu API lengkap. Tanpa saran generik.
Setiap agen punya checklist dan domain jelas. Hasil lebih presisi dan bisa diulang.
Saatnya Anda mencoba: pilih proyek Anda, aktifkan agen, selesaikan lebih cepat.
Poin-Poin Penting
- Agen khusus lebih unggul dari asisten generik — Setiap agen punya keahlian, checklist, dan output spesifik
- Alur sekuensial menjamin kualitas — Arsitek Backend → Pengoptimal Basis Data → Pengembang Frontend → Peninjau Kode → Pemeriksa Realitas
- Validasi berbasis bukti mencegah bug — Pemeriksa Realitas butuh screenshot, grep, dan metrik sebelum status LULUS
- Eksekusi paralel menghemat waktu — Empat terminal sekaligus, workflow selesai 2-4 jam
- Prompt disimpan sebagai template — Gunakan aktivasi agen yang sama di berbagai proyek
Pertanyaan Umum
Apa itu agen AI untuk pengembang?
Agen AI adalah asisten AI khusus dengan keahlian domain. Berbeda dari chatbot generik, agen seperti Arsitek Backend atau Peninjau Kode punya checklist dan hasil yang konsisten.
Bagaimana cara instal agen dari The Agency?
Clone repo di github.com/msitarzewski/agency-agents, lalu copy 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 selalu meminta screenshot, hasil grep, dan metrik sebelum memberikan sertifikasi LULUS.
Bisakah saya menjalankan beberapa agen paralel?
Bisa. Buka beberapa terminal, aktifkan agen berbeda di tiap terminal, teruskan output dengan copy-paste atau gunakan memori MCP untuk otomatisasi serah terima.
Bagaimana cara meneruskan konteks antar agen?
Copy output dari satu agen dan paste ke agen berikutnya. Untuk otomatis, gunakan memori MCP agar hasil bisa diakses agen lain.
Bagaimana jika agen mengatakan PERLU PERBAIKAN?
Perbaiki masalah pemblokir yang ditemukan agen, lalu jalankan ulang agen tersebut. Pemeriksa Realitas akan menyebutkan detail apa yang harus diperbaiki sebelum status LULUS.
Apakah lima agen ini wajib untuk semua proyek?
Tidak. Mulai dari Arsitek Backend dan Peninjau Kode untuk API sederhana. Tambahkan Pengoptimal Basis Data untuk skema kompleks, Pengembang Frontend untuk UI, dan Pemeriksa Realitas untuk validasi akhir.
Top comments (0)