Halaman ini diterjemahkan oleh Cloud Translation API.

Mulai Menggunakan Google Antigravity

1. Pengantar

Dalam codelab ini, Anda akan mempelajari Google Antigravity (selanjutnya disebut Antigravity dalam dokumen ini), sebuah platform pengembangan agentik, yang mengembangkan IDE ke era agent-first.

Tidak seperti asisten coding standar yang hanya melengkapi baris secara otomatis, Antigravity menyediakan "Mission Control" untuk mengelola agen otonom yang dapat merencanakan, membuat kode, dan bahkan menjelajahi web untuk membantu Anda membangun.

Antigravity dirancang sebagai platform "agent-first". Hal ini mengandaikan bahwa AI bukan hanya alat untuk menulis kode, tetapi juga aktor otonom yang mampu merencanakan, menjalankan, memvalidasi, dan melakukan iterasi pada tugas engineering yang kompleks dengan intervensi manusia yang minimal.

Yang akan Anda pelajari

Menginstal dan mengonfigurasi Antigravity
Menjelajahi konsep utama Antigravity seperti Agent Manager, Editor, Browser, dan lainnya
Mempelajari beberapa kasus penggunaan dengan Antigravity

Yang Anda butuhkan

Saat ini, Antigravity tersedia sebagai pratinjau untuk akun Gmail pribadi. API ini dilengkapi dengan kuota gratis untuk menggunakan model premier.

Antigravity harus diinstal secara lokal di sistem Anda. Produk ini tersedia di Mac, Windows, dan distribusi Linux tertentu. Selain perangkat Anda sendiri, Anda memerlukan hal berikut:

Browser web Chrome
Akun Gmail (Akun Gmail pribadi).

Codelab ini dirancang untuk pengguna dan developer dari semua level (termasuk pemula).

2. Penginstalan

Kita akan mulai dengan menginstal Antigravity. Saat ini, produk ini tersedia untuk pratinjau dan Anda dapat menggunakan akun Gmail pribadi Anda untuk mulai menggunakannya.

Buka halaman download dan klik versi Sistem Operasi yang sesuai dengan kasus Anda. Luncurkan penginstal aplikasi dan instal aplikasi yang sama di komputer Anda. Setelah Anda menyelesaikan penginstalan, luncurkan aplikasi Antigravity. Anda akan melihat layar yang mirip dengan berikut ini:

Lanjutkan dengan mengklik Berikutnya setiap kali. Langkah-langkah utama dijelaskan di bawah:

Choose setup flow: Opsi ini akan menampilkan opsi bagi Anda untuk mengimpor dari setelan VS Code atau Cursor yang ada. Kita akan memulai dari awal.
Choose an Editor theme type. Kami akan menggunakan tema Gelap, tetapi semuanya terserah Anda, bergantung pada preferensi Anda.
How do you want to use Antigravity agent:

Mari kita pahami hal ini secara lebih mendetail dan ingatlah bahwa hal ini tidak bersifat tetap dan dapat diubah kapan saja, bahkan saat Anda berinteraksi dengan Agen.

Sebelum membahas opsi, mari kita lihat dua properti tertentu di sini (yang Anda lihat di sebelah kanan dialog):

Kebijakan Eksekusi Terminal

Hal ini terkait dengan memberikan kemampuan kepada Agen untuk menjalankan perintah (aplikasi/alat) di terminal Anda. Ada tiga opsi di sini.

Off: Jangan pernah mengeksekusi perintah terminal secara otomatis (kecuali yang ada dalam daftar yang Diizinkan yang dapat dikonfigurasi)
Auto: Agen memutuskan apakah akan menjalankan perintah terminal tertentu secara otomatis. Jika perlu mendapatkan izin Anda, aplikasi akan memutuskan dan meminta izin tersebut kepada Anda.
Turbo: Selalu menjalankan perintah terminal secara otomatis (kecuali perintah yang ada dalam daftar Penolakan yang dapat dikonfigurasi)

Tinjau kebijakan

Saat menjalankan tugasnya, Agen membuat berbagai artefak (Rencana tugas, Rencana penerapan, dll.). Kebijakan peninjauan ditetapkan sehingga Anda dapat menentukan siapa yang memutuskan apakah ulasan perlu ditinjau atau tidak. Apakah Anda selalu ingin meninjaunya, atau membiarkan agen memutuskan hal ini. Oleh karena itu, ada tiga opsi di sini juga.

Always Proceed: Agen tidak pernah meminta ulasan
Agent Decides: Agen akan memutuskan kapan harus meminta ulasan
Request Review: Agen selalu meminta ulasan

Setelah memahami hal ini, 4 opsi tersebut hanyalah preset khusus untuk kebijakan eksekusi dan peninjauan Terminal untuk 3 opsi, serta opsi ke-4 yang tersedia untuk mengontrolnya sepenuhnya secara kustom. Keempat opsi ini tersedia agar kami dapat memilih seberapa besar otonomi yang ingin Anda berikan kepada Agen untuk menjalankan perintah di terminal dan mendapatkan artefak yang ditinjau sebelum melanjutkan tugas.

Keempat opsi tersebut adalah:

Pengembangan berbasis agen
Pengembangan dengan bantuan agen
Pengembangan berbasis ulasan
Konfigurasi kustom

Opsi pengembangan yang dibantu agen adalah opsi yang seimbang dan direkomendasikan karena memungkinkan Agen membuat keputusan dan kembali kepada pengguna untuk mendapatkan persetujuan.

Jadi, pilih opsi Anda dan untuk saat ini, sebaiknya gunakan pendekatan yang direkomendasikan.

Configure your Editor: Pilih preferensi Anda.
Sign in to Google: Seperti yang disebutkan sebelumnya, Antigravity tersedia dalam mode pratinjau dan gratis jika Anda memiliki akun Gmail pribadi. Jadi, login sekarang dengan akun Anda. Pastikan Anda membuat Profil Chrome baru untuk hal ini. Tindakan ini akan membuka browser sehingga Anda dapat login. Jika autentikasi berhasil, Anda akan melihat pesan yang mirip dengan yang di bawah dan Anda akan diarahkan kembali ke aplikasi Antigravity. Ikuti alurnya.
Terms of Use: Anda dapat memutuskan apakah ingin mengaktifkan atau tidak, lalu klik Berikutnya.

Tindakan ini akan membawa Anda ke momen penting, saat Antigravity akan menunggu untuk berkolaborasi dengan Anda. Kita siap memulai.

3. Pengelola Agen

Antigravity membuat fork dari fondasi Visual Studio Code (VS Code) open source, tetapi mengubah pengalaman pengguna secara radikal untuk memprioritaskan pengelolaan agen daripada pengeditan teks. Antarmuka dibagi menjadi dua jendela utama yang berbeda: Editor dan Agent Manager. Pemisahan masalah ini mencerminkan perbedaan antara kontribusi individu dan pengelolaan engineering.

Pengelola Agen: Kontrol Misi

Saat meluncurkan Antigravity, pengguna biasanya tidak disambut oleh hierarki file, tetapi oleh Pengelola Agen, seperti yang ditunjukkan di bawah:

Antarmuka ini berfungsi sebagai dasbor Mission Control. Dirancang untuk orkestrasi tingkat tinggi, yang memungkinkan developer membuat, memantau, dan berinteraksi dengan beberapa agen yang beroperasi secara asinkron di berbagai ruang kerja atau tugas.

Dalam tampilan ini, developer bertindak sebagai arsitek. Mereka menentukan tujuan tingkat tinggi, contohnya:

Memfaktorkan ulang modul autentikasi
Memperbarui hierarki dependensi
Buat rangkaian pengujian untuk Billing API

Seperti yang ditunjukkan diagram di atas, setiap permintaan ini memunculkan instance agen khusus. UI memberikan visualisasi alur kerja paralel ini, menampilkan status setiap agen, Artefak yang telah mereka hasilkan (rencana, hasil, perbedaan), dan permintaan persetujuan manual yang tertunda.

Arsitektur ini mengatasi batasan utama IDE sebelumnya yang lebih mengutamakan pengalaman chatbot, yang bersifat linear dan sinkron. Di antarmuka chat tradisional, developer harus menunggu AI selesai membuat kode sebelum mengajukan pertanyaan berikutnya. Di Tampilan Pengelola Antigravity, developer dapat mengirim lima agen berbeda untuk mengerjakan lima bug berbeda secara bersamaan, sehingga secara efektif melipatgandakan throughput mereka.

Jika Anda mengklik Berikutnya di atas, Anda memiliki opsi untuk membuka Workspace.

Anggap saja Workspace seperti yang Anda ketahui dari VS Code dan Anda akan selesai. Jadi, kita dapat membuka folder lokal dengan mengklik tombol, lalu memilih folder untuk memulai. Dalam kasus saya, saya memiliki folder di folder utama saya yang bernama my-agy-projects dan saya memilihnya. Anda dapat menggunakan folder yang sama sekali berbeda.

Perhatikan, Anda dapat melewati langkah ini sepenuhnya jika mau dan Anda juga dapat membuka Workspace kapan saja nanti.

