Vibe coding avec Gemini dans Google AI Studio

1. Présentation

Dans cet atelier de programmation, vous allez créer une application Web "Snake & Beats", un jeu de 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 dans Cloud Run.

Objectifs de l'atelier

• Créer et inviter : 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 : vérifiez l'ambiance de votre IA en définissant une personnalité persistante pour les modifications futures.
• Enregistrer dans GitHub : amorcez un nouveau dépôt directement depuis AI Studio.
• Déployer dans Cloud Run : envoyez votre jeu à Google Cloud Run en un clic.

Points abordés

• Comment utiliser le mode Créer dans Google AI Studio pour créer rapidement des prototypes d'applications
• Comment utiliser les instructions système pour maintenir une "ambiance de codage" cohérente lors de l'itération
• Comment connecter Google AI Studio à GitHub et Cloud Run

Ce dont vous avez besoin

• 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

1. Dans la console Google Cloud, sur la page du sélecteur de projet, sélectionnez ou créez un projet Google Cloud.
2. 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 .

Pour les crédits Google Cloud : si vous souhaitez obtenir des crédits Google Cloud pour vous aider à démarrer, utilisez ce lien pour échanger des crédits qui vous aideront à terminer l'atelier. Vous pouvez suivre les instructions ici pour les échanger.

3. Créer et inviter (le cœur du sujet)

Nous allons commencer par créer l'application entière en une seule fois. Connectez-vous à Google AI Studio et assurez-vous que vous vous trouvez dans l'interface de création.

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

2. 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 d'aperçu) est sélectionné pour une génération de code plus rapide.
3. Exécutez : cliquez sur Créer (ou appuyez sur Cmd+Entrée).
4. Aperçu : Gemini génère le code et affiche généralement un aperçu en direct sur la droite (comme illustré 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

1. Activer le mode Annotation : dans l'interface AI Studio (cochez le panneau de gauche ou la barre d'outils en bas de la fenêtre d'aperçu), sélectionnez l'outil Annotation ou Affiner.

2. Marquez votre application :

• Dessinez : utilisez l'outil de zone pour dessiner un rectangle autour du compteur de score.
• Commentez : saisissez un prompt associé à cette zone : "Agrandissez cette police, rendez-la numérique et ajoutez-lui un effet de glitch".
• Esquissez : utilisez l'outil flèche pour pointer vers les boutons "Lecture/Pause".
• Commentez : saisissez "Remplacez-les par des icônes néon lumineuses".

3. Itérez : cliquez sur "Ajouter au chat", puis sur Envoyer le prompt. Gemini interprète vos marques visuelles et les commandes textuelles pour mettre à jour le code.
4. Vérifiez : regardez l'aperçu se mettre à jour en direct. Vos commentaires visuels doivent maintenant être reflétés dans le code.

Saisie vocale (l'ambiance parlée)

Parfois, l'"ambiance" est plus facile à dire qu'à écrire.

1. Action : cliquez sur l'icône Micro dans la barre de saisie (à côté du bouton +).

2. Dites : "L'animation du serpent est trop lente. Accélérez-la et faites en sorte que la queue laisse une traînée lumineuse."
3. Envoyez : Gemini convertit votre discours en texte et applique les modifications.

5. Définir des instructions système et reconstruire

Contrairement à un prompt normal, les instructions système persistent pendant toute la session. C'est le meilleur endroit pour définir vos normes de codage, vos conventions d'attribution de noms ou une personnalité visuelle spécifique qui ne doit pas changer.

1. 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 d'engrenage) ou sur Paramètres avancés en haut ou sur le côté du panneau de chat.

2. Ajoutez l'instruction "Ambiance" : collez l'instruction suivante dans la zone de texte. Cela définit une personnalité "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.

3. Déclencher la modification : la modification de l'instruction système ne réécrit pas automatiquement le code. Vous devez indiquer à Gemini d'appliquer ces nouvelles règles.

• Fermez le panneau des paramètres.
• Dans la saisie Chat/Prompt, saisissez : "Reconstruisez l'interface utilisateur de l'application pour suivre strictement les nouvelles instructions système."
• Cliquez sur Exécuter / Envoyer.

4. Observez la mise à jour : Gemini reconnaît la modification.

6. Enregistrer dans 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.

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

2. Associez 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.
3. 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.

4. Nom du dépôt : saisissez un nom, par exemple « Jeu de Snake généré par l'IA avec React ».
5. Description du dépôt : saisissez une description du dépôt.
6. Visibilité : sélectionnez Public (pour pouvoir le partager facilement) ou Privé.
7. Envoyez vers GitHub : cliquez sur le bouton "Créer un dépôt Git".

Moment magique : AI Studio initialise un nouveau dépôt, valide le code généré et l'envoie à GitHub en arrière-plan. Vous recevrez un lien vers votre nouveau dépôt.

7. Déployer dans Cloud Run

Maintenant que l'application est prête et enregistrée dans GitHub, déployons-la dans Cloud Run.

1. Lancez le déploiement : cliquez sur le bouton mis en surbrillance ci-dessous. Il se trouve en haut à droite de la page AI Studio.

2. Sélectionnez un projet : cliquez sur la liste déroulante Sélectionner un projet Cloud, puis sélectionnez votre projet dans la liste déroulante.

3. Dépannage : si vous ne parvenez pas à trouver votre projet dans la liste déroulante, cliquez sur Importer un projet, puis sélectionnez votre projet dans le volet Importer un projet.
4. Vérification de la facturation : une fois le projet sélectionné, il est vérifié que la facturation est activée. Cette vérification sera effectuée automatiquement, car nous avons associé le compte de facturation au projet dans la section "Avant de commencer".
5. Déployez : cliquez sur le bouton Déployer l'application et attendez que l'application soit déployée dans Cloud Run. Remarque : Le nom du service Cloud Run est généré automatiquement.
6. Le déploiement devrait s'effectuer en quelques minutes, et vous obtiendrez l'URL de l'application. En cliquant sur l'URL, vous pourrez voir votre application Web déployée en direct sur Internet.

8. Effectuer un nettoyage

Pour éviter que les ressources utilisées dans cet atelier 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 dans AI Studio et à la déployer dans Cloud Run.

AI Studio est une plate-forme idéale pour développer et tester des applications, permettant 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 coûts de gestion de l'infrastructure.