Membangun dengan Google Antigravity

1. Pengantar

Dalam codelab ini, Anda akan mempelajari Google Antigravity, platform pengembangan agentic yang dirancang untuk membantu Anda mengembangkan aplikasi di era agen ini. Antigravity berfungsi sebagai pusat perintah terpusat agen AI Anda, yang menyediakan platform terpadu untuk meluncurkan, memantau, dan mengorkestrasi aktivitasnya.

Dalam codelab ini, kita akan menggunakan Antigravity untuk membuat aplikasi nyata. Kita akan beralih dari riset web sederhana hingga membuat aplikasi full-stack dan pengujian unit tingkat perusahaan.

Prasyarat:

• Antigravity dan Antigravity IDE diinstal dan dikonfigurasi.
• Pemahaman dasar tentang Google Antigravity. Sebaiknya selesaikan codelab: Mulai Menggunakan Google Antigravity.

2. Tentang Kasus Penggunaan

Karena Anda memiliki pemahaman dasar tentang Antigravity, mari kita bahas beberapa kasus penggunaan untuk melihatnya beraksi. Perhatikan bahwa Antigravity adalah platform yang mengutamakan Agen. Artinya, dalam sebagian besar kasus, kita cukup memberikan instruksi kepada Agen, lalu Agen akan menjalankan tugasnya sendiri, meminta izin jika diperlukan, menghasilkan artefak, dan memberi tahu kita jika tugas selesai. Oleh karena itu, kita tidak dapat menghasilkan setiap output percakapan Agen dalam setiap kasus penggunaan berikut. Kami akan membagikan instruksi 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 kasus ini, kita akan membuka situs Google Berita dan mengekstrak beberapa informasi dari sana. Namun, Anda dapat bereksperimen dengan mudah menggunakan situs pilihan Anda dan melihat hasilnya.

Kita akan mengasumsikan bahwa kita memiliki folder root yang akan digunakan untuk membuat berbagai project yang akan kita lihat dalam codelab ini. Folder root ini di komputer kita diberi nama agy2-pprojects.

Pertama, buat folder bernama news-highlights di folder di atas untuk memulai dari awal.

Luncurkan Antigravity dan buat Project baru. Tambahkan folder news-highlights ke folder tersebut.

Mulai percakapan baru di ruang kerja news-highlights yang baru diimpor:

Kemudian, berikan perintah berikut: "buka news.google.com dan berikan ringkasan berita saat ini."

Tindakan ini akan memulai proses Agen dan akan menentukan bahwa Agen perlu mengunjungi situs news.google.com dan meminta izin Anda. Anda mungkin diminta beberapa kali untuk membaca URL dan Anda dapat memilih untuk memberikan izin untuk project ini, dll.

Anda harus memperhatikan dengan cermat Proses penalarannya dan melihat cara Agen melakukan pekerjaannya. Contoh eksekusi oleh Agen ditampilkan di bawah:

Untuk dicoba

• Setelah Anda memahaminya, pilih situs yang tersedia dan yang Anda inginkan untuk dikunjungi 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 buat 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, buat folder baru bernama conference-website. Pastikan Anda telah membuat project baru di antarmuka Antigravity Agent dan menambahkan folder conference-website ke project tersebut.

Anda dapat memulai percakapan dengan memberikan perintah yang ditunjukkan di bawah:

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. 

Antigravity akan menganalisis permintaan dan terlebih dahulu membuat Rencana Penerapan. Hal ini akan membuat artefak utama yang disebut implementation_plan.md untuk Anda tinjau dalam hal bagaimana rencana pembuatannya dan pemenuhan persyaratan yang Anda tentukan dalam perintah. Contoh output ditampilkan di bawah:

Sebelum mengklik lanjutkan, lihat rencana penerapan. Anda dapat mengklik link ke file implementation_plan.md di atas atau dengan mengalihkan Panel Tambahan di kanan atas. Tindakan ini akan menampilkan tampilan Artefak dan Anda dapat melihat bahwa saat ini rencana penerapan tersedia untuk ditinjau.