Setelah menyelesaikan langkah ini, Anda akan berada di jendela Pengelola Agen, yang ditampilkan di bawah:

Anda akan melihat bahwa aplikasi langsung diarahkan untuk memulai percakapan baru di folder ruang kerja (my-agy-projects) yang dipilih. Perhatikan saja bahwa Anda dapat menggunakan pengetahuan yang sudah ada tentang cara menggunakan aplikasi AI lainnya (Cursor, Gemini CLI) dan menggunakan @ serta cara lain untuk menyertakan konteks tambahan saat memberikan perintah.

Lihat dropdown Planning dan Model Selection. Dropdown Pemilihan Model memungkinkan Anda memilih salah satu model yang tersedia saat ini, untuk digunakan oleh Agen Anda. Daftar tersebut ditampilkan di bawah ini:

Demikian pula, kita mendapati bahwa Agen akan berada dalam mode Planning default. Namun, kita juga dapat memilih mode Fast.

Mari kita lihat apa yang dikatakan dokumentasi tentang hal ini:

Planning: Agen dapat membuat rencana sebelum menjalankan tugas. Gunakan untuk riset mendalam, tugas kompleks, atau kerja kolaboratif. Dalam mode ini, Agen mengatur pekerjaannya dalam grup tugas, menghasilkan Artefak, dan mengambil langkah-langkah lain untuk meneliti, memikirkan, dan merencanakan pekerjaannya secara menyeluruh demi kualitas yang optimal. Anda akan melihat lebih banyak output di sini.
Fast: Agen akan menjalankan tugas secara langsung. Gunakan untuk tugas sederhana yang dapat diselesaikan lebih cepat, seperti mengganti nama variabel, memulai beberapa perintah bash, atau tugas kecil lainnya yang terlokalisasi. Hal ini berguna saat kecepatan menjadi faktor penting, dan tugasnya cukup sederhana sehingga tidak perlu khawatir kualitasnya akan lebih buruk.

Jika Anda sudah memahami Anggaran penalaran dan istilah serupa di Agen, anggap ini sebagai kemampuan untuk mengontrol penalaran Agen, sehingga berdampak langsung pada anggaran penalaran. Untuk saat ini, kita akan menggunakan setelan default, tetapi ingatlah bahwa pada saat peluncuran, ketersediaan model Gemini 3 Pro adalah sesuai dengan kuota terbatas untuk semua orang. Jadi, Anda akan melihat pesan yang sesuai jika kuota gratis untuk penggunaan Gemini 3 telah habis.

Sekarang, mari kita luangkan waktu untuk membahas Pengelola Agen (jendela) di sini dan memahami beberapa hal, sehingga jelas tentang elemen dasar, cara menjelajahi Antigravity, dan lainnya. Jendela Agent Manager ditampilkan di bawah:

Lihat diagram di atas dengan angka-angka berikut:

Inbox: Anggap ini sebagai cara untuk melacak semua percakapan Anda di satu tempat. Saat Anda mengirim Agen untuk menjalankan tugasnya, tugas tersebut akan muncul di Kotak Masuk dan Anda dapat mengklik Kotak Masuk untuk mendapatkan daftar semua percakapan saat ini. Dengan mengetuk percakapan mana pun, Anda akan melihat semua pesan yang telah dikirim, status tugas, apa yang telah dihasilkan Agen, atau bahkan apakah Agen sedang menunggu persetujuan dari Anda untuk tugas tersebut. Ini adalah cara yang bagus untuk kembali ke tugas sebelumnya yang sedang Anda kerjakan. Fitur yang sangat berguna.
Start Conversation: Klik ini untuk memulai percakapan baru. Tindakan ini akan langsung mengarahkan Anda ke input yang bertuliskan Ask anything.
Workspaces: Kami menyebutkan Ruang Kerja dan bahwa Anda dapat bekerja di ruang kerja mana pun yang Anda inginkan. Anda dapat menambahkan ruang kerja lainnya kapan saja dan dapat memilih ruang kerja mana pun saat memulai percakapan.
Playground: Ini adalah cara yang bagus untuk memulai percakapan dengan agen, lalu jika Anda ingin mengubahnya menjadi ruang kerja, tempat Anda memiliki kontrol yang lebih ketat atas file, dll. Anggap ini sebagai area sementara.
Editor View: Sejauh ini kita berada di tampilan Agent Manager. Anda dapat beralih ke tampilan Editor kapan saja, jika Anda mau. Tindakan ini akan menampilkan folder ruang kerja dan file yang dihasilkan. Anda dapat mengedit file secara langsung di sana, atau bahkan memberikan panduan inline, perintah di editor, sehingga Agen dapat melakukan sesuatu atau mengubah sesuai dengan rekomendasi/petunjuk yang Anda ubah. Kita akan membahas Tampilan Editor secara mendetail di bagian berikutnya.
Browser: Terakhir, kita sampai pada salah satu pembeda jelas yang membuat Antigravity sangat canggih, yaitu integrasinya yang erat dengan browser Chrome. Mari kita mulai menyiapkan Browser di bagian berikutnya.

