ソフトウェア開発ライフサイクル全体における Duet AI の使用

1. 概要

Google Cloud デベロッパーは通常、Google Cloud のさまざまなプロダクトやサービスを使って日々の業務を行っています。これらのプロダクトを使うことで、クラウド上でアプリケーションを開発、テスト、デプロイ、管理できます。Duet AI のインタラクティブなチャット、コード アシスタンス、組み込みのインテグレーションにより、デベロッパーは Google Cloud のプロダクトを使用する際の生産性を向上させることができます。

このラボでは、Duet AI の支援機能を使用して「Cymbal Superstore」をデプロイします。ウェブアプリですその後、新しい機能を開発してデプロイし、アプリのフロントとバックエンドを構築します。また、アプリのテストを作成する際に Duet のサポートを受ける方法と、Duet を他の Google Cloud ツールと統合する方法についても説明します。

目標

次の方法を学習します。

  • Duet AI の助けを借りて既存のウェブ アプリケーションを強化します。
  • 構築したアプリケーションを Cloud Run にデプロイする。
  • Duet AI にアプリケーションのエラーの説明と修正を求めるプロンプトを入力します。
  • Duet AI を利用してアプリケーションのテストを開発します。
  • Duet AI のサポートを受けてアプリケーション ログを表示します。

前提条件

  • Google Cloud Platform アカウントと課金が有効になっているプロジェクト
  • Linux の基本経験

2. セットアップ

このセクションでは、このラボを始めるために必要なすべての手順について説明します。

プロジェクトを作成

クリーンアップを簡単にするために、新しい Google Cloud プロジェクトを作成しましょう。

  • https://console.cloud.google.com に移動します。
  • プロジェクト セレクタのプルダウンをクリックします。
  • [プロジェクトを作成] を選択
  • 「コンテナ入門」など、覚えやすい名前を付けます。

Google Cloud プロジェクトで Duet AI を有効にする

Google Cloud プロジェクトで Duet AI API を有効にします。以下の手順に沿って操作してください。

  1. https://console.cloud.google.com にアクセスしてダッシュボードに移動し、このラボで使用する Google Cloud プロジェクトが選択されていることを確認します。右上にある Duet AI アイコンをクリックします。

a4d8a7253b056abb.png

  1. コンソールの右側に Duet AI のチャット ウィンドウが開きます。下図の [有効にする] ボタンをクリックします。[有効にする] ボタンが表示されず、Chat インターフェースが表示される場合は、プロジェクトで Duet AI がすでに有効になっている可能性があります。その場合は、直接次のステップに進みます。

58296b10f18b7a37.png

  1. Duet AI を有効にすると、クエリを 1 つまたは 2 つ実行してテストできます。いくつかのサンプルクエリがいくつか表示されますが、「Cloud Run とは何か」のような質問をしてみてください。

8953fb4afeeddb1a.png

Duet AI が質問に対する回答を返します。右上にある _ アイコンをクリックすると、Duet AI チャット ウィンドウを閉じることができます。

Cloud Shell IDE で Duet AI を有効にする

この Codelab の以降の部分では、Cloud Shell IDE を使用します。Cloud Shell IDE で Duet AI を有効にして構成する必要があります。手順は次のとおりです。

  1. 下に示すアイコンで Cloud Shell を起動します。Cloud Shell インスタンスの起動には 1～2 分かかる場合があります。

3b59c357d06c5ab1.png

  1. [エディタ] ボタンまたは [エディタを開く] ボタン（該当する場合）をクリックし、Cloud Shell IDE が表示されるまで待ちます。新しい "new"従来のエディタではありません。

a54576c01be31a97.png

  1. 以下に示すように、下部のステータスバーにある [Cloud Code - Sign in] ボタンをクリックします。指示に従ってプラグインを承認します。「Cloud Code - プロジェクトなし」と表示される場合ステータスバーでそのプロジェクトを選択し、作業するプロジェクトのリストから特定の Google Cloud プロジェクトを選択します。

