Tutorial AI Coding Assistant: Claude, ChatGPT, dan Cursor untuk Developer - Nayaka Yoga Pradipta

Tutorial AI Coding Assistant: Claude, ChatGPT, dan Cursor untuk Developer

Senin, 22 Des 2025

AI udah mengubah cara kita ngoding. Bukan berarti developer bakal digantikan, tapi developer yang pakai AI bakal lebih produktif dari yang nggak.

Dalam tutorial ini, saya bakal share pengalaman pakai berbagai AI tools untuk coding, mulai dari ChatGPT, Claude, Cursor, sampai GitHub Copilot.

Kenapa Pakai AI untuk Coding?

AI bisa bantu kamu:

  • ✅ Debug code lebih cepat
  • ✅ Generate boilerplate code
  • ✅ Refactor code jadi lebih clean
  • ✅ Nulis dokumentasi
  • ✅ Belajar teknologi baru
  • ✅ Code review

1. ChatGPT untuk Coding

ChatGPT untuk Coding

ChatGPT (terutama GPT-4) cocok untuk:

  • Menjelaskan konsep programming
  • Debugging error message
  • Generate snippet code
  • Brainstorming solusi

Cara Pakai ChatGPT untuk Debug

Prompt yang kurang efektif:
"Code saya error, tolong fix"

Prompt yang efektif:
"Saya dapat error 'TypeError: Cannot read property 'map' of undefined' 
di React component ini:

[paste code]

Data yang saya fetch dari API formatnya seperti ini:
[paste sample data]

Apa penyebabnya dan bagaimana solusinya?"

Contoh Prompt untuk Generate Code

"Buatkan React hook untuk fetch data dengan fitur:
- Loading state
- Error handling
- Retry mechanism
- Cancel request saat unmount

Pakai TypeScript dan axios."

ChatGPT akan generate code lengkap dengan penjelasan.

2. Claude AI untuk Coding

Claude AI untuk Debug

Claude (terutama Claude 3.5 Sonnet) punya kelebihan:

  • Context window besar (200K tokens) - bisa paste seluruh codebase
  • Lebih baik dalam reasoning complex problem
  • Jarang “hallucinate” dibanding model lain
  • Bisa upload file langsung

Kapan Pakai Claude?

Claude cocok untuk:

  • Refactoring code besar
  • Analisis arsitektur
  • Review pull request
  • Debugging complex issue

Contoh: Refactor Code dengan Claude

"Tolong refactor React component ini agar:
1. Pisahkan logic ke custom hooks
2. Implementasi proper error boundary
3. Optimasi re-render dengan useMemo/useCallback
4. Tambahkan TypeScript types

Jelaskan setiap perubahan yang kamu buat.

[paste component code - bisa sangat panjang karena context window besar]"

Tips Pakai Claude

  1. Manfaatkan context window - paste lebih banyak context
  2. Minta penjelasan - Claude bagus dalam menjelaskan reasoning
  3. Iterasi - minta revisi jika hasil kurang sesuai

3. Cursor IDE - AI-Powered Code Editor

Cursor IDE

Cursor adalah VS Code fork dengan AI built-in. Ini game changer untuk produktivitas.

Fitur Utama Cursor

FiturFungsi
Cmd+KEdit code dengan AI inline
Cmd+LChat dengan AI tentang codebase
TabAutocomplete dengan AI
@codebaseTanya tentang seluruh project

Contoh Penggunaan Cursor

Inline Edit (Cmd+K)

Select code, tekan Cmd+K, lalu ketik:

"Tambahkan error handling dan loading state"

Cursor akan edit code langsung di editor.

Chat dengan Codebase (Cmd+L)

@codebase bagaimana flow authentication di project ini?

Cursor akan analisis seluruh codebase dan jelaskan.

Setup Cursor

  1. Download di cursor.com
  2. Import settings dari VS Code
  3. Login dan pilih model (Claude atau GPT-4)
  4. Mulai coding!

4. GitHub Copilot

GitHub Copilot terintegrasi langsung di VS Code/IDE lain.

Kelebihan Copilot

  • Autocomplete yang sangat cepat
  • Terintegrasi dengan GitHub
  • Bisa generate dari comment

Contoh Pakai Copilot

Tulis comment, Copilot generate code:

// Function to validate email format and check if domain exists
// Returns { valid: boolean, error?: string }

Copilot akan suggest implementasi lengkap.

