
Before you begin
- Labs create a Google Cloud project and resources for a fixed time
- Labs have a time limit and no pause feature. If you end the lab, you'll have to restart from the beginning.
- On the top left of your screen, click Start lab to begin
Setup the Cymbal Superstore
/ 25
Add newProducts endpoint to backend
/ 25
Extract to new microservice using Cloud Functions
/ 50
Gemini is an AI-powered collaborator helping development teams build, deploy, and operate applications faster and more efficiently.
Here we will show how Gemini for Developers can be used to assist in writing new code segments, extracting code for microservice 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.
Lab Premise: You have recently joined a team that has developed an online shopping website called Cymbal Superstore. It is operational and you have been tasked with implementing some upgrades. 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 and looks like this:
For this lab, you have been given the requirements from the business analyst on the team. Based on the knowledge gained previously you will add the necessary code for the new service, newproducts. After confirming the new endpoint works, you will extract it into a separate microservice implemented in cloud functions.
In this lab, you learn how to utilize Gemini in the following ways:.
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:
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:
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.
If necessary, copy the Username below and paste it into the Sign in dialog.
You can also find the Username in the Lab Details pane.
Click Next.
Copy the Password below and paste it into the Welcome dialog.
You can also find the Password in the Lab Details pane.
Click Next.
Click through the subsequent pages:
After a few moments, the Google Cloud console opens in this tab.
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.
Click Activate Cloud Shell at the top of the Google Cloud console.
Click through the following windows:
When you are connected, you are already authenticated, and the project is set to your Project_ID,
gcloud
is the command-line tool for Google Cloud. It comes pre-installed on Cloud Shell and supports tab-completion.
Output:
Output:
gcloud
, in Google Cloud, refer to the gcloud CLI overview guide.
Certain Compute Engine resources live in regions or zones. A region is a specific geographical location where you can run your resources. Each region has one or more zones. For example, the us-central1 region denotes a region in the Central United States that has zones us-central1-a
, us-central1-b
, us-central1-c
, and us-central1-f
.
Regions | Zones |
---|---|
Western US | us-west1-a, us-west1-b |
Central US | us-central1-a, us-central1-b, us-central1-d, us-central1-f |
Eastern US | us-east1-b, us-east1-c, us-east1-d |
Western Europe | europe-west1-b, europe-west1-c, europe-west1-d |
Eastern Asia | asia-east1-a, asia-east1-b, asia-east1-c |
Resources that live in a zone are referred to as zonal resources. Virtual machine Instances and persistent disks live in a zone. To attach a persistent disk to a virtual machine instance, both resources must be in the same zone. Similarly, if you want to assign a static IP address to an instance, the instance must be in the same region as the static IP.
This lab uses the "Cymbal Superstore" grocery web app. In subsequent tasks of this lab, you use Gemini to develop and deploy a new feature in this app. In this task, you build the frontend and backend components of this app.
Execute the commands in this and the next two subtasks in the terminal shell.
In Cloud Shell, run the following command to set the necessary environment variables.
To run the Docker credential helper, run the following command. When asked if you want to continue, type Y.
Enable the Cloud AI Companion API:
To use Gemini, grant the necessary IAM roles to your Google Cloud Qwiklabs user account:
Adding these roles lets the user use Gemini assistance.
To download the cymbal-superstore
application code, run the following command:
The web app backend implements an inventory API that is used by the frontend to fetch and update products.
To build the backend container image, in the cloud terminal, run the following commands:
To push the built backend image to the Cloud Repository, run the following command:
To deploy the backend as a service on Cloud Run, run the following command. Allow unauthenticated invocations to inventory by pressing the button Y
.
Output:
Check the new endpoint by browsing to the Cloud Run URL to call the endpoint.
In a browser tab, execute Cloud Run Service URL (from above):
Example: https://inventory-bacbqreknq-uk.a.run.app
Output:
To the base URL add the endpoint path /products
.
Example: https://inventory-bacbqreknq-uk.a.run.app/products
Example Output:
/newproducts
- This will display an error since the newproducts endpoint has not been written.Example: https://inventory-bacbqreknq-uk.a.run.app/newproducts
Output:
frontend
folder:cymbal-url-map
and note down the IP under Frontend.Open a new browser tab and enter the IP noted down earlier. Click on New Arrivals!
link on the homepage.
Verify it is dummy data (indicated by no photos and Test Products data)
Click Check my progress to verify the objective.
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.
The selected folder should now be visible in the Explorer section of the Visual Studio Code editor.
Investigate the code written in index.ts file under the backend
folder.
At the top right of the file, click the arrow next to Gemini .
Click on Select Gemini Code Assist Project, to select the project to use for Gemini. From the list, select
In the index.ts
code file, scroll to line 102 where you see the placeholder comment for the /newproducts
endpoint.
Replace the placeholder comment: // /newproducts endpoint
goes here with the following prompt:
Select the newly added comment, and click on the yellow light bulb icon that appears. From the list, click on the following option: Gemini: Generate code
.
Gemini displays some suggested code. Look at the suggested code and accept it by clicking Accept or pressing Tab key.
If asked: Allow unauthenticated invocations to [inventory] (y/N)? Enter Y.
Output:
Make note of the Cloud Run Service URL that was created (different from above).
Example: https://inventory-bacbqreknq-uk.a.run.app
Output:
/products
.Output:
This shows the JSON Data of all the store’s products
/newproducts
.Output:
This now works and you should see a JSON list that is smaller than the products list.
If you get a "System unavailable" message, or unexpected results, when you call the new /newproducts route, click the button below for a hint.
Demonstrate the code works with the frontend Web Site.
Navigate to frontend
folder:
.env.production
or env.production
is available. To ensure which file is available run the below command:.env.production
or env.production
with the URL to reference the Cloud Run URL. Replace the comment YOUR_ENDPOINT_URL_HERE
with the Service URL. Do not forget to exclude the /newproducts path.Example:
frontend
folder:cymbal-url-map
and note down the IP under Frontend.New Arrivals!
link on the homepage and see the Test Products
are no longer displayed or quickly replaced.Click Check my progress to verify the objective.
Now lets see if we can deploy this new function.
Open the functions/index.js
file. Select the code by Pressing Ctrl + A or Cmd+A. Click on the light bulb and click on Gemini: Explain this
. The Gemini Chat window will open with the result.
In the Gemini Chat, enter the following prompt.
To see how Gemini works relative to context, rerun the prompt under these other 2 scenarios.
1. Close all file windows and reset Gemini’s Chat by clicking on the New Chat icon (+) above the chat - the prompt result will be very generic.
2. Open the package.json file - the prompt result will be specific, but might not show the http trigger option. This is because the package.json doesn’t refer to http. The original result showed a command with the –trigger-http because Gemini saw that the endpoint was an http function.
Then run the command Gemini gave you.
The function was created!
Example url: https://us-central1-qwiklabs-gcp-01-457d0634df06.cloudfunctions.net/newproducts
Show that it works by executing the cloud function with the /newproducts path to verify the JSON data is returned as expected.
From the function deploy response, copy the URL.
Output:
You will see this is the same few JSON records that you saw earlier. Time to integrate it into the front end API
frontend/env.production
or frontend/.env.production
file to update the URL with the URL of the Cloud Function just created. Replace the Cloud Run URL with the new Cloud Function URL. Do not forget to exclude the /newproducts
path.Example:
Click Check my progress to verify the objective.
Congratulations! Using Gemini’s assistance, you have successfully created a new endpoint for the cymbal superstore, and deployed it as a separate microservice in Cloud Functions.
Manual Last Updated July 25, 2025
Lab Last Tested July 25, 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.
This content is not currently available
We will notify you via email when it becomes available
Great!
We will contact you via email if it becomes available
One lab at a time
Confirm to end all existing labs and start this one