Claude Code: Pengenalan Praktis

Mari kita masuk ke bagian yang paling menarik: menggunakan AI untuk menulis kode untuk Anda.

Anda mungkin berpikir: Saya tidak tahu apa-apa tentang kode, apa hubungannya ini dengan saya?

Justru sebaliknya, justru karena Anda tidak tahu kode, alat ini semakin cocok untuk Anda.

Ingat teman yang menghabiskan 50 dolar untuk membuat halaman web? Dengan Claude Code, itu tidak akan pernah terjadi lagi. Anda hanya perlu memberi tahu AI dalam bahasa biasa apa yang Anda inginkan, dan AI akan menulis program lengkap untuk Anda.

Hari ini kami memperkenalkan Claude Code, asisten pemrograman AI yang berjalan di terminal Anda. Anda cukup memberi tahu apa yang Anda inginkan dalam bahasa biasa, dan ia akan menulis seluruh program untuk Anda.

Mengapa Menggunakan Alat Terminal daripada IDE?

Apa itu IDE?

IDE = Integrated Development Environment (Lingkungan Pengembangan Terpadu)

Sederhananya, IDE adalah perangkat lunak yang digunakan programmer untuk menulis kode, misalnya:

• VS Code
• Cursor
• PyCharm
• WebStorm

Alat-alat ini memiliki antarmuka yang rumit dan fitur yang kuat, tetapi bagi seseorang yang tidak tahu apa-apa tentang kode, alat-alat ini lebih menjadi beban.

Mengapa Saya Merekomendasikan Terminal

Alasan 1: Antarmuka sederhana

• IDE: Penuh dengan tombol, menu, bilah sisi, bilah status… membingungkan saat pertama kali dilihat
• Terminal: Hanya kotak hitam – ketik perintah, dapatkan hasil, bersih dan langsung

Alasan 2: Tidak perlu mengedit kode secara manual

Jika Anda sama sekali tidak mengerti kode, kode yang ditampilkan di IDE terlihat seperti omong kosong. Anda tidak bisa membacanya dan tidak tahu cara mengubahnya.

Jika semuanya ditulis oleh AI, mengapa repot-repot melihat kode?

Claude Code di terminal akan:

• Membuat file secara otomatis
• Menulis kode secara otomatis
• Memodifikasi kode secara otomatis
• Menjalankan tes secara otomatis

Anda hanya memberi tahu apa yang Anda inginkan, dan ia menangani sisanya.

Alasan 3: Perangkat lunak yang lebih ringan

• Cursor/VS Code: Ratusan MB, ditambah Anda perlu menginstal berbagai plugin
• Terminal: Bawaan sistem, tidak perlu instalasi tambahan

Kesimpulan: Untuk orang dengan pengalaman coding nol yang ingin AI membantu mereka membuat sesuatu, terminal + Claude Code adalah kombinasi paling sederhana dan paling langsung.

Dasar-dasar Terminal: Cara Membuka Folder Proyek Anda

Sebelum menggunakan Claude Code, Anda perlu mempelajari satu operasi dasar: membuka folder proyek Anda di terminal.

Pengguna Mac

Metode 1: Klik kanan untuk membuka (Direkomendasikan)

1. Temukan folder proyek Anda di Finder
2. Klik kanan folder (atau ketuk dua jari di trackpad)
3. Pilih “New Terminal at Folder”

Metode 2: Option + Klik kanan untuk mendapatkan jalur

1. Temukan folder proyek Anda di Finder
2. Tahan tombol Option dan klik kanan folder
3. Pilih “Copy ‘foldername’ as Pathname”
4. Buka Terminal (cari “Terminal” di Launchpad)
5. Ketik cd (perhatikan spasi setelah cd)
6. Tekan Command + V untuk menempelkan jalur
7. Tekan Enter

Contoh:

cd /Users/yourname/Desktop/my-project

Metode 3: Seret dan lepas

1. Buka Terminal
2. Ketik cd (perhatikan spasi)
3. Seret folder dari Finder langsung ke jendela Terminal
4. Jalur akan terisi secara otomatis; tekan Enter

Pengguna Windows

1. Temukan folder proyek Anda di File Explorer
2. Ketik cmd atau powershell di bilah alamat dan tekan Enter
3. Baris perintah akan terbuka langsung di folder tersebut

Atau:

1. Klik kanan folder
2. Pilih “Open in Terminal” (Windows 11)

Apa itu Claude Code?

