GSP185

Aperçu

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 configurerez une application afin qu'elle utilise Cloud Storage pour stocker et récupérer les données nécessaires à son fonctionnement. L'application est un quiz en ligne, et les données sont celles du formulaire, y compris une image que vous pouvez télécharger 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 Datastore
• Utiliser l'application Quiz pour importer un fichier image dans Cloud Storage et afficher l'image dans le quiz

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 les activités dans un véritable environnement cloud, et non dans un environnement de simulation ou de démonstration. Des identifiants temporaires vous sont fournis pour vous permettre de 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 (recommandé) ou de navigation privée pour effectuer cet atelier. Vous éviterez ainsi les conflits entre votre compte personnel et le compte temporaire de participant, qui pourraient entraîner des frais supplémentaires facturés sur votre compte personnel.

• Vous disposez d'un temps limité. N'oubliez pas qu'une fois l'atelier commencé, vous ne pouvez pas le mettre en pause.

Remarque : Utilisez uniquement le compte de participant pour cet atelier. Si vous utilisez un autre compte Google Cloud, des frais peuvent être facturés à ce compte.

Démarrer l'atelier et se connecter à la console Google Cloud

1. Cliquez sur le bouton Démarrer l'atelier. Si l'atelier est payant, une boîte de dialogue s'affiche pour vous permettre de sélectionner un mode de paiement. Sur la gauche, vous trouverez le panneau "Détails concernant l'atelier", qui contient les éléments suivants :

   • Le bouton "Ouvrir la console Google Cloud"
   • Le temps restant
   • Les identifiants temporaires que vous devez utiliser pour cet atelier
   • Des informations complémentaires vous permettant d'effectuer l'atelier

2. Cliquez sur Ouvrir la console Google Cloud (ou effectuez un clic droit et sélectionnez Ouvrir le lien dans la fenêtre de navigation privée si vous utilisez le navigateur Chrome).

   L'atelier lance les ressources, puis ouvre la page "Se connecter" dans un nouvel onglet.

   Conseil : Réorganisez les onglets dans des fenêtres distinctes, placées côte à côte.

   Remarque : Si la boîte de dialogue Sélectionner un compte s'affiche, cliquez sur Utiliser un autre compte.

3. Si nécessaire, copiez le nom d'utilisateur ci-dessous et collez-le dans la boîte de dialogue Se connecter.

   {{{user_0.username | "Username"}}}

   Vous trouverez également le nom d'utilisateur dans le panneau "Détails concernant l'atelier".

4. Cliquez sur Suivant.

5. Copiez le mot de passe ci-dessous et collez-le dans la boîte de dialogue Bienvenue.

   {{{user_0.password | "Password"}}}

   Vous trouverez également le mot de passe dans le panneau "Détails concernant l'atelier".

6. Cliquez sur Suivant.

   Important : Vous devez utiliser les identifiants fournis pour l'atelier. Ne saisissez pas ceux de votre compte Google Cloud. Remarque : Si vous utilisez votre propre compte Google Cloud pour cet atelier, des frais supplémentaires peuvent vous être facturés.

7. Accédez aux pages suivantes :

   • Acceptez les conditions d'utilisation.
   • N'ajoutez pas d'options de récupération ni d'authentification à deux facteurs (ce compte est temporaire).
   • Ne vous inscrivez pas à des essais sans frais.

Après quelques instants, la console Cloud s'ouvre dans cet onglet.

Remarque : Pour accéder aux produits et services Google Cloud, cliquez sur le menu de navigation ou saisissez le nom du service ou du produit dans le champ Recherche.

Activer Cloud Shell

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. Cloud Shell vous permet d'accéder via une ligne de commande à vos ressources Google Cloud.

1. Cliquez sur Activer Cloud Shell  en haut de la console Google Cloud.

2. Passez les fenêtres suivantes :

   • Accédez à la fenêtre d'informations de Cloud Shell.
   • Autorisez Cloud Shell à utiliser vos identifiants pour effectuer des appels d'API Google Cloud.

Une fois connecté, vous êtes en principe authentifié et le projet est défini sur votre ID_PROJET : . Le résultat contient une ligne qui déclare l'ID_PROJET pour cette session :

Your Cloud Platform project in this session is set to {{{project_0.project_id | "PROJECT_ID"}}}

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.

3. (Facultatif) Vous pouvez lister les noms des comptes actifs à l'aide de cette commande :

gcloud auth list

4. Cliquez sur Autoriser.

Résultat :

ACTIVE: * ACCOUNT: {{{user_0.username | "ACCOUNT"}}} To set the active account, run: $ gcloud config set account `ACCOUNT`

5. (Facultatif) Vous pouvez lister les ID de projet à l'aide de cette commande :

gcloud config list project

Résultat :

[core] project = {{{project_0.project_id | "PROJECT_ID"}}} Remarque : Pour consulter la documentation complète sur gcloud, dans Google Cloud, accédez au guide de présentation de la gcloud CLI.

