Google Antigravity ile oluşturma

1. Giriş

Google Antigravity (belgenin geri kalanında Antigravity olarak anılacaktır), Google'ın temsilci tabanlı bir IDE'sidir. Antigravity'yi kullanmaya başlama codelab'inde Antigravity'nin temel bilgilerini öğrenebilirsiniz. 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:

• Google Antigravity yüklü ve yapılandırılmış olmalıdır.
• Google Antigravity hakkında temel bilgiler Getting Started with Google Antigravity (Google Antigravity'yi Kullanmaya Başlama) adlı codelab'i tamamlamanız önerilir.

Google Cloud kredileri için: Antigravity'yi Google Cloud projeleriyle kullanmanıza yardımcı olmak için bu bağlantıyı kullanarak ücretsiz Google Cloud kredilerinizi kullanın. Krediyi etkinleştirmek ve yeni bir proje oluşturmak için buradaki talimatları uygulayabilirsiniz.

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 öncelikle Temsilci odaklı bir platform 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 uzanmaktadır. Hadi gidelim.

3. Öne Çıkan Haberler

Bu basit bir kullanım alanıdır ancak web tarayıcısını kullanarak web sitelerini ziyaret etme, bilgi çıkarma, bazı işlemleri yapma ve ardından verileri kullanıcıya döndürme gibi işlemler için temel olarak kullanılabilir.

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.

Aşağıda gösterildiği gibi Agent Manager bölümünde olduğunuzdan ve Playground seçeneğini belirlediğinizden emin olun:

Ardından şu talimatı verin:

Bu işlem, Agent sürecini başlatır ve tarayıcının başlatılması gerektiğini belirler. Düşünme sürecine dikkat etmeli ve Agent'ın işini nasıl yaptığını görmelisiniz. Her şey yolunda giderse Antigravity tarayıcısı başlatılır ve site, aşağıda gösterildiği gibi ziyaret edilir. Sitenin etrafındaki mavi kenarlık, aracının artık tarayıcıyı kontrol ettiğini ve bilgileri almak için sitede gezindiğini gösterir.

Çalışmasını tamamladığında, aşağıda gösterildiği gibi Artifacts'in oluşturulduğunu da görmeniz gerekir:

Aşağıda, Agent tarafından gerçekleştirilen örnek bir yürütme gösterilmektedir:

Sol tarafta Düşünce Süreci'nin yer aldığını, ayrıca noktalar arasında kaydırarak oynatmayı ve diğer verileri görüntüleyebileceğinizi unutmayın.

Deneyebileceğiniz şeyler

• 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 yaptığı 1 günlük teknik bir etkinlik hakkında bilgi veren bir site olacak.

Agent Manager içinde olduğunuzdan ve Playground seçtiğinizden emin olun.

Aşağıdaki istemi girin:

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. 

Yukarıdaki istemi girerek sohbete başlayabilirsiniz:

Aracı, görevini yerine getirirken şu öğeleri oluşturur:

• Görev Yapısı
• Uygulama Yapısı
• Adım Adım Açıklamalı Kılavuz Yapısı

Aşağıda verilen Görev Yapısı, Agent'ın kendisine verilen göreve göre yapması gerektiğini çözdüğü ilk görev sırasıdır. Aşağıda, yürütme işleminden alınan örnek bir ekran görüntüsü gösterilmektedir:

Ardından Uygulama Planı yapay nesnesini tıklayabilirsiniz. Örnek ekran görüntüsü aşağıda gösterilmektedir:

Son olarak, Walkthrough (Adım Adım Açıklama) yapay nesnesi bulunur. Aşağıda gösterildiği gibi, temsilcinin yaptığı her şeyi içerir:

Sunucuyu başlattığını ve URL'yi sağladığını fark edin. URL'yi tıkladığımda uygulamayı görüyorum. Aşağıda örnek bir ekran görüntüsü gösterilmektedir:

Düzenleyici'ye geçtiğimde ekranda Python Flask uygulamasının oluşturulduğu klasörün yer aldığını görüyorum. Ayrıca Agent mode simgesinin sağa etiketlendiğini ve konuşmaya orada da devam edebileceğinizi fark edeceksiniz.

Şimdi etkinliğe birkaç konuşma daha eklemek istediğimizi varsayalım. Düzenleyici ve Temsilci panelinde kalıp Add two more talks to the schedule gibi bir talimat verebiliriz.

Bu işlem sonucunda, temsilci gereksinimi analiz eder, görevi ve uygulama planını günceller, ardından güncellenen işlevi de doğrular. Aşağıda örnek bir görüşme gösterilmektedir:

İsterseniz Temsilci Yöneticisi'ne geri dönebilirsiniz. Bu süreç, Agent Manager'dan Düzenleyici'ye geçiş, buna göre değişiklik yapma ve benzeri süreçleri anlamanıza yardımcı olur.

Not: Bu görev yürütülürken aracı, Flask sunucusunu mevcut makinede kullanılan 5000 numaralı bağlantı noktasında başlatmaya çalıştı. 8080'i kullanmaya karar verene ve sunucuyu başlatana kadar bir sonraki boş bağlantı noktasını denemeye devam etti.

Deneyebileceğiniz şeyler

• Uygulamaya istediğiniz ek işlevleri ekleyin. Ayrıntıları Ajan'a verin ve önce görev listesini, ardından uygulama planını vb. değiştirerek görevi nasıl yerine getirdiğini gözlemleyin.
• 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.

Agent Manager bölümünde olduğunuzdan ve Playground seçeneğini belirlediğinizden emin olun. Aşağıdaki istemi girin:

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

Görev listesini ve uygulama planını nasıl oluşturduğunu ve ardından nasıl devam ettiğini inceleyin. Akışa dikkat etmeye devam edin. İncelemenizi gerektiren durumlar olabilir. Örnek bir çalıştırma aşağıda gösterilmiştir.

Bu durumda, Antigravity tarayıcısını da başlatmalı, kendi testini yapmalı ve ardından testlerin başarılı olduğunu onaylamalıdır. Oluşturduğu öğelerden biri, doğrulama videosunu içeren bir Medya Yapay Öğesi oldu. Bu, test edilenleri görmenin harika bir yoludur. Ayrıca, değişiklik uygulanmadığı için bazı stil değişiklikleri önerdim ve bu değişiklikler uygulandı.

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

Uygulamaya güzel bir zamanlayıcı resmi ekleyebiliriz. Aşağıda verilen talimatı uygulamanız yeterlidir:

Add an image to the application that displays a timer.

Bu durum, temsilcinin Görev yapayına yeni bir görev eklemesine neden oldu:

Ardından, görevini yerine getirirken bir resim oluşturdu:

Son olarak, uygulama istediğimiz gibi bir görsel oluşturdu:

Deneyebileceğiniz şeyler

• Uygulamadaki kum saati simgesinin arka planının şeffaf olmadığını fark edin. Temsilciye bunu şeffaf hale getirmesini söylemeyi deneyin.
• Oluşturmak istediğiniz uygulamaların birkaç varyasyonunu deneyin. Stillerle ve resimlerle oynayın, değişiklik isteyin vb.

6. Birim testleri, sahte saplar 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 yerel olarak bir klasörde bulunduğundan ve Antigravity'de Workspace olarak yüklendiğinden emin olun.

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

1. Sepetin 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.

Aracıya, 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, şunları yapabiliriz:

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

Aşağıdaki istemi kullanarak daha iyi bir görselleştirme oluşturmasını isteyebiliriz:

Can you visually show this class for better understanding

Sonraki adımımız, birim testleri oluşturmak ve Temsilci'den bunları test etmesini istemektir. Aşağıdaki istemi giriyorum:

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

Aşağıdaki Görev yapısını oluşturdu ve görevine devam etti.

Ayrıca, çalıştırdığı testlerin ayrıntılarını da görebilirsiniz:

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

Deneyebileceğiniz şeyler

Kendi kodunuzu kullanarak Temsilci'den 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.
• Öğe oluşturma ve kullanıcı arayüzü estetiğini iyileştirme
• Sahte verilerle karmaşık birim testleri yazma ve doğrulama

Artık kendi projelerinizde zahmetli işleri Antigravity'ye bırakmaya hazırsınız.

Referans belgeler

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