Présentation

Dans cet atelier, l'objectif est d'améliorer l'application Quiz en ligne en permettant l'importation d'images et de vidéos. Vous stockez les fichiers en tant qu'objets dans un bucket Cloud Storage.

L'interface utilisateur de l'application Quiz inclut désormais un bouton permettant de transférer des fichiers dans le formulaire d'ajout d'une question. Le gestionnaire peut recevoir des données d'image du côté serveur de l'application.

Vous allez ajouter le code qui stocke dans Cloud Storage le fichier importé, rend l'objet accessible publiquement, puis stocke l'URL de l'objet et d'autres données d'application dans Google Cloud Datastore.

Objectifs

Dans cet atelier, vous apprendrez à effectuer les opérations suivantes :

• Créer un bucket Cloud Storage

• Examiner l'interface utilisateur d'importation de fichiers et les modifications de code correspondantes

• Écrire le code permettant de stocker dans Cloud Storage les données des fichiers importés

Avant de commencer l'atelier

Pour chaque atelier, nous vous attribuons un nouveau projet Google Cloud et un nouvel ensemble de ressources pour une durée déterminée, sans frais.

1. Connectez-vous à Qwiklabs dans une fenêtre de navigation privée.

2. Vérifiez le temps imparti pour l'atelier (par exemple : 01:15:00) : vous devez pouvoir le terminer dans ce délai.
   Une fois l'atelier lancé, vous ne pouvez pas le mettre en pause. Si nécessaire, vous pourrez le redémarrer, mais vous devrez tout reprendre depuis le début.

3. Lorsque vous êtes prêt, cliquez sur Démarrer l'atelier.

4. Notez vos identifiants pour l'atelier (Nom d'utilisateur et Mot de passe). Ils vous serviront à vous connecter à Google Cloud Console.

5. Cliquez sur Ouvrir la console Google.

6. Cliquez sur Utiliser un autre compte, puis copiez-collez les identifiants de cet atelier lorsque vous y êtes invité.
   Si vous utilisez d'autres identifiants, des messages d'erreur s'afficheront ou des frais seront appliqués.

7. Acceptez les conditions d'utilisation et ignorez la page concernant les ressources de récupération des données.

Activer Google Cloud Shell

Google Cloud Shell est une machine virtuelle qui contient de nombreux outils pour les développeurs. Elle comprend un répertoire d'accueil persistant de 5 Go et s'exécute sur Google Cloud.

Google Cloud Shell vous permet d'accéder à vos ressources Google Cloud grâce à une ligne de commande.

1. Dans la barre d'outils située en haut à droite dans la console Cloud, cliquez sur le bouton "Ouvrir Cloud Shell".

   

2. Cliquez sur Continuer.

Le provisionnement et la connexion à l'environnement prennent quelques instants. Une fois connecté, vous êtes en principe authentifié et le projet est défini sur votre ID_PROJET. Par exemple :

gcloud est l'outil de ligne de commande pour Google Cloud. Il est préinstallé sur Cloud Shell et permet la complétion par tabulation.

• Vous pouvez lister les noms des comptes actifs à l'aide de cette commande :

gcloud auth list

Résultat :

Credentialed accounts: - @.com (active)

Exemple de résultat :

Credentialed accounts: - google1623327_student@qwiklabs.net

• Vous pouvez lister les ID de projet à l'aide de cette commande :

gcloud config list project

Résultat :

[core] project =

Exemple de résultat :

[core] project = qwiklabs-gcp-44776a13dea667a6 Remarque : Pour consulter la documentation complète sur gcloud, accédez au guide de présentation de la gcloud CLI.

Examiner l'application utilisée dans l'étude de cas

Dans cette section, vous clonez le dépôt Git contenant l'application Quiz, puis vous exécutez l'application.

Cloner le code source dans Cloud Shell

1. Dans Cloud Shell, clonez le dépôt associé à ce cours.

git clone --depth=1 https://github.com/GoogleCloudPlatform/training-data-analyst

2. Créez un lien symbolique qui servira de raccourci vers le répertoire de travail.

ln -s ~/training-data-analyst/courses/developingapps/v1.3/nodejs/cloudstorage cloudstorage

Configurer et exécuter l'application de l'étude de cas

1. Accédez au répertoire contenant les fichiers d'exemple pour cet atelier :

