arrow_back

Desenvolvimento de aplicativos: como armazenar arquivos de imagem e vídeo no Cloud Storage – Java

Acesse mais de 700 laboratórios e cursos

Desenvolvimento de aplicativos: como armazenar arquivos de imagem e vídeo no Cloud Storage – Java

Laboratório 2 horas universal_currency_alt 5 créditos show_chart Avançado
info Este laboratório pode incorporar ferramentas de IA para ajudar no seu aprendizado.
Acesse mais de 700 laboratórios e cursos

Informações gerais

O Cloud Storage permite o armazenamento global e a recuperação de volumes de dados a qualquer momento. É possível usar o Cloud Storage para vários cenários, como veiculação de conteúdo de sites, armazenamento de dados para arquivamento e recuperação de desastres ou distribuição de objetos de dados grandes aos usuários por download direto.

Neste laboratório, você vai configurar um aplicativo para usar o Cloud Storage no armazenamento e na recuperação de dados. O aplicativo é um teste on-line e os dados são coletados nos formulários, que contêm uma imagem do computador local enviada por upload.

Objetivos

Neste laboratório, você aprenderá a:

  • configurar o Cloud Shell como o ambiente de desenvolvimento;
  • atualizar o código do aplicativo para integrar o Cloud Storage;
  • usar o aplicativo de teste para fazer upload de um arquivo de imagem no Cloud Storage e acessar a imagem no próprio aplicativo.

Configuração e requisitos

Para cada laboratório, você recebe um novo projeto do Google Cloud e um conjunto de recursos por um determinado período e sem custos financeiros.

  1. Faça login no Qwiklabs em uma janela anônima.

  2. Confira o tempo de acesso do laboratório (por exemplo, 1:15:00) e finalize todas as atividades nesse prazo.
    Não é possível pausar o laboratório. Você pode reiniciar o desafio, mas vai precisar refazer todas as etapas.

  3. Quando tudo estiver pronto, clique em Começar o laboratório.

  4. Anote as credenciais (Nome de usuário e Senha). É com elas que você vai fazer login no Console do Google Cloud.

  5. Clique em Abrir Console do Google.

  6. Clique em Usar outra conta, depois copie e cole as credenciais deste laboratório nos locais indicados.
    Se você usar outras credenciais, vai receber mensagens de erro ou cobranças.

  7. Aceite os termos e pule a página de recursos de recuperação.

Ative o Google Cloud Shell

O Google Cloud Shell é uma máquina virtual com ferramentas de desenvolvimento. Ele tem um diretório principal permanente de 5 GB e é executado no Google Cloud.

O Cloud Shell oferece acesso de linha de comando aos recursos do Google Cloud.

  1. No console do Cloud, clique no botão "Abrir o Cloud Shell" na barra de ferramentas superior direita.

    Ícone do Cloud Shell em destaque

  2. Clique em Continuar.

O provisionamento e a conexão do ambiente podem demorar um pouco. Quando você estiver conectado, já estará autenticado, e o projeto estará definido com seu PROJECT_ID. Exemplo:

ID do projeto em destaque no terminal do Cloud Shell

A gcloud é a ferramenta de linha de comando do Google Cloud. Ela vem pré-instalada no Cloud Shell e aceita preenchimento com tabulação.

  • Para listar o nome da conta ativa, use este comando:
gcloud auth list

Saída:

Credentialed accounts: - @.com (active)

Exemplo de saída:

Credentialed accounts: - google1623327_student@qwiklabs.net
  • Para listar o ID do projeto, use este comando:
gcloud config list project

Saída:

[core] project =

Exemplo de saída:

[core] project = qwiklabs-gcp-44776a13dea667a6 Observação: a documentação completa da gcloud está disponível no guia com informações gerais sobre a gcloud CLI .

Tarefa 1: revise o aplicativo de teste

Nesta seção você acessará o Cloud Shell, clonará o repositório git que contém o aplicativo de teste e executará o aplicativo.

Clone o código-fonte no Cloud Shell

  1. Clone o repositório para a classe:
git clone --depth=1 https://github.com/GoogleCloudPlatform/training-data-analyst
  1. Crie um link flexível para seu diretório de trabalho:
ln -s ~/training-data-analyst/courses/developingapps/v1.3/java/cloudstorage ~/cloudstorage

