Lancez votre application Web Liste de tâches avec l'IA

1. Introduction

Présentation

Où commence la création avec l'IA aujourd'hui ? Pour la plupart d'entre nous, elle commence par une simple requête ou un prototype. Google AI Studio propose un mode de compilation puissant (souvent appelé "codage d'ambiance") 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 une application collaborative de tâches à effectuer avec une base de données Firestore pour le stockage persistant et Firebase Authentication pour les connexions utilisateur. L'agent AI Studio configurera tous les services backend et écrira le code d'interaction frontend et de base de données. Une fois l'application finalisée, vous la déploierez directement sur Cloud Run en un seul clic.

Objectifs de l'atelier

  • Demander à Google AI Studio de créer un prototype d'application Web collaborative de tâches à effectuer.
  • Configurer et activer l'intégration Firebase pour provisionner une base de données Firestore et configurer l'authentification Google Sign-In.
  • Tester l'application dans le bac à sable d'aperçu interactif.
  • Déployer l'application sur Cloud Run directement depuis l'interface utilisateur de Google AI Studio.

Points abordés

  • Comment utiliser le mode de compilation de Google AI Studio pour créer rapidement un prototype de service full stack en langage naturel.
  • 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 de démarrage 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 une application de tâches à effectuer en mode de compilation AI Studio

Créons l'enveloppe de l'application et demandons à l'assistant de code IA de créer des couches de sécurité et de persistance.

  1. Accédez au panneau Applications de Google AI Studio, puis cliquez sur Nouvelle application.
  2. Dans la zone de chat, saisissez la description de votre application de tâches à effectuer : 
    Build a collaborative to-do list application using Firebase as a backend. Users must be able to securely sign in using Google Sign-In, view their personal tasks, add new task items, toggle status as completed, and delete tasks. The database must isolate tasks so users can only view and modify their own records.
  3. Cliquez sur Compiler pour lancer le processus de génération de l'application.

Lorsque l'agent AI Studio reconnaît 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 "Connexion" pour déclencher l'authentification Google Sign-In du bac à sable.
    • Remarque sur la résolution 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 le chat, 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é, ajoutez plusieurs tâches (par exemple, "Consulter la documentation Cloud Run", "Terminer l'atelier de programmation").
  4. Basculez certaines tâches comme terminées et supprimez-en une pour vous assurer que les gestionnaires côté client et les mises à jour de l'état de la base de données sont corrects.
  5. Si vous souhaitez modifier le style ou le comportement, demandez-le à l'agent dans la fenêtre de chat. Exemple :
    • "Could you style the interface using Tailwind CSS, and add a dark mode toggle button?"
    • "Show a count of remaining incomplete tasks at the footer of the task list."
  6. 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.
  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

Examinons les schémas de données et la façon dont 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 Compiler > 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 nettoyer 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é une application Web collaborative full stack directement depuis Google AI Studio.

En savoir plus