Lancer votre jeu vidéo Web avec l'IA

1. Introduction

Présentation

Comment créer des applications avec l'IA aujourd'hui ? Pour la plupart d'entre nous, cela commence par une simple requête ou un prototype. Google AI Studio propose un mode Création puissant (souvent appelé "vibe coding") qui vous permet de concevoir, de tester et de créer des applications Web Full Stack à l'aide de la génération de code basée sur les modèles Gemini.

Dans cet atelier de programmation, vous allez créer un jeu vidéo au tour par tour basé sur le Web à l'aide d'une base de données Firestore avec Event Sourcing (pour conserver les actions de jeu sous forme de séquence d'événements afin que les joueurs puissent consulter l'historique des parties et revenir aux tours précédents) et Firebase Authentication pour les connexions des utilisateurs. L'agent AI Studio configurera tous les services backend et écrira le frontend, la logique d'approvisionnement des événements et le code d'interaction avec la base de données. Une fois l'application finalisée, vous la déploierez directement sur Cloud Run en un seul clic.

Version finale d'un site Web de portfolio

Objectifs de l'atelier

  • Demandez à Google AI Studio de prototyper une application Web de jeu vidéo multijoueur au tour par tour.
  • Implémentez la prise en charge d'un code de jeu court et partageable ou d'un lien d'invitation pour permettre à vos amis de rejoindre la même partie.
  • Implémentez le stockage de la base de données Firestore avec un modèle d'approvisionnement d'événements pour suivre l'historique des parties et permettre de voyager dans le temps (annuler ou rejouer des tours).
  • Configurez et activez l'intégration Firebase pour provisionner une base de données Firestore et configurer l'authentification Google Sign-In.
  • Testez l'application dans le bac à sable d'aperçu interactif.
  • Déployez l'application sur Cloud Run directement depuis l'interface utilisateur de Google AI Studio.

Points abordés

  • Comment utiliser le mode Création de Google AI Studio pour prototyper rapidement un service de jeu Full Stack en langage naturel.
  • Comment implémenter un modèle architectural d'approvisionnement d'événements à l'aide de Cloud Firestore pour stocker l'historique des jeux.
  • Comment Google AI Studio configure automatiquement les intégrations Firebase Firestore et Authentication.
  • Comment déployer votre application AI Studio en tant que conteneur sans serveur sur Cloud Run.
  • Comment inspecter les enregistrements de base de données et l'état de sécurité dans la console Firebase.

2. Configuration du projet

Avant de lancer AI Studio, vérifiez l'état de votre compte et les prérequis.

Informations sur le compte Google et le niveau

  1. Si vous ne possédez pas encore de compte Google, créez-en un.
    • Conseil : Si possible, utilisez un compte Google personnel pour cet atelier. Les comptes de groupe, d'entreprise ou d'établissement scolaire peuvent appliquer des règles Workspace qui désactivent les fonctionnalités expérimentales ou les intégrations cloud.
  2. Consultez les informations de facturation pour les déploiements :
    • Niveau Starter de Google Cloud : permet de publier jusqu'à deux applications Full Stack dans une région sélectionnée sans frais, sans avoir à créer de compte de facturation Google Cloud complet.
    • Déploiement standard : se connecte à un projet Google Cloud payant existant et augmente les limites de stockage, les ressources de processeur et les API.

3. Créer un jeu vidéo au tour par tour en mode Création d'AI Studio

Créons l'enveloppe de l'application et demandons à l'assistant de code IA de créer des couches de sécurité, de logique de jeu et de persistance basées sur les événements.

  1. Accédez au panneau Applications de Google AI Studio, puis cliquez sur Nouvelle application.
  2. Dans le champ du prompt, saisissez la description de votre application de jeu vidéo au tour par tour : 
    Build a web-based, turn-based Tic-Tac-Toe game using
Firebase as a backend. Users must be able to securely sign in
using Google Sign-In, start a new game match, make moves, and play
against an AI player or another user. Any algorithm used for the
game opponent AI should use simple algorithms like min/max and the
app should not make any calls to an LLM like the Gemini API. To
support multiplayer matches, the application must generate a short
game code or share link that players can easily copy and send to a
friend to join the match. Use Firestore and an event sourcing
pattern to save a history of every move (turn) as a separate event
document in a subcollection under the game document. The
application must reconstruct the current game state by replaying
these events, and must allow users to view previous turns and opt
to restore/roll back the game to a prior turn's state.
    Ce lien remplira automatiquement le champ du prompt pour vous.
  3. Cliquez sur Créer pour lancer le processus de génération de l'application.

