1. Pengantar & Penyiapan
Selamat Datang
Halo! Selamat datang di Coding Jam. Dalam 75 menit ke depan, Anda akan membangun aplikasi web AI yang nyata dan berfungsi.
Lihat Situs di sini: Situs Coding Jam
Yang Akan Anda Buat
Aplikasi web yang didukung AI berdasarkan brief project minggu ini. Berjalan di browser Anda. Menggunakan AI Gemini Google. Sepenuhnya milik Anda di akhir sesi.
Menginstal Antigravity
Antigravity adalah asisten AI yang akan kita gunakan untuk melakukan segalanya. Ini adalah aplikasi yang ada di komputer Anda.
Langkah 1 — Download
👉 Buka https://antigravity.google/download di browser Anda.
👉 Klik tombol download untuk sistem operasi Anda (Mac, Windows, atau Linux).
👉 Jalankan penginstal yang didownload. Setelan default tidak masalah — klik untuk melihatnya.
Langkah 2 — Luncurkan & Login
👉 Luncurkan Antigravity dari folder Aplikasi (Mac) atau Menu Start (Windows).
👉 Klik "Login" saat diminta.
👉 Gunakan Akun Google Anda.
Langkah 3 — Verifikasi Layar Selamat Datang
Anda akan melihat layar selamat datang Antigravity dengan tiga tombol besar:
- Buka Folder — membuka folder yang ada sebagai ruang kerja
- Open Agent Manager — membuka dasbor agen (di sinilah sebagian besar pekerjaan kita akan dilakukan)
- Clone Repository — mendownload project dari GitHub (kita akan menggunakannya di Bagian 3A)
Dokumen lainnya di https://antigravity.google/ jika Anda ingin mempelajari lebih lanjut.
✅ Checkpoint: Antigravity sudah diinstal, Anda sudah login, dan Anda melihat layar selamat datang dengan tiga tombol.
2. Menginstal Alat yang Diperlukan (melalui Antigravity)
Antigravity memerlukan dua alat bantu di komputer Anda:
Alat | Penjelasan (bahasa Indonesia sederhana) |
uv | Mengelola Python — bahasa di balik backend aplikasi Anda |
git | Mendownload file project dari internet (Antigravity menggunakannya untuk meng-clone) |
Anda tidak akan mengetik perintah penginstalan sendiri. Anda akan mengajukan pertanyaan kepada Antigravity dalam bahasa Inggris; Antigravity akan menangani sisanya.
Langkah 1 — Buka Ruang Kerja Sementara
Antigravity memerlukan folder yang terbuka untuk memulai chat. (Tidak ada folder = tidak ada chat.)
👉 Di layar selamat datang, klik "Open Folder".
👉 Buat atau pilih folder kosong. Disarankan: folder baru bernama coding-jam-setup di tempat yang mudah dijangkau (Desktop Anda sudah cukup).
👉 Klik Buka (atau Pilih Folder).
Tampilan Pengelola Agen akan terbuka dengan ruang kerja baru (kosong) yang dipilih.
Langkah 2 — Minta Antigravity untuk Memeriksa & Menginstal Alat
👉 Tekan Cmd+L (Mac) atau Ctrl+L (Win/Linux) untuk memfokuskan input chat.
👉 Pastikan pemilih model di bagian bawah menampilkan Gemini 3 Flash (default — cocok untuk ini).
📝 Perintah paling sederhana — tempelkan ini ke dalam chat:
Install uv and git on my computer if they're not already there.
Don't install Node.js. Ask permission before each install command.
📝 Versi yang lebih mendetail (jika Anda mau):
Check whether uv and git are installed by running their --version commands.
For any tool that's missing, install it using the best method for my OS:
- Mac: prefer `brew install` (install Homebrew first if missing)
- Windows: prefer `winget install`
- Linux: prefer `apt install` or `dnf install`
Ask permission before each install command.
Do NOT install Node.js — we'll install it later only if needed.
When done, give me a summary of what's installed.
👉 Tekan Enter untuk mengirim.
🤖 Tonton Agen Bekerja, Klik Izinkan pada Pop-Up
Langkah 3 — Baca Ringkasan
Setelah agen selesai, Anda akan melihat sesuatu seperti:
✅ Setup complete:
- uv 0.4.18 ✅ (installed)
- git 2.42.0 ✅ (already had it)
- Node.js: skipped (will install later if needed)
Jika Terjadi Masalah
✅ Checkpoint: Agen mengonfirmasi bahwa uv dan git telah diinstal. Total waktu: ~3-5 menit (atau ~7 menit jika Homebrew harus diinstal terlebih dahulu di Mac).
Meng-clone Project Anda
1 — Pilih Project Minggu Ini
Coding Jam adalah program 8 minggu dengan mini-project yang berbeda setiap minggunya. Fasilitator akan memberi tahu Anda minggu berapa yang sedang kita lakukan hari ini. Temukan baris tersebut dan salin URL-nya.
Pekan | Project | URL Repo |
1 | Coba Gaya Rambut AI |
|
2 | Pembuat Avatar AI |
|
3 | Kalender Tahun Istimewa Saya |
|
4 | Fridge to Recipe |
|
5 | Botol Mood AI |
|
6 | Portofolio Satu Halaman |
|
7 | Resume Tailor |
|
8 | Percakapan Karakter AI |
|
2 — Kembali ke Layar Selamat Datang
Kita harus kembali ke layar peluncuran untuk menggunakan tombol "Clone Repository".
👉 Di Antigravity, clone project pilihan Anda. Contoh clone minggu 1, tetapi Anda perlu memasukkan repo yang benar
📝 Perintah Referensi
Git clone ⚠️ PASTE_YOUR_PROJECT and save to my local folder: ⚠️ PASTE_YOUR_PROJECT
3 — Jelajahi Project
Lihat daftar file. Anda akan melihat:
File / Folder | Apa Ini |
BRIEF.md | Ide produk — apa yang kita buat, dalam bahasa Inggris sederhana |
referensi/ | Folder dengan aplikasi contoh yang berfungsi. AI akan membaca ini saat menulis kode Anda, sehingga aplikasi Anda cocok dengan pola. |
.gitignore | Daftar file yang harus diabaikan git (teknis — abaikan) |
👉 Klik
BRIEF.md untuk membukanya dan berikut adalah ide projectnya.
✅ Checkpoint: Anda telah meng-clone project, membukanya sebagai ruang kerja, dan membaca BRIEF.md.
3. Menginstal Keterampilan Workshop
"Skill" adalah sekumpulan petunjuk yang disimpan di GitHub yang dapat Anda berikan kepada AI Anda.
Langkah 1 — Minta Antigravity untuk Menginstal Keterampilan
📝 Tempelkan perintah ini di chat:
Please install the workshop skills into this workspace's .agent/skills/
folder. Run these two git clones from the project root:
1. git clone https://github.com/cuppibla/skills-garden .agent/skills/skills-garden
2. git clone https://github.com/google-gemini/gemini-skills .agent/skills/gemini-skills
When Antigravity asks permission to run each command, I'll click Allow.
When done, list the skills that are now available in this workspace.
Langkah 2 — Klik Izinkan pada Dua Jendela Pop-Up
🤖 Anda akan melihat sesuatu seperti
I'll create the .agent/skills/ folder and clone both repos into it.
Running: git clone https://github.com/cuppibla/skills-garden .agent/skills/skills-garden
Izinkan tindakan apa pun jika diminta oleh agen.
👉 Periksa daftar file Anda. Sekarang Anda akan melihat folder .agent/ baru. Klik untuk meluaskannya dan pastikan ada beberapa keterampilan di folder ini seperti skills-garden dan gemini-skills.
Fungsi Setiap Keterampilan (untuk referensi, tidak perlu melakukan tindakan apa pun)
Badge | Fungsinya |
| Menulis dokumen Desain Produk |
| Menulis dokumen Desain UX |
| Menulis dokumen Desain Teknik (dengan bagian Strategi pengujian) |
| Menulis pengujian, menjalankannya, memperbaiki kegagalan secara otomatis (maks. 3 kali percobaan) |
| Skill Google resmi — cara menggunakan Gemini API dengan benar |
| Cadangan yang lebih sederhana jika skill resmi tidak tersedia |
| Referensi gaya visual |
✅ Checkpoint: Daftar file Anda menampilkan folder .agent/skills/ baru dengan skills-garden/ dan gemini-skills/ di dalamnya.
4. The Spec Talk
Spec Talk adalah percakapan berdurasi 2 menit tempat Anda memberi tahu AI apa yang ingin Anda bangun. Tidak ada kode, tidak ada dokumen, belum ada yang dibuat. Kita hanya membicarakannya.
Satu Pertanyaan Wajib
Hal terpenting yang perlu diketahui AI:
"Apa yang MASUK, apa yang KELUAR?"
🎯 MODEL: Gemini 3 Flash (default) — tanya jawab sederhana.
📝 Tempelkan ini:
Here's what's in @BRIEF.md. Before we lock the spec, ask me 3 short
questions to refine it:
1. What's the one input I want the user to provide?
2. What's the magical moment for the user?
3. What are we deliberately NOT building (to keep scope tight)?
DO NOT generate any plans, docs, or code yet. Just ask me the questions
and wait for my answers.
🤖 Berbicara dengan AI dan menyempurnakan rencana Anda
Jangan Buat Dokumen Terlebih Dahulu
Di akhir Spec Talk, agen TIDAK boleh membuat file apa pun. Jika Anda melihat product.md atau file baru lainnya muncul, Anda dapat memberi tahu agen: "Berhenti — hapus semua dokumen yang baru saja Anda buat. Kita masih dalam tahap Diskusi Spesifikasi."
Tips
✅ Checkpoint: Anda telah melakukan percakapan singkat dengan Antigravity tentang ide produk Anda, dan Antigravity memahami input dan outputnya. Belum ada file yang dihasilkan.
5. Buat 3 Dokumen Desain
Sekarang AI menulis tiga rencana, di atas kertas, sebelum kode apa pun terjadi. Kita melakukan ketiganya dalam satu perintah menggunakan tiga keterampilan dokumen desain secara berurutan.
3 Dokumen
File | Isi Penawaran | Keahlian yang Digunakan |
product.md | Siapa pengguna, apa yang kita selesaikan, fitur apa |
|
ui.md | Tampilan layar, warna, font, tata letak |
|
engineering.md | Tech stack, struktur file, + Bagian strategi pengujian |
|
Langkah 1 - Buat Ketiga Dokumen Sekaligus
🤖 Beralih ke Gemini 3.1 Pro Dengan Pemikiran Rendah (Direkomendasikan)
📝 Tempelkan ini — satu perintah melakukan ketiganya:
Apply all three design-doc skills in this order:
1. pm-design-doc from .agent/skills/skills-garden/design-doc-skills/pm-design-doc/
→ Generates product.md
2. ux-design-doc from .agent/skills/skills-garden/design-doc-skills/ux-design-doc/
→ Generates ui.md (based on the product.md you just created)
3. eng-design-doc from .agent/skills/skills-garden/design-doc-skills/eng-design-doc/
→ Generates engineering.md (based on product.md, ui.md, and @BRIEF.md)
→ MUST include a "Testing strategy" section with real content
(specific functions to unit-test, one integration test per major flow,
and what's deliberately NOT being tested)
Use the patterns in @reference/ as guidance for the engineering doc
(but vary if the brief justifies it).
Save all three files in the project root. After each one is saved,
briefly confirm what you saved before moving to the next.
When all three are done, give me a final summary listing the section
titles in each file.
Langkah 2 — Verifikasi File yang Disimpan
👉 Periksa daftar file Anda. Sekarang Anda akan melihat (selain yang ada sebelumnya):
codingjam-week-1/
├── product.md ← NEW
├── ui.md ← NEW
├── engineering.md ← NEW
├── BRIEF.md
├── reference/
└── .agent/
Langkah 3 - Tinjau & Lakukan Iterasi
Anda adalah bosnya. AI menulis rencana. Sekarang Anda membacanya dan meminta perubahan.
Kebiasaan yang Paling Penting
Jika Anda ingin melakukan perubahan, ubah DOC — bukan kode. Dokumen ini adalah sumber tepercaya.
🤖 Baca & Tinjau Ketiga Dokumen
👉 Buka setiap file (klik dalam daftar file), dari atas ke bawah:
product.md— Apakah ini menggambarkan apa yang saya inginkan?ui.md— Apakah layar dan tampilannya sudah benar?engineering.md— Apakah strategi Pengujian masuk akal? (Anda tidak perlu memahami teknologi — cukup periksa APAKAH ada rencana.)
🤖 Sekarang dokumen sudah siap, lanjutkan ke langkah berikutnya.
6. Menerapkan + Menguji
Bagian terbesar dari codelab. AI mengambil tiga dokumen dan membangun aplikasi — kode DAN pengujian secara bersamaan, dalam sekali proses. Saat bagian ini berakhir, Anda akan memiliki codebase yang berfungsi dan lulus pengujiannya sendiri.
Mengapa Kode + Pengujian Bersama?
engineering.md Anda sudah menentukan pengujian yang harus ada (bagian Strategi pengujian). Penerapan belum selesai hingga pengujian tersebut lulus. Jadi, kita melakukan keduanya dalam satu tahap.
🤖 Beralih ke Gemini 3.1 Pro Dengan Kemampuan Berpikir Tinggi (Direkomendasikan)
Langkah 1 — Minta AI untuk Membuat Kode DAN Pengujian
📝 Tempelkan ini:
You're going to do two things in one shot.
PART 1 — IMPLEMENT THE APP CODE
- Build it according to @engineering.md (stack, file structure)
- Match the UI described in @ui.md
- Use the patterns in @reference/ as guidance for code style
- Backend: use Python with `uv` for dependency management
- If your chosen stack requires Node.js and it isn't installed on my
system, install it via Antigravity (use brew/winget/apt) — ask
permission first
- DO NOT start any dev servers — that's a later section
PART 2 — APPLY THE TEST-GATE SKILL
After the code is written, apply the test-driven-dev skill from
.agent/skills/skills-garden/eng-skills/test-driven-dev.md.
Use the "Testing strategy" section in @engineering.md as the test plan.
IMPORTANT: Mock the Gemini API calls in tests — use a stub that returns
fake response data. The real API key isn't set up yet, and tests should
be deterministic and free anyway (best practice).
The skill should:
1. Write the tests described in the Testing strategy
2. Run them (use pytest for Python, Vitest or Jest for JS)
3. If any fail, fix the CODE (not the tests) and re-run
4. Up to 3 retry attempts max
5. If still failing after 3 tries, STOP and tell me what's broken
When Antigravity asks permission to run commands (uv sync, uv pip
install, pytest, etc.), click Allow.
Report results when both parts are done.
🤖 Klik Izinkan pada Pop-Up (Beberapa)
Langkah 2 — Baca Laporan Akhir
Setelah selesai, periksa:
- ✅ Folder
backend/ada dengan kode - ✅ Folder
frontend/ada dengan kode - ✅ Folder
tests/ada dengan file pengujian - ✅ Ringkasan menyatakan "semua pengujian lulus" (bukan "gagal setelah 3 kali percobaan ulang")
- ✅ Agen TIDAK memulai server apa pun
Bagaimana Jika Semua 3 Percobaan Ulang Pengujian Gagal?
Jarang terjadi, tetapi mungkin. Biasanya, hal ini berarti strategi Pengujian dalam dokumen teknik tidak realistis untuk apa yang dibangun.
📝 Tempelkan ini:
The auto-fix loop hit the 3-try cap. Pull up @engineering.md and look
at the Testing strategy section. Is the strategy realistic for what
got built? Suggest updates to the doc so the tests align with reality.
Don't change the code yet — update the doc, then re-apply the
test-driven-dev skill.
Bagaimana Jika Ada yang Terlihat Aneh?
👉 Jika AI membuat sesuatu yang tidak sesuai dengan dokumen, kembali ke dokumen — jangan meminta AI untuk "memperbaiki kode" secara terpisah.
Contoh:
I see you built the chat as a popup, but @ui.md says it should be a
full page. Either update ui.md if a popup is actually better, OR
rebuild the chat as a full page to match the current ui.md.
Selalu: dokumen adalah sumber tepercaya.
✅ Checkpoint: Kode ada, pengujian ada, pengujian lulus. Siap untuk menyiapkan kunci API.
7. Penyiapan Kunci API + Google Cloud
Langkah 1 — Dapatkan Kunci Gemini API Anda dari AI Studio (1 menit)
- Buka https://aistudio.google.com/app/apikey di tab browser baru.
- Login dengan Akun Google yang sama.
- Klik "Create API key" (kanan atas).
- Dialog akan terbuka dengan dropdown project:
- Jika Anda sudah membuat project Google sebelumnya, Anda dapat memilihnya dan mengklik "Create API key in existing project"
- Jika TIDAK ada dalam daftar: klik "Buat Project".
- Salin kunci API yang muncul. Dimulai dengan
AIza..., ~40 karakter.
✏️ Tempelkan di tempat yang aman — Anda akan memberikannya ke Antigravity berikutnya.
Langkah 2 — Beri tahu Antigravity untuk Menyiapkan .env (30 detik)
Kembali di Antigravity, buka percakapan.
⚠️ BERHENTI. BACA INI SEBELUM MENEMPEL.
Perintah di bawah berisi placeholder PASTE_YOUR_API_KEY_HERE dan PASTE_YOUR_PROJECT_ID_HERE.
Anda HARUS mengganti nilai ini dengan nilai sebenarnya dari Langkah 1. Jika tidak, file .env akan berisi teks ⚠️ PASTE_... literal dan aplikasi Anda tidak akan berfungsi.
Sebelum mengklik Kirim, pindai perintah dan konfirmasi bahwa Anda melihat:
GEMINI_API_KEY=AIzaSy...(dimulai denganAIzaSy, ~40 karakter)
Jika Anda masih melihat
⚠️ PASTE_...
di mana saja dalam perintah, JANGAN kirim dulu — ganti terlebih dahulu.
📝 Perintah untuk menempel (mengganti
⚠️ PASTE_...
markers terlebih dahulu!):
Apply the gemini-api-dev skill from .agent/skills/gemini-skills/skills/gemini-api-dev/.
(If that skill isn't found, fall back to .agent/skills/skills-garden/eng-skills/gemini-api.md)
Create a .env file in the backend folder with these settings:
- GEMINI_API_KEY= ⚠️ PASTE_YOUR_API_KEY_HERE
- Any other env vars the app needs based on @engineering.md
Also verify:
- .env is in .gitignore so the key never gets committed
- The backend code reads GEMINI_API_KEY at startup
- The Gemini SDK is initialized correctly (use google-genai for Python)
When Antigravity asks permission to install Python packages, click Allow.
When done, show me the .env contents with the KEY redacted (just first 6 chars + ...).
🤖 Diharapkan: Agen membuat .env, menginstal google-genai (Anda mengklik Izinkan), mengonfirmasi dengan kunci yang disamarkan:
✅ .env created at backend/.env
GEMINI_API_KEY=AIzaSy... (40 chars, redacted)
.env is already in .gitignore ✓
Backend reads GEMINI_API_KEY via os.getenv() ✓
Gemini client initialized ✓
8. Pratinjau & Verifikasi
Kode dibuat. Pengujian berhasil. Kunci API dikonfigurasi. Sekarang buka aplikasi dan klik.
Yang Ditemukan Manusia (Yang Tidak Ditemukan Pengujian)
Tests Catch | Manusia Menangkap |
Nilai pengembalian salah | Warna jelek |
Panggilan fungsi yang rusak | Teks yang membingungkan |
Impor yang tidak ada | Tombol di tempat yang aneh |
Error selisih satu | Animasi terasa tersendat |
Bug logika | Suasananya tidak enak |
Langkah 1. Minta Antigravity untuk Memulai Server Dev
🎯 MODEL: Default (Flash) tidak masalah.
📝 Tempelkan ini:
Please start the dev server(s) so I can preview the app in my browser.
Tell me the URL when it's ready. When Antigravity asks permission to
run the server command, I'll click Allow.
🔔 Pop-up: uv run uvicorn main:app --reload (atau yang serupa) → Klik Izinkan
Langkah 2 — Buka URL Pratinjau
🤖 Agen melaporkan:
Backend running at: http://localhost:8000
Frontend served at: http://localhost:8000 (backend serves it)
URL biasanya http://localhost:8000 atau http://localhost:5173.
👉 Klik URL di chat, atau salin-tempel ke tab browser baru.
Langkah 3 — Klik Semuanya
Gunakan seperti yang dilakukan pengguna sungguhan:
- Klik setiap tombol
- Mengetik sesuatu
- Arahkan kursor ke item
- Coba alur utama dari awal hingga akhir
Jika semuanya terlihat dan terasa sudah benar, lanjutkan ke Langkah 9.7 (tulis README). Langkah 9.4-9.6 hanya diperlukan jika Anda menemukan masalah.
Langkah 4 — Tulis README
Setelah aplikasi Anda berfungsi, kunci aplikasi:
📝 Tempelkan ini:
The app works! Please create a README.md in the project root that explains:
- What this app does (in plain English)
- How to install it on a new machine (uv sync, etc.)
- How to run the dev server(s)
- The 3 design docs (@product.md, @ui.md, @engineering.md) are the
source of truth — anyone can read them to understand the system
Save it as README.md.
🤖 Diperkirakan: README.md muncul dalam daftar file.
Mengapa README Penting
✅ Checkpoint: Anda menjelajahi aplikasi, memperbaiki masalah (jika ada), dan menyimpan README.
9. 🎉 Anda Telah Mengirimkan MVP!
Anda berhasil.
Yang Anda Bangun
- ✅ Aplikasi web yang didukung AI
- ✅ Tiga dokumen desain (
product.md,ui.md,engineering.md) - ✅ Kumpulan pengujian nyata yang berjalan setiap kali Anda mengubah kode
- ✅
README.mdsehingga Anda dapat kembali ke sini kapan saja - ✅ Koneksi ke AI Gemini Google
Anda beralih dari ide → aplikasi yang berfungsi, tanpa menulis satu baris kode pun sendiri. Luar biasa.
Yang Anda Pelajari
Badge | Mengapa Hal Ini Penting |
Spesifikasi → Kode+Pengujian → Verifikasi | Buat rencana terlebih dahulu. Bangun kode dan pengujian bersama-sama. Klik di sekitar terakhir. Selalu dalam urutan tersebut. |
Perbaiki dokumen, bukan kode | Jika ada yang tidak berfungsi, ubah paket dan bangun kembali. Jangan tambal. |
Menguji sebagai gerbang pengaman | Terintegrasi dalam penerapan — AI menangkap hal-hal bodoh sebelum Anda harus melakukannya. |
Aturan regresi | Setiap bug yang ditemukan oleh manusia menjadi pengujian. Bug tidak akan pernah muncul lagi. |
Pivot yang didorong dokumen | Saat arah berubah, ubah dokumen — AI akan menangani sisanya. |
Alur 3 lapisan Antigravity | Bahasa Inggris dalam chat → agen memilih perintah → Anda menyetujui. |
Kembali Minggu Depan?
- Pilih baris lain dari tabel 8 minggu
- Buat clone repo minggu tersebut melalui tombol "Clone Repository" Antigravity
- Keterampilan diinstal baru per ruang kerja (cakupan ruang kerja = tidak ada status sisa)
- Anda dapat menggunakan kembali project Google Cloud yang sama
- Semua hal lainnya adalah alur kerja yang sama yang baru saja Anda pelajari
Langkah Berikutnya
- Publikasikan Project Anda: Publikasikan project Anda di situs Coding Jam.
- Membuat di rumah: Ketiga dokumen Anda bersifat portabel. Buka di alat AI apa pun dan terus membangun
- Ajak teman: Lakukan penyandingan melalui codelab ini dengan orang baru. Mengajar adalah cara tercepat untuk belajar