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 :

• Activer l'API Firebase dans votre projet Google Cloud
• Créer et configurer un projet Firebase
• 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.

Tâche 1 : Provisionner l'environnement 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 :

• Ajouter la CLI Firestore au projet Google Cloud
• Créer une base de données Firestore
• Configurer un projet Firebase
• Mettre en place des règles de sécurité

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

Tâche 2 : Installer la CLI Firebase

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" et collez-le dans un nouvel onglet de votre navigateur pour ouvrir Cloud Code.

2. Ouvrez un terminal pour accéder à la ligne de commande. Dans le panneau de gauche, cliquez sur le menu de l'application () > Terminal > Nouveau terminal.

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

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

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

5. Ouvrez un terminal.

6. Installez les packages de nœuds nécessaires :

npm i && npm audit fix --force

Résultat :

+ firebase-tools@10.7.0 added 3 packages from 11 contributors, removed 1 package and updated 8 packages in 79.808s

Vous êtes maintenant prêt à créer une base de données Firestore.

Tâche 3 : Configurer une base de données Firestore

Dans le terminal, préparez l'environnement à utiliser une base de données Firestore.

1. Définissez la région du projet sur  :

gcloud config set compute/region {{{project_0.default_region|REGION}}}

2. Activez les applications App Engine :

   gcloud app create --region={{{project_0.startup_script.app_region|REGION}}}

3. Créez une base de données Firestore :

   gcloud firestore databases create --region={{{project_0.startup_script.app_region|REGION}}}

Vous êtes maintenant prêt à créer un projet Firebase et à l'associer à votre compte Google Cloud.

Tâche 4 : Créer un projet Firebase

Ouvrez la console Firebase dans une fenêtre de navigation privée.

Remarque : L'atelier comprend des autorisations pour Firebase. Copiez le lien vers la console Firebase pour accéder à Firebase, puis utilisez les nom d'utilisateur et mot de passe fournis dans l'atelier pour vous authentifier.

1. Cliquez sur l'icône du compte en haut à droite de la page et assurez-vous qu'il s'agit bien du compte participant Qwiklabs qui vous a été fourni pour cet atelier.

2. Cliquez ensuite sur Ajouter un projet. Lorsque vous êtes invité à saisir un nom de projet, sélectionnez l'ID du projet dans le menu déroulant.

3. Acceptez les conditions d'utilisation de Firebase, puis cliquez sur Continuer. Confirmez le mode de facturation à l'usage.

4. Cliquez sur Continuer et désactivez Google Analytics pour votre projet Firebase sur la page suivante.

5. Cliquez ensuite sur Ajouter Firebase. Cliquez sur Continuer lorsqu'une invite vous indique que le nouveau projet est prêt :

Tester la tâche terminée

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

Créer un projet Firebase

Tâche 5 : Enregistrer votre application

Une fois la dernière étape terminée, vous devez vous trouver dans la console Firebase. Si vous fermez cette page, ouvrez un autre onglet de navigation privée et utilisez le lien suivant pour accéder à la console Firebase.

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.

3. Ensuite, cochez la case à côté de "Configurer également Firebase Hosting pour cette application".

4. Cliquez sur le bouton Enregistrer l'application.

5. Cliquez sur Suivant > Suivant > Accéder à la console. La page suivante s'affiche :

Vous venez de configurer Firebase pour le projet. Vous allez maintenant initialiser le projet pour référencer votre hôte Firebase.

Tester la tâche terminée

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

Enregistrer votre application

Tâche 6 : S'authentifier dans Firebase et déployer l'application

Utilisez l'IDE pour vous connecter à Firebase et déployer votre application. Exécutez les commandes dans le terminal disponible dans l'éditeur.

1. Authentifiez-vous dans Firebase :

firebase login --no-localhost

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 votre compte d'atelier et cliquez sur Autoriser. Cliquez sur Oui, je viens d'exécuter cette commande pour continuer, puis confirmez votre ID de session en cliquant sur Oui, il s'agit de mon ID de session. Un code d'accès vous est ensuite attribué :

5. Copiez-le et collez-le dans l'invite Saisissez le code d'autorisation : de Cloud Shell, puis appuyez sur Entrée. Vous devez obtenir un résultat ressemblant à celui-ci :

Résultat :

✔ Success! Logged in as gcpstaging86673_student@qwiklabs.net

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

firebase init

Les différentes étapes de cette commande vont vous permettre de configurer votre répertoire de projet et les produits Firebase.

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

