Présentation

Cloud Storage vous permet de stocker et de récupérer autant de données que vous le souhaitez, à tout moment et à l'échelle mondiale. Vous pouvez utiliser Cloud Storage dans diverses situations, par exemple pour diffuser le contenu d'un site Web, stocker des données pour l'archivage et la reprise après sinistre, ou distribuer des objets de données volumineux aux utilisateurs via le téléchargement direct.

Dans cet atelier, vous allez configurer une application afin qu'elle utilise Cloud Storage pour stocker et récupérer les données de l'application. L'application est un quiz en ligne, et les données sont celles du formulaire, y compris une image que vous pouvez importer depuis votre ordinateur local.

Objectifs

Cet atelier va vous apprendre à effectuer les tâches suivantes :

• Configurer Cloud Shell comme environnement de développement
• Mettre à jour le code de l'application pour intégrer Cloud Storage
• Utiliser l'application Quiz pour télécharger un fichier image dans Cloud Storage et afficher l'image dans le quiz

Préparation

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.

Tâche 1 : Examiner l'application Quiz

Dans cette section, vous allez accéder à Cloud Shell, cloner le dépôt Git qui contient l'application Quiz et exécuter l'application.

Cloner le code source dans Cloud Shell

1. Clonez le dépôt associé au cours :

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

2. Créez un lien symbolique vers votre répertoire de travail :

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

Configurer et exécuter l'application Quiz

1. Passez au répertoire qui contient les exemples de fichiers de l'atelier :

   cd ~/cloudstorage/start

2. Configurez l'application :

   . prepare_environment.sh

   Ce fichier de script :

   • crée une application App Engine ;
   • exporte une variable d'environnement GCLOUD_PROJECT ;
   • exécute la commande mvn clean install ;
   • affiche l'ID du projet Google Cloud Platform.

   Une fois l'application configurée, des résultats semblables aux lignes ci-dessous s'affichent :

   [INFO] ------------------------------------------------------------------------ [INFO] BUILD SUCCESS [INFO] ------------------------------------------------------------------------ [INFO] Total time: 02:49 min [INFO] Finished at: 2021-12-06T14:03:06Z [INFO] ------------------------------------------------------------------------ Project ID: qwiklabs-gcp-03-99b99f8ca859

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

   mvn spring-boot:run

Examiner l'application Quiz

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

   

   L'application Quite Interesting Quiz s'ouvre.

   

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

   Un formulaire simple contenant des zones de texte pour la question et les réponses doit s'afficher. Des cases d'option permettent de sélectionner la bonne réponse.

   Ce formulaire comporte un nouveau champ qui permet d'importer des images ou des vidéos. Dans cet atelier, vous allez importer un fichier image. Le processus est le même pour l'importation d'un fichier vidéo.

   

Tâche 2 : Examiner le code de l'application Quiz

Dans cette section, vous allez examiner le code de l'application Quiz dans l'éditeur de texte Cloud Shell.

Lancer l'éditeur de texte Cloud Shell

1. Dans Cloud Shell, cliquez sur l'icône Ouvrir l'éditeur pour lancer l'éditeur de code.

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 Spring Boot

1. Sélectionnez le fichier new_question.html dans le dossier .../src/main/resources/templates.

   Ce fichier contient le modèle Thyme du formulaire "Create Question" (Créer une question). Notez que le formulaire utilise multipart/form-data comme enctype, et les deux nouvelles commandes de formulaire pour les images et les vidéos :

   • Une commande d'importation de fichier nommée image
   • Un champ masqué nommé imageUrl

2. Sélectionnez le dossier .../src/main/java/com/google/training/appdev.

   Les chemins de fichiers Java sont relatifs à ce dossier.

3. Sélectionnez .../web/QuestionsController.java.

   Dans ce fichier, le gestionnaire POST invoque une méthode sur un service d'image.

4. Sélectionnez le fichier .../services/gcp/cloudstorage/ImageService.java.

   Il s'agit du fichier dans lequel vous écrivez le code permettant d'enregistrer les données du fichier image dans Cloud Storage.

