概览

在本实验中，您将使用 Gemini Code Assist（一款 AI 赋能的 Google Cloud 应用开发协作工具）来解释、测试和改进应用，并帮助您编写相关的文档。

您将使用 Cloud Workstations 搭建一个开发环境，在这个环境中，您可以使用 Code OSS 作为集成开发环境 (IDE)。

本实验面向构建应用的开发者，不限经验水平，也不需要熟悉云应用开发。

注意：作为一项尚处于早期发展阶段的技术，Gemini 可能会生成看似合理但实际上不正确的输出。我们建议您先验证 Gemini 的所有输出，然后再使用。如需了解详情，请参阅适用于 Google Cloud 的 Gemini 和 Responsible AI。

目标

在本实验中，您将学习如何执行以下任务：

• 使用 Cloud Workstations 搭建云端应用开发环境。
• 使用 Gemini Code Assist 解释代码。
• 使用 Gemini Code Assist 生成单元测试。
• 向 Gemini 发出提示，优化应用的外观。
• 使用 Gemini Code Assist 提高代码的可读性。
• 使用 Gemini Code Assist 为代码添加英语或其他语言的注释。

设置

对于每个实验，您都会免费获得一个新的 Google Cloud 项目及一组资源，它们都有固定的使用时限。

1. 请使用无痕式窗口登录 Qwiklabs。

2. 留意实验的访问时限（例如 1:15:00）并确保能在相应时间段内完成实验。
   系统不提供暂停功能。如有需要，您可以重新开始实验，不过必须从头开始。

3. 准备就绪时，点击开始实验。

4. 请记好您的实验凭据（用户名和密码）。您需要使用这组凭据来登录 Google Cloud 控制台。

5. 点击打开 Google 控制台。

6. 点击使用其他账号，然后将此实验的凭据复制并粘贴到相应提示框中。
   如果您使用其他凭据，将会收到错误消息或产生费用。

7. 接受条款并跳过恢复资源页面。

激活 Cloud Shell

Cloud Shell 是一种包含开发工具的虚拟机。它提供了一个 5 GB 的永久性主目录，并且在 Google Cloud 上运行。Cloud Shell 可让您通过命令行访问 Google Cloud 资源。gcloud 是 Google Cloud 的命令行工具。它会预先安装在 Cloud Shell 上，且支持 Tab 键自动补全功能。

1. 在 Google Cloud Console 的导航窗格中，点击激活 Cloud Shell ()。

2. 点击继续。
   预配和连接到环境需要一些时间。若连接成功，也就表明您已通过身份验证，且相关项目的 ID 会被设为您的 PROJECT_ID。例如：

命令示例

• 列出有效的帐号名称：

gcloud auth list

（输出）

Credentialed accounts: - <myaccount>@<mydomain>.com (active)

（输出示例）

Credentialed accounts: - google1623327_student@qwiklabs.net

• 列出项目 ID：

gcloud config list project

（输出）

[core] project = <project_ID>

（输出示例）

[core] project = qwiklabs-gcp-44776a13dea667a6

任务 1. 配置环境和账号

在此任务中，您将为 Gemini 启用 Cloud AI Companion API，并为用户账号授予必要的角色。

配置 API 和角色

1. 使用您的实验凭证登录 Google Cloud 控制台，然后按下键盘上的 G 键，再按下 S 键，打开 Cloud Shell 终端。

2. 如需设置项目 ID、用户和区域环境变量，请在 Cloud Shell 中运行以下命令：

   export PROJECT_ID=$(gcloud config list project --format="value(core.project)") export USER=$(gcloud config list account --format "value(core.account)") export REGION={{{project_0.startup_script.lab_region| Lab Region}}} echo "PROJECT_ID=${PROJECT_ID}" echo "USER=${USER}" echo "REGION=${REGION}"

3. 如需为 Gemini 启用 Cloud AI Companion API 并为您的用户账号授予必要的角色，请运行以下命令：

   gcloud services enable cloudaicompanion.googleapis.com --project ${PROJECT_ID} 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

如需验证是否已完成以下目标，请点击检查我的进度： 启用相关 API 并设置 IAM 角色

任务 2. 创建 Cloud Workstations 工作站

本实验利用 Gemini 助手，通过 Cloud Workstations IDE 的 Cloud Code 插件来开发应用。Cloud Workstations 是一种全托管式集成开发环境，包含与 Gemini 的原生集成。

