Tujuan Pembelajaran

Bisa menggunakan Cursor untuk coding
Bisa menggunakan GitHub Copilot
Mengerti perbedaan keduanya

Analogi

Diagram


      AI Editor:
├── Cursor: Chat + Edit + Generate (AI-first editor)
├── GitHub Copilot: Inline autocomplete (IDE plugin)
└── ChatGPT/Claude: Web interface (general purpose)

Cursor dan Copilot adalah dua pendekatan berbeda: Cursor adalah AI-first editor, Copilot adalah autocomplete super canggih

Penjelasan Konsep

Ada dua pendekatan utama menggunakan AI untuk coding: AI yang terintegrasi di editor (Cursor, Copilot) dan AI yang diakses via web (ChatGPT, Claude). Mari pelajari yang paling populer.

GitHub Copilot: Inline Autocomplete

Copilot adalah plugin untuk VS Code (dan editor lain) yang menampilkan suggestion kode saat kamu mengetik. Cara kerjanya:

Kamu mulai menulis kode atau komentar
Copilot menganalisis context (file saat ini, file terbuka, cursor position)
Copilot menampilkan suggestion sebagai gray text
Tekan Tab untuk menerima, atau lanjutkan mengetik untuk mengabaikan

Copilot sangat bagus untuk:

Boierplate code (loop, conditional, function structure)
Pattern yang umum (fetch API,

Event handler)

Comment-to-code (tulis komentar, Copilot generate kode)
Unit test generation

Cursor: AI-First Code Editor

Cursor adalah fork dari VS Code yang membangun AI sebagai first-class citizen.

Fitur utama:

Chat: Chat panel di sidebar untuk tanya jawab tentang kode
Cmd+K: Inline editing — pilih kode, tulis instruksi, AI edit langsung
Composer: Generate file/folder baru dari deskripsi
@ references: Referensi ke file, fungsi, atau documentation
Codebase understanding: AI mengerti seluruh codebase kamu

Cursor vs Copilot

Fitur	Copilot	Cursor
Autocomplete	Excellent	Good
Chat	Tidak ada	Built-in
Code editing	Inline	Chat + Inline
Context	File saat ini	Seluruh codebase
Price	$10/bulan	Free tier + Pro

Tips Menggunakan AI Editor

Jangan terima suggestion tanpa membaca — AI sering salah
Gunakan komentar deskriptif untuk guide AI
@-reference file atau fungsi untuk konteks yang lebih baik
Break down task — minta AI kerjakan satu hal pada satu waktu
Selalu test kode yang dihasilkan AI

Inti yang Perlu Dipahami

Bagian ini berfokus pada bisa menggunakan Cursor untuk coding., bisa menggunakan GitHub Copilot., dan mengerti perbedaan keduanya. Jangan terburu-buru menghafal istilahnya. Lebih penting untuk memahami peran setiap konsep dan kapan konsep itu muncul dalam pekerjaan web development.

Saat membaca Cursor & GitHub Copilot, gunakan tujuan belajar sebagai penanda arah. Kalau kamu sudah bisa menjelaskan tujuan itu dengan kata-katamu sendiri, berarti fondasinya mulai terbentuk.

Cara Membayangkannya

Cursor dan Copilot adalah dua pendekatan berbeda: Cursor adalah AI-first editor, Copilot adalah autocomplete super canggih. Analogi ini dipakai supaya konsep teknis tidak terasa melayang. Hubungkan setiap istilah dengan perannya: siapa yang meminta, siapa yang memproses, data apa yang berpindah, dan hasil apa yang diharapkan.

Kalau analoginya sudah terasa masuk akal, barulah lihat istilah teknisnya. Cara ini membuat materi lebih mudah dipahami daripada langsung menghafal definisi.

Saat Melihat Contoh Kode

Contoh kode pada chapter ini memakai bahasa markdown. Bacalah contoh kode sebagai ilustrasi alur, bukan sebagai bagian yang harus langsung dihafal. Cursor menggunakan @ untuk referensi file/fungsi — konteks yang lebih baik. Copilot menggunakan context dari file yang terbuka.

Perhatikan nama fungsi, urutan langkah, dan data yang berpindah. Biasanya tiga hal itu sudah cukup untuk memahami hubungan antara teori dan praktik.

Konteks dalam Perjalanan Belajar

Setiap konsep di platform ini dipilih karena dipakai di industri. Fokus pada pemahaman, bukan hafalan.

Kamu sudah di bagian lanjutan. Mulai pikirkan bagaimana konsep ini dipakai di dunia kerja — bukan hanya untuk belajar, tapi untuk membangun produk nyata.

Gunakan pertanyaan reflektif dan prompt AI di akhir chapter sebagai latihan aktif. Membaca saja tidak cukup — kamu perlu menjelaskan ulang dengan kata-katamu sendiri.

Contoh Kode

markdown

# Cursor Cmd+K Workflow

## 1. Pilih kode yang mau diubah
## 2. Tekan Cmd+K (atau Ctrl+K)
## 3. Tulis instruksi:
    "Refactor ini jadi menggunakan early return pattern
     dan tambahkan type annotations untuk parameters"

## 4. AI akan menunjukkan diff — review perubahan
## 5. Accept (Cmd+Enter) atau Reject (Escape)

# Cursor Chat Workflow

## 1. Buka chat panel (Cmd+L)
## 2. Tanya dengan konteks:
    "@UserService Apa bug potensial di service ini?"
## 3. AI akan analisis dan berikan jawaban
## 4. Follow-up dengan perbaikan:
    "Fix bug nomor 2 dan generate unit test-nya"

# Copilot Inline Workflow

## 1. Tulis komentar deskriptif:
    // Fungsi untuk validasi email dengan regex RFC 5322
## 2. Copilot akan suggest implementasi
## 3. Tekan Tab untuk menerima
## 4. Review dan sesuaikan

Penjelasan Kode

Cursor menggunakan @ untuk referensi file/fungsi — konteks yang lebih baik. Copilot menggunakan context dari file yang terbuka.

Prompt AI

Install Cursor atau Copilot di editor-mu. Coba generate 3 fungsi berbeda dan review kualitas hasilnya.

Pertanyaan Reflektif

AI editor bisa 10x productivity — tapi juga bisa 10x bug kalau tidak di-review. Selalu baca kode yang dihasilkan.