Tâche 3 : 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 à Cloud Shell et arrêtez l'application en appuyant sur Ctrl+C.

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

   gcloud storage buckets create gs://$DEVSHELL_PROJECT_ID-media Remarque : Vous pouvez créer un bucket à l'aide de la commande gcloud storage buckets create, en transmettant le nom du bucket sous la forme gs://BUCKET_NAME Vous pouvez utiliser $DEVSHELL_PROJECT_ID en tant que préfixe de nom de bucket, puis ajouter -media à la suite.

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

   Créer un bucket de stockage

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

   export GCLOUD_BUCKET=$DEVSHELL_PROJECT_ID-media

Rappelez-vous que l'application utilise des variables d'environnement pour la configuration. L'équipe en charge du développement peut ainsi déployer l'application pour des étapes de développement, de test, de préproduction et de production en modifiant simplement ces variables.

Tâche 4 : Ajouter des objets à Cloud Storage

Dans cette section, vous rédigerez du code pour enregistrer les fichiers importés dans Cloud Storage.

Remarque : Mettez à jour le code dans les sections entre // TODO et // END TODO.

Pour parfaire votre apprentissage, examinez le code, les commentaires intégrés et la page API et documentation de référence.

Importer et utiliser le package Java Cloud Storage

1. Dans l'éditeur de code, accédez au début du fichier .../services/gcp/cloudstorage/ImageService.java.

2. Codez une importation générique pour le package com.google.cloud.storage.* :

   // TODO: Write a start import for Cloud Storage import com.google.cloud.storage.*; // END TODO

3. Créez un client Cloud Storage nommé storage à l'aide de la classe StorageOptions :

   // TODO: Create the storage client // The StorageOptions class has a getDefaultInstance() // static method. // Use the getService() method to get the storage client private static Storage storage = StorageOptions .getDefaultInstance() .getService(); // END TODO

4. Déclarez une chaîne nommée bucketName et ajoutez-y une annotation de valeur Spring pour récupérer la valeur d'une propriété nommée google.storage.bucket :

// TODO: Get the name of the Cloud Storage bucket // Use a Spring @Value annotation to get the value // Get the value using ${google.storage.bucket} // This references the GCLOUD_BUCKET environment variable @Value("${google.storage.bucket}") private String bucketName; // END TODO

ImageService.java

package com.google.training.appdev.services.gcp.cloudstorage; // TODO: Write a start import for Cloud Storage import com.google.cloud.storage.*; // END TODO import org.springframework.beans.factory.annotation.Value; import org.springframework.stereotype.Service; import org.springframework.web.multipart.MultipartFile; import java.io.IOException; import java.util.ArrayList; import java.util.Arrays; @Service public class ImageService { // TODO: Create the storage client // The StorageOptions class has a getDefaultInstance() // static method. // Use the getService() method to get the storage client private static Storage storage = StorageOptions .getDefaultInstance() .getService(); // END TODO // TODO: Get the name of the Cloud Storage bucket // Use a Spring @Value annotation to get the value // Get the value using ${google.storage.bucket} // This references the GCLOUD_BUCKET environment variable @Value("${google.storage.bucket}") private String bucketName; // END TODO

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

Pendant la mise à jour de ImageService.java, passez au gestionnaire saveImage(MultipartFile file), puis utilisez le client Cloud Storage pour importer un fichier dans votre bucket Cloud Storage et le rendre accessible publiquement.

1. Déclarez un objet BlobInfo et initialisez-le à l'aide de l'objet du client de stockage. Personnalisez l'objet BlobInfo à l'aide de l'élément Builder associé. Utilisez les options permettant de définir le type de contenu et d'autoriser l'accès en lecture non authentifié au niveau de la LCA :

   // TODO: Create a new Cloud Storage object // Use the BlobInfo class to represent this object // Use the BlobInfo.Builder to customize the Blob // Set the content type from the file // Set the object ACL to Public Read BlobInfo blobInfo = storage.create( BlobInfo.newBuilder(bucketName, fileName) .setContentType(file.getContentType()) .setAcl(new ArrayList<>( Arrays.asList(Acl.of(Acl.User.ofAllUsers(), Acl.Role.READER)))) .build(), file.getInputStream()); // END TODO

