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 sollicité l'aide de Patrick, qui travaille pour le service informatique, et de Ruby, une consultante, pour créer un système évolutif basé sur le cloud. Dans le présent 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 schéma 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
• Découvrir et déployer un code qui permet aux utilisateurs de programmer des rendez-vous
• Découvrir 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, Consultante en logiciels	Bonjour Patrick, Vous avez fait du bon travail la semaine dernière. Je suis ravie de constater que les données de la clinique ont été migrées vers Firestore. Il semble que la prochaine étape consiste à utiliser Firebase pour héberger le site Web de Pet Theory. Ruby
Patrick, Administrateur informatique	Bonjour Ruby, Je n'ai jamais entendu parler de l'hébergement Firebase. Quels sont ses avantages ? Par quoi dois-je commencer ? Patrick
Ruby, Consultante en logiciels	Bonjour Patrick, Le principal avantage de l'hébergement Firebase est qu'il est sans serveur, il n'y a donc pas d'infrastructure à gérer. Des règles de sécurité sont également intégrées dans l'application, de sorte que les autorisations peuvent être limitées pour minimiser les problèmes lors du traitement des données client. Firebase dispose en plus d'un modèle de paiement à l'utilisation et offre donc une plate-forme de développement mobile complète pour notre cas d'utilisation. Ruby
Patrick, Administrateur informatique	Bonjour Ruby, Il semble que Firebase va énormément faciliter la gestion de la sécurité et de l'infrastructure (une grande partie de mon travail). Et c'est vraiment bien de ne pas être facturé pour des serveurs inactifs ! 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 pour accéder à l'URL de la console Firebase.

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

• Le nom d'utilisateur pour
• Le mot de passe pour

Remarque :
Un projet Firebase nommé a été provisionné. Sélectionnez ce projet pour accéder aux produits Firebase et suivre ce tutoriel.

Sur l'écran "Vue d'ensemble du projet" de Firebase, saisissez les commandes suivantes :

1. Sélectionnez l'icône Web (encadrée ci-dessous) dans la liste des icônes de la page "Lancez-vous en ajoutant Firebase à votre application" :

   

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

   Pet Theory

3. Cochez la case à côté de "Configurez également Firebase Hosting pour cette application".

4. Cliquez sur le menu déroulant "Déployer", puis sélectionnez Créer un site.

5. Modifiez la valeur par défaut pour inclure le préfixe "student".

   student-bucket-{{{ project_0.project_id | "PREFIX" }}}-1 Remarque :
   Avant de continuer, assurez-vous que le menu déroulant des sites contient "student-bucket--1". Le domaine du site sera basé sur ce paramètre.

6. Cliquez sur le bouton Enregistrer l'application.

7. Cliquez sur Suivant > Suivant > Accéder à la console.

   Remarque :
   La modification du domaine du site Firebase par défaut nécessite d'apporter des changements à l'environnement local.
   Plus précisément, nous devons effectuer les actions suivantes :
   1. Mettre à jour le fichier firebase.json pour inclure l'ID de site personnalisé (voir Configurer des cibles de déploiement pour vos sites)
   2. Utiliser l'ID de site lors de l'exécution de la commande firebase deploy --only hosting:student-bucket--1

Vous venez de configurer l'application Firebase.

Tester la tâche terminée

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

Enregistrer votre application Firebase

Tâche 2 : Activer les produits Firebase

Firebase Authentication

Dans la console Firebase, nous allons configurer Firebase Authentication.

1. Dans le panneau de navigation de gauche, cliquez sur le bouton de menu déroulant Créer.

2. Sélectionnez la vignette Authentification, puis cliquez sur Commencer :

3. Cliquez sur l'onglet Méthode de connexion, puis sur l'élément Google.

4. Cliquez sur le bouton Activer en haut à droite. Pour le champ Adresse e-mail d'assistance associée au projet, sélectionnez votre compte d'atelier dans la liste déroulante.

   {{{ user_0.username | "USERNAME" }}}

   La page qui s'affiche doit ressembler à celle-ci :

5. Une fois que vous avez vérifié ce qui précède, cliquez sur le bouton Enregistrer.

   Remarque :
   Lorsque vous utilisez un domaine personnalisé avec Firebase, vous devez également modifier le paramètre "Domaines autorisés".

