Compiler avec Google Antigravity

1. Introduction

Google Antigravity (appelé "Antigravity" dans le reste du document) est un IDE agentique de Google. Dans l'atelier de programmation sur les premiers pas avec Antigravity, vous pouvez découvrir les bases d'Antigravity. Dans cet atelier de programmation, nous allons utiliser Antigravity pour créer des applications réelles. Nous passerons d'une simple recherche sur le Web à la génération d'applications full stack et de tests unitaires de niveau entreprise.

Prérequis :

• Google Antigravity est installé et configuré.
• Connaissances de base de Google Antigravity. Nous vous recommandons de suivre l'atelier de programmation Premiers pas avec Google Antigravity.

Pour les crédits Google Cloud : pour vous aider à utiliser Antigravity avec des projets Google Cloud, utilisez ce lien pour bénéficier de vos crédits Google Cloud sans frais. Pour activer le crédit et créer un projet, suivez ces instructions.

2. À propos des cas d'utilisation

Maintenant que vous avez une compréhension de base d'Antigravity, examinons quelques cas d'utilisation pour voir comment cela fonctionne. Notez qu'Antigravity est une plate-forme agent-first. Cela signifie que, dans la plupart des cas, nous donnons simplement une instruction à l'agent, qui s'en va ensuite de son côté, effectue sa tâche, demande des autorisations si nécessaire, produit les artefacts, puis nous informe si la tâche est terminée. Par conséquent, nous ne pouvons pas produire chaque résultat de la conversation de l'agent dans chacun des cas d'utilisation suivants. Nous vous fournirons les instructions et quelques captures d'écran nécessaires des résultats attendus, mais vos résultats peuvent être légèrement différents.

Les cas d'utilisation que nous allons aborder vont de l'automatisation de quelques tâches avec des sites externes à la génération et à la vérification de cas de tests unitaires pour un projet, en passant par le développement complet d'un site Web. Commençons.

3. Actualités en bref

Il s'agit d'un cas d'utilisation simple, mais il peut servir de base pour utiliser le navigateur Web afin de visiter des sites Web, d'extraire des informations, d'effectuer des actions, puis de renvoyer des données à l'utilisateur.

Dans ce cas, nous allons accéder au site Google Actualités et en extraire des informations. Toutefois, vous pouvez facilement tester un site de votre choix et voir ce que cela donne.

Assurez-vous d'être dans Agent Manager et d'avoir sélectionné Playground, comme indiqué ci-dessous :

Saisissez ensuite l'instruction suivante :

Cela lancera le processus de l'agent et déterminera qu'il doit lancer le navigateur, etc. Vous devez porter une attention particulière au processus de réflexion et voir comment l'agent effectue son travail. Si tout se passe bien, le navigateur Antigravity devrait se lancer et accéder au site, comme illustré ci-dessous. La bordure bleue autour du site indique que l'agent contrôle désormais le navigateur et navigue sur le site pour obtenir les informations.

Une fois l'opération terminée, vous devriez également voir les artefacts générés, comme indiqué ci-dessous :

Voici un exemple d'exécution par l'agent :

Notez qu'à gauche, nous avons le processus de réflexion. Vous pouvez également parcourir les points et afficher la lecture et d'autres données.

À essayer

• Une fois que vous avez compris cela, choisissez un site Web disponible à partir duquel vous souhaitez que l'agent obtienne ou résume des données. Pensez à un site Web dont vous savez qu'il comporte des tableaux de bord et des graphiques, et demandez-lui de choisir quelques valeurs.
• Essayez le prompt suivant : Visit https://docs.cloud.google.com/release-notes and get me a summary of the release notes, categorized by product.

4. Générer un site Web dynamique avec Python et Flask

Passons maintenant à la génération d'une application Web complète. L'application Web que nous allons créer est un site qui fournit des informations sur un événement technique d'une journée, avec des conférences tout au long de la journée par plusieurs intervenants.

Une fois de plus, assurez-vous d'être dans Agent Manager et d'avoir sélectionné Playground.

Fournissez le prompt suivant :

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. 

Vous pouvez commencer la conversation en saisissant la requête ci-dessus :

Au fur et à mesure que l'agent effectue sa tâche, il crée les artefacts :

• Artefact de tâche
• Artefact d'implémentation
• Artefact du tutoriel

L'artefact de tâche ci-dessous correspond à la séquence initiale de tâches que l'agent a déchiffrée et qu'il doit effectuer en fonction de la tâche qui lui a été confiée. Voici un exemple de capture d'écran de l'exécution :

Vous pouvez ensuite cliquer sur l'artefact Plan d'implémentation. Voici un exemple de capture d'écran :

Enfin, vous avez l'artefact Procédure pas à pas. Il contient tout ce que l'agent a fait, comme indiqué ci-dessous :

Notez qu'il a démarré le serveur et m'a fourni l'URL. Je clique dessus et j'obtiens l'application. Vous trouverez ci-dessous un exemple de capture d'écran :

Si vous passez à l'éditeur, vous remarquerez que l'écran contient le dossier dans lequel l'application Python Flask est générée. Vous remarquerez également que Agent mode est tagué à droite. Vous pouvez également poursuivre la conversation à cet endroit.

Imaginons maintenant que nous voulions ajouter d'autres conférences à l'événement. Nous pouvons rester dans l'éditeur et dans le panneau de l'agent, puis donner une instruction comme Add two more talks to the schedule.

