GSP1051

Overview

Cloud Spanner is Google’s fully managed, horizontally scalable relational database service. Customers in financial services, gaming, retail and many other industries trust it to run their most demanding workloads, where consistency and availability at scale are critical.

In this lab you build and deploy a Node.js application connected to a Cloud Spanner instance. The Node.js application is a stock price visualization tool named OmegaTrade. The OmegaTrade application stores stock prices in Cloud Spanner and renders visualizations using Google Charts.

The backend service uses the Node.js Express framework and connects to Cloud Spanner with default connection pooling, session, and timeout capabilities.

Objectives

In this lab, you will deploy a Modern Web App connected to a Cloud Spanner instance.

• Configure the Project Environment
• Download and inspect the application code
• Deploy Backend application component
• Import sample stock trade data to the database
• Deploy Frontend application component
• Perform operations in the OmegaTrade Application

Setup and requirements

Before you click the Start Lab button

Read these instructions. Labs are timed and you cannot pause them. The timer, which starts when you click Start Lab, shows how long Google Cloud resources will be made available to you.

This hands-on lab lets you do the lab activities yourself in a real cloud environment, not in a simulation or demo environment. It does so by giving you new, temporary credentials that you use to sign in and access Google Cloud for the duration of the lab.

To complete this lab, you need:

• Access to a standard internet browser (Chrome browser recommended).

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

• Time to complete the lab---remember, once you start, you cannot pause a lab.

Note: If you already have your own personal Google Cloud account or project, do not use it for this lab to avoid extra charges to your account.

How to start your lab and sign in to the Google Cloud console

1. Click the Start Lab button. If you need to pay for the lab, a pop-up opens for you to select your payment method. On the left is the Lab Details panel with the following:

   • The Open Google Cloud console button
   • Time remaining
   • The temporary credentials that you must use for this lab
   • Other information, if needed, to step through this lab

2. Click Open Google Cloud console (or right-click and select Open Link in Incognito Window if you are running the Chrome browser).

   The lab spins up resources, and then opens another tab that shows the Sign in page.

   Tip: Arrange the tabs in separate windows, side-by-side.

   Note: If you see the Choose an account dialog, click Use Another Account.

3. If necessary, copy the Username below and paste it into the Sign in dialog.

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

   You can also find the Username in the Lab Details panel.

4. Click Next.

5. Copy the Password below and paste it into the Welcome dialog.

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

   You can also find the Password in the Lab Details panel.

6. Click Next.

   Important: You must use the credentials the lab provides you. Do not use your Google Cloud account credentials. Note: Using your own Google Cloud account for this lab may incur extra charges.

7. Click through the subsequent pages:

   • Accept the terms and conditions.
   • Do not add recovery options or two-factor authentication (because this is a temporary account).
   • Do not sign up for free trials.

After a few moments, the Google Cloud console opens in this tab.

Note: To view a menu with a list of Google Cloud products and services, click the Navigation menu at the top-left.

Activate Cloud Shell

Cloud Shell is a virtual machine that is loaded with development tools. It offers a persistent 5GB home directory and runs on the Google Cloud. Cloud Shell provides command-line access to your Google Cloud resources.

1. Click Activate Cloud Shell at the top of the Google Cloud console.

When you are connected, you are already authenticated, and the project is set to your Project_ID, . The output contains a line that declares the Project_ID for this session:

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

gcloud is the command-line tool for Google Cloud. It comes pre-installed on Cloud Shell and supports tab-completion.

2. (Optional) You can list the active account name with this command:

gcloud auth list

3. Click Authorize.

Output:

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

4. (Optional) You can list the project ID with this command:

gcloud config list project

Output:

[core] project = {{{project_0.project_id | "PROJECT_ID"}}} Note: For full documentation of gcloud, in Google Cloud, refer to the gcloud CLI overview guide.

Cloud Spanner instance

In order to allow you to move more quickly through this lab the Cloud Spanner instance, database, and tables required for the OmegaTrade application were automatically created for you.

Here are some details for your reference:

Item	Name	Details
Cloud Spanner Instance	omegatrade-instance	This is the project-level instance
Cloud Spanner Database	omegatrade-db	This is the instance specific database
Table	Users	Contains user acccounts
Table	Companies	Contains company name and stock symbol
Table	CompanyStocks	Contains stock values
Table	Simulations	Tracks the state of each simulation