8. Suivez ensuite 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 Qwiklabs dans la liste (celui qui commence par "qwiklabs-gcp-"), puis appuyez sur Entrée.
• Appuyez sur Entrée et sur N pour conserver votre fichier firestore.rules.
• Appuyez sur Entrée et sur Y 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.

Vous devez obtenir le résultat suivant :

✔ 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. Il faut maintenant authentifier la base de données pour autoriser l'accès entre les services.

Tâche 7 : Configurer l'authentification et une base de données

Revenez à la console Firebase pour effectuer cette étape.

1. Cliquez sur le bouton Vue d'ensemble du projet dans le menu de navigation de gauche.

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

3. Cliquez sur Fournisseurs 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. 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.

Vous venez de configurer l'authentification Firestore. Lors de l'étape suivante, vous allez travailler sur l'hébergement de l'application à l'aide de Firebase.

Tester la tâche terminée

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

Configurer l'authentification et une base de données

Tâche 8 : Scénario de configuration de l'application

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. Pour voir les modifications dans votre navigateur, il suffit d'appeler firebase deploy depuis la ligne de commande. Effectuez les modifications, puis déployez-les : elles apparaîtront sur le site Web. Ruby
Patrick, Administrateur informatique	Bonjour Ruby, Me voilà rassuré. L'hébergement Firebase me plaît de plus en plus :-) Patrick

Maintenant que Patrick a une meilleure idée des tâches à effectuer, vous allez l'aider à déployer Pet Theory en tant qu'application Firebase.

Tâche 9 : Configurer l'authentification Firestore et ajouter une procédure de connexion à votre application Web

Revenez au terminal pour cette étape. Votre session de ligne de commande devrait être restée ouverte après l'initialisation de Firebase.

1. Exécutez la commande suivante pour répertorier les dossiers et les fichiers de votre répertoire lab02 :

ls -1

2. Assurez-vous que le résultat se présente comme suit :

README.md firebase.json firestore.indexes.json firestore.rules node_modules package-lock.json package.json public solution

3. Utilisez l'éditeur de code pour ouvrir pet-theory/lab02/firestore.rules :

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; } } } Remarque : La configuration garantit que les utilisateurs de la base de données Firestore ne peuvent accéder qu'à leurs propres données. Le fichier "firestore.rules" permet de sécuriser la base de données Firestore. En savoir plus sur la sécurité de la base de données Firestore.

Tâche 10 : Déployer votre application

Une fois toutes ces modifications effectuées, vous êtes prêt à déployer l'application. Vérifiez que vous vous trouvez toujours dans le dossier pet-theory/lab02.

1. Exécutez la commande suivante pour déployer votre application Firebase :

firebase deploy

Résultat :

✔ Deploy complete! Project Console: https://console.firebase.google.com/project/qwiklabs-gcp-7d652f8cf1f91cce/overview Hosting URL: https://qwiklabs-gcp-01-8be196f95006.web.app

2. Copiez l'URL d'hébergement (qui doit se présenter sous la forme [ID-PROJET].web.app) et ouvrez-la dans un nouvel onglet.
3. 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 cela, 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 la fenêtre pop-up. Cliquez sur le lien Impossible d'accéder au site ? pour modifier les paramètres du navigateur et accepter les cookies.

4. Sélectionnez votre compte Google. La page suivante s'ouvre :

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.

Une petite entreprise comme Pet Theory n'a ni les ressources, ni les compétences nécessaires pour assurer une telle gestion. Il est donc préférable dans ce cas de laisser les utilisateurs de l'application se connecter avec leur compte Google (ou tout autre fournisseur d'identité).

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

Tâche 11 : 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 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 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. Dans la ligne de commande, exécutez la commande suivante :

firebase deploy

Résultat :

✔ Deploy complete! Project Console: https://console.firebase.google.com/project/qwiklabs-gcp-7d652f8cf1f91cce/overview Hosting URL: https://qwiklabs-gcp-01-8be196f95006.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. Entrez des informations sur le client (inventez un nom et un numéro de téléphone), puis cliquez sur Enregistrer le profil.

5. Revenez à la console Firebase et cliquez sur Créer > Firestore Database pour afficher les informations de profil enregistrées :

6. 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

Tâche 12 : Permettre aux utilisateurs de fixer des rendez-vous

Créez la page qui permet aux utilisateurs de programmer des rendez-vous.

1. Revenez à l'onglet de l'éditeur de code. Vous allez ajouter du code à deux fichiers dans le répertoire public.

2. Dans le menu latéral, sélectionnez appointments.html et collez le code suivant :

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Pet Theory appointments</title> <script src="/__/firebase/6.4.2/firebase-app.js"></script> <script src="/__/firebase/6.4.2/firebase-auth.js"></script> <script src="/__/firebase/6.4.2/firebase-firestore.js"></script> <script src="/__/firebase/init.js"></script> <link type="text/css" rel="stylesheet" href="styles.css" /> </head> <body> <div id="message"> <h2>Scheduled appointments</h2> <div id="appointments"></div> <hr/> <h2>Schedule a new appointment</h2> <select id="timeslots"> <option value="0">Choose time</option> </select> <br><br> <button id="makeAppointment">Schedule</button> </div> <script src="appointments.js"></script> </body> </html>

3. Ouvrez maintenant le fichier appointments.js et collez le code suivant :

let user; firebase.auth().onAuthStateChanged(function(newUser) { user = newUser; if (user) { const db = firebase.firestore(); const appColl = db.collection('customers').doc(user.email).collection('appointments'); appColl.orderBy('time').onSnapshot(function(snapshot) { const div = document.getElementById('appointments'); div.innerHTML = ''; snapshot.docs.forEach(appointment => { div.innerHTML += formatDate(appointment.data().time) + '<br/>'; }) if (div.innerHTML == '') { div.innerHTML = 'No appointments scheduled'; } }); } }); const timeslots = document.getElementById('timeslots'); getOpenTimes().forEach(time => { timeslots.add(new Option(formatDate(time), time)); }); document.getElementById('makeAppointment').addEventListener('click', function(ev) { const millis = parseInt(timeslots.selectedOptions[0].value); if (millis > 0) { const db = firebase.firestore(); db.collection('customers').doc(user.email).collection('appointments').add({ time: millis }) timeslots.remove(timeslots.selectedIndex); } }) function getOpenTimes() { const retVal = []; let startDate = new Date(); startDate.setMinutes(0); startDate.setSeconds(0); startDate.setMilliseconds(0); let millis = startDate.getTime(); while (retVal.length < 5) { const hours = Math.floor(Math.random() * 5) + 1; millis += hours * 3600 * 1000; if (isDuringOfficeHours(millis)) { retVal.push(millis); } } return retVal; } function isDuringOfficeHours(millis) { const aDate = new Date(millis); return aDate.getDay() != 0 && aDate.getDay() != 6 && aDate.getHours() >= 9 && aDate.getHours() <= 17; } function formatDate(millis) { const aDate = new Date(millis); const days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']; const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; return days[aDate.getDay()] + ' ' + aDate.getDate() + ' ' + months[aDate.getMonth()] + ', ' + aDate.getHours() + ':' + (aDate.getMinutes() < 10? '0'+aDate.getMinutes(): aDate.getMinutes()); }

4. Maintenant que les fichiers ont été créés, affichez les modifications. Exécutez la commande suivante dans Cloud Shell pour déployer l'application :

firebase deploy

Résultat :

✔ Deploy complete! Project Console: https://console.firebase.google.com/project/qwiklabs-gcp-7d652f8cf1f91cce/overview Hosting URL: https://qwiklabs-gcp-01-8be196f95006.web.app

5. Actualisez l'onglet de l'application Web dans lequel vous avez précédemment obtenu la page vierge. Vous pouvez à présent prendre quelques rendez-vous :

6. Accédez à la console Firebase, cliquez sur Créer > Firestore Database, puis sélectionnez la collection appointments (rendez-vous) que vous venez de créer pour votre utilisateur.

7. Vous devez voir une collection de codes de rendez-vous qui ressemble à ce qui suit :

Tâche 13 : Afficher les modifications de Firestore en temps réel

Firestore est une base de données en temps réel. Pour en profiter, apportez des modifications en temps réel à l'application.

1. Ouvrez un nouvel onglet de navigateur et faites-le pointer vers [ID DU PROJET].web.app, puis connectez-vous à l'aide du bouton Google et cliquez sur Appointments Rendez-vous.

2. Disposez les deux onglets de navigateur côte à côte. Dans la première fenêtre du navigateur, programmez un nouveau rendez-vous.

3. Regardez maintenant l'autre onglet de votre navigateur. Normalement, le rendez-vous a été ajouté automatiquement, sans que vous ayez besoin d'actualiser la page :

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.

4. Accédez à la console Firebase, cliquez sur l'onglet Données dans Cloud Firestore, puis modifiez les données. Vous pouvez même supprimer la collection appointments (rendez-vous) de votre dossier utilisateur. Les deux fenêtres du navigateur continuent à se mettre à jour en temps réel.

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 : 30 janvier 2024

Dernier test de l'atelier : 8 janvier 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.