6. Cliquez sur l'onglet Paramètres.

7. Sous le titre Domaines, cliquez sur l'élément de menu Domaines autorisés.

   La page qui s'affiche doit ressembler à celle-ci :

8. Cliquez sur le bouton Ajouter un domaine.

9. Saisissez le domaine suivant :

   student-bucket-{{{ project_0.project_id | PROJECT_ID }}}-1.web.app Remarque :
   L'ajout du domaine personnalisé permet au flux OAuth Firebase de fonctionner correctement.

10. Cliquez sur le bouton Ajouter.

Tester la tâche terminée

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

Configurer Firebase Authentication

Firebase Firestore

Dans la console Firebase, nous allons configurer Firebase Authentication.

1. Dans le panneau de navigation de gauche, cliquez sur le bouton de menu déroulant Créer.

2. Sélectionnez la vignette Base de données Firestore, puis cliquez sur Créer une base de données :

3. Acceptez les paramètres par défaut, puis cliquez sur Suivant.

4. Cliquez sur Créer pour provisionner Cloud Firestore.

5. Cliquez sur l'onglet Règles.

   Remarque :
   Nous allons mettre à jour les règles de sécurité de la base de données Firestore pour utiliser l'authentification. Dans les nouvelles règles, nous autorisons la lecture/l'écriture sur la base de données si l'utilisateur est authentifié.

6. Mettez à jour les règles comme suit :

   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; } } }

Vous avez configuré Firebase Authentication et Firestore avec un identifiant de site personnalisé. La configuration du backend est désormais terminée.

Localhost 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…

Patrick, Administrateur informatique	Bonjour Ruby, Merci pour tous vos conseils. L'environnement Firebase semble prêt. Ma prochaine tâche consiste à déployer le code des développeurs du site Web. Pouvez-vous m'expliquer en quoi cela consiste et ce que je dois faire ensuite ? Patrick
Ruby, Consultante	Bonjour Patrick, Bonne nouvelle ! Je vais vous envoyer des instructions pour vous permettre d'exécuter l'application et d'ajouter les fonctionnalités suivantes : Configurer une authentification Web pour la connexion Permettre l'enregistrement des informations des clients sur la page de profil Créer un portail en libre-service pour les rendez-vous Ruby
Patrick, ingénieur DevOps	Bonjour Ruby, On dirait que cela va demander beaucoup de travail. Est-ce que je vais devoir procéder à des changements structurels chaque fois que je voudrai ajouter quelque chose ? Sans parler du temps qu'il faudra pour que les modifications soient effectives... Patrick
Ruby, Consultante	Bonjour Patrick, Les bibliothèques de Firebase peuvent se charger de faire le gros du travail. Firebase propose d'excellents outils de ligne de commande pour vous aider à connecter votre localhost au projet Firebase du backend. Utilisez firebase init pour indiquer à Firebase les produits que vous souhaitez utiliser. Une fois votre projet configuré, vous pouvez simplement appeler firebase deploy à partir de la ligne de commande. Ruby
Patrick, Administrateur informatique	Bonjour Ruby, Me voilà rassuré. L'hébergement Firebase me plaît de plus en plus :-) Patrick

Tâche 3 : Installer la CLI Firebase

Utilisez l'IDE pour vous connecter à Firebase et déployer votre application.

Remarque :
L'environnement de développement a été préconfiguré à l'aide d'outils Firebase.

1. Copiez le lien IDE inclus dans le panneau "Détails concernant l'atelier".

   {{{ project_0.startup_script.service_url | "IDE" }}}

2. Collez le lien dans un nouvel onglet de navigation privée pour ouvrir Cloud Code.

3. Ouvrez un terminal en cliquant sur le menu de l'application () > Terminal > Nouveau terminal.

4. Clonez le dépôt GitHub à partir de la ligne de commande :

   git clone https://github.com/rosera/pet-theory.git

5. Dans le panneau de gauche, cliquez sur l'icône Explorateur, puis sur Ouvrir un dossier > pet-theory > lab02. Cliquez sur OK.

   Remarque :
   Si un pop-up Do you trust the authors of the files in this folder? (Faites-vous confiance aux auteurs des fichiers de ce dossier ?) s'affiche, cochez la case, puis cliquez sur Yes, I trust the authors (Oui, je fais confiance aux auteurs).

