arrow_back

Code Generation with Gemini

Sign in Join
Get access to 700+ labs and courses

Code Generation with Gemini

Lab 1 hour 15 minutes universal_currency_alt 5 Credits show_chart Intermediate
info This lab may incorporate AI tools to support your learning.
Get access to 700+ labs and courses

GSP1329

Overview

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.

Objectives

In this lab, you learn how to utilize Gemini in the following ways:.

  1. Create effective code generation prompts using natural language descriptions.
  2. Use in-line comments to generate and modify code.

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.

  1. (Optional) You can list the active account name with this command:
gcloud auth list
  1. Click Authorize.

Output:

ACTIVE: * ACCOUNT: {{{user_0.username | "ACCOUNT"}}} To set the active account, run: $ gcloud config set account `ACCOUNT`
  1. (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.

Understanding Regions and Zones

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.

Learn more about regions and zones and see a complete list in the Compute Engine page, Regions and zones documentation).

Task 1. Setup the Cymbal Superstore

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.

Configure the environment

Execute the commands in this and the next two subtasks in the terminal shell.

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

    export PROJECT_ID=$(gcloud config get-value project) export USER=$(gcloud config get-value account) export REPO_NAME=store-repo export REGION={{{project_0.default_region| Lab Region}}} export ZONE={{{project_0.default_zone| Lab zone}}} export APP_NAME=inventory
  2. To run the Docker credential helper, run the following command. When asked if you want to continue, type Y.

    gcloud auth configure-docker
  3. Enable the Cloud AI Companion API:

    gcloud services enable cloudaicompanion.googleapis.com --project ${PROJECT_ID}
  4. To use Gemini, grant the necessary IAM roles to your Google Cloud Qwiklabs user account:

    gcloud projects add-iam-policy-binding ${PROJECT_ID} --member user:${USER} --role=roles/cloudaicompanion.user gcloud projects add-iam-policy-binding ${PROJECT_ID} --member user:${USER} --role=roles/serviceusage.serviceUsageViewer

Adding these roles lets the user use Gemini assistance.

  1. To download the cymbal-superstore application code, run the following command:

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

Build the backend

The web app backend implements an inventory API that is used by the frontend to fetch and update products.

  1. To build the backend container image, in the cloud terminal, run the following commands:

    cd ~/cymbal-superstore/backend docker build -t gcr.io/{{{project_0.project_id| PROJECT_ID}}}/cymbal-superstore-inventory-api:latest .
  2. To push the built backend image to the Cloud Repository, run the following command:

    docker push gcr.io/{{{project_0.project_id| PROJECT_ID}}}/cymbal-superstore-inventory-api:latest
  3. To deploy the backend as a service on Cloud Run, run the following command. Allow unauthenticated invocations to inventory by pressing the button Y.

    gcloud run deploy inventory --image=gcr.io/{{{project_0.project_id| PROJECT_ID}}}/cymbal-superstore-inventory-api --port=8000 --region={{{project_0.default_region| Lab Region}}}

Output:

Deploying container to Cloud Run service [inventory] in project [{{{project_0.project_id|PROJECT_ID}}}] region [{{{project_0.default_region| Lab Region}}}] OK Deploying... Done. OK Creating Revision... OK Routing traffic... Done. Service [inventory] revision [inventory-00002-n9z] has been deployed and is serving 100 percent of traffic. Service URL: https://inventory-bacbqreknq-uk.a.run.app
  1. Make note of the Cloud Run Service URL that was created (different from above).

Verify endpoint is working

  1. Check the new endpoint by browsing to the Cloud Run URL to call the endpoint.

  2. In a browser tab, execute Cloud Run Service URL (from above):

Example: https://inventory-bacbqreknq-uk.a.run.app

Output:

"🍎 Hello! This is the Cymbal Superstore Inventory API"

To the base URL add the endpoint path /products.

Example: https://inventory-bacbqreknq-uk.a.run.app/products

Example Output:

{"id":"01Jggpy8RcgXSZnsJ8gy","name":"Eggs","price":9,"quantity":227,"imgfile":"product-images/eggs.png","timestamp":{"_seconds":1704651168,"_nanoseconds":923000000},"actualdateadded":{"_seconds":1714468020,"_nanoseconds":203000000}},{"id":"0n0fnOTKQbR3W6eERmNY","name":"Peanut Butter and Jelly Cups","price":7,"quantity":8,"imgfile":"product-images/peanutbutterandjellycups.png","timestamp":{"_seconds":1713980240,"_nanoseconds":721000000},"actualdateadded":{"_seconds":1714468020,"_nanoseconds":213000000}},
  1. This shows the JSON Data of all the store’s products
  2. To the base URL add the endpoint path /newproducts - This will display an error since the newproducts endpoint has not been written.