在此任务中，您将配置和预配 Cloud Workstations 环境，并启用 Gemini 的 Cloud Code 插件。

查看工作站集群

我们已经为本实验预先创建了一个名为 my-cluster 的工作站集群。此集群用于配置和创建工作站。

1. 如需打开“工作站”页面，请在 Google Cloud 控制台标题栏的搜索字段中输入 Cloud Workstations，然后点击 Cloud Workstations。

2. 如果 Cloud Workstations 未固定 ()，请在导航菜单 () 中点击固定 ()。

3. 在导航窗格中，点击集群管理。

4. 检查集群状态。如果集群状态为正在调整或正在更新，请不时刷新，直至其变为准备就绪后再继续执行下一步。

创建配置和工作站

1. 如需创建工作站配置和工作站，请在 Cloud Shell 中运行以下命令：

   export CLUSTER_NAME=my-cluster export CONFIG_NAME=my-config export WS_NAME=my-workstation export REGION={{{project_0.startup_script.lab_region| Lab Region}}} gcloud workstations configs create ${CONFIG_NAME} --cluster=${CLUSTER_NAME} --region=${REGION} --machine-type="e2-standard-4" --pd-disk-size=200 --pd-disk-type="pd-standard" --pool-size=1 gcloud workstations create ${WS_NAME} --cluster=${CLUSTER_NAME} --config=${CONFIG_NAME} --region=${REGION}

   等待命令完成。

2. 在导航窗格中，点击工作站。

   工作站创建完毕后会列在我的工作站下，状态为已关停。

3. 如需启动工作站，请点击启动。

   在工作站启动期间，状态会变为正在启动。等待状态变为正在运行，这代表工作站可以使用了。

启动 IDE

为保证正常工作，有些扩展程序要求在您的浏览器中启用第三方 Cookie。

1. 如需在 Chrome 中启用第三方 Cookie，请点击 Chrome 菜单中的设置。

2. 在搜索栏中输入第三方 Cookie。

3. 点击第三方 Cookie 设置，并选择允许第三方 Cookie。

   注意：如果在本实验结束后，您希望将浏览器还原到当前的设置，请记下您原本的第三方 Cookie 设置。

4. 如需在工作站上启动 Code OSS IDE，请在 Google Cloud 控制台的工作站页面中点击启动。

   IDE 将在另一个浏览器标签页中打开。

   

如需验证是否已完成以下目标，请点击检查我的进度： 创建并启动 Cloud Workstations 工作站

任务 3. 更新 Cloud Code 扩展程序以启用 Gemini

在此任务中，您要在 Cloud Code 中为您的工作站 IDE 启用 Gemini。

连接到 Google Cloud

如需在您的工作站中连接到 Google Cloud，请执行以下步骤：

1. 如需启动 Cloud Code - 登录流程，请在窗口底部的状态栏中点击 Cloud Code - 登录，然后在浏览器中打开终端中显示的链接。

2. 如果系统要求您确认是否打开外部网站，请点击打开。

3. 选择一个账号 ，以便继续前往 Gemini Code Assist，然后点击登录。

   您的验证码会显示在浏览器标签页中。

   注意：系统可能会显示警告，指出您运行了 gcloud auth login 命令。这个过程是正常的。IDE 为您运行了此命令。

4. 点击复制。

5. 回到 IDE 中，将验证码粘贴到终端中显示 Enter authorization code（输入授权代码）的位置。

6. 如果系统提示您批准从剪贴板复制内容，请点击允许。

7. 按 Enter 键，然后等待状态栏显示 Cloud Code - 无项目。

   您现已连接到 Google Cloud。

在 Cloud Code 中启用 Gemini

要在 Cloud Code 中为您的工作站 IDE 启用 Gemini，请完成以下步骤：

1. 在工作站 IDE 中，点击菜单 ()，然后前往文件 > 偏好设置 > 设置。

2. 在搜索设置中输入 Gemini。

3. 在“设置”对话框的用户标签页上，选择扩展程序 > Gemini Code Assist。

4. 在 Cloud Code 设置页面中，在 Geminicodeassist：项目中输入 Google Cloud 项目 ID 。

   

5. 如需为 Cloud Code 选择项目，请在窗口底部状态栏中点击 Cloud Code - 无项目。接下来，选择选择 Google Cloud 项目选项，然后选择 。

   

   项目 ID 现在会显示在状态栏中。现在就可以使用 Gemini 了。