9b77ab79e8c135e6.png

  1. 右下隅にある [Duet AI] ボタンをクリックし、Cloud AI Companion API を有効にした適切な Google Cloud プロジェクトを選択します。

afa42f64a331ad70.png

  1. Google Cloud プロジェクトを選択して承認したら、ステータスバーの Cloud Code ステータス メッセージでそれを確認できます。また、右側にあるステータスバーでも Duet AI が有効になっていることを確認します。

11656bd6a7ddfea4.png

Duet AI を使用する準備ができました。

3. Duet AI の使用

このラボでは、ウェブアプリを作成します。このラボでは、Duet AI を試すためのさまざまな場所を取り上げています。興味がある方は、ラボのどこでも Duet に質問することもできます。

たとえば、Terraform を使用して基本的なアプリケーションを作成し、デプロイします。Terraform とは何かわからない場合は、Duet に質問できます。各ステップの内容を理解したい場合は、Duet で説明できます。実際にコードを開いて特定の行について質問したい場合は、Duet をお試しください。

4. ウェブアプリをビルドする

このラボでは「Cymbal Superstore」を使用しますウェブアプリですこのラボの以降のタスクでは、Duet AI を使用してこのアプリの新機能を開発し、デプロイします。Duet AI が既存のコードの理解にどのように役立つかを確認するには、まず既存のコードを操作する必要があります。では、このアプリのフロントエンドとバックエンドのコンポーネントを構築します。

このプロジェクトでは、Cloud Shell と Cloud Shell エディタ間を移動します。画面の上部にあるボタンを使用すると簡単に変更できます。

750038c738f1f405.png

環境を構成する

Cloud Shell でコマンドを実行します。

  1. プロジェクト ID を設定します。
gcloud config set project <Google Cloud Project ID>
  1. 次のコマンドを実行して、Docker 認証情報ヘルパーを実行します。
gcloud auth configure-docker
  1. 続行を確認するメッセージが表示されたら、「Y」と入力します。
  2. 「Cymbal Superstore」をダウンロードするにはCloud Shell のルート ディレクトリから次のコマンドを実行します。GitHub から Cymbal Superstore のコードを取得します。
git clone https://github.com/GoogleCloudPlatform/cymbal-superstore
  1. このコードを適切に実行するには、いくつかの API を有効にする必要があります。Cloud Shell で、以下のコマンドを入力します。
gcloud services enable cloudresourcemanager.googleapis.com compute.googleapis.com artifactregistry.googleapis.com serviceusage.googleapis.com run.googleapis.com bigquery.googleapis.com
  1. ダウンロードしたコードの Terraform ディレクトリに移動します。
cd cymbal-superstore/terraform
  1. このラボでは Spanner を使用しないため、Spanner をインストールしないバージョンの Terraform の手順を使用します。Cloud Shell で、以下のコマンドを入力します。
mv main.tf.nospanner main.tf
  1. Terraform コマンドを実行するたびにプロジェクト名と番号を入力する手間を省くため、この terraform ディレクトリに terraform.tfvars という名前のファイルを作成します。このファイルに以下の情報を 2 行追加し、ファイルを保存します。この情報はプロジェクト ダッシュボードで確認できます。
project_id="Your project id"
project_number=Your project number
  1. 次の行を使用して Terraform を初期化します。
terraform init
  1. 最後に、次のコマンドを使用して Terraform リソースをプロジェクトにデプロイします。「yes」と入力するよう求められる場合があります。このデプロイ中に行われます。この処理には 10 分ほどかかるため、https://github.com/GoogleCloudPlatform/cymbal-superstore/blob/main/assets/architecture.png にあるアーキテクチャ図を確認することをおすすめします。また、既存のコードを確認し、Duet を使用してそのコードを理解してもらうこともできます。
terraform apply

このコマンドが正常に完了すると、次のような出力が表示されます。