Contoh rencana penerapan yang dibuat untuk menjalankan kami ditampilkan di bawah:

Anda dapat memberikan komentar dalam rencana dan meminta Agent lagi atau untuk saat ini, kita dapat menerima rencana penerapan sebagaimana adanya, dan melanjutkan dengan mengklik tombol Lanjutkan di antarmuka Percakapan.

Agen akan melanjutkan pembuatan file kode sumber dan Anda juga akan melihat bahwa agen memperbarui artefak lain yang disebut Task. Ini adalah daftar tindakan atau tugas yang telah diidentifikasi untuk dilakukan guna mencapai hasil akhir.

Anda dapat mengklik Tugas kapan saja atau bahkan membuka daftar artefak untuk melihat Tugas. Contoh listingan ditampilkan di bawah:

Di suatu titik dalam tugas akhir, saat mencoba menjalankan dan memverifikasi aplikasi, Antigravity akan menyiapkan lingkungan Python dan memerlukan izin Anda untuk menyiapkan lingkungan, menginstal dependensi, dan lainnya. Berikan izin sesuai kebutuhan.

Setelah verifikasi berhasil, detail akan ditandai, bersama dengan artefak lain, yaitu Panduan, yang menjelaskan fitur yang telah selesai, tumpukan teknologi, hasil validasi, dan petunjuk.

Contoh Panduan ditampilkan di bawah:

Situs final saat kita membuka URL ditampilkan di bawah:

Jika ingin melihat kode yang dihasilkan, Anda dapat mengklik Open IDE di sudut kanan atas. Tindakan ini akan membuka Antigravity IDE, yang dapat Anda gunakan untuk melihat kode yang dihasilkan. Contoh screenshot ditampilkan di bawah:

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.
• Tambahkan data tambahan ke Jadwal Acara. Misalnya, Add two more talks to the schedule.
• Minta Agen membuat README atau dokumentasi lainnya untuk aplikasi.

5. Membuat aplikasi produktivitas sederhana

Sekarang kita akan membuat aplikasi web timer Pomodoro sederhana.

Buat folder pomodoro-timer. Pastikan Anda berada di Agent Manager, telah mengimpor dan memilih ruang kerja pomodoro-timer. Mulai dengan perintah ini:

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

Perhatikan cara kerjanya dalam membuat Rencana Penerapan, Daftar tugas, lalu melaksanakannya. Terus perhatikan alurnya, mungkin ada situasi yang akan meminta peninjauan Anda.

Contoh eksekusi dengan pesan dan Tugas Panduan ditampilkan di bawah ini:

Aplikasi final akan terlihat seperti di bawah dan terlihat cukup bagus.

Untuk dicoba

• Tambahkan beberapa gambar ke aplikasi. Misalnya, tambahkan gambar Timer ke aplikasi.
• 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:

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 (order_service.py) yang tersedia secara lokal di folder baru dan Anda telah membuka Project tersebut untuk percakapan 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, kita dapat mulai mengetik @order dan file order_service.py akan ditampilkan.

Kita dapat memberikan tugas yang membantu kita memahami file ini. Berikan perintah berikut:

Explain the @order_service.py file

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

Antigravity menyebutkan bahwa tugas telah selesai dan telah menghasilkan artefak yang berisi visualisasi:

Kita dapat melihat visualisasi seperti yang ditunjukkan di bawah:

dan berikut ini:

Langkah selanjutnya 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.

Ia menjalankan tugasnya, membuat pengujian, menjalankannya, dan memperbaiki bug juga. Berikut output-nya:

Salah satu file yang dihasilkan adalah file pengujian juga. Screenshot-nya ditampilkan di bawah:

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.
• Menulis dan memvalidasi pengujian unit yang kompleks dengan tiruan.

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

Dokumen referensi

• Codelab : Memulai Google Antigravity
• Situs Resmi : https://antigravity.google/
• Dokumentasi: https://antigravity.google/docs
• Download : https://antigravity.google/download
• Channel YouTube untuk Google Antigravity : https://www.youtube.com/@googleantigravity