任务 4. 下载、检查并运行 Python Flask 应用

Cloud Storage 存储桶中已保存一个 Python Flask 应用的代码。

在此任务中，您将在 IDE 中下载、检查并运行 Python Flask 应用。Gemini Code Assist 将解释代码。

登录到终端

1. 在 IDE 菜单 () 中，依次选择 Terminal > New Terminal（终端 > 新建终端）。

2. 在终端中，运行以下命令：

   gcloud auth login

   在浏览器中打开终端中显示的链接。

3. 选择一个账号 ，以便继续 Sign in to Google Cloud SDK（登录 Google Cloud SDK），然后点击 Continue（继续）。

4. 最后，在系统提示 Google Cloud SDK wants to access your Google Account（Google Cloud SDK 想访问您的 Google 账号）的窗口中，点击 Allow（允许）。

   您的验证码会显示在浏览器标签页中。

   注意：系统可能会显示警告，指出您运行了 gcloud auth login 命令。这个过程是正常的。IDE 为您运行了此命令。

5. 点击复制。

6. 返回 IDE，将验证码粘贴到终端中显示 Enter the verification code provided in your browser（输入浏览器中提供的验证码）的位置，然后按 Enter 键。

   您的终端会话现已登录到 Google Cloud。

安装 Python 虚拟环境

1. 如需在本地虚拟环境中安装 Python，请运行以下命令：

   sudo apt update sudo apt -y upgrade sudo apt install -y python3-venv python3 -m venv ~/env source ~/env/bin/activate

2. 如需检查将使用的 Python 位置，请运行以下命令：

   which python3

复制代码

1. 如需复制应用代码，请在终端中运行以下命令：

   export PROJECT_ID={{{project_0.project_id | Project ID}}} export BUCKET_NAME=$PROJECT_ID-code gcloud storage cp -r gs://$BUCKET_NAME/* .

   代码已复制到名为 codeassist-demo 的子目录中。

2. 在 IDE 活动栏中，点击 Explorer（探索器）()，然后点击 Open Folder（打开文件夹）。

3. 在 Open Folder（打开文件夹）对话框中，点击 codeassist-demo，然后点击 OK（确定）。

   系统随即显示目录结构。

检查代码

1. 选择 main.py。

   Python 文件将在编辑器窗口中打开。

2. 在 IDE 活动栏中，点击 Gemini Code Assist ()。

   Gemini Code Assist 是一款 AI 赋能的协作工具，可帮助您完成应用开发任务。

3. 在 Gemini Code Assist 对话窗格中，输入以下提示，然后点击 Send（发送）()：

   Explain this

   提示是描述您所需要的帮助的问题或陈述。提示可以包含现有代码中的上下文，Google Cloud 会分析这些上下文，以提供更实用或更完整的回答。如需详细了解如何撰写提示以生成优质回答，请参阅为 Gemini for Google Cloud 撰写更好的提示。

   Gemini 将解释 main.py 中的代码。它的回答可能会解释以下内容：

   • 依赖项
   • 应用设置
   • 路由
   • 应用执行

   在选中代码时，如果发出同样的提示，Gemini Code Assist 只会解释所选的代码。

   注意：聊天记录状态仅保留在内存中，在您切换到另外一个工作区或关闭 IDE 后不会保留。Gemini 不会将您的提示或其回答用作训练模型的数据。如需了解详情，请参阅 Gemini for Google Cloud 如何使用您的数据。

4. 在编辑器中，选择 POST /convert 路由的 app.route 和函数定义，点击灯泡图标 ()，然后点击 Gemini: Explain this（Gemini：解释此内容）。

   

   Gemini 将详细解释所选的代码。

运行应用

1. 如果终端已关闭，请在 IDE 菜单 () 中依次选择 Terminal > New Terminal（终端 > 新建终端）。

2. 在终端中，运行以下命令：

   cd ~/codeassist-demo source ~/env/bin/activate python3 main.py

   该命令会返回一个错误，提示没有名称为 flask 的模块。您可以使用 Gemini Code Assist 帮助了解问题。

3. 在 Gemini Code Assist 对话窗格中，输入以下提示：

   How do you install Python requirements?

   Gemini Code Assist 可能会提到，您可以使用 pip 软件包安装程序和 requirements.txt 文件来安装 Python 要求的依赖项。