Praktik: Cara Debug dengan AI

Step 1: Kumpulkan Informasi

Sebelum tanya AI, siapkan:

  • Error message lengkap
  • Code yang bermasalah
  • Apa yang sudah dicoba
  • Expected vs actual behavior

Step 2: Struktur Prompt

## Problem
[Jelaskan masalah singkat]

## Error Message

[paste error]


## Relevant Code
```javascript
[paste code]

What I’ve Tried

  • [list apa yang sudah dicoba]

Expected Behavior

[apa yang seharusnya terjadi]


### Step 3: Iterasi

Jika solusi pertama nggak work, kasih feedback:

“Solusi itu nggak work karena [alasan]. Error baru yang muncul: [error baru]”


## Praktik: Generate Boilerplate Code

### Contoh: API Route Next.js

“Generate Next.js API route untuk:

  • CRUD operations untuk ‘posts’
  • Pakai Prisma sebagai ORM
  • Include validation dengan Zod
  • Error handling yang proper
  • TypeScript

Database schema:

  • id: string (uuid)
  • title: string
  • content: string
  • published: boolean
  • createdAt: DateTime”

AI akan generate boilerplate lengkap yang tinggal di-customize.

## Praktik: Menulis Dokumentasi dengan AI

### Generate README

“Buatkan README.md untuk project ini dengan struktur:

  • Project description
  • Features
  • Tech stack
  • Installation
  • Usage
  • API documentation
  • Contributing guidelines

Berdasarkan codebase berikut: [paste package.json dan file utama]”


### Generate JSDoc/TSDoc

“Tambahkan JSDoc comments untuk semua function di file ini. Include @param, @returns, @throws, dan @example.

[paste code]”


## Tips Prompting Efektif untuk Coding

### 1. Be Specific

❌ “Buatkan form” ✅ “Buatkan React form untuk registrasi dengan field: name, email, password. Pakai React Hook Form + Zod validation. Style dengan Tailwind CSS.”


### 2. Kasih Context

❌ “Fix error ini” ✅ “Fix error ini. Saya pakai Next.js 14 dengan App Router, TypeScript, dan Prisma. Error terjadi saat fetch data di Server Component.”


### 3. Specify Format

“Jawab dalam format:

  1. Penjelasan masalah
  2. Solusi step-by-step
  3. Code yang sudah diperbaiki
  4. Penjelasan kenapa solusi ini work”

### 4. Minta Alternatif

“Kasih 3 cara berbeda untuk implementasi ini, dengan pros/cons masing-masing.”


## Kapan Pakai AI vs Kapan Tidak

### ✅ Pakai AI untuk:

- Boilerplate code
- Debugging error yang jelas
- Refactoring code yang sudah work
- Belajar konsep baru
- Dokumentasi
- Code review awal
- Regex dan query kompleks

### ❌ Jangan terlalu rely on AI untuk:

- Logic bisnis yang sangat spesifik
- Security-critical code (selalu review manual)
- Performance optimization (perlu profiling nyata)
- Arsitektur system besar (AI kurang context)
- Code yang perlu deep domain knowledge

### Tips Penting

1. **Selalu review code dari AI** - jangan copy-paste blindly
2. **Test hasilnya** - AI bisa generate code yang "looks right" tapi buggy
3. **Pahami code-nya** - jangan pakai code yang nggak kamu mengerti
4. **AI sebagai assistant, bukan replacement** - kamu tetap yang decide

## Rekomendasi Tools

| Use Case | Tool Terbaik |
|----------|--------------|
| Day-to-day coding | Cursor |
| Complex debugging | Claude |
| Quick questions | ChatGPT |
| Autocomplete | GitHub Copilot |
| Code review | Claude |
| Learning | ChatGPT / Claude |

## Kesimpulan

AI tools udah jadi bagian essential dari workflow developer modern. Yang penting:

1. **Pilih tool yang tepat** untuk task yang tepat
2. **Tulis prompt yang jelas** dan specific
3. **Selalu review dan test** output dari AI
4. **Pakai AI untuk boost productivity**, bukan menggantikan thinking

Mulai dengan satu tool dulu (rekomendasiku: **Cursor**), kuasai, baru explore yang lain.

Selamat ngoding dengan AI! 🚀

---

Ada pertanyaan atau mau share pengalaman pakai AI tools? Reach out di Twitter [@nayakayp](https://x.com/nayakayp)!