Mulai menggunakan Spec Driven Development di Antigravity

1. Tujuan lab ini

Dalam lab interaktif ini, Anda akan mempelajari cara menggunakan Antigravity untuk membuat aplikasi menggunakan Google Antigravity dan men-deploy-nya di cloud Google. Lab ini juga akan memperkenalkan Anda pada konsep Pengembangan yang Didorong Spesifikasi.

Yang akan Anda pelajari

Pahami dasar-dasar Google Antigravity.
Memahami dasar-dasar Pengembangan yang Didorong Spesifikasi
Pelajari cara men-deploy aplikasi dengan mudah di Cloud Run.

Gambar 1: Antigravity adalah alat pengembangan Agent First yang dikembangkan Google.

2. Penyiapan Lingkungan

Instal Antigravity:

                   👉Download the  [Google Antigravity](https://antigravity.google/docs/get-started) for your environment from  [here](https://antigravity.google/).

👉Instal Antigravity di lingkungan Anda.

👉Buka folder tempat Antigravity Anda diinstal dan klik dua kali untuk membuka penginstal.

👉Ikuti petunjuk penginstal untuk menginstal Antigravity di lingkungan Anda.

Menginstal Python

👉Buka https://www.python.org/downloads/ dan instal Python untuk sistem Anda.

Instal gcloud

👉gcloud adalah alat command line yang memungkinkan Anda melakukan berbagai operasi di Google Cloud. Ikuti petunjuk di sini untuk menginstal gcloud di lingkungan Anda.

👉Setelah diinstal, uji penginstalan dengan membuka terminal sistem dan mengetik gcloud di dalamnya.

Gambar 2: Setelah menginstal gcloud , Anda dapat menguji penginstalan dengan mengetik gcloud di terminal

3. Penyiapan Project

Jika Anda belum memiliki project yang dapat digunakan, Anda harus membuat project baru di konsol GCP. Pilih project di pemilih project (Kiri Atas Konsol Google Cloud)

Gambar 2: Dengan mengklik kotak tepat di samping logo Google Cloud, Anda dapat memilih project. Pastikan project Anda dipilih.

Dalam lab ini, kita akan menggunakan Cloud Shell Editor untuk melakukan tugas. Buka Cloud Shell dan tetapkan project menggunakan Cloud Shell.
Klik link ini untuk langsung membuka Cloud Shell Editor
Buka Terminal jika belum terbuka dengan Mengklik Terminal>New Terminal dari menu. Anda dapat menjalankan semua perintah dalam tutorial ini di terminal ini.
Anda dapat memeriksa apakah project sudah diautentikasi menggunakan perintah berikut di terminal Cloud Shell.

gcloud auth list

Jalankan perintah berikut di Cloud Shell untuk mengonfirmasi project Anda

gcloud config list project

Salin project ID dan gunakan perintah berikut untuk menyetelnya

gcloud config set project <YOUR_PROJECT_ID>

Jika tidak ingat project ID, Anda dapat mencantumkan semua project ID dengan

gcloud projects list

4. Mengaktifkan API

Kita perlu mengaktifkan beberapa layanan API untuk menjalankan lab ini. Jalankan perintah berikut di Cloud Shell:

gcloud services enable aiplatform.googleapis.com
gcloud services enable cloudresourcemanager.googleapis.com

Pengenalan API

Vertex AI API (aiplatform.googleapis.com) memungkinkan akses ke platform Vertex AI , sehingga aplikasi Anda dapat berinteraksi dengan model Gemini untuk pembuatan teks, sesi chat, dan panggilan fungsi.
Cloud Resource Manager API (cloudresourcemanager.googleapis.com) memungkinkan Anda mengelola metadata untuk project Google Cloud Anda secara terprogram, seperti ID dan nama project, yang sering kali diperlukan oleh alat dan SDK lain untuk memverifikasi identitas dan izin project.

5. Mengonfirmasi apakah Kredit Anda telah diterapkan

Pada tahap Penyiapan Project, Anda mengajukan permohonan kredit gratis yang memungkinkan Anda menggunakan layanan di Google Cloud. Saat Anda menerapkan kredit, akun penagihan gratis baru bernama "Akun Penagihan Uji Coba Google Cloud Platform" akan dibuat. Untuk memastikan kredit telah diterapkan, ikuti langkah-langkah berikut di Cloud Shell Editor

curl -s https://raw.githubusercontent.com/haren-bh/gcpbillingactivate/main/activate.py | python3

Jika berhasil, Anda akan dapat melihat hasilnya seperti di bawah: Jika Anda melihat "Successfully linked project", akun penagihan Anda telah disetel dengan benar. Dengan menjalankan langkah di atas, Anda dapat memeriksa apakah akun Anda sudah ditautkan. Jika belum, akun tersebut akan ditautkan untuk Anda. Jika Anda belum memilih project, Anda akan diminta untuk memilih project atau Anda dapat melakukannya terlebih dahulu dengan mengikuti langkah-langkah dalam penyiapan project.

Gambar 3: Konfirmasi penautan akun penagihan

6. Pengantar Google Antigravity

Google Antigravity adalah alat pengembangan software yang mengutamakan AI dan dikembangkan oleh Google DeepMind. Google Antigravity memanfaatkan pengetahuan Pengembangan Software yang dikumpulkan dalam jangka waktu yang lama dengan AI canggih untuk memberikan pengalaman pengembangan yang lancar dan mulus yang didukung AI bagi developer.

Berikut beberapa fitur utama Google Antigravity.

Gambar di bawah menunjukkan elemen dasar Google Antigravity.

👉Buka browser dan mulai jelajahi berbagai bagian browser.

Gambar 4: Elemen dasar Google Antigravity, detailnya ada di Tabel 1

Tabel 1: Detail komponen dasar di Google Antigravity

`Component Index`	`Component Name`	`Function`
`1`	`Agent Manager`	`Provide access to your agent manager where you can manage all your agents`
`2`	`Toggle Agent Pane`	`Toggles and untoggles your agent pane`
`3`	`New Session`	`Starts a new Agent Conversation while keeping old ones separately.`
`4`	`Past Conversations`	`Retrieve previous conversations`
`5`	`Agent Pane`	`The agent pane where you can have conversation with the AI agent`
`6`	`Explorer`	`File explorer`

Model Gemini 3 dan Nanobanana bawaan: Dengan Google Antigravity, Anda dapat menggunakan model unggulan Google terbaru seperti Gemini 3 dan Nanobanana. Selain model tersebut, Anda juga dapat menggunakan model pihak ketiga seperti Claude.

Gambar 5: Anda memiliki pilihan untuk menggunakan banyak model di Google Antigravity 2. Coding yang didorong agen: Antigravity memberikan pengalaman coding yang didorong agen secara native yang memungkinkan developer tetap produktif tanpa mengganggu alur kerja mereka.

Perencanaan dan kontrol pengguna penuh: Agen mengambil input Anda dan mengonversi tugas menjadi rencana yang akan meminta persetujuan Anda sebelum dieksekusi. Hal ini memastikan bahwa pengguna dapat mengubah arah agen kapan saja sebelum eksekusi tugas.
Masukan pengguna:Selama eksekusi agen, pengguna dapat memberikan masukan kepada agen jika pengguna perlu memberikan petunjuk tambahan kepada agen.
Multi Agen: Anda dapat membuat beberapa agen untuk mengerjakan berbagai tugas secara bersamaan. Misalnya, Agen A dapat memfaktorkan ulang logika autentikasi Anda, Agen B menulis pengujian unit untuk API baru, dan Agen C meneliti library di latar belakang.
Agen di seluruh editor, terminal, dan browser: Agen Google Antigravity berfungsi di beberapa platform.
Editor: Agen Google Antigravity menulis kode dan menampilkan kode yang ditulis kepada Anda di Editor.
Terminal: Bergantung pada tugasnya, agen Google Antigravity mungkin memerlukan akses ke terminal Anda untuk menjalankan beberapa perintah. Agen dapat menjalankan perintah untuk Anda jika diperlukan.
Browser: Agen juga dapat bekerja dengan browser Anda. Hal ini sangat membantu jika Anda perlu menguji aplikasi web, agen dapat menjalankan aplikasi di browser web, mengujinya, dan men-debugnya.

7. Pengantar Pengembangan yang Didorong Spesifikasi AI

Pengembangan yang Didorong Spesifikasi (Spec-Driven Development) adalah paradigma rekayasa software baru yang menempatkan spesifikasi terstruktur dan agen AI sebagai inti siklus proses pengembangan. Tidak seperti pendekatan "prompt dan perbaiki" (coba-coba) yang umum dalam coding AI dasar, SDD memprioritaskan pengumpulan persyaratan yang cermat, desain sistem/arsitektur, dan perencanaan pengujian. Model ini meminjam ketelitian fase desain model Waterfall, tetapi mengintegrasikannya ke dalam loop iteratif yang gesit dan modern melalui otomatisasi. Meskipun proses ini mengharuskan Anda melakukan perencanaan dan dokumentasi yang cermat sebelumnya, ini sebenarnya adalah proses iteratif karena agen AI memungkinkan penerapan dan pengujian yang cepat. Dengan begitu, Anda bisa mendapatkan masukan lebih cepat yang dapat digunakan untuk meningkatkan kualitas dokumentasi.

Filosofi Inti

Dalam model ini, engineer manusia bertransisi dari "penulis kode" menjadi "arsitek sistem". Tanggung jawab utama manusia adalah deskripsi masalah dan solusi yang akurat. Output mendetail ini berfungsi sebagai Single Source of Truth (SSOT), yang digunakan oleh agen AI untuk membuat, memverifikasi, dan menyempurnakan codebase.

Siklus Proses SDD

Proses ini memiliki komponen berikut. Langkah 1-3 sangat berfokus pada manusia, sedangkan langkah 4-5 berfokus pada Agen AI. Ini adalah proses iteratif yang setelah akhir siklusnya, masukan dapat digunakan untuk meningkatkan spesifikasi.

Pengumpulan Persyaratan: Identifikasi definitif logika bisnis, kebutuhan pengguna, dan batasan sistem.
Desain Arsitektur: Menentukan struktur sistem, model data, dan titik integrasi.
Spesifikasi Sistem & Pengujian: Pembuatan dokumen yang dapat dibaca mesin (atau sangat terstruktur) yang menentukan apa yang dilakukan sistem dan bagaimana sistem akan divalidasi.
Pembuatan Kode Otomatis: Agen AI menggunakan spesifikasi untuk menghasilkan kode yang siap produksi.
Pengujian & Validasi: Rangkaian otomatis memverifikasi kode yang dihasilkan terhadap Spesifikasi Pengujian.

Prinsip Operasional Utama

Loop Desain-Implementasi

Langkah 1 hingga 5 bukanlah jalur linear, melainkan loop masukan berkelanjutan. Karena Pembuatan Kode (Langkah 4) dan Pengujian (Langkah 5) sebagian besar otomatis, tim engineering dapat mengalihkan sebagian besar bandwidth mereka ke tiga tahap pertama. Saat bug ditemukan atau fitur berubah, engineer akan memperbarui spesifikasi, bukan kode, dan memicu loop lagi.

Perincian Modular

Untuk menjaga integritas sistem, SDD harus diterapkan ke modul terperinci, bukan blok monolitik.

Isolasi: Jika modul tertentu gagal divalidasi, hanya modul tersebut yang perlu ditentukan ulang dan dibuat ulang.
Skalabilitas: Modul kecil yang terdefinisi dengan baik mencegah "halusinasi" AI dan memastikan jendela konteks agen AI tetap fokus dan akurat.

Kendali Mutu

Dalam paradigma ini, Spesifikasi Sistem adalah cetak biru, dan Spesifikasi Pengujian adalah hakimnya. Spesifikasi Pengujian memastikan bahwa kode yang dihasilkan akan selalu sesuai dengan persyaratan kualitas yang telah ditentukan sebelumnya. Seluruh proses dapat diintegrasikan dengan lancar ke dalam pipeline CICD yang ada, sehingga memastikan bahwa kesehatan sistem secara keseluruhan juga memenuhi persyaratan kualitas.

Dalam lab ini, kita akan mempelajari dasar-dasar Spec-Driven Development menggunakan Google Antigravity

8. Mengembangkan aplikasi web dengan Google Antigravity

Di lab ini, kita akan membuat aplikasi galeri foto sederhana. Nanobanana, model pembuatan gambar, dibuat di dalam Google Antigravity. Kita akan menggunakan Nanobanana untuk membuat gambar yang diperlukan.

Menyiapkan browser web

Browser web akan digunakan untuk pengujian otomatis aplikasi. Pada langkah-langkah di bawah, kita akan menyiapkan browser agar Antigravity dapat menguji aplikasi secara otomatis.

👉Klik tombol Setelan (ikon Roda gigi) di sudut kanan atas, lalu pilih "Open Antigravity User Settings"
👉Klik Agen di panel kiri dan di bagian ARTIFACT, Tinjau Kebijakan, Pilih "Selalu Lanjutkan"
👉Klik Browser di panel kiri dan pastikan Aktifkan Alat Browser diaktifkan.

Membuat Aplikasi dengan Google Antigravity

👉Buka Google Antigravity dengan mengklik ikon Google Antigravity
👉Buat folder bernama "Galeri" di folder pribadi Anda, misalnya. Desktop.
👉Tekan Buka Folder di Antigravity, lalu pilih folder Galeri. Tindakan ini akan membuka ruang kerja baru di folder Galeri.
👉Jika panel Agen belum terbuka, buka dengan mengklik tombol "Alihkan Panel Agen". Lihat Gambar 4, tombol no. 2.
👉Anda dapat mulai membuat kode dengan mengetik petunjuk di Panel Agen. Sangat penting untuk membuat petunjuk sejelas mungkin. Masukkan perintah berikut di Panel Agen
```
 **English Version:**
```

Create a photo granary with following specs.

1. Visual Design & Layout
Title: The gallery must prominently display the title "My photo gallery" at the top.
Modern Grid: Images will be arranged in a responsive grid that spans the full width of the browser.
Clean Aesthetic: Use a minimalist design with consistent spacing (margins/padding) between photos and no heavy borders or shadows.
Image Scaling: Photos will automatically adjust their size to fit any screen (mobile to desktop) while maintaining their focus using modern CSS cropping techniques.

2. Photo Content
Quantity: The page will feature a total of 20 photos. 
Nature Themes: The collection will include a diverse range of nature photography:
Landscape: Mountains, deserts, and forests.
Water: Waterfalls, oceans, and lakes.
Atmosphere: Northern lights, sunsets, and starry skies.
Macro: Close-ups of flowers, leaves, and moss.
Generate all the needed photos

3. Core Functionality (The "Lightroom" Effect)
Full-Screen View: Clicking any photo triggers a "Lightbox" mode where the background dims and the selected image appears in high resolution at the center of the screen.
Manual Navigation:
Right Arrow: Swaps the current view to the next image.
Left Arrow: Swaps the current view to the previous image.
Infinite Loop: Navigation is continuous; moving "next" from the 20th photo returns the user to the 1st photo.
Exit Strategy: Users can exit the full-screen view by clicking a "Close" button or tapping the dimmed area outside the image.

4. Technical Constraints (Strict)
Vanilla JavaScript Only: Absolutely no external libraries or frameworks (like jQuery, React, or Bootstrap). All logic must be written in raw, standard JavaScript.
Native HTML & CSS: Use only the built-in capabilities of modern web browsers to handle the layout and animations.
Zero Dependencies: The app should function perfectly as a standalone project with no need to download or link to outside scripts.

5. Perform the following tests
Open the App in a web browser
Click on the images and see the image opens in the lightbox
Check the navigation

Versi Jepang:

以下の仕様でフォトギャラリーを作成してください。
1. ビジュアルデザインとレイアウト
タイトル: ページ上部に「My photo gallery」というタイトルを大きく表示すること。
モダンなグリッド: ブラウザの全幅に広がる、レスポンシブなグリッドレイアウトで画像を配置すること。
クリーンな審美性: ミニマリストなデザインを採用し、写真間の余白（マージン/パディング）を一定に保つこと。重い枠線やドロップシャドウは使用しない。
画像のスケーリング: モダンなCSSのトリミング技術（object-fitなど）を使用し、モバイルからデスクトップまで、フォーカスを維持したまま画面サイズに合わせて自動調整されるようにすること。

2. 写真の内容
枚数: 合計20枚の写真を掲載。
自然のテーマ: 多様な自然写真のコレクションにすること。
風景: 山、砂漠、森林。
水: 滝、海、湖。
空気・雰囲気: オーロラ、夕焼け、星空。
マクロ: 花、葉、苔の接写。
画像生成: 2枚の画像を生成し、それらを繰り返して20箇所に配置すること。

3. コア機能（ライトボックス・エフェクト）
全画面表示: 写真をクリックすると「ライトボックス」モードが起動し、背景が暗転して選択された画像が画面中央に高解像度で表示されること。
手動ナビゲーション:
右矢印: 次の画像に切り替え。
左矢印: 前の画像に切り替え。
無限ループ: ナビゲーションは連続的であること。20枚目の写真で「次へ」を押すと1枚目に戻る仕様。
終了方法: 「閉じる」ボタンをクリックするか、画像外の暗転したエリアをタップすることで全画面表示を終了できること。

4. 技術的制約（厳守）
純正JavaScript限定: 外部ライブラリやフレームワーク（jQuery、React、Bootstrapなど）は一切使用禁止。すべてのロジックは標準のJavaScript（生コード）で記述すること。
ネイティブのHTML & CSS: レイアウトやアニメーションには、モダンブラウザの標準機能のみを使用すること。
依存関係ゼロ: 外部スクリプトのダウンロードやリンクを必要とせず、単体で完全に動作するプロジェクトにすること。

5. 以下のテストを実行します
ウェブブラウザでアプリを開きます
画像をクリックすると、ライトボックスで画像が開きます
ナビゲーションを確認します

👉Klik tombol Run. Setelah Anda menjalankan, Agen akan menampilkan rencana eksekusi seperti di bawah.

Gambar 5: Agen antigravitasi akan menunjukkan rencana penerapan

👉Anda akan diminta untuk mengonfirmasi, harap konfirmasi saat diminta seperti di bawah. Antigravity akan otomatis menggunakan Nanobanana dan model LLM yang dipilih untuk menjalankan tugas.

Gambar 6: Antigravity ingin menjalankan perintah , tekan Jalankan untuk mengizinkan menjalankan.

Gambar 7: Tekan Terima semua saat diminta.

👉Setelah kode dibuat, Antigravity akan membuka browser dan memulai pengujian. Setelah pengujian, Anda akan mendapatkan hasil pengujian. Gambar 8: Antigravity akan menampilkan hasil pengujian
👉Jika diminta, tekan "Terima Semua" untuk menyimpan semua kode yang dihasilkan di Panel Agen.
👉Di panel Explorer Antigravity , Anda akan memiliki kode yang baru dibuat. Gambar 9: Kode akhir
👉Untuk menguji aplikasi, klik kanan index.html, dapatkan jalur file, lalu tempelkan jalur tersebut di kolom URL browser web.

Gambar 10: Untuk menguji aplikasi, cukup salin jalur file index.html di browser web Anda

9. Menyiapkan Lingkungan untuk deployment

👉Dapatkan project ID Google Cloud Anda: Buka https://console.cloud.google.com
👉Klik di kiri atas dan salin project ID Anda ke suatu tempat, kita akan menggunakannya di langkah berikutnya. Gambar 11: Salin project ID Anda dan simpan di suatu tempat untuk referensi pada masa mendatang
👉Di Antigravity, buka terminal dengan Mengklik Terminal->New Terminal dari menu.
👉Kita perlu menetapkan variabel lingkungan yang berbeda untuk Windows dan Mac/Linux. Ganti "YOUR CLOUD PROJECT" dengan project yang dicatat di langkah 2. Catatan untuk pengguna Windows PowerShell: Buka PowerShell dalam mode Admin

#This is only for Powershell users.

Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser

#For Windows (Powershell) follow the following steps.
$env:GOOGLE_CLOUD_PROJECT="YOUR CLOUD PROJECT"
$env:GOOGLE_CLOUD_LOCATION="us-central1"

#For Windows Command Prompt  follow the following steps.
set GOOGLE_CLOUD_PROJECT="YOUR CLOUD PROJECT"
set GOOGLE_CLOUD_LOCATION="us-central1"


#for Mac/Linux follow the following steps.
export GOOGLE_CLOUD_PROJECT="YOUR CLOUD PROJECT"
export GOOGLE_CLOUD_LOCATION="us-central1"

👉Login ke konsol, lalu login ke Google Cloud Anda di browser saat diminta.

gcloud auth login
gcloud auth application-default login
gcloud config set project YOUR CLOUD PROJECT

Gambar 12: Lakukan autentikasi

👉Instal Server MCP Cloud Run. Di kanan atas jendela Antigravity, klik "..." . Anda akan melihat opsi "Server MCP", klik opsi tersebut. Server MCP seperti ekstensi untuk agen yang memungkinkan agen mengakses data dan alat eksternal.
👉Masukkan "Cloud Run" di Kotak Penelusuran, lalu Klik "Cloud Run" Gambar 13: Server MCP Cloud Run
👉Kembali ke Panel Agen dengan menekan tombol panah kembali di samping judul Server MCP. Sekarang kita dapat mulai berinteraksi dengan Google Cloud Run. Masukkan perintah berikut di Panel Agen. Tindakan ini akan otomatis menggunakan server MCP Cloud Run dan menampilkan daftar layanan yang berjalan di Cloud Run.

Find me the list of services running in Cloud Run.

👉Deploy aplikasi dengan perintah berikut. Anda cukup men-deploy menggunakan bahasa natural. Antigravity akan otomatis menggunakan server MCP untuk men-deploy.

Deploy this gallery static web application to cloud run with service name "photogallery". Use nginx and assume nginx will use port 80

👉Agen akan menunjukkan tempat aplikasi di-deploy. Misalnya, https://photogallery-85469421903.us-central1.run.app . Server MCP Cloud memudahkan Anda men-deploy aplikasi web ke Cloud Run.

10. Pembersihan

Sekarang, mari kita hapus apa yang baru saja kita buat.

👉Hapus aplikasi Cloud Run yang baru saja kita buat. Buka Cloud Run dengan mengakses Cloud Run . Anda akan dapat melihat aplikasi yang Anda buat di langkah sebelumnya. Centang kotak di samping aplikasi, lalu klik tombol Hapus.

Gambar 38: Menghapus aplikasi Cloud Run

11. Kesimpulan

Selamat! Anda telah berhasil membuat aplikasi menggunakan Google Antigravity dengan mengikuti praktik Pengembangan yang Didorong Spesifikasi.Anda juga mempelajari cara men-deploy aplikasi ke Cloud Run. Ini adalah pencapaian signifikan yang mencakup siklus proses inti aplikasi cloud-native modern, sehingga memberi Anda fondasi yang kuat untuk men-deploy sistem kompleks Anda sendiri.

Rangkuman

Di lab ini, Anda telah mempelajari cara:

Membuat aplikasi multi-agen menggunakan Google Antigravity
Men-deploy aplikasi ke Cloud Run

Referensi yang berguna