GSP1051

Visão geral

O Cloud Spanner é o serviço de banco de dados relacional do Google, totalmente gerenciado e com capacidade de escala horizontal. Ele costuma ser usado para a execução de cargas de trabalho mais exigentes, em que a consistência e a disponibilidade em escala são essenciais. Clientes de diversos setores, como serviços financeiros, jogos e varejo, entre outros, já usam o Spanner.

Neste laboratório, você vai criar e implantar um aplicativo Node.js conectado a uma instância do Cloud Spanner. Esse aplicativo é uma ferramenta de visualização de preços de ações chamada OmegaTrade. Ele armazena preços de ações no Cloud Spanner e renderiza visualizações usando o Gráficos Google.

O serviço de back-end usa o framework Node.js Express e se conecta ao Cloud Spanner com recursos padrão de pool de conexões, sessão e tempo limite.

Atividades deste laboratório

• Configurar o ambiente do projeto.
• Baixar e inspecionar o código do aplicativo.
• Implantar o componente de aplicativo de back-end.
• Importar exemplos de dados de negociação de ações para o banco de dados.
• Implantar o componente de aplicativo de front-end.
• Realizar operações no aplicativo OmegaTrade.

Configuração e requisitos

Antes de clicar no botão Começar o Laboratório

Leia estas instruções. Os laboratórios são cronometrados e não podem ser pausados. O timer é ativado quando você clica em Iniciar laboratório e mostra por quanto tempo os recursos do Google Cloud vão ficar disponíveis.

Este laboratório prático permite que você realize as atividades em um ambiente real de nuvem, e não em uma simulação ou demonstração. Você vai receber novas credenciais temporárias para fazer login e acessar o Google Cloud durante o laboratório.

Confira os requisitos para concluir o laboratório:

• Acesso a um navegador de Internet padrão (recomendamos o Chrome).

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

• Tempo para concluir o laboratório: não se esqueça que, depois de começar, não será possível pausar o laboratório.

Observação: use apenas a conta de estudante neste laboratório. Se usar outra conta do Google Cloud, você poderá receber cobranças nela.

Como iniciar seu laboratório e fazer login no console do Google Cloud

1. Clique no botão Começar o laboratório. Se for preciso pagar por ele, uma caixa de diálogo vai aparecer para você selecionar a forma de pagamento. No painel Detalhes do Laboratório, à esquerda, você vai encontrar o seguinte:

   • O botão Abrir Console do Google Cloud
   • O tempo restante
   • As credenciais temporárias que você vai usar neste laboratório
   • Outras informações, se forem necessárias

2. Se você estiver usando o navegador Chrome, clique em Abrir console do Google Cloud ou clique com o botão direito do mouse e selecione Abrir link em uma janela anônima.

   O laboratório ativa os recursos e depois abre a página Fazer Login em outra guia.

   Dica: coloque as guias em janelas separadas lado a lado.

   Observação: se aparecer a caixa de diálogo Escolher uma conta, clique em Usar outra conta.

3. Se necessário, copie o Nome de usuário abaixo e cole na caixa de diálogo Fazer login.

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

   Você também encontra o nome de usuário no painel Detalhes do Laboratório.

4. Clique em Próxima.

5. Copie a Senha abaixo e cole na caixa de diálogo de Olá.

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

   Você também encontra a senha no painel Detalhes do Laboratório.

6. Clique em Próxima.

   Importante: você precisa usar as credenciais fornecidas no laboratório, e não as da sua conta do Google Cloud. Observação: se você usar sua própria conta do Google Cloud neste laboratório, é possível que receba cobranças adicionais.

7. Acesse as próximas páginas:

   • Aceite os Termos e Condições.
   • Não adicione opções de recuperação nem autenticação de dois fatores (porque essa é uma conta temporária).
   • Não se inscreva em testes gratuitos.

Depois de alguns instantes, o console do Google Cloud será aberto nesta guia.

Observação: para acessar os produtos e serviços do Google Cloud, clique no Menu de navegação ou digite o nome do serviço ou produto no campo Pesquisar.

Ativar o Cloud Shell

O Cloud Shell é uma máquina virtual com várias 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. Clique em Ativar o Cloud Shell na parte de cima do console do Google Cloud.

2. Clique nas seguintes janelas:

   • Continue na janela de informações do Cloud Shell.
   • Autorize o Cloud Shell a usar suas credenciais para fazer chamadas de APIs do Google Cloud.

Depois de se conectar, você verá que sua conta já está autenticada e que o projeto está configurado com seu Project_ID, . A saída contém uma linha que declara o projeto PROJECT_ID para esta sessão:

Your Cloud Platform project in this session is set to {{{project_0.project_id | "PROJECT_ID"}}}

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