Task 1. Enable required Google Cloud APIs

First enable the Google Cloud APIs for Cloud Spanner, Container Registry, and Cloud Run.

1. In the Cloud Shell enter the following commands:

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

Task 2. Download and inspect the application code

1. Download the code repository for use in this lab. In the Cloud Shell enter the following:

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

2. Navigate to the folder containing the application code.

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

3. The code is divided primarily into two parts, backend and frontend. The application architecture is depicted in the diagram below:

4. The application relies on a deployment-specific file named .env to successfuly communicate with the Cloud Spanner instance. You will create this file in the next task.

5. With respect to the backend, some of the bindings and interactions with the Cloud Spanner tables are managed by Node.js models - three of these company.model.js, simulation.model.js, and user.model.js - reside in the models folder. Issue the following command to navigate to the models folder:

cd backend/app/models

6. Issue the following command to inspect the company.model.js file. This file contains database operations to interact with the companies table.

more company.model.js

Press the spacebar to advance through the file until its end. If you wish to close the file early, type q to close the more command.

7. Some of the frontend interactions with these models and other structures in the Node.js backend occur through Angular components located in the components folder. Issue the following command to navigate to the components folder:

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

8. For instance, the company component contains the base application code to manage and update company information.

9. Issue the following command to inspect the manage-company.component.ts TypeScript configuration file. This file contains methods for deleting or editing a company, among other actions.

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

Press the spacebar to advance through the file until its end. If you wish to close the file early, type q to close the more command.

Task 3. Build and deploy the backend component

1. Navigate to the folder containing the code required to build and deploy the backend.

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

2. Create the .env file. As mentioned earlier, this file contains project specific infromation so that the application's backend component can communicate with the Cloud Spanner instance.

In the cloud shell enter the following command to invoke the Nano text editor and create a new .env file.

nano .env

Paste the code block listed below.

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

Press Ctrl+X to exit Nano, Y to confirm the update, and press Enter to save your changes.

3. Before you proceed further you must install updated components for npm so that the backend can be properly compiled. npm is a package manager for JavaScript. npm is the default package manager for the JavaScript runtime environment Node.js.

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

4. Next build the backend application using a reference dockerfile that exists in the repository folder.

docker build -t gcr.io/{{{project_0.project_id|Project ID}}}/omega-trade/backend:v1 -f dockerfile.prod . Note: You may safely ignore any npm notice... messages that appear during the build process

5. Prior to pushing the new application package, run the following command to set configuration permissions in the Cloud Shell.

Enter 'y' when prompted if you want to continue.

gcloud auth configure-docker

6. Push the newly created application package to the Container Repository for your Qwiklabs project.

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

7. Finally deploy the backend application using Cloud Run. Cloud Run is a serverless deployment framework which abstracts away infrastructure management and scales up or down automatically almost instantaneously depending on traffic.

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. Copy the URL provided at the end of the deployment. Preserve the URL in notepad, a text file, or other readily accessible location. This URL will be supplied to the frontend application to ensure the user interface can properly communicate with the Cloud Spanner database via the backend.

The backend Service URL will appear in the following format:

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

Task 4. Import sample stock trade data to the database

1. To import sample company and stock data, run the following command in the current (main backend) folder.

unset SPANNER_EMULATOR_HOST node seed-data.js

2. You will receive confirmation that the tables were loaded succesfully.

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

3. Click Check my progress to verify the objective.

Import sample stock trade data to the database

Task 5. Build and deploy the frontend component

1. Navigate to the directory containing the frontend code. Specifically navigate to the environments folder to update the configuration file to point to your backend component.

cd ../frontend/src/environments

2. In the cloud shell enter the following command to invoke the Nano text editor and open the environment.ts file.

nano environment.ts

3. Carefully delete the string http://localhost:3000 and replace it with your backend URL.

Note: Be certain to retain the /api/v1/ portion of the URL

Press Ctrl+X to exit Nano, Y to confirm the update, and press Enter to save your changes.

Your updated environment.ts file should apppear like the example below.

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. Navigate to the main frontend folder.

cd ../..

5. Install updated components for npm so that the frontend can be properly compiled.

npm install npm -g npm install --loglevel=error Note: You may safely ignore any npm WARN config... messages that appear during the installation process

