1. Présentation
Dans cet atelier de programmation, vous allez créer une application Web "Snake & Beats", un jeu Snake rétro avec un lecteur de musique intégré. Vous utiliserez Gemini pour générer une application React à fichier unique avec une esthétique néon, puis vous la contrôlerez et la déploierez sur Cloud Run.
Objectifs de l'atelier
- Créer et demander : utilisez le mode "Créer" de Google AI Studio pour générer un jeu fonctionnel à partir d'un seul prompt.
- Affiner avec des instructions système : définissez une personnalité persistante pour vos futures modifications afin de "vérifier l'ambiance" de votre IA.
- Enregistrer sur GitHub : amorcez un dépôt directement depuis AI Studio.
- Déployer sur Cloud Run : déployez votre jeu sur Google Cloud Run en un clic.
Points abordés
- Découvrez comment utiliser le mode Créer dans Google AI Studio pour prototyper rapidement des applications.
- Utiliser les instructions système pour maintenir une "ambiance de programmation" cohérente lors de l'itération.
- Découvrez comment connecter Google AI Studio à GitHub et Cloud Run.
Prérequis
- Navigateur Web Chrome
- Un compte Gmail
- Un projet Cloud pour lequel la facturation est activée
- Une clé API Gemini
- Un compte GitHub
2. Avant de commencer
- Dans la console Google Cloud, sur la page du sélecteur de 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 .
3. Créer et demander (le cœur)
Nous allons commencer par créer l'intégralité de l'application en une seule fois. Connectez-vous à Google AI Studio et assurez-vous d'être dans l'interface de création.
- Saisissez le prompt de création : collez le prompt détaillé suivant dans la zone de chat :
Build a React web app that is a Music Player and a Snake Game combined. Use Tailwind CSS with a dark neon aesthetic. I want to be able to play Snake in the center window while the demo music plays in the background. Add 3 dummy ai generated music. Include controls for the music (play/pause/skip) and a score counter for the game.
- Sélectionnez votre modèle : dans le panneau de paramètres de droite, assurez-vous que Gemini 3.0 Pro (ou le dernier modèle Preview) est sélectionné pour générer du code le plus rapidement possible.
- Exécuter : cliquez sur Compiler (ou appuyez sur Cmd+Entrée).
- Aperçu : Gemini génère le code et affiche généralement un aperçu en direct sur la droite (comme indiqué ci-dessous) :
4. Affiner avec des annotations, des images et la voix
Il est parfois difficile de décrire un changement visuel avec des mots. Le mode Annotation vous permet de dessiner sur l'aperçu de votre application pour communiquer instantanément votre vision.
Utiliser le mode Annotation
- Activer le mode Annotation : dans l'interface AI Studio (consultez le panneau latéral gauche ou la barre d'outils inférieure de la fenêtre d'aperçu), sélectionnez l'outil Annotation ou Affiner.
- Annoter votre application :
- Dessiner : utilisez l'outil de sélection pour dessiner un rectangle autour du compteur de score.
- Commentaire : saisissez une requête dans la zone de texte, par exemple "Agrandis cette police, rends-la numérique et glitchée".
- Dessin : utilisez l'outil Flèche pour pointer vers les boutons de lecture/pause.
- Commentaire : Type : "Remplace ces icônes par des icônes néon lumineuses."
- Itérer : cliquez sur "Ajouter au chat", puis sur Envoyer la requête. Gemini interprète vos annotations visuelles et les commandes textuelles pour mettre à jour le code.
- Valider : regardez la mise à jour de l'aperçu en direct. Vos commentaires visuels devraient maintenant se refléter dans le code.
Saisie vocale (The Spoken Vibe)
Il est parfois plus facile d'exprimer une ambiance à l'oral qu'à l'écrit.
- Action : cliquez sur l'icône en forme de micro dans la barre de saisie (à côté du bouton +).
- Dites : "Hé, l'animation du serpent est trop lente. Accélère-le et fais en sorte que sa queue laisse une traînée lumineuse."
- Envoyer : Gemini convertit votre voix en texte et applique les modifications.
5. Définir des instructions système et reconstruire
Contrairement à une requête normale, une instruction système persiste pendant toute la session. C'est le meilleur endroit pour définir vos normes de codage, vos conventions de nommage ou une identité visuelle spécifique qui ne doit pas changer.
- Ouvrez les paramètres avancés : dans l'interface Google AI Studio (mode Créer), recherchez la zone "Instructions système". Si elle n'est pas visible, cliquez sur Paramètres (icône en forme de roue dentée) ou sur Paramètres avancés en haut ou sur le côté du panneau de chat.
- Ajoutez l'instruction "Ambiance" : collez l'instruction suivante dans la zone de texte. Cela définit un persona "Glitch Art" pour notre jeu :
You are a Retro-Futurist UI Designer and Senior React Engineer. Visual Style: 'Glitch Art'. Use raw, pixelated fonts, jarring color contrasts (Cyan vs. Magenta), and CSS animations that simulate screen tearing or static noise. Tone: Cryptic and machine-like.
- Déclenchement du changement : la modification de l'instruction système ne réécrit pas automatiquement le code. Vous devez demander à Gemini d'appliquer ces nouvelles règles.
- Fermez le panneau des paramètres.
- Dans le champ de saisie de chat/requête, saisissez : "Reconstruis l'UI de l'application pour qu'elle suive strictement les nouvelles instructions système."
- Cliquez sur "Exécuter / Envoyer".
- Observez la mise à jour : Gemini accusera réception de la modification.
6. Enregistrer sur GitHub
Au lieu de télécharger des fichiers et de vous battre avec la ligne de commande, nous allons utiliser l'intégration GitHub intégrée pour amorcer un dépôt instantanément.
- Localiser l'intégration : dans la barre d'outils en haut de l'interface Google AI Studio, recherchez l'icône GitHub située entre les icônes "Télécharger" et "Déployer".
- Associer votre compte : cliquez sur l'icône. Si c'est la première fois, vous serez invité à autoriser Google AI Studio à accéder à votre compte GitHub.
- Créez le dépôt : une boîte de dialogue intitulée "Remplissez les informations ci-dessous pour créer votre dépôt" s'affiche.
- Nom du dépôt : saisissez un nom, par exemple "Jeu du serpent généré par l'IA avec React."
- Description du dépôt : saisissez la description du dépôt.
- Visibilité : sélectionnez "Public" (pour pouvoir la partager facilement) ou "Privé".
- Envoyer vers GitHub : cliquez sur le bouton "Créer un dépôt Git".
7. Déployer dans Cloud Run
Maintenant que l'application est prête et enregistrée sur GitHub, déployons-la sur Cloud Run.
- Lancer le déploiement : cliquez sur le bouton mis en évidence ci-dessous. Il se trouve en haut à droite de la page AI Studio.
- Sélectionner un projet : cliquez sur le menu déroulant "Sélectionner un projet Cloud", puis sélectionnez votre projet dans le menu déroulant.
- Dépannage : Si vous ne trouvez pas votre projet dans le menu déroulant, cliquez sur "Importer un projet" et sélectionnez votre projet dans le volet "Importer un projet".
- Validation de la facturation : une fois le projet sélectionné, la facturation est vérifiée. Cette validation sera effectuée automatiquement, car nous avons associé le compte de facturation au projet dans la section "Avant de commencer".
- Déployer : cliquez sur le bouton "Déployer l'application" et attendez que l'application soit déployée sur Cloud Run. Remarque : Le nom du service Cloud Run sera généré automatiquement.
- Le déploiement devrait s'effectuer en quelques minutes. L'URL de l'application s'affichera. En cliquant sur l'URL, vous pouvez voir votre application Web déployée en direct sur Internet.
8. Effectuer un nettoyage
Pour éviter que les ressources utilisées dans cet article soient facturées sur votre compte Google Cloud, procédez comme suit :
- Dans la console Google Cloud, accédez à la page Gérer les ressources.
- Dans la liste des projets, sélectionnez le projet que vous souhaitez supprimer, puis cliquez sur "Supprimer".
- Dans la boîte de dialogue, saisissez l'ID du projet, puis cliquez sur "Arrêter" pour supprimer le projet.
9. Félicitations
Félicitations ! Vous avez réussi à coder une application sur AI Studio et à la déployer sur Cloud Run.
AI Studio est une plate-forme idéale pour développer et tester des applications, car elle permet aux utilisateurs de visualiser immédiatement leurs conceptions en action.
L'intégration parfaite d'AI Studio à Cloud Run permet aux utilisateurs de déployer facilement leurs applications directement sur Google Cloud. L'utilisation de Cloud Run offre tous les avantages inhérents à un environnement sans serveur, en éliminant les complexités et les frais généraux liés à la gestion de l'infrastructure.