Peta Interface Claude.ai

Input Box — Fitur Lengkap

Kotak input bawah bukan sekadar tempat ketik teks. Ini semua yang bisa dilakukan:

Artifacts — Output Interaktif

Ketika Claude menghasilkan konten panjang atau kode, secara otomatis muncul panel Artifacts di sisi kanan. Ini bukan sekadar tampilan — kamu bisa:

• Preview langsung — kode HTML/React bisa di-render secara live
• Copy sekali klik — tombol copy ada di pojok kanan atas Artifact
• Download — beberapa jenis Artifact bisa langsung diunduh
• Edit & iterate — minta Claude revisi, Artifact langsung update

Keyboard Shortcuts Penting

Starred Chats & Riwayat

Claude menyimpan semua riwayat chat di sidebar. Tips organisasi:

• Rename chat — klik kanan atau ⋯ di samping nama chat → Rename. Beri nama deskriptif bukan "New Chat".
• Star chat — chat penting bisa di-pin di atas sidebar.
• Delete chat — hapus chat yang sudah tidak relevan untuk menjaga sidebar bersih.

Memory — Preferensi yang Diingat

Claude punya fitur Memory yang menyimpan fakta tentang kamu lintas semua percakapan. Untuk mengaktifkan:

📺 Video Tutorial

• 🎬 "Claude AI interface tour tutorial"
• 🎬 "cara pakai Claude AI untuk kerja"
• 🎬 "Claude Artifacts tutorial cara pakai"

Tiga Model Claude

Cara Ganti Model

Token: Cara Kerja

Token adalah unit terkecil yang diproses AI. Analoginya seperti "suku kata" untuk komputer.

Estimasi Token

• 1 token ≈ 4 karakter ≈ ¾ kata bahasa Inggris
• 1 halaman A4 teks ≈ 500–750 token
• 1 gambar resolusi sedang ≈ 200–500 token
• 1 file PDF 10 halaman ≈ 5.000–8.000 token

Cek Sisa Kuota

Settings → Usage — lihat berapa pesan yang sudah terpakai. Notifikasi otomatis muncul di chat kalau sudah mendekati limit.

5 Cara Hemat Token

📺 Video Tutorial

• 🎬 "perbedaan model Claude Sonnet Opus Haiku"
• 🎬 "AI token dan context window — apa itu?"
• 🎬 "Claude Pro vs free — worth it?"

Anatomi Prompt yang Baik

Prompt yang efektif punya 4 komponen. Tidak semua harus ada setiap saat, tapi semakin lengkap semakin baik hasilnya.

Teknik: Caveman Prompting

Buang semua basa-basi. Claude tidak butuh kata "tolong" atau "bisakah kamu". Langsung ke inti.

Teknik: Berikan Contoh (Few-shot)

Kalau mau output dengan format atau gaya tertentu, tunjukkan contohnya. Claude akan meniru pola itu.

Kategorikan feedback pelanggan berikut. Format seperti contoh ini:

Contoh:
Input: "Aplikasinya lambat banget waktu upload foto"
Output: [Bug/Performance] Upload foto

Sekarang kategorikan:
1. "Tombol checkout tidak bisa diklik di iPhone"
2. "Warna tampilannya kurang enak dilihat"

Teknik: Chain of Thought

Untuk masalah kompleks, minta Claude berpikir step by step sebelum menjawab.

Sebelum menjawab, tuliskan dulu langkah-langkah logis yang kamu
pakai untuk sampai ke kesimpulan.

Pertanyaan: Apakah strategi harga penetration pricing cocok
untuk produk SaaS B2B yang kami launch bulan depan?

Teknik: Iterasi via Edit

Jangan expect output sempurna di percobaan pertama. Workflow yang lebih efisien:

Teknik: Role Stacking

Untuk analisis komprehensif, minta Claude menjawab dari beberapa perspektif sekaligus.

Analisis proposal bisnis ini dari 3 perspektif berbeda:
1. CFO yang skeptis soal ROI
2. Head of Marketing yang fokus ke brand impact
3. Tech Lead yang khawatir soal implementasi

Berikan masing-masing perspektif dalam 2-3 paragraf singkat.

Prompt Template yang Sering Berguna