4. Menyiapkan Antigravity Browser

Sesuai dengan dokumentasi, saat agen ingin berinteraksi dengan browser, agen akan memanggil subagen browser untuk menangani tugas yang sedang dilakukan. Subagen browser menjalankan model khusus untuk beroperasi di halaman yang terbuka dalam browser yang dikelola Antigravity, yang berbeda dengan model yang Anda pilih untuk agen utama.

Sub-agen ini memiliki akses ke berbagai alat yang diperlukan untuk mengontrol browser Anda, termasuk mengklik, men-scroll, mengetik, membaca log konsol, dan lainnya. Gemini juga dapat membaca halaman yang terbuka melalui pengambilan DOM, screenshot, atau penguraian markdown, serta merekam video.

Artinya, kita perlu meluncurkan dan menginstal ekstensi browser Antigravity. Mari kita lakukan dengan memulai percakapan di Playground dan mengikuti langkah-langkahnya.

Pilih Playground dan berikan tugas lanjutan go to antigravity.google kepada Agen seperti yang ditunjukkan di bawah:

Kirimkan tugas. Anda akan melihat Agen menganalisis tugas dan Anda dapat memeriksa proses pemikiran. Pada suatu saat, proses akan berjalan dengan benar dan menyebutkan bahwa proses perlu menyiapkan agen browser seperti yang ditunjukkan di bawah. Klik Penyiapan.

Tindakan ini akan membuka browser dan menampilkan pesan untuk menginstal ekstensi seperti yang ditunjukkan di bawah:

Lanjutkan dan Anda akan diarahkan ke Ekstensi Chrome yang kemudian dapat Anda instal.

Setelah Anda berhasil menginstal ekstensi, Antigravity Agent akan mulai bekerja dan menunjukkan bahwa ia mengharapkan Anda mengizinkannya melakukan tugasnya. Anda akan melihat beberapa aktivitas di jendela browser yang telah dibuka:

Beralih kembali ke tampilan Agent Manager dan Anda akan melihat hal berikut:

Inilah yang kami harapkan terjadi karena kami meminta Agen untuk membuka situs antigravity.google. Beri izin dan Anda akan mendapati bahwa situs telah dibuka dengan aman, seperti yang ditunjukkan di bawah:

Memeriksa Artefak

Sekarang tiba bagian yang menarik. Setelah agen menyelesaikan pekerjaannya, Anda akan dapat melihat seluruh pekerjaannya. Hal ini akan membawa artefak, fondasi yang membangun kepercayaan Anda dalam hal pekerjaan yang telah Anda rencanakan, apa yang telah Anda lakukan sejauh ini, dan bagaimana Anda memverifikasinya.

Artefak mengatasi "Kesenjangan Kepercayaan". Saat agen mengklaim, "Saya telah memperbaiki bug", developer sebelumnya harus membaca kode untuk memverifikasi. Dalam Antigravitasi, agen menghasilkan Artefak untuk membuktikannya.

Antigravity berfokus pada pembuatan artefak utama, bergantung pada tugasnya. Hal ini dapat berkisar dari rencana Tugas hingga Rencana Penerapan dan akhirnya rencana Penjelasan (dengan Verifikasi). Dalam rencana ini, Anda harus mempertimbangkan untuk memiliki hal-hal seperti berikut:

Task Lists & Plans: Sebelum menulis kode, agen membuat rencana terstruktur. Pengguna dapat meninjau, mengedit, dan menyetujui rencana ini.
Code Diffs: Tampilan perbedaan standar yang menunjukkan dengan tepat baris mana yang akan berubah.
Screenshots: Agen merekam status UI sebelum dan setelah perubahan.
Browser Recordings: Untuk interaksi dinamis (misalnya, "Klik tombol login, tunggu spinner, verifikasi dasbor dimuat"), agen merekam video sesi tersebut. Developer dapat menonton video ini untuk memverifikasi bahwa persyaratan fungsional terpenuhi tanpa menjalankan aplikasi sendiri.
Test Results: Log terstruktur dari pengujian yang lulus/gagal yang dibuat dan dijalankan oleh agen.

Di Kanan Atas, di samping Tinjau perubahan di tampilan Pengelola Agen, Anda akan dapat melihat tombol untuk mengaktifkan/menonaktifkan artefak. Jika diaktifkan, Anda dapat melihat daftar artefak yang dihasilkan:

Anda akan melihat tampilan Artefak seperti yang ditunjukkan di bawah. Dalam kasus ini, kami menginstruksikan Agen untuk membuka halaman antigravity.google, sehingga Agen mengambil screenshot, membuat video yang sama, dll.

Developer dapat berinteraksi dengan Artefak ini menggunakan "komentar gaya Google Dokumen". Anda dapat memilih tindakan atau tugas tertentu, memberikan perintah sesuai keinginan Anda, lalu mengirimkannya ke Agen. Kemudian, Agen akan menyerap masukan ini dan melakukan iterasi yang sesuai. Pertimbangkan untuk menggunakan Google Dokumen interaktif, tempat Anda memberikan masukan kepada penulis dan penulis kemudian mengulanginya.

5. Membuka kembali Kotak Masuk

Jika Anda telah memulai beberapa percakapan dengan Agen, Anda sekarang dapat melihat Kotak Masuk di jendela Pengelola Agen. Tindakan ini akan menampilkan semua percakapan Anda. Klik salah satu percakapan untuk melihat histori percakapan tersebut, artefak yang dihasilkan, dan lainnya. Dalam kasus ini, setelah menjalankan percakapan pertama, Kotak Masuk kami menampilkan percakapan yang tercantum, seperti yang ditunjukkan di bawah:

Dengan mengklik percakapan tersebut, Anda akan mendapatkan detailnya:

Anda juga dapat melanjutkan percakapan dari sini.

6. Editor

Editor mempertahankan keakraban VS Code, sehingga memastikan bahwa memori otot developer berpengalaman tetap terjaga. Editor ini mencakup penjelajah file standar, penyorotan sintaksis, dan ekosistem ekstensi.

Anda dapat mengklik tombol Open Editor di kanan atas Agent Manager untuk membuka Editor.

Editor dilengkapi dengan "Agent Awareness".

Inline Command: Editor mendukung vibe coding dan petunjuk inline, tempat pengguna dapat menandai kode dan menginstruksikan agen untuk "Make this more efficient" atau "Add comments explaining this logic".
Agent Side Panel : Gunakan panel di sisi kanan editor untuk berinteraksi langsung dengan agen. Anda dapat memulai percakapan baru dari sini atau memberikan petunjuk untuk mengubah kode Anda.

Saat kita membahas beberapa kasus penggunaan yang berkaitan dengan pengembangan web, tempat Agent membuat beberapa file kode, kita dapat melihat Editor untuk melihat file, membuat perubahan, dan berinteraksi langsung dengan Agent dari sini.

7. Beralih antara Editor dan Pengelola Agen

Perlu diingat bahwa Antigravity memiliki pendapat bahwa Editor dan Pengelola Agen adalah jendela terpisah dan keduanya jelas diperlukan. Anda memiliki opsi untuk beralih dari satu ke yang lain, baik melalui tombol Open Agent Manager di kanan atas saat Anda berada di Editor atau dengan mengklik tombol Open Editor di kanan atas saat Anda berada di Agent Manager.

Atau, Anda juga memiliki pintasan keyboard berikut untuk beralih antara kedua mode: Cmd + E

8. Kasus Penggunaan

Setelah kita memahami dasar-dasar produk, mari kita bahas beberapa kasus penggunaan untuk melihat cara kerjanya. Perhatikan bahwa Antigravity adalah platform yang mengutamakan Agen. Artinya, dalam sebagian besar kasus, kami hanya diberi petunjuk kepada Agen dan Agen kemudian akan melakukan tugasnya sendiri, meminta izin jika diperlukan, menghasilkan artefak, lalu memberi tahu kami jika tugas selesai. Akibatnya, kami tidak dapat menghasilkan setiap output percakapan Agen dalam setiap kasus penggunaan berikut. Kami akan membagikan petunjuk dan beberapa screenshot yang diperlukan dari hasil yang diharapkan, tetapi hasil Anda mungkin sedikit berbeda.

Kasus penggunaan yang akan kita bahas berkisar dari mengotomatiskan beberapa tugas dengan situs eksternal, hingga membuat dan memverifikasi kasus pengujian unit untuk project, hingga pengembangan situs web lengkap. Ayo mulai.

Sorotan Berita

Ini adalah kasus penggunaan sederhana, tetapi dapat menjadi dasar yang memungkinkan Anda menggunakan browser web untuk membuka situs web, mengekstrak informasi, melakukan beberapa tindakan, lalu mengembalikan data kepada pengguna.

