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

1. Introduction

Présentation

Où commence le développement avec l'IA aujourd'hui ? Pour la plupart d'entre nous, tout 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 complètes à 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 de tâches collaboratives 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 de backend et écrira le code d'interaction entre le frontend et la 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

• Demandez à Google AI Studio de prototyper une application Web de liste de tâches collaborative.
• 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 de l'aperçu interactif.
• Déployez l'application sur Cloud Run directement depuis l'interface utilisateur de Google AI Studio.

Points abordés

• Découvrez comment utiliser le mode "Créer" de Google AI Studio pour prototyper rapidement un service complet en utilisant le langage naturel.
• Découvrez comment Google AI Studio configure automatiquement les intégrations Firebase Firestore et Authentication.
• Découvrez comment déployer votre application AI Studio en tant que conteneur sans serveur sur Cloud Run.
• Découvrez 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 conditions préalables.

Compte Google et informations sur 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 scolaires peuvent appliquer des règles Workspace qui désactivent les fonctionnalités expérimentales ou les intégrations cloud.
2. Examinez 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 et sans avoir à créer un 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 dans le mode Créer d'AI Studio

Créons le shell de l'application et demandons à l'assistant de codage 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 le champ du prompt, saisissez la description de votre application de gestion des tâches :

   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 Build (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 carte d'intégration Activer Firebase s'affiche dans l'espace de travail.
2. Cliquez sur le bouton Enable Firebase (Activer Firebase) pour confirmer et accepter les conditions d'utilisation.
3. L'agent exécutera la configuration en arrière-plan. En arrière-plan :
   • Une instance de base de données Firestore est provisionnée.
   • Firebase Authentication est activé, et Google Sign-In l'est également.
   • Une configuration de compte de service est établie (par exemple, la création de src/lib/firebase.ts contenant les identifiants de l'API).
   • Un 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, effectuez des contrôles de validation dans l'aperçu interactif.

1. Ouvrez le volet d'aperçu dans Google AI Studio.
2. Cliquez sur le bouton "Login" (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écalage 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.
   
3. Une fois connecté, ajoutez plusieurs tâches (par exemple, "Examiner la documentation Cloud Run", "Terminer le Codelab").
4. Marquez certaines tâches comme terminées et supprimez-en une pour vous assurer que les gestionnaires côté client et l'état de la base de données sont correctement mis à jour.
5. Si vous souhaitez modifier le style ou le comportement, donnez des instructions à 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, puis vérifiez les modifications dans le navigateur d'aperçu.

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.
2. Cliquez sur Commencer pour configurer votre projet Google Cloud.
   • Vérifiez que le menu déroulant Projet Google Cloud cible le projet que vous avez associé à votre espace de travail.
   • AI Studio génère automatiquement un identifiant de service unique pour l'instance Cloud Run.
3. Si vous effectuez votre premier déploiement et que vous utilisez des 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 et d'enregistrement du conteneur, ainsi que de déploiement du service, se déroulent en arrière-plan. Ce processus prend généralement 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 associé manuellement).
3. Dans le volet de navigation de gauche, sélectionnez Build > Firestore Database (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 toute facturation imprévue 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 la corbeille pour supprimer l'état de l'application et annuler la publication du service depuis 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.

Pour obtenir le badge de fin d'atelier et trouver un autre atelier pour poursuivre votre parcours, accédez à goo.gle/builders.

En savoir plus

• Guide sur les règles de sécurité Firestore
• Documentation Cloud Run
• Créer des applications dans Google AI Studio