arrow_back

Développement d'applications : Stocker des fichiers image et vidéo dans Cloud Storage – Python

Se connecter Rejoindre
Quick tip: Review the prerequisites before you run the lab
Use an Incognito or private browser window to run this lab. This prevents any conflicts between your personal account and the student account, which may cause extra charges incurred to your personal account.
Testez vos connaissances et partagez-les avec notre communauté
done
Accédez à plus de 700 ateliers pratiques, badges de compétence et cours

Développement d'applications : Stocker des fichiers image et vidéo dans Cloud Storage – Python

Atelier 1 heure universal_currency_alt 5 crédits show_chart Intermédiaire
info Cet atelier peut intégrer des outils d'IA pour vous accompagner dans votre apprentissage.
Testez vos connaissances et partagez-les avec notre communauté
done
Accédez à plus de 700 ateliers pratiques, badges de compétence et cours

GSP185

Logo des ateliers d'auto-formation Google Cloud

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

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, un pop-up 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 gratuits.

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

Remarque : Pour afficher un menu contenant la liste des produits et services Google Cloud, cliquez sur le menu de navigation en haut à gauche. Icône du menu de navigation

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 Icône Activer Cloud Shell en haut de la console 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 YOUR_PROJECT_ID (VOTRE_ID_PROJET) pour cette session :

Your Cloud Platform project in this session is set to YOUR_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.

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

  1. Cliquez sur Autoriser.

  2. Vous devez à présent obtenir le résultat suivant :

Résultat :

ACTIVE: * ACCOUNT: student-01-xxxxxxxxxxxx@qwiklabs.net To set the active account, run: $ gcloud config set account `ACCOUNT`
  1. (Facultatif) Vous pouvez lister les ID de projet à l'aide de cette commande :
gcloud config list project

Résultat :

[core] project = <ID_Projet>

Exemple de résultat :

[core] project = qwiklabs-gcp-44776a13dea667a6 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.

Bouton &quot;Ouvrir l&#39;éditeur&quot;

Remarque : L'éditeur de code s'ouvre avec Cloud Shell dans un nouvel onglet de votre navigateur.
  1. 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. 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.

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

Formulaire d&#39;ajout d&#39;une question avec le bouton de choix d&#39;un fichier encadré dans la catégorie &quot;Image&quot;

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.

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

Écrire du code pour envoyer un fichier à 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
  1. 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
  1. 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

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

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

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

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

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

  6. Sur la page Cloud Storage > Navigateur, cliquez sur le bon bucket (nommé <Project ID>-media).

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

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.

Terminer votre quête

Cet atelier d'auto-formation fait partie des quêtes Application Development – Python et Cloud Development. Une quête est une série d'ateliers associés qui constituent un parcours de formation. Si vous terminez une quête, vous obtenez un badge attestant de votre réussite. Vous pouvez rendre publics les badges que vous recevez et ajouter leur lien dans votre CV en ligne ou sur vos comptes de réseaux sociaux. Inscrivez-vous à n'importe quelle quête contenant cet atelier pour obtenir immédiatement les crédits associés. Découvrez toutes les quêtes disponibles dans le catalogue Google Cloud Skills Boost.

Étapes suivantes et informations supplémentaires

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

En savoir plus sur Python sur Google Cloud

Dernière mise à jour du manuel : 13 octobre 2023
Dernier test de l'atelier : 18 octobre 2023

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.

Before you begin

  1. Labs create a Google Cloud project and resources for a fixed time
  2. Labs have a time limit and no pause feature. If you end the lab, you'll have to restart from the beginning.
  3. On the top left of your screen, click Start lab to begin

Use private browsing

  1. Copy the provided Username and Password for the lab
  2. Click Open console in private mode

Sign in to the Console

  1. Sign in using your lab credentials. Using other credentials might cause errors or incur charges.
  2. Accept the terms, and skip the recovery resource page
  3. Don't click End lab unless you've finished the lab or want to restart it, as it will clear your work and remove the project

Ce contenu n'est pas disponible pour le moment

Nous vous préviendrons par e-mail lorsqu'il sera disponible

Parfait !

Nous vous contacterons par e-mail s'il devient disponible

One lab at a time

Confirm to end all existing labs and start this one

Setup your console before you begin

Use an Incognito or private browser window to run this lab. This prevents any conflicts between your personal account and the Student account, which may cause extra charges incurred to your personal account.