Claude 17 Code: Panduan Lengkap Developer Indonesia — Dari Instalasi hingga CI/CD Otomatis

# Instalasi global (butuh Node.js 18+)
npm install -g @anthropic-ai/claude-code

# Verifikasi instalasi
claude --version

# Autentikasi
claude /login

# Mulai di proyek Anda
cd /path/to/your-project
claude

your-project/
├── CLAUDE.md                    # Memory proyek (otomatis dibaca setiap sesi)
├── .claude/
│   ├── settings.json            # Hooks, permissions, environment vars
│   ├── settings.local.json      # Override personal (masukkan ke .gitignore)
│   ├── commands/                # Custom slash commands proyek
│   │   ├── review-pr.md
│   │   └── deploy-staging.md
│   └── agents/                  # Subagen spesialis (opsional)
│       └── security-reviewer.md
├── .mcp.json                    # Konfigurasi MCP servers
└── src/                         # Kode Anda

~/.claude/                       # Konfigurasi global (semua proyek)
├── CLAUDE.md                    # Instruksi berlaku untuk semua proyek
├── settings.json                # Preferensi global
└── commands/                    # Custom commands global

# Project: [Nama Proyek]

## Overview
Aplikasi e-commerce B2B dengan React frontend, Node.js/Express backend,
dan PostgreSQL database. Melayani ~500 merchant aktif.

## Tech Stack
- Frontend: React 18, TypeScript, Tailwind CSS v4, Zustand
- Backend: Node.js 20, Express 5, Prisma ORM
- Database: PostgreSQL 15 (via Supabase)
- Testing: Vitest + React Testing Library
- CI/CD: GitHub Actions → Vercel (frontend), Railway (backend)

## Architecture Decisions
- REST API (bukan GraphQL) untuk simplicity
- Server-side rendering TIDAK digunakan — pure SPA
- Semua API calls melalui /src/lib/api/ (jangan fetch langsung)
- State management: Zustand untuk global, React Query untuk server state

## Coding Standards
- TypeScript strict mode — WAJIB type semua parameter
- Functional components only — TIDAK class components
- Custom hooks di /src/hooks/ — prefix 'use'
- Test file: [component].test.tsx di direktori yang sama

## Key Commands
- `npm run dev` — start dev server (port 3000)
- `npm run test` — run all tests
- `npm run build` — production build
- `npm run db:migrate` — jalankan migrations

## PENTING: Jangan lakukan ini
- Jangan install package baru tanpa konfirmasi eksplisit
- Jangan modifikasi file di /database/migrations/ yang sudah dicommit
- Jangan menggunakan 'any' type di TypeScript
- Jangan commit langsung ke main — selalu buat branch

// .claude/settings.json
{
  "permissions": {
    "allow": [
      "Read",
      "Bash(npm run *)",
      "Bash(git status)",
      "Bash(git diff)",
      "Bash(git add *)",
      "Bash(git commit *)",
      "Write(src/**)",
      "Edit(src/**)"
    ],
    "ask": [
      "Bash(git push *)",
      "Bash(npm install *)"
    ],
    "deny": [
      "Read(./.env*)",
      "Read(./secrets/**)",
      "Bash(rm -rf *)",
      "Bash(sudo *)",
      "Bash(curl *)"
    ]
  }
}

Lihat @src/components/ProductCard.tsx dan @src/types/product.ts
Tambahkan support untuk variant produk (warna, ukuran)
Ikuti pattern yang sama seperti di @src/components/CartItem.tsx

# Tanpa thinking mode — Claude langsung eksekusi
> Refactor sistem autentikasi kami

# Dengan thinking mode — Claude merencanakan dulu
> Pikirkan secara mendalam sebelum melakukan apapun:
> Apa saja file yang terlibat dalam sistem autentikasi kita?
> Apa risiko dari perubahan ini?
> Bagaimana urutan perubahan yang aman?
> Baru setelah itu, implementasikan rencanamu.

[screenshot_figma_design.png]
Buat komponen React yang persis seperti design ini.
Gunakan Tailwind CSS dan pattern yang ada di src/components/ui/.

Sebelum kita lanjut, buat ringkasan di PROGRESS.md:
- Apa yang sudah selesai
- Keputusan teknis yang sudah dibuat
- Apa yang akan dikerjakan selanjutnya
Ini akan jadi panduan kalau kita perlu sesi baru.

.claude/commands/
├── review-pr.md          # Dipanggil dengan /review-pr
├── deploy-staging.md     # Dipanggil dengan /deploy-staging
├── fix-issue.md          # Dipanggil dengan /fix-issue 123
└── audit-security.md    # Dipanggil dengan /audit-security

# .claude/commands/review-pr.md

Review pull request saat ini dengan standar tim kami.

Langkah-langkah:
1. Jalankan `git diff main` untuk melihat semua perubahan
2. Periksa setiap file yang diubah untuk:
   - Kepatuhan terhadap coding standards di CLAUDE.md
   - Potensi bug atau edge case yang tidak ditangani
   - Test coverage — apakah semua perubahan ter-cover?
   - Performance implications
   - Security vulnerabilities (injection, XSS, auth bypass)
3. Periksa BREAKING CHANGES — ada perubahan API yang tidak backward compatible?
4. Hasilkan laporan review dengan format:
   ## Summary
   ## Critical Issues (harus diperbaiki)
   ## Suggestions (nice-to-have)
   ## Approved (hal-hal yang sudah bagus)

# .claude/commands/fix-issue.md

Implementasikan fix untuk GitHub issue #$ARGUMENTS.

