GSP643

Présentation

Pour les ateliers de la quête Google Cloud Run Serverless Workshop, vous allez découvrir un scénario commercial fictif et aider les personnages dans leur plan de migration sans serveur.

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écédent atelier, Migrer des données vers une base de données Firestore, vous avez appris à héberger des données client à l'aide de Firestore. 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 de l'atelier

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

Connaissances requises

Cet atelier s'adresse aux utilisateurs de niveau intermédiaire qui maîtrisent déjà Cloud Console et les environnements shell. Connaître Firebase est utile, mais n'est pas obligatoire. Avant de commencer cet atelier, il est recommandé d'avoir suivi l'atelier Qwiklabs 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.

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

Installer la CLI Firebase

Remarque :

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

Copiez le lien de l'IDE depuis le panneau de l'atelier et collez-le dans un nouvel onglet de navigateur.

1. Ouvrez un terminal pour accéder à la ligne de commande .

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

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

3. Dans le menu principal, sélectionnez l'icône de l'explorateur et cliquez sur Open Folder (Ouvrir un dossier).

4. Choisissez le dossier pet-theory/lab02.

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.

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 de votre projet sur us-central1 :

gcloud config set compute/region us-central1

2. Activez les applications App Engine :

gcloud app create --region=us-central

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

gcloud firestore databases create --region=us-central

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

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 dans l'angle supérieur droit de la page et assurez-vous qu'il s'agit bien du compte étudiant 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ésélectionnez 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

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

1. Sélectionnez l'icône Web (en surbrillance ci-dessous) dans la liste des icônes "Pour commencer, ajoutez 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

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 Google Qwiklabs, puis cliquez sur Autoriser. Un code d'accès vous est ensuite attribué :

5. Copiez-le et collez-le dans l'invite 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 interface système 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.

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 tuile Authentification, puis cliquez sur Premiers pas :

3. Dans la liste des fournisseurs de connexion, cliquez sur l'élément Google.

4. Cliquez sur le bouton Activer dans l'angle supérieur droit, et pour le champ Adresse e-mail d'assistance associée au projet, sélectionnez votre compte Google Qwiklabs dans la liste déroulante. La page doit se présenter comme suit :

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

Scénario : configurer 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.

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

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 Ce 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 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. Vous êtes redirigé vers la page suivante :

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 via l'authentification Google.

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

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

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

6. Revenez à la console Firebase et cliquez sur Base de données Firestore pour afficher les informations de profil enregistrées :

7. Revenez à la page de l'application Web et cliquez sur le lien 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

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 Base de données Firestore, 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 :

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 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 : le rendez-vous doit être 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.

Terminer votre quête

Cet atelier d'auto-formation fait partie des quêtes Qwiklabs Google Cloud Run Serverless Workshop et Build Apps & Websites with Firebase. Une quête est une série d'ateliers associés qui constituent une formation. Si vous terminez cette quête, vous obtiendrez le badge ci-dessus attestant de votre réussite. Vous pouvez rendre publics les badges que vous recevez et ajouter leur lien dans votre CV en ligne ou sur vos comptes de réseaux sociaux. Inscrivez-vous à cette quête pour obtenir immédiatement les crédits associés à cet atelier si vous l'avez suivi. Découvrez les autres quêtes Qwiklabs disponibles.

Atelier suivant

Poursuivez votre quête avec le prochain atelier de la série Créer une application sans serveur qui permet de produire des fichiers PDF à l'aide de Cloud Run ou Déployer un site Web Hugo avec un pipeline Cloud Build et Firebase.

É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 : 25 avril 2022

Dernier test de l'atelier : 25 avril 2022

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.