9c9d2378167312eb.png

  1. 出力でバックエンド inventory_cr_endpoint と通信するようにフロントエンドを更新します。これを行うには、inventory_cr_endpoint の値をコピーして cymbal-superstore/frontend/.env.production を開き、REACT_APP_INVENTORY_URL の値を置き換えます。
  2. terraform apply を再実行します。更新は 1 分ほどで終わります。更新されたバックエンド URL を使用してフロントエンド React アプリが Cloud Storage に再デプロイされます。
  3. ブラウザで frontend_ip を開きます。Cymbal Superstore のフロントエンドが表示されます。変更が反映されるまで数分かかることがあります。そのため、複数回確認する必要がある場合があります。

b864d3efe9a26eaa.png

  1. Cymbal のホームページの左側にある [新着] をクリックします。プレースホルダ商品を含む模擬フロントエンド ページが表示されます。これは想定どおりの動作です。このラボの次のタスクで、新しい商品ページを表示するためのバックエンド Inventory API コードを実装します。

f4d7579f73ee8ed2.png

5. ウェブアプリ バックエンドを変更する

Duet AI を使用して、ウェブアプリのバックエンドに機能を追加しましょう。

このタスクでは、アプリに /newproducts エンドポイントを実装するためにコード補完を Duet AI に指示します。バックエンドにエンドポイントを作成して Firestore から新しい商品を取得し、変更をデプロイする前にこのエンドポイントをテストします。

/newproducts エンドポイントを開発する

  1. cymbal-superstore/backend/index.ts ファイルを Cloud Shell エディタで開きます。
  2. index.ts ファイルで、95 行目あたりにある DEMO TASK START のコメントまでスクロールします。このタスクのためにコメントアウトされた行のグループがあります。コメント行をすべて削除し、次の Duet AI プロンプトに置き換えます。
// Get new products from Firestore (added < 7 days ago) and quantity > 0 (in stock)
  1. Duet AI に関数コードの生成を求めるには、コメント全体を選択して電球アイコン（Code OSS Duet AI 電球）をクリックします。
  2. [その他の操作] メニューで [コードを生成] を選択します。
  3. 生成されたコードにカーソルを合わせ、Duet AI ツールバーで [同意する] をクリックします。Duet AI によって、/newproducts エンドポイントの関数コードが入力されます。

注: Duet AI は、プロンプトに対して複数のバージョンのコードを生成する場合があります。特定のバージョンを選択するには、ツールバーのリストをスクロールします。

  1. 生成されたコードは次のようになります。
app.get("/newproducts", async (req: Request, res: Response) => {
  const products = await firestore
    .collection("inventory")
    .where("timestamp", ">", new Date(Date.now() - 604800000))
    .where("quantity", ">", 0)
    .get();
  const productsArray: any[] = [];
  products.forEach((product) => {
    const p: Product = {
      id: product.id,
      name: product.data().name,
      price: product.data().price,
      quantity: product.data().quantity,
      imgfile: product.data().imgfile,
      timestamp: product.data().timestamp,
      actualdateadded: product.data().actualdateadded,
    };
    productsArray.push(p);
  });
  res.send(productsArray);
});

多くの行には、潜在的なライセンスの問題が発生する可能性があることを示す下線が引かれます。このラボではクイック修正を適用できます。ただし、今後は以下の警告を確認してください。

  1. 生成されたコードが前のステップの例と見当たらない場合は、このコードを置き換えるか、後で Duet がデバッグにどのように役立つかを確認してください。また、ファイル scripts/solutioncode-with-bug.ts . には、予想されるエラーのあるコードのバージョンがあります。
  2. index.ts ファイルを保存します。

/``newproducts エンドポイントのテストとデバッグ

  1. Cloud Shell で、cymbal-superstore/backend ディレクトリに移動します。次のコマンドを入力します。
npm run start

これにより、エンドポイントが起動します。

  1. エンドポイントの結果を確認するには、Cloud Shell のメニューバーで [+] を使用して別のターミナルを開き、次のコマンドを実行します。
curl localhost:8000/newproducts

