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 ajanlarınızın merkezi komuta merkezi olarak görev yapar 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 düzeyde bilgi sahibi olma. Google Antigravity'ye Giriş başlıklı codelab'i tamamlamanız önerilir.

2. Kullanım Alanları Hakkında

Antigravity'nin temel işleyiş şeklini 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 görevi 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 testi kullanım alanları oluşturup doğrulamaya ve tam bir web sitesi geliştirmeye kadar uzanır. Hadi gidelim.

3. Öne Çıkan Haberler

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 yöntem olabilir.

Bu örnekte, 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 edip izninizi istemesi gerektiğini belirler. URL'leri okumak için sizden birkaç kez izin isteyebilir. Bu proje için izin vermeyi seçebilirsiniz.

Düşünme sürecine yakından dikkat etmeli ve Agent'ın işini nasıl yaptığını görmelisiniz. Agent'ın örnek bir çalışması aşağıda gösterilmiştir:

Deneyebileceğiniz özellikler

• Bunu 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 sitesini 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.

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 edip önce bir uygulama planı oluşturur. İstemde belirttiğiniz şartları nasıl oluşturmayı ve karşılamayı planladığı konusunda incelemeniz için implementation_plan.md adlı önemli bir öğe oluşturur. Örnek çıktı aşağıda gösterilmiştir:

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

Aşağıda, kampanyamız için oluşturulan örnek bir uygulama planı gösterilmektedir:

Plana yorumlarınızı ekleyebilir ve Temsilci'ye tekrar istem gönderebilirsiniz. Alternatif olarak, 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 ve 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 yapıt 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 ayrıntılar, tamamlanan özellikleri, teknoloji yığınını, doğrulama sonuçlarını ve talimatları ayrıntılı olarak açıklayan başka bir öğe olan Walkthrough ile birlikte vurgulanır.

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

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

Oluşturulan kodu görmek isterseniz 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. Ayrıntıları Ajana 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.

Walkthrough mesajı ve Tasks ile yapılan örnek bir çalıştırma aşağıda 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 bir 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, 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 testlerin yürütülüp doğrulanması için 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 sohbete 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. Son 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österilir.

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 sunar:

İ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 şunlar da karşılanmalıdır:

Bir sonraki adımımız, birim testleri 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, testleri çalıştırdı ve bir hatayı da düzeltti. Çıkışı şu şekilde oldu:

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'ye bırakabilirsiniz.

Referans belgeler

• Codelab : Google Antigravity'yi Kullanmaya Başlama
• Resmi site : https://antigravity.google/
• Belgeler: https://antigravity.google/docs
• İndirme : https://antigravity.google/download
• Google Antigravity'nin YouTube kanalı : https://www.youtube.com/@googleantigravity