GSP1328

Overview

Gemini is an AI-powered collaborator helping development teams build, deploy, and operate applications faster and more efficiently.

In this lab, you will learn how Gemini for Developers can be used to assist in writing new code segments, extracting code for micro service decomposition, and building an API Gateway as part of the Cymbal Superstore project.

The labs in this course covers a typical software development life cycle (SDLC) from the application developers point of view. Other aspects of the SDLC (requirements, security, monitoring, etc.) will be covered in other courses.

Objectives

This lab focuses on to utilize Gemini for Developers in the following ways:

• Use Gemini Chat to guide you through the steps needed to deploy an API Gateway service.

What you'll learn

Cymbal Superstore is a thriving online shopping platform seeking continuous improvements to stay competitive in the market. As part of the ongoing development efforts, a new feature named 'New Products' is designed, allowing users to easily discover the latest additions to the store's inventory.

In this lab, we will be implementing this new feature - Specifically adding a new endpoint service called 'New Products'. All of the existing code will be provided as part of the lab setup, as well as any infrastructure services needed for the lab. The code will be in a folder called 'cymbal-superstore'.

Therefore, in this lab, you will create a new service and deploy it to a Cloud Function called newproducts. Additionally, you will create a public-facing API using API Gateway to expose the service to the website.

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 are made available to you.

This hands-on lab lets you do the lab activities in a real cloud environment, not in a simulation or demo environment. It does so by giving you new, temporary credentials 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 (recommended) or private browser window to run this lab. This prevents 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: Use only the student account for this lab. If you use a different Google Cloud account, you may incur charges to that 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 dialog opens for you to select your payment method. On the left is the Lab Details pane 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 pane.

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

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 access Google Cloud products and services, click the Navigation menu or type the service or product name in the Search field.

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.

2. Click through the following windows:

   • Continue through the Cloud Shell information window.
   • Authorize Cloud Shell to use your credentials to make Google Cloud API calls.

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.

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

gcloud auth list

4. Click Authorize.

Output:

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