# Summarize dokumen
"Baca dokumen ini dan buat ringkasan eksekutif maks 200 kata.
Fokus pada: keputusan yang perlu diambil, risiko utama, next steps."

# Analisis data
"Data ini berisi [jelaskan]. Temukan 3 insight terpenting dan
buat rekomendasi aksi yang spesifik untuk masing-masing."

# Improve teks
"Perbaiki teks ini. Pertahankan semua fakta dan poin utama.
Tujuan: lebih jelas, lebih singkat, nada lebih profesional."

# Brainstorm
"Generate 10 ide untuk [tujuan]. Untuk setiap ide:
- 1 kalimat deskripsi
- Hambatan utama
- Estimasi effort (rendah/sedang/tinggi)"

📺 Video Tutorial

• 🎬 "cara prompt AI yang baik dan benar"
• 🎬 "prompt engineering tutorial pemula Indonesia"
• 🎬 "effective prompting tips Claude ChatGPT"

Apa itu Project?

Project adalah ruang kerja di Claude yang menyimpan tiga hal sekaligus: instruksi permanen (Custom Instructions), dokumen referensi (Project Knowledge), dan semua chat yang terkait tugas itu. Setiap chat baru dalam satu Project otomatis punya akses ke semuanya.

Buat Project Pertama

Template Custom Instructions

## Peranmu
Kamu adalah asisten senior untuk tim Marketing PT [nama perusahaan].

## Konteks bisnis
- Industri: [jelaskan]
- Target audience: [jelaskan]
- Produk utama: [jelaskan]
- Kompetitor utama: [jelaskan]

## Cara kerjamu
- Selalu gunakan Bahasa Indonesia profesional
- Jawaban harus actionable, bukan teori saja
- Format output default: heading H2, bullet points, bold untuk poin penting
- Kalau tidak yakin, tanya dulu jangan asumsi

## Yang tidak boleh dilakukan
- Jangan beri saran yang butuh budget besar tanpa diminta
- Jangan gunakan jargon terlalu teknis

Apa itu Skill?

Skill adalah instruksi spesifik yang mendefinisikan satu kemampuan Claude — cara dia berperilaku untuk jenis tugas tertentu. Skill dibuat sebagai file SKILL.md dan diunggah ke Project Knowledge.

Yang membuat Skill powerful: Claude auto-trigger skill berdasarkan konteks percakapan. Kamu tidak perlu mengetik nama skill-nya — cukup mulai dengan tugas yang sesuai.

Struktur SKILL.md

---
name: weekly-report-generator
description: >
  Aktif ketika diminta membuat weekly report, laporan mingguan,
  atau recap aktivitas periode tertentu
---

## Tugasmu
Generate weekly report dari data yang diberikan.

## Format output wajib
1. **Executive Summary** (3 kalimat, untuk atasan yang sibuk)
2. **Highlight Minggu Ini** (3-5 bullet points, achievements)
3. **Tantangan & Blocker** (apa yang menghambat, butuh bantuan apa)
4. **Rencana Minggu Depan** (maks 5 item dengan PIC dan deadline)

## Aturan
- Gunakan angka/data konkret, bukan kata-kata umum
- Kalau data tidak lengkap, tandai dengan [DATA DIBUTUHKAN]
- Nada: profesional tapi tidak kaku

Contoh Use Case Skills per Profesi

📺 Video Tutorial

• 🎬 "Claude Projects tutorial cara pakai"
• 🎬 "AI assistant untuk produktivitas kerja"
• 🎬 "cara pakai Claude untuk pekerjaan sehari-hari"

Install Claude Desktop

Fitur Cowork

Cowork adalah mode Claude Desktop di mana Claude bisa melihat layarmu, baca file lokal, dan menjalankan aksi di komputer — dengan izinmu. Muncul sebagai tab tersendiri di sidebar kiri aplikasi.

Setup Dispatch (Akses dari HP)

MCP — Model Context Protocol

MCP adalah protokol yang memungkinkan Claude terhubung langsung ke aplikasi dan layanan eksternal — tanpa harus upload file atau copy-paste data. Claude bisa read dan write ke sistem yang terhubung secara real-time.

Connector yang Tersedia

Cara Tambah Connector

📺 Video Tutorial