2. Renvoyez l'URL publique pour le nouvel objet Cloud Storage sous forme de chaîne :

   // TODO: Cloud Storage public URLs are in the form: // https://storage.googleapis.com/[BUCKET]/[OBJECT] // Use String concatentation to create return the URL return "https://storage-download.googleapis.com/" + bucketName+ "/" +fileName; // END TODO

ImageService.java

public String saveImage(MultipartFile file) throws IOException { // The existing code in the method creates a unique name // 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 String fileName = System.nanoTime() + file.getOriginalFilename(); // TODO: Create a new Cloud Storage object // Use the BlobInfo class to represent this object // Use the BlobInfo.Builder to customize the Blob // Set the content type from the file // Set the object ACL to Public Read BlobInfo blobInfo = storage.create( BlobInfo.newBuilder(bucketName, fileName) .setContentType(file.getContentType()) .setAcl(new ArrayList<>( Arrays.asList(Acl.of(Acl.User.ofAllUsers(), Acl.Role.READER)))) .build(), file.getInputStream()); // END TODO // TODO: Cloud Storage public URLs are in the form: // https://storage.googleapis.com/[BUCKET]/[OBJECT] // Use String concatenation to return the URL return "https://storage-download.googleapis.com/" + bucketName + "/" + fileName; // END TODO }

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

1. Enregistrez .../services/gcp/cloudstorage/ImageService.java, puis revenez à Cloud Shell.

2. Démarrez l'application en saisissant ceci :

   mvn spring-boot:run

3. Téléchargez un fichier image sur votre ordinateur local depuis cette page.

4. Dans Cloud Shell, cliquez sur Aperçu sur le Web > Prévisualiser sur le port 8080 pour prévisualiser l'application Quiz.

5. Cliquez sur le lien Create Question (Créer une question).

6. Remplissez le formulaire avec les valeurs suivantes, puis cliquez sur Save (Enregistrer) :

   Champ	Valeur
   Author (Auteur)	Votre nom
   Quiz	Google Cloud Platform
   Title (Titre)	Which product does this logo relate to? (À quel produit correspond ce logo ?)
   Image	Importez le fichier Google_Cloud_Storage_logo.png que vous avez précédemment téléchargé
   Answer 1 (Réponse 1)	App Engine
   Answer 2 (Réponse 2)	Cloud Storage (et cochez la case d'option correspondant à la réponse 2 pour indiquer qu'il s'agit de la bonne réponse)
   Answer 3 (Réponse 3)	Compute Engine
   Answer 4 (Réponse 4)	Container Engine

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

   Ajouter des objets à Cloud Storage

7. Revenez à la console Cloud et accédez au menu de navigation > Cloud Storage.

8. Sur la page Cloud Storage > Buckets, cliquez sur le bucket nommé <Project ID>-media.

   Votre nouvel objet, nommé #UniqueNumber#Google_Cloud_Storage_logo.png, doit s'afficher.

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

   Créer une entité Datastore

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.

   L'application doit renvoyer au client les données JSON correspondant à la question que vous avez ajoutée dans l'application Web :

   {"questions":[{"quiz":"gcp","author":"Mary Smith","title":"Which product does this logo relate to?","correctAnswer":2,"imageUrl":"https://storage-download.googleapis.com/qwiklabs-gcp-33f2cf3e36ee1794-media/2293278773582Websites_and_Web_Apps_GCP.png","image":null,"id":5629499534213120,"answer1":"App Engine","answer2":"Cloud Storage","answer3":"Compute Engine","answer4":"Container Engine"}]}

   La propriété imageUrl doit avoir une valeur correspondant au nouvel objet que vous avez créé dans Cloud Storage.

2. Revenez à la page d'accueil de l'application et cliquez sur le lien Take Test (Faire le test).

3. Cliquez sur GCP, puis répondez à chaque question.

Lorsque vous arrivez à la question que vous venez d'ajouter, vous devriez voir que l'image a été mise en forme dans l'application Web côté client.

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.