
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
Enable relevant APIs and set IAM roles.
/ 10
Create and start a Cloud Workstation.
/ 10
Copy code and run a Python Flask app.
/ 20
Create unit tests for the convert function.
/ 20
Update calendar.py to fix issues in the original code.
/ 20
Use Gemini Code Assist to improve the visual design of your app.
/ 20
In this lab, you'll use Gemini Code Assist, an AI-powered app development collaborator for Google Cloud, to explain, test, document, and improve an app.
You'll use Cloud Workstations to create a development environment that uses Code OSS as the integrated development environment (IDE).
This lab is intended for developers of any experience level who build apps. You do not need to be familiar with cloud app development.
In this lab, you'll learn how to perform the following tasks:
For each lab, you get a new Google Cloud project and set of resources for a fixed time at no cost.
Sign in to Qwiklabs using an incognito window.
Note the lab's access time (for example, 1:15:00
), and make sure you can finish within that time.
There is no pause feature. You can restart if needed, but you have to start at the beginning.
When ready, click Start lab.
Note your lab credentials (Username and Password). You will use them to sign in to the Google Cloud Console.
Click Open Google Console.
Click Use another account and copy/paste credentials for this lab into the prompts.
If you use other credentials, you'll receive errors or incur charges.
Accept the terms and skip the recovery resource page.
Cloud Shell is a virtual machine that contains development tools. It offers a persistent 5-GB home directory and runs on Google Cloud. Cloud Shell provides command-line access to your Google Cloud resources. gcloud
is the command-line tool for Google Cloud. It comes pre-installed on Cloud Shell and supports tab completion.
Click the Activate Cloud Shell button () at the top right of the console.
Click Continue.
It takes a few moments to provision and connect to the environment. When you are connected, you are also authenticated, and the project is set to your PROJECT_ID.
(Output)
(Example output)
(Output)
(Example output)
In this task, you enable the Cloud AI Companion API for Gemini and grant necessary roles to a user account.
Sign in to the Google Cloud console with your lab credentials, and open the Cloud Shell terminal window.
To set your project ID, user, and region environment variables, in Cloud Shell, run the following commands:
To enable the Cloud AI Companion API for Gemini and grant necessary roles to your user account, run the following commands:
To verify the objective, click Check my progress.
This lab uses Gemini assistance to develop an app with the Cloud Code plugin for Cloud Workstations IDE. Cloud Workstations is a fully managed integrated development environment that includes native integration with Gemini.
In this task, you configure and provision your Cloud Workstation environment and enable the Cloud Code plugin for Gemini.
A workstation cluster named my-cluster
has been pre-created for this lab. This cluster is used to configure and create a workstation.
/
to start a search, then type Workstations
, and then click Cloud Workstations.Reconciling
or Updating
, periodically refresh and wait until it becomes Ready
before moving to the next step.To create the workstation configuration and workstation, in Cloud Shell, run the following commands:
Wait for the commands to finish.
In the Navigation pane, click Workstations.
Once the workstation is created, it is listed under My workstations with a status of Stopped
.
To start the workstation, click Start.
As the workstation starts up, the status changes to Starting
. Wait for the status to change to Running
indicating that it is ready to be used.
To function properly, some extensions need third-party cookies to be enabled in your browser.
To enable third-party cookies in Chrome, in the Chrome menu, click Settings.
In the search bar, type Third-party cookies.
Click the Third-party cookies setting, and select Allow third-party cookies.
To launch the Code OSS IDE on the workstation, from the Workstations page in the Google Cloud console, click Launch.
The IDE opens in another browser tab.
To verify the objective, click Check my progress.
In this task, you enable Gemini in Cloud Code for your Workstation IDE.
To connect to Google Cloud in your workstation, perform these steps:
On the status bar at the bottom of the window, click Cloud Code - Sign In.
A link is displayed in the terminal.
To launch the Cloud Code sign-in flow, hold Control (for Windows and Linux) or Command (for MacOS) and then click the link in the terminal.
If you are asked to confirm the opening of the external website, click Open.
Click the student email address, and then click Sign in.
Your verification code is displayed in the browser tab.
Click Copy.
Back in the IDE, in the terminal, where it says Enter authorization code, paste the code.
If asked to approve copying from the clipboard, click Allow.
Click Enter, and then wait for the status bar to show Cloud Code - No Project.
You're now connected to Google Cloud.
To enable Gemini in Cloud Code for your workstation IDE, perform these steps:
In your workstation IDE, click the menu (), and then navigate to File > Preferences > Settings.
In Search settings, enter Gemini
.
On the User tab of the Settings dialog, select Extensions > Gemini Code Assist.
On the Qwiklabs lab credentials panel, to copy the Project ID, click Copy.
On the Cloud Code settings page, for Cloudcode > Duet AI: Project, paste the Google Cloud project ID.
Confirm that Cloudcode > Duet AI: Enable is enabled.
In the IDE status bar, click Cloud Code - No Project.
Click Select a Google Cloud Project, and then click your project ID.
The project ID is now shown in the status bar. Gemini is now ready to use.
Code for a Python Flask app has been saved for you in a Cloud Storage bucket.
In this task, you download, examine, and run a Python Flask app in the IDE. Gemini Code Assist explains the code.
From the IDE menu (), select Terminal > New Terminal.
In the terminal, run the following command:
A link is displayed in the terminal.
To launch the sign-in flow for the terminal, press Control (for Windows and Linux) or Command (for MacOS) and click the link in the terminal.
If you are asked to confirm the opening of the external website, click Open.
Click the student email address, and then click Continue.
Click Allow.
Click Copy.
Back in the IDE, in the terminal, where it says Enter authorization code, paste the code, and then click Enter.
Your terminal session is now logged in to Google Cloud.
To install Python locally in a virtual environment, run the following commands:
To check the python location that will be used, run the following commands:
To copy the app code, in the terminal, run the following command:
The code has been copied into a subdirectory named codeassist-demo
.
In the IDE activity bar, click Explorer (), and then click Open Folder.
In the Open Folder dialog, click codeassist-demo, and then click OK.
The directory structure is displayed.
Select main.py.
The Python file opens in an editor window.
In the IDE activity bar, click Gemini Code Assist ().
Gemini Code Assist is an AI-powered collaborator to help with app development tasks.
In the Gemini Code Assist chat pane, type the following prompt, and then click Send ():
Prompts are questions or statements describing the help you need. Prompts can include context from existing code that Google Cloud analyzes to provide more useful or complete responses. For more information on writing prompts to generate good responses, see Write better prompts for Gemini for Google Cloud.
Gemini will explain the code in main.py
. The response might explain these sections:
When you select code, the same prompt will cause Gemini Code Assist to explain only the selected code.
In the editor, select the app.route
and function definition for the POST /convert
route, click the bulb (), and then click Gemini: Explain this.
Gemini will explain the selected code in detail.
If the terminal has closed, from the IDE menu (), select Terminal > New Terminal.
In the terminal, run the following commands:
The command returns an error saying there is no module named flask
. You can use Gemini Code Assist to help you understand the issue.
In the Gemini Code Assist chat pane, type the following prompt:
Gemini Code Assist will likely mention that you can use the pip package installer and a requirements.txt
file to install Python requirements.
In the IDE activity bar, click Explorer (), and then click requirements.txt.
Flask and its required version are listed in the requirements.txt
file.
In the terminal, run the following command:
Flask is now installed.
In the terminal, run the following command:
A dialog indicates that the service listening on port 8080 is now available for web preview.
Click Open Preview, and then click Open.
The Roman Numerals web app opens in a new tab.
In the number box, enter 123
, and then click Convert.
The number returned is CXXIII
. C
is 100, X
is 10, and I
is 1. This looks correct.
Click Return to home page, then enter 45
, and then click Convert.
The number returned is XXXXV
. Technically this is correct mathematically (4 times 10, plus 5), but the normal representation of 40 is XL
(10 less than 50), and therefore the more traditional Roman numeral representation is XLV
.
In the IDE activity bar, click Explorer (), and then click calendar.py.
The number_to_roman
function converts a number to a Roman numeral.
To verify the objective, click Check my progress.
In this task, you use Gemini Code Assist to generate unit tests for your code.
In the IDE activity bar, click Gemini Code Assist (), then enter the following prompt:
Gemini Code Assist recognizes the code in the open tab for calendar.py
. It should provide example code that is similar to this:
To stop the running app, in the terminal, press CTRL-C.
To create unit tests for the convert function, in the terminal, run the following commands:
To run the tests, in the terminal, run the following commands:
The tests will fail:
The failures were:
abc
was not handled correctly.IIII
instead of IV
.MMMDCCCCLXXXXVIIII
instead of MMMCMXCIX
.In each test function, the first error encountered causes the function to end.
To verify the objective, click Check my progress.
In this task, you use Gemini Code Assist to fix the code and make it more readable.
In the IDE activity bar, click Explorer (), and then click calendar.py.
In the IDE activity bar, click Gemini Code Assist (), then enter the following prompt:
Gemini Code Assist will provide code with readability enhancements, and likely fix the issue. Here is an example:
Gemini Code Assist also explains the changes that have been made:
In this example, Gemini Code Assist provided an algorithm that made the code more readable, and also fixed issues in the original code.
To compare the code in a new file, in the code pane inside Gemini Code Assist, click Diff with Open File ().
To accept the changes, click Accept.
The updated code is accepted.
Click the menu (), and then navigate to File > Save.
In the terminal, run the following commands:
If the tests do not pass, try running them a few times to make sure the tests are not using a cached version of the calendar module.
If Gemini has not fixed the roman numeral issue, some tests will fail. If this happens, you may fix the code yourself until the test passes, or you can replace calendar.py
with a known working version.
If some tests fail, to fix the code and re-run the unit tests, run the following commands:
The tests should now pass.
To verify the objective, click Check my progress.
If you're a non-native English speaker who relies on translation app, you can use Gemini Code Assist to generate comments in other languages.
In this task, you use Gemini Code Assist to add comments to code, including in a different language.
In the IDE activity bar, click Explorer (), and then click main.py.
In the IDE activity bar, click Gemini Code Assist (), then enter the following prompt:
Gemini Code Assist will add comments that help explain the code:
But what if English is not your first language?
In the Gemini Code Assist pane, enter the following prompt:
Gemini Code Assist can provide comments in different languages to help with code readability.
To verify that only comments were added, in the code pane inside Gemini Code Assist, click Diff with Open File ().
The updates are compared to the existing code:
To reject the changes, click Decline.
Gemini Code Assist can also help you make your app look nicer.
In this task, you use Gemini Code Assist to improve the visual design of your app.
In the terminal, run the following command:
A dialog indicates that the service listening on port 8080 is now available for web preview.
Click Open Preview, and then click Open.
The Roman Numerals web app opens in a new tab.
In the IDE activity bar, click Explorer (), and then select templates/index.html.
The HTML template for this app is extremely simple.
In the IDE activity bar, click Gemini Code Assist (), then enter the following prompt:
Gemini Code Assist will update the code to improve how the app's entry page looks.
To accept the changes, in the code pane inside Gemini Code Assist, click Diff with Open File (), and then click Accept.
Return to the Roman Numerals app browser tab, and click Refresh.
The app should look nicer. In this example, the dialog is centered on the page and colors have been added.
In the IDE activity bar, click Explorer (), and then click templates/convert.html.
In the IDE activity bar, click Gemini Code Assist (), then enter the following prompt:
Gemini Code Assist will update the results template to match the index template.
To accept the changes, in the code pane inside Gemini Code Assist, click Diff with Open File (), and then click Accept.
Return to the Roman Numerals app browser tab, enter 45
, and then click Enter.
The new results page should match the style of the index page:
To verify the objective, click Check my progress.
When you have completed your lab, click End Lab. Qwiklabs removes the resources you’ve used and cleans the account for you.
You will be given an opportunity to rate the lab experience. Select the applicable number of stars, type a comment, and then click Submit.
The number of stars indicates the following:
You can close the dialog box if you don't want to provide feedback.
For feedback, suggestions, or corrections, please use the Support tab.
In this lab you learned how to:
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.
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