Google Antigravity ile oluşturma

1. Giriş

Bu codelab'de, ajanların öne çıktığı bu dönemde geliştirme yapmanıza yardımcı olmak için tasarlanmış bir ajan tabanlı geliştirme platformu olan Google Antigravity hakkında bilgi edineceksiniz. Antigravity, yapay zeka temsilcilerinizin merkezi komuta merkezi olarak işlev görür ve etkinliklerini başlatmak, izlemek ve düzenlemek için birleşik bir platform sağlar.

Bu codelab'de, gerçek uygulamalar oluşturmak için Antigravity'yi kullanacağız. Basit web araştırmasından tam yığın uygulamalar ve kurumsal düzeyde birim testleri oluşturmaya geçeceğiz.

Ön koşullar:

• Antigravity ve Antigravity IDE'nin yüklü ve yapılandırılmış olması gerekir.
• Google Antigravity hakkında temel bilgiler Google Antigravity'ye Giriş adlı codelab'i tamamlamanız önerilir.

2. Kullanım alanları hakkında

Antigravity'nin temel işleyişini anladığınıza göre, nasıl kullanıldığını görmek için birkaç kullanım alanına göz atalım. Antigravity'nin önceliğinin Ajan olduğunu unutmayın. Bu nedenle, çoğu durumda yalnızca Aracı'ya talimat veriyoruz. Aracı da kendi başına çalışıyor, görevini yerine getiriyor, gerekirse izin istiyor, yapay içerikler üretiyor ve görev tamamlandığında bizi bilgilendiriyor. Bu nedenle, aşağıdaki kullanım alanlarının her birinde Temsilci sohbetinin her bir çıktısını üretemiyoruz. Talimatları ve beklenen sonuçların birkaç gerekli ekran görüntüsünü paylaşacağız ancak sonuçlarınız biraz farklı olabilir.

Ele alacağımız kullanım alanları, harici sitelerle birkaç görevi otomatikleştirmekten bir proje için birim testleri oluşturup doğrulamaya ve tam bir web sitesi geliştirmeye kadar çeşitlilik gösterir. Hadi gidelim.

3. Haberlerde Öne Çıkanlar

Bu basit bir kullanım alanıdır ancak web sitelerini ziyaret etmek, bilgi ayıklamak, bazı işlemleri yapmak ve ardından verileri kullanıcıya döndürmek için web tarayıcısını kullanabileceğiniz temel nokta olabilir.

Bu durumda, Google Haberler sitesini ziyaret edip buradan bazı bilgileri çıkaracağız. Ancak istediğiniz bir siteyle kolayca deneme yapabilir ve nasıl sonuçlar elde ettiğinizi görebilirsiniz.

Bu codelab'de göreceğimiz farklı projeleri oluşturacağımız bir kök klasörümüz olduğunu varsayacağız. Makinenizdeki bu kök klasörün adı agy2-pprojects.

Öncelikle, yukarıdaki klasörde news-highlights adlı bir klasör oluşturarak sıfırdan başlayın.

Antigravity'yi başlatın ve yeni bir proje oluşturun. news-highlights klasörünü ekleyin.

Yeni içe aktarılan news-highlights çalışma alanında yeni bir görüşme başlatın:

Ardından şu talimatı verin: "news.google.com adresini ziyaret et ve şu anki önemli haberleri bana getir."

Bu işlem, temsilci sürecini başlatır ve news.google.com sitesini ziyaret etmesi ve izninizi istemesi gerektiğini belirler. URL'leri okumak için sizden birkaç kez izin isteyebilir. Bu proje için izin verebilirsiniz.

Düşünme sürecine dikkat etmeli ve Agent'ın işini nasıl yaptığını görmelisiniz. Aşağıda, Agent tarafından gerçekleştirilen örnek bir yürütme gösterilmektedir:

Deneyebileceğiniz özellikler

• Bu durumu anladıktan sonra, kullanılabilir olan ve Agent'ın gidip bazı verileri almasını/özetlemesini istediğiniz bir web sitesi seçin. Kontrol panelleri ve grafikleri olduğunu bildiğiniz bir web sitesi düşünün ve birkaç değer seçmesini isteyin.
• Aşağıdaki istemi deneyin: Visit https://docs.cloud.google.com/release-notes and get me a summary of the release notes, categorized by product.

