{count, plural, one {Kursus} other {Kursus}}
Membangun Agen AI dengan Google ADK
{hours} jam
7.6K
Google Antigravity adalah IDE berbasis agen yang memadukan model-model kuat seperti Gemini 3 dengan alur kerja berorientasi agen. Alih-alih menyiapkan alat, terminal, dan sesi browser secara manual, Anda berkolaborasi dengan agen AI yang dapat merencanakan pekerjaan sebagai tugas, menjalankan perintah, mengedit kode, dan bahkan berinteraksi dengan browser Anda untuk menguji serta mendokumentasikan aplikasi.
Dalam tutorial ini, saya akan memandu Anda membangun Dashboard Risiko Keuangan Pribadi yang berfungsi menggunakan Google Antigravity. Anda akan melihat cara:
- Menginstal dan mengonfigurasi Antigravity dengan pengembangan berbantuan agen
- Meminta agen menyiapkan aplikasi Next.js, Tailwind, dan shadcn/ui
- Meninjau dan menyempurnakan rencana implementasi yang dibuat otomatis
- Membiarkan agen menguji aplikasi di browser menggunakan ekstensi Antigravity
- Mengiterasi fitur seperti mode gelap/terang dan debugging dengan penggunaan komputer
Di akhir, Anda akan memiliki dashboard multi-halaman yang memvisualisasikan tingkat risiko untuk Tabungan, Obligasi, Indeks, dan Kripto, lengkap dengan kontrol interaktif dan UI fintech modern, dibangun melalui satu prompt. Saya juga menyarankan untuk melihat panduan API Gemini 3 dan tutorial Gemini 3 Flash kami.
Disclaimer: Tutorial ini hanya untuk tujuan edukasi dan bukan merupakan nasihat keuangan; selalu lakukan riset sendiri atau konsultasikan dengan profesional keuangan yang berkualifikasi sebelum membuat keputusan investasi.
Apa itu Google Antigravity?
Google Antigravity adalah platform pengembangan agent-first yang mengubah IDE Anda menjadi pusat kendali untuk agen AI. Intinya, ini memberi agen kontrol tersinkronisasi atas editor, terminal, dan browser Anda, sehingga mereka dapat merencanakan pekerjaan, mengubah kode, menjalankan perintah, dan memverifikasi perilaku end-to-end dari satu tempat.
Alih-alih menyambungkan skrip dan alat secara manual, Anda mendeskripsikan hasil yang diinginkan dan membiarkan agen Antigravity menangani pekerjaan beratnya. Mereka dapat:
- Mengubah permintaan tingkat tinggi menjadi rencana setingkat tugas atau daftar periksa implementasi
- Menjalankan perintah terminal untuk membuat proyek, memasang dependensi, dan memulai server pengembangan
- Mengedit kode di seluruh workspace Anda, dari berkas layout hingga komponen bersama
- Menggunakan ekstensi browser untuk membuka aplikasi Anda, menelusuri alur, dan menangkap tangkapan layar atau rekaman walkthrough sebagai Artifact.
Antigravity dibangun di atas model Gemini 3 dari Google, tetapi juga mendukung penyedia lain seperti Claude Sonnet 4.5 dan GPT-OSS. Ia hadir dengan dua tampilan utama, yaitu Editor view yang terasa seperti IDE (jika Anda pernah menggunakan Cursor atau VS Code), dan tampilan Agent Manager yang bertindak sebagai pusat kendali untuk tugas yang berjalan lama dan lintas workspace. Keduanya memudahkan Anda bekerja pada level tugas sementara agen menangani detail implementasinya.
Demo Google Antigravity: Membangun Dashboard Risiko Keuangan
Di bagian ini, kita akan membangun dashboard risiko keuangan pribadi dengan Google Antigravity. Agen akan mengubah satu prompt bahasa natural menjadi proyek Next.js yang memodelkan berbagai produk investasi dan profil risikonya.
Pada akhirnya, Anda akan memiliki:
- Dashboard multi-halaman untuk Tabungan, Obligasi, Indeks, dan Kripto
- Slider interaktif untuk horizon waktu
- UI mode gelap/terang yang rapi
- Pemahaman tentang bagaimana agen Antigravity merencanakan, mengimplementasikan, menguji, dan mengiterasi sebuah fitur lengkap
Langkah 1: Menginstal Google Antigravity
Mari mulai dengan mengunduh Google Antigravity dari situs web resmi dan memilih installer sesuai spesifikasi mesin Anda.
Klik Download for MacOS (atau OS Anda), dan Anda akan dibawa ke layar pemilihan platform untuk memilih binary yang sesuai dengan mesin Anda dan menyelesaikan instalasi.
Untuk tutorial ini, saya menjalankannya di Mac dengan Apple Silicon, tetapi antarmukanya tidak akan berbeda pada mesin apa pun.
Setelah diunduh, siapkan Google Antigravity seperti aplikasi lain dan jalankan.
Langkah 2: Penyiapan pertama kali
Pada peluncuran pertama, Antigravity memandu Anda melalui wizard onboarding.
Langkah 2.1: Pilih alur penyiapan
Jika Anda pengguna mahir Cursor atau VS Code dan ingin menggunakan pengaturannya untuk menyiapkan Antigravity, pilih opsi yang sesuai. Namun, saya suka memulai dari awal, jadi pilih Start fresh dan klik Next.
Langkah 2.2: Menyiapkan Antigravity Agent
Selanjutnya, Anda akan melihat layar tentang penggunaan Agen. Untuk tutorial ini, pilih:
- Pengembangan berbantuan agen (disarankan): Opsi ini membiarkan agen melakukan sebagian besar pekerjaan namun tetap melibatkan manusia agar Anda dapat meninjau rencana dan perubahan saat proses berjalan.
- Eksekusi terminal (Otomatis): Ini memungkinkan agen menjalankan perintah terminal yang aman dan rutin secara otomatis tanpa harus meminta izin setiap saat.
- Kebijakan peninjauan (Agen memutuskan): Biarkan agen memilih kapan perlu tinjauan eksplisit dari manusia vs. kapan bisa melanjutkan sendiri.
- Gunakan allowlist default untuk browser: Ini membatasi akses browser agen ke serangkaian domain dan tindakan yang telah disetujui untuk keamanan tambahan.
Klik Next untuk menyelesaikan penyiapan.
Setelah penyiapan selesai, langkah berikutnya adalah membuat workspace untuk eksperimen kita.
Langkah 3: Membuat workspace baru
Setelah penyiapan selesai, Anda akan masuk ke layar beranda Antigravity. Untuk melanjutkan, klik Open Folder dan buat/pilih direktori baru untuk proyek ini. contoh: ~/Antigravity/personal-finance-dashboard. Folder ini akan menjadi aplikasi Next.js Anda.
Di sisi kanan, Anda akan melihat panel Agen tempat Anda dapat memilih model dan mengirim prompt.
Langkah 4: Membangun aplikasi
Dengan workspace terbuka, pilih model (misalnya, Gemini 3 Pro atau Claude Sonnet 4.5, atau GPT OSS 120B) di panel Agen. Lalu, tempel prompt berikut:
Build me a Next.js app called “Personal Finance Risk Dashboard” that shows different risk profiles for Savings, Bonds, Index Funds, and Crypto, each on its own page.
For every product, display risk level, volatility, and projected returns (with a slider for time horizon),
and use Tailwind plus shadcn/ui to make the UI look like a polished, responsive fintech dashboardCatatan: Pada saat penulisan tutorial ini, saya mencoba model Gemini 3 Pro (low), tetapi terjadi beberapa error. Namun, silakan coba model yang sesuai dengan kasus penggunaan Anda.
Anda akan melihat respons agen seperti berikut:
Segera setelah itu, Antigravity akan mengusulkan perintah terminal untuk membuat kerangka proyek. Cukup klik Accept untuk membiarkan agen menjalankan perintah tersebut dan beberapa langkah latar belakang untuk membuat daftar periksa lengkap untuk aplikasi.
Di bawah ini adalah tangkapan layar langkah-langkah latar belakang yang berjalan di terminal samping, dimulai dengan pemasangan dependensi.
Anda dapat membiarkannya berjalan sambil memantau log.
Langkah 5: Meninjau artifact daftar periksa Tugas
Setelah pembuatan kerangka selesai, agen membuat artifact Task checklist untuk seluruh proyek.
Setiap bagian berisi kotak centang seperti:
- Inisialisasi proyek Next.js dengan TypeScript dan Tailwind CSS
- Menyiapkan pustaka komponen shadcn/ui
- Halaman Tabungan/Obligasi/Indeks/Kripto dengan profil risiko
- Mengimplementasikan mode gelap, animasi, dan layout responsif
- Menguji navigasi dan fungsionalitas slider
Setelah daftar ini siap, agen mulai menyelesaikan setiap tugas satu per satu. Pada titik ini, Anda dapat membuka bilah samping Explorer untuk melihat apa yang dibuat agen:
Kini Anda memiliki berkas standar Next.js, Tailwind, dan shadcn/ui yang siap disesuaikan untuk aplikasi ini.
Langkah 6: Meninjau rencana implementasi
Bersamaan dengan daftar periksa, Antigravity menghasilkan artifact Rencana Implementasi yang lebih terperinci:
Bagian User Review Required biasanya mencakup:
- Pendekatan desain: Mencakup informasi mode gelap, gradasi, animasi, dan desain responsif aplikasi.
- Model data: Parameter ini berisi semua metrik risiko, seperti tabungan, obligasi, dana indeks, dan kripto, untuk aplikasi risiko keuangan kita.
- Struktur aplikasi inti: Menjelaskan bagaimana berkas layout utama akan dimodifikasi untuk menyiapkan gaya global, tipografi, metadata, homepage, dan tema mode gelap.
- Halaman produk: Mencantumkan halaman Next.js khusus seperti
/savings,/bonds,/index-funds,/crypto, serta informasi risiko, volatilitas, dan imbal hasil yang akan ditampilkan masing-masing. - Komponen bersama: Bagian ini mendefinisikan komponen UI yang dapat digunakan ulang seperti bilah navigasi, kartu profil risiko, kalkulator imbal hasil, dan kartu ringkasan produk yang digunakan di beranda dan halaman produk.
- Utilitas dan tipe: Mencakup utilitas TypeScript di
lib/financial-data.tsyang memuat data produk, profil risiko, perhitungan proyeksi imbal hasil, dan fungsi pembantu untuk memformat uang dan persentase. - Rencana verifikasi: Menguraikan bagaimana aplikasi akan diuji, termasuk menyalakan server dev, memeriksa setiap halaman dan slider secara manual, memvalidasi mode gelap dan responsivitas, serta menggunakan agen browser untuk merekam walkthrough lengkap dengan tangkapan layar.
Kita dapat menyesuaikan angka risiko jika menginginkan data yang lebih realistis atau menambahkan persyaratan tambahan. Terakhir, tambahkan komentar di artifact Task/Implementation Plan jika Anda ingin agen menyesuaikan arah.
Setelah rencana terlihat baik, klik Proceed di tab Implementation Plan. Saat Anda melakukan ini, agen akan mulai memodifikasi dan membuat berkas sumber di bawah direktori src/. Ia akan membangun halaman individual untuk Tabungan, Obligasi, Indeks, dan Kripto.
Sepanjang proses, ia akan membuat komponen yang dapat digunakan ulang untuk kartu, slider, dan grafik, menerapkan styling Tailwind dan shadcn/ui di seluruh aplikasi.
Akhirnya, Anda akan melihat Background Steps dan Progress Updates baru untuk setiap perubahan kode.
Langkah 7: Pengujian dan verifikasi
Setelah implementasi selesai, Antigravity beralih ke Testing and Verification. Anda akan melihat item progres baru saat Antigravity meminta menggunakan browser melalui tombol Setup atau Deny. Cukup klik Setup untuk melanjutkan.
Sebelum agen dapat berinteraksi dengan browser, Anda memerlukan ekstensi resmi.
Kunjungi laman Chrome Web Store dan klik Add to Chrome.
Setelah instalasi, ketika agen mengendalikan browser, Anda akan melihat cahaya di sekitar layar seperti berikut:
Cahaya ini menunjukkan bahwa Antigravity Agent sedang aktif menggunakan browser, yaitu mengklik, menggulir, dan menguji aplikasi sebagai bagian dari langkah verifikasi.
Langkah 8: Meninjau artifact walkthrough
Saat pengujian selesai, Anda akan melihat ringkasan Progress Updates terakhir sebagai berikut:
Artifact Walkthrough biasanya mencakup:
- Tangkapan layar setiap halaman
- Sesi browser terekam saat agen menelusuri aplikasi
- Deskripsi naratif tentang apa yang diuji (contoh: "Memverifikasi slider halaman Tabungan memperbarui proyeksi imbal hasil secara real-time")
Jika semuanya terlihat baik, klik Accept all untuk menerapkan perubahan.
Berikut aplikasi final kami:
Langkah 9: Mengedit dashboard
Sekarang mari iterasi UI. Misalnya Anda menginginkan toggle mode gelap/terang di header dashboard dan menambahkan beberapa grafik untuk setiap halaman. Di Task atau Implementation Plan, atau langsung di panel Agen, Anda dapat meminta:
Antigravity akan:
- Memperbarui komponen layout untuk menyertakan toggle tema (kemungkinan menggunakan utilitas tema shadcn/ui)
- Menambah, mengganti, atau menghapus komponen grafik
- Menjalankan ulang aplikasi dan menguji toggle di browser
Sekarang klik Submit, dan komentar kita sebelumnya serta komentar ini akan diimplementasikan.
Langkah 10: Meninjau error dan debugging
Dalam praktiknya, Anda mungkin melihat bahwa peninjauan sering memunculkan banyak error, mungkin karena model, tetapi Antigravity tetap melanjutkan pengerjaan dengan Computer Use.
Bahkan ketika agen menemui error, ia dapat:
- Membaca pesan error di terminal
- Membuka aplikasi di browser dan mereproduksi masalah
- Mengambil tangkapan layar dan rekaman playback dari kondisi yang rusak
- Menggunakan petunjuk visual dan log tersebut untuk memperbaiki bug
Anda dapat mengikuti perkembangannya dengan membuka Walkthrough atau memeriksa Progress Updates baru untuk langkah debugging.
Pada titik ini, Anda telah:
- Meminta agen membuat kerangka aplikasi Next.js + Tailwind + shadcn/ui lengkap
- Meninjau dan mengedit Rencana Implementasi terstruktur
- Membiarkan Antigravity menangani penyiapan, pengodean, pengujian, dan verifikasi browser
- Melakukan iterasi pada UI dengan komentar dan prompt tambahan
- Menyaksikan agen melakukan debug masalah melalui penggunaan komputer dan tangkapan layar
Kini aplikasi final kita siap untuk ditinjau.
Langkah 11: Hasil akhir
Setelah melakukan iterasi pada toggle dan layout, Anda akan mendapatkan aplikasi akhir di mana grafik dihapus, dan toggle mode terang/gelap berfungsi di seluruh dashboard.
Mode gelap:
Mode terang:
Anda dapat melihat dashboard kami beraksi pada video di bawah ini:
