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 varias situaciones, como la entrega de contenido de un sitio web, el almacenamiento de datos con fines de archivado y recuperación ante desastres, o la distribución de grandes objetos de datos a los usuarios a través de descarga directa.

En este lab, configurarás una aplicación para utilizar Cloud Storage con el objetivo de 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 tú 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 Storage
• 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

En cada lab, recibirá un proyecto de Google Cloud y un conjunto de recursos nuevos por tiempo limitado y sin costo adicional.

1. Accede a Qwiklabs desde una ventana de incógnito.

2. Ten en cuenta el tiempo de acceso del lab (por ejemplo, 1:15:00) y asegúrate de finalizarlo en el plazo asignado.
   No existe una función de pausa. Si lo necesita, puede reiniciar el lab, pero deberá hacerlo desde el comienzo.

3. Cuando esté listo, haga clic en Comenzar lab.

4. Anote las credenciales del lab (el nombre de usuario y la contraseña). Las usarás para acceder a la consola de Google Cloud.

5. Haga clic en Abrir Google Console.

6. Haga clic en Usar otra cuenta, copie las credenciales para este lab y péguelas en el mensaje emergente que aparece.
   Si usa otras credenciales, se generarán errores o incurrirá en cargos.

7. Acepta las condiciones y omite la página de recursos de recuperación.

Activa Google Cloud Shell

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

Google Cloud Shell proporciona acceso de línea de comandos a tus recursos de Google Cloud.

1. En la consola de Cloud, en la barra de herramientas superior derecha, haz clic en el botón Abrir Cloud Shell.

   

2. Haz clic en Continuar.

El aprovisionamiento y la conexión al entorno demorarán unos minutos. Cuando te conectes, habrás completado la autenticación, y el proyecto estará configurado con tu PROJECT_ID. Por ejemplo:

gcloud es la herramienta de línea de comandos de Google Cloud. Viene preinstalada en Cloud Shell y es compatible con el completado de línea de comando.

• Puedes solicitar el nombre de la cuenta activa con este comando:

gcloud auth list

Resultado:

Credentialed accounts: - @.com (active)

Resultado de ejemplo:

Credentialed accounts: - google1623327_student@qwiklabs.net

• Puedes solicitar el ID del proyecto con este comando:

gcloud config list project

Resultado:

[core] project =

Resultado de ejemplo:

[core] project = qwiklabs-gcp-44776a13dea667a6 Nota: La documentación completa de gcloud está disponible en la guía de descripción general de gcloud CLI .

Tarea 1. Revisa 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

1. Clona el repositorio para la clase con el siguiente comando:

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

2. Crea un vínculo simbólico al directorio de trabajo:

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

Configura y ejecuta la aplicación Quiz

1. Cambia al directorio que contenga los archivos de muestra de este lab:

   cd ~/cloudstorage/start