4. 在 IDE 活动栏中，点击 Explorer（探索器）()，然后点击 requirements.txt。

   Flask 及其所需版本列于 requirements.txt 文件中。

5. 在终端中，运行以下命令：

   pip install -r requirements.txt

   Flask 现已安装完毕。

6. 在终端中，运行以下命令：

   python3 main.py

   系统会显示一个对话框，提示监听端口 8080 的服务现在可在网页中进行预览了。

7. 点击 Open Preview（打开预览），然后点击 Open（打开）。

   系统会在新标签页中打开 Roman Numerals Web 应用。

8. 在数字框中输入 123，然后点击 Convert（转换）。

   返回的数字是 CXXIII。C 是 100，X 是 10，I 是 1。这看起来是正确的。

9. 点击 Return to home page（返回首页），然后输入 45，再点击 Convert（转化）。

   返回的数字为 XXXXV。从数学上讲，这个答案是正确的（4 乘以 10，再加上 5），但 40 用正常罗马数字表示是 XL（比 50 少 10），因此按更传统的罗马数字表示法是 XLV。

   稍后会详细介绍。

10. 在 IDE 活动栏中，点击 Explorer（探索器）()，然后点击 calendar.py。

    number_to_roman 函数用于将数字转换为罗马数字。

如需验证是否已完成以下目标，请点击检查我的进度： 复制代码并运行 Python Flask 应用

任务 5. 添加单元测试

在此任务中，您将使用 Gemini Code Assist 为代码生成单元测试。

1. 在 IDE 活动栏中，点击 Gemini Code Assist ()，然后输入以下提示：

   Create unit tests for a fixed version of number_to_roman

   Gemini Code Assist 会识别当前打开的 calendar.py 标签页中的代码。它应该会提供示例代码，类似于如下所示的代码：

   import unittest import calendar class TestNumberToRoman(unittest.TestCase): def test_basic_conversions(self): self.assertEqual(calendar.number_to_roman(1), "I") self.assertEqual(calendar.number_to_roman(5), "V") self.assertEqual(calendar.number_to_roman(10), "X") self.assertEqual(calendar.number_to_roman(50), "L") self.assertEqual(calendar.number_to_roman(100), "C") self.assertEqual(calendar.number_to_roman(500), "D") self.assertEqual(calendar.number_to_roman(1000), "M") def test_combinations(self): self.assertEqual(calendar.number_to_roman(4), "IV") self.assertEqual(calendar.number_to_roman(9), "IX") self.assertEqual(calendar.number_to_roman(14), "XIV") self.assertEqual(calendar.number_to_roman(40), "XL") self.assertEqual(calendar.number_to_roman(90), "XC") self.assertEqual(calendar.number_to_roman(400), "CD") self.assertEqual(calendar.number_to_roman(900), "CM") self.assertEqual(calendar.number_to_roman(1994), "MCMXCIV") self.assertEqual(calendar.number_to_roman(3888), "MMMDCCCLXXXVIII") def test_edge_cases(self): self.assertEqual(calendar.number_to_roman(0), "") # Should handle zero self.assertRaises(TypeError, calendar.number_to_roman, "abc") # Should handle invalid input def test_large_numbers(self): self.assertEqual(calendar.number_to_roman(3000), "MMM") self.assertEqual(calendar.number_to_roman(3999), "MMMCMXCIX") if __name__ == '__main__': unittest.main() 注意：按照您代码当前的实现方式，Gemini 生成的单元测试一般能通过，而对于正确遵循罗马数字标准的代码实现，这些测试不一定能通过。在本实验中，您将使用正确版本的单元测试。

2. 如需停止运行中的应用，请在终端中按 CTRL + C。