• 🎬 "Claude MCP connector tutorial"
• 🎬 "Claude connect Gmail Google Drive tutorial"
• 🎬 "Claude team workspace collaboration"

Kenapa Perlu GitHub?

Buat Akun GitHub

Buat Repository Pertama

Repository (repo) adalah folder project di GitHub. Setiap project punya repo sendiri.

Anatomi Halaman Repo

Edit File Langsung di GitHub

Untuk perubahan kecil, tidak perlu download ke komputer dulu:

📺 Video Tutorial

• 🎬 "cara daftar GitHub membuat repository pemula"
• 🎬 "GitHub tutorial lengkap Indonesia pemula"
• 🎬 "GitHub untuk non-programmer"

Konsep Dasar Git

Setup Git di Komputer (Sekali Saja)

# Install Git — cek dulu apakah sudah ada
git --version

# Kalau belum: download dari git-scm.com

# Konfigurasi identitas (nama & email harus sama dengan akun GitHub)
git config --global user.name "Nama Kamu"
git config --global user.email "email@kamu.com"

# Verifikasi
git config --list

Workflow Harian: Clone → Edit → Commit → Push

git clone https://github.com/username/repo-name.git

git commit -m "feat: tambah halaman kontak"

git push origin main

Bekerja dengan Branch

# Buat branch baru untuk fitur
git checkout -b nama-fitur

# Kerjakan perubahan, lalu commit seperti biasa

# Push branch ke GitHub
git push origin nama-fitur

# Setelah selesai, merge ke main via Pull Request di GitHub

Perintah Git Darurat

# Batalkan perubahan yang belum di-commit (hati-hati: tidak bisa undo!)
git checkout -- nama-file.txt

# Lihat riwayat commit
git log --oneline

# Ambil perubahan terbaru dari GitHub
git pull origin main

# Kalau terjadi conflict saat pull
# Edit file yang conflict (tandai <<<< HEAD ====),
# lalu commit ulang setelah resolve

📺 Video Tutorial

• 🎬 "git commit push tutorial pemula Indonesia"
• 🎬 "git workflow dasar untuk pemula"
• 🎬 "cara pakai git di terminal pertama kali"

Install GitHub Desktop

Clone Repo via Desktop

Commit & Push via Desktop

📺 Video Tutorial

• 🎬 "GitHub Desktop tutorial Indonesia cara pakai"
• 🎬 "GitHub Desktop vs terminal git"
• 🎬 "cara push code ke GitHub tanpa terminal"

Kenapa Vercel?

Vercel adalah platform hosting yang paling populer untuk web app modern. Deploy semudah connect repo GitHub — Vercel handle sisanya: build, CDN global, HTTPS otomatis, domain gratis .vercel.app.

Buat Akun Vercel

Deploy Project Pertama

Preview Deployments

Setiap push ke branch selain main (misalnya feature branch) otomatis mendapat URL preview tersendiri — nama-branch.nama-project.vercel.app. Berguna untuk review sebelum merge ke production.

📺 Video Tutorial

• 🎬 "cara deploy ke Vercel dari GitHub tutorial"
• 🎬 "Vercel tutorial Indonesia deploy website gratis"
• 🎬 "hosting website gratis Vercel 2024"

Environment Variables

API key, database URL, dan secret lainnya tidak boleh di-hardcode di kode yang masuk ke GitHub. Simpan di Vercel sebagai Environment Variables — aman, tidak terekspos di repo.

# Di kode (Node.js/Vite), akses env var seperti ini:
process.env.ANTHROPIC_API_KEY    # Node.js
import.meta.env.VITE_API_KEY     # Vite (harus prefix VITE_)

Custom Domain

Monitoring & Logs

📺 Video Tutorial

• 🎬 "Vercel environment variables tutorial"
• 🎬 "custom domain Vercel gratis cara setting"
• 🎬 "Vercel dashboard tutorial deployment logs"

Replit vs GitHub + Vercel

Buat Akun Replit

Buat Repl Baru

Anatomi Interface Replit

Import dari GitHub

📺 Video Tutorial

• 🎬 "cara daftar Replit tutorial Indonesia pemula"
• 🎬 "Replit coding online gratis tanpa install"
• 🎬 "Replit tutorial membuat project pertama"

Run Kode

Klik tombol hijau ▶ Run di atas editor. Replit akan:

1. Install dependencies yang dibutuhkan (otomatis baca package.json atau requirements.txt)
2. Jalankan entry point yang dikonfigurasi di file .replit
3. Tampilkan output di panel kanan atau terminal

Install Package

# Di Shell/Console panel (bawah):

# Node.js / npm
npm install nama-package

# Python
pip install nama-package

# Atau klik ikon kotak di panel kiri → search package → Install

Environment Variables di Replit

Deploy / Publish

Replit punya beberapa opsi publish:

Static Deploy (Gratis)

Replit AI — Coding Assistant Bawaan

Replit punya AI assistant built-in (berbasis Claude). Cara pakai:

• Chat: Panel AI di sidebar kiri — tanya apapun tentang kode
• Inline edit: Select kode → klik "Edit with AI" → tulis instruksi
• Generate: Ketik komentar deskriptif di editor → Tab untuk autocomplete kode

📺 Video Tutorial

• 🎬 "deploy project Replit tutorial Indonesia"
• 🎬 "Replit AI assistant cara pakai tutorial"
• 🎬 "Replit coding tutorial web app pemula"

Download & Install Desktop App

Peta Interface Desktop App

Buka Project

Fitur Eksklusif Desktop App

Visual Diff & Apply

Ketika AI mengusulkan perubahan kode, Desktop App menampilkan diff visual sebelum diterapkan:

• Panel kanan menampilkan perubahan per file dengan highlight merah/hijau
• Tombol "Apply" per file — pilih mana yang mau diterapkan, mana yang tidak
• Tombol "Apply All" untuk terapkan semua perubahan sekaligus
• Tombol "Reject" untuk buang perubahan yang tidak diinginkan

Multi-File Context Selector

Keyboard Shortcuts Lengkap

📺 Video Tutorial

• 🎬 "OpenCode Desktop App tutorial cara pakai"
• 🎬 "AI coding desktop app review OpenCode vs Cursor"
• 🎬 "vibe coding AI desktop tool tutorial pemula"

Apa itu OpenCode?

OpenCode adalah AI coding assistant yang berjalan di terminal, open-source, dan mendukung berbagai model AI. Mirip Claude Code (Anthropic) tapi bisa dipakai dengan berbagai provider: Anthropic, OpenAI, Google Gemini, Mistral, bahkan model lokal via Ollama.

Prerequisites

Sebelum install OpenCode CLI, pastikan sudah ada:

• Node.js versi 18 ke atas — cek dengan node --version
• npm atau bun — biasanya sudah bundled dengan Node.js

# Cek versi Node.js
node --version
# Output: v20.x.x atau lebih baru

# Kalau belum ada, download dari nodejs.org (pilih LTS)

Install OpenCode

# Cara 1: Install global via npm (recommended)
npm install -g opencode-ai

# Cara 2: Jalankan langsung tanpa install (npx)
npx opencode-ai

# Cara 3: Install via bun
bun install -g opencode-ai

# Verifikasi instalasi
opencode --version

🆓 Pakai OpenCode Gratis — Big Pickle!

OpenCode sudah punya model gratis bawaan bernama Big Pickle. Tidak perlu daftar ke mana-mana, tidak perlu API key, tidak perlu kartu kredit. Langsung pakai!

Cara Aktifkan Big Pickle

Konfigurasi API Key (opsional)

Link Referensi

• 🌐 opencode.ai — website resmi & download
• 📦 github.com/sst/opencode — source code (open source)
• 📖 opencode.ai/docs — dokumentasi lengkap

📺 Video Tutorial

• 🎬 "OpenCode SST tutorial"
• 🎬 "OpenCode AI coding assistant setup"
• 🎬 "vibe coding free AI tools"

Mulai Sesi OpenCode

# Masuk ke folder project dulu
cd /path/to/project

# Jalankan OpenCode
opencode

# OpenCode membaca semua file di folder ini sebagai konteks

Interface terminal akan muncul — mirip chat, tapi AI bisa membaca dan mengubah file di folder project secara langsung.

Command Dasar di Dalam Sesi

Contoh Workflow Nyata

# 1. Minta AI buat file baru
"Buat file komponen React bernama UserCard.jsx.
 Komponen ini menerima props: name, email, avatar.
 Tampilkan sebagai card dengan Tailwind CSS."