Langkah-langkah:
1. Jalankan: gh issue view $ARGUMENTS untuk membaca deskripsi issue
2. Identifikasi file yang relevan menggunakan Grep dan Glob
3. Buat branch baru: git checkout -b fix/issue-$ARGUMENTS
4. Implementasikan fix dengan mempertahankan semua coding standards
5. Tulis atau update test yang relevan
6. Jalankan npm test — pastikan semua tests pass
7. Commit dengan format: 'fix: resolve issue #$ARGUMENTS - [deskripsi singkat]'
8. Buat pull request menggunakan gh pr create

# GitHub — membaca issues, membuat PR, review kode
claude mcp add github -- npx @modelcontextprotocol/server-github

# PostgreSQL — query database langsung
claude mcp add postgres -- npx @modelcontextprotocol/server-postgres

# Playwright — browser automation dan testing
claude mcp add playwright -- npx @modelcontextprotocol/server-playwright

# Slack — membaca dan menulis pesan
claude mcp add slack --env SLACK_BOT_TOKEN=xoxb-... -- npx @modelcontextprotocol/server-slack

// .mcp.json — commit ke git (TANPA credentials hardcoded)
{
  "mcpServers": {
    "github": {
      "command": "npx",
      "args": ["@modelcontextprotocol/server-github"],
      "env": {
        "GITHUB_PERSONAL_ACCESS_TOKEN": "${GITHUB_TOKEN}"
      }
    },
    "jira": {
      "command": "npx",
      "args": ["@kn-mcp/jira"],
      "env": {
        "JIRA_URL": "https://yourcompany.atlassian.net",
        "JIRA_USERNAME": "${JIRA_EMAIL}",
        "JIRA_API_TOKEN": "${JIRA_TOKEN}"
      }
    },
    "playwright": {
      "command": "npx",
      "args": ["@modelcontextprotocol/server-playwright"]
    }
  }
}

# Setelah MCP GitHub dan Jira terinstal:
> Ambil tiket PROJ-1247 dari Jira.
> Baca acceptance criteria-nya.
> Implementasikan fitur tersebut mengikuti standar di CLAUDE.md.
> Setelah selesai, buat PR di GitHub dengan deskripsi yang mereferensikan PROJ-1247.
> Update status tiket di Jira menjadi 'In Review'.

# Claude Code akan:
# 1. mcp__jira__get_issue('PROJ-1247')
# 2. Baca acceptance criteria
# 3. Implementasikan fitur
# 4. mcp__github__create_pull_request(...)
# 5. mcp__jira__update_issue('PROJ-1247', status='In Review')

# Testing visual regression:
> Buka http://localhost:3000 di browser.
> Screenshot halaman product listing.
> Klik product pertama.
> Screenshot halaman detail product.
> Bandingkan dengan design di figma-design.png yang ada di folder assets/.
> Laporkan perbedaan yang signifikan.

# .github/workflows/claude-review.yml
name: Claude Code Review

on:
  pull_request:
    types: [opened, synchronize]
    branches: [main, develop]

jobs:
  review:
    runs-on: ubuntu-latest
    permissions:
      contents: read
      pull-requests: write

    steps:
      - name: Checkout
        uses: actions/checkout@v4
        with:
          fetch-depth: 0

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '20'

      - name: Install Claude Code
        run: npm install -g @anthropic-ai/claude-code

      - name: Run Code Review
        env:
          ANTHROPIC_API_KEY: ${{ secrets.ANTHROPIC_API_KEY }}
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
        run: |
          claude -p "$(cat .claude/commands/review-pr.md)" \
            --output-format json > review-result.json

      - name: Post Review Comment
        uses: actions/github-script@v7
        with:
          script: |
            const result = require('./review-result.json');
            await github.rest.pulls.createReview({
              owner: context.repo.owner,
              repo: context.repo.repo,
              pull_number: context.payload.pull_request.number,
              body: result.review,
              event: result.hasBlockers ? 'REQUEST_CHANGES' : 'COMMENT'
            });

# .github/workflows/claude-parallel-review.yml
jobs:
  security-review:
    runs-on: ubuntu-latest
    steps:
      - run: claude -p "$(cat .claude/reviewers/security.md)" > security.json

  performance-review:
    runs-on: ubuntu-latest
    steps:
      - run: claude -p "$(cat .claude/reviewers/performance.md)" > perf.json

  test-coverage-review:
    runs-on: ubuntu-latest
    steps:
      - run: claude -p "$(cat .claude/reviewers/tests.md)" > tests.json

  aggregate-results:
    needs: [security-review, performance-review, test-coverage-review]
    runs-on: ubuntu-latest
    steps:
      - run: claude -p "Gabungkan review ini menjadi laporan tunggal..."

# Headless mode — cocok untuk CI/CD
claude -p "Prompt Anda di sini"

# Analisis log untuk anomali
tail -500 app.log | claude -p "Identifikasi error patterns dan buat laporan"

# Security scan sebelum deployment
git diff main --name-only | claude -p "Review file yang berubah untuk security vulnerabilities"

# Weekly dependency audit
claude -p "Jalankan npm audit, analisis hasilnya, buat PR untuk memperbaiki vulnerabilities kritis"

// .claude/settings.json
{
  "hooks": {
    "PreToolUse": [
      {
        "matcher": "Bash",
        "hooks": [
          {
            "type": "command",
            "command": "echo '[LOG] Bash command akan dieksekusi' >> claude-audit.log"
          }
        ]
      }
    ],
    "PostToolUse": [
      {
        "matcher": "Edit",
        "hooks": [
          {
            "type": "command",
            "command": "npm run format --write"
          }
        ]
      }
    ],
    "Stop": [
      {
        "matcher": "",
        "hooks": [
          {
            "type": "command",
            "command": "curl -X POST $SLACK_WEBHOOK_URL -d '{\"text\": \"Claude Code selesai bekerja\"}'"
          }
        ]
      }
    ]
  }
}