3. 如需为 convert 函数创建单元测试，请在终端中运行以下命令：

   cat > ~/codeassist-demo/test_calendar.py <<EOF import unittest import calendar class TestNumberToRoman(unittest.TestCase): def test_basic_conversions(self): self.assertEqual(calendar.number_to_roman(1), "I") self.assertEqual(calendar.number_to_roman(5), "V") self.assertEqual(calendar.number_to_roman(10), "X") self.assertEqual(calendar.number_to_roman(50), "L") self.assertEqual(calendar.number_to_roman(100), "C") self.assertEqual(calendar.number_to_roman(500), "D") self.assertEqual(calendar.number_to_roman(1000), "M") def test_combinations(self): self.assertEqual(calendar.number_to_roman(4), "IV") self.assertEqual(calendar.number_to_roman(9), "IX") self.assertEqual(calendar.number_to_roman(14), "XIV") self.assertEqual(calendar.number_to_roman(40), "XL") self.assertEqual(calendar.number_to_roman(90), "XC") self.assertEqual(calendar.number_to_roman(400), "CD") self.assertEqual(calendar.number_to_roman(900), "CM") self.assertEqual(calendar.number_to_roman(1994), "MCMXCIV") self.assertEqual(calendar.number_to_roman(3888), "MMMDCCCLXXXVIII") def test_edge_cases(self): self.assertEqual(calendar.number_to_roman(0), "") # Should handle zero self.assertRaises(TypeError, calendar.number_to_roman, "abc") # Should handle invalid input def test_large_numbers(self): self.assertEqual(calendar.number_to_roman(3000), "MMM") self.assertEqual(calendar.number_to_roman(3999), "MMMCMXCIX") if __name__ == '__main__': unittest.main() EOF

4. 如需运行测试，请在终端中运行以下命令：

   cd ~/codeassist-demo python3 test_calendar.py

   测试将会失败：

   ====================================================================== ERROR: test_edge_cases (__main__.TestNumberToRoman.test_edge_cases) ---------------------------------------------------------------------- Traceback (most recent call last): File "/home/user/codeassist-demo/test_calendar.py", line 28, in test_edge_cases self.assertRaises(TypeError, calendar.number_to_roman, "abc") # Should handle invalid input ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ File "/usr/lib/python3.12/unittest/case.py", line 778, in assertRaises return context.handle('assertRaises', args, kwargs) ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ File "/usr/lib/python3.12/unittest/case.py", line 238, in handle callable_obj(*args, **kwargs) File "/home/user/codeassist-demo/calendar.py", line 16, in number_to_roman number = int(number) ^^^^^^^^^^^ ValueError: invalid literal for int() with base 10: 'abc' ====================================================================== FAIL: test_combinations (__main__.TestNumberToRoman.test_combinations) ---------------------------------------------------------------------- Traceback (most recent call last): File "/home/user/codeassist-demo/test_calendar.py", line 16, in test_combinations self.assertEqual(calendar.number_to_roman(4), "IV") AssertionError: 'IIII' != 'IV' - IIII + IV ====================================================================== FAIL: test_large_numbers (__main__.TestNumberToRoman.test_large_numbers) ---------------------------------------------------------------------- Traceback (most recent call last): File "/home/user/codeassist-demo/test_calendar.py", line 33, in test_large_numbers self.assertEqual(calendar.number_to_roman(3999), "MMMCMXCIX") AssertionError: 'MMMDCCCCLXXXXVIIII' != 'MMMCMXCIX' - MMMDCCCCLXXXXVIIII + MMMCMXCIX ---------------------------------------------------------------------- Ran 4 tests in 0.004s FAILED (failures=2, errors=1)

   失败原因如下：

   • abc 未正确处理。
   • 4 返回的是 IIII，而不是 IV。
   • 3999 返回的是 MMMDCCCCLXXXXVIIII，而不是 MMMCMXCIX。

   在每个测试函数中，遇到第一个错误就会导致函数终止。

   注意：如果测试代码不同，结果可能会有所不同。

如需验证是否已完成以下目标，请点击检查我的进度： 为 convert 函数创建单元测试

任务 6. 修正代码并提高代码可读性

在此任务中，您将使用 Gemini Code Assist 修正代码并提高代码可读性。

1. 在 IDE 活动栏中，点击 Explorer（探索器）()，然后点击 calendar.py。

