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 Gemini CLI, notre agent de codage en ligne de commande. Le jeu sera écrit en Go et déployé sur Google Cloud à l'aide de Cloud Run.
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. Vous allez déléguer toutes les tâches de développement à Gemini CLI, même si vous n'avez jamais utilisé ces technologies auparavant.
Cet atelier de programmation s'adresse aux développeurs de niveau intermédiaire qui souhaitent découvrir les workflows de codage agentique. 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 programmation 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 :
- Gemini CLI. Téléchargez et installez-le en suivant les instructions sur geminicli.com.
- Chaîne d'outils Go (version 1.26 ou ultérieure). Téléchargez 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 :
- Gemini CLI : l'agent de développement
- Gemini 3 : la dernière version de notre grand modèle linguistique de pointe
2. Configuration de l'environnement
Configuration du projet
Créer un projet Google Cloud
- Dans la console Google Cloud, sur la page de sélection du projet, sélectionnez ou créez un projet Google Cloud.
- Assurez-vous que la facturation est activée pour votre projet Cloud. Découvrez comment vérifier si la facturation est activée sur un projet.
Démarrer Cloud Shell
Cloud Shell est un environnement de ligne de commande exécuté dans Google Cloud et fourni avec les outils nécessaires.
- Cliquez sur Activer Cloud Shell en haut de la console Google Cloud.
- Une fois connecté à Cloud Shell, vérifiez votre authentification :
gcloud auth list - Vérifiez que votre projet est configuré :
gcloud config get project - Si votre projet n'est pas défini comme prévu, définissez-le :
export PROJECT_ID=<YOUR_PROJECT_ID> gcloud config set project $PROJECT_ID
3. Configuration du projet
Créer le répertoire du projet
Nous devons d'abord créer un répertoire pour votre projet. Dans le terminal, exécutez les commandes suivantes :
mkdir -p codelab-match3 && cd codelab-match3
Lancer Gemini CLI
Commençons par vérifier que Gemini CLI a été correctement installé. Exécutez la commande suivante dans votre terminal :
gemini --version
L'écran qui s'affiche devrait ressembler à ce qui suit :
$ gemini --version 0.37.1
Lancez maintenant Gemini CLI avec la commande gemini :
gemini
Le prompt Gemini CLI devrait s'afficher :
Si l'invite Gemini CLI s'affiche, vous êtes prêt. Sinon, vérifiez que vous n'avez manqué aucune des étapes de configuration précédentes.
Activer l'orientation du modèle
Le guidage de modèle est une fonctionnalité qui vous permet d'ajouter du contexte à l'agent pendant qu'il travaille sur une tâche donnée. Vous pouvez l'utiliser pour corriger la trajectoire de l'agent lorsqu'il semble s'égarer, pour ajouter des informations afin d'améliorer sa réponse ou pour inclure des fonctionnalités mineures qui ont été oubliées dans la requête d'origine.
Pour activer l'orientation du modèle, ouvrez le menu des paramètres à l'aide de la commande /settings, puis saisissez "steering" (orientation) dans le champ de recherche. Définissez ensuite l'option "Enable Model Steering" (Activer l'orientation du modèle) sur "true".
Vous devrez peut-être redémarrer l'interface de ligne de commande pour que la modification prenne effet (en appuyant sur la touche "r").
Télécharger les composants
Nous devons télécharger les images qui seront utilisées dans le jeu. Les fichiers sont stockés sur GitHub dans le dépôt ici. Vous pouvez les télécharger manuellement ou demander à Gemini de le faire pour vous à l'aide de la requête suivante :
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
4. Créer le jeu avec le mode plan et la direction du modèle
Commencez par créer la logique de base du jeu Match 3. Comme il s'agit d'une tâche complexe, il est préférable d'utiliser Gemini CLI en mode plan pour orchestrer le développement.
Activez le mode Plan avec la commande à barre oblique /plan dans le prompt Gemini CLI :
/plan
Avec le mode Plan activé, copiez et collez le prompt suivant dans Gemini 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.
Gemini CLI peut vous poser quelques questions pour obtenir des précisions avant de générer le plan.
Par exemple, il vous demande si vous préférez une application à un seul fichier ou à plusieurs fichiers :
Voici une question sur nos préférences concernant les animations :
La dernière question concerne l'intégration des composants dans le binaire lui-même avec go:embed :
Après avoir répondu à toutes les questions, vous avez la possibilité de les relire une dernière fois avant d'appuyer sur Entrée pour les envoyer.
Une fois le plan terminé, vous serez invité à l'examiner :
En bas de la boîte de révision, vous pouvez accepter le plan tel quel ou ajouter vos commentaires.
Profitez-en 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.
Vous serez invité une dernière fois à confirmer le plan d'implémentation :
Appuyez sur Entrée pour que l'agent commence le travail. L'agent quitte le mode plan et commence à écrire le code.
À ce stade, nous devrions normalement attendre la fin de l'opération ou l'interrompre avec la touche Échap si nous voulions apporter des modifications à l'implémentation. Toutefois, comme nous avons activé le contrôle du modèle, nous pouvons mettre en file d'attente des instructions pour corriger le modèle.
Pendant que l'agent travaille, collez ce qui suit dans la fenêtre de chat de l'agent pour illustrer la fonctionnalité de "pilotage du modèle" et montrer comment mettre en file d'attente des commandes pour faire pivoter l'implémentation :
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.
Vous verrez que cette requête est mise en file d'attente en tant qu'"indice de pilotage" :
Acceptez le plan et regardez l'agent mettre en œuvre toutes vos exigences.
Une fois l'implémentation terminée par l'agent, exécutez go run main.go dans le dossier du projet pour tester la version pour ordinateur. Vous n'avez pas besoin de quitter Gemini CLI pour exécuter cette commande. Type ! (point d'exclamation) pour passer en mode shell et exécuter la commande à partir de là :
L'avantage d'exécuter le script en mode Shell est que tous les problèmes qui peuvent survenir sont immédiatement capturés dans le contexte de l'agent. Par exemple, dans ce cas, l'agent a oublié de télécharger certaines dépendances :
Vous pouvez quitter le mode Shell en appuyant sur la touche Échap, puis demander à l'agent d'inspecter et de corriger l'erreur :
Si l'opération réussit, vous devriez obtenir un résultat semblable à celui-ci :
Essayez de jouer et d'ajuster les paramètres du jeu jusqu'à ce que l'expérience vous convienne (par exemple, en accélérant ou en ralentissant l'animation, en ajustant la façon dont elle répond aux commandes, etc.).
5. Adapter le jeu pour qu'il fonctionne sur un navigateur Web
Le jeu Ebitengine que vous venez de créer est une application de bureau. Pour qu'il puisse s'exécuter sur le Web, nous pouvons le convertir en WebAssembly.
Utilisez la requête suivante 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.
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.
Vous pouvez gérer les processus en arrière-plan à l'aide de la combinaison de touches Ctrl+B :
Appuyez de nouveau sur Ctrl+B pour fermer cette fenêtre.
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, il est temps de le peaufiner 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.
Corrigez les deux problèmes avec la requête suivante :
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).
Voici un exemple d'écran titre :
Ç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 ! Déployez le jeu sur Google Cloud Run pour pouvoir y accéder où que vous soyez.
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 à s'exécuter 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 button to generate a random name and
a confirmation button to the name entry.
Also 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 au jeu depuis un appareil mobile à l'aide du code QR.
8. Utiliser l'agent de navigateur pour tester le jeu
Dans Gemini CLI, un sous-agent est une persona isolée avec un contexte nouveau. Il est idéal pour les tâches de longue durée et/ou de haute précision pour lesquelles vous ne souhaitez pas que le contexte actuel influence les résultats.
Les jeux sont naturellement difficiles à tester avec des outils de test classiques (par exemple, les tests unitaires et d'intégration), mais nous pouvons utiliser l'agent de navigateur pour effectuer certains tests à notre place. L'agent de navigateur est capable de lancer son propre navigateur Chrome et de parcourir les écrans de jeu en émettant des commandes DOM. Il peut également prendre des captures d'écran, que nous pouvons utiliser pour documenter le test et les renvoyer à l'agent pour qu'il puisse apporter de petites modifications à l'UI ultérieurement.
L'agent de navigateur est actuellement expérimental. Nous devons donc l'activer en premier. Saisissez ce prompt dans Gemini CLI pour activer l'agent au niveau du projet.
Create a .gemini/settings.json file with the following content to
configure the browser sub agent:
{
"agents": {
"overrides": {
"browser_agent": {
"enabled": true
}
}
}
}
Vous devez redémarrer l'agent pour que cette modification prenne effet. Enregistrez la conversation en cours avec la commande /chat save :
Quittez Gemini CLI en appuyant deux fois sur Ctrl+D, puis redémarrez-la. Restaurez la conversation avec /chat resume cloud-crush.
Vous devriez maintenant avoir accès à l'agent de navigateur. Chaque fois que vous souhaitez déléguer une tâche à l'agent de navigateur, vous pouvez le mentionner avec @browser_agent :
Utilisez maintenant l'agent de navigateur pour évaluer le jeu que nous avons déployé :
@browser_agent perform an end-to-end test of the Cloud Run deployment URL.
Navigate the homepage, start a game, submit a score, and verify the new score
appears correctly on the leaderboard. Take screenshots to show each step of the
investigation and save to ./screenshots.
L'écran de confirmation suivant devrait s'afficher :
Une fois que vous avez donné votre autorisation à l'agent et aux outils requis, une nouvelle fenêtre du navigateur Chrome devrait s'ouvrir. Il s'agit du navigateur contrôlé par l'agent. L'indice visuel est la bordure bleue à l'écran et le message en bas de l'écran indiquant "Gemini CLI contrôle ce navigateur" :
Une fois l'opération terminée, un message semblable à celui-ci s'affiche :
Voici quelques-unes des captures d'écran effectuées par l'agent de navigateur :
title_screen.png:
game_board.png:
C'est le moment idéal pour utiliser l'une des images prises par l'agent afin d'optimiser l'UI du jeu. Par exemple, vous pouvez énoncer les commandes suivantes :
Analyse the screenshot @screenshots/game_board.png and adjust the side panel to
have better contrast and be more harmonic with the rest of UI elements. Focus
on readability and color theory to achieve the best possible visuals.
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 fonctionnent dans un contexte distinct de celui de l'agent principal et 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 de ne pas divulguer d'identifiants ni nous exposer à des risques inutiles lors du déploiement de ce jeu sur Cloud Run.
Create a new custom agent in .gemini/agents/security_auditor.md using the following content:
---
name: security_auditor
description: Specialized in finding security vulnerabilities in code.
kind: local
tools:
- read_file
- grep_search
model: gemini-3-flash-preview
temperature: 0.2
max_turns: 10
---
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.
Vous devrez redémarrer l'interface de ligne de commande pour que la modification prenne effet. Enregistrez la session de chat avec /chat save et reprenez-la avec /chat resume, comme nous l'avons fait précédemment.
Lorsque la CLI reprend, elle détecte automatiquement le nouvel agent au démarrage :
Cliquez sur Acknowledge and Enable, puis demandez à l'agent d'effectuer un contrôle de sécurité sur le code du jeu à l'aide de la requête suivante :
@security-auditor please run a security audit on this code and cloud run
deployment to make sure it is safe against common attack patterns and that it is
not leaking any credentials
L'écran qui s'affiche devrait ressembler à ce qui suit :
Une fois l'audit terminé, il formulera des recommandations. Dans cet exemple, il a trouvé plusieurs points importants à corriger :
Si vous trouvez des problèmes, demandez simplement à Gemini CLI de les résoudre pour vous. 🙂
10. Conclusion
Félicitations ! Vous avez utilisé Gemini CLI pour créer, déployer, tester et auditer un jeu d'arcade, en démontrant des workflows agentiques avancés, de l'échafaudage initial au déploiement.
Effectuer un nettoyage
Si vous ne prévoyez pas de revenir à cet atelier de programmation ultérieurement, il est préférable de supprimer les ressources créées au cours de cet atelier.
- Supprimez le service Cloud Run :
Demandez à Gemini CLI de le supprimer pour vous :
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.
Voici quelques suggestions pour améliorer le jeu :
- Ajoutez un Gem "Gemini" spécial (à l'aide de gemini.png) qui s'affiche lorsque quatre Gems ou plus sont associés. Si vous associez au moins trois gemmes Gemini, vous obtenez du temps bonus.
- Ajoutez de la musique. Vous pouvez générer de la musique à l'aide de Lyria 3 sur la page d'accueil de Gemini.
- Ajouter des effets sonores
- Ajouter d'autres modes de jeu
À vous de jouer !