arrow_back

Desarrollo de aplicaciones: Cómo almacenar archivos de imagen y video en Cloud Storage - Python

Acceder Unirse
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.
Pon a prueba tus conocimientos y compártelos con nuestra comunidad
done
Obtén acceso a más de 700 labs prácticos, insignias de habilidad y cursos

Desarrollo de aplicaciones: Cómo almacenar archivos de imagen y video en Cloud Storage - Python

Lab 1 hora universal_currency_alt 5 créditos show_chart Intermedio
info Es posible que este lab incorpore herramientas de IA para facilitar tu aprendizaje.
Pon a prueba tus conocimientos y compártelos con nuestra comunidad
done
Obtén acceso a más de 700 labs prácticos, insignias de habilidad y cursos

GSP185

Logotipo de los labs de autoaprendizaje de Google Cloud

Descripción general

Cloud Storage permite almacenar y recuperar cualquier cantidad de datos en todo el mundo y en cualquier momento. Puedes usar Cloud Storage en diversas situaciones, como entregar contenido de un sitio web, almacenar datos para archivarlos y recuperarlos en caso de desastres, o distribuir grandes objetos de datos a los usuarios a través de una descarga directa.

En este lab, configurarás una aplicación para usar Cloud Storage para almacenar y recuperar datos de la aplicación. La aplicación es un cuestionario en línea; los datos son los datos del formulario, incluida una imagen que subes desde tu máquina local.

Objetivos

En este lab, aprenderás a realizar las siguientes tareas:

  • Configurar Cloud Shell como tu entorno de desarrollo
  • Actualizar el código de la aplicación para integrar Cloud Datastore
  • Usar la aplicación Quiz para subir un archivo de imagen en Cloud Storage y ver la imagen en el cuestionario

Configuración y requisitos

Antes de hacer clic en el botón Comenzar lab

Lee estas instrucciones. Los labs son cronometrados y no se pueden pausar. El cronómetro, que comienza a funcionar cuando haces clic en Comenzar lab, indica por cuánto tiempo tendrás a tu disposición los recursos de Google Cloud.

Este lab práctico te permitirá realizar las actividades correspondientes en un entorno de nube real, no en uno de simulación o demostración. Para ello, se te proporcionan credenciales temporales nuevas que utilizarás para acceder a Google Cloud durante todo el lab.

Para completar este lab, necesitarás lo siguiente:

  • Acceso a un navegador de Internet estándar (se recomienda el navegador Chrome)
Nota: Usa una ventana de navegador privada o de Incógnito para ejecutar este lab. Así evitarás cualquier conflicto entre tu cuenta personal y la cuenta de estudiante, lo que podría generar cargos adicionales en tu cuenta personal.
  • Tiempo para completar el lab: Recuerda que, una vez que comienzas un lab, no puedes pausarlo.
Nota: Si ya tienes un proyecto o una cuenta personal de Google Cloud, no los uses en este lab para evitar cargos adicionales en tu cuenta.

Cómo iniciar tu lab y acceder a la consola de Google Cloud

  1. Haga clic en el botón Comenzar lab. Si debe pagar por el lab, se abrirá una ventana emergente para que seleccione su forma de pago. A la izquierda, se encuentra el panel Detalles del lab, que tiene estos elementos:

    • El botón Abrir la consola de Google Cloud
    • El tiempo restante
    • Las credenciales temporales que debe usar para el lab
    • Otra información para completar el lab, si es necesaria

  2. Haz clic en Abrir la consola de Google Cloud (o haz clic con el botón derecho y selecciona Abrir el vínculo en una ventana de incógnito si ejecutas el navegador Chrome).

    El lab inicia recursos y abre otra pestaña en la que se muestra la página de acceso.

    Sugerencia: Ordene las pestañas en ventanas separadas, una junto a la otra.

    Nota: Si ves el diálogo Elegir una cuenta, haz clic en Usar otra cuenta.

  3. De ser necesario, copia el nombre de usuario a continuación y pégalo en el diálogo Acceder.

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

    También puedes encontrar el nombre de usuario en el panel Detalles del lab.

  4. Haz clic en Siguiente.

  5. Copia la contraseña que aparece a continuación y pégala en el diálogo Te damos la bienvenida.

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

    También puedes encontrar la contraseña en el panel Detalles del lab.

  6. Haz clic en Siguiente.

    Importante: Debes usar las credenciales que te proporciona el lab. No uses las credenciales de tu cuenta de Google Cloud. Nota: Usar tu propia Cuenta de Google podría generar cargos adicionales.

  7. Haga clic para avanzar por las páginas siguientes:

    • Acepta los Términos y Condiciones.
    • No agregues opciones de recuperación o autenticación de dos factores (esta es una cuenta temporal).
    • No te registres para obtener pruebas gratuitas.