2. 在 IDE 活动栏中，点击 Gemini Code Assist ()，然后输入以下提示：

   Make my code more readable and fix any errors

   Gemini Code Assist 将提供可读性更高的代码，并且可能会修正问题。示例如下：

   def number_to_roman(number): """Converts an integer to its Roman numeral equivalent. Args: number: An integer between 0 and 3999. Returns: A string representing the Roman numeral equivalent of the number. Returns an empty string if the input is 0. Raises TypeError if the input is not an integer or is out of range. """ try: number = int(number) except ValueError: raise TypeError("Input must be an integer.") if not 0 <= number <= 3999: raise TypeError("Input must be between 0 and 3999.") if number == 0: return "" roman_map = { 1000: 'M', 900: 'CM', 500: 'D', 400: 'CD', 100: 'C', 90: 'XC', 50: 'L', 40: 'XL', 10: 'X', 9: 'IX', 5: 'V', 4: 'IV', 1: 'I'} result = "" for value, numeral in roman_map.items(): while number >= value: result += numeral number -= value return result

   Gemini Code Assist 还会解释所做的更改：

   Key improvements: 1. Error Handling: Added TypeError for non-integer input and values outside the range 0-3999. This makes the function more robust. 2. Docstring: A clear docstring explains the function's purpose, arguments, return value, and error handling. This significantly improves readability and maintainability. 3. Efficiency and Correctness: Uses a roman_map dictionary and a more efficient algorithm to construct the Roman numeral. This handles subtractive notation (like "IV" for 4, "IX" for 9, etc.) correctly. The previous version had issues with these cases and was less efficient. 4. Zero Handling: Explicitly handles the case where the input number is 0, returning an empty string as expected. 5. Clarity: The code is now more concise and easier to understand. The logic is clearer and the variable names are more descriptive. This revised version addresses the limitations and errors of the original implementation and adheres to best practices for Python code. It's more robust, readable, and efficient.

   在此示例中，Gemini Code Assist 提供了一种算法，使代码更具可读性，并修正了原始代码中的问题。

3. 如需比较新文件中的代码，请在 Gemini Code Assist 的代码窗格中，点击 Diff with Open File（与打开的文件进行差异比较）()。

4. 若要接受更改，请点击 Accept（接受）。这会接受更新后的代码。

5. 在终端中，运行以下命令：

   cd ~/codeassist-demo python3 test_calendar.py

   如果测试未通过，请尝试运行几次，确保测试没有使用日历模块的缓存版本。

   如果 Gemini 未修正罗马数字问题，某些测试将会失败。如果发生这种情况，您可以自行修正代码，直到测试通过，也可以将 calendar.py 替换为已知能够正常运行的版本。

6. 如果某些测试失败，请运行以下命令来修正代码并重新运行单元测试：

   cat > ~/codeassist-demo/calendar.py <<EOF def number_to_roman(number): """Converts an integer to its Roman numeral equivalent. Args: number: An integer between 0 and 3999. Returns: A string representing the Roman numeral equivalent of the number. Returns an empty string if the input is 0. Raises TypeError if the input is not an integer or is out of range. """ try: number = int(number) except ValueError: raise TypeError("Input must be an integer.") if not 0 <= number <= 3999: raise TypeError("Input must be between 0 and 3999.") if number == 0: return "" roman_map = { 1000: 'M', 900: 'CM', 500: 'D', 400: 'CD', 100: 'C', 90: 'XC', 50: 'L', 40: 'XL', 10: 'X', 9: 'IX', 5: 'V', 4: 'IV', 1: 'I'} result = "" for value, numeral in roman_map.items(): while number >= value: result += numeral number -= value return result EOF cd ~/codeassist-demo python3 test_calendar.py

   测试现在应该能通过了。

如需验证是否已完成以下目标，请点击检查我的进度： 更新 calendar.py 以修正原始代码中的问题

任务 7. 针对非英语母语人士提高代码可读性

如果您是依赖翻译应用的非英语母语人士，可以使用 Gemini Code Assist 生成其他语言的注释。

在此任务中，您将使用 Gemini Code Assist 为代码添加注释，包括添加其他语言的注释。

1. 在 IDE 活动栏中，点击 Explorer（探索器）()，然后点击 main.py。

2. 在 IDE 活动栏中，点击 Gemini Code Assist ()，然后输入以下提示：

   Add comments to main.py

   Gemini Code Assist 将添加有助于解释代码的注释：

   import os # Import the os module for environment variables from flask import Flask, render_template, request # Import Flask framework components import calendar # Import the calendar module for Roman numeral conversion # Create a Flask app instance app = Flask(__name__) # Define a route for the home page @app.route("/", methods=["GET"]) def home_page(): # Render the index.html template return render_template("index.html") # Define a route for the conversion endpoint @app.route("/convert", methods=["POST"]) def convert(): # Get the number from the form data number = request.form["number"] # Convert the number to Roman numerals using the calendar module roman = calendar.number_to_roman(number) # Render the convert.html template with the number and its Roman numeral equivalent return render_template("convert.html", number=number, roman=roman) # Run the Flask app if this script is executed directly if __name__ == "__main__": # Run the app in debug mode, listening on all interfaces (0.0.0.0) # and using the port specified in the environment variable PORT or defaulting to 8080 app.run(debug=True, host="0.0.0.0", port=int(os.environ.get("PORT", 8080)))

   但如果您的母语不是英语怎么办？

