
始める前に
- ラボでは、Google Cloud プロジェクトとリソースを一定の時間利用します
- ラボには時間制限があり、一時停止機能はありません。ラボを終了した場合は、最初からやり直す必要があります。
- 画面左上の [ラボを開始] をクリックして開始します
Enable the Cloud AI Companion API and grant the necessary IAM roles
/ 20
Build the web app
/ 40
Explain and run the query
/ 40
Google Cloud 開発者は通常、Google Cloud のさまざまなプロダクトやサービスを使って日々の業務を行っています。これらのプロダクトを使うことで、クラウド上でアプリケーションを開発、テスト、デプロイ、管理できます。インタラクティブなチャット、コーディング支援、組み込みのインテグレーションといった Gemini のアシスト機能を使えば、Google Cloud プロダクトを使う際の生産性を高めることができます。
このラボでは、Gemini を使用して次のタスクを行います。
各ラボでは、新しい Google Cloud プロジェクトとリソースセットを一定時間無料で利用できます。
[ラボを開始] ボタンをクリックします。ラボの料金をお支払いいただく必要がある場合は、表示されるポップアップでお支払い方法を選択してください。 左側の [ラボの詳細] パネルには、以下が表示されます。
[Google Cloud コンソールを開く] をクリックします(Chrome ブラウザを使用している場合は、右クリックして [シークレット ウィンドウで開く] を選択します)。
ラボでリソースが起動し、別のタブで [ログイン] ページが表示されます。
ヒント: タブをそれぞれ別のウィンドウで開き、並べて表示しておきましょう。
必要に応じて、下のユーザー名をコピーして、[ログイン] ダイアログに貼り付けます。
[ラボの詳細] パネルでもユーザー名を確認できます。
[次へ] をクリックします。
以下のパスワードをコピーして、[ようこそ] ダイアログに貼り付けます。
[ラボの詳細] パネルでもパスワードを確認できます。
[次へ] をクリックします。
その後次のように進みます。
その後、このタブで Google Cloud コンソールが開きます。
Cloud Shell は、開発ツールが組み込まれた仮想マシンです。5 GB の永続ホーム ディレクトリを提供し、Google Cloud 上で実行されます。Cloud Shell を使用すると、コマンドラインで Google Cloud リソースにアクセスできます。gcloud
は Google Cloud のコマンドライン ツールで、Cloud Shell にプリインストールされており、Tab キーによる入力補完がサポートされています。
Google Cloud Console のナビゲーション パネルで、「Cloud Shell をアクティブにする」アイコン()をクリックします。
[次へ] をクリックします。
環境がプロビジョニングされ、接続されるまでしばらく待ちます。接続の際に認証も行われ、プロジェクトは現在のプロジェクト ID に設定されます。次に例を示します。
有効なアカウント名前を一覧表示する:
(出力)
(出力例)
プロジェクト ID を一覧表示する:
(出力)
(出力例)
ラボの認証情報を使用して Google Cloud コンソールにログインし、Cloud Shell ターミナル ウィンドウを開きます。
Cloud Shell で次のコマンドを実行して、プロジェクト ID を設定します。
ログインに使用した Google ユーザー アカウントを環境変数に保存します。
Gemini 用の Cloud AI Companion API を有効にします。
Gemini を使用できるよう、必要な IAM ロールを Google Cloud の Qwiklabs ユーザー アカウントに付与します。
これらのロールを追加すると、Gemini の支援機能を利用できるようになります。
[進行状況を確認] をクリックして、目標に沿って進んでいることを確認します。
このラボでは、「Cymbal Superstore」という食料品用のウェブアプリを使用します。このラボの後続のタスクでは、Gemini を使用して、このアプリの新機能を開発、デプロイします。このタスクでは、このアプリのフロントエンドとバックエンドのコンポーネントを構築します。
以下のコマンドと後続の 2 つのサブタスクは、Cloud Shell で実行します。
次のコマンドを実行して、Docker 認証情報ヘルパーを実行します。
続行を確認するメッセージが表示されたら、「Y」と入力します。
cymbal-superstore
アプリケーション コードをダウンロードします。
ウェブアプリのバックエンドは、フロントエンドが商品のフェッチと更新に使用する Inventory API を実装します。
バックエンド アプリケーション コンテナ イメージを構築するには、次のコマンドを実行します。
バックエンド コンテナ イメージを Artifact Registry に push します。
次のコマンドを実行して、バックエンドを Cloud Run にサービスとしてデプロイします。
gcloud run deploy
コマンドの出力に表示された Service URL
の値をコピーします。
Cloud Shell ターミナルでコマンドを実行して、フロントエンドを構築します。
バックエンドの Cloud Run エンドポイントに接続するようにフロントエンドのコードを更新します。
a. Cloud Shell のメニューバーで、[エディタを開く] をクリックします。
b. エディタの [View] メニューで、[Toggle hidden files] をクリックします。
c. エクスプローラのフォルダリストで、cymbal-superstore
を選択します。
d. frontend
フォルダを開き、.env.production
ファイルを選択します。
e. ファイル内で、REACT_APP_INVENTORY_API_URL
の値を、前にコピーした Cloud Run バックエンド サービスのエンドポイント URL の値を貼り付けて置き換えます。
フロントエンドを構築するには、[ターミナルを開く] をクリックし、Cloud Shell で次のコマンドを実行します。
次のコマンドを実行して、フロントエンドのウェブアプリを Cloud Storage にアップロードします。
ブラウザでタブを開き、次の URL に移動します。
ウェブアプリに、Cymbal Superstore のホームページが表示されます。
[New Arrivals] をクリックします。
プレースホルダ商品を含む模擬フロントエンド ページが表示されます。これは想定内の動作です。このラボの後続のタスクでバックエンドの Inventory API コードを実装して、新しい商品ページを提供します。
[進行状況を確認] をクリックして、目標に沿って進んでいることを確認します。
次に、Gemini を使用してウェブアプリのバックエンドに機能を追加しましょう。
このタスクでは、Gemini にコード補完を指示するプロンプトを出し、アプリに /newproducts
エンドポイントを実装します。
/newproducts
エンドポイントを作成するCloud Shell エディタで、backend/index.ts
ファイルを開きます。
index.ts
ソースコード ファイルで 91 行目までスクロールすると、/newproducts
エンドポイントのプレースホルダ コメントが表示されます。
プレースホルダ コメントを次の Gemini プロンプトに置き換えます。
Gemini に関数コードの生成のプロンプトを出すために、コメント全体を選択してから電球アイコン()をクリックします。
その他の操作メニューで [Gemini: Generate code] を選択します。
生成されたコードの上にカーソルを合わせ、Gemini ツールバーで [Accept] をクリックします。
Gemini によって、/newproducts
エンドポイントの関数コードが入力されます。
生成されたコードは次のようになります。
生成されたコードが上の例と同等でない場合は、index.ts
内のコードを前のステップのコードに置き換えます。
npm
を使用して、/newproducts
バックエンドのエンドポイントをローカルでテストしましょう。
バックエンドを実行する前に、PORT 環境変数を設定する必要があります。
Cloud Shell エディタのメニューバーで、[View] > [Command Palette...] を選択します。
コマンド パレットで「user settings json」と入力し、リストから [Preferences: Open User Settings (JSON)] を選択します。
次の属性を追加して、JSON オブジェクトを更新します。
を追加してください。属性を追加すると、属性オブジェクトは次のようになります。
Cloud Shell ターミナルで、Firestore にアクセスするアプリケーションを認証します。
指示に従ってリンクをクリックして Google Cloud アカウントを認証し、認証コードをコピーしてリクエストされた場所に貼り付けます。
次のコマンドを実行して、バックエンド サーバーを起動します。
バックエンドの Inventory API サーバーが起動します。次のテキストが表示されたら、準備が完了しています。
/newproducts
エンドポイントを呼び出すCloud Shell ターミナルのメニューバーで、[+] をクリックして新しいターミナルを開きます。
次のコマンドを実行して、API エンドポイントを呼び出します。
コマンドから次のエラーが返されます。
元のターミナル ウィンドウに戻って、バックエンドからログに記録された例外トレースを表示します。
トレースを確認すると、例外の根本原因は次のとおりであると考えられます。
Cloud Shell エディタで、backend/index.ts
ファイルを開きます。
Gemini Code Assist のチャット ウィンドウを開くには、コードエディタのメニューバーで [Gemini Code Assist Chat] をクリックします。
[Ask Gemini] プロンプトで次のプロンプトを入力して、送信アイコン()をクリックします。
Gemini からこのエラーの説明と修正案が返されます。以下は、回答の一例です。
Gemini also provides a solution to fix the error.
このエラーを修正するには、1 つの不等式フィルタのみを使用します。
backend/index.ts
ファイルで、quantity
フィルタを削除するために、/newproducts
ハンドラから次のコードを削除します。
このコードを削除すると、タイムスタンプをチェックする不等式フィルタは 1 つだけになり、数量が 0 の商品は API レスポンスからフィルタされなくなります。
数量が 0 の商品を削除するために、次の if
ステートメントを使用して、products.forEach()
内のコードをラップします。
if ステートメントでコードをラップすると、products.forEach()
コードは次のようになります。
backend/index.ts
ファイルを保存します。
ターミナルで次のコマンドを実行して、バックエンド API サーバーを再起動します。
別の bash
ターミナルに切り替えて、curl コマンドを再実行します。
バックエンド API は、最近追加された商品のリストを含む json
配列を返します。
元の Cloud Shell ターミナルに戻って、Ctrl+C キーを押してアプリケーションを終了します。
前のステップに沿って、更新されたバックエンド サービスのコンテナ イメージを再構築し、そのイメージをレジストリに push してバックエンド サービスを Cloud Run に再デプロイします。便宜上、ここでは各ステップを繰り返します。
Cloud Shell で、新しいターミナルを開くか、すでに開いているターミナルを使用します。
次のコマンドを実行して、バックエンドのコンテナ イメージを構築してリポジトリに push し、Cloud Run にバックエンド サービスをデプロイします。
ブラウザでタブを開き、次の URL に移動します。
ウェブアプリに、Cymbal Superstore のホームページが表示されます。
[New Arrivals] をクリックします。
このページには、前のタスクで実装した /newproducts
エンドポイントからのレスポンスで返された商品が表示されます。
このタスクでは、Gemini を使用して新商品用の API のテストをバックエンドで作成します。
Cloud Shell エディタで、backend/index.test.ts
ファイルを開きます。
Gemini Code Assist のチャット ウィンドウを開くには、コードエディタのメニューバーで [Gemini Code Assist Chat] をクリックします。
Gemini に GET /newproducts
エンドポイントのテストの作成のプロンプトを出すために、以下のプロンプトを入力して、送信アイコン()をクリックします。
Gemini は生成されたテストコードを返します。/newproducts
エンドポイントの describe
コードブロックをコピーして、backend/index.test.ts
ファイルに貼り付けます。
Cloud Shell ターミナルで次のコマンドを実行して、テストを実行します。
test
コマンドの出力が示すように、すべてのテストが実行されて、すべてのテストに合格しました。
このタスクでは、Gemini を使用して BigQuery のテーブルにデータをアップロードし、そのテーブルからデータをフェッチするクエリを構築します。
Google Cloud コンソールのナビゲーション メニュー()で、[BigQuery] を選択します。
BigQuery の [エクスプローラ] ペインで cymbal_sales
データセットを開いて cymbalsalestable
テーブルを選択します。
Gemini Cloud Assist チャット ウィンドウを開くには、Google Cloud コンソールのトップメニューで Gemini を開くアイコン()をクリックし、[Start Chatting] をクリックします。
Gemini プロンプトとして以下のテキストを入力し、送信アイコン()をクリックします。
Gemini からの回答を確認します。回答には、Cloud Storage から BigQuery にデータをアップロードするために実行できる bq load
コマンドが含まれています。
Cloud Shell で、次のコマンドを実行します。
BigQuery UI で更新()をクリックします。
テーブルのスキーマを表示します。
[クエリ] をクリックします。
デフォルトのクエリを次のように置き換えます。
[実行] をクリックして、このクエリを実行します。
[結果] タブで、テーブルのデータを含むクエリの結果を確認します。このテーブルには、Cymbal Superstore ウェブ アプリケーションの商品販売の週次集計販売データのサンプルが含まれています。
Gemini を使用して、週ごとの販売合計額のクエリを生成してみましょう。
翌週 8 月 12 日の販売に関するクエリの生成を Gemini にプロンプトで指示するために、[クエリ] フィールドで前に入力したクエリの下に空白行を挿入し、その空白行の左側にある Gemini アイコン()をクリックします。
[Gemini を使用して SQL を生成] ダイアログで、次のように入力します。
[生成] をクリックします。
Gemini がクエリを生成するまで待ちます。[挿入] をクリックします。
クエリを選択して右クリックし、[現在の選択内容を説明する] を選択します。左余白にある Gemini のマジック ペンシルをクリックすることもできます。
Cloud Assist のチャット ウィンドウに、SQL クエリの説明が表示されます。
[実行] をクリックして、このクエリを実行します。
クエリの結果は、ページの下部にある [結果] タブに表示されます。
[進行状況を確認] をクリックして、目標に沿って進んでいることを確認します。
Spanner インスタンスと販売トランザクションのサンプルデータを含むデータベースは、このラボ用に事前にプロビジョニングされています。
このタスクでは、Gemini を使用して SQL クエリを生成し、transactions
データベースからデータをフェッチします。
Google Cloud コンソール メニューの [データベース] で、[Spanner] をクリックします。
リンクをクリックして、Spanner インスタンス「Cymbal Superstore Transactions
」を開きます。
[transactions-db] をクリックして、データベースを開きます。
左側のペインで、[データベース] の下にある [Spanner Studio] をクリックします。
[無題のクエリ] タブをクリックして選択します。
[クエリ] ボックスで Gemini を使用して SQL を生成するアイコン()をクリックし、「SELECT」と入力して [生成] をクリックします。
Gemini から SQL の候補が返されるまで待ちます。
候補を採用するには、[挿入] をクリックします。
WHERE
句が存在する場合は、SQL クエリから削除します。
[実行] をクリックして、このクエリを実行します。
クエリの結果を確認します。
Gemini を使用して、Google Cloud のサービスを運用および管理することもできます。このタスクでは、Gemini の指示に沿って、Cloud Run で実行されるインベントリ バックエンドのログを表示します。
Google Cloud コンソールで Cloud Assist チャット ウィンドウを開くには、トップメニュー バーで Gemini Cloud Assist チャット アイコン()をクリックします。
Gemini プロンプトとして以下を入力し、送信アイコン()をクリックします。
Gemini の回答に示される手順に沿って、Cloud Run サービス inventory
のログを表示します。
このラボでは、以下の操作について学習しました。
ラボでの学習が完了したら、[ラボを終了] をクリックします。ラボで使用したリソースが Qwiklabs から削除され、アカウントの情報も消去されます。
ラボの評価を求めるダイアログが表示されたら、星の数を選択してコメントを入力し、[送信] をクリックします。
星の数は、それぞれ次の評価を表します。
フィードバックを送信しない場合は、ダイアログ ボックスを閉じてください。
フィードバック、ご提案、修正が必要な箇所については、[サポート] タブからお知らせください。
Copyright 2024 Google LLC All rights reserved. Google および Google のロゴは、Google LLC の商標です。その他すべての社名および製品名は、それぞれ該当する企業の商標である可能性があります。
このコンテンツは現在ご利用いただけません
利用可能になりましたら、メールでお知らせいたします
ありがとうございます。
利用可能になりましたら、メールでご連絡いたします
1 回に 1 つのラボ
既存のラボをすべて終了して、このラボを開始することを確認してください