GSP643

Présentation

Il y a 12 ans, Lily a créé une chaîne de cliniques vétérinaires appelée Pet Theory. Ces dernières années, Pet Theory a connu une expansion rapide. Leur système de prise de rendez-vous n'est plus en mesure de gérer la demande accrue ni de permettre aux clients de programmer leurs propres rendez-vous. Lily a donc demandé l'aide de Patrick, qui travaille pour le service informatique, et de Ruby, une consultante, pour créer un système évolutif dans le cloud. Dans cet atelier, vous allez créer une application Web Firebase totalement opérationnelle qui permettra aux utilisateurs d'enregistrer des informations et de programmer des rendez-vous en temps réel.

Architecture

Ce diagramme présente les services que vous allez utiliser et la manière dont ils se connectent les uns aux autres :

Objectifs

Dans cet atelier, vous allez apprendre à effectuer les tâches suivantes :

• Configurer la sécurité Firestore pour automatiser l'authentification et l'autorisation côté serveur
• Ajouter Google Sign-In à votre application Web
• Configurer la base de données pour que les utilisateurs puissent renseigner leurs coordonnées
• Explorer et déployer du code qui permet aux utilisateurs de programmer des rendez-vous
• Examiner les mises à jour en temps réel de Firebase dans votre application Web

Prérequis

Il s'agit d'un atelier de niveau intermédiaire destiné aux personnes qui maîtrisent déjà la console Cloud et les environnements de shell. Connaître Firebase est utile, mais n'est pas obligatoire. Avant de commencer cet atelier, il est recommandé d'avoir suivi l'atelier suivant :

• Importer des données dans une base de données Firestore

Vous devez également savoir modifier des fichiers. Vous pouvez utiliser votre éditeur de texte préféré (comme nano, vi, etc.) ou lancer l'éditeur de code de Cloud Shell, qui se trouve dans le ruban supérieur :

Lorsque vous êtes prêt, faites défiler la page vers le bas et suivez les instructions pour configurer l'environnement de l'atelier.

Backend Firebase

Ruby envoie un e-mail à Patrick :

Ruby envoie à Patrick d'autres informations de référence par e-mail, puis ils organisent une réunion pour définir les activités principales. Lors de la réunion, ils décident que Patrick doit procéder comme suit :

• Configurer un projet Firebase
• Mettre en place des règles de sécurité
• Ajouter la CLI Firestore au projet Google Cloud

Vous allez maintenant aider Patrick à accomplir ces tâches.

Tâche 1 : Enregistrer une application Firebase

Ouvrez une fenêtre de navigation privée et accédez à la console Firebase.

Lorsque vous y êtes invité, saisissez les informations suivantes :

• Nom d'utilisateur :
• Mot de passe :

1. Si vous y êtes invité, acceptez les Conditions d'utilisation de Firebase et cliquez sur Continuer.

2. Sur la page de vue d'ensemble du projet, cliquez sur + Ajouter une application, puis sélectionnez l'icône Web.

3. Lorsque vous êtes invité à renseigner le champ "Pseudo de l'application", saisissez Pet Theory.

4. Cochez la case Configurer aussi Firebase Hosting pour cette application.