Lancer l'éditeur de code Cloud Shell

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

Remarque : L'éditeur de code s'ouvre avec Cloud Shell dans un nouvel onglet de votre navigateur.

2. Exécutez la commande suivante pour configurer l'ID de votre projet, en remplaçant YOUR-PROJECT-ID par l'ID de votre projet :

gcloud config set project <YOUR-PROJECT-ID>

Tâche 1 : Préparer 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

• Pour cloner le dépôt du cours, exécutez la commande suivante :

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

Configurer et exécuter l'application Quiz

1. Changez de répertoire de travail :

   cd ~/training-data-analyst/courses/developingapps/python/cloudstorage/start

2. Définissez la région à l'aide d'une variable :

   REGION={{{project_0.default_region | REGION}}} sed -i s/us-central/$REGION/g prepare_environment.sh

3. Configurez l'application :

   . prepare_environment.sh Remarque : Ignorez les avertissements.

   Ce fichier de script :

   • crée une application App Engine ;
   • exporte une variable d'environnement GCLOUD_PROJECT ;
   • met à jour pip, puis exécute la commande pip install -r requirements.txt ;
   • crée des entités dans Cloud Datastore ;
   • affiche l'ID du projet.

4. Exécutez l'application :

   python run_server.py

   L'application est en cours d'exécution lorsque la sortie suivante s'affiche :

   * Running on http://127.0.0.1:8080/ (Press CTRL+C to quit) * Restarting with stat * Debugger is active! * Debugger PIN: 502-577-323

Examiner l'application Quiz

1. Pour afficher l'application, cliquez sur 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.

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.

Remarque : Ce formulaire comporte un champ d'importation de fichiers, qui vous servira à importer des fichiers image ou vidéo. Dans cet atelier, vous importerez un fichier image. Le processus est le même pour les fichiers vidéo.

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

Dans cette section, vous allez examiner le code de l'application de l'étude de cas.

Au cours de atelier, vous allez consulter et modifier des fichiers. Vous pouvez utiliser les éditeurs de script installés sur Cloud Shell, tels que nano ou vim, ou encore l'éditeur de code intégré de Cloud Shell.

Dans cet atelier, vous allez examiner le code de l'application Quiz à l'aide de l'éditeur de code Cloud Shell.

Examiner le code de l'application

1. Accédez au dossier /training-data-analyst/courses/developingapps/python/cloudstorage/start à l'aide du panneau de l'explorateur de fichiers situé à gauche de l'éditeur.

2. Sélectionnez le fichier add.html dans le dossier ...quiz/webapp/templates/.

   Ce fichier contient le modèle du formulaire "Create Question" (Créer une question).

   Notez que le formulaire a été modifié afin d'utiliser multipart/form-data comme enc-type et que deux nouvelles commandes de formulaire sont apparues :

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

3. Sélectionnez le fichier routes.py dans le dossier ...quiz/webapp.

   Ce fichier contient le routage du gestionnaire POST qui reçoit les données du formulaire. Il a été modifié afin d'obtenir le fichier image du formulaire.

4. Sélectionnez le fichier questions.py dans le dossier ...quiz/webapp.

   Ce fichier contient le gestionnaire traitant les données du formulaire extraites du fichier routes.py. Vous devez modifier ce fichier afin d'utiliser un nouveau module qui est un client de Cloud Storage.

5. Sélectionnez le fichier ...quiz/gcp/storage.py.

   Il s'agit du fichier dans lequel vous allez écrire du code pour 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.

1. Revenez à la ligne de commande Cloud Shell.

2. Arrêtez l'application en appuyant sur Ctrl+C.

3. Créez un bucket Cloud Storage nommé <Project ID>-media :

   gsutil mb gs://$DEVSHELL_PROJECT_ID-media

   Vous pouvez créer un bucket à l'aide de la commande gsutil mb, en indiquant le nom du bucket sous la forme gs://BUCKET_NAME.

   Vous pouvez utiliser $DEVSHELL_PROJECT_ID comme préfixe du nom du bucket, suivi de -media.

4. 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 Remarque : Rappelez-vous que l'application utilise des variables d'environnement pour la configuration. L'équipe de développement peut ainsi déployer l'application en développement, test, préproduction et production simplement en modifiant ces variables.

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

Créer un bucket

Tâche 4 : Ajouter des objets à Cloud Storage

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

Remarque : Modifiez le code dans les sections marquées comme suit :

# TODO

# END TODO

Pour parfaire votre apprentissage, examinez le code, les commentaires intégrés et la documentation sur les API concernées.

Pour en savoir plus sur les API pour Cloud Storage, consultez la documentation de référence des API.

Importer et utiliser le module Python Cloud Storage

1. Dans l'éditeur de code, accédez au début du fichier ...quiz/gcp/storage.py.
2. Récupérez le nom du bucket à partir de la variable d'environnement GCLOUD_BUCKET.
3. Importez le module de stockage à partir du package google.client.
4. Créez un client Cloud Storage.
5. Récupérez la référence du bucket Cloud Storage.

quiz/gcp/storage.py

# TODO: Get the Bucket name from the # GCLOUD_BUCKET environment variable bucket_name = os.getenv('GCLOUD_BUCKET') # END TODO # TODO: Import the storage module from google.cloud import storage # END TODO # TODO: Create a client for Cloud Storage storage_client = storage.Client() # END TODO # TODO: Use the client to get the Cloud Storage bucket bucket = storage_client.get_bucket(bucket_name) # END TODO

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

1. Toujours dans le fichier storage.py, dans la fonction upload_file(...), supprimez l'instruction "pass" existante, puis utilisez le client Cloud Storage pour importer un fichier dans votre bucket Cloud Storage et le rendre public.
2. Récupérez la référence de l'objet blob Cloud Storage dans le bucket.
3. Utilisez l'objet blob pour importer l'image.
4. Rendez le fichier public.
5. Renvoyez l'URL publique de l'objet blob.

quiz/gcp/storage.py - Fonction upload_file(...)

""" Uploads a file to a given Cloud Storage bucket and returns the public url to the new object. """ def upload_file(image_file, public): # TODO: Use the bucket to get a blob object blob = bucket.blob(image_file.filename) # END TODO # TODO: Use the blob to upload the file blob.upload_from_string( image_file.read(), content_type=image_file.content_type) # END TODO # TODO: Make the object public if public: blob.make_public() # END TODO # TODO: Modify to return the blob's Public URL return blob.public_url # END TODO

6. Enregistrez storage.py.

Écrire du code pour utiliser la fonction Cloud Storage

1. Dans l'éditeur, accédez au début du fichier ...quiz/webapp/questions.py.
2. Modifiez l'instruction "import" pour utiliser votre client de stockage ainsi que le client Datastore.
3. Accédez à la fonction upload_file(...). Utilisez votre client de stockage pour télécharger un fichier et assignez l'URL publique renvoyée à une variable.
4. Modifiez l'instruction "return" pour renvoyer l'URL publique.
5. Accédez à la fonction save_question(...). Procédez à un test pour vérifier si image_file est présent.
6. S'il est présent, utilisez la fonction upload_file(...) et assignez l'URL publique à une propriété d'entité appelée imageUrl.
7. Sinon, assignez une chaîne vide à la propriété d'entité imageUrl.

quiz/webapp/questions.py

# TODO: Import the storage module from quiz.gcp import storage, datastore # END TODO """ uploads file into google cloud storage - upload file - return public_url """ def upload_file(image_file, public): if not image_file: return None # TODO: Use the storage client to Upload the file # The second argument is a boolean public_url = storage.upload_file( image_file, public ) # END TODO # TODO: Return the public URL # for the object return public_url # END TODO """ uploads file into google cloud storage - call method to upload file (public=true) - call datastore helper method to save question """ def save_question(data, image_file): # TODO: If there is an image file, then upload it # And assign the result to a new Datastore # property imageUrl # If there isn't, assign an empty string if image_file: data['imageUrl'] = str( upload_file(image_file, True)) else: data['imageUrl'] = u'' # END TODO data['correctAnswer'] = int(data['correctAnswer']) datastore.save_question(data) return

8. Enregistrez questions.py.

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

1. Enregistrez les fichiers ...gcp/storage.py et ...webapp/questions.py, puis revenez à la commande Cloud Shell.
2. Revenez à Cloud Shell pour exécuter l'application :

python run_server.py

3. Téléchargez un fichier image sur votre ordinateur local depuis Google Cloud Storage.

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 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.png 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 "Answer 2")
   Answer 3 (Réponse 3)	Compute Engine
   Answer 4 (Réponse 4)	Container Engine

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.

Vous devriez voir votre nouvel objet nommé Google_Cloud_Storage_logo.png.

Importer des objets dans le bucket

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.

   Les données JSON ont normalement été renvoyées au client correspondant à la question que vous avez ajoutée dans l'application Web.

   La propriété imageUrl doit avoir une valeur correspondant à l'objet 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.

Félicitations !

L'atelier "Développement d'applications : Stocker des fichiers image et vidéo dans Cloud Storage – Python" est maintenant terminé. Vous avez utilisé Cloud Storage pour stocker et récupérer les données d'une application.

Étapes suivantes et informations supplémentaires

• Découvrez ce que vous pouvez faire d'autre avec des images et des vidéos :

  • Extraire, analyser et traduire du texte à partir d'images à l'aide des API Cloud ML
  • Video Intelligence : Qwik Start

• Découvrez Python sur Google Cloud.

Dernière mise à jour du manuel : 24 janvier 2025

Dernier test de l'atelier : 24 janvier 2025

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