cd ~/cloudstorage/start

2. Pour configurer l'application, exécutez la commande suivante :

. prepare_environment.sh

3. Pour lancer l'application, exécutez la commande suivante :

npm start

Cliquez sur "Check my progress" (Vérifier ma progression) pour vérifier l'objectif. Configurer l'application de l'étude de cas

Examiner l'application de l'étude de cas

1. Pour afficher l'application, cliquez sur Web Preview > Preview on port 8080 (Aperçu sur le Web > Prévisualiser sur le port 8080).

2. Cliquez sur le lien Create Question (Créer une question) dans la barre d'outils.

Examiner le code de l'application de l'étude de cas

Dans cette section, vous allez examiner le code de l'application de l'étude de cas à l'aide de l'éditeur de texte Cloud Shell.

Lancer l'éditeur de code Cloud Shell

1. Dans Cloud Shell, cliquez sur Open Editor (Ouvrir l'éditeur). Cliquez sur Open in a new window (Ouvrir dans une nouvelle fenêtre).

2. Accédez au dossier /cloudstorage/start à l'aide du panneau de l'explorateur de fichiers situé à gauche de l'éditeur.

Examiner l'application Web Express

1. Sélectionnez le fichier add.pug dans le dossier .../server/web-app/views/questions.

2. Sélectionnez le fichier questions.js dans le dossier .../server/web-app.

3. Sélectionnez le fichier .../server/gcp/cloudstorage.js.

Créer un bucket Cloud Storage

Dans cette section, vous allez créer un bucket Cloud Storage et exporter une variable d'environnement qui le référence.

Créer un bucket Cloud Storage

1. Revenez dans Cloud Shell, cliquez sur Open Terminal (Ouvrir le terminal), puis appuyez sur Ctrl+C pour arrêter l'application.

2. Pour créer un bucket Cloud Storage nommé <Project ID>-media, exécutez la commande suivante :

gsutil mb gs://$DEVSHELL_PROJECT_ID-media

3. Pour exporter le nom du bucket Cloud Storage sous la forme d'une variable d'environnement nommée GCLOUD_BUCKET, exécutez la commande suivante :

export GCLOUD_BUCKET=$DEVSHELL_PROJECT_ID-media

Cliquez sur "Check my progress" (Vérifier ma progression) pour vérifier l'objectif. Créer un bucket Cloud Storage

Ajouter des objets à Cloud Storage

Dans cette section, vous allez rédiger le code permettant d'enregistrer les fichiers importés dans Cloud Storage.

Importer et utiliser le module NodeJS Cloud Storage

1. Dans l'éditeur, accédez au début du fichier ...server/gcp/cloudstorage.js.

2. Chargez le module '@google-cloud/storage, puis affectez-le à une constante nommée Storage.

// TODO: Load the module for Cloud Storage const {Storage} = require('@google-cloud/storage'); // END TODO

3. Utilisez la fabrique Storage(...) pour construire un client Cloud Storage nommé storage.

// TODO: Create the storage client // The Storage(...) factory function accepts an options // object which is used to specify which project's Cloud // Storage buckets should be used via the projectId // property. // The projectId is retrieved from the config module. // This module retrieves the project ID from the // GCLOUD_PROJECT environment variable. const storage = new Storage({ projectId: config.get('GCLOUD_PROJECT') }); // END TODO

4. Déclarez une constante de chaîne nommée GCLOUD_BUCKET et initialisez-la avec le nom de bucket que vous avez précédemment exporté en tant que variable d'environnement.

// TODO: Get the GCLOUD_BUCKET environment variable // Recall that earlier you exported the bucket name into an // environment variable. // The config module provides access to this environment // variable so you can use it in code const GCLOUD_BUCKET = config.get('GCLOUD_BUCKET'); // END TODO

5. Déclarez une constante nommée bucket pour référencer le bucket Cloud Storage.

// TODO: Get a reference to the Cloud Storage bucket const bucket = storage.bucket(GCLOUD_BUCKET); // END TODO

Rédiger du code pour envoyer un fichier vers Cloud Storage

Dans le gestionnaire sendUploadToGCS(req, res, next), utilisez le client Cloud Storage pour importer un fichier dans votre bucket Cloud Storage et le rendre public.

1. Obtenez une référence vers un objet file (fichier) Cloud Storage dans le bucket.

// TODO: Get a reference to the new object const file = bucket.file(oname); // END TODO

2. Créez un flux avec accès en écriture pour envoyer des données à l'objet Cloud Storage. Transférez le type MIME de l'objet.

// TODO: Create a stream to write the file into // Cloud Storage // The uploaded file's MIME type can be retrieved using // req.file.mimetype. // Cloud Storage metadata can be used for many purposes, // including establishing the type of an object. const stream = file.createWriteStream({ metadata: { contentType: req.file.mimetype } }); // END TODO

3. Attachez un gestionnaires d'événements au flux pour gérer les erreurs. Dans le gestionnaire d'événements d'erreur, appelez le middleware Express suivant.

// TODO: Attach two event handlers (1) error // Event handler if there's an error when uploading stream.on('error', err => { // TODO: If there's an error move to the next handler next(err); // END TODO }); // END TODO

4. Attachez un deuxième gestionnaire d'événements au flux. Ce gestionnaire sera appelé lorsque les données seront téléchargées. Dans le gestionnaire d'événements de finition, rendez le fichier public et définissez une nouvelle propriété sur l'entité Datastore qui fait référence à la nouvelle URL publique, puis appelez le gestionnaire de middleware suivant.

// TODO: Attach two event handlers (2) finish // The upload completed successfully stream.on('finish', () => { // TODO: Make the object publicly accessible file.makePublic().then(() => { // TODO: Set a new property on the file for the // public URL for the object // Cloud Storage public URLs are in the form: // https://storage.googleapis.com/[BUCKET]/[OBJECT] // Use an ECMAScript template literal (`https://...`)to // populate the URL with appropriate values for the bucket // ${GCLOUD_BUCKET} and object name ${oname} req.file.cloudStoragePublicUrl = `https://storage.googleapis.com/${GCLOUD_BUCKET}/${oname}`; // END TODO // TODO: Invoke the next middleware handler next(); // END TODO }); // END TODO }); // END TODO

5. À la fin du gestionnaire sendUploadToGCS(req, res, next), pour importer les données du fichier dans Cloud Storage, appelez la méthode end() afin d'écrire le fichier dans le flux.

// TODO: End the stream to upload the file's data stream.end(req.file.buffer); // END TODO

cloudstorage.js

Après avoir effectué les modifications ci-dessus, votre fichier devrait ressembler à ceci :

'use strict'; const config = require('../config'); // TODO: Load the module for Cloud Storage const {Storage} = require('@google-cloud/storage'); // END TODO // TODO: Create the storage client // The Storage(...) factory function accepts an options // object which is used to specify which project's Cloud // Storage buckets should be used via the projectId // property. // The projectId is retrieved from the config module. // This module retrieves the project ID from the // GCLOUD_PROJECT environment variable. const storage = new Storage({ projectId: config.get('GCLOUD_PROJECT') }); // END TODO // TODO: Get the GCLOUD_BUCKET environment variable // Recall that earlier you exported the bucket name into an // environment variable. // The config module provides access to this environment // variable so you can use it in code const GCLOUD_BUCKET = config.get('GCLOUD_BUCKET'); // END TODO // TODO: Get a reference to the Cloud Storage bucket const bucket = storage.bucket(GCLOUD_BUCKET); // END TODO // Express middleware that will automatically pass uploads to Cloud Storage. // req.file is processed and will have a new property: // * ``cloudStoragePublicUrl`` the public url to the object. // [START sendUploadToGCS] function sendUploadToGCS(req, res, next) { // The existing code in the handler checks to see if there // is a file property on the HTTP request - if a file has // been uploaded, then Multer will have created this // property in the preceding middleware call. if (!req.file) { return next(); } // In addition, a unique object name, oname, has been // created based on the file's original name. It has a // prefix generated using the current date and time. // This should ensure that a new file upload won't // overwrite an existing object in the bucket const oname = Date.now() + req.file.originalname; // TODO: Get a reference to the new object const file = bucket.file(oname); // END TODO // TODO: Create a stream to write the file into // Cloud Storage // The uploaded file's MIME type can be retrieved using // req.file.mimetype. // Cloud Storage metadata can be used for many purposes, // including establishing the type of an object. const stream = file.createWriteStream({ metadata: { contentType: req.file.mimetype } }); // END TODO // TODO: Attach two event handlers (1) error // Event handler if there's an error when uploading stream.on('error', err => { // TODO: If there's an error move to the next handler next(err); // END TODO }); // END TODO // TODO: Attach two event handlers (2) finish // The upload completed successfully stream.on('finish', () => { // TODO: Make the object publicly accessible file.makePublic().then(() => { // TODO: Set a new property on the file for the // public URL for the object // Cloud Storage public URLs are in the form: // https://storage.googleapis.com/[BUCKET]/[OBJECT] // Use an ECMAScript template literal (`https://...`)to // populate the URL with appropriate values for the bucket // ${GCLOUD_BUCKET} and object name ${oname} req.file.cloudStoragePublicUrl = `https://storage.googleapis.com/${GCLOUD_BUCKET}/${oname}`; // END TODO // TODO: Invoke the next middleware handler next(); // END TODO }); // END TODO }); // END TODO // TODO: End the stream to upload the file's data stream.end(req.file.buffer); // END TODO } // [END sendUploadToGCS] // Multer handles parsing multipart/form-data requests. // This instance is configured to store images in memory. // This makes it straightforward to upload to Cloud Storage. // [START multer] const Multer = require('multer'); const multer = Multer({ storage: Multer.MemoryStorage, limits: { fileSize: 40 * 1024 * 1024 // no larger than 40mb } }); // [END multer] module.exports = { sendUploadToGCS, multer };

Exécuter l'application et créer un objet Cloud Storage

1. Enregistrez le fichier ...server/gcp/cloudstorage.js, puis revenez à la commande Cloud Shell.
2. Démarrez l'application en saisissant npm start.
3. Téléchargez ce fichier image sur votre ordinateur local.
4. Dans Cloud Shell, cliquez sur Web preview > Preview on port 8080 (Aperçu sur le Web > Prévisualiser sur le port 8080) pour prévisualiser l'application Quiz.
5. Cliquez sur Create Question (Créer une question).
6. Remplissez le formulaire avec les valeurs suivantes, puis cliquez sur Save (Enregistrer).

Champ du formulaire	Valeur
Author (Auteur)	Votre nom
Quiz	Google Cloud Platform
Title (Titre)	À quel produit correspond ce logo ?
Image	Importez le fichier Google-Cloud-Storage-Logo.svg que vous avez précédemment téléchargé
Answer 1 (Réponse 1)	App Engine
Answer 2 (Réponse 2)	Cloud Storage (cochez la case d'option de cette réponse "Answer 2")
Answer 3 (Réponse 3)	Compute Engine
Answer 4 (Réponse 4)	Container Engine

7. Revenez dans Cloud Console, puis cliquez sur le menu de navigation > Cloud Storage.
8. Sur la page Cloud Storage > Browser (Cloud Storage > Navigateur), cliquez sur le bon bucket (nommé <Project ID>-media).

Cliquez sur "Check my progress" (Vérifier ma progression) pour vérifier l'objectif. Exécuter l'application et créer un objet Cloud Storage

Exécuter l'application cliente et tester l'URL publique de Cloud Storage

1. Ajoutez /api/quizzes/gcp à la fin de l'URL de l'application.

2. Revenez à la page d'accueil de l'application et cliquez sur Take Test (Faire le test).
3. Cliquez sur GCP, puis répondez à chaque question.

Terminer l'atelier

Une fois l'atelier terminé, cliquez sur Terminer l'atelier. Google Cloud Skills Boost supprime les ressources que vous avez utilisées, puis efface le compte.

Si vous le souhaitez, vous pouvez noter l'atelier. Sélectionnez un nombre d'étoiles, saisissez un commentaire, puis cliquez sur Envoyer.

Le nombre d'étoiles correspond à votre degré de satisfaction :

• 1 étoile = très insatisfait(e)
• 2 étoiles = insatisfait(e)
• 3 étoiles = ni insatisfait(e), ni satisfait(e)
• 4 étoiles = satisfait(e)
• 5 étoiles = très satisfait(e)

Si vous ne souhaitez pas donner votre avis, vous pouvez fermer la boîte de dialogue.

Pour soumettre des commentaires, suggestions ou corrections, veuillez accéder à l'onglet Assistance.

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