Después de un momento, se abrirá la consola de Google Cloud en esta pestaña.

Nota: Para ver un menú con una lista de productos y servicios de Google Cloud, haz clic en el menú de navegación que se encuentra en la parte superior izquierda. Ícono del menú de navegación

Activa Cloud Shell

Cloud Shell es una máquina virtual que cuenta con herramientas para desarrolladores. Ofrece un directorio principal persistente de 5 GB y se ejecuta en Google Cloud. Cloud Shell proporciona acceso de línea de comandos a tus recursos de Google Cloud.

  1. Haz clic en Activar Cloud Shell Ícono de Activar Cloud Shell en la parte superior de la consola de Google Cloud.

Cuando te conectes, habrás completado la autenticación, y el proyecto estará configurado con tu PROJECT_ID. El resultado contiene una línea que declara el PROJECT_ID para esta sesión:

Your Cloud Platform project in this session is set to YOUR_PROJECT_ID

gcloud es la herramienta de línea de comandos de Google Cloud. Viene preinstalada en Cloud Shell y es compatible con la función de autocompletado con tabulador.

  1. Puedes solicitar el nombre de la cuenta activa con este comando (opcional):
gcloud auth list

  1. Haz clic en Autorizar.

  2. Ahora, el resultado debería verse de la siguiente manera:

Resultado:

ACTIVE: * ACCOUNT: student-01-xxxxxxxxxxxx@qwiklabs.net To set the active account, run: $ gcloud config set account `ACCOUNT`
  1. Puedes solicitar el ID del proyecto con este comando (opcional):
gcloud config list project

Resultado:

[core] project = <project_ID>

Resultado de ejemplo:

[core] project = qwiklabs-gcp-44776a13dea667a6 Nota: Para obtener toda la documentación de gcloud, consulta la guía con la descripción general de gcloud CLI en Google Cloud.

Inicia el editor de código de Cloud Shell

  1. En Cloud Shell, haz clic en Abrir editor para iniciar el editor de código.

El botón Abrir editor.

Nota: El editor de código se inicia en una nueva pestaña del navegador, junto con Cloud Shell.
  1. Ejecuta el siguiente comando para configurar el ID del proyecto; reemplaza YOUR-PROJECT-ID con tu ID del proyecto:
gcloud config set project <YOUR-PROJECT-ID>

Tarea 1. Prepara la aplicación Quiz

En esta sección, accederás a Cloud Shell, clonarás el repositorio de Git que contiene la aplicación Quiz y ejecutarás la aplicación.

Clona el código fuente en Cloud Shell

  • Para clonar el repositorio para la clase, ejecuta el siguiente comando:
git clone https://github.com/GoogleCloudPlatform/training-data-analyst

Configura y ejecuta la aplicación Quiz

  1. Cambia el directorio de trabajo:

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

  2. Configura la aplicación:

    . prepare_environment.sh Nota: Ignora cualquier advertencia.

    Este archivo de secuencia de comandos realiza lo siguiente:

    • Crea una aplicación de App Engine.
    • Exporta una variable de entorno GCLOUD_PROJECT.
    • Actualiza pip y ejecuta pip install -r requirements.txt.
    • Crea entidades en Cloud Datastore.
    • Imprime el ID del proyecto.

  3. Ejecuta la aplicación:

    python run_server.py

    La aplicación se está ejecutando cuando ves el siguiente resultado:

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

Revisa la aplicación Quiz

  1. Para ver la aplicación, haz clic en Web preview > Preview on port 8080.

  2. Haz clic en el vínculo Create Question de la barra de herramientas.

Deberías ver un formulario simple que contiene cuadros de texto para las preguntas y respuestas, y botones de selección para elegir la respuesta correcta.

El formulario Agregar preguntas, en el que el botón Elegir archivo aparece destacado dentro de la categoría Imagen.