5. Dans le menu déroulant du site, sélectionnez Créer un site ou vérifiez qu'il correspond à l'ID du projet (ou aux instructions fournies dans les détails de l'atelier).

6. Cliquez sur le bouton Enregistrer l'application.

7. Dans les étapes suivantes (Ajouter le SDK Firebase, Installer la CLI Firebase et Déployer sur Firebase Hosting), cliquez sur Suivant ou sur Accéder à la console pour revenir au tableau de bord principal.

Vous venez de configurer l'application Firebase.

Tester la tâche terminée

Cliquez sur Vérifier ma progression pour valider l'objectif.

Tâche 2 : Activer les produits Firebase

Firebase Authentication

Dans la console Firebase, configurez Firebase Authentication pour permettre aux utilisateurs de se connecter avec Google.

1. Dans le menu de navigation de gauche, cliquez sur Authentification (si l'option n'est pas épinglée, vous pouvez la trouver sous Raccourcis du projet ou Catégories de produits > Sécurité).

2. Si c'est la première fois que vous utilisez cette fonctionnalité, cliquez sur Commencer.

3. Dans l'onglet Méthode de connexion, sélectionnez Google dans la liste des fournisseurs.

4. Dans la boîte de dialogue de configuration, cliquez sur le bouton Activer.

5. Sélectionnez votre adresse e-mail d'assistance dans le menu déroulant, puis cliquez sur Enregistrer.

6. Pour ajouter le domaine personnalisé pour l'autorisation, cliquez sur l'onglet Paramètres en haut de la page "Authentification".

7. Sélectionnez Domaines autorisés dans le menu à gauche du volet des paramètres.

8. Cliquez sur le bouton Ajouter un domaine.

9. Saisissez le domaine suivant (en remplaçant la variable par votre ID de projet si nécessaire) :

   {{{ project_0.project_id | PROJECT_ID }}}.web.app

10. Cliquez sur le bouton Ajouter.

Tester la tâche terminée

Cliquez sur Vérifier ma progression pour valider l'objectif.

Firebase Firestore

Configurez ensuite la base de données Firestore.

1. Dans le menu de navigation de gauche, sous Bases de données et stockage, cliquez sur Firestore.

2. Sur la page de destination de Cloud Firestore, cliquez sur le bouton Créer une base de données.

3. Sous Étape 1 : Sélectionner l'édition, choisissez Édition standard et cliquez sur Suivant.

4. Sous Étape 2 : ID et emplacement de la base de données, sélectionnez l'emplacement approprié (par exemple, nam5 ou acceptez la valeur par défaut), puis cliquez sur Suivant.

5. Sous Étape 3 : Configurer, sélectionnez Démarrer en mode test, puis cliquez sur Créer.

6. Une fois la base de données provisionnée, cliquez sur l'onglet Règles.

7. Remplacez les règles de sécurité par les suivantes pour permettre aux utilisateurs authentifiés de lire/écrire leurs propres données :

   rules_version = '2'; service cloud.firestore { match /databases/{database}/documents { match /customers/{email} { allow read, write: if request.auth.token.email == email; } match /customers/{email}/{document=**} { allow read, write: if request.auth.token.email == email; } } }

Cliquez sur Publier pour déployer vos modifications sur Firebase.

Vous avez configuré Firebase Authentication et Firestore. La configuration du backend est terminée.

Hôte local Firebase

Vous avez aidé Patrick à configurer un environnement d'hébergement Firebase fonctionnel dans lequel un développeur Web peut déployer son code.

Cependant, Patrick n'a jamais activé l'authentification Firebase ni déployé de code vers Firebase. Il envoie donc un e-mail à Ruby pour obtenir de l'aide…

Tâche 3 : Cloner le dépôt et installer les dépendances

Dans cette tâche, vous allez utiliser Cloud Shell et son éditeur pour cloner le code de l'application et installer les packages Node.js requis.

1. Dans la même fenêtre de navigation privée que celle que vous utilisez pour la console Firebase, ouvrez un nouvel onglet, accédez à la console Google Cloud et acceptez les conditions d'utilisation si vous y êtes invité.

2. Dans la barre d'outils de la console Google Cloud, cliquez sur Activer Cloud Shell.

3. Dans le terminal Cloud Shell, exécutez la commande suivante pour copier les fichiers de l'atelier depuis le bucket Cloud Storage :

   gcloud storage cp -r gs://spls/gsp643/pet-theory .

4. Pour afficher et modifier le code, cliquez sur le bouton Ouvrir l'éditeur dans la barre d'outils Cloud Shell.

5. Dans l'éditeur Cloud Shell, accédez au dossier pet-theory/lab02 dans l'explorateur de fichiers.

6. Ouvrez un terminal dans l'éditeur Cloud Shell (ou utilisez le terminal Cloud Shell existant) et accédez au répertoire lab02 :

   cd pet-theory/lab02

7. Exécutez la commande suivante pour installer les packages Node.js :

   npm install Remarque : L'environnement Cloud Shell est fourni avec Node.js et npm préinstallés.

Vous êtes maintenant prêt à associer l'application au projet Firebase du backend.

Tâche 4 : Autoriser l'accès à Firebase

Dans l'IDE, connectez Firebase et déployez votre application.

1. Saisissez la commande suivante pour autoriser l'accès au projet Firebase :

   firebase login --no-localhost

   Remarque :

   Firebase va tenter d'autoriser l'environnement local à se connecter au projet Firebase. Veillez donc à vous trouver dans une fenêtre de navigation privée pour que cette action s'effectue avec les identifiants appropriés.

2. Saisissez Y pour activer les fonctionnalités Gemini dans Firebase.

3. Saisissez Y si vous êtes invité à indiquer si Firebase peut collecter les informations servant à établir les rapports d'erreurs, puis appuyez sur "Entrée".

4. Cliquez sur l'URL générée pour ouvrir un autre onglet dans la même fenêtre de navigation privée.

5. Sélectionnez le compte de l'atelier, puis cliquez sur Autoriser.

6. Cliquez sur Oui, je viens d'exécuter cette commande pour continuer.

7. Cliquez sur Oui, il s'agit de mon ID de session pour confirmer votre ID de session.

8. Copiez le code d'accès généré, collez-le dans l'invite Cloud Shell Saisissez le code d'autorisation, puis appuyez sur ENTRÉE.

Vous devez obtenir un résultat semblable à celui-ci.

Exemple de résultat :

Firebase est maintenant connecté et autorisé. L'étape suivante consiste à initialiser les produits Firebase à utiliser.

Tâche 5 : Initialiser les produits Firebase

Dans l'IDE, indiquez à Firebase les produits requis.

1. Initialisez un nouveau projet Firebase dans votre répertoire de travail actuel :

   firebase init

   Remarque :

   Les différentes étapes de cette commande vont vous permettre de configurer le répertoire de votre projet et les produits Firebase. Sélectionnez les fonctionnalités de la CLI Firebase que vous souhaitez configurer dans ce dossier. Utilisez les touches fléchées pour parcourir la liste vers le haut et vers le bas. Utilisez la barre d'espace pour sélectionner le produit.

2. Sélectionnez les produits suivants :

   • Firestore
   • Hosting

3. Utilisez les touches fléchées et la barre d'espace pour sélectionner Firestore et Hosting. Assurez-vous que votre shell correspond à ce qui suit, puis appuyez sur Entrée :

   ? Which Firebase CLI features do you want to set up for this folder? Press Space to select features, then Enter to confirm your choices. ◯ Realtime Database: Configure a security rules file for Realtime Database and (optionally) provision default insta ◉ Firestore: Configure security rules and indexes files for Firestore ◯ Functions: Configure a Cloud Functions directory and its files ❯◉ Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys ◯ Hosting: Set up GitHub Action deploys ◯ Storage: Configure a security rules file for Cloud Storage

4. Suivez les étapes restantes pour configurer Firebase :

   • Faites défiler la page jusqu'à la section Use an existing project (Utiliser un projet existant), puis appuyez sur Entrée.
   • Sélectionnez l'ID du projet dans la liste , puis appuyez sur Entrée.
   • Appuyez sur N, puis sur Entrée pour conserver votre fichier firestore.rules.
   • Appuyez sur N, puis sur ENTRÉE pour conserver votre fichier firestore.indexes.json.
   • Appuyez sur Entrée pour rester dans le répertoire public.
   • Appuyez sur N pour interdire les réécritures dans le fichier index.html, puis appuyez sur Entrée.
   • Appuyez sur N lorsque vous êtes invité à configurer les déploiements et les compilations automatiques avec GitHub, puis appuyez sur Entrée.
   • Appuyez sur N lorsque vous êtes invité à écraser le fichier 404.html.
   • Appuyez sur N lorsque vous êtes invité à écraser le fichier index.html.
   • Appuyez sur Y lorsque vous êtes invité à installer les compétences agentiques pour Firebase, puis appuyez sur Entrée.

   Exemple de résultat :

   ✔ Agent skills installation started ✔ Wrote configuration info to firebase.json ✔ Wrote project information to .firebaserc ✔ Wrote .gitignore ✔ Firebase initialization complete!

La configuration locale est à présent terminée.

Tâche 6 : Déployer sur Firebase

Pour cette étape, restez dans Cloud Shell. Vérifiez que vous vous trouvez dans l'éditeur de code, dans le dossier pet-theory/lab02.

1. Modifiez le fichier firebase.json et mettez à jour la section hosting avec la clé site :

   { ... "hosting": { "site": "{{{ project_0.project_id | PROJECT_ID }}}", ... } }

2. Ouvrez le terminal et déployez votre application Firebase en utilisant la valeur de votre ID de site, par exemple :

   firebase deploy --only hosting:{{{ project_0.project_id | PROJECT_ID }}}

   Résultat :

   ✔ Deploy complete! Project Console: https://console.firebase.google.com/project/project_0.project_id| "PROJECT_ID"/overview Hosting URL: https://{{{ project_0.project_id| "site" }}}.web.app

3. Cliquez sur l'URL d'hébergement générée (qui doit être semblable à .web.app) pour l'ouvrir dans un nouvel onglet de navigation privée :

   https://{{{ project_0.project_id | PROJECT_ID }}}.web.app

   Important :

   N'utilisez pas d'identifiants personnels pour vous authentifier dans cet atelier. Utilisez le compte pour vous connecter à Google.

4. Cliquez sur le bouton Se connecter avec Google :

   Remarque :

   Si vous voyez un message d'erreur indiquant que le navigateur n'est pas compatible ou les données et les cookies tiers sont peut-être désactivés, assurez-vous d'avoir activé les cookies dans votre navigateur.

   

   Dans Chrome, cliquez sur l'icône représentant un œil tout à droite de l'onglet de l'URL, puis suivez les liens bleus dans le pop-up. Cliquez sur le lien Impossible d'accéder au site ? pour modifier les paramètres du navigateur et accepter les cookies.

5. Connectez-vous avec le nom d'utilisateur fourni (par exemple, ). La page suivante s'ouvre :

   

   Une petite entreprise comme Pet Theory n'a ni les ressources, ni les compétences nécessaires pour assurer une telle gestion. Dans ce cas, il peut être utile de laisser les utilisateurs de l'application se connecter avec leur compte Google (ou tout autre fournisseur d'identité).

   Remarque :

   La gestion des mots de passe est une tâche difficile qui peut présenter des risques pour votre entreprise. De plus, les utilisateurs seront réticents à l'idée de devoir créer un ID utilisateur et un mot de passe.

Vous venez de déployer un code qui permet aux utilisateurs d'accéder à l'application de prise de rendez-vous via l'authentification Google.

Tâche 7 : Ajouter une page client à votre application Web

Revenez au terminal et utilisez l'éditeur pour afficher les fichiers dans le dossier public.

1. Ouvrez le fichier public/customer.js, puis copiez et collez le code suivant :

   let user; firebase.auth().onAuthStateChanged(function(newUser) { user = newUser; if (user) { const db = firebase.firestore(); db.collection("customers").doc(user.email).onSnapshot(function(doc) { const cust = doc.data(); if (cust) { document.getElementById('customerName').setAttribute('value', cust.name); document.getElementById('customerPhone').setAttribute('value', cust.phone); } document.getElementById('customerEmail').innerText = user.email; }); } }); document.getElementById('saveProfile').addEventListener('click', function(ev) { const db = firebase.firestore(); var docRef = db.collection('customers').doc(user.email); docRef.set({ name: document.getElementById('customerName').value, email: user.email, phone: document.getElementById('customerPhone').value, }) })

2. Ouvrez le fichier public/styles.css et collez le code suivant :

   body { background: #ECEFF1; color: rgba(0,0,0,0.87); font-family: Roboto, Helvetica, Arial, sans-serif; margin: 0; padding: 0; } #message { background: white; max-width: 360px; margin: 100px auto 16px; padding: 32px 24px 16px; border-radius: 3px; } #message h3 { color: #888; font-weight: normal; font-size: 16px; margin: 16px 0 12px; } #message h2 { color: #ffa100; font-weight: bold; font-size: 16px; margin: 0 0 8px; } #message h1 { font-size: 22px; font-weight: 300; color: rgba(0,0,0,0.6); margin: 0 0 16px;} #message p { line-height: 140%; margin: 16px 0 24px; font-size: 14px; } #message a { display: block; text-align: center; background: #039be5; text-transform: uppercase; text-decoration: none; color: white; padding: 16px; border-radius: 4px; } #message, #message a { box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); } #load { color: rgba(0,0,0,0.4); text-align: center; font-size: 13px; } @media (max-width: 600px) { body, #message { margin-top: 0; background: white; box-shadow: none; } body { border-top: 16px solid #ffa100; } }

3. À partir de la ligne de commande du terminal, exécutez la commande suivante :

   firebase deploy --only hosting:{{{ project_0.project_id | PROJECT_ID }}}

   Résultat :

   ✔ Deploy complete! Project Console: https://console.firebase.google.com/project/project_0.project_id| "PROJECT_ID"/overview Hosting URL: https://{{{ project_0.project_id | PROJECT_ID }}}.web.app

4. Accédez à l'onglet de votre application et forcez l'actualisation de la page en appuyant sur CMD+MAJ+R (Mac) ou CTRL+MAJ+R (Windows). Une actualisation simple de la page ne permettra pas d'afficher les modifications nécessaires.

   

5. Saisissez des informations sur un client (inventez un nom et un numéro de téléphone) :

   Nom du client :

   John

   Numéro de téléphone du client :

   98473757454

6. Cliquez sur Enregistrer le profil.

7. Revenez à la console Firebase.

8. Cliquez sur Créer > Base de données Firestore pour afficher les informations de profil enregistrées :

   

9. Revenez à la page de l'application Web et cliquez sur le lien Appointments (Rendez-vous). Une page vierge s'affiche, car vous n'avez pas encore déployé le code des rendez-vous.

Tester la tâche terminée

Cliquez sur Vérifier ma progression pour valider l'objectif.

Intéressant !

Firestore met à jour les clients (applications Web et applications mobiles natives) en temps réel, sans que l'utilisateur ait besoin d'actualiser ou de recharger la page.

Félicitations !

Au cours de cet atelier, vous avez créé une application Web sans serveur robuste à l'aide de Firebase. Après avoir créé et configuré un projet Firebase, vous avez ajouté la sécurité Firestore pour automatiser l'authentification et l'autorisation côté serveur. Vous avez ensuite ajouté la fonctionnalité Google Sign-In à votre application Web et configuré votre base de données pour que les utilisateurs puissent ajouter leurs coordonnées et leurs rendez-vous. Enfin, vous avez exploré et déployé un code qui permet aux utilisateurs de programmer des rendez-vous. Vous avez également affiché en temps réel les modifications de Firebase dans votre application Web. Vous êtes maintenant prêt à suivre les autres ateliers de ce parcours de formation.

Étapes suivantes et informations supplémentaires

• Google Cloud – Qu'est-ce que l'informatique sans serveur ?

Formations et certifications Google Cloud

Les formations et certifications Google Cloud vous aident à tirer pleinement parti des technologies Google Cloud. Nos cours portent sur les compétences techniques et les bonnes pratiques à suivre pour être rapidement opérationnel et poursuivre votre apprentissage. Nous proposons des formations pour tous les niveaux, à la demande, en salle et à distance, pour nous adapter aux emplois du temps de chacun. Les certifications vous permettent de valider et de démontrer vos compétences et votre expérience en matière de technologies Google Cloud.

Dernière mise à jour du manuel : 31 mai 2026

Dernier test de l'atelier : 31 mai 2026

Copyright 2026 Google LLC. Tous droits réservés. Google et le logo Google sont des marques de Google LLC. Tous les autres noms d'entreprises et de produits peuvent être des marques des entreprises auxquelles ils sont associés.