3. (Opcional) É possível listar o nome da conta ativa usando este comando:

gcloud auth list

4. Clique em Autorizar.

Saída:

ACTIVE: * ACCOUNT: {{{user_0.username | "ACCOUNT"}}} To set the active account, run: $ gcloud config set account `ACCOUNT`

5. (Opcional) É possível listar o ID do projeto usando este comando:

gcloud config list project

Saída:

[core] project = {{{project_0.project_id | "PROJECT_ID"}}} Observação: consulte a documentação completa da gcloud no Google Cloud no guia de visão geral da gcloud CLI.

Instância do Cloud Spanner

Para que você possa progredir mais rapidamente nesse laboratório, a instância, o banco de dados e as tabelas do Cloud Spanner necessários para o aplicativo OmegaTrade foram criados automaticamente para você.

Confira alguns detalhes:

Item	Nome	Detalhes
Instância do Cloud Spanner	omegatrade-instance	Essa é a instância do projeto
Banco de dados do Cloud Spanner	omegatrade-db	Esse é o banco de dados específico da instância
Tabela	Usuários	Inclui contas de usuário
Tabela	Empresas	Inclui o nome da empresa e o símbolo na bolsa
Tabela	CompanyStocks	Inclui valores das ações
Tabela	Simulações	Monitora o estado de cada simulação

Tarefa 1: ativar as APIs obrigatórias do Google Cloud

Primeiro, ative as APIs do Google Cloud para Cloud Spanner, Container Registry e Cloud Run.

1. No Cloud Shell, insira os seguintes comandos:

gcloud services enable spanner.googleapis.com gcloud services enable artifactregistry.googleapis.com gcloud services enable containerregistry.googleapis.com gcloud services enable run.googleapis.com

Tarefa 2: baixar e inspecionar o código do aplicativo.

1. Faça o download do repositório de código para usar no laboratório. No Cloud Shell, insira o seguinte:

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

2. Navegue até a pasta que inclui o código do aplicativo.

cd training-data-analyst/courses/cloud-spanner/omegatrade/

3. O código é dividido principalmente em duas partes: back-end e front-end. O diagrama abaixo mostra a arquitetura do aplicativo:

4. O aplicativo depende de um arquivo específico da implantação chamado .env para se comunicar com a instância do Cloud Spanner. Você vai criar esse arquivo na próxima tarefa.

5. No back-end, algumas das vinculações e interações com as tabelas do Cloud Spanner são gerenciadas por modelos do Node.js; três deles (company.model.js, simulation.model.js e user.model.js) estão na pasta models. Execute o comando a seguir para navegar até a pasta "models":

cd backend/app/models

6. Execute o comando a seguir para inspecionar o arquivo company.model.js. Esse arquivo inclui operações de banco de dados para interagir com a tabela companies.

more company.model.js

Pressione a tecla de espaço para avançar até o final do arquivo. Se você quiser fechar o arquivo antes do final, insira q para encerrar o comando more.

7. Algumas das interações de front-end com esses modelos e outras estruturas no back-end do Node.js ocorrem por meio de componentes do Angular localizados na pasta components. Emita o comando a seguir para navegar até a pasta "components":

cd ../../../frontend/src/app/components

8. Por exemplo, o componente company inclui o código base do aplicativo para gerenciar e atualizar informações da empresa.

9. Emita o seguinte comando para inspecionar o arquivo de configuração do TypeScript manage-company.component.ts. Este arquivo contém métodos para excluir ou editar uma empresa, entre outras ações.

more company/manage-company/manage-company.component.ts

Pressione a tecla de espaço para avançar até o final do arquivo. Se você quiser fechar o arquivo antes do final, insira q para encerrar o comando more.

Tarefa 3: criar e implantar o componente de back-end

1. Navegue até a pasta que inclui o código necessário para criar e implantar o back-end.

cd ../../../../backend

2. Crie o arquivo .env. Como mencionado anteriormente, esse arquivo contém informações específicas do projeto para que o componente de back-end do aplicativo possa se comunicar com a instância do Cloud Spanner.

No Cloud Shell, insira o comando a seguir para invocar o editor de texto Nano e criar um novo arquivo .env.

nano .env

Cole o bloco de código listado abaixo.

PROJECTID = {{{project_0.project_id|Project ID}}} INSTANCE = omegatrade-instance DATABASE = omegatrade-db JWT_KEY = w54p3Y?4dj%8Xqa2jjVC84narhe5Pk EXPIRE_IN = 30d

Pressione Ctrl+X para sair do Nano, Y para confirmar a atualização e Enter para salvar as alterações.

3. Antes de continuar, é preciso instalar os componentes atualizados do npm para compilar corretamente o back-end. O npm é um gerenciador de pacotes para JavaScript. Ele é o gerenciador de pacotes padrão do ambiente de execução JavaScript Node.js.