Nota: El formulario tiene un campo para subir nuevos archivos que se usará para subir archivos de imagen o video. En este lab, subirás un archivo de imagen; usarás el mismo proceso para subir el archivo de video.

Tarea 2: Examina el código de la aplicación Quiz

En esta sección, revisarás el código de la aplicación del caso de éxito.

En este lab, verás y editarás archivos. Puedes usar los editores de shell que están instalados en Cloud Shell, como nano o vim, o bien el editor de código de Cloud Shell.

En este lab, se usa el editor de código de Cloud Shell para revisar el código de la aplicación Quiz.

Examina el código de la aplicación

  1. Usa el panel del navegador de archivos ubicado en la parte izquierda del editor para ir hasta la carpeta /training-data-analyst/courses/developingapps/python/cloudstorage/start.

  2. Selecciona el archivo add.html en la carpeta ...quiz/webapp/templates/.

    Este archivo contiene la plantilla para el formulario Create Question.

    Observa cómo el formulario se modificó para usar multipart/form-data como el enc-type y hay dos nuevos controles de formularios:

    • Un control de carga de archivos llamado image
    • Un campo oculto llamado imageUrl

  3. Selecciona el archivo routes.py en la carpeta ...quiz/webapp.

    Este archivo contiene la ruta del controlador POST que recibe los datos del formulario. Se modificó para obtener el archivo de imagen del formulario.

  4. Selecciona el archivo questions.py en la carpeta ...quiz/webapp.

    Este archivo contiene el controlador que procesa los datos del formulario extraídos en el archivo routes.py. Modificarás este archivo para usar un nuevo módulo que sea un cliente para Cloud Storage.

  5. Selecciona el archivo ...quiz/gcp/storage.py.

    Este es el archivo en el que escribirás el código para guardar los datos del archivo de imagen en Cloud Storage.

Tarea 3. Crea un bucket de Cloud Storage

En esta sección, crearás un bucket de Cloud Storage y exportarás una variable de entorno que hace referencia a este.

  1. Vuelve a la línea de comandos de Cloud Shell.

  2. Detén la aplicación presionando Ctrl+C.

  3. Crea un bucket de Cloud Storage con el nombre <Project ID>-media:

    gsutil mb gs://$DEVSHELL_PROJECT_ID-media

    Puedes crear un bucket con el comando gsutil mb, y pasar el nombre del bucket como gs://BUCKET_NAME.

    Puede usar $DEVSHELL_PROJECT_ID como el prefijo del nombre del bucket seguido de -media.

  4. Para exportar el nombre del bucket de Cloud Storage como una variable de entorno llamada GCLOUD_BUCKET, ejecuta el siguiente comando:

export GCLOUD_BUCKET=$DEVSHELL_PROJECT_ID-media Nota: Recuerda que la aplicación usa variables de entorno para la configuración. Esto permite que el equipo de desarrollo implemente la aplicación en las etapas de desarrollo, evaluación, prueba y producción simplemente cambiando estas variables.

Tarea 4. Agrega objetos a Cloud Storage

En esta sección, escribirás código para guardar los archivos cargados en Cloud Storage.

Nota: Actualiza el código dentro de las secciones marcadas de la siguiente manera:

# TODO

# END TODO

Para profundizar tus conocimientos, revisa el código, los comentarios intercalados y la documentación de la API relacionada.

Para obtener información sobre la documentación de la API para Cloud Storage, consulta API y referencia.

Importa y usa el módulo Cloud Storage de Python

  1. En el editor de código, ve a la parte superior del archivo ...quiz/gcp/storage.py.
  2. Obtén el nombre del bucket de la variable de entorno GCLOUD_BUCKET.
  3. Importa el módulo de almacenamiento desde el paquete google.client.
  4. Crea un cliente de Cloud Storage.
  5. Obtén una referencia al bucket de 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

Escribe un código para enviar un archivo a Cloud Storage

  1. En storage.py, en la función upload_file(...), elimina la sentencia pass existente. Luego, usa el cliente de Cloud Storage para subir un archivo a tu bucket de Cloud Storage y ponlo disponible de forma pública.
  2. Obtén una referencia a un objeto BLOB de Cloud Storage en el bucket.
  3. Usa el objeto BLOB para subir la imagen.
  4. Haz el archivo público.
  5. Muestra la URL pública del BLOB.

quiz/gcp/storage.py: Función 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. Guarda storage.py.