# 2. AI akan membuat file dan menampilkan isinya

# 3. Minta revisi spesifik
"Tambahkan prop 'role' dan tampilkan sebagai badge
 di pojok kanan atas card."

# 4. Lihat semua perubahan
/diff

# 5. Kalau puas, commit ke GitHub
# (keluar dari OpenCode dulu, lalu git add + commit)

CLAUDE.md — Instruksi Permanen untuk AI

Buat file CLAUDE.md di root project untuk memberikan konteks permanen yang dibaca AI setiap sesi:

# Project: Dashboard Analytics PT XYZ

## Stack
- Frontend: React + Vite + Tailwind CSS
- Backend: Express.js
- Database: PostgreSQL via Prisma

## Konvensi kode
- Gunakan TypeScript, bukan JavaScript
- Komponen React: functional, tidak pakai class
- Naming: camelCase untuk variabel, PascalCase untuk komponen
- Semua teks user-facing dalam Bahasa Indonesia

## Yang tidak boleh diubah
- File .env dan konfigurasi database
- Struktur tabel di schema.prisma tanpa diskusi dulu

Tips Efisiensi

• Satu task per sesi — buka sesi baru untuk task yang berbeda agar konteks tidak bercampur
• Selalu review dengan /diff sebelum commit — AI bisa membuat perubahan di banyak file sekaligus
• Pakai /undo kalau perubahan tidak sesuai harapan, jauh lebih cepat dari revert manual
• Instruksi spesifik lebih baik — "tambah error handling untuk kasus API timeout" lebih efektif dari "perbaiki kode ini"

📺 Video Tutorial

• 🎬 "OpenCode CLI tutorial cara pakai terminal"
• 🎬 "AI coding terminal workflow vibe coding"
• 🎬 "Claude Code vs OpenCode terminal comparison"

Persiapan

mkdir link-in-bio
cd link-in-bio

Step 1: Buat Struktur HTML Dasar

Ketik di chat OpenCode:

Buat file index.html untuk halaman link-in-bio.
Struktur yang dibutuhkan:
- Foto profil (pakai placeholder dari picsum.photos)
- Nama: [tulis nama kamu]
- Bio: [tulis bio singkat]
- 5 tombol link: Instagram, LinkedIn, GitHub, Portfolio, Email

Gunakan HTML5 semantik yang valid. Belum perlu styling dulu.

Step 2: Tambah Styling Modern