4. Python + Flask ile Dinamik Web Sitesi Oluşturma

Şimdi de eksiksiz bir web uygulaması oluşturmaya geçelim. Oluşturacağımız web uygulaması, gün boyunca birden fazla konuşmacının sunum yapacağı, 1 günlük teknik bir etkinlik hakkında bilgi veren bir site olacak.

Bir kez daha conference-website adlı yeni bir klasör oluşturun. Antigravity Agent arayüzünde yeni bir proje oluşturduğunuzdan ve bu projeye conference-website klasörünü eklediğinizden emin olun.

Aşağıdaki istemi girerek sohbete başlayabilirsiniz:

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, isteği analiz eder ve önce bir uygulama planı oluşturur. Bu, istemde belirttiğiniz şartları oluşturma ve karşılama konusunda nasıl bir plan yapıldığını inceleyebileceğiniz implementation_plan.md adlı önemli bir yapay nesne oluşturur. Örnek bir çıkış aşağıda gösterilmektedir:

Devam'ı tıklamadan önce uygulama planına göz atın. Yukarıdaki implementation_plan.md dosyasının bağlantısını tıklayabilir veya sağ üstteki Yardımcı Bölme'yi açıp kapatabilirsiniz. Bu işlem, Artifact görünümünü gösterir ve şu anda uygulama planının incelemenize hazır olduğunu görebilirsiniz.

Çalıştırmamız için oluşturulan örnek uygulama planı aşağıda gösterilmektedir:

Plana yorumlarınızı ekleyebilir ve Temsilci'ye tekrar istem gönderebilirsiniz. İsterseniz de uygulama planını olduğu gibi kabul edip Sohbet arayüzündeki Devam düğmesini tıklayarak ilerleyebilirsiniz.

Aracı, kaynak kodu dosyalarını oluşturmaya devam eder. Ayrıca, Görev adlı başka bir yapıyı da güncellediğini fark edersiniz. Bu, nihai sonuca ulaşmak için yapılması gereken işlemlerin veya görevlerin listesidir.

Görevleri görüntülemek için istediğiniz zaman Görev'i tıklayabilir veya yapay nesne listesini ziyaret edebilirsiniz. Aşağıda örnek bir giriş gösterilmektedir:

Son görevde, uygulamayı çalıştırmaya ve doğrulamaya çalıştığı bir noktada Antigravity, bir Python ortamı oluşturur ve ortamı oluşturmak, bağımlılıkları yüklemek ve daha fazlası için izninizi ister. Gerekli izinleri verin.

Doğrulama başarılı olduğunda, tamamlanan özellikler, teknoloji yığını, doğrulama sonuçları ve talimatlar hakkında ayrıntılı bilgi veren bir başka öğe olan Walkthrough ile birlikte ayrıntılar vurgulanır.

Aşağıda örnek bir Walkthrough gösterilmektedir:

URL'yi ziyaret ettiğimizde nihai web sitesi aşağıdaki gibi gösterilir:

Oluşturulan kodu görmek istiyorsanız sağ üst köşedeki IDE'yi aç'ı tıklayabilirsiniz. Bu işlem, oluşturulan kodu görüntülemek için kullanabileceğiniz Antigravity IDE'yi açar. Örnek ekran görüntüsü aşağıda gösterilmektedir:

Deneyebileceğiniz özellikler

• Uygulamaya istediğiniz ek işlevleri ekleyin. Ajan'a ayrıntıları verin ve önce görev listesini, ardından uygulama planını vb. değiştirerek görevini nasıl yerine getirdiğini gözlemleyin.
• Etkinlik programına ek veriler ekleyin. Örneğin, Add two more talks to the schedule.
• Agent'tan uygulama için bir BENİOKU dosyası veya daha fazla doküman oluşturmasını isteyin.

5. Basit bir üretkenlik uygulaması oluşturma

Şimdi basit bir Pomodoro zamanlayıcı web uygulaması oluşturacağız.

pomodoro-timer klasörü oluşturun. Agent Manager içinde olduğunuzdan, pomodoro-timer çalışma alanını içe aktarıp seçtiğinizden emin olun. Şu istemle başlayın:

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

