1. Introduction
Dans cet atelier de programmation, vous allez créer CloudCrush, un jeu d'arcade de type Match 3, à l'aide de Gemini 3 et de l'agent de programmation Antigravity. Le jeu sera écrit en Go et déployé sur Google Cloud à l'aide de Cloud Run.
Notez que, bien que des connaissances en langage Go soient recommandées, elles ne sont pas nécessaires pour suivre cet atelier, car l'agent effectuera tout le codage. L'objectif principal de cet atelier de programmation est de développer les compétences nécessaires pour orchestrer l'agent afin qu'il crée des applications pour vous au lieu d'écrire du code manuellement.
Cet atelier de programmation s'adresse aux développeurs de niveau intermédiaire qui souhaitent découvrir les workflows agentiques avancés. La durée totale estimée de cet atelier est de 60 minutes. Les ressources créées dans cet atelier de programmation utilisent des tarifs basés sur la consommation.
Objectifs de l'atelier
- Créez la logique de base du jeu Match 3 à l'aide de Go et du framework Ebitengine.
- Adapter le jeu pour qu'il s'exécute sur un navigateur Web à l'aide de WebAssembly (WASM)
- Déployez le jeu et son API de meilleurs scores sur Cloud Run.
- Orchestrer des sous-agents et des extensions spécialisés pour les tests et la revue de code
Prérequis
- Connaissances de base des langages de programmation
- Connaissances de base de l'infrastructure cloud
- Connaissances de base de la console Google Cloud
Points abordés
- Comment travailler avec un agent de codage pour créer des applications complexes
- Utiliser Gemini dans un contexte multimodal
- Déployer des applications dans le cloud à l'aide de Cloud Run
Prérequis
Cet atelier peut être entièrement réalisé dans le cloud à l'aide de Cloud Shell. Toutefois, si vous préférez utiliser votre machine locale, vous aurez besoin des éléments suivants :
- Antigravity 2.0 et la CLI Antigravity. Téléchargez-le et installez-le en suivant les instructions sur antigravity.google.
- Chaîne d'outils Go (version 1.26 ou ultérieure). Téléchargez-le et installez-le en suivant les instructions sur go.dev.
- gcloud CLI pour interagir avec Google Cloud. Téléchargez et installez-la en suivant les instructions de la documentation Google Cloud.
- Un compte de facturation Google Cloud (pour déployer le jeu dans le cloud)
Technologies clés
Vous trouverez ici plus d'informations sur les technologies que nous allons utiliser :
- Antigravity CLI : l'agent de développement
- Gemini 3 : la dernière version de notre grand modèle de langage de pointe
2. Configuration de l'environnement
Choisissez l'une des options suivantes : Configurer l'environnement à votre rythme si vous souhaitez exécuter cet atelier de programmation sur votre propre machine, ou Démarrer Cloud Shell si vous souhaitez exécuter cet atelier de programmation entièrement dans le cloud.
Configuration de l'environnement au rythme de chacun
- Connectez-vous à la console Google Cloud, puis créez un projet ou réutilisez un projet existant. (Si vous ne possédez pas encore de compte Gmail ou Google Workspace, vous devez en créer un.)
- Le nom du projet est le nom à afficher pour les participants au projet. Il s'agit d'une chaîne de caractères non utilisée par les API Google. Vous pourrez toujours le modifier.
- L'ID du projet est unique parmi tous les projets Google Cloud et non modifiable une fois défini. La console Cloud génère automatiquement une chaîne unique (en général, vous n'y accordez d'importance particulière). Dans la plupart des ateliers de programmation, vous devrez indiquer l'ID de votre projet (généralement identifié par
PROJECT_ID). Si l'ID généré ne vous convient pas, vous pouvez en générer un autre de manière aléatoire. Vous pouvez également en spécifier un et voir s'il est disponible. Après cette étape, l'ID n'est plus modifiable et restera donc le même pour toute la durée du projet. - Pour information, il existe une troisième valeur (le numéro de projet) que certaines API utilisent. Pour en savoir plus sur ces trois valeurs, consultez la documentation.
- Vous devez ensuite activer la facturation dans la console Cloud pour utiliser les ressources/API Cloud. L'exécution de cet atelier de programmation est très peu coûteuse, voire sans frais. Pour désactiver les ressources et éviter ainsi que des frais ne vous soient facturés après ce tutoriel, vous pouvez supprimer le projet ou les ressources que vous avez créées. Les nouveaux utilisateurs de Google Cloud peuvent participer au programme d'essai sans frais pour bénéficier d'un crédit de 300 $.
Démarrer Cloud Shell
Bien que Google Cloud puisse être utilisé à distance depuis votre ordinateur portable, nous allons nous servir de Google Cloud Shell pour cet atelier de programmation, un environnement de ligne de commande exécuté dans le cloud.
Dans la console Google Cloud, cliquez sur l'icône Cloud Shell dans la barre d'outils supérieure :
Le provisionnement et la connexion à l'environnement prennent quelques instants seulement. Une fois l'opération terminée, le résultat devrait ressembler à ceci :
Cette machine virtuelle contient tous les outils de développement nécessaires. Elle comprend un répertoire d'accueil persistant de 5 Go et s'exécute sur Google Cloud, ce qui améliore nettement les performances du réseau et l'authentification. Vous pouvez effectuer toutes les tâches de cet atelier de programmation dans un navigateur. Vous n'avez rien à installer.
3. Configuration du projet
Créer le répertoire du projet
Nous devons d'abord créer un répertoire pour votre projet. Dans votre terminal, exécutez les commandes suivantes :
mkdir -p codelab-match3 && cd codelab-match3
Lancer la CLI Antigravity
Commençons par vérifier que l'interface de ligne de commande Antigravity a été correctement installée. Exécutez la commande suivante dans votre terminal :
agy --version
L'écran qui s'affiche devrait ressembler à ce qui suit :
$ agy --version 1.0.2
Lancez maintenant Antigravity CLI avec la commande agy :
agy
Antigravity vous demandera si vous faites confiance à ce projet. Comme nous venons de créer un dossier vide, vous pouvez lui faire confiance. Confirmez l'accès et vous serez redirigé vers l'invite de commande de l'interface CLI :
Si l'invite Antigravity CLI s'affiche, vous pouvez continuer. Sinon, vérifiez que vous n'avez manqué aucune des étapes de configuration précédentes.
4. Créer le jeu de base en mode planification
Commençons par créer la logique de base du jeu Match 3. Antigravity démarre par défaut en mode planification. Vous n'avez donc pas besoin d'exécuter de commandes spéciales pour passer en mode planification.
Toutefois, il est utile de savoir que vous pouvez activer le mode planification à tout moment avec la commande à barre oblique /planning dans l'invite de commande Antigravity CLI :
/planning
Si vous essayez d'exécuter cette commande maintenant, Antigravity vous rappellera qu'elle est déjà en cours de planification.
Le mode rapide est l'opposé du mode planification. Vous pouvez l'activer avec /fast :
/fast
En mode rapide, Antigravity commence à travailler sur la tâche immédiatement. Ce mode est conçu pour les tâches simples et autonomes. Le mode Planification est conçu pour les tâches complexes. L'agent élabore d'abord un plan que vous pouvez examiner et modifier avant l'exécution.
Télécharger les composants
Nous devons télécharger les images qui seront utilisées dans le jeu. Comme il s'agit d'une petite tâche autonome, il n'est pas nécessaire de l'exécuter en mode planification. Profitons du fait que nous sommes en mode rapide pour l'exécuter immédiatement :
Create a folder named "assets" and download the images
background.png, gcp_sprites.png, gemini.png and logo.png,
from this GitHub repository to the "assets" folder:
https://github.com/GoogleCloudPlatform/devrel-demos/tree/main/codelabs/gemini-cli/gemini-cli-match3-golang
Antigravity vous demandera l'autorisation d'exécuter quelques commandes shell pour télécharger les fichiers. Une fois l'opération terminée, le résultat devrait ressembler à ceci :
Créer le jeu de base
Maintenant que les éléments sont prêts, il est temps de créer le jeu de base. Étant donné que la création d'un jeu est une tâche assez complexe, revenons au mode planification avant de donner notre requête :
/planning
En mode planification, copiez et collez le prompt suivant dans Antigravity CLI :
Build a Match-3 game called 'Cloud Crush' in Go using Ebitengine v2.
The entire game screen should have background.png as background.
The play area should be an 8x8 grid with white background.
On the right side of the play area include a side panel with UI elements
like player score and how to play instructions.
The side panel should have a solid background colour to help with readability of the UI.
Use standard GCP product logos (e.g. Compute Engine, Cloud Storage, BigQuery, etc.)
as icons. These icons are provided in the gcp_sprites.png file.
The icons are saved as 64x64 sprites but scale them as necessary
based on the screen resolution. Implement swapping, clearing 3+ gems, and gravity.
Use ebitengine native font rendering (size 48 for titles and size
24 for normal text) for all text and not the debug print.
The font should be monospaced (golang.org/x/image/font/gofont/gomono).
Keep the UI tidy and harmonic, e.g. centered text should always be
adjusted based on text length, not just guess based on estimates.
Il peut effectuer une exploration avant de proposer le plan, par exemple en inspectant les fichiers PNG pour connaître leurs dimensions. Une fois le plan terminé, vous serez invité à l'examiner :
Veuillez prêter une attention particulière au coin inférieur droit, où vous avez écrit 1 artefact, et à l'astuce pour utiliser /artifact pour l'examiner. Dans Antigravity, les fichiers d'assistance tels que les plans, les listes de tâches et les procédures pas à pas sont appelés "artefacts" pour les différencier des fichiers standards qui font partie de la solution (par exemple, le code source).
En saisissant la commande /artifact dans la requête, vous pourrez consulter le plan et le commenter si vous devez l'ajuster.
/artifact
L'écran qui s'affiche devrait ressembler à ce qui suit :
Notez qu'un fichier nommé implementation_plan.md contient les options permettant d'ouvrir, d'approuver ou de refuser. Pour l'ouvrir, appuyez sur Entrée. Voici un exemple de ce à quoi ressemble le forfait sur mon système :
Vous pouvez faire défiler l'écran vers le haut et vers le bas à l'aide des touches fléchées, et ajouter un commentaire sur n'importe quelle ligne en appuyant sur la touche C. Dans ce cas, je n'aime pas qu'il utilise une ancienne version de Go. Je vais donc ajouter un commentaire pour utiliser Go 1.26 (la version la plus récente au moment de la rédaction de cet article) à la ligne 16 :
Une fois que vous avez saisi le commentaire, il s'affiche en ligne :
La section "Plan de validation" est importante à vérifier. Les jeux sont notoirement difficiles à tester automatiquement, mais go est un langage compilé. Nous devons donc au moins nous assurer que le modèle nous fournit du code qui se compile. Si une étape automatisée pour créer le binaire n'est pas incluse, ajoutez-la en tant que commentaire :
La section "Plan de validation" est importante à vérifier. Les jeux sont particulièrement difficiles à tester automatiquement, mais go est un langage compilé. Nous devons donc au moins nous assurer que le modèle nous fournit du code qui se compile. Si une étape automatisée pour la création du binaire n'est pas incluse, ajoutez-la en tant que commentaire :
Répétez ce processus jusqu'à ce que vous soyez satisfait du plan, puis appuyez sur ÉCHAP pour revenir en arrière. Appuyez ensuite sur "Y" pour confirmer l'envoi des commentaires à l'agent :
Après avoir appuyé sur "Y", l'agent commence immédiatement à travailler. Vous devez appuyer une fois de plus sur ÉCHAP pour quitter le menu "Artifact". Vous serez alors redirigé vers le mode requête. Pendant ce temps, l'agent peut demander beaucoup plus de confirmations d'appels d'outils, car il doit exécuter des commandes shell.
En attendant, nous pouvons également continuer à travailler sur la conception en mettant des requêtes en file d'attente. Par exemple, nous pouvons profiter de cette occasion pour ajouter une nouvelle exigence qui a été oubliée dans la requête d'origine :
Add a 60-seconds countdown timer and an in-memory high-score tracker to enhance the arcade game experience. Combos should give a score bonus of 10% per combo number.
Une requête mise en file d'attente s'affiche dans l'historique des messages avec une petite flèche devant :
Vous remarquerez peut-être également que le nombre d'artefacts augmente. En plus du plan, Antigravity créera également une liste de tâches (task.md) pour suivre chaque élément à implémenter ou chaque action à effectuer. Une fois cela fait, il créera un fichier de procédure pas à pas (walkthrough.md) expliquant les objectifs atteints. Vous pouvez tous les inspecter en utilisant à nouveau la commande /artifact.
Voici un exemple de fichier task.md après l'implémentation du jeu de base :
Vous pouvez ouvrir ces fichiers à tout moment et y ajouter des commentaires. Lorsque vous les enverrez à l'agent, ils seront mis en file d'attente pour exécution, tout comme une requête mise en file d'attente. Il est recommandé d'ajouter des commentaires à ces fichiers pour fournir à l'agent des informations supplémentaires sur votre demande.
Une fois le binaire compilé, vous devriez obtenir un résultat semblable à celui-ci :
Essayez d'exécuter le jeu et vérifiez qu'il fonctionne comme prévu. Il est conseillé de l'exécuter à partir de l'invite de l'agent. Vous pouvez passer à l'invite "mode shell" en saisissant un point d'exclamation "!" :
Le message "Mode Bash activé" s'affiche sous l'invite. Appuyez sur Entrée pour exécuter la commande. L'exécution du binaire dans ce mode vous permet de bénéficier de l'avantage que l'agent "surveille" toute sortie vers le terminal. Ainsi, si le jeu ne s'exécute pas ou plante brusquement, vous n'avez pas besoin d'expliquer à l'agent le problème survenu. Il disposera immédiatement de toutes les informations dont il a besoin à partir du contexte du shell.
Essayez de jouer et d'ajuster les paramètres du jeu jusqu'à ce que vous soyez satisfait de l'expérience (par exemple, en accélérant ou en ralentissant l'animation, en ajustant la façon dont elle répond aux commandes, etc.).
Par exemple, ce prompt améliorera l'expérience en ajoutant un mode accessibilité et de nouvelles commandes clavier :
Update the implementation to include: 'Q' to quit, 'F' for full-screen
and 'A' for Accessibility Mode: swap GCP logos for high-contrast coloured blocks.
Also enable Arrow Keys to move the selection cursor and Space to select the gem to
swap (space is pressed once to select, then arrow key immediately makes
the move - no need to press space again).
Use a golden square (4 px border, transparent fill) with a simple animation
to highlight where the cursor is at the moment.
Une fois que vous avez terminé de peaufiner votre application, passez à la section suivante pour la convertir en application Web.
5. Adapter le jeu pour qu'il fonctionne sur un navigateur Web
Le jeu Ebitengine est actuellement une application de bureau. Demandons à Antigravity CLI de l'adapter pour qu'il s'exécute dans un navigateur Web à l'aide de WebAssembly (WASM). Cela implique de compiler le code Go pour la cible du navigateur et de configurer un serveur Web de base.
Utilisez le prompt suivant pour guider l'agent :
We need to enable this game to run on a web browser. Compile the game to WASM
and create a Go web server to serve the compiled WASM and the assets.
Notez que l'agent tentera de trouver un fichier nommé wasm_exec.js dans votre système de fichiers. Ce comportement est normal et vous devez l'autoriser, car ce fichier est le wrapper qui permet d'exécuter les binaires Go via JS. Exemple :
Une fois que l'agent a terminé la tâche, vous pouvez lui demander d'exécuter le serveur de jeu en arrière-plan.
Ouvrez maintenant http://localhost:8080 dans votre navigateur pour voir le jeu s'exécuter sur le Web :
Maintenant que vous l'avez exécuté sur le Web, apportons-lui une dernière touche avant de le déployer dans le cloud.
6. Créer l'écran de titre et le classement
Le jeu fonctionne, mais il manque quelques fonctionnalités clés pour une expérience d'arcade optimale. Commençons par ajouter un écran de titre, puis un classement pour que vous puissiez rivaliser avec vos amis. Utilisez le prompt suivant :
Create a title screen that displays the game logo (logo.png) over the cloud background.
The logo should be centered and occupy no more than 75% of the screen area.
The title screen should display "Press ENTER to play" (black/bold) right below the logo,
with every letter animated in a slow wavy (cosine) pattern.
Once the player presses ENTER, it should be prompted to add their name, which
will then be recorded to populate the leaderboard at the end of the round.
Once the game is over, play the animated leaderboard with the top 10 highest scores.
The animated leaderboard should render entries one by one up to 10 entries,
using a fade in effect just like old school arcade games. The leaderboard
should fade out to the title screen after 15 seconds.
Please note that name entry should be processed independently of the play state
key handlers (e.g. pressing A during name entry should not toggle accessibility mode).
Leaderboard scores should be saved in-memory, server-side.
Ça commence à avoir l'air un peu plus professionnel ! 🙂
7. Déployer le jeu sur Cloud Run
Il est enfin temps de partager notre création avec le monde entier ! Nous allons déployer l'intégralité de l'application sur Google Cloud Run pour pouvoir y accéder depuis n'importe où.
Use the gcloud CLI to provision and deploy the Go web server and its assets to
Google Cloud Run. Provide the live URL when complete.
Étant donné que le jeu est désormais disponible dans le cloud, il serait dommage de ne pas l'autoriser sur les appareils mobiles. Pour cela, utilisez la requête suivante :
Now enable this game to run on mobile devices. You need to update the input system to handle "taps" as well as key presses and clicks. Since mobile devices most likely won't have a keyboard, add a virtual keyboard to the name entry screen and a confirmation button to the name entry.
Finally, generate a QR code for the CloudRun link and display it on the screen so that people can scan it to access the mobile version and compete against their friends for the high score.
Exécutez à nouveau le jeu dans votre navigateur. Essayez également d'accéder à l'URL depuis un appareil mobile (vous pouvez générer un code QR pour simplifier cette expérience).
8. Utiliser l'agent de navigateur pour tester le jeu
Bien qu'il soit souvent difficile de tester automatiquement un jeu, car il repose sur des commentaires visuels, nous pouvons tout de même utiliser l'automatisation pour au moins nous assurer que le déploiement fonctionne correctement et que nous disposons des éléments de base.
Pour ce faire, nous allons utiliser le sous-agent de navigateur. Dans Antigravity, un sous-agent est une persona isolée avec un nouveau contexte. Il est idéal pour les tâches où vous ne souhaitez pas que le contexte actuel influence les résultats, ou lorsque vous voulez éviter que la tâche ne "contamine" votre fenêtre de contexte principale.
L'agent de navigateur est un agent intégré spécialisé dans les tâches liées au navigateur. Veuillez noter que pour cette étape uniquement, nous devons utiliser l'application de bureau Antigravity, car l'agent de navigateur n'est actuellement pas disponible en ligne de commande.
Ouvrez votre application de bureau Antigravity et démarrez une nouvelle conversation dans le projet Cloud Crush :
Vous pouvez déclencher le sous-agent de navigateur en saisissant /browser suivi de la requête suivante :
Go to http://localhost:8080 and capture screenshots of the following game screens:
1. Title Screen (initial state: "PRESS ENTER TO PLAY")
2. Name Entry Screen (press Enter to reach this screen)
3. Main Gameplay Screen (type a name like "PLAYER" and press Enter to start)
4. Leaderboard Screen (let the game timer run out to view the high scores)
Cette approche nous permet d'utiliser les captures d'écran pour corriger des éléments de l'UI qui seraient autrement difficiles à décrire uniquement avec du texte.
Vous pouvez faire référence à des fichiers en utilisant le symbole "@" suivi du nom du fichier. Par exemple, je demande ici à l'agent d'augmenter la taille du logo sur l'écran de titre :
Bien que cet exemple soit un peu artificiel, car le modèle n'a pas nécessairement besoin de "voir" l'image pour appliquer une correction de taille de 50 %, il s'agit d'une technique utile pour effectuer des ajustements d'UI lorsqu'il peut être plus difficile de décrire le problème sous forme de texte. Il permet également à l'agent de valider son propre travail en prenant des captures d'écran avant et après. Gardez donc cette astuce dans votre boîte à outils.
9. Créer un agent personnalisé pour sécuriser le jeu
L'une des préoccupations courantes concernant les applications "vibe-coded" est de savoir comment maintenir une qualité élevée et les bonnes pratiques du point de vue du codage et de la sécurité. Vous pouvez essayer d'améliorer vos requêtes pour qu'elles soient très rigoureuses sur ces deux aspects. Toutefois, plus vous ajoutez d'éléments à une requête, moins l'agent sera concentré, ce qui entraîne souvent des résultats sous-optimaux.
Dans ce type de scénario, l'utilisation de sous-agents est idéale, car ils peuvent se concentrer précisément sur la tâche que vous leur confiez. Créons un agent personnalisé pour effectuer un audit de sécurité sur ce code et nous assurer que nous ne divulguons aucun identifiant ni ne nous exposons à des risques inutiles lors du déploiement de ce jeu.
Ce prompt constitue une bonne base pour l'agent :
create a new subagent called "security_auditor" using the following instructions:
You are a ruthless Security Auditor. Your job is to analyze code for potential vulnerabilities.
Focus on:
1. SQL Injection
2. XSS (Cross-Site Scripting)
3. Hardcoded credentials
4. Unsafe file operations
When you find a vulnerability, explain it clearly and suggest a fix. Do not fix it yourself; just report it.
Notez qu'Antigravity utilisera l'outil "DefineSubagent" pour créer le nouvel agent :
Demandez à l'agent d'effectuer un contrôle de sécurité sur le code du jeu à l'aide de la requête suivante :
Run the security auditor agent in this code
L'écran qui s'affiche devrait ressembler à ce qui suit :
Une fois que l'agent a terminé sa tâche, un rapport comme celui-ci devrait s'afficher :
Demandons à Antigravity de les corriger pour nous 🙂 :
Fix these findings for me please!
Et voilà :
Veuillez noter que les agents créés de cette manière n'existent que pendant la durée de la conversation. Si vous souhaitez disposer d'un agent "réutilisable" entre les sessions, vous pouvez le créer à l'aide d'un fichier de configuration. Pour en savoir plus, consultez la commande /agents.
10. Conclusion
Félicitations ! Vous avez utilisé avec succès l'interface de ligne de commande Antigravity pour compiler, déployer, tester et auditer un jeu d'arcade, ce qui démontre des workflows agentiques avancés, de l'échafaudage initial au déploiement.
Effectuer un nettoyage
Pour éviter que les ressources créées lors de cet atelier de programmation ne soient facturées en permanence sur votre compte Google Cloud, supprimez-les.
- Supprimez le service Cloud Run :
I'm finished with this project. Delete the cloud run deployment.
- Supprimez le répertoire du projet :
cd .. && rm -rf codelab-match3
Vous pouvez également supprimer l'intégralité du projet Google Cloud s'il a été créé uniquement pour cet atelier de programmation.
Étapes suivantes
Vous pouvez poursuivre votre parcours d'apprentissage en explorant d'autres ateliers de programmation sur cette plate-forme ou en améliorant Cloud Crush par vous-même. N'oubliez pas de nettoyer les ressources une fois que vous avez terminé de les utiliser.
À vous de jouer !