3. 在 Gemini Code Assist 窗格中，输入以下提示：

   Add Spanish comments to main.py

   Gemini Code Assist 可以提供不同语言的注释，帮助提高代码的可读性。

4. 为了验证是否只添加了注释，请在 Gemini Code Assist 的代码窗格中点击 Diff with Open File（与打开的文件进行差异比较）()。

   系统会显示更新部分与现有代码的对比：

   

5. 若要拒绝更改，请点击 Decline（拒绝）。

任务 8. 优化应用的外观

Gemini Code Assist 还可以帮助优化应用的外观。

在此任务中，您将使用 Gemini Code Assist 来优化应用的视觉设计。

1. 在终端中，运行以下命令：

   cd ~/codeassist-demo python3 main.py

   系统会显示一个对话框，提示监听端口 8080 的服务现在可在网页中进行预览了。

2. 点击 Open Preview（打开预览），然后点击 Open（打开）。

   系统会在新标签页中打开 Roman Numerals Web 应用。

   

3. 在 IDE 活动栏中，点击 Explorer（探索器）()，然后选择 templates/index.html。

   此应用的 HTML 模板非常简单。

4. 在 IDE 活动栏中，点击 Gemini Code Assist ()，然后输入以下提示：

   Make this HTML template look better

   Gemini Code Assist 会更新代码，优化应用入口页面的外观。

5. 若要接受更改，请在 Gemini Code Assist 代码窗格中点击 Diff with Open File（与打开的文件进行差异比较）()，然后点击 Accept（接受）。

6. 返回 Roman Numerals 应用的浏览器标签页，然后点击 Refresh（刷新）。

   应用看起来应该更美观了。在此示例中，对话框居中显示在页面上，并且添加了颜色。

   

   注意：Gemini Code Assist 所做的更改可能与这里看到的不同。

7. 在 IDE 活动栏中，点击 Explorer（探索器）()，然后点击 templates/convert.html。

8. 在 IDE 活动栏中，点击 Gemini Code Assist ()，然后输入以下提示：

   Make the convert.html template look similar to the index.html template

   Gemini Code Assist 将更新结果模板，以匹配索引模板。

9. 若要接受更改，请在 Gemini Code Assist 代码窗格中点击 Diff with Open File（与打开的文件进行差异比较）()，然后点击 Accept（接受）。

10. 返回到 Roman Numerals 应用的浏览器标签页，输入 45，然后按 Enter 键。

    新的结果页面应该与索引页面的样式一致：

    

如需验证是否已完成以下目标，请点击检查我的进度： 使用 Gemini Code Assist 优化应用的视觉设计

结束实验

完成实验后，请点击结束实验。Qwiklabs 会移除您使用过的资源并为您清理帐号。

系统会提示您为实验体验评分。请选择相应的评分星级，输入评论，然后点击提交。

星级的含义如下：

• 1 颗星 = 非常不满意
• 2 颗星 = 不满意
• 3 颗星 = 一般
• 4 颗星 = 满意
• 5 颗星 = 非常满意

如果您不想提供反馈，可以关闭该对话框。

如果要留言反馈、提出建议或做出更正，请使用支持标签页。

恭喜！

在本实验中，您学习了如何执行以下任务：

• 使用 Cloud Workstations 搭建云端应用开发环境。
• 使用 Gemini Code Assist 解释代码。
• 使用 Gemini Code Assist 生成单元测试。
• 向 Gemini 发出提示，优化应用的外观。
• 使用 Gemini Code Assist 提高代码的可读性。
• 使用 Gemini Code Assist 为代码添加英语或其他语言的注释。

后续步骤/了解详情

• Gemini Code Assist 概览
• 使用 Gemini Code Assist 编写代码

版权所有 2024 Google LLC 保留所有权利。Google 和 Google 徽标是 Google LLC 的商标。其他所有公司名称和产品名称可能是其各自相关公司的商标。