6. Next build the frontend application using a reference dockerfile that exists in the repository folder. The frontend build may take 5 to 10 minutes to complete.

docker build -t gcr.io/{{{project_0.project_id|Project ID}}}/omegatrade/frontend:v1 -f dockerfile . Note: You may safely ignore any npm notice... messages that appear during the build process

7. Push the newly created application package to the Container Repository for your Qwiklabs project.

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

8. Finally deploy the frontend application using 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. The frontend Service URL will appear in the following format. You may click the URL directly to open it or copy the URL and paste it into a new tab.

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

Task 6. Perform operations in the OmegaTrade Application

1. On the application launch page click the sign up link.

2. Use the following details to create a new account for a ficitious company named Spanner1.

Item	Value
Business email	admin@spanner1.com
Full Name	Spanner1 Admin
Password	Spanner1
Confirm your Password	Spanner1

3. Your account will be created and you will be logged in.

4. To examine the OmegaTrade application, navigate to the Dashboard and choose Foobar Inc from the selector to see the stock performance chart for Foobar Inc. You will see a range of simulated stock prices over time for Foobar Inc.

5. Navigate to Manage Company and add Spanner1 as a new company.

6. Click Add Company on the right side of the page. On the pop-up window, input the following values:

Item	Value
Company Name	Spanner1
Short Code	SPN

Then click Save.

7. Spanner1 is now in the list of companies.

8. Navigate to the Dashboard and select Spanner1 if it is not already selected. You will see that no simulation exists for Spanner1. Click the link entitled here to generate a simiulation.

9. Under Simulate Data, provide the following details:

Item	Value
Select Company	Spanner1
Select Interval	5
Number of Records	50

Then click Simulate.

10. Navigate to the Dashboard which will immediately update the chart for Spanner1 as the simulation progresses. It will take between 3 and 6 minutes for the simulation to complete.

11. The OmegaTrade application also allows you to modify existing company information. On the Manage Company tab click the pencil icon under Action for Acme Corp.

12. Update the company name to Coyote Inc. Notice that the Short Code cannot be updated in the user interface. Click Update to close and accept the change.

13. The update to the company name is immediate. Navigate to the Dashboard and you will see that Acme Corp no longer apppears and Coyote Inc has taken its place.

14. Occasionally data changes are required that exceed the capabilites of the application code. As an empowered user you have the ability to update data used in the OmegaTrade application by making direct changes in the Cloud Spanner database.

15. On the Cloud Console Navigation menu (), under Databases click Spanner.

16. Accept any acknowledgement or information window that may appear.

17. Click on the omegatrade-instance name and then omegatrade-db under Databases. From the list of tables on the bottom of the page, click companies.

18. Click Data on the left side pane to see the table contents.

19. You will update the name of the Bar Industries entity.

20. Click on the checkbox for the Bar Industries row. Then click Edit from the choices listed above the table rows.

21. You are taken to the Spanner Studio. Click on + New SQL Editor Tab. Enter the following query to update the value for companyName from Bar Industries to Consolidated Enterprises Inc.

UPDATE companies SET companyName='Consolidated Enterprises Inc' WHERE companyName='Bar Industries'; Note: In the Cloud Spanner query window you have the abllity to change the Short Code value. The application code as designed does not allow this value to updated via the user interface.

22. Click Run to process the update.

23. Return to the application page, refresh your browser, and navigate to Dashboard tab. You will see that Bar Industries no longer apppears and Consolidated Enterprises Inc has taken its place.

Congratulations!

You have now deployed a Node.js application connected to a Cloud Spanner instance and performed basic operations against the database using the application as well as editing data directly in the database.

Finish your quest

This self-paced lab is part of the Create and Manage Cloud Spanner Databases quest. A quest is a series of related labs that form a learning path. Completing this quest earns you a badge to recognize your achievement. You can make your badge (or badges) public and link to them in your online resume or social media account. Enroll in this quest and get immediate completion credit if you have successfully completed this lab. Search for other available quests in the Cloud Skills Boost catalog.

Manual Last Updated September 20, 2023

Lab Last Tested September 20, 2023

Copyright 2024 Google LLC All rights reserved. Google and the Google logo are trademarks of Google LLC. All other company and product names may be trademarks of the respective companies with which they are associated.