Sekarang buat file style.css dan link ke index.html.
Desain yang diinginkan:
- Background gelap (#0F172A atau gradien gelap)
- Card putih/transparan di tengah, max-width 400px, centered
- Foto profil bulat 100px, border putih 3px
- Font: Google Fonts Inter
- Tombol link: lebar penuh, rounded, hover effect
- Setiap tombol punya warna berbeda sesuai platform
- Responsive di mobile
Jangan pakai framework CSS. Vanilla CSS saja.

Step 3: Tambah Animasi & Interaktivitas

Tambahkan:
1. Animasi fade-in saat halaman load (CSS keyframes)
2. Tombol copy email ke clipboard — klik tombol Email,
   muncul tooltip "Copied!"
3. Counter klik sederhana di localStorage — setiap tombol
   dicatat, total klik tampil di pojok kanan atas "X visits"
Buat file script.js terpisah dan link ke index.html.

Step 4: Review & Polish

Review seluruh kode dan:
1. Pastikan HTML valid — tidak ada tag yang tidak tertutup
2. Cek accessibility — semua link punya aria-label
3. Tambah meta tags SEO: title, description, og:image
4. Tambah favicon sederhana (bisa pakai emoji via SVG)
5. Pastikan tampil baik di mobile (cek di DevTools)

Step 5: Deploy ke Vercel

git add .
git commit -m "feat: link-in-bio halaman selesai"
git push origin main

📺 Video Referensi

• 🎬 "build linktree clone HTML CSS tutorial"
• 🎬 "deploy HTML to Vercel tutorial"
• 🎬 "vibe coding project beginner AI"

Apa itu Mimocode?

Mimocode adalah AI coding assistant yang bisa langsung dipakai di browser — tidak perlu install apapun. Tersedia model gratis bawaan bernama Mimo Auto, cocok untuk belajar coding, debug kode, dan build project sederhana tanpa perlu bayar.

Buat Akun & Mulai

Workflow Dasar

📺 Video Tutorial

• 🎬 "Mimocode tutorial cara pakai"
• 🎬 "Mimocode AI coding assistant review"

Persiapan

Step 1: Generate Kode API Dasar

Di Mimocode, ketik:

Buat REST API sederhana dengan Node.js + Express untuk todo list.
Simpan data di memory (array), tidak perlu database.

Endpoint yang dibutuhkan:
GET    /todos          - ambil semua todo
POST   /todos          - tambah todo baru (body: { title, done: false })
PUT    /todos/:id      - update todo (body: { title?, done? })
DELETE /todos/:id      - hapus todo

Tambah middleware: cors, express.json()
Port: 3000
Sertakan contoh data awal (3 todo) untuk testing.

Step 2: Tambah Validasi

Tambahkan validasi input:
- POST /todos: title wajib ada, tidak boleh string kosong,
  maksimal 100 karakter
- PUT /todos/:id: minimal satu field (title atau done) harus ada
- Semua endpoint: kalau id tidak ditemukan, return 404 dengan
  pesan error yang jelas
- Response format konsisten: { success: boolean, data?, error? }

Step 3: Deploy ke Replit & Test

📺 Video Tutorial

• 🎬 "buat REST API Node.js Express tutorial Indonesia"
• 🎬 "deploy Node.js API Replit tutorial"

Install Termux

Setup Awal Termux

# Update package list
pkg update && pkg upgrade

# Install tools penting
pkg install git nodejs python

# Verifikasi
node --version
git --version
python --version

Install OpenCode (Cara Termudah)

OpenCode dengan Big Pickle adalah cara paling mudah coding dengan AI di Termux — gratis, tidak perlu API key:

# Install OpenCode
npm install -g opencode-ai

# Jalankan OpenCode
opencode

# Pilih Big Pickle dari model selector — langsung gratis!

Alternatif: Claude Code (Login)

# Install Claude Code
npm install -g @anthropic-ai/claude-code

# Login dengan akun Claude (bukan API key)
claude --login

# Jalankan Claude Code
claude

Tips Pakai Termux di HP

• Keyboard eksternal sangat disarankan — coding di on-screen keyboard sangat melelahkan
• Termux bisa background — kamu bisa switch app lain dan Termux tetap jalan
• Akses storage HP: jalankan termux-setup-storage untuk bisa akses folder di HP
• Layar lebih besar: tablet Android jauh lebih nyaman dari HP untuk coding

📺 Video Tutorial

• 🎬 "Termux tutorial setup Android coding"
• 🎬 "coding dari HP Android Termux Node.js"
• 🎬 "Claude Code Termux Android tutorial"

Apa yang akan diinstall

Claude Code adalah AI coding assistant dari Anthropic yang berjalan langsung di terminal. Sebelum bisa pakai, kita perlu menyiapkan lingkungan terminal yang lengkap:

🪟 Untuk Windows (CMD / PowerShell)

Panduan khusus Windows — semua langkah dari awal sampai Claude Code siap dipakai di Command Prompt atau PowerShell.

1. Install Git untuk Windows

git --version
# Output: git version 2.x.x

git config --global user.name "Nama Kamu"
git config --global user.email "email@kamu.com"

2. Install Node.js di Windows

node --version
# Output: v20.x.x atau v22.x.x
npm --version
# Output: 10.x.x

3. Install Claude Code

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

Tunggu sampai selesai. Verifikasi:

claude --version

4. Login ke Claude

Claude Code menggunakan autentikasi login, bukan API key. Setelah install, login dengan akun Claude-mu:

claude --login

5. Jalankan Claude Code

mkdir project-pertama
cd project-pertama
claude

Saat pertama jalan, Claude Code akan minta izin terminal. Ketik y lalu Enter untuk setuju. Mulai coding!

Untuk Mac & Linux

Ikuti langkah-langkah di bawah ini.

1. Cek Shell Terminal

Buka Terminal (Mac) atau terminal emulator (Linux). Cek shell yang kamu pakai:

echo $SHELL
# Output biasanya: /bin/zsh (Mac modern) atau /bin/bash

Mac modern pakai Zsh secara default. Linux umumnya pakai Bash. Dua-duanya sama-sama bisa untuk panduan ini.

2. Install Xcode Command Line Tools (Mac)

Mac butuh Xcode Command Line Tools — ini menyediakan compiler dan tools dasar yang dibutuhkan Git dan package manager:

xcode-select --install

Muncul pop-up → klik "Install" → tunggu selesai (5-15 menit tergantung internet). Kalau sudah terinstall sebelumnya akan muncul pesan "error: command line tools are already installed".

3. Install Homebrew (Mac — opsional)

Homebrew memudahkan install Git dan tools lainnya. Bisa skip kalau sudah punya Git dari Xcode CLI tools.

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

Ikuti petunjuk di terminal. Setelah selesai, tambahkan Homebrew ke PATH:

# Untuk Mac dengan chip Apple (M1/M2/M3):
echo 'eval "$(/opt/homebrew/bin/brew shellenv)"' >> ~/.zshrc
eval "$(/opt/homebrew/bin/brew shellenv)"

# Untuk Mac Intel:
echo 'eval "$(/usr/local/bin/brew shellenv)"' >> ~/.zshrc
eval "$(/usr/local/bin/brew shellenv)"

Verifikasi: brew --version

4. Install Git

Cek apakah Git sudah ada:

git --version
# Output: git version 2.x.x

Kalau belum ada, install:

# Mac (via Homebrew)
brew install git

# Ubuntu/Debian
sudo apt install git

# Fedora
sudo dnf install git

Konfigurasi identitas Git (wajib — ini akan terhubung ke Claude Code):

git config --global user.name "Nama Kamu"
git config --global user.email "email@kamu.com"

5. Install Node.js

Claude Code butuh Node.js versi 18 atau lebih baru. Cara termudah: pakai nvm (Node Version Manager):

# Install nvm
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.1/install.sh | bash

Setelah selesai, restart terminal atau jalankan:

source ~/.zshrc
# atau: source ~/.bashrc

# Cek nvm
nvm --version

Install Node.js LTS terbaru:

nvm install --lts
nvm use --lts

# Verifikasi
node --version
# Output: v22.x.x atau v20.x.x (LTS)
npm --version
# Output: 10.x.x

6. Install Claude Code

Setelah Node.js dan Git siap, install Claude Code secara global via npm:

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

Tunggu sampai selesai. Verifikasi instalasi:

claude --version
# Output: claude-code x.x.x

7. Login ke Claude

Claude Code menggunakan autentikasi login, bukan API key. Setelah install, login dengan akun Claude:

claude --login

8. Jalankan Claude Code Pertama Kali

Buat folder project baru, masuk ke folder itu, lalu jalankan Claude Code:

mkdir project-pertama
cd project-pertama
claude

Saat pertama kali dijalankan, Claude Code akan meminta konfirmasi beberapa izin. Baca dan setujui (type y lalu Enter). Setelah itu, terminal berubah menjadi mode chat — kamu bisa mulai coding dengan AI.

Command Penting Claude Code

Ringkasan Instalasi

Kalau semua tools sudah ada di komputer, instalasi Claude Code cukup 3 langkah:

node --version                           # cek Node.js
npm install -g @anthropic-ai/claude-code  # install
claude --login                            # login dengan akun Claude
claude                                    # jalan!

📺 Video Tutorial

• 🎬 "install Node.js di Mac pakai nvm tutorial"
• 🎬 "cara install Git di Mac Windows Linux"
• 🎬 "install Claude Code CLI tutorial terminal"
• 🎬 "install Node.js di Windows CMD pemula"
• 🎬 "install Git di Windows CMD git bash"
• 🎬 "Claude Code cara pakai untuk pemula Indonesia"

Apa itu Template Build?

Template Build Sesi Eksplorasi adalah panduan step-by-step untuk membangun tools berbasis web menggunakan AI. Template ini terdiri dari 3 bagian:

Step 1: Download / Copy Template

Template tersedia di folder MBCL Cohort 1 dengan nama file MBCL 1 Template Build Sesi Eksplorasi.md. Buka file itu di editor teks atau langsung di browser.

Step 2: Isi Bagian 1 — Konteks Proyek

Bagian ini yang paling penting. Semakin spesifik, semakin akurat hasil build-nya. Ini yang perlu diisi:

Step 3: Upload ke AI

Pilih AI yang akan kamu pakai:

Step 4: Jalankan Build Prompts

Setelah AI memahami konteks, jalankan 3 prompt berikut secara berurutan:

Step 5: Edit untuk Kebutuhan Pribadi

Setelah AI menghasilkan tools, kamu bisa minta perubahan sesuai selera:

• Ganti warna — "Ubah warna tema jadi biru navy dan emas"
• Tambah fitur kecil — "Tambah tombol reset di samping tombol submit"
• Perbaiki teks — "Ganti judul jadi [judul tools kamu]"
• Tambahkan logo — "Tambah logo di header, ukuran 40x40px, dari URL ini: ..."
• Ganti font — "Pakai font Poppins dari Google Fonts"

Step 6: Simpan & Kumpulkan ke TA

Yang perlu dikumpulkan ke dosen TA / facilitator:

📺 Video Tutorial

• 🎬 "cara pakai Claude untuk build web tool sederhana"
• 🎬 "ChatGPT build HTML tools tanpa coding"
• 🎬 "Gemini AI buat website HTML prompt"

Sekilas Tools

🪟 Install di Windows

1. Install VS Code

2. Install Python

python --version
pip --version

3. Install Git & Node.js

Panduan lengkap Git dan Node.js untuk Windows sudah ada di Bab 21 — Install Claude Code bagian Windows. Langkah-langkahnya:

• Git: download dari git-scm.com, jalankan installer, pilih opsi "Git from the command line"
• Node.js: download dari nodejs.org (LTS), jalankan .msi, pastikan "Add to PATH" tercentang

Detail step-by-step ada di Bab 21 → bagian Windows.

🍏 Install di Mac

1. Install VS Code

2. Install Python

Mac sudah punya Python bawaan versi lama. Install versi terbaru:

brew install python

python3 --version
pip3 --version

3. Install Git & Node.js

Panduan lengkap untuk Mac sudah ada di Bab 21:

• Xcode CLI Tools: xcode-select --install (dibutuhkan Git dan compiler)
• Git: brew install git atau dari Xcode CLI tools
• Node.js: via nvm atau download dari nodejs.org

Detail ada di Bab 21 → bagian Mac & Linux.

🐧 Install di Linux (Ubuntu/Debian)

1. Install VS Code

# Download & install .deb package
wget -qO- https://packages.microsoft.com/keys/microsoft.asc | gpg --dearmor > packages.microsoft.gpg
sudo install -o root -g root -m 644 packages.microsoft.gpg /etc/apt/trusted.gpg.d/
sudo sh -c 'echo "deb [arch=amd64] https://packages.microsoft.com/repos/code stable main" > /etc/apt/sources.list.d/vscode.list'
sudo apt update && sudo apt install code

Atau download langsung dari code.visualstudio.com/download → pilih .deb → klik dua kali untuk install.

2. Install Python

sudo apt update
sudo apt install python3 python3-pip

# Verifikasi
python3 --version
pip3 --version

Python biasanya sudah ada di Ubuntu. Cek dulu: python3 --version. Kalau sudah ≥ 3.10, tidak perlu install ulang.

3. Install Git & Node.js

Panduan lengkap untuk Linux ada di Bab 21 — bagian Mac & Linux:

• Git: sudo apt install git
• Node.js: via nvm (disarankan) atau sudo apt install nodejs npm

VS Code Extension Penting

Setelah VS Code terinstall, tambahkan extension ini biar coding lebih nyaman:

Cara install: buka VS Code → klik ikon Extensions di sidebar kiri (atau Ctrl+Shift+X) → cari nama extension → klik Install.

Cek Semua Tools

Jalankan perintah ini untuk verifikasi semua tools sudah terinstall:

code --version          # VS Code
python3 --version      # Python
pip3 --version         # Python package manager
git --version          # Git
node --version         # Node.js
npm --version          # npm (bundled dengan Node.js)

📺 Video Tutorial

• 🎬 "cara install VS Code Windows Mac tutorial pemula"
• 🎬 "cara install Python di Windows Mac Linux pemula"
• 🎬 "Python pertama kali belajar dari nol Indonesia"
• 🎬 "VS Code extension wajib untuk pemula coding"