Présentation

Cloud Storage 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 Datastore
• Utiliser l'application Quiz pour importer 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 :

Résultat :

Exemple de résultat :

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

Résultat :

Exemple de résultat :

Tâche 1 : Créer un environnement virtuel

virtualenv vous permet de créer des environnements virtuels pour les espaces utilisateur afin d'installer différents ensembles de packages Python pour plusieurs projets. L'utilisation de virtualenv vous évite également d'installer des packages Python de manière globale, ce qui peut entraîner l'interruption des outils système ou d'autres projets Python. Dans cet atelier, "virtualenv" permet également de vérifier que Python 3 est utilisé pour toutes les commandes Python.

1. Configurez un environnement "virtualenv" pour Python 3 :

   virtualenv -p python3 vrenv

2. Activez l'environnement virtuel :

   source vrenv/bin/activate

Tâche 2 : 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

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

   git clone 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/python/cloudstorage ~/cloudstorage

Configurer et exécuter l'application Quiz

1. Changez de répertoire de travail :

   cd ~/cloudstorage/start

2. Configurez l'application :

   . prepare_environment.sh

   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 Google Cloud Platform.

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

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.

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

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

Dans cet atelier, vous afficherez et modifierez 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.

Cet atelier examine le code de l'application Quiz à l'aide de l'éditeur de code Cloud Shell.

Lancer l'éditeur de code Cloud Shell

• Dans Cloud Shell, cliquez sur Ouvrir l'éditeur > Ouvrir dans une nouvelle fenêtre pour lancer l'éditeur de code.

Examiner le code de l'application

1. Accédez au dossier /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 4 : 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, puis cliquez sur Ouvrir le terminal.

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

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

   gcloud storage buckets create gs://$DEVSHELL_PROJECT_ID-media

   Vous pouvez créer un bucket à l'aide de la commande gcloud storage buckets create, 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

Cliquez sur Vérifier ma progression pour valider l'objectif. Créer un bucket

Tâche 5 : Ajouter des objets à Cloud Storage

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

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 "storage" à partir du package google.cloud.
4. Créez un client Cloud Storage.
5. Récupérez la référence du bucket Cloud Storage.

quiz/gcp/storage.py:

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. Obtenez une référence vers un 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 du blob.

quiz/gcp/storage.py upload_file(...) function:

6. Enregistrez storage.py.

Rédiger 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 de datastore.
3. Pour la fonction upload_file(...), utilisez votre client de stockage pour importer un fichier et attribuer l'URL publique renvoyée à une variable.
4. Modifiez l'instruction "return" pour renvoyer l'URL publique.
5. Pour la fonction save_question(...), faites un test pour vérifier que image_file est bien présent.
6. S'il est présent, utilisez la fonction upload_file(...) et attribuez l'URL publique à une propriété d'entité nommée "imageUrl".
7. Sinon, attribuez une chaîne vide à la propriété d'entité "imageUrl".

quiz/webapp/questions.py:

8. Enregistrez questions.py.

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

1. Revenez à Cloud Shell pour exécuter l'application :

2. Téléchargez le fichier image du logo Storage sur votre ordinateur local.

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

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

5. 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)	Kubernetes Engine

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

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

Cliquez sur Vérifier ma progression pour valider l'objectif. Importez 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.

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 2026 Google LLC Tous droits réservés. Google et le logo Google sont des marques de Google LLC. Tous les autres noms de société et de produit peuvent être des marques des sociétés auxquelles ils sont associés.