Lorsque l'agent AI Studio détecte la nécessité d'un stockage de base de données et d'une connexion utilisateur sécurisée, il déclenche le flux de configuration Firebase automatisé.

  1. Au bout d'une minute environ, une fiche d'intégration permettant d'activer Firebase s'affiche dans l'espace de travail.
  2. Cliquez sur le bouton Activer Firebase pour confirmer et accepter les conditions d'utilisation.
  3. L'agent exécutera la configuration en arrière-plan. Dans les coulisses :
    • Une instance de base de données Firestore est provisionnée.
    • Firebase Authentication est activé avec Google Sign-In.
    • Une configuration de compte de service est établie (par exemple, la création de src/lib/firebase.ts contenant les identifiants API).
    • Un fichier firestore.rules contenant les limites de sécurité par défaut (règles d'isolation des utilisateurs) est ajouté.

4. Testez, testez... et testez.

Avant de lancer le service en direct, exécutez des vérifications de validation dans l'aperçu interactif.

  1. Ouvrez le volet d'aperçu dans Google AI Studio.
  2. Cliquez sur le bouton "Se connecter" pour déclencher l'authentification Google Sign-In du bac à sable.
    • Remarque sur la correction des erreurs : lors de la génération ou des tests, vous pouvez parfois rencontrer des problèmes d'exécution, des erreurs de compilation ou des échecs d'autorisation Firestore en raison d'un désalignement des règles de sécurité. Dans ce cas, AI Studio affiche un bouton Corriger dans la discussion, ce qui vous permet de demander à l'agent de diagnostiquer et de résoudre automatiquement le problème.
    Emplacement du bouton de correction dans Google AI Studio
  3. Une fois connecté, démarrez une nouvelle partie, copiez le code de jeu court ou le lien de partage généré, et vérifiez qu'il peut être utilisé pour rejoindre la partie.
  4. Effectuez plusieurs mouvements et vérifiez que l'historique des parties s'affiche correctement.
  5. Essayez de revenir aux tours précédents de la partie. Assurez-vous que le tableau ou l'état se met à jour pour refléter ce point passé dans l'historique du gameplay, et vérifiez que vous pouvez restaurer ou effectuer un rollback vers cet état.
  6. Si vous souhaitez modifier le style ou le comportement, demandez-le à l'agent dans la fenêtre de discussion. Exemple :
    • "Could you style the game board interface using Tailwind CSS and add a retro pixel-art theme?"
    • "Add a 'Turn History' sidebar matching the current state replay that shows when each move was made and by whom."
  7. Attendez que l'agent mette à jour la base de code et vérifiez le navigateur d'aperçu pour voir les mises à jour.

5. Déployer dans Cloud Run

Une fois votre prototype entièrement fonctionnel, déployez-le en tant que service public sur Cloud Run.

  1. En haut à droite de Google AI Studio, cliquez sur le bouton Publier pour lancer l'assistant de déploiement.Emplacement du bouton "Publier" dans Google AI Studio
  2. Cliquez sur Premiers pas pour configurer votre projet Google Cloud.
    • Vérifiez que le menu déroulant Projet Google Cloud cible correspond au projet que vous avez associé à votre espace de travail.
    • AI Studio générera automatiquement un identifiant de service unique pour l'instance Cloud Run.
    • Vous pouvez également spécifier un préfixe d'URL .ai.studio personnalisé (par exemple, your-portfolio-name.ai.studio) dans la configuration de votre déploiement.
  3. Si vous effectuez un déploiement pour la première fois et que vous utilisez les paramètres Google Cloud standards, vous serez peut-être invité à spécifier un type d'organisation et à fournir des informations de facturation.
  4. Cliquez sur Publier l'application.
  5. Les étapes de création, d'enregistrement et de déploiement du conteneur s'effectuent en arrière-plan. Ce processus prend normalement entre deux et quatre minutes.
  6. Une fois le déploiement terminé, copiez l'URL de l'application générée et accédez au lien de l'application en direct dans un onglet de navigateur.
  7. Testez l'application Web en direct dans votre navigateur.

6. Inspecter dans la console Firebase

Découvrez comment les schémas de données et les utilisateurs sont suivis.

  1. Accédez à la console Firebase.
  2. Sélectionnez votre projet (qui porte le libellé AI Studio ou votre ID de projet lié manuellement).
  3. Dans le volet de navigation de gauche, sélectionnez Créer > Base de données Firestore :
    • Affichez les collections et les documents de base de données créés par votre application.
    • Vérifiez que chaque document possède un ID de propriétaire correspondant aux identifiants d'authentification de l'utilisateur actif.
  4. Sélectionnez l'onglet Sécurité dans le panneau Firestore pour examiner les directives de sécurité générées automatiquement qui limitent les autorisations de lecture et d'écriture aux propriétaires de documents validés.
  5. Accédez à Sécurité > Authentification pour afficher la liste des identifiants utilisateur actifs renseignés lors de vos tests de connexion.

7. Effectuer un nettoyage

Pour éviter des frais de facturation imprévus ou libérer de l'espace dans les ressources de votre espace de travail :

  1. Dans Google AI Studio, accédez à la page "Applications".
  2. Recherchez votre application dans la grille ou la liste.
  3. Cliquez sur l'icône de corbeille pour supprimer l'état de l'application et annuler la publication du service dans Cloud Run.
  4. Si vous avez effectué le déploiement à l'aide d'un projet standard et que vous souhaitez arrêter complètement toutes les ressources, accédez aux paramètres du projet Google Cloud Console et supprimez le projet sous-jacent.

8. Conclusion

Félicitations ! Vous avez conçu, développé et déployé un jeu vidéo au tour par tour directement depuis Google AI Studio.

Accédez à ce lien pour obtenir le badge Parcours du créateur terminé.

Pour poursuivre votre parcours, accédez à goo.gle/builders pour votre prochain atelier.

En savoir plus