5 Fase Bertahap Ditulis buat pemula total Khusus macOS

Onboarding Tim: Mulai Kerja Pakai Claude Max

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 lewat email product.manager@sekolahmu.co.id, 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.

Setup

Hari 1

Orientasi

Minggu 1

Latihan Terarah

Minggu 2

Mini Project

Minggu 3–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)	Login pakai email di atas	Kunci utamanya: AI coding agent yang kamu pakai kerja sehari-hari di Terminal.
Domain tumbuh.us + Cloudflare	Shared, tanya admin	Deploy tool/halaman baru (Cloudflare Pages), atur DNS.
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 yang paling hemat.

Cek dulu: apakah akun sedang dipakai orang lain?Tanya di grup tim sebelum login. Akun ini dipakai gantian, bukan bersamaan (lihat peringatan di bawah).
Buka TerminalTekan Cmd + Space, ketik "Terminal", tekan Enter. Ini aplikasi bawaan macOS, bentuknya kotak hitam/putih dengan teks, bukan aplikasi yang perlu di-download.
Install Claude CodeCopy-paste command di bawah, tekan Enter, tunggu sampai selesai. Tidak perlu install Node.js dulu, installer-nya sudah lengkap sendiri.
Jalankan claudeKetik claude lalu Enter. Pertama kali jalan, browser akan otomatis terbuka untuk login.
Login pakai akun timMasukkan email product.manager@sekolahmu.co.id dan password dari admin (Ican) di halaman login yang terbuka.
Ganti ke model paling murahKetik /model haiku lalu Enter. Ini WAJIB, biar kuota shared tim gak cepat habis. Cukup sekali — kesimpen otomatis buat sesi-sesi berikutnya.
Verifikasi berhasilKalau Terminal menampilkan "Logged in" dan model aktifnya Haiku, kamu sudah lulus Fase 0.

curl -fsSL https://claude.ai/install.sh | bash Downloading Claude Code... Installed to ~/.local/bin/claude Restart Terminal or run: source ~/.zshrc claude Welcome to Claude Code! Opening browser to log in... (kalau browser tidak otomatis terbuka, tekan "c" untuk copy link login) → Sign in with product.manager@sekolahmu.co.id ✔ Login successful > /model haiku ✔ Model diganti ke Haiku (paling hemat kuota) — tersimpan buat sesi berikutnya

⚠

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 iniKenal command dasar dan cara "ngobrol" sama Claude Code, tanpa mengubah apa pun. Selama fase ini kamu hanya boleh bertanya/membaca, belum boleh edit atau deploy.

Belajar cd dan lscd nama-folder untuk masuk folder, ls untuk lihat isi folder.
Masuk ke salah satu project contohAdmin akan kasih tahu 1 folder project kecil untuk latihan.
Jalankan claude di dalam folder ituLalu coba tanya: "jelasin project ini ngapain" atau "file apa saja yang ada di sini".
Jangan pernah bilang "ya" ke permintaan edit/tulis fileKalau Claude Code tanya izin untuk mengubah/membuat file, jawab tidak dulu. Fase ini murni baca.

cd nama-project-contoh claude > jelasin project ini buat apa Ini project X, dibangun pakai Y, fungsinya untuk Z...

Kriteria lulus Fase 1

Bisa buka Terminal dan pindah folder sendiri tanpa dituntun
Bisa jalankan claude dan tanya jawab dasar soal sebuah project
Paham bedanya "Claude cuma baca" vs "Claude minta izin ubah file"

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.

Ambil HTML dari project claude.aiBuka project/artifact yang sudah pernah dibuat di claude.ai (web), copy semua kodenya.
Taruh di folder lokalBuat folder baru di Mac, tempel jadi index.html, lalu buka folder itu lewat claude (Claude Code CLI) buat dicek/dirapikan.
Cek dulu di localhostDouble-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.
Deploy ke Cloudflare Pages, didampingi seniorMinta 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.

Dapat 1 project kecil yang benar-benar baruContoh: 1 halaman tool sederhana untuk dipakai internal.
Bangun dengan Claude Code seperti biasaBoleh tanya kapan saja, tapi coba selesaikan sendiri dulu sebelum minta bantuan senior.
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.

Pilih projectAmbil salah satu dari Project Latihan di atas, atau project baru dengan scope lebih besar dari tim.
Ikut ritme retro rutinCatat pelajaran/kegagalan di akhir sesi kerja, biar tim lain tidak mengulang kesalahan yang sama.
Akses penuh ke semua layanan di tabel atasSesuai 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"

Tutup Terminal, buka lagi, coba jalankan claude lagi. Kalau masih gagal, kemungkinan instalasinya belum selesai. Ulangi command install di Fase 0, lalu screenshot pesan errornya dan tanya senior.

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.