Configure e execute o aplicativo de teste

  1. Mude para o diretório que contém os arquivos de exemplo deste laboratório:

    cd ~/cloudstorage/start
  2. Configure o aplicativo:

    . prepare_environment.sh

    Esse arquivo de script faz o seguinte:

    • Cria um aplicativo do App Engine
    • Exporta uma variável de ambiente GCLOUD_PROJECT
    • Executa o mvn clean install
    • Mostra o ID do projeto do Google Cloud Platform

    Quando o aplicativo estiver configurado, uma resposta semelhante a esta será mostrada:

    [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 iniciar o aplicativo, execute o seguinte comando:

    mvn spring-boot:run

Revise o aplicativo de teste

  1. Para acessar o aplicativo, clique em Web preview > Preview on port 8080.

    Menu expandido da visualização da Web com a opção "Visualizar na porta 8080" destacada

    O Quite Interesting Quiz é aberto.

    Página de boas-vindas do Quite Interesting Quiz.

  2. Clique em Create Question na barra de ferramentas.

    Um formulário simples contendo caixas de texto para as perguntas e respostas será mostrado, além de botões de opção que selecionam a alternativa correta.

    O formulário tem um novo campo para fazer upload de arquivo que pode ser usado para enviar imagens ou vídeos. Neste laboratório, você vai fazer upload de um arquivo de imagem. Você vai usar o mesmo procedimento para fazer upload de um arquivo de vídeo.

    Formulário para adicionar perguntas com o botão "Escolher arquivo" no campo da imagem destacado

Tarefa 2: examine o código do aplicativo de teste

Nesta seção, você usará o editor de texto do Cloud Shell para revisar o código do aplicativo de teste.

Inicie o editor de texto do Cloud Shell

  1. No Cloud Shell, clique em Abrir editor para iniciar o editor de código.

  2. Acesse a pasta /cloudstorage/start usando o painel do navegador de arquivos no lado esquerdo do editor.

Revise o aplicativo da Web em Spring Boot

  1. Selecione o arquivo new_question.html na pasta .../src/main/resources/templates.

    Este arquivo contém o modelo Thyme para o formulário de criação de pergunta. O formulário usa multipart/form-data como enctype e os dois controles do formulário para imagens e vídeos:

    • Um controle de upload de arquivo chamado image
    • Um campo oculto chamado imageUrl
  2. Selecione a pasta .../src/main/java/com/google/training/appdev.

    Os caminhos de arquivos Java são relativos a esta pasta.

  3. Selecione .../web/QuestionsController.java.

    Neste arquivo, o gerenciador POST invoca um método em um serviço de imagem.

  4. Selecione o arquivo .../services/gcp/cloudstorage/ImageService.java.

    Aqui você vai escrever o código para salvar os dados do arquivo de imagem no Cloud Storage.

Tarefa 3. criar um bucket do Cloud Storage

Nesta seção, você vai criar um bucket do Cloud Storage e exportar uma variável de ambiente que faz referência a ele.

Crie um bucket do Cloud Storage

  1. Volte ao Cloud Shell e interrompa o aplicativo ao pressionar Ctrl+C.

  2. Para criar um bucket do Cloud Storage com o nome <Project ID>-media, execute o seguinte comando:

    gcloud storage buckets create gs://$DEVSHELL_PROJECT_ID-media Observação: é possível criar um bucket usando o comando gcloud storage buckets create, transmitindo o nome do bucket como gs://BUCKET_NAME. É possível usar $DEVSHELL_PROJECT_ID como o prefixo do nome do bucket seguido por -media.

    Clique em Verificar meu progresso para conferir o objetivo.

    Criar um bucket de armazenamento
  3. Para exportar o bucket do Cloud Storage como uma variável de ambiente com o nome GCLOUD_BUCKET, execute este comando:

    export GCLOUD_BUCKET=$DEVSHELL_PROJECT_ID-media

Lembre-se que o aplicativo usa as variáveis de ambiente para fazer a configuração. Isso permite que a equipe de desenvolvedores implante o aplicativo durante o desenvolvimento, teste, preparo ou produção, alterando apenas essas variáveis.

Tarefa 4: adicionar objetos ao Cloud Storage

Nesta seção, você vai escrever o código para salvar os arquivos enviados por upload no Cloud Storage.

Observação: atualize o código nas seções entre // TODO e // END TODO.

Para aprender ainda mais, revise o código, os comentários inline e a documentação das APIs e referência.

Importe e use o pacote do Cloud Storage em Java

  1. No editor de código, vá para a parte superior do arquivo .../services/gcp/cloudstorage/ImageService.java.

  2. Escreva uma importação inicial para o pacote com.google.cloud.storage.*.

    // TODO: Write a start import for Cloud Storage import com.google.cloud.storage.*; // END TODO
  3. Crie um cliente do Cloud Storage com o nome storage usando a classe 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. Declare uma string com o nome bucketName e faça uma anotação com ela usando uma anotação de valor do Spring para recuperar o valor de uma propriedade chamada 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: criar o cliente do Storage // A classe StorageOptions tem um método estático // getDefaultInstance(). // 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

Escreva o código para enviar um arquivo ao Cloud Storage

Durante a atualização do ImageService.java, acesse o gerenciador saveImage(arquivo MultipartFile) e use o cliente do Cloud Storage para fazer upload de um arquivo no seu bucket do Cloud Storage e torná-lo disponível publicamente.

  1. Declare um objeto BlobInfo e inicialize-o usando o objeto do cliente do Storage. Personalize o objeto BlobInfo usando o Builder. Use essa opção na configuração do tipo de conteúdo e para que a ACL permita o acesso de leitura a usuários não autenticados:

    // TODO: crie um novo objeto do Cloud Storage // Use a classe BlobInfo para representar o objeto // Use o BlobInfo.Builder para personalizar o Blob // Configure o tipo de conteúdo no arquivo // Defina a ACL do objeto como acesso de leitura público 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. Retorne o URL público do novo objeto do Cloud Storage como uma string.

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

Execute o aplicativo e crie um objeto do Cloud Storage

  1. Salve .../services/gcp/cloudstorage/ImageService.java e volte para o Cloud Shell.

  2. Inicie o aplicativo digitando o código a seguir:

    mvn spring-boot:run
  3. Faça o download de um arquivo de imagem neste link e salve no computador.

  4. No Cloud Shell, clique em Web preview > Preview on port 8080 para ver o aplicativo de teste.

  5. Clique no link Create Question.

  6. Preencha os campos com os valores abaixo e clique em Salvar.

    Campo Valor
    Autor Seu nome
    Teste Google Cloud Platform
    Título Which product does this logo relate to?
    Imagem Faça upload do arquivo Google_Cloud_Storage_logo.png salvo anteriormente
    Resposta 1 App Engine
    Resposta 2 Cloud Storage (e selecione o botão de opção Resposta 2 para indicá-la como a alternativa correta)
    Resposta 3 Compute Engine
    Resposta 4 Container Engine

    Clique em Verificar meu progresso para conferir o objetivo.

    Adicionar objetos ao Cloud Storage
  7. Volte ao console do Cloud e acesse Menu de navegação > Cloud Storage.

  8. Em Cloud Storage > página Buckets, clique no bucket correto chamado <Project ID>-media.

    Um novo objeto será mostrado, com o nome #UniqueNumber#Google_Cloud_Storage_logo.png.

    Clique em Verificar meu progresso para conferir o objetivo.

    Criar uma entidade do Datastore

Execute o aplicativo cliente e teste o URL público do Cloud Storage

  1. Adicione /api/quizzes/gcp ao final do URL do aplicativo de teste.

    O aplicativo vai retornar dados JSON ao cliente correspondente à pergunta adicionada no aplicativo da 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"}]}

    A propriedade imageUrl deve conter um valor correspondente ao novo objeto criado no Cloud Storage.

  2. Volte à página inicial do aplicativo e clique no link Take Test.

  3. Clique em GCP e responda às questões.

Quando chegar à pergunta que acabou de ser adicionada, você vai perceber que a imagem foi formatada no aplicativo da Web no lado do cliente.

Finalize o laboratório

Clique em Terminar o laboratório após a conclusão. O Google Cloud Ensina remove os recursos usados e limpa a conta por você.

Você vai poder avaliar sua experiência no laboratório. Basta selecionar o número de estrelas, digitar um comentário e clicar em Enviar.

O número de estrelas indica o seguinte:

  • 1 estrela = muito insatisfeito
  • 2 estrelas = insatisfeito
  • 3 estrelas = neutro
  • 4 estrelas = satisfeito
  • 5 estrelas = muito satisfeito

Feche a caixa de diálogo se não quiser enviar feedback.

Para enviar seu feedback, fazer sugestões ou correções, use a guia Suporte.

Copyright 2020 Google LLC. Todos os direitos reservados. Google e o logotipo do Google são marcas registradas da Google LLC. Todos os outros nomes de produtos e empresas podem ser marcas registradas das respectivas empresas a que estão associados.

Antes de começar

  1. Os laboratórios criam um projeto e recursos do Google Cloud por um período fixo
  2. Os laboratórios têm um limite de tempo e não têm o recurso de pausa. Se você encerrar o laboratório, vai precisar recomeçar do início.
  3. No canto superior esquerdo da tela, clique em Começar o laboratório

Usar a navegação anônima

  1. Copie o nome de usuário e a senha fornecidos para o laboratório
  2. Clique em Abrir console no modo anônimo

Fazer login no console

  1. Faça login usando suas credenciais do laboratório. Usar outras credenciais pode causar erros ou gerar cobranças.
  2. Aceite os termos e pule a página de recursos de recuperação
  3. Não clique em Terminar o laboratório a menos que você tenha concluído ou queira recomeçar, porque isso vai apagar seu trabalho e remover o projeto

Este conteúdo não está disponível no momento

Você vai receber uma notificação por e-mail quando ele estiver disponível

Ótimo!

Vamos entrar em contato por e-mail se ele ficar disponível

Um laboratório por vez

Confirme para encerrar todos os laboratórios atuais e iniciar este

Use a navegação anônima para executar o laboratório

Para executar este laboratório, use o modo de navegação anônima ou uma janela anônima do navegador. Isso evita conflitos entre sua conta pessoal e a conta de estudante, o que poderia causar cobranças extras na sua conta pessoal.