nvm install 22.6 npm install npm -g npm install --loglevel=error

4. Em seguida, crie o aplicativo de back-end usando um Dockerfile de referência que existe na pasta do repositório.

docker build -t gcr.io/{{{project_0.project_id|Project ID}}}/omega-trade/backend:v1 -f dockerfile.prod . Observação: ignore as mensagens npm notice... que aparecem durante o processo de compilação.

5. Antes de enviar o novo pacote de aplicativos, execute o seguinte comando para definir as permissões de configuração no Cloud Shell.

Digite "y" quando perguntado se você quer continuar.

gcloud auth configure-docker

6. Envie o pacote de aplicativos recém-criado para o repositório de contêineres do seu projeto do Qwiklabs.

docker push gcr.io/{{{project_0.project_id|Project ID}}}/omega-trade/backend:v1

7. Por fim, implante o aplicativo de back-end usando o Cloud Run. O Cloud Run é um framework de implantação sem servidor que abstrai o gerenciamento de infraestrutura e aumenta ou diminui a escala de forma automática quase instantaneamente, dependendo do tráfego.

gcloud run deploy omegatrade-backend --platform managed --region {{{project_0.default_region|Default Region}}} --image gcr.io/{{{project_0.project_id|Project ID}}}/omega-trade/backend:v1 --memory 512Mi --allow-unauthenticated

8. Copie o URL fornecido no final da implantação. Salve o URL no bloco de notas, em um arquivo de texto ou em outro local de fácil acesso. Ele será fornecido ao aplicativo front-end para garantir que a interface do usuário possa se comunicar corretamente com o banco de dados do Cloud Spanner pelo back-end.

O URL do serviço de back-end vai aparecer no seguinte formato:

https://omegatrade-backend-zzzyyyxx1x-uw.a.run.app

Tarefa 4: importar exemplos de dados de negociação de ações para o banco de dados.

1. Para importar exemplos de dados de empresas e ações, execute o seguinte comando na pasta atual (back-end principal).

unset SPANNER_EMULATOR_HOST node seed-data.js

2. Você vai receber uma confirmação de que as tabelas foram carregadas.

Inserting Companies... done Inserting Simulations... done Inserting Stocks... done Data Loaded successfully

3. Clique em Verificar meu progresso para conferir o objetivo.

Importar exemplos de dados de negociação de ações para o banco de dados

Tarefa 5: criar e implantar o componente de front-end

1. Navegue até o diretório que contém o código do front-end. Navegue até a pasta "environments" para atualizar o arquivo de configuração para apontar para o componente de back-end.

cd ../frontend/src/environments

2. No Cloud Shell, insira o comando a seguir para invocar o editor de texto Nano e abrir o arquivo environment.ts.

nano environment.ts

3. Exclua com cuidado a string http://localhost:3000 e substitua-a pelo URL do back-end.

Observação: mantenha a parte /api/v1/ do URL

Pressione Ctrl+X para sair do Nano, Y para confirmar a atualização e Enter para salvar as alterações.

Seu arquivo environment.ts atualizado deve se parecer com o exemplo abaixo.