Dalam hal ini, kita akan membuka situs Google Berita dan mengekstrak beberapa informasi dari sana. Namun, Anda dapat bereksperimen dengan mudah di situs pilihan Anda dan melihat hasilnya.

Pastikan Anda berada di Agent Manager dan telah memilih Playground, seperti yang ditunjukkan di bawah:

Kemudian, berikan petunjuk berikut:

Tindakan ini akan memulai proses Agen dan akan menentukan bahwa Agen perlu meluncurkan browser, dll. Anda harus memperhatikan Proses berpikir dan melihat cara Agen melakukan pekerjaannya. Jika semuanya berjalan lancar, browser Antigravity akan diluncurkan dan membuka situs seperti yang ditunjukkan di bawah. Bingkai biru di sekitar situs menunjukkan bahwa Agen kini mengontrol browser dan menjelajahi situs untuk mendapatkan informasi.

Setelah selesai, Anda juga akan melihat Artefak yang dibuat, seperti yang ditunjukkan di bawah ini:

Contoh eksekusi oleh Agen ditampilkan di bawah ini:

Perhatikan bahwa di sebelah kiri, kita memiliki Proses berpikir. Anda juga dapat men-scroll poin-poin dan melihat pemutaran serta data lainnya.

Untuk dicoba

Setelah Anda memahaminya, pilih situs yang tersedia dan yang Anda inginkan untuk dikunjungi oleh Agen guna mendapatkan/meringkas beberapa data dari situs tersebut. Pertimbangkan beberapa situs yang Anda ketahui memiliki Dasbor dan diagram, lalu minta situs tersebut untuk memilih beberapa nilai.
Coba perintah berikut: Visit https://docs.cloud.google.com/release-notes and get me a summary of the release notes, categorized by product.

Membuat Situs Dinamis dengan Python + Flask

Sekarang mari kita lanjutkan untuk membuat aplikasi web lengkap. Aplikasi web yang akan kita buat adalah situs yang memberikan informasi tentang acara teknis 1 hari, yang memiliki beberapa sesi sepanjang hari oleh beberapa pembicara.

Sekali lagi, pastikan Anda berada di Agent Manager dan telah memilih Playground.

Berikan perintah berikut:

I would like to generate a website that is a 1-day technical conference informational site.

The website should have the following functionality:
        1. A home page that shows the current date, location, schedule and time table.
        2. The 1-day event is a list of 8 talks in total.
        3. Each talk has 1 or 2 max. speakers. 
        4. A talk has an ID, Title, Speakers, Category (1 or 2), Description and time of the talk.
        5. Each speaker has a First Name, Last Name and LinkedIn url.
        6. Allow for users to search by category, speaker, title.
        7. Give a lunch break of 60 minutes.
        8. Use dummy data for events and speakers, come up with a schedule, the event is about Google Cloud Technologies.
        9. Tech Stack: Python and Flask framework on server side. Front-end is basic HTML, CSS and JavaScript. 
        10. Test out the site on your own for all functionality and provide a detailed README on how to setup, run and make any further changes. 
11. Launch the web application for me to review.

Anda dapat memulai percakapan dengan memberikan perintah di atas:

Saat menjalankan tugasnya, Agen akan melanjutkan dengan membuat artefak:

Artefak Tugas
Artefak Penerapan
Artefak Panduan

Artefak Tugas di bawah ini adalah urutan awal tugas yang diuraikan Agen untuk dilakukan berdasarkan tugas yang diberikan kepadanya. Contoh screenshot dari eksekusi ditampilkan di bawah:

Kemudian, Anda dapat mengklik artefak Rencana Penerapan. Contoh screenshot ditampilkan di bawah:

Terakhir, Anda memiliki artefak Panduan. Isinya adalah semua yang dilakukan Agen seperti yang ditunjukkan di bawah:

Perhatikan bahwa server telah dimulai dan telah memberi saya URL, yang saya klik dan saya memiliki aplikasi, contoh screenshot ditampilkan di bawah:

Jika saya beralih ke Editor, perhatikan di layar bahwa Editor berisi folder tempat aplikasi Python Flask dibuat. Anda juga akan melihat bahwa Agent mode ditandai di sebelah kanan dan Anda juga dapat melanjutkan percakapan di sana.

Sekarang, misalkan kita ingin menambahkan beberapa diskusi lagi ke acara. Kita dapat tetap berada di Editor dan di panel Agen, memberikan petunjuk seperti Add two more talks to the schedule.

Hal ini akan membuat Agen menganalisis persyaratan, memperbarui Tugas, Rencana Penerapan, lalu memvalidasi fungsi yang diperbarui juga. Contoh percakapan ditampilkan di bawah:

Anda dapat beralih kembali ke Pengelola Agen jika Anda mau. Proses ini akan membantu Anda memahami proses peralihan dari Pengelola Agen ke Editor, melakukan perubahan yang sesuai, dan sebagainya.

Catatan: Saat menjalankan tugas ini, Agen mencoba memulai Server Flask di port 5000, yang sedang digunakan di mesin saat ini. Server terus mencoba port gratis berikutnya, hingga memutuskan untuk menggunakan 8080 dan dapat memulai Server.

Untuk dicoba

Tambahkan fungsi tambahan yang Anda inginkan ke aplikasi. Berikan detailnya kepada Agen dan perhatikan cara Agen melakukan tugasnya dengan terlebih dahulu mengubah daftar tugas, lalu rencana penerapan, dan sebagainya.
Minta Agen untuk membuat README atau dokumentasi lainnya untuk aplikasi.

Membuat Aplikasi produktivitas sederhana

Sekarang kita akan membuat aplikasi web penghitung waktu Pomodoro sederhana.

Pastikan Anda berada di Agent Manager dan telah memilih Playground. Berikan perintah berikut:

Create a productivity app that features a Pomodoro timer. Give a calm and aesthetic look to the application.

Perhatikan cara Gemini membuat Daftar tugas, rencana penerapan, lalu melaksanakannya. Terus perhatikan alurnya, mungkin ada situasi yang akan meminta peninjauan Anda. Contoh eksekusi ditampilkan di bawah.

Dalam hal ini, aplikasi juga harus meluncurkan browser Antigravity, melakukan pengujiannya sendiri, lalu mengonfirmasi bahwa pengujian berhasil. Salah satu hal yang dihasilkan adalah Artefak Media yang berisi video verifikasinya. Ini adalah cara yang bagus untuk melihat apa yang diuji. Saya juga menyarankan beberapa perubahan gaya karena tidak diterapkan dan perubahan tersebut dapat dilakukan.

Aplikasi final terlihat seperti di bawah dan terlihat cukup bagus.

Bagaimana kalau kita menambahkan gambar timer yang bagus ke aplikasi. Yang perlu kita lakukan adalah mengeluarkan petunjuk lanjutan seperti yang diberikan di bawah:

Add an image to the application that displays a timer.

Hal ini menyebabkan agen menambahkan tugas baru ke artefak Tugas:

Kemudian, gambar dibuat saat tugasnya diproses:

Terakhir, aplikasi memiliki gambar seperti yang kita minta:

Untuk dicoba

Perhatikan bahwa latar belakang ikon jam pasir di aplikasi tidak transparan. Coba minta agen untuk membuatnya transparan.
Coba beberapa variasi aplikasi yang ingin Anda buat. Bereksperimenlah dengan gaya, gambar, minta perubahan, dll.

Membuat Pengujian Unit, Stub Tiruan, dan Memvalidasi Pengujian

Kasus penggunaan terakhir yang akan kita coba di sini adalah membuat pengujian unit untuk file kode tertentu yang kita miliki dan agar Agen juga menjalankan pengujian serta memvalidasinya.

Untuk itu, kita akan memiliki ruang kerja yang memiliki satu file Python seperti yang ditunjukkan di bawah ini:

from typing import Dict

# --- Custom Exceptions ---
class InventoryShortageError(Exception):
    """Raised when there is not enough item stock."""
    pass

class PaymentFailedError(Exception):
    """Raised when the payment gateway rejects the transaction."""
    pass

class InvalidOrderError(Exception):
    """Raised when the order violates business rules."""
    pass

# --- External Service Interfaces (To be Mocked) ---
class InventoryService:
    def get_stock(self, product_id: str) -> int:
        """Connects to DB to check stock."""
        raise NotImplementedError("Real connection required")

    def decrement_stock(self, product_id: str, quantity: int):
        """Connects to DB to reduce stock."""
        raise NotImplementedError("Real connection required")

class PaymentGateway:
    def charge(self, amount: float, currency: str) -> bool:
        """Connects to Stripe/PayPal."""
        raise NotImplementedError("Real connection required")

