Latihan Hands-On

Fasa 1: Pengenalan & Setup

4 latihan praktikal untuk memasang alatan dan menjalankan prompt AI pertama anda. Selesaikan mengikut urutan.

4
Latihan
2
Tools Dipasang
2
Prompt AI
30–45
Minit

Progress

0 / 4 selesai 0%
1

🔧 Install Claude Code

Pasang Claude Code CLI dan sahkan ia berfungsi

🎯 Objektif

Memasang Claude Code melalui npm dan mengesahkan pemasangan berjaya dengan menjalankan command claude --version.

📝 Langkah-Langkah

  1. Buka terminal / command prompt (Command Prompt, PowerShell, atau Terminal).
  2. Pastikan Node.js sudah dipasang dengan menjalankan:
    node --version
  3. Jika versi 18 atau ke atas dipaparkan, teruskan. Jika tidak, muat turun dari nodejs.org dan pasang dahulu.
  4. Jalankan arahan berikut untuk memasang Claude Code:
    npm install -g @anthropic-ai/claude-code
  5. Tunggu proses pemasangan selesai (mungkin mengambil masa 1–2 minit bergantung pada kelajuan internet).
  6. Sahkan pemasangan dengan menjalankan:
    claude --version
  7. Anda sepatutnya melihat versi Claude Code dipaparkan (cth: 0.x.x).
  8. Seterusnya, setup API key anda. Dapatkan API key dari console.anthropic.com dan set sebagai environment variable:
    $env:ANTHROPIC_API_KEY = "sk-ant-xxxxxxxxxxxxx"

    Nota: Guna command yang sesuai untuk OS anda. Untuk PowerShell (Windows), guna $env:. Untuk bash/macOS, guna export.

✅ Hasil Yang Dijangka

✓ Berjaya

Command claude --version memaparkan nombor versi. Anda boleh taip claude untuk memulakan sesi interaktif.

2

🔧 Install Claude Codex (VS Code)

Pasang extension Codex dalam VS Code

🎯 Objektif

Memasang Claude Codex sebagai VS Code extension dan mengesahkan ia berfungsi dengan login ke akaun Anthropic.

📝 Langkah-Langkah

  1. Buka VS Code.
  2. Klik ikon Extensions di sidebar kiri (atau tekan Ctrl+Shift+X).
  3. Cari "Claude Codex" di marketplace.
  4. Klik Install pada extension pertama yang muncul (diterbitkan oleh Anthropic).
  5. Tunggu pemasangan selesai. Anda akan nampak ikon baru di sidebar VS Code.
  6. Klik ikon Claude Codex di sidebar untuk membuka panel.
  7. Klik Sign in dan log masuk dengan akaun Anthropic anda.
  8. Sahkan ikon di status bar (bawah VS Code) menunjukkan status "Connected" atau tanda hijau.

✅ Hasil Yang Dijangka

✓ Berjaya

Claude Codex kelihatan di sidebar VS Code dengan status "Connected". Anda boleh mula chat dengan Codex terus dari editor.

💡 Tips: Jika Codex tidak muncul di sidebar, cuba restart VS Code. Jika masih bermasalah, semak VS Code version — perlukan versi 1.85 atau lebih baru.
3

⌨️ Claude Code — Prompt Pertama

Guna Claude Code untuk hasilkan fail HTML Hello World

🎯 Objektif

Menjalankan prompt pertama dalam Claude Code — minta AI menulis satu fail HTML yang memaparkan "Hello World".

📝 Langkah-Langkah

  1. Buka terminal / command prompt.
  2. Navigasi ke folder projek anda (atau buat folder baru):
    mkdir latihan-fasa-1
    cd latihan-fasa-1
  3. Taip claude dan tekan Enter untuk memulakan sesi Claude Code.
  4. Tunggu sehingga Claude Code sedia (anda akan nampak prompt ▶).
  5. Taip prompt berikut:
    Bina satu fail HTML yang tulis "Hello World"
  6. Tekan Enter dan perhatikan Claude Code menghasilkan kod HTML.
  7. Claude Code akan menulis fail index.html dalam folder semasa.
  8. Buka fail tersebut dengan VS Code atau browser untuk lihat hasilnya.

✅ Hasil Yang Dijangka

✓ Berjaya

Fail index.html telah dicipta. Apabila dibuka di browser, ia memaparkan halaman putih dengan teks "Hello World".

💡 Tips: Jika Claude Code lambat respons, pastikan internet stabil. Untuk keluar dari sesi Claude Code, taip /exit atau tekan Ctrl+C.
4

⌨️ Claude Codex — Prompt Pertama

Guna Codex untuk prompt yang sama dan bandingkan hasil

🎯 Objektif

Menjalankan prompt yang sama dalam Claude Codex dan membandingkan output dengan Claude Code. Ini membantu anda memahami perbezaan gaya dan approach kedua-dua tool.

📝 Langkah-Langkah

  1. Buka VS Code.
  2. Klik ikon Claude Codex di sidebar (atau tekan Ctrl+Shift+I untuk membuka panel Codex).
  3. Pastikan folder projek yang sama dibuka di VS Code (latihan-fasa-1).
  4. Dalam ruang chat Codex, taip prompt yang sama:
    Bina satu fail HTML yang tulis "Hello World"
  5. Tekan Enter dan lihat bagaimana Codex menghasilkan kod.
  6. Perhatikan perbezaan: Codex mungkin tulis kod terus dalam editor atau cadangkan untuk mencipta fail baru.

✅ Hasil Yang Dijangka

✓ Berjaya

Codex menghasilkan fail HTML yang sama (atau serupa) dengan Claude Code. Anda boleh bandingkan kedua-dua output dan lihat perbezaan gaya atau approach.

🔍 Perbandingan

Selepas selesai kedua-dua latihan 3 dan 4, renungkan:

  • Tool mana yang lebih cepat?
  • Tool mana yang lebih mudah digunakan?
  • Adakah kod yang dihasilkan berbeza? Bagaimana?
  • Dalam situasi apa anda akan pilih Claude Code vs Codex?

💡 Tips Apabila Berlaku Masalah

Jika anda hadapi masalah semasa latihan, cuba langkah berikut sebelum minta bantuan.

🔧 Masalah: "claude: command not found"
  • Pastikan npm global modules ada dalam PATH.
  • Cuba restart terminal selepas install.
  • Alternatif: guna npx @anthropic-ai/claude-code terus tanpa install.
🔧 Masalah: "npm: command not found"
  • Node.js tak dipasang. Muat turun dari nodejs.org.
  • Selepas install, restart terminal.
  • Sahkan dengan node --version dan npm --version.
🔧 Masalah: Codex tidak muncul di VS Code
  • Restart VS Code.
  • Semak VS Code version (perlukan 1.85+).
  • Uninstall dan install semula extension.
  • Semak setting VS Code — mungkin extension disabled.
🔧 Masalah: API Key ditolak / invalid
  • Pergi ke console.anthropic.com dan semak API key masih aktif.
  • Generate API key baru jika perlu.
  • Pastikan key diset dengan betul: $env:ANTHROPIC_API_KEY = "sk-ant-..."
  • Jangan ada ruang atau petikan tambahan.

🎉 Tahniah!

Apabila anda telah menyelesaikan keempat-empat latihan di atas, anda sudah bersedia untuk Fasa 2. Jangan lupa tandakan checklist setup untuk mengesahkan semua persediaan lengkap.

✅ Semak Checklist ➡️ Terus ke Fasa 2 📖 Kembali ke Modul