新しいターミナルにはエラー curl: (52) Empty reply from server が表示され、エンドポイントを実行しているターミナルには詳細 'Cannot have inequality filters on multiple properties: [quantity, timestamp]' を含む長いエラー メッセージが表示されることがあります。

  1. このエラーを修正しましょう。しかし、まずはエラー メッセージの意味を理解する必要があります。そのために Duet AI にお願いしますCloud Shell エディタの左側のメニューから Duet AI チャットを開き、以下の質問をします。
I'm querying Cloud Firestore and getting this error: 'Cannot have inequality filters on multiple properties: [quantity, timestamp]' What does it mean?

不等式フィルタの 1 つを削除するなど、修正方法がいくつか提示されます。この問題を解決するには、index.ts から .where("quantity", ">", 0) 行を削除して、クエリにフィルタが 1 つだけ含まれるようにします。

  1. 上記の最初の 2 つの手順を繰り返してサーバーを再起動し、商品のリストを取得します。今回は成功するはずですが、そうでない場合は、Duet を使用して問題を解決します（または、scripts/solutioncode-bug-fixed.ts の修正された解決策を使用して先に進みます）。

変更をデプロイする

変更したアプリケーションをデプロイするには、Cloud Shell の terraform ディレクトリから terraform apply を再実行します。これにより、Terraform から提供された IP アドレスでアプリを表示できます。

6. テストの作成

プロジェクト内のコードのテストを作成するのは、優先順位が低いことが多い重要なタスクです。お気付きかもしれませんが、Duet がこのようなテストの作成を手伝ってくれます。

作成した newproducts コードのテストを作成します。

  1. backend/index.test.ts を開きます。Duet AI チャットを使用し、プロンプトで newproducts() 関数のテストを生成します。
Help me write an Express.js test using Jest, in typescript, for the GET /newproducts handler in index.ts. Should check if the response code is 200 and the list of new products is length 8.

すでにファイルに import 行含まれています。指定された行の describe() テストだけをファイルにコピーします。ファイルを保存します。

または、プロンプトを改善し、インポート ステートメントを含めないように Duet に指示することもできます。その場合、必要なコードだけが表示されます。

  1. テスト結果を確認するには、Cloud Shell に移動して backend フォルダに移動して、次のコマンドを実行します。
npm run test

7. ロギング

Duet AI はデプロイ後もプロジェクトで役立ちます。このセクションでは、Duet AI を使用してログを見ていきます。

Cloud コンソールに戻り、Duet が実行中であることを確認します。ログの場所を Duet に尋ねます。独自のプロンプトを試しても、適切な回答が得られない場合は、次のプロンプトを使用できます。

How can I view the Cloud Run logs for the service called 'inventory'?

Duet AI は、Cloud Run ページに移動して在庫サービスを選択し、そのサービスのログを調べることを提案します。次のような出力が表示されます。

b7c50b67e49ee71a.png

いずれかの項目を選択し、Duet AI に説明を求めます。エントリの説明が自然言語で取得されます。

メインメニューの [ロギング] オプションから開くことができるログ エクスプローラでも、ログエントリを表示できます。ログ エクスプローラからログエントリを表示する利点は、次のようにエントリを説明するオプションが組み込まれていることです。

2574adab06524ad4.png

8. 完了

おめでとうございます。Duet AI を適切に使用し、これまでに見たことのないコードを理解できるようになりました。ここでは、このコードを拡張してテストを作成し、Duet を使用してログエントリを理解しました。

クリーンアップ

プロジェクトを削除

クリーンアップするにはプロジェクトを削除します。

  • ナビゲーション メニューで [IAM と管理者
  • サブメニューの [Settings] をクリックします。
  • 「プロジェクトの削除」というテキストが付いたゴミ箱アイコンをクリックします。
  • 画面の指示に沿って操作する

このラボでは、次の方法について見てきました。

  • Duet AI の助けを借りて既存のウェブ アプリケーションを強化します。
  • 構築したアプリケーションを Cloud Run にデプロイする。
  • Duet AI にアプリケーションのエラーの説明と修正を求めるプロンプトを入力します。
  • Duet AI を利用してアプリケーションのテストを開発します。
  • Duet AI のサポートを受けてアプリケーション ログを表示します。