L'agent analysera l'exigence, mettra à jour la tâche et le plan d'implémentation, puis validera également la fonctionnalité mise à jour. Voici un exemple de conversation :

Si vous le souhaitez, vous pouvez revenir au Gestionnaire d'agents. Ce processus devrait vous aider à comprendre comment passer d'Agent Manager à Éditeur, apporter les modifications nécessaires, etc.

Remarque : Lors de l'exécution de cette tâche, l'agent a essayé de démarrer le serveur Flask sur le port 5000, qui était utilisé sur la machine actuelle. Il a continué à essayer le prochain port disponible, jusqu'à ce qu'il décide d'utiliser le port 8080 et qu'il puisse démarrer le serveur.

À essayer

• Ajoutez les fonctionnalités supplémentaires que vous souhaitez à l'application. Fournissez les détails à l'agent et observez comment il s'y prend pour accomplir sa tâche en modifiant d'abord la liste des tâches, puis le plan d'implémentation, etc.
• Demandez à l'agent de générer un fichier README ou plus de documentation pour l'application.

5. Générer une application de productivité simple

Nous allons maintenant générer une application Web de minuteur Pomodoro simple.

Assurez-vous d'être dans Agent Manager et d'avoir sélectionné Playground. Fournissez le prompt suivant :

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

Remarquez comment il s'y prend pour créer la liste de tâches et le plan d'implémentation, puis comment il s'y attelle. Continuez à prêter attention au flux, car il peut y avoir des situations dans lesquelles il vous demandera de l'examiner. Vous trouverez ci-dessous un exemple d'exécution.

Dans ce cas, il doit également lancer le navigateur Antigravity, effectuer ses propres tests, puis confirmer que les tests ont réussi. L'un des éléments générés était un artefact multimédia contenant la vidéo de sa validation. C'est un excellent moyen de voir ce qui a été testé. J'ai également suggéré quelques modifications de style, car elles n'avaient pas été appliquées, et l'IA a pu le faire.

L'application finale ressemblait à celle ci-dessous et était plutôt réussie.

Nous pouvons ajouter une jolie image de minuteur à l'application. Il vous suffit de donner une instruction de suivi comme indiqué ci-dessous :

Add an image to the application that displays a timer.

L'agent a donc ajouté une tâche à l'artefact "Tâche" :

Il a ensuite généré une image au fur et à mesure de l'exécution de sa tâche :

Enfin, l'application a affiché l'image comme nous l'avions demandé :

À essayer

• Notez que l'arrière-plan de l'icône en forme de sablier dans l'application n'est pas transparent. Essayez de demander à l'agent de rendre l'arrière-plan transparent.
• Essayez quelques variantes de l'application que vous souhaitez générer. Jouez avec les styles, les images, demandez des modifications, etc.

6. Générer des tests unitaires, des stubs de simulation et valider des tests

Le dernier cas d'utilisation que nous allons essayer ici consiste à générer des tests unitaires pour un fichier de code spécifique que nous possédons, et à demander à l'agent d'exécuter et de valider les tests.

Pour ce faire, nous allons utiliser un espace de travail qui ne contient qu'un seul fichier Python, comme indiqué ci-dessous :

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}

Assurez-vous d'avoir le fichier Python ci-dessus localement dans un dossier et chargez-le en tant qu'espace de travail dans Antigravity.

Il s'agit d'un service de commande simple qui présente les fonctionnalités clés suivantes dans la fonction checkout :

1. Valide que le panier n'est pas vide.
2. Vérifiez le stock de tous les articles.
3. Calcule le prix final.
4. Paiement des frais.
5. Met à jour l'inventaire.

Nous allons attribuer à l'agent la tâche de générer des cas de tests unitaires, de fournir des implémentations Mock et d'exécuter les tests pour s'assurer qu'ils réussissent.

Nous allons ouvrir le dossier de notre espace de travail spécifique. Vous remarquerez que nous pouvons désormais utiliser le symbole @ pour faire référence au fichier. Par exemple, nous pouvons effectuer les opérations suivantes :

Une explication s'affiche concernant ce fichier :

Nous pouvons lui demander de générer une meilleure visualisation à l'aide de la requête suivante :

Can you visually show this class for better understanding

L'étape suivante consiste à générer les tests unitaires et à demander à l'agent de les tester. Je lui donne le prompt suivant :

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

Il a généré l'artefact de tâche suivant et a effectué sa tâche.

Vous pouvez également consulter les détails des tests exécutés :

L'un des fichiers qu'il a générés était également le fichier de test. Voici une capture d'écran :

À essayer

Prenez votre propre code et découvrez ce que vous pouvez demander à l'agent de faire, qu'il s'agisse d'ajouter des fonctionnalités ou de refactoriser des parties de votre code.

7. Félicitations

Félicitations ! Vous avez utilisé Google Antigravity pour :

• effectuer des recherches sur le Web de manière autonome ;
• Créez et itérez des applications Web full stack.
• Générez des composants et affinez l'esthétique de l'UI.
• Écrivez et validez des tests unitaires complexes avec des mocks.

Vous êtes maintenant prêt à laisser Antigravity s'occuper des tâches les plus difficiles dans vos propres projets.

Documents de référence

• Atelier de programmation : Premiers pas avec Google Antigravity
• Site officiel : https://antigravity.google/
• Documentation : https://antigravity.google/docs
• Cas d'utilisation : https://antigravity.google/use-cases
• Télécharger : https://antigravity.google/download
• Chaîne YouTube Google Antigravity : https://www.youtube.com/@googleantigravity