export const environment = { production: false, name: "dev", // change baseUrl according to backend URL baseUrl:"https://omegatrade-backend-zzzyyyxx1x-uw.a.run.app/api/v1/", // change clientId to actual value you have received from Oauth console clientId: "" };

4. Navegue até a pasta principal do front-end.

cd ../..

5. Instale os componentes atualizados do npm para compilar corretamente o front-end.

npm install npm -g npm install --loglevel=error Observação: ignore qualquer mensagem npm WARN config... que apareça durante o processo de instalação

6. Em seguida, crie o aplicativo de front-end usando um Dockerfile de referência que existe na pasta do repositório. A compilação do front-end pode levar de 5 a 10 minutos.

docker build -t gcr.io/{{{project_0.project_id|Project ID}}}/omegatrade/frontend:v1 -f dockerfile . Observação: ignore as mensagens npm notice... que aparecem durante o processo de compilação.

7. Envie o pacote de aplicativos recém-criado para o repositório de contêineres do seu projeto do Qwiklabs.

docker push gcr.io/{{{project_0.project_id|Project ID}}}/omegatrade/frontend:v1

8. Por fim, implante o aplicativo de front-end usando o Cloud Run.

gcloud run deploy omegatrade-frontend --platform managed --region {{{project_0.default_region|Default Region}}} --image gcr.io/{{{project_0.project_id|Project ID}}}/omegatrade/frontend:v1 --allow-unauthenticated

9. O URL do serviço de front-end vai aparecer no seguinte formato. Clique diretamente no URL para abrir ou copie e cole o URL em uma nova guia.

https://omegatrade-frontend-zzzyyyxx1x-uw.a.run.app

Tarefa 6: realizar operações no aplicativo OmegaTrade.

1. Na página de lançamento do aplicativo, clique no link inscrever-se.

2. Use os detalhes a seguir para criar uma nova conta para uma empresa fictícia chamada Spanner1.

Item	Valor
E-mail comercial	admin@spanner1.com
Nome completo	Spanner1 Admin
Senha	Spanner1
Confirme sua senha	Spanner1

3. Sua conta será criada e você fará login.

4. Para analisar o aplicativo OmegaTrade, acesse o Painel e escolha Foobar Inc no seletor para consultar o gráfico de desempenho das ações da empresa. Você vai encontrar uma variedade de preços de ações simulados ao longo do tempo para a Foobar Inc.

5. Acesse Gerenciar empresa e adicione Spanner1 como uma nova empresa.

6. Clique em Adicionar empresa no lado direito da página. Na janela pop-up, insira os seguintes valores:

Item	Valor
Nome da empresa	Spanner1
Código curto	SPN

Em seguida, clique em Salvar.

7. A Spanner1 agora está na lista de empresas.

8. Navegue até o Painel e selecione Spanner1 se ainda não estiver selecionado. Você vai perceber que não há simulação para Spanner1. Clique no link aqui para gerar uma simulação.

9. Em Simular dados, forneça os seguintes detalhes:

Item	Valor
Selecionar empresa	Spanner1
Selecionar intervalo	5
Número de registros	50

Em seguida, clique em Simular.

10. Navegue até o Painel, que vai atualizar imediatamente o gráfico de Spanner1 conforme a simulação avança. A simulação leva de 3 a 6 minutos.

11. O aplicativo OmegaTrade também permite modificar informações da empresa. Na guia Gerenciar empresa, clique no ícone de lápis em Ação para Acme Corp.

12. Atualize o nome da empresa para Coyote Inc. Observe que não é possível atualizar o Código curto na interface do usuário. Clique em Atualizar para fechar e aceitar a mudança.

13. A atualização do nome da empresa é imediata. Acesse o Painel e você vai perceber que a Acme Corp não aparece mais e a Coyote Inc assumiu o lugar dela.

14. Às vezes, são necessárias alterações nos dados que excedem as capacidades do código do aplicativo. Como usuário autorizado, você pode atualizar os dados usados no aplicativo OmegaTrade fazendo alterações diretamente no banco de dados do Cloud Spanner.

15. No console do Cloud, clique no Menu de navegação () > Exibir todos os produtos > Bancos de dados > Spanner.

16. Caso apareça alguma janela de confirmação ou informação extra, aceite para continuar.

17. Clique no nome omegatrade-instance e depois em omegatrade-db em Bancos de dados. Na lista de tabelas na parte de baixo da página, clique em companies.

18. Clique em Dados no painel à esquerda para exibir o índice.

19. Você vai atualizar o nome da entidade Bar Industries.

20. Clique na caixa de seleção da linha Bar Industries. Em seguida, clique em Editar nas opções listadas acima das linhas da tabela.

21. Isso direciona você para o Spanner Studio. Clique em + Nova guia. Insira a consulta a seguir para atualizar o valor de companyName de Bar Industries para Consolidated Enterprises Inc.

UPDATE companies SET companyName='Consolidated Enterprises Inc' WHERE companyName='Bar Industries'; Observação: na janela de consulta do Cloud Spanner, você pode mudar o valor de Código curto. O código do aplicativo, conforme criado, não permite atualizar esse valor pela interface do usuário.

22. Clique em Executar para processar a atualização.

23. Volte para a página do aplicativo, atualize o navegador e navegue até a guia Painel. Você vai notar que a Bar Industries não aparece mais e a Consolidated Enterprises Inc assumiu o lugar dela.

Parabéns!

Você implantou um aplicativo Node.js conectado a uma instância do Cloud Spanner e realizou operações básicas no banco de dados usando o aplicativo, além de editar dados diretamente no banco de dados.

Treinamento e certificação do Google Cloud

Esses treinamentos ajudam você a aproveitar as tecnologias do Google Cloud ao máximo. Nossas aulas incluem habilidades técnicas e práticas recomendadas para ajudar você a alcançar rapidamente o nível esperado e continuar sua jornada de aprendizado. Oferecemos treinamentos que vão do nível básico ao avançado, com opções de aulas virtuais, sob demanda e por meio de transmissões ao vivo para que você possa encaixá-las na correria do seu dia a dia. As certificações validam sua experiência e comprovam suas habilidades com as tecnologias do Google Cloud.

Manual atualizado em 12 de maio de 2025

Laboratório testado em 12 de maio de 2025

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