Uygulama planını ve görev listesini nasıl oluşturduğunu ve ardından bu planı nasıl uyguladığını inceleyin. Akışa dikkat etmeye devam edin. İncelemenizi isteyeceği durumlar olabilir.

Aşağıda, Walkthrough mesajı ve Görevler ile ilgili örnek bir çalıştırma gösterilmektedir:

Son uygulama aşağıdaki gibi görünüyor ve oldukça iyi görünüyor.

Deneyebileceğiniz özellikler

• Uygulamaya birkaç resim ekleyin. Örneğin, uygulamaya zamanlayıcı resmi ekleyin.
• Oluşturmak istediğiniz uygulamaların birkaç varyasyonunu deneyin. Stillerle ve resimlerle oynayın, değişiklik isteyin vb.

6. Birim testleri oluşturma, sahte saplamalar oluşturma ve testleri doğrulama

Burada deneyeceğimiz son kullanım alanı, sahip olduğumuz belirli bir kod dosyası için birim testleri oluşturmak ve testleri yürütüp doğrulamak üzere Agent'ı kullanmaktır.

Bunun için aşağıda gösterildiği gibi tek bir Python dosyası içeren bir çalışma alanı oluşturacağız:

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}

Yukarıdaki Python dosyasının (order_service.py) yeni bir klasörde yerel olarak bulunduğundan ve Antigravity'de bu Proje'nin iletişime açık olduğundan emin olun.

Bu, checkout işlevinde aşağıdaki temel işlevlere sahip basit bir Sipariş hizmetidir:

1. Alışveriş sepetinin boş olmadığını doğrular.
2. Tüm öğelerin stok durumunu kontrol edin.
3. Nihai fiyatı hesaplar.
4. Ödeme alınır.
5. Envanteri günceller.

Agent'a, birim test durumları oluşturma, sahte uygulamalar sağlama ve testlerin başarılı olduğundan emin olmak için testleri yürütme görevini atayacağız.

Belirli çalışma alanı klasörümüzü açtığımızda, dosyaya referans vermek için artık @ sembolünü de kullanabildiğimizi göreceksiniz. Örneğin, @order yazmaya başladığımızda order_service.py dosyası gösterilmelidir.

Bu dosyayı anlamamıza yardımcı olacak bir görev verebiliriz. Aşağıdaki istemi girin:

Explain the @order_service.py file

Bu işlem, dosyanın ne olduğuyla ilgili bir açıklama gösterir:

İstem aracılığıyla daha iyi bir görselleştirme oluşturmasını isteyebiliriz:

Can you visually show this class for better understanding

Antigravity, görevin tamamlandığını ve görselleştirme içeren bir yapay ürün oluşturduğunu belirtiyor:

Görselleştirmeyi aşağıdaki gibi inceleyebiliriz:

Ayrıca şu koşullardan biri karşılanmalıdır:

Bir sonraki adımımız, birim testlerini oluşturmak ve Agent'tan bunları test etmesini istemektir. Aşağıdaki istemi giriyorum:

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

Görevini yerine getirdi, testler oluşturdu, bunları çalıştırdı ve bir hatayı da düzeltti. Çıkışı:

Oluşturduğu dosyalardan biri de test dosyasıydı. Ekran görüntüsü aşağıda gösterilmiştir:

Deneyebileceğiniz özellikler

Kendi kodunuzu kullanarak, Ajan'dan neler yapmasını isteyebileceğinizi görün. Örneğin, kodunuza daha fazla işlev ekleyebilir veya kodunuzun belirli bölümlerini yeniden düzenleyebilirsiniz.

7. Tebrikler

Tebrikler! Google Antigravity'yi kullanarak şunları başarıyla yaptınız:

• Web'de otomatik olarak araştırma yapın.
• Tam yığın web uygulamaları oluşturun ve bunları yineleyin.
• Sahte verilerle karmaşık birim testleri yazma ve doğrulama

Artık kendi projelerinizde zahmetli işleri Antigravity'nin yapmasına izin verebilirsiniz.

Referans belgeler

• Codelab : Google Antigravity'ye Başlangıç
• Resmi site : https://antigravity.google/
• Belgeler: https://antigravity.google/docs
• https://antigravity.google/download
• Google Antigravity'nin YouTube kanalı : https://www.youtube.com/@googleantigravity