2. Configura la aplicación:

   . prepare_environment.sh

   Este archivo de secuencia de comandos realiza lo siguiente:

   • Crea una aplicación de App Engine.
   • Exporta una variable de entorno GCLOUD_PROJECT.
   • Ejecuta mvn clean install.
   • Imprime el ID del proyecto de Google Cloud.

   Una vez configurada la aplicación, verás un resultado similar al siguiente:

   [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. Para ejecutar la aplicación, utiliza el siguiente comando:

   mvn spring-boot:run

Revisa la aplicación Quiz

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

   

   Se abre Quite Interesting Quiz.

   

2. Haz clic en Create Question en 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 tiene un campo nuevo para subir archivos que se usará para subir un archivo de imagen o video. En este lab subirás un archivo de imagen. Usarás el mismo proceso para subir un archivo de video.

   

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

En esta sección, accederás al editor de texto de Cloud Shell para revisar el código de la aplicación Quiz.

Inicia el editor de código de Cloud Shell

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

2. Usa el panel del navegador de archivos ubicado en la parte izquierda del editor para navegar hasta la carpeta /cloudstorage/start.

Revisa la aplicación Spring Boot Web

1. Selecciona el archivo new_question.html en la carpeta .../src/main/resources/templates.

   Este archivo contiene la plantilla Thyme para el formulario Create Question. Observa cómo el formulario usa multipart/form-data como el enctype, y los dos controles de formulario para imágenes y videos:

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

2. Selecciona la carpeta .../src/main/java/com/google/training/appdev.

   Las rutas de archivos de Java están relacionadas con esta carpeta.

3. Selecciona .../web/QuestionsController.java.

   En este archivo, el controlador POST invoca un método en un servicio de imágenes.

4. Selecciona el archivo .../services/gcp/cloudstorage/ImageService.java.

   Este es el archivo en el que escribes 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 él.

Crea un bucket de Cloud Storage

1. Vuelve a Cloud Shell y presiona Ctrl + C. para detener la aplicación.

2. Para crear un bucket de Cloud Storage llamado <Project ID>-media, ejecuta el siguiente comando:

   gcloud storage buckets create gs://$DEVSHELL_PROJECT_ID-media Nota: Puedes crear un bucket usando el comando gcloud storage buckets create. Para ello, pasa el nombre del bucket como gs://BUCKET_NAME Puedes usar $DEVSHELL_PROJECT_ID como prefijo del nombre del bucket seguido de -media.

   Haz clic en Revisar mi progreso para verificar el objetivo.

   Crear un bucket de almacenamiento

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

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 en las secciones comprendidas entre // TODO y // END TODO.

Para maximizar el aprendizaje, revisa el código, los comentarios intercalados y la documentación relacionada de referencia y sobre las APIs.

Importa y usa el paquete de Cloud Storage de Java

1. En el editor de código, ve a la parte superior del archivo .../services/gcp/cloudstorage/ImageService.java.

2. Escribe una sentencia para iniciar la importación del paquete com.google.cloud.storage.*:

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

3. Crea un cliente de Cloud Storage llamado storage usando la clase 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. Declara una cadena llamada bucketName y escríbela con una anotación de valor Spring para recuperar el valor de una propiedad llamada 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

Escribe código para enviar un archivo a Cloud Storage

Mientras se actualiza ImageService.java, ve al controlador saveImage(MultipartFile file) y, luego, usa el cliente de Cloud Storage para subir un archivo en tu bucket de Cloud Storage y hacerlo disponible de manera pública.

1. Declara un objeto BlobInfo e inicialízalo usando el objeto del cliente de almacenamiento. Personaliza el objeto BlobInfo con su Builder. Usa la opción para configurar el tipo de contenido y establecer la LCA con el objetivo de permitir el acceso de lectura no autenticado:

   // 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. Devuelve la URL pública para el nuevo objeto de Cloud Storage como una cadena:

   // 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 }

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

1. Guarda .../services/gcp/cloudstorage/ImageService.java y, luego, regresa a Cloud Shell.

2. Inicia la aplicación. Para ello, escribe lo siguiente:

   mvn spring-boot:run

3. Descarga un archivo de imagen a tu máquina local desde aquí.

4. En Cloud Shell, haz clic en Web preview > Preview on port 8080 para obtener una vista previa de la aplicación Quiz.

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

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

   Campo	Valor
   Autor	Tu nombre
   Cuestionario	Google Cloud
   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 Answer 2 para indicar que esta es la respuesta correcta)
   Respuesta 3	Compute Engine
   Respuesta 4	Container Engine

   Haz clic en Revisar mi progreso para verificar el objetivo.

   Agregar objetos a Cloud Storage

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

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

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

   Haz clic en Revisar mi progreso para verificar el objetivo.

   Crear una entidad de Datastore

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

   Deberías ver que la aplicación devuelve los datos JSON al cliente con relación a la pregunta que agregaste en la aplicación 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 propiedad imageUrl debe tener un valor correspondiente al nuevo objeto que creaste en Cloud Storage.

2. Vuelve a la página principal de la aplicación y haz clic en el vínculo 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 cliente.

Finalice su lab

Cuando haya completado el lab, haga clic en Finalizar lab. Google Cloud Skills Boost quitará los recursos que usó y limpiará la cuenta.

Tendrá la oportunidad de calificar su experiencia en el lab. Seleccione la cantidad de estrellas que corresponda, ingrese un comentario y haga clic en Enviar.

La cantidad de estrellas indica lo siguiente:

• 1 estrella = Muy insatisfecho
• 2 estrellas = Insatisfecho
• 3 estrellas = Neutral
• 4 estrellas = Satisfecho
• 5 estrellas = Muy satisfecho

Puede cerrar el cuadro de diálogo si no desea proporcionar comentarios.

Para enviar comentarios, sugerencias o correcciones, use la pestaña Asistencia.

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