Siapkan lingkungan kerja yang bisa dibuktikan: Antigravity membuka project, dependency terpasang, Supabase siap, migration berjalan, dan starter tampil di localhost.
35m bacaanKuis WajibMicro Badge Lesson
Kenali Antigravity & Siapkan Starter
Sebelum meminta AI memperbaiki fitur, pastikan dulu tempat kerjanya hidup.
Ini terdengar sederhana, tapi banyak sesi AI coding gagal bukan karena promptnya buruk. Gagalnya karena project belum bisa dijalankan, .env.local salah, migration belum masuk, atau agent membuka folder yang keliru.
Kalau environment kacau, AI akan menebak. Dan tebakan di awal biasanya membuat error berikutnya makin sulit dilacak.
Di tahap ini, targetmu jelas: starter Platform Donasi Amanah bisa dibuka di browser, terhubung ke Supabase, dan bisa dibaca oleh Antigravity.
Yang harus disiapkan
Kamu butuh tiga hal:
Antigravity
Buka https://antigravity.google dan install aplikasinya. Login dengan akun Google yang akan kamu pakai untuk praktik. Materi praktik ini tidak menjanjikan free tier cukup sampai akhir, jadi pastikan akunmu memang siap dipakai belajar.
Starter project
Folder project bernama donation-platform-app. Simpan di folder kerja yang mudah kamu temukan, misalnya:
Project Supabase
Buat project baru di https://supabase.com. Untuk region, pilih yang dekat, misalnya Singapore.
Install dependency dengan npm
Dari root starter:
bash
npm install
Kenapa npm? Karena target pembelajar materi ini umum. pnpm, yarn, atau bun boleh kamu pakai kalau sudah nyaman, tapi materi resmi memakai npm supaya instruksi paling mudah diikuti.
Setelah install selesai, cek script yang tersedia:
Jangan masukkan service_role key ke frontend. Key itu rahasia dan tidak boleh ada di client. Untuk starter ini, publishable/anon key cukup karena akses data dikendalikan oleh RLS.
Cek apakah dua variabel sudah ada tanpa menampilkan nilainya:
Kalau hasilnya 0 atau 1, berarti ada variabel yang belum benar.
Jalankan starter
Jalankan dev server:
bash
npm run dev
Buka:
text
http://localhost:3000
Kamu harus melihat judul Platform Donasi Amanah dan daftar campaign yang sedang menerima donasi.
Kalau port 3000 sudah dipakai, pakai port lain:
bash
npm run dev -- --port 3001
Lalu buka:
text
http://localhost:3001
Buka project di Antigravity
Di Antigravity, buka folder starter yang sama, misalnya:
text
~/dev/mahir-starter-donasi
Pastikan agent melihat file project, bukan folder parent kosong. Cara mengeceknya: minta Antigravity membaca package.json, tapi jangan biarkan ia mengubah file.
Gunakan prompt ini:
text
Saya sedang menyiapkan starter Platform Donasi Amanah.Tolong cek kesiapan project ini tanpa mengubah file apa pun.Baca package.json, .env.local, dan supabase/migrations/20260829_vertical_slice.sql.Jangan tampilkan isi secret atau nilai env.Laporkan:1. framework dan script npm yang tersedia,2. apakah .env.local memiliki NEXT_PUBLIC_SUPABASE_URL dan NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY,3. tabel utama apa saja yang dibuat migration,4. satu hal yang perlu saya verifikasi manual sebelum lanjut.
Prompt ini tidak meminta coding. Ia meminta agent menjadi pemeriksa awal.
.env.local punya dua variabel Supabase public yang dibutuhkan.
Migration sudah dijalankan di Supabase.
npm run dev menampilkan Platform Donasi Amanah.
Antigravity membuka root project yang benar.
Agent berhasil mengecek kesiapan tanpa mengubah file.
Kalau setup ini terasa agak membosankan, justru bagus. Kita sedang mengurangi sumber error sebelum AI mulai menyentuh kode. Setelah lingkungan hidup, baru kita masuk ke pertanyaan yang lebih penting: aplikasi ini sebenarnya menyelesaikan masalah apa?
Checkpoint KuisTarget: 70%
Kuis 01.0 — Kenali Antigravity & Siapkan Starter
Kuis ini wajib untuk sertifikat. Kamu tetap bisa lanjut ke pelajaran berikutnya dan mengerjakannya nanti.