6. Ouvrez à nouveau un terminal en cliquant sur le menu de l'application () > Terminal > Nouveau terminal.

7. Mettez à jour les packages de nœuds :

   npm i

   Exemple de résultat :

   added 630 packages, and audited 631 packages in 42s 69 packages are looking for funding run `npm fund` for details found 0 vulnerabilities npm notice npm notice New minor version of npm available! 10.7.0 -> 10.8.3 npm notice Changelog: https://github.com/npm/cli/releases/tag/v10.8.3 npm notice To update run: npm install -g npm@10.8.3 npm notice npm warn using --force Recommended protections disabled. up to date, audited 631 packages in 2s 69 packages are looking for funding run `npm fund` for details found 0 vulnerabilities

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 à ce que l'activité de navigation s'effectue dans une fenêtre de navigation privée pour faciliter cette action avec les identifiants appropriés.

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

3. Copiez et collez l'URL générée dans un nouvel onglet de navigation privée, puis appuyez sur Entrée (une erreur se produit si vous cliquez directement sur le lien).

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

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

6. Confirmez votre ID de session en cliquant sur Oui, il s'agit de mon ID de session.

7. Un code d'accès vous est ensuite attribué :

8. Copiez-le et collez-le dans l'invite de commande Saisissez le code d'autorisation de Cloud Shell, puis appuyez sur Entrée.

Vous devez obtenir un résultat ressemblant à celui-ci :

Exemple de résultat :

✔ Success! Logged in as student-02-21ab4a7ce0d1@qwiklabs.net Remarque :
Le localhost est désormais associé au projet Firebase du backend.

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 votre répertoire de projet et les produits Firebase. Il vous est demandé de sélectionner les fonctionnalités de la CLI Firebase que vous souhaitez définir 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. Nous avons besoin des 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 Entrée et sur N pour conserver votre fichier firestore.rules.
   • Appuyez sur Entrée et sur N pour conserver votre fichier firestore.indexes.json.
   • Appuyez sur Entrée pour rester dans le répertoire public, puis sur N pour interdire les réécritures dans le fichier /index.html.
   • Appuyez sur Entrée, puis sur N pour "Set up automatic builds and deploys with GitHub?" (Configurer les déploiements et les compilations automatiques avec GitHub ?).
   • Saisissez N lorsque vous êtes invité à écraser le fichier 404.html.
   • Saisissez N lorsque vous êtes invité à écraser le fichier index.html.

   Exemple de résultat :

   ✔ Wrote public/404.html ✔ Wrote public/index.html i Writing configuration info to firebase.json... i Writing project information to .firebase... i Writing gitignore file to .gitignore... ✔ Firebase initialization complete!

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

Tâche 6 : Déployer sur Firebase

Pour cette étape, continuez dans le terminal. Vérifiez que vous vous trouvez toujours dans le dossier pet-theory/lab02.

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

   Résultat attendu

   { ... "hosting": { "site": "student-bucket-{{{ project_0.project_id | PROJECT_ID }}}-1", ... } }

2. Déployez votre application Firebase en utilisant la valeur de votre ID de site, par exemple :

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

   Résultat :

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

3. Copiez l'URL d'hébergement (qui doit se présenter sous la forme .web.app) et ouvrez-la dans un nouvel onglet de navigation privée.

   https://student-bucket-{{{ project_0.project_id | PROJECT_ID }}}-1.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.

   

   Pour ce faire, 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:student-bucket-{{{ project_0.project_id | PROJECT_ID }}}-1

   Résultat :

   ✔ Deploy complete! Project Console: https://console.firebase.google.com/project/project_0.project_id| "PROJECT_ID"/overview Hosting URL: https://student-bucket-{{{ project_0.project_id| "site" }}}-1.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 ne permettra pas d'afficher les modifications nécessaires.

   

5. Saisissez des informations sur le 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 dans 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 puisque 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.

Ajouter une page client à votre application Web

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é de connexion "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 : 16 octobre 2024

Dernier test de l'atelier : 16 octobre 2024

Copyright 2024 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.