Membangun dengan Google Antigravity

1. Pengantar

Google Antigravity (disebut sebagai Antigravity di bagian lain dokumen ini) adalah IDE agentic dari Google. Dalam codelab Memulai Antigravity, Anda dapat mempelajari dasar-dasar Antigravity. Dalam codelab ini, kita akan menggunakan Antigravity untuk membangun aplikasi nyata. Kita akan beralih dari riset web sederhana ke pembuatan aplikasi full-stack dan pengujian unit tingkat perusahaan.

Prasyarat:

2. Tentang Kasus Penggunaan

Karena Anda memiliki pemahaman dasar tentang Antigravitasi, mari kita pelajari beberapa kasus penggunaan untuk melihat cara kerjanya. Perhatikan bahwa Antigravity adalah platform yang mengutamakan Agen. Artinya, dalam sebagian besar kasus, kami hanya memberikan 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.

3. 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:

cffa12c98a68cb6c.png

Kemudian, berikan petunjuk berikut:

8513d489eea0b014.png

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.

9d594588f2ffe6bc.png

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

dc6cf4e7d8425df8.png

Contoh eksekusi oleh Agen ditampilkan di bawah ini:

fb7397cd2cce0682.png

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.

4. Membuat Situs Dinamis dengan Python + Flask

Sekarang mari kita lanjutkan untuk membuat aplikasi web lengkap. Aplikasi web yang akan kita buat adalah situs yang menyediakan 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 pembuatan artefak:

  • Artefak Tugas
  • Artefak Penerapan
  • Artefak Panduan

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

c95d82e1c040698f.png

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

632169a236bc62cc.png

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

e3f6152d6f54d4f9.png

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

abf879f2ce53d055.png

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.

b0fea8aa65c3a1c5.png

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:

ba8455e6f68973e9.png

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.

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.

5. 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.

5be0a668e5a67d85.png

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 dia dapat melakukannya.

Aplikasi final terlihat seperti di bawah dan terlihat cukup bagus.

c9ab6bca97a51a8c.png

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:

498dd946d4e9ae55.png

Kemudian, gambar dibuat saat tugasnya diproses:

c291da9bdb37ff96.png

Terakhir, aplikasi memiliki gambar seperti yang kita minta:

de8f418ba8e4600d.png

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.

6. 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:

  1. Memvalidasi bahwa keranjang tidak kosong.
  2. Periksa stok untuk semua item.
  3. Menghitung harga akhir.
  4. Menagih pembayaran.
  5. Memperbarui inventaris.

Kita akan menugaskan Agen 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:

8368856e51a7561a.png

Hal ini akan menampilkan beberapa penjelasan tentang isi file ini:

b69c217d3372d802.png

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

Can you visually show this class for better understanding

da5bd701323818d4.png

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.

21425379db336dc6.png

Anda juga dapat melihat detail pengujian yang dijalankannya:

48f3320cd76b5cd8.png

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

f962061f115c040f.png

Untuk dicoba

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

7. Selamat

Selamat! Anda telah berhasil menggunakan Google Antigravity untuk:

  • Melakukan riset di web secara mandiri.
  • Bangun dan lakukan iterasi pada aplikasi web full-stack.
  • Buat aset dan sempurnakan estetika UI.
  • Menulis dan memvalidasi pengujian unit yang kompleks dengan tiruan.

Sekarang Anda siap membiarkan Antigravity menangani tugas berat dalam project Anda sendiri.

Dokumen referensi