5 Fase Bertahap
Ditulis buat pemula total
Khusus macOS
Onboarding Tim: Mulai Kerja Pakai Claude Code CLI (Command Line Interface/Terminal)
Panduan ini buat kamu yang baru gabung dan belum pernah pakai Terminal sama sekali. Ikuti tahap demi tahap, dari install Claude Code di Mac sampai akhirnya kamu pegang project sendiri. Gak perlu buru-buru, tiap fase ada kriteria "lulus" sebelum lanjut ke fase berikutnya.
Kenapa ada panduan ini?
Tim Product SID pakai satu subscription Claude Max bareng-bareng (email & password dari admin), jadi semua orang bisa kerja dibantu AI coding agent (Claude Code) tanpa harus bayar sendiri-sendiri. Supaya prosesnya aman dan rapi (gak ada yang tiba-tiba ubah project orang lain, gak ada kredensial nyasar ke tempat yang salah), semua anggota baru lewat 5 fase di bawah ini dulu sebelum pegang project sendiri secara mandiri.
0
Setup
Hari 1
1
Orientasi
Minggu 1
2
Latihan Terarah
Minggu 2
3
Mini Project
Minggu 3–4
4
Full Ownership
Bulan 2+
Ringkasan Akses
Ini semua layanan yang akan kamu pakai. Jangan hafalkan sekarang, kredensialnya minta langsung ke admin (Ican) saat kamu butuh.
| Layanan | Tipe Akses | Untuk Apa |
|---|---|---|
| Gmail / Google Workspace product.manager@sekolahmu.co.id | Shared, tanya admin | Email utama tim. Gerbang ke Google Cloud, dan penerima kode OTP layanan lain. |
| Claude Max (Claude Code CLI) | Tanya admin (email & kode login) | Kunci utamanya: AI coding agent yang kamu pakai kerja sehari-hari di Terminal. Akun beda dari Gmail di atas. |
| Domain tumbuh.us + Cloudflare product.manager@sekolahmu.co.id | Shared, tanya admin | Deploy tool/halaman baru (Cloudflare Pages), atur DNS. Beda akun dari email Claude Max. |
| Gemini API | API key dari admin | Kalau sebuah project butuh fitur AI tambahan. Claude Code sendiri tidak butuh ini. |
| DeepSeek API | API key dari admin | Default untuk bot/automation, jauh lebih murah, lihat catatan di Fase 3. |
| Google Cloud Console | Shared, tanya admin | Layanan GCP di luar Gemini, jarang dipakai. Hati-hati, ada yang bisa nge-bill. |
| Supabase | Shared, tanya admin | Database/backend untuk project yang butuh backend beneran. |
| GitHub | Akun pribadi kamu | Nyimpen kode & riwayat perubahan. Beda pola dari semua di atas, lihat catatan. |
ⓘ
Kenapa GitHub beda sendiri?Layanan lain dipakai rame-rame pakai satu login yang sama biar hemat & simpel. GitHub sengaja tidak begitu: tiap orang pakai akun GitHub pribadinya sendiri (bikin baru dulu kalau belum punya, gratis), lalu di-invite masuk ke GitHub Organization tim oleh admin. Ini supaya riwayat "siapa nulis kode apa" tetap jelas per-orang, dan supaya 2FA / SSH key tidak bentrok kalau dipakai bareng-bareng dari banyak Mac berbeda.
0.Fase 0: Setup Mac & Login Claude Code
Tujuan fase iniMac kamu siap, Claude Code CLI ter-install, kamu berhasil login pakai akun Claude Max tim, dan model sudah diganti ke Sonnet (lebih hemat dari default Opus).
| 1 | Cek dulu: apakah akun sedang dipakai orang lain? | Tanya di grup tim sebelum login. Akun ini dipakai gantian, bukan bersamaan (lihat peringatan di bawah). |
| 2 | Buka Terminal | Tekan Cmd + Space, ketik "Terminal", tekan Enter. Ini aplikasi bawaan macOS, bentuknya kotak hitam/putih dengan teks, bukan aplikasi yang perlu di-download. |
| 3 | Install Claude Code | Klik tombol "Salin" di bawah (jangan select manual dari layar), paste di Terminal (Cmd+V), tekan Enter, tunggu sampai selesai. Tidak perlu install Node.js dulu, installer-nya sudah lengkap sendiri. |
| 4 | Kalau abis itu claude bilang "command not found" | Wajar. Jalankan source ~/.zshrc dulu (atau tutup Terminal, buka baru), baru lanjut step berikutnya. |
| 5 | Jalankan claude | Ketik claude lalu Enter. |
| 6 | Pilih tampilan (theme) | Muncul menu pilihan warna. Ini bukan minta kamu ngetik — pakai tombol panah atas/bawah buat pilih, lalu tekan Enter buat konfirmasi. Pilih apa aja boleh, nggak ngaruh ke fungsi. |
| 7 | Login pakai akun tim | Browser otomatis kebuka. Chat dulu ke Ican/Fajar buat minta email & password/kode login akun Claude Max tim, lalu masukkan di halaman yang terbuka. |
| 8 | Balik ke Terminal, muncul pertanyaan "Use Claude Code's terminal setup?" | Pilihan 1. Yes, use recommended settings sudah otomatis tersorot — tinggal tekan Enter. (Kalau kelanjur pilih 2, gak masalah juga, cuma soal shortcut keyboard doang.) |
| 9 | Ganti model ke Sonnet | Ketik /model sonnet lalu Enter. Ini WAJIB — default-nya Opus, yang boros banget buat kerjaan sehari-hari. Sonnet cukup kuat buat coding tapi jauh lebih hemat kuota shared tim. Cukup sekali — kesimpen otomatis buat sesi-sesi berikutnya. |
| 10 | Verifikasi berhasil | Kalau di bagian atas layar tertulis nama kamu ("Welcome back...") dan model aktifnya Sonnet (bukan Opus/Fable), kamu sudah lulus Fase 0. |
⚠
Cuma copy baris yang ada tombol "Salin"-nyaJangan select manual terus copy dari layar/screenshot — kalau ikut ke-copy baris "Downloading...", "Installed to...", dll, Terminal bakal coba jalankan itu semua sebagai command dan muncul banyak
command not found. Kalau ini kejadian, tutup Terminal, buka baru, ulangi dari step 3 pakai tombol Salin.curl -fsSL https://claude.ai/install.sh | bash
Downloading Claude Code...
Installed to ~/.local/bin/claude
Restart Terminal or run: source ~/.zshrc
source ~/.zshrc
claude
Let's get started.
Choose the text style that looks best with your terminal
1. Auto (match terminal)
› 2. Dark mode ✓
3. Light mode
(← pilih pakai panah, Enter buat konfirmasi)
Welcome to Claude Code!
Opening browser to log in...
→ Sign in with [email dari admin]
Logged in as [email dari admin]
Login successful. Press Enter to continue...
Use Claude Code's terminal setup?
› 1. Yes, use recommended settings
2. No, maybe later with /terminal-setup
(← "1" sudah tersorot, tinggal Enter)
› /model sonnet
✔ Model diganti ke Sonnet 5 — tersimpan buat sesi berikutnya
Screenshot asli — biar makin yakin tampilannya bener-bener kayak gini (bukan cuma ilustrasi):
Layar pilih tema — normal, pakai panah buat pilih
Muncul abis login berhasil — pilih 1, Enter
Tanda login berhasil (email di contoh ini cuma ilustrasi, punya kamu tanya admin ya)
Menu
/model — Sonnet yang dipilih⚠
Wajib dibaca: akun ini dipakai gantian, bukan bersamaanLogin berbarengan dari banyak Mac/lokasi berbeda dalam waktu yang sama berisiko akun ini kena flag atau suspend oleh Anthropic, dan itu artinya seluruh tim kehilangan akses sekaligus. Aturannya: (1) pastikan tidak ada orang lain yang sedang aktif pakai sebelum kamu login, (2) jangan biarkan sesi login menyala di banyak Mac tanpa alasan, (3) kalau selesai kerja dan mau gantian ke orang lain, koordinasikan dulu di grup tim. Jangan pernah reset password shared login tanpa izin admin.
1.Fase 1: Orientasi (Read-Only)
Tujuan fase iniBiasain pakai Claude Code lewat Terminal, pakai prompt yang SUDAH familiar — yang biasa kamu ketik di claude.ai (web). Belum perlu akses project apapun. Semua latihan di folder kosong yang kamu bikin sendiri, jadi aman kalau Claude Code mau bikin file di situ.
| 1 | Bikin folder kosong buat latihan | Ketik mkdir latihan-claude lalu cd latihan-claude. Folder kosong aja cukup, belum perlu project beneran. |
| 2 | Jalankan claude di folder itu | Ketik claude lalu Enter. |
| 3 | Aktifkan "bypass permissions" | Tekan Shift+Tab beberapa kali sampai di bagian bawah layar muncul tulisan bypass permissions on. Ini bikin Claude Code jalan terus tanpa nanya izin tiap mau bikin/ubah file — biar latihan kamu gak keputus-putus. Aman di folder latihan kosong ini (lihat peringatan di bawah). |
| 4 | Coba analisa data beneran — paste link Google Sheet ini | Paste link di bawah ke Claude Code, lalu ketik "analisa sheet ini". Claude Code bakal buka sheet-nya langsung dan kasih ringkasan. |
| 5 | Lanjut minta visual | Abis analisanya keluar, ketik "buatkan visual htmlnya". Claude Code bakal bikinin halaman visual (grafik, tabel) dari data yang sama, terus publish linknya buat kamu buka di browser. |
| 6 | Minta kredensial Cloudflare dari admin | Login Cloudflare pakai email product.manager@sekolahmu.co.id — passwordnya chat ke Ican/Fajar dulu sebelum deploy (beda akun sama akun login Claude Max, jangan ketuker). |
| 7 | Deploy hasilnya ke domain kamu sendiri | Ketik "deploy html ini ke web.tumbuh.us/<namakamu>/task1 — tarik dulu semua file yang udah live sekarang di web.tumbuh.us, jangan sampai folder orang lain kehapus, baru tambahin punya aku dan deploy" — ganti <namakamu> pakai nama kamu sendiri. Bagian "tarik dulu" ini penting: satu domain ini dipakai bareng-bareng, deploy yang gak hati-hati bisa nge-timpa folder latihan teman kamu yang lain. |
| 8 | Boleh juga coba prompt lain yang biasa kamu pakai di claude.ai | Sama kayak biasanya nanya-nanya di claude.ai (web) — coba yang sama di sini, rasain bedanya. |
ⓘ
Tips: paste gambar langsung ke TerminalMau kasih Claude Code lihat screenshot atau gambar referensi (misal buat nunjukkin error, desain contoh, dll)? Copy gambarnya seperti biasa, terus paste langsung di Terminal pakai
Cmd+V (atau Ctrl+V) — gak perlu upload file dulu, gambarnya langsung nyambung ke prompt kamu.⚠
"Bypass permissions" cuma buat folder latihan iniMode ini bikin Claude Code bebas bikin/ubah file tanpa nanya-nanya — cocok buat latihan biar cepat, tapi bahaya kalau dipakai di folder project asli tim (mulai Fase 2). Begitu kamu
cd keluar dari folder latihan ini, tekan Shift+Tab lagi buat matiin mode ini (sampai tulisannya hilang dari bawah layar).⚠
Kenapa harus "tarik dulu"?Cloudflare Pages itu sifatnya ganti semua isi tiap kali di-deploy, bukan nambahin file. Kalau kamu deploy folder yang cuma isinya punya kamu doang, folder latihan teman-teman yang sudah live duluan bisa ikut kehapus. Selalu minta Claude Code ambil dulu isi yang sekarang ada, gabungkan, baru deploy ulang.
mkdir latihan-claude && cd latihan-claude
claude
(tekan Shift+Tab beberapa kali sampai muncul tulisan di bawah)
▶▶ bypass permissions on (shift+tab to cycle)
https://docs.google.com/spreadsheets/d/16i2BL3IHoTUssg2mf8yjccfbQ6OtFaslwjWL8Rwt17k/edit?gid=124779145#gid=124779145 analisa sheet ini
Called Google Drive
Struktur Organisasi, Headcount per sub-tim...
buatkan visual htmlnya
Skill(dataviz) — Successfully loaded skill
✔ Visual sudah live: https://claude.ai/code/artifact/...
deploy html ini ke web.tumbuh.us/<namakamu>/task1 — tarik dulu semua file yang udah live sekarang, jangan sampai folder orang lain kehapus
Menarik isi web.tumbuh.us yang sudah live...
Menggabungkan dengan folder baru...
✔ Deployed: https://web.tumbuh.us/<namakamu>/task1/
Screenshot asli hasilnya:
Abis ketik "analisa sheet ini"
Abis ketik "buatkan visual htmlnya" — ini hasilnya setelah di-share ke publik (siapa aja yang punya link bisa buka): lihat live
Abis deploy — ini contoh punya Azizah di web.tumbuh.us/azizah/task1, punya kamu nanti pakai nama kamu sendiri
ⓘ
Perlu install apa-apa dulu buat bikin visual?Nggak. Kemampuan bikin visual (skill "dataviz") sudah otomatis ada begitu Claude Code ter-install — sama di Mac siapa aja. Data sensitif juga otomatis dijaga: kalau sheet-nya ada info pribadi, Claude Code publish hasilnya sebagai private by default (cuma yang punya link yang bisa buka).
Kriteria lulus Fase 1
- Bisa buka Terminal, bikin folder, dan pindah folder sendiri tanpa dituntun
- Berhasil analisa Google Sheet + bikin visual HTML-nya
- Berhasil deploy ke
web.tumbuh.us/<namakamu>/task1dan bisa dibuka di browser - Paham bedanya folder latihan (aman pakai bypass permissions) vs folder project asli (harus hati-hati, mulai Fase 2) — dan tau cara matiin bypass permissions (
Shift+Tab)
2.Fase 2: Latihan Terarah
Tujuan fase iniPindahkan 1 project HTML yang sudah dibuat di claude.ai ke local, cek di localhost, lalu deploy ke Cloudflare Pages (tumbuh.us) didampingi senior.
| 1 | Ambil HTML dari project claude.ai | Buka project/artifact yang sudah pernah dibuat di claude.ai (web), copy semua kodenya. |
| 2 | Taruh di folder lokal | Buat folder baru di Mac, tempel jadi index.html, lalu buka folder itu lewat claude (Claude Code CLI) buat dicek/dirapikan. |
| 3 | Cek dulu di localhost | Double-click index.html buat buka di browser, atau jalankan python3 -m http.server di folder itu lalu buka localhost:8000. Pastikan tampilannya benar sebelum lanjut. |
| 4 | Deploy ke Cloudflare Pages, didampingi senior | Minta kredensial Cloudflare dari admin, pakai wrangler pages deploy ke subdomain baru di tumbuh.us. Senior nemenin buat deploy pertama ini. |
Kriteria lulus Fase 2
- Berhasil pindahin 1 HTML dari claude.ai ke folder lokal
- Paham cara cek tampilan di localhost sebelum deploy
- Berhasil deploy pertama ke Cloudflare Pages (tumbuh.us), didampingi senior
3.Fase 3: Mini Project Mandiri
Tujuan fase iniPegang 1 tool/halaman kecil dari nol sampai live, pakai alur standar tim (skill
project-standard), tanpa didampingi terus-menerus.| 1 | Dapat 1 project kecil yang benar-benar baru | Contoh: 1 halaman tool sederhana untuk dipakai internal. |
| 2 | Bangun dengan Claude Code seperti biasa | Boleh tanya kapan saja, tapi coba selesaikan sendiri dulu sebelum minta bantuan senior. |
| 3 | Deploy ke Cloudflare Pages (domain tumbuh.us) | Ambil kredensial Cloudflare dari admin, jangan pernah taruh API key di file yang ikut ke-commit atau ke halaman publik. |
ⓘ
Soal Gemini API vs DeepSeek APIKalau mini project-mu butuh fitur AI (bukan Claude Code CLI-nya, tapi AI di DALAM produk yang kamu bikin, misal chatbot atau ekstraksi teks), default tim pakai DeepSeek karena jauh lebih murah untuk automation/bot. Gemini dipakai kalau ada kebutuhan khusus yang DeepSeek tidak bisa (misal vision/gambar). Tanya senior kalau ragu mana yang cocok.
Kriteria lulus Fase 3
- Berhasil bikin 1 tool kecil dari nol sampai live di domain tumbuh.us
- Tidak ada kredensial/API key yang ke-commit ke kode atau kelihatan di halaman publik
Project Latihan
Bingung mau bikin project apa buat Fase 3 atau Fase 4? Ini beberapa ide yang sudah diarahkan, lengkap dataset-nya biar gak mulai dari halaman kosong. Tinggal download dataset-nya, kasih ke Claude Code, dan mulai.
🏕️
Clone Halaman Event
Bikin ulang halaman kayak event.product-sid.us/papandayan (galeri foto + info acara), deploy ke web.tumbuh.us/papandayan.
"Bikinkan halaman event statis (HTML+CSS), galeri foto + info acara, referensinya kayak event.product-sid.us/papandayan. Pakai data di event-latihan.json ini."
⬇ event-latihan.json
🗄️
Koneksi Database
Bikin halaman yang connect ke Supabase — bisa lihat daftar peserta event dan tambah peserta baru lewat form.
"Bikinkan halaman yang connect ke tabel peserta_event di Supabase (schema di peserta-event.sql), bisa nampilin daftar peserta dan form buat nambah peserta baru."
⬇ peserta-event.sql
📊
Visualisasi Google Sheets
Import dataset penjualan ke Google Sheet kamu sendiri, lalu bikin dashboard visualisasi dari situ.
"Aku sudah import penjualan-latihan.csv ke Google Sheet ini [tempel link sheet]. Bikinkan dashboard HTML yang baca data dari situ dan tampilin grafik penjualan per bulan & per kategori."
⬇ penjualan-latihan.csv
🔍
Analisa Data
Analisa dataset survey kepuasan tim, cari insight, presentasikan sebagai halaman ringkas.
"Analisa dataset survey-kepuasan.csv ini, cari insight menarik (skor rata-rata per departemen, korelasi worklife-balance vs rekomendasi, dll), bikin halaman ringkasan dengan grafik."
⬇ survey-kepuasan.csv
🔥 Biar Makin Ketagihan Vibe Coding
Yang ini lebih buat seru-seruan — hasilnya cepat kelihatan, enak buat dipamerin ke grup tim.
🎮
Kuis Trivia Interaktif
Bikin quiz interaktif dengan skor & animasi benar/salah, dari bank soal yang sudah disiapkan.
"Bikinkan quiz trivia interaktif dari kuis-trivia.json ini — pertanyaan muncul satu-satu, ada animasi pas jawaban benar/salah, skor akhir ditampilkan dengan seru (misal confetti kalau nilai tinggi)."
⬇ kuis-trivia.json
🤖
Chatbot Kepribadian Receh
Bikin chatbot pakai DeepSeek API dengan kepribadian lucu — pilih salah satu persona yang sudah disiapkan.
"Bikinkan chatbot pakai DeepSeek API dengan persona 'Motivator Receh' dari persona-chatbot.json — jawabannya harus kocak tapi tetap membantu, tampilan chat bubble kayak WhatsApp."
⬇ persona-chatbot.json
🃏
Meme Generator AI
Generate caption lucu otomatis pakai DeepSeek, overlay ke template gambar, langsung bisa di-download/share.
"Bikinkan meme generator: pilih template dari meme-templates.json, generate caption lucu pakai DeepSeek API dari topik yang aku ketik, overlay teksnya ke gambar, kasih tombol download hasilnya."
⬇ meme-templates.json
🎡
Spin Wheel Random Picker
Roda undian dengan animasi spin + confetti — buat random giliran presentasi atau pembagian tugas tim.
"Bikinkan spin wheel dari nama-nama di nama-tim.json — roda muter dengan animasi smooth, berhenti random, ada efek confetti pas nama kepilih."
⬇ nama-tim.json
4.Fase 4: Full Ownership
Tujuan fase iniPegang project sendiri secara penuh, dari planning sampai maintenance, dan ikut ritme kerja tim reguler.
| 1 | Pilih project | Ambil salah satu dari Project Latihan di atas, atau project baru dengan scope lebih besar dari tim. |
| 2 | Ikut ritme retro rutin | Catat pelajaran/kegagalan di akhir sesi kerja, biar tim lain tidak mengulang kesalahan yang sama. |
| 3 | Akses penuh ke semua layanan di tabel atas | Sesuai kebutuhan project yang kamu pegang. |
Checklist Admin
Bagian ini untuk Ican / admin: hal-hal yang harus disiapkan MANUAL di masing-masing console sebelum tim mulai. Claude Code tidak bisa mengeksekusi bagian ini secara otomatis karena butuh akses admin ke akun pihak ketiga.
Sekali di awal (setup tim)
- Buat GitHub Organization (kalau belum ada)
- Siapkan cara aman buat kasih kredensial ke tim (bukan lewat chat/notes biasa)
- Rotasi Cloudflare Global API Key kalau sudah lama tidak diganti
Tiap ada anggota baru
- Invite ke GitHub Organization, role Member (bukan Admin/Owner)
- Kasih kredensial yang dibutuhkan langsung, bukan lewat tulisan di guide publik
- Tentukan folder project mana yang boleh disentuh di Fase 1–2
- Tambahkan nama ke monitoring/Dock kalau perlu tracking progress onboarding
FAQ
Terminal bilang "command not found: claude"
Ini normal abis baru install. Jalankan source ~/.zshrc, atau tutup Terminal dan buka baru, lalu coba claude lagi. Kalau masih gagal, kemungkinan instalasinya belum selesai — ulangi command install di Fase 0 (pakai tombol Salin, jangan select manual), lalu screenshot pesan errornya dan tanya senior.
Muncul banyak "command not found" abis paste command install
Ini biasanya karena ke-copy lebih dari 1 baris — teks hasil/output (misal "Downloading Claude Code...") ikut ke-paste dan dianggap Terminal sebagai command baru. Tutup Terminal, buka baru, ulangi step 3 di Fase 0 pakai tombol "Salin" (bukan select manual dari layar).
Terminal nyangkut, gak bisa ngetik apa-apa lagi
Kemungkinan lagi ada menu pilihan yang nongol (misal pilih tema warna, atau "Use Claude Code's terminal setup?") pas pertama kali claude dijalankan atau abis login. Itu bukan minta diketik — pakai tombol panah atas/bawah di keyboard buat pilih, lalu Enter buat konfirmasi. Kalau ragu, opsi yang tersorot (ditandai ›) biasanya aman dipilih.
Aku kena limit/rate limit Claude Max
Wajar kalau lagi jam ramai banyak anggota tim pakai bersamaan. Tunggu beberapa menit, atau tanya di grup tim kalau limitnya cukup sering kejadian, mungkin perlu diatur giliran kerja.
Aku gak sengaja setuju sama perubahan yang salah
Tenang, bilang ke senior. Biasanya masih bisa di-revert (dikembalikan) kalau pakai git. Jangan coba perbaiki sendiri dengan tebak-tebakan.
Kenapa aku tidak bisa langsung push kode ke GitHub tanpa review?
Karena kamu di-invite sebagai Member (bukan Admin), sebagian repo mungkin butuh review sebelum merge. Ini standar keamanan tim, bukan berarti kamu tidak dipercaya.