# --- Main Business Logic ---
class Order:
    def __init__(self, 
                 inventory_service: InventoryService, 
                 payment_gateway: PaymentGateway,
                 customer_email: str,
                 is_vip: bool = False):
        
        self.inventory = inventory_service
        self.payment = payment_gateway
        self.customer_email = customer_email
        self.is_vip = is_vip
        self.items: Dict[str, Dict] = {} # {product_id: {'price': float, 'qty': int}}
        self.is_paid = False
        self.status = "DRAFT"

    def add_item(self, product_id: str, price: float, quantity: int = 1):
        """Adds items to the cart. Rejects invalid prices or quantities."""
        if price < 0:
            raise ValueError("Price cannot be negative")
        if quantity <= 0:
            raise ValueError("Quantity must be greater than zero")

        if product_id in self.items:
            self.items[product_id]['qty'] += quantity
        else:
            self.items[product_id] = {'price': price, 'qty': quantity}

    def remove_item(self, product_id: str):
        """Removes an item entirely from the cart."""
        if product_id in self.items:
            del self.items[product_id]

    @property
    def total_price(self) -> float:
        """Calculates raw total before discounts."""
        return sum(item['price'] * item['qty'] for item in self.items.values())

    def apply_discount(self) -> float:
        """
        Applies business logic:
        1. VIPs get flat 20% off.
        2. Regulars get 10% off if total > 100.
        3. No discount otherwise.
        """
        total = self.total_price
        
        if self.is_vip:
            return round(total * 0.8, 2)
        elif total > 100:
            return round(total * 0.9, 2)
        
        return round(total, 2)

    def checkout(self):
        """
        Orchestrates the checkout process:
        1. Validates cart is not empty.
        2. Checks stock for all items.
        3. Calculates final price.
        4. Charges payment.
        5. Updates inventory.
        """
        if not self.items:
            raise InvalidOrderError("Cannot checkout an empty cart")

        # 1. Check Inventory Logic
        for product_id, data in self.items.items():
            available_stock = self.inventory.get_stock(product_id)
            if available_stock < data['qty']:
                raise InventoryShortageError(f"Not enough stock for {product_id}")

        # 2. Calculate Final Price
        final_amount = self.apply_discount()

        # 3. Process Payment
        try:
            success = self.payment.charge(final_amount, "USD")
            if not success:
                raise PaymentFailedError("Transaction declined by gateway")
        except Exception as e:
            # Catching generic network errors from the gateway
            raise PaymentFailedError(f"Payment gateway error: {str(e)}")

        # 4. Decrement Stock (Only occurs if payment succeeded)
        for product_id, data in self.items.items():
            self.inventory.decrement_stock(product_id, data['qty'])

        self.is_paid = True
        self.status = "COMPLETED"
        
        return {"status": "success", "charged_amount": final_amount}

Pastikan Anda memiliki file Python di atas secara lokal dalam folder dan Anda memuatnya sebagai Ruang Kerja di Antigravity.

Ini adalah layanan Order sederhana yang memiliki fungsi utama berikut dalam fungsi checkout:

Memvalidasi bahwa keranjang tidak kosong.
Periksa stok untuk semua item.
Menghitung harga akhir.
Menagih pembayaran.
Memperbarui inventaris.

Kita akan menugaskan Agent untuk membuat kasus pengujian unit, menyediakan implementasi Mock, dan menjalankan pengujian untuk memastikan keberhasilannya.

Kita akan membuka folder ruang kerja tertentu dan Anda akan melihat bahwa kita kini dapat menggunakan simbol @ juga untuk mereferensikan file. Misalnya, kami dapat melakukan hal berikut:

Hal ini akan menampilkan beberapa penjelasan tentang isi file ini:

Kita dapat memintanya untuk membuat visualisasi yang lebih baik melalui perintah:

Can you visually show this class for better understanding

Langkah berikutnya adalah membuat pengujian unit dan meminta Agen untuk mengujinya. Saya memberikan perintah berikut:

generate unit tests for this module and test it out with mock implementations.

Agen ini menghasilkan artefak Tugas berikut dan menjalankan tugasnya.

Anda juga dapat melihat detail pengujian yang dijalankannya:

Salah satu file yang dibuatnya adalah file pengujian. Screenshot-nya ditampilkan di bawah ini:

Untuk dicoba

Ambil kode Anda sendiri dan lihat apa yang dapat Anda minta dilakukan Agen, mulai dari menambahkan lebih banyak fungsi hingga memfaktorkan ulang bagian kode Anda.

9. Selamat

Selamat, Anda telah berhasil menginstal dan memahami cara menggunakan Antigravity, platform pengembangan Agent-first. Berbagai kasus penggunaan yang kami coba akan membantu Anda mempertimbangkan persyaratan Anda sendiri dan mencari tahu cara Antigravity dapat berkolaborasi dengan Anda untuk menyelesaikannya.

Dokumen referensi

Situs Resmi : https://antigravity.google/
Dokumentasi: https://antigravity.google/docs
Kasus penggunaan : https://antigravity.google/use-cases
Download : https://antigravity.google/download
Channel YouTube untuk Google Antigravity : https://www.youtube.com/@googleantigravity