Escribe el código para usar la funcionalidad de Cloud Storage

  1. En el editor, ve a la parte superior del archivo ...quiz/webapp/questions.py.
  2. Modifica la sentencia import para utilizar tu cliente de almacenamiento, así como el cliente del almacén de datos.
  3. Desplázate a la función upload_file(...). Usa tu cliente de almacenamiento para subir un archivo y asigna la URL pública que se muestra para una variable.
  4. Modifica la declaración return para visualizar la URL pública.
  5. Desplázate a la función save_question(...). Escribe una prueba "si" para ver si image_file está presente.
  6. Si está presente, llama a la función upload_file(...) y asigna la URL pública a una propiedad de entidad llamada imageUrl.
  7. De lo contrario, asigna una string vacía a la propiedad de entidad 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. Guarda questions.py.

Ejecuta la aplicación y crea un objeto de Cloud Storage

  1. Guarda los archivos ...gcp/storage.py y ...webapp/questions.py y, luego, vuelve al comando de Cloud Shell.
  2. Vuelve a Cloud Shell para ejecutar la aplicación:
python run_server.py

  1. Descarga un archivo de imagen a tu máquina local desde Almacenamiento de Google.

  2. En Cloud Shell, haz clic en Vista previa en la Web > Vista previa en el puerto 8080 para obtener una vista previa de la aplicación Quiz.

  3. Haz clic en el vínculo Create Question.

  4. Completa el formulario con los siguientes valores y haz clic en Save.

    Campo de formulario Valor
    Autor Tu nombre
    Cuestionario Google Cloud Platform
    Título ¿Con qué producto se relaciona este logotipo?
    Imagen Sube el archivo Google_Cloud_Storage_logo.png que descargaste anteriormente
    Respuesta 1 App Engine
    Respuesta 2 Cloud Storage (Selecciona el botón de selección Respuesta 2)
    Respuesta 3 Compute Engine
    Respuesta 4 Container Engine

  5. Vuelve a la consola de Cloud y dirígete al menú de navegación > Cloud Storage.

  6. En la página Cloud Storage > Navegador, haz clic en el bucket correcto (denominado <Project ID>-media).

Deberías ver tu nuevo objeto con el nombre Google_Cloud_Storage_logo.png.

Ejecuta la aplicación cliente y prueba la URL pública de Cloud Storage

  1. Agrega /api/quizzes/gcp al final de la URL de la aplicación.

    Deberías ver que los datos JSON se mostraron al cliente en correspondencia a la pregunta que agregaste en la aplicación web.

    La propiedad imageUrl debe tener un valor correspondiente al objeto en Cloud Storage.

  2. Vuelve a la página de inicio de la aplicación y haz clic en Take Test.

  3. Haz clic en GCP y responde cada pregunta.

    Cuando llegues a la pregunta que acabas de agregar, deberías ver que la imagen se formateó dentro de la aplicación web del lado del cliente.

¡Felicitaciones!

Con esto concluye el lab Desarrollo de aplicaciones: Almacenamiento de archivos de imágenes y videos en Cloud Storage - Python. Usaste Cloud Storage para almacenar y recuperar datos de la aplicación.

Finaliza la Quest

Este lab de autoaprendizaje forma parte de las Quests Application Development - Python y Cloud Development. Una Quest es una serie de labs relacionados que forman una ruta de aprendizaje. Si completas esta Quest, obtendrás una insignia como reconocimiento por tu logro. Puedes hacer públicas tus insignias y agregar vínculos a ellas en tu currículum en línea o en tus cuentas de redes sociales. Inscríbete en cualquier Quest que contenga este lab y obtén un crédito inmediato de finalización. Consulta el catálogo de Google Cloud Skills Boost para ver todas las Quests disponibles.

Próximos pasos y más información

Descubre qué más puedes hacer con imágenes y videos:

Más información sobre Python en Google Cloud

Última actualización del manual: 13 de octubre de 2023
Prueba más reciente del lab: 18 de octubre de 2023

Copyright 2025 Google LLC. All rights reserved. Google y el logotipo de Google son marcas de Google LLC. Los demás nombres de productos y empresas pueden ser marcas de las respectivas empresas a las que estén asociados.

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

Este contenido no está disponible en este momento

Te enviaremos una notificación por correo electrónico cuando esté disponible

¡Genial!

Nos comunicaremos contigo por correo electrónico si está 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.