5. (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.

Task 1. Investigate the Code and Deploy the Cloud Function

Set environment variables

1. In Cloud Shell, run the following command to set the necessary environment variables.

export PROJECT_ID=$(gcloud config get-value project) export REGION={{{project_0.default_region|Lab Region}}} export ZONE={{{project_0.startup_script.lab_zone|Lab Zone}}}

2. Copy necessary files to Cloud Shell from the Cloud Storage bucket.

gsutil -m cp -r gs://duet-appdev/cymbal-superstore .

Investigate the code

Along with Gemini’s ability to explain code segments you are not familiar with, it can also create comments for you to add to your code to increase understanding during future maintenance cycles.

3. Open the editor by clicking the Open Editor option visible at the top right of the Cloud Shell window.

This will open the Visual Studio Code editor. You can view the editor in a new window using the option present on the menu bar of the Cloud Shell.

4. Click on Menu on the left, and navigate to File > Open Folder....

5. Select the cymbal-superstore directory, and click OK.

The selected folder should now be visible in the Explorer section of the Visual Studio Code editor.

6. Investigate the code written in index.js file under the functions folder.

7. At the top right of the file, click the arrow next to Gemini .

8. Click on Select Gemini Code Assist Project, to select the project to use for Gemini. From the list, select project.

9. Highlight the entire code block using Ctrl+A or Cmd+A, and press the Yellow or Blue light bulb to display the Gemini assist options and then select Gemini: Explain this. This opens a GEMINI: CHAT panel and will explain the whole code in the chat.

Output:

10. If a general answer is supplied, then type Explain in more detail in the chat prompt.

Output:

Deploy the Cloud Function

Let's now deploy the Cloud Function.

11. Switch back to the Cloud Shell terminal using the Open Terminal button present on the tool bar of the Cloud Shell window. In the Cloud Shell terminal, run the below command to create a Cloud Function named newproducts.

cd ~/cymbal-superstore/functions gcloud functions deploy newproducts --runtime nodejs20 --trigger-http --allow-unauthenticated --region $REGION Note: If the cloud function creation fails due to missing permissions, rerun the above command.

Output:

Note: The function's URL is displayed in the terminal or you can find it by navigating to Cloud Functions dashboard in the Google Cloud console. The URL of the function you just deployed should be:

Click Check my progress to verify the objective. Investigate the Code and Deploy the Cloud Function

12. Test the new function by navigating to the URL from a new browser tab, and verify that JSON data is returned as expected.

Output:

Task 2. Create a Middleware API

To separate and safeguard our backend service from a public website, we ideally employ an API proxy. We can accomplish this in Google Cloud using Apigee, Endpoints. In our case, let's use API Gateway service.

1. In Cloud Shell, set environment variables used for the API Gateway

export CONFIG_ID=newproducts-api-config export API_ID=newproducts-api export GATEWAY_ID=store export OPENAPI_SPEC=newproducts.yaml

2. Let's create a new file named newproducts.yaml.

cd ~/cymbal-superstore/gateway touch newproducts.yaml

3. Let's ask Gemini for some assistance for creating the OpenAPI spec. Switch back to the editor using the Open Editor option on the tool bar of the Cloud Shell window.

4. Open the functions folder and select the index.js file in the editor. Start a new chat by clicking on plus (+) icon and enter the following prompt.

{{{project_0.startup_script.prompt_1 | "Prompt and Cloud Function URL"}}}

Output:

5. You can use the generated code and paste it into the newproducts.yaml file under gateway folder, and make necessary edits, if necessary, or use the following code.

The file should look similar to this:

swagger: "2.0" info: title: "newproducts" description: "A Cloud Function that returns a list of products from Firestore." version: "1.0.0" host: "{{{project_0.default_region|Lab Default Region}}}-{{{project_0.project_id | PROJECT_ID}}}.cloudfunctions.net" schemes: - "https" paths: /newproducts: get: summary: "Get a list of products from Firestore." operationId: "newproducts" produces: - "application/json" responses: "200": description: "A list of products." schema: type: "array" items: type: "object" properties: id: type: "string" name: type: "string" price: type: "number" quantity: type: "integer" imgfile: type: "string" timestamp: type: "string" actualdateadded: type: "string" Hint: Alternatively you can open gateway/newproducts.yaml file and use the (+) to copy the response into the blank file.

Click Check my progress to verify the objective. Create a Middleware API

Task 3. Create the API Gateway service

1. Switch back to the Cloud Shell terminal using the Open Terminal button the tool bar of the Cloud Shell window, and enable the API gateway service using the following command.

gcloud services enable apigateway.googleapis.com

2. Ask Gemini for the steps creating the API Gateway. Enter the following prompt in the chat.

{{{project_0.startup_script.prompt_2 | "Prompt2"}}} Note: You may get a variety of responses. Sometimes Gemini responds with an overview and you need to ask for more details. Other times the answer may use generic names so you need to adjust accordingly.

3. In the Cloud Shell terminal, create an API in Google Cloud API Gateway service using the OpenAPI Specification.

cd ~/cymbal-superstore gcloud api-gateway apis create $API_ID

Output:

Note: This step takes around 2 to 3 minutes to complete.

4. Create a new API configuration in Google Cloud API Gateway.

cd ~/cymbal-superstore/gateway gcloud api-gateway api-configs create $CONFIG_ID \ --api=$API_ID --openapi-spec=$OPENAPI_SPEC

This command fails with the following error.

Output:

Waiting for API Config [newproducts-api-config] to be created for API [newproducts-api]...failed. ERROR: (gcloud.api-gateway.api-configs.create) API Config has a backend with no address. If using OpenAPI, each 'x-google-backend' extension requires the 'address' field to be set. See https://cloud.google.com/endpoints/docs/openapi/openapi-extensions#x-google-backend for more info. Note: Refer this document to gain some insight.

5. To remediate the above error, add the following code in the newproducts.yaml file.

x-google-backend: address: https://{{{project_0.default_region|Lab Default Region}}}-{{{ project_0.project_id | Project Name}}}.cloudfunctions.net/newproducts

The newproducts.yaml file should finally look like the following:

swagger: "2.0" info: title: "newproducts" description: "A Cloud Function that returns a list of products from Firestore." version: "1.0.0" host: "{{{project_0.default_region|Lab Default Region}}}-{{{project_0.project_id | PROJECT_ID}}}.cloudfunctions.net" schemes: - "https" paths: /newproducts: get: summary: "Get a list of products from Firestore." operationId: "newproducts" x-google-backend: address: https://{{{project_0.default_region|Lab Default Region}}}-{{{project_0.project_id | PROJECT_ID}}}.cloudfunctions.net/newproducts produces: - "application/json" responses: "200": description: "A list of products." schema: type: "array" items: type: "object" properties: id: type: "string" name: type: "string" price: type: "number" quantity: type: "integer" imgfile: type: "string" timestamp: type: "string" actualdateadded: type: "string"

6. Now, try creating the API configuration again.

gcloud api-gateway api-configs create $CONFIG_ID \ --api=$API_ID --openapi-spec=$OPENAPI_SPEC Note: This step takes around 3 minutes to complete.

Output:

7. Finally, create the gateway based on the configuration file.

gcloud api-gateway gateways create $GATEWAY_ID \ --api=$API_ID --api-config=$CONFIG_ID \ --location=$REGION --project=$PROJECT_ID Note: This step takes around 4 to 5 minutes to complete.

Output:

8. Verify the gateway was created and deployed.

Click Check my progress to verify the objective. Create the API Gateway service

gcloud api-gateway gateways describe $GATEWAY_ID \ --location=$REGION --project=$PROJECT_ID

Output:

Note down the defaultHostname value from the output, that should be similar to this: store-2srcbsle.uc.gateway.dev. You will require this in the later stages of the lab.

9. From the browser, open the new tab and enter the defaultHostname noted down earlier and append /newproducts to it. The URL should look similar to this: https://store-2srcbsle.uc.gateway.dev/newproducts

Output:

You should see 10 JSON records as displayed in the output below.

Task 4. Update the Frontend Website

In this section, let's update the frontend to reflect the new GATEWAY_ID hostname.

1. In Cloud Shell Terminal, navigate to frontend folder:

cd ~/cymbal-superstore/frontend

2. Verify that one of the files, .env.production or env.production is available. To ensure which file is available run the below command:

ls -all

3. Update the available file .env.production or env.production to update the URL to reference the API Gateway. Replace the comment YOUR_ENDPOINT_URL_HERE with gateway’s defaultHostname, noted down earlier. Do not forget to exclude the /newproducts path.

4. Switch back to the Cloud Shell terminal and rebuild the frontend.

cd ~/cymbal-superstore/frontend npm install && npm run build

Output:

5. Upload all files and directories from the build directory to a Google Cloud Storage bucket.

gcloud storage cp -r build/* gs://${PROJECT_ID}-cymbal-frontend --cache-control=no-cache,no-store,max-age=0

Click Check my progress to verify the objective. Update the Frontend Website

6. Use the website’s External IP address to display the Cymbal Superstore home page. Using Navigation menu (), navigate to View All Products > Networking > Network services > Load Balancing. Click on cymbal-url-mapand note down the IP under Frontend.

7. Open a new browser tab and enter the IP noted down earlier. Click on New Arrivals! link on the homepage.

You will be then be redirected to the new page, with the 10 products. The 10 products shown confirm the backend has properly fetched the new products from the database.

Congratulations!

You have successfully established an API Gateway to act as a security proxy between a public website and the backend service with Gemini's assistance.

Manual Last Updated June 24, 2025

Lab Last Tested June 24, 2025

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