1. 本实验的目标
在本实践实验室中，您将安装 Gemini CLI 并进行身份验证，然后尝试一些基本的使用情形。
学习内容
- 了解 Gemini CLI 的基础知识。
- 了解如何使用 Gemini CLI 执行基本任务。
2. 准备工作
- 如果您还没有可用的项目，则需要在 GCP 控制台中创建一个新项目。
- 在本实验中，我们将使用 GCP Cloud Shell 执行以下步骤。打开 Cloud Shell 并使用 Cloud Shell 设置项目。
- 按 Cloud Shell 编辑器按钮，打开 GCP Cloud Shell 编辑器。如果您看到“授权 Shell”弹出式窗口，请点击以授权 Cloud Shell 编辑器。
- 您可以使用以下命令检查项目是否已通过身份验证。
gcloud auth list
- 在 Cloud Shell 中运行以下命令，以确认您的项目
gcloud config list project
- 如果项目未设置，请使用以下命令进行设置
gcloud config set project <YOUR_PROJECT_ID>
- 我们需要启用一些服务才能运行本实验。在 Cloud Shell 中运行以下命令。
gcloud services enable aiplatform.googleapis.com
3. 安装和身份验证
安装
Gemini CLI 预安装在 GCP Cloud Shell 编辑器中。如果您想使用该功能，可以立即开始。
您还可以在本地环境中安装 Gemini CLI。
如需在本地环境中安装 Gemini CLI，您需要 Nodejs 20 及更高版本。您可以执行以下命令来安装 Gemini CLI。
npm install -g @google/gemini-cli
如需升级到最新版本，请使用以下命令
npm update -g @google/gemini-cli
在终端中执行以下命令，运行 Gemini。
gemini
Authentication
如果您使用的是 GCP Cloud Shell 编辑器，那么在运行 Cloud Shell 时，如果您接受对 Cloud Shell 进行身份验证，则应该已经完成身份验证。
如果您在本地运行，但尚未进行身份验证，则会看到如下所示的界面。
您也可以输入 /auth 以显示以下界面。
图 1：Gemini CLI 将提供 3 种身份验证方法。
首先使用 /quit 命令退出 Gemini CLI。
使用 Google 进行身份验证：在控制台中运行 /auth 会显示身份验证选项。从选项中选择“使用 Google 账号登录”。然后，浏览器中会显示 Google 身份验证界面。您在该处完成登录后，控制台也会通过身份验证。虽然身份验证已完成，但要实际使用 Gemini CLI，您需要指定一个 Google Cloud 项目。返回到控制台屏幕，然后运行以下命令以指定项目（也可以在 .env 文件中指定项目）。
export GOOGLE_CLOUD_PROJECT=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
使用 API 密钥进行身份验证：如需使用 API 密钥进行身份验证，您需要具备 API 密钥。您可以从 aistudio.google.com 生成 API 密钥。API 密钥颁发后，请在控制台中按如下方式进行设置：
export GEMINI_API_KEY=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
通过 Vertex AI 进行身份验证：如需通过 Vertex AI 使用 Gemini API，请按以下步骤操作。
首先，使用以下命令向 Google Cloud 进行身份验证。
gcloud auth application-default login
之后，在终端中执行以下命令
export GOOGLE_GENAI_USE_VERTEXAI=true export GOOGLE_CLOUD_PROJECT=Your GCP Project Name export GOOGLE_CLOUD_LOCATION=us-central1
4. 试用 Gemini CLI
现在，您可以开始试用 Gemini CLI 了。不妨尝试以下使用情形。
首先，创建一个项目文件夹 my_cli_project。
mkdir my_cli_project cd my_cli_project
从项目文件夹运行 Gemini 可让您在该文件夹的边界内安全地运行 Gemini CLI。
- 运行简单提示：
What is the weather today in Tokyo
这样一来，您应该就能看到东京的天气了。请注意，自动运行此操作会使用
GoogleSearch 工具！
- 确认已安装的工具：运行以下命令。您应该能够看到已安装的工具列表。
/tools
图 2：显示的工具列表
- 从本地新闻网站获取新闻：（例如，https://mainichi.jp，将其更改为您的本地新闻网站）。
Get me the news summary from https://mainichi.jp/
您应该会收到来自本地新闻网站的新闻摘要。请注意，代理会自动使用 WebFetch 工具从新闻网站下载内容并创建摘要。
- 运行多步任务（请将其更改为您的本地网站）：从 https://mainichi.jp/ 获取新闻，仅过滤体育新闻，然后为我总结这些新闻。
Get me the news from https://mainichi.jp/ and filter in only the sports news and summarize that for me.
- 运行系统命令：如需运行系统命令，请按 !并输入命令。如需恢复为正常模式，请键入 ! 输入提示
Type ! and Enter key. This starts the command mode. ls pwd Type ! to go back to normal mode.
- 创建井字棋游戏 输入以下提示（英文版）。
Please develop a Tic-Tac-Toe game that meets the following requirements. The solution should be split into separate HTML, CSS, and JavaScript files, with the JavaScript file handling the majority of the game logic independently.
1. General Requirements
The game format should be a match between one human player and one computer player.
When the game ends (a win/loss is determined, or a draw occurs), display "GAME OVER" on the screen along with the winner's name ("X wins!," "O wins!," or "Draw!").
Provide a "Reset" button to start a new game.
2. HTML (index.html)
Create the basic page structure.
The game board should consist of nine squares (cells). Each cell should be clickable and display the player's mark (X or O).
Provide an element to display the game status (e.g., current player's turn, game result).
Place the reset button for starting a new game.
Link the CSS and JavaScript files appropriately.
3. CSS (style.css)
Style the game board and cells so they are visually clear and easy to understand.
Add borders to the cells to indicate they are clickable areas.
Set appropriate font size and color for the X and O marks to ensure good visibility.
Style the game status display and the "GAME OVER" message to make them stand out.
Consider responsive design to ensure appropriate display on various screen sizes.
4. JavaScript (script.js)
It is strongly requested that the JavaScript file handle all the game logic.
4.1. Game State Management
Define an array or object to manage the game board state (e.g., ['', '', '', '', '', '', '', '', '']).
Define a variable to track the current player (X or O). The initial value should be X.
Define a boolean value to track whether the game has ended (win/loss or draw).
4.2. Game Initialization
Create a function to initialize the game board upon page load.
Clear all cells.
Set the current player to X.
Reset the game end flag.
Clear the game result display.
4.3. Player Interaction
Set up event listeners for cell clicks.
Only place the current player's mark and update the board state if the clicked cell is empty.
After placing the mark, execute the following:
Call the win/draw check function.
If a winner is not yet determined, switch the player (X to O, O to X).
4.4. Computer AI Logic
Create a function that is called when it is the computer's (O) turn.
Implement a simple logic where the computer randomly selects an empty cell to place its mark. (While difficulty can be increased in the future, random selection is sufficient initially.)
After the computer places its mark, perform the win/draw check, and if the game is not over, switch the turn back to the human player.
4.5. Win/Draw Determination
Create a function that determines the win/draw status based on the current board state.
Check the following winning conditions:
Three rows
Three columns
Two diagonals
If a player meets a winning condition, declare that player the winner.
If all cells are filled and no player meets a winning condition, declare a draw.
If a win or draw is determined, set the game end flag to true and display the "GAME OVER" message and the result.
4.6. Game End Handling
When the game ends (win/loss or draw), prevent further clicks on the cells.
Display the text "GAME OVER" followed by the message "X wins!," "O wins!," or "Draw!" underneath it.
4.7. Reset Functionality
When the "Reset" button is clicked, call the function to return the game to its initial state.
输入以下提示（日语版）
以下の要件を満たす三目並べ（Tic-Tac-Toe）ゲームを開発してください。HTML、CSS、JavaScriptの各ファイルに分割し、JavaScriptはゲームロジックの大部分を単独で処理するようにしてください。
1. 全体要件
プレイヤーは人間1人、コンピューター1人の対戦形式とする。
ゲーム終了時（勝敗が決まった場合、または引き分けの場合）は、画面上に「GAME OVER」と表示し、勝者の名前（「Xの勝利！」「Oの勝利！」または「引き分け！」）も併記すること。
新しいゲームを開始するための「リセット」ボタンを設けること。
2. HTML (index.html)
基本的なページ構造を作成してください。
ゲームボードは、9つのマス目（セル）で構成されるようにしてください。各セルはクリック可能で、プレイヤーのマーク（XまたはO）が表示されるようにします。
ゲームの状態（現在のプレイヤーのターン、ゲーム結果など）を表示する要素を設けてください。
ゲームをリセットするためのボタンを配置してください。
CSSファイルとJavaScriptファイルを適切にリンクしてください。
3. CSS (style.css)
ゲームボードとマス目が視覚的に分かりやすいようにスタイルを設定してください。
マス目には枠線をつけ、クリック可能な領域であることがわかるようにする。
XとOの表示は、見やすいように適切なフォントサイズと色を設定する。
ゲームの状態表示、および「GAME OVER」メッセージが目立つようにスタイルを設定してください。
レスポンシブデザインを考慮し、様々な画面サイズで適切に表示されるようにしてください。
4. JavaScript (script.js)
JavaScriptファイルがゲームロジックの全てを処理することを強く要請します。
4.1. ゲームの状態管理
ゲームボードの状態を管理する配列またはオブジェクト（例: ['', '', '', '', '', '', '', '', '']）を定義してください。
現在のプレイヤー（XまたはO）を追跡する変数を定義してください。初期値はXとする。
ゲームが終了したかどうか（勝敗が決まったか、引き分けか）を追跡するブール値を定義してください。
4.2. ゲームの初期化
ページ読み込み時にゲームボードを初期化する関数を作成してください。
全てのマス目を空にする。
現在のプレイヤーをXに設定する。
ゲーム終了フラグをリセットする。
ゲーム結果表示をクリアする。
4.3. プレイヤーの操作
マス目をクリックした際のイベントリスナーを設定してください。
クリックされたマス目が空の場合のみ、現在のプレイヤーのマークを配置し、ボードの状態を更新する。
マークを配置した後、以下の処理を実行する。
勝敗判定関数を呼び出す。
勝敗が決まっていない場合、プレイヤーを交代する（XからO、OからXへ）。
4.4. コンピューターの思考ロジック
コンピューター（O）が手番の時に呼び出される関数を作成してください。
コンピューターは、空いているマス目の中からランダムに選択してマークを配置するシンプルなロジックを実装してください。（将来的に難易度を上げることも考慮できるが、最初はランダムで十分です）
コンピューターがマークを配置した後、勝敗判定を行い、勝敗が決まっていない場合はプレイヤーを人間に戻す。
4.5. 勝敗判定
現在のボードの状態に基づいて勝敗を判定する関数を作成してください。
以下の勝利条件をチェックする。
3つの行
3つの列
2つの対角線
勝利条件を満たすプレイヤーがいる場合、そのプレイヤーの勝利とする。
全てのマス目が埋まり、かつ勝利条件を満たすプレイヤーがいない場合、引き分けとする。
勝敗または引き分けが決まった場合、ゲーム終了フラグをtrueに設定し、「GAME OVER」メッセージと結果を表示する。
4.6. ゲーム終了時の処理
ゲームが終了した場合（勝敗が決まったか、引き分けか）は、それ以上マス目をクリックできないようにする。
「GAME OVER」というテキストと、その下に「Xの勝利！」「Oの勝利！」または「引き分け！」というメッセージを表示する。
4.7. リセット機能
「リセット」ボタンがクリックされた際に、ゲームを初期状態に戻す関数を呼び出す。
在同一文件夹中启动终端并启动 HTTP 服务器，
python3 -m http.server 8080
在浏览器中打开（如果您在 Cloud Shell 中，请按住 Ctrl 键并点击）：
http://localhost:8080
5. 运行 Gemini CLI 扩展程序
Gemini CLI 提供了一些非常实用的扩展程序，可以轻松安装和运行。借助这些扩展程序，您可以连接到各种服务并使用它们。https://geminicli.com/extensions/，其中列出了可用的扩展程序，而且每天都在增加。如需详细了解 Gemini CLI 扩展程序，请参阅此页面：https://medium.com/google-cloud/gemini-cli-tutorial-series-part-11-gemini-cli-extensions-69a6f2abb659
安装 Gemini Nanobanana 扩展程序并运行它。
如需安装扩展程序，请运行以下命令。
gemini extensions install https://github.com/gemini-cli-extensions/nanobanana
安装扩展程序后，重启 Gemini CLI，您将能够从 Gemini CLI 运行以下 nanobanana 命令。
/generate- 生成单张或多张图片，并提供样式/变体选项/edit- 图片编辑/restore- 图片修复/icon- 生成多种尺寸的应用图标、网站图标和界面元素/pattern- 生成用于背景的无缝图案和纹理/story- 生成按顺序排列的图片，讲述视觉故事或流程/diagram- 生成技术图表、流程图和架构模型/nanobanana- 自然语言界面
我们来运行几个命令
在运行 Nanobanana 之前，您必须从 aistudio.google.com 获取 Gemini API 密钥，并在此处进行设置，
export NANOBANANA_GEMINI_API_KEY=YOUR_API_KEY
点击
# Single image /generate "a watercolor painting of a fox in a snowy forest" # Multiple variations with preview /generate "sunset over mountains" --count=3 --preview # Style variations /generate "mountain landscape" --styles="watercolor,oil-painting" --count=4 # Specific variations with auto-preview /generate "coffee shop interior" --variations="lighting,mood" --preview
日语版
# Single image /generate "雪の森のキツネの水彩画" # Multiple variations with preview /generate "山にかかる夕焼け" --count=3 --preview # Style variations /generate "山岳風景" --styles="watercolor,oil-painting" --count=4 # Specific variations with auto-preview /generate "コーヒーショップのインテリア" --variations="lighting,mood" --preview
修改图片
将文件名更改为您的本地文件名。
/edit my_photo.png "change the color of fox to blue"
6. 完成
大功告成！祝贺您！如需了解详情，请参阅以下资源。