Praktik AI Pair Programming dengan Claude Code

Kecepatan dan Kualitas Pengembangan Bersamaan dengan AI Pair Programming

Dengan memanfaatkan Claude Code sebagai “partner pair programming”, kamu bisa menulis kode berkualitas tinggi secara efisien bahkan sendirian. Di sini akan dijelaskan teknik AI pair programming yang praktis.

Alur Dasar AI Pair Programming

Pair programming memiliki 2 peran: “Driver” (orang yang menulis kode) dan “Navigator” (orang yang memikirkan arah). Dalam kolaborasi dengan Claude Code, kuncinya adalah beralih peran secara fleksibel.

// Pola 1: Kamu sebagai Navigator, Claude Code sebagai Driver
> Implementasikan middleware autentikasi pengguna.
> Proses dalam urutan: verifikasi JWT, pengecekan role, rate limiting.
> Dengan Express.js, kembalikan HTTP status yang sesuai saat error.

// Pola 2: Kamu sebagai Driver, Claude Code sebagai Navigator
> Saya akan menulis API registrasi pengguna, usulkan arah desainnya.
> Pikirkan dalam urutan: validasi, pengecekan duplikasi, hash password.

Pola Prompt yang Efektif

// 1. Pola berbagi context
> Proyek ini berarsitektur Next.js 14 + Prisma + PostgreSQL.
> Saat ini sedang mengembangkan fitur dashboard.
> Saya ingin membuat API agregasi data penjualan.
> Agar bisa agregasi per bulan, per hari, dan per kategori.

// 2. Pola implementasi bertahap
> Mulai dari desain data model dulu.
> -> Selanjutnya implementasi API Route.
> -> Lalu buat komponen chart di frontend.
> -> Terakhir tulis test-nya.

// 3. Pola permintaan review
> Perbaiki kode berikut. Tunjukkan poin perbaikan dalam bullet point,
> lalu output kode yang sudah di-refactor.

Sesi Live Debugging

> Debug error ini bersama-sama:
> TypeError: Cannot read properties of undefined (reading 'map')
> 
> Lokasi: src/components/UserList.tsx baris 34
> Situasi: Crash saat rendering setelah pengambilan data dari API
> Yang sudah dicoba: Menambahkan null check tapi tidak membaik

// Langkah debug yang disarankan Claude Code

// Step 1: Konfirmasi tipe data
console.log('API Response:', typeof data, JSON.stringify(data, null, 2));

// Step 2: Identifikasi masalah
// Periksa kasus di mana data.users menjadi undefined
function UserList({ data }: { data: ApiResponse }) {
  // ❌ Kode bermasalah
  // const users = data.users.map(u => ...);

  // ✅ Solusi 1: Optional chaining
  const users = data?.users?.map(u => formatUser(u)) ?? [];

  // ✅ Solusi 2: Early return (direkomendasikan)
  if (!data?.users) {
    return <EmptyState message="Pengguna tidak ditemukan" />;
  }

  return (
    <ul>
      {data.users.map(user => (
        <UserCard key={user.id} user={user} />
      ))}
    </ul>
  );
}

Diskusi Desain

> Saya ingin menambahkan fitur notifikasi real-time ke aplikasi ini.
> Bandingkan opsi berikut dan berikan rekomendasi:
> 1. WebSocket
> 2. Server-Sent Events (SSE)
> 3. Polling
> 
> Pertimbangan: 5000 pengguna, frekuensi notifikasi 10-20 per hari

Claude Code melakukan analisis perbandingan teknis dan menyajikan rekomendasi beserta alasannya.

Kombinasi dengan Test-Driven Development (TDD)

> Saya ingin mengikuti gaya TDD.
> Pertama tulis test untuk fitur "menambahkan produk ke keranjang belanja".
> Implementasi yang lolos test ditulis setelahnya.

// Step 1: Tulis test dulu (minta ke Claude Code)
describe('ShoppingCart', () => {
  it('bisa menambahkan produk', () => {
    const cart = new ShoppingCart();
    cart.addItem({ id: '1', name: 'T-shirt', price: 2000 });
    
    expect(cart.items).toHaveLength(1);
    expect(cart.total).toBe(2000);
  });

  it('menambahkan produk sama meningkatkan jumlah', () => {
    const cart = new ShoppingCart();
    cart.addItem({ id: '1', name: 'T-shirt', price: 2000 });
    cart.addItem({ id: '1', name: 'T-shirt', price: 2000 });
    
    expect(cart.items).toHaveLength(1);
    expect(cart.items[0].quantity).toBe(2);
    expect(cart.total).toBe(4000);
  });

  it('bisa menghapus produk', () => {
    const cart = new ShoppingCart();
    cart.addItem({ id: '1', name: 'T-shirt', price: 2000 });
    cart.removeItem('1');
    
    expect(cart.items).toHaveLength(0);
    expect(cart.total).toBe(0);
  });
});

// Step 2: Tulis implementasi yang lolos test (minta ke Claude Code)
class ShoppingCart {
  private _items: Map<string, CartItem> = new Map();

  get items(): CartItem[] {
    return Array.from(this._items.values());
  }

  get total(): number {
    return this.items.reduce((sum, item) => sum + item.price * item.quantity, 0);
  }

  addItem(product: Product): void {
    const existing = this._items.get(product.id);
    if (existing) {
      existing.quantity += 1;
    } else {
      this._items.set(product.id, { ...product, quantity: 1 });
    }
  }

  removeItem(productId: string): void {
    this._items.delete(productId);
  }
}

Pemanfaatan dalam Pengembangan Tim

// Definisikan aturan proyek di CLAUDE.md dan bagikan
> Tuliskan konvensi coding proyek di CLAUDE.md.
> - Aturan penamaan
> - Struktur file
> - Kebijakan error handling
> - Kebijakan testing

Dengan seluruh tim berbagi aturan yang sama melalui CLAUDE.md, kualitas output Claude Code menjadi seragam.

Ringkasan

AI pair programming memberikan efek maksimal saat dikombinasikan dengan code review. Dengan menggunakan Claude Code sebagai “teman diskusi pemikiran”, peningkatan kualitas desain dan kecepatan pengembangan bisa dicapai bersamaan. Manfaatkan Best Practices CLAUDE.md untuk meningkatkan produktivitas seluruh tim. Untuk analisis akademis AI pair programming, Google Research Blog juga bisa dijadikan referensi.