Example: https://inventory-bacbqreknq-uk.a.run.app/newproducts

Output:

Cannot GET /newproducts

Build frontend website and verify site works

  1. Run the below command to navigate to the frontend folder:
cd ~/cymbal-superstore/frontend
  1. Now rebuild the front end by running these commands in a terminal window.
npm install npm audit fix --force export NODE_OPTIONS=--openssl-legacy-provider npm install react-scripts@5.0.1 --save-dev npm run build
  1. Upload it the Cloud Storage bucket.
gcloud storage cp -r build/* gs://{{{project_0.project_id| PROJECT_ID}}}-cymbal-frontend --cache-control=no-cache,no-store,max-age=0

Verify website is working

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


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

  2. Verify it is dummy data (indicated by no photos and Test Products data)

Click Check my progress to verify the objective.

Setup the Cymbal Superstore.

Task 2. Add newProducts endpoint to backend

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

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

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

  1. Investigate the code written in index.ts file under the backend folder.

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

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

  1. In the index.ts code file, scroll to line 102 where you see the placeholder comment for the /newproducts endpoint.

  2. Replace the placeholder comment: // /newproducts endpoint goes here with the following prompt:

// Create a new route called /newproducts that uses a where filter // to retrieve only products that were added within the last seven days.
  1. 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.

  2. Gemini displays some suggested code. Look at the suggested code and accept it by clicking Accept or pressing Tab key.

Redeploy the backend

  1. From the Cloud Shell terminal run the following commands to build the new container.
cd ~/cymbal-superstore/backend docker build -t gcr.io/{{{project_0.project_id| PROJECT_ID}}}/cymbal-superstore-inventory-api:latest .
  1. Push the new container into the Artifact Registry.
docker push gcr.io/{{{project_0.project_id| PROJECT_ID}}}/cymbal-superstore-inventory-api:latest
  1. Deploy the container to Cloud Run
gcloud run deploy inventory --image=gcr.io/{{{project_0.project_id| PROJECT_ID}}}/cymbal-superstore-inventory-api --port=8000 --region={{{project_0.default_region| Lab Region}}}

If asked: Allow unauthenticated invocations to [inventory] (y/N)? Enter Y.

Output:

Deploying container to Cloud Run service [inventory] in project [{{{project_0.project_id|PROJECT_ID}}}] region [{{{project_0.default_region| Lab Region}}}] OK Deploying... Done. OK Creating Revision... OK Routing traffic... Done. Service [inventory] revision [inventory-00002-n9z] has been deployed and is serving 100 percent of traffic. Service URL: https://inventory-bacbqreknq-uk.a.run.app

Make note of the Cloud Run Service URL that was created (different from above).

Verify endpoint is working

  1. In a browser tab, execute the Cloud Run Service URL (from above):

Example: https://inventory-bacbqreknq-uk.a.run.app

Output:

"🍎 Hello! This is the Cymbal Superstore Inventory API"
  1. To the base URL add the endpoint path /products.

Output:

{"id":"01Jggpy8RcgXSZnsJ8gy","name":"Eggs","price":5,"quantity":181,"imgfile":"product-images/eggs.png","timestamp":{"_seconds":1691767020,"_nanoseconds":20000000},"actualdateadded":{"_seconds":1714473490,"_nanoseconds":560000000}},{"id":"0n0fnOTKQbR3W6eERmNY","name":"Peanut Butter and Jelly Cups","price":5,"quantity":1,"imgfile":"product-images/peanutbutterandjellycups.png","timestamp":{"_seconds":1714000418,"_nanoseconds":14000000},"actualdateadded":{"_seconds":1714473490,"_nanoseconds":568000000}},

This shows the JSON Data of all the store’s products

  1. To the base URL add the endpoint path /newproducts.

Output:

{"id":"0n0fnOTKQbR3W6eERmNY","name":"Peanut Butter and Jelly Cups","price":5,"quantity":1,"imgfile":"product-images/peanutbutterandjellycups.png","timestamp":{"_seconds":1714000418,"_nanoseconds":14000000},"actualdateadded":{"_seconds":1714473490,"_nanoseconds":568000000}},{"id":"HwtaJN6kXj9YEQtzHB7P","name":"Pineapple Kombucha","price":9,"quantity":39,"imgfile":"product-images/pineapplekombucha.png","timestamp":{"_seconds":1714002141,"_nanoseconds":22000000},"actualdateadded":{"_seconds":1714473490,"_nanoseconds":567000000}},

This now works and you should see a JSON list that is smaller than the products list.

Note: If you added the quantity to the product name, in the optional step above, you should see that formatted in the JSON data. Example: "name":"Pineapple Kombucha (91)"

If you get a "System unavailable" message, or unexpected results, when you call the new /newproducts route, click the button below for a hint.

Test code

  1. Demonstrate the code works with the frontend Web Site.

  2. Navigate to frontend folder:

cd ~/cymbal-superstore/frontend
  1. 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
  1. Update the available file .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.
REACT_APP_INVENTORY_API_URL = <Cloud Run URL w/o the /newproducts path>

Example:

REACT_APP_INVENTORY_API_URL = https://inventory-l2imehewsq-uc.a.run.app

Rebuild the frontend

  1. Run the below command to navigate to the frontend folder:
cd ~/cymbal-superstore/frontend
  1. Now rebuild the front end by running these commands in a terminal window.
npm install npm audit fix --force export NODE_OPTIONS=--openssl-legacy-provider npm install react-scripts@5.0.1 --save-dev npm run build
  1. Upload it to the Cloud Storage bucket.
gcloud storage cp -r build/* gs://{{{project_0.project_id| PROJECT_ID}}}-cymbal-frontend --cache-control=no-cache,no-store,max-age=0
  1. 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.

  1. Open a new browser tab and enter the IP noted down earlier. Click on New Arrivals! link on the homepage and see the Test Products are no longer displayed or quickly replaced.


Note: The 10 products shown confirm the backend has properly fetched the new products from the database. Also, if you added the quantity to the product name, you should see some of the products show a quantity of 0.

Click Check my progress to verify the objective.

Add newProducts endpoint to backend.

Task 3. Extract to new microservice using Cloud Functions

Deploy a Cloud Function

Now lets see if we can deploy this new function.

  1. In the Chat response, Gemini may have given you the deploy command. If not lets ask:
Remember: working with Gemini is a conversation. It may take some back and forth sessions to get a result that is close enough to get the job done or at least get started.
  1. 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.

  2. In the Gemini Chat, enter the following prompt.

What is the gcloud command to deploy this /newproducts route as a Cloud Run Function in the {{{project_0.default_region| Lab Region}}} region? Don't forget to allow unauthenticated http requests. Deep Dive:

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.

  1. Let’s try it. In the terminal, change to the /functions folder:
cd ~/cymbal-superstore/functions

Then run the command Gemini gave you.

  1. If the deployment doesn’t work, click the button below for a hint.

The function was created!

Note: If the cloud function creation fails due to missing permissions, re-run the above command.
  1. The function's URL is displayed in the terminal or you can find it by opening Cloud Functions in the Console.

Example url: https://us-central1-qwiklabs-gcp-01-457d0634df06.cloudfunctions.net/newproducts

Let's test the new function

  1. Show that it works by executing the cloud function with the /newproducts path to verify the JSON data is returned as expected.

  2. From the function deploy response, copy the URL.

state: ACTIVE updateTime: '2025-07-25T02:28:40.172396925Z' url: https://{{{project_0.default_region| Lab Region}}}-{{{project_0.project_id| PROJECT_ID}}}.cloudfunctions.net/newproducts
  1. Paste the URL into a browser tab and navigate to it.

Output:

{"id":"vcMyZepctx3BrDL7yc5w","name":"Pineapple Kombucha (91)","price":1,"quantity":91,"imgfile":"product-images/pineapplekombucha.png","timestamp":{"_seconds":1707055701,"_nanoseconds":790000000},"actualdateadded":{"_seconds":1707500364,"_nanoseconds":191000000}},{"id":"ODThuqw2avA2mSvOUH6r","name":"White Chocolate Caramel Corn (9)","price":5,"quantity":9,"imgfile":"product-images/whitechocolatecaramelcorn.png","timestamp":{"_seconds":1707160496,"_nanoseconds":367000000},"actualdateadded":{"_seconds":1707500364,"_nanoseconds":192000000}},

You will see this is the same few JSON records that you saw earlier. Time to integrate it into the front end API

  1. Edit the 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:


  1. Now rebuild the front end by running these commands in a terminal window.
cd ~/cymbal-superstore/frontend npm install npm audit fix --force export NODE_OPTIONS=--openssl-legacy-provider npm install react-scripts@5.0.1 --save-dev npm run build
  1. Upload it to the Cloud Storage bucket.
gcloud storage cp -r build/* gs://{{{project_0.project_id| PROJECT_ID}}}-cymbal-frontend --cache-control=no-cache,no-store,max-age=0
  1. Now let's try it Calling the Website IP by pressing the New Arrivals.

Click Check my progress to verify the objective.

Extract to new microservice using Cloud Functions.

Congratulations!

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.

Before you begin

  1. Labs create a Google Cloud project and resources for a fixed time
  2. Labs have a time limit and no pause feature. If you end the lab, you'll have to restart from the beginning.
  3. On the top left of your screen, click Start lab to begin

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

Use private browsing to run the lab

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.