Dalam Satu Kalimat

Claude Code = Asisten pemrograman AI yang berjalan di terminal Anda

Ini adalah alat baris perintah resmi dari Anthropic (perusahaan di balik Claude). Anda berbicara dengannya di terminal, dan ia dapat membantu Anda:

• Membuat proyek baru
• Menulis kode
• Memodifikasi kode
• Memperbaiki bug
• Menjelaskan kode
• Menjalankan perintah

Apa Bedanya dengan Claude di Web?

Perbedaan utama: Versi web hanya bisa “berbicara”, Claude Code bisa “melakukan”.

Cara Menginstal Claude Code

Prasyarat

1. Node.js: Claude Code membutuhkan Node.js
   • Unduh: https://nodejs.org
   • Pilih versi LTS (Long Term Support)
   • Setelah instalasi, verifikasi dengan node -v di terminal

2. Lingkungan jaringan: Anda perlu akses ke API Claude (mungkin memerlukan VPN)

Langkah Instalasi

Buka terminal Anda dan jalankan:

npm install -g @anthropic-ai/claude-code

Tunggu hingga instalasi selesai. Jika Anda melihat output seperti ini, itu berhasil:

added 1 package in 2s

Verifikasi instalasi:

claude --version

Jika nomor versi ditampilkan, instalasi berhasil.

Beberapa Cara Menggunakannya

Claude Code mendukung beberapa cara untuk mengakses kemampuan AI. Pilih yang sesuai dengan Anda.

Metode 1: Beli Keanggotaan Claude

Ini adalah cara paling sederhana dan paling langsung.

Tingkat Keanggotaan Claude:

Pengaturan:

1. Setelah membeli keanggotaan Claude, buka terminal
2. Jalankan claude untuk memulai
3. Ikuti petunjuk untuk masuk ke akun Claude Anda
4. Setelah masuk, Anda dapat mulai menggunakannya

Metode 2: Gunakan API Model Lain

Jika Anda tidak ingin membeli keanggotaan Claude, Anda dapat menggunakan API model lain untuk menggerakkan Claude Code.

Model yang didukung:

• DeepSeek
• Seri OpenAI GPT
• API lain yang kompatibel dengan format OpenAI

2.1 Konfigurasi melalui Variabel Lingkungan (Contoh DeepSeek)

API DeepSeek kompatibel dengan format Anthropic dan dapat digunakan sebagai pengganti langsung.

Pengaturan Mac/Linux:

Jalankan perintah berikut di terminal (sementara – akan hilang saat terminal ditutup):

export ANTHROPIC_BASE_URL=https://api.deepseek.com/anthropic
export ANTHROPIC_AUTH_TOKEN=${DEEPSEEK_API_KEY}
export API_TIMEOUT_MS=600000
export ANTHROPIC_MODEL=deepseek-chat
export ANTHROPIC_SMALL_FAST_MODEL=deepseek-chat
export CLAUDE_CODE_DISABLE_NONESSENTIAL_TRAFFIC=1

Kemudian cukup jalankan claude untuk memulai.

Pengaturan Windows (PowerShell):

$env:ANTHROPIC_BASE_URL="https://api.deepseek.com"
$env:ANTHROPIC_AUTH_TOKEN="Your DeepSeek API Key"

Kemudian cukup jalankan claude untuk memulai.

Catatan: Metode ini bersifat sementara; pengaturan akan hilang saat terminal ditutup. Untuk konfigurasi permanen, gunakan metode settings.json di bawah.

Referensi: https://api-docs.deepseek.com/guides/anthropic_api

2.2 Konfigurasi melalui settings.json (Direkomendasikan)

Metode ini lebih nyaman – setelah dikonfigurasi, Claude Code akan secara otomatis menggunakan pengaturan ini setiap kali Anda memulainya.

Langkah Konfigurasi:

1. Temukan folder konfigurasi Claude Code:

   • Mac/Linux: ~/.claude/
   • Windows: %USERPROFILE%\.claude\

2. Buat atau edit file settings.json (contoh):

{
  "env": {
    "ANTHROPIC_BASE_URL": "https://api.deepseek.com",
    "ANTHROPIC_AUTH_TOKEN": "Your DeepSeek API Key"
  }
}

3. Simpan file dan mulai ulang Claude Code

Tips: Jika folder .claude tidak ada, jalankan perintah claude sekali – folder akan dibuat secara otomatis.

Cara Memulai Claude Code di Terminal

Memulai Dasar

1. Buka terminal
2. Gunakan perintah cd untuk menavigasi ke folder proyek Anda
3. Ketik claude dan tekan Enter

cd /path/to/your/project
claude

Claude Code akan mulai, dan Anda akan melihat antarmuka interaktif di mana Anda dapat mulai mengetik permintaan Anda.

Perintah dan Konsep Umum

Perintah Umum di Claude Code

Mode Rencana

Mode Rencana = Biarkan Claude merencanakan terlebih dahulu, lalu bertindak

Secara default, Claude langsung mulai menulis kode. Namun terkadang Anda ingin ia berpikir matang-matang sebelum bertindak – saat itulah Anda mengaktifkan Mode Rencana.

Bagaimana cara beralih?

Tekan Shift + Tab untuk beralih di antara tiga mode:

Kapan menggunakan Mode Rencana?

• Proyeknya rumit dan Anda ingin Claude menjelaskan pendekatannya terlebih dahulu
• Anda tidak yakin bagaimana Claude akan membuat perubahan dan ingin melihat rencananya
• Anda ingin kontrol yang lebih tepat atas perilaku Claude

Terima Suntingan

Terima Suntingan = Apakah secara otomatis menyetujui modifikasi Claude

Ketika Claude ingin membuat atau memodifikasi file, biasanya ia meminta konfirmasi Anda.

Bagaimana cara beralih?

Saat Anda menekan Shift + Tab untuk mengubah mode, Anda akan melihat:

• Accept edits: off – Setiap modifikasi memerlukan konfirmasi manual Anda
• Accept edits: on – Semua modifikasi diterima secara otomatis tanpa diminta

Rekomendasi:

• Pemula sebaiknya tetap mematikannya sehingga Anda dapat melihat apa yang dilakukan Claude di setiap langkah
• Setelah Anda terbiasa, nyalakan untuk alur kerja yang lebih lancar

Apa itu resume?

resume = Melanjutkan percakapan sebelumnya

Setelah Anda menutup terminal atau keluar dari Claude Code, Anda dapat menggunakan flag --resume lain kali untuk melanjutkan percakapan sebelumnya:

claude --resume

Claude akan mengingat apa yang Anda bicarakan, sehingga Anda tidak perlu memulai dari awal.

Kapan menggunakan resume?

• Anda mengerjakan proyek kemarin dan ingin melanjutkannya hari ini
• Komputer Anda mati secara tidak terduga dan Anda ingin memulihkan kemajuan
• Anda ingin Claude melanjutkan dari tempat ia berhenti

Apa itu CLAUDE.md?

CLAUDE.md = File deskripsi proyek

Ini adalah file Markdown yang ditempatkan di direktori root proyek Anda. File ini memberi tahu Claude tentang latar belakang proyek.

Bagaimana cara membuatnya?

Pertama jalankan claude untuk memulai Claude Code, lalu masukkan /init.

claude

Di dalam Claude Code, ketik:

/init

Claude akan secara otomatis menganalisis proyek Anda dan menghasilkan file CLAUDE.md.

Untuk apa digunakan?

Saat Claude Code dimulai, ia membaca file ini untuk memahami:

• Apa yang dilakukan proyek
• Tumpukan teknologi apa yang digunakan
• Persyaratan khusus apa pun
• Preferensi gaya kode

Contoh CLAUDE.md:

# Project Description

This is a personal translation tool webpage.

## Tech Stack
- Pure HTML/CSS/JavaScript
- No frameworks

## Requirements
- Code comments in English
- Clean and modern interface
- Support dark mode

Dengan file ini, Anda tidak perlu menjelaskan latar belakang proyek setiap kali memulai Claude Code.

Skill

Skill = Perintah pintasan Claude Code

Skill adalah perintah yang telah ditetapkan yang memungkinkan Claude dengan cepat melakukan tugas-tugas tertentu.

Skill bawaan yang umum:

Bagaimana cara menggunakannya?

Cukup ketik perintah garis miring di Claude Code, misalnya:

/commit

Claude akan secara otomatis menganalisis perubahan kode Anda dan menghasilkan pesan commit yang sesuai.

Kami akan membahas Skill kustom secara detail di bab selanjutnya.

MCP (Model Context Protocol)

MCP = Menghubungkan Claude ke alat dan sumber data eksternal

MCP adalah protokol yang memungkinkan Claude Code terhubung ke berbagai layanan eksternal, seperti:

• Basis data
• Sistem file
• Layanan web
• Alat AI lainnya

Anggap saja seperti ini: MCP seperti menambahkan “plugin” ke Claude, memungkinkannya melakukan lebih banyak hal.

Contoh:

• Terhubung ke Obsidian sehingga Claude dapat membaca dan menulis catatan Anda secara langsung
• Terhubung ke browser sehingga Claude dapat mengotomatiskan halaman web
• Terhubung ke basis data sehingga Claude dapat menanyakan dan menganalisis data

Kami akan membahas konfigurasi dan penggunaan MCP secara detail di bab selanjutnya.

Praktik: Biarkan Claude Membangun Halaman Web Penerjemah

Setelah belajar banyak, mari kita praktikkan!

Kita akan membangun halaman web penerjemah lokal yang dapat menggunakan API Gemini untuk menerjemahkan.

Langkah 1: Buat Folder Proyek

1. Buat folder baru di desktop Anda (atau di mana pun Anda suka), misalnya bernama demo
2. Menggunakan metode yang telah Anda pelajari sebelumnya, buka folder ini di terminal

Langkah 2: Mulai Claude Code

claude

Langkah 3: Masukkan Permintaan Anda

Ketik yang berikut ini ke Claude Code (jangan ragu untuk menyalinnya):

Create a translation webpage tool with the following requirements:

1. Features:
   - Left input box for the source text, right side shows the translation result
   - Support Chinese-English translation
   - A "Translate" button
   - A "Clear" button
   - A "Copy Result" button

2. Interface:
   - Clean and modern design
   - Support dark/light mode toggle
   - Responsive design, works on mobile

3. Technical requirements:
   - Use only HTML, CSS, JavaScript, no frameworks
   - All code in a single HTML file
   - Call the Gemini API for translation

4. Settings (important):
   - A "Settings" button on the page
   - Clicking it opens a settings panel where you can configure:
     - API Key
     - API URL
     - Model Name
   - Save settings to the browser's localStorage, auto-load next time
   - The settings panel should have "Save" and "Cancel" buttons

5. Translation logic:
   - Auto-detect the input language
   - If Chinese, translate to English
   - If English, translate to Chinese

Please create this HTML file directly.

Langkah 4: Tunggu Claude Selesai

Claude akan secara otomatis:

1. Membuat file HTML
2. Menulis semua kode
3. Memberi tahu Anda di mana file tersebut berada
4. Setelah eksekusi, ia akan menanyakan apakah Anda setuju untuk membuat file – pilih 1 atau 2

Langkah 5: Jalankan dan Konfigurasi API

1. Klik dua kali file HTML yang dihasilkan untuk membukanya di browser Anda
2. Klik tombol “Settings” di halaman (biasanya ikon roda gigi)
3. Di panel pengaturan yang muncul, isi:
   • API Key: Kunci API yang Anda peroleh dari AI Studio
   • API URL: https://generativelanguage.googleapis.com/v1beta
   • Model Name: gemini-3-flash-preview
4. Klik “Save”

Pengaturan secara otomatis disimpan ke browser, sehingga Anda tidak perlu memasukkannya lagi lain kali.

Langkah 6: Mulai Menggunakannya

Sekarang Anda dapat:

1. Ketik bahasa Indonesia atau Inggris di kotak input kiri
2. Klik tombol “Translate”
3. Hasil terjemahan akan muncul di sebelah kanan
4. Klik “Copy Result” untuk menyalin teks yang diterjemahkan

Ringkasan

Apa yang Anda pelajari hari ini:

1. Mengapa menggunakan terminal daripada IDE: Untuk orang yang tidak tahu kode, terminal lebih sederhana dan lebih langsung
2. Cara membuka proyek di terminal: Klik kanan, seret dan lepas, atau gunakan perintah cd
3. Apa itu Claude Code: Asisten pemrograman AI di terminal yang dapat langsung memanipulasi file
4. Cara menginstal dan mengonfigurasinya: Instal melalui npm, mendukung keanggotaan resmi atau API pihak ketiga
5. Perintah umum: resume untuk melanjutkan percakapan, CLAUDE.md untuk deskripsi proyek
6. Praktik langsung: Biarkan Claude membangun halaman web penerjemah untuk Anda

Ide inti: Anda tidak perlu tahu cara menulis kode – Anda hanya perlu tahu cara mendeskripsikan apa yang Anda inginkan.