arrow_back

Développer des applications sans serveur avec Firebase : atelier challenge

Test and share your knowledge with our community!
done
Get access to over 700 hands-on labs, skill badges, and courses

Développer des applications sans serveur avec Firebase : atelier challenge

Lab 1 heure universal_currency_alt 5 crédits show_chart Intermédiaire
Test and share your knowledge with our community!
done
Get access to over 700 hands-on labs, skill badges, and courses

GSP344

Google Cloud – Ateliers adaptés au rythme de chacun

Présentation

Dans un atelier challenge, vous devez suivre un scénario et effectuer une série de tâches. Aucune instruction détaillée n'est fournie : vous devez utiliser les compétences acquises au cours des ateliers de la quête correspondante pour déterminer comment procéder par vous-même. Vous saurez si vous avez exécuté correctement les différentes tâches grâce au score calculé automatiquement (affiché sur cette page).

Lorsque vous participez à un atelier challenge, vous n'étudiez pas de nouveaux concepts Google Cloud. Vous allez approfondir les compétences précédemment acquises. Par exemple, vous devrez modifier les valeurs par défaut ou encore examiner des messages d'erreur pour corriger vous-même les problèmes.

Pour atteindre le score de 100 %, vous devez mener à bien l'ensemble des tâches dans le délai imparti.

Cet atelier est recommandé aux participants inscrits au cours Develop Serverless Apps with Firebase. Êtes-vous prêt pour le challenge ?

Préparation

Avant de cliquer sur le bouton "Démarrer l'atelier"

Lisez ces instructions. Les ateliers sont minutés, et vous ne pouvez pas les mettre en pause. Le minuteur, qui démarre lorsque vous cliquez sur Démarrer l'atelier, indique combien de temps les ressources Google Cloud resteront accessibles.

Cet atelier pratique vous permet de suivre vous-même les activités dans un véritable environnement cloud, et non dans un environnement de simulation ou de démonstration. Nous vous fournissons des identifiants temporaires pour vous connecter à Google Cloud le temps de l'atelier.

Pour réaliser cet atelier :

  • vous devez avoir accès à un navigateur Internet standard (nous vous recommandons d'utiliser Chrome) ;
Remarque : Ouvrez une fenêtre de navigateur en mode incognito/navigation privée pour effectuer cet atelier. Vous éviterez ainsi les conflits entre votre compte personnel et le temporaire étudiant, qui pourraient entraîner des frais supplémentaires facturés sur votre compte personnel.
  • vous disposez d'un temps limité ; une fois l'atelier commencé, vous ne pouvez pas le mettre en pause.
Remarque : Si vous possédez déjà votre propre compte ou projet Google Cloud, veillez à ne pas l'utiliser pour réaliser cet atelier afin d'éviter que des frais supplémentaires ne vous soient facturés.

Provisionner l'environnement

  1. Lien vers le projet :
gcloud config set project $(gcloud projects list --format='value(PROJECT_ID)' --filter='qwiklabs-gcp')
  1. Clonez le dépôt :
git clone https://github.com/rosera/pet-theory.git

Scénario du challenge

Dans cet atelier, vous allez créer une solution d'interface à l'aide d'une API REST et d'une base de données Firestore. Cloud Firestore est une base de données de documents NoSQL de la plate-forme Firebase. Vous pouvez y stocker, synchroniser et interroger des données pour vos applications Web et mobiles à grande échelle. Cet atelier consiste à résoudre un scénario réel à l'aide de l'infrastructure sans serveur Google Cloud.

Vous allez créer l'architecture suivante :

Schéma de l'architecture de l'application

Tâche 1 : Créer une base de données Firestore

Dans ce scénario, vous allez créer une base de données Firestore dans Google Cloud. Le schéma simplifié ci-dessous présente l'architecture générale.

Schéma de l'architecture pour l'atelier challenge Firebase

Conditions requises :

Champ Valeur
Cloud Firestore Native Mode (Mode natif)
Emplacement

Créer une base de données Firestore

Pour réussir cette section, vous devez effectuer les tâches suivantes :

  • Implémenter une base de données Cloud Firestore
  • Utiliser Firestore en mode natif
  • Ajouter l'emplacement

Cliquez sur Vérifier ma progression pour vérifier que vous avez correctement effectué la tâche ci-dessus. Créer une base de données Firestore

Tâche 2 : Insérer des données dans la base de données

Dans ce scénario, vous allez insérer des données de test dans la base de données.

Le schéma simplifié ci-dessous présente l'architecture générale.

Architecture pour l'atelier challenge Firebase

Insérer des données dans la base de données

Exemple de schéma Firestore :

Collection Document Champ
data 70234439 [dataset]

L'ensemble de données des programmes Netflix contient les informations suivantes :

Champ Description
show_id ID unique pour chaque film/série TV
type Identifiant : un film ou une série TV
title Titre du film/de la série TV
director Réalisateur du film
cast Acteurs présents dans le film/la série
country Pays dans lequel le film/la série a été produit(e)
date_added Date à laquelle le programme a été ajouté sur Netflix
release_year Année de sortie réelle du film/de la série
rating Classification TV du film/de la série
duration Durée totale : en minutes ou nombre de saisons

Pour réussir cette section, vous devez effectuer les tâches suivantes :

  1. Utiliser l'exemple de code de pet-theory/lab06/firebase-import-csv/solution :
npm install
  1. Importer le fichier CSV en utilisant le nœud pet-theory/lab06/firebase-import-csv/solution/index.js :
node index.js netflix_titles_original.csv Remarque : Vérifiez que la base de données Firestore a bien été mise à jour en affichant ses données dans l'UI de Firestore.

Cliquez sur Vérifier ma progression pour vérifier que vous avez correctement effectué la tâche ci-dessus. Insérer des données dans la base de données Firestore

Tâche 3 : Créer une API REST

Dans ce scénario, vous allez créer un exemple d'API REST.

Le schéma simplifié ci-dessous présente l'architecture générale.

Schéma de l'architecture pour l'atelier challenge Firebase

Développement Cloud Run

Champ Valeur
Container Registry Image (Image Container Registry) rest-api:0.1
Cloud Run Service (Service Cloud Run)
Permission (Autorisation) --allow-unauthenticated

Pour réussir cette section, vous devez effectuer les tâches suivantes :

  1. Accéder à pet-theory/lab06/firebase-rest-api/solution-01
  2. Créer et déployer le code dans Google Container Registry
  3. Déployer l'image en tant que service Cloud Run
Remarque : Déployez votre service avec une seule instance afin de ne pas dépasser le nombre maximal d'instances Cloud Run.
  1. Accéder à Cloud Run et cliquer sur , puis copier l'URL du service :
  • SERVICE_URL=copy url from your
  • La commande curl -X GET $SERVICE_URL doit renvoyer : {"status":"Netflix Dataset! Make a query."}

Cliquez sur Vérifier ma progression pour vérifier que vous avez correctement effectué la tâche ci-dessus. Déployer et tester l'API REST

Tâche 4 : Créer un accès à l'API Firestore

Dans ce scénario, vous allez déployer une révision mise à jour du code pour accéder à la base de données Firestore.

Le schéma simplifié ci-dessous présente l'architecture générale.

Schéma de l'architecture pour l'atelier challenge Firebase

Déployer la révision Cloud Run 0.2

Champ Valeur
Container Registry Image (Image Container Registry) rest-api:0.2
Cloud Run Service (Service Cloud Run)
Permission (Autorisation) --allow-unauthenticated

Pour réussir cette section, vous devez effectuer les tâches suivantes :

  1. Accéder à pet-theory/lab06/firebase-rest-api/solution-02
  2. Compiler l'application mise à jour
  3. Utiliser Cloud Build pour ajouter des tags et déployer la révision d'image dans Container Registry
  4. Déployer la nouvelle image en tant que service Cloud Run
Remarque : Déployez votre service avec une seule instance afin de ne pas dépasser le nombre maximal d'instances Cloud Run.
  1. Accéder à Cloud Run et cliquer sur , puis copier l'URL du service :
  • SERVICE_URL=copy url from your
  • La commande curl -X GET $SERVICE_URL/2019 doit renvoyer un ensemble de données JSON

Cliquez sur Vérifier ma progression pour vérifier que vous avez correctement effectué la tâche ci-dessus. Déployer et tester l'API REST

Tâche 5 : Déployer l'interface de préproduction

Dans ce scénario, vous allez déployer l'interface de préproduction.

Le schéma simplifié ci-dessous présente l'architecture générale.

Schéma de l'architecture pour l'atelier challenge Firebase

Déployer l'interface

Champ Valeur
REST_API_SERVICE URL DU SERVICE API REST
Container Registry Image (Image Container Registry) frontend-staging: 0.1
Cloud Run Service (Service Cloud Run)

Pour réussir cette section, vous devez effectuer les tâches suivantes :

  1. Accéder à pet-theory/lab06/firebase-frontend
  2. Créer l'application d'interface de préproduction
  3. Utiliser Cloud Build pour ajouter des tags et déployer la révision d'image dans Container Registry
  4. Déployer la nouvelle image en tant que service Cloud Run
Remarque : Déployez votre service avec une seule instance afin de ne pas dépasser le nombre maximal d'instances Cloud Run.
  1. Accéder à l'API REST et à la base de données Firestore depuis l'interface
  2. Accéder à l'URL du service d'interface
Remarque : L'interface utilise un ensemble de données de démonstration pour afficher les entrées à l'écran.

Page Web "Introduction to Serverless"

Cliquez sur Vérifier ma progression pour vérifier que vous avez correctement effectué la tâche ci-dessus. Déployer l'interface de préproduction

Tâche 6 : Déployer l'interface de production

Dans ce scénario, vous allez modifier l'interface de préproduction afin d'utiliser la base de données Firestore.

Le schéma simplifié ci-dessous présente l'architecture générale.

Schéma de l'architecture pour l'atelier challenge Firebase

Déployer l'interface

Champ Valeur
REST_API_SERVICE URL DU SERVICE API REST
Container Registry Image (Image Container Registry) frontend-production:0.1
Cloud Run Service (Service Cloud Run)

Pour réussir cette section, vous devez effectuer les tâches suivantes :

  1. Accéder à pet-theory/lab06/firebase-frontend/public
  2. Mettre à jour l'application d'interface, comme app.js, pour utiliser l'API REST
  3. Ajouter l'année à SERVICE_URL
  4. Utiliser Cloud Build pour ajouter des tags et déployer la révision d'image dans Container Registry
  5. Déployer la nouvelle image en tant que service Cloud Run Remarque : Déployez votre service avec une seule instance afin de ne pas dépasser le nombre maximal d'instances Cloud Run.
  6. Accéder à l'API REST et à la base de données Firestore depuis l'interface

Maintenant que le service a été déployé, vous pouvez afficher le contenu de la base de données Firestore à l'aide du service d'interface.

Page Web "Introduction to Serverless"

Cliquez sur Vérifier ma progression pour vérifier que vous avez correctement effectué la tâche ci-dessus. Déployer l'interface de production

Félicitations !

Félicitations ! Dans cet atelier, vous venez de créer une base de données Firestore, y insérer des données, créer une API REST et déployer une application d'interface qui interagit avec la base de données Firestore et l'API REST. Vous avez également appris à déployer une application d'interface de préproduction et de production.

Badge de compétence "Develop Serverless Apps with Firebase"

Gagnez un badge de compétence

Cet atelier d'auto-formation fait partie du cours Develop Serverless Apps with Firebase. Si vous terminez ce cours, vous obtiendrez le badge de compétence ci-dessus attestant de votre réussite. Ajoutez votre badge à votre CV et partagez-le sur les réseaux sociaux en utilisant le hashtag #GoogleCloudBadge.

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 : 22 mars 2024

Dernier test de l'atelier : 5 février 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.