Gemini Code Assist を使用したテストの概要

1. はじめに

このラボでは、Google Cloud の AI を活用したコラボレーターである Gemini Code Assist を使用して、既存の Python ウェブ アプリケーションにテストを追加し、テストで検出されたアプリケーションのエラーを見つけて修正します。次に、Code Assist を使用して新しい機能のテストを作成し、そのテストに合格するコードを生成してアプリを拡張します。

演習内容

  • Cloud Shell エディタを使用して、既存のウェブ アプリケーションのコードをダウンロードします。
  • Cloud Shell エディタで Gemini Code Assist Chat を使用して、Google Cloud に関する一般的な質問をします。
  • Cloud Shell エディタで Gemini Code Assist インライン コード アシスタンスを使用して、アプリケーションのテストを生成し、テストを実行してエラーを見つけて修正し、アプリケーションの機能を拡張します。

学習内容

  • テスト生成やコード生成など、さまざまなデベロッパー タスクに Gemini Code Assist を使用する方法。
  • Gemini Code Assist を使用して Google Cloud について学ぶ方法。

必要なもの

  • Chrome ウェブブラウザ
  • Gmail アカウント
  • 課金が有効になっている Cloud プロジェクト
  • Cloud プロジェクトで Gemini Code Assist が有効になっている

このラボは、初心者を含むあらゆるレベルのデベロッパーを対象としています。サンプル アプリケーションは Python 言語で記述されていますが、内容を理解するために Python プログラミングに精通している必要はありません。デベロッパー向け Gemini Code Assist の機能に慣れていただくことを目的としています。

2. セットアップ

このラボで使用する課金が有効になっている Cloud プロジェクトがすでにあることを前提としています。Google Cloud プロジェクトで Gemini API を有効にします。以下の手順に沿って操作してください。

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

GeminiBanner.png

  1. コンソールの右側に Gemini for Cloud コンソール ウィンドウが開きます。以下に示す [有効にする] ボタンが表示されたら、クリックします。[有効にする] ボタンが表示されず、チャット インターフェースが表示された場合は、プロジェクトで Gemini for Cloud がすでに有効になっているため、次のステップに直接進むことができます。

GeminiApiEnable.png

  1. 有効にしたら、クエリを 1 つか 2 つ入力して Gemini をテストできます。サンプルクエリがいくつか表示されますが、「Cloud Run とは 」のようなクエリを試すことができます。

GeminiChatWindow.png

Code Assist は質問への回答を返します。右上の f68286b2b2ea5c0a.png アイコンをクリックすると、Code Assist チャット ウィンドウが閉じます。

Cloud Shell エディタで Gemini を有効にする

Gemini Code Assist は、いくつかの一般的な IDE で利用でき、同様に動作します。この Codelab では、ウェブブラウザで完全に実行されるGoogle Cloud Shell エディタを使用します。Cloud Shell エディタで Gemini を有効にして構成する必要があります。手順は次のとおりです。

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

72dc3df7b007fcde.png

  1. [エディタ] または [エディタを開く] ボタンをクリックし、Cloud Shell エディタが表示されるまで待ちます。[新しいエディタを試す] ボタンが表示されている場合は、クリックします。

CloudShellEditor.png

  1. 下のステータスバーにある [Cloud Code - Sign in] ボタンをクリックします。指示に従ってプラグインを承認します。ステータスバーに"Cloud Code - no project"と表示されている場合は、それを選択して、使用するプロジェクトのリストから特定の Google Cloud プロジェクトを選択します。

CloudCodeSignIn.png

  1. 右下のステータスバーに Gemini アイコンが表示されない場合は、Cloud Code で有効にする必要があります。まず、IDE で Gemini(以前のデベロッパー向け Duet AI)が有効になっていることを確認します。[Cloud Code Extension → Settings] に移動し、下の図のように「Duet AI: Enable 」と入力してください。チェックボックスがオンになっていることを確認します。IDE を再読み込みする必要があります。これにより、Cloud Code で Gemini が有効になり、IDE に Gemini ステータスバーが表示されます。

EnableDuetAiSetting.png

  1. 図のように右下の [Gemini] ボタンをクリックし、Cloud AI Companion API が有効になっている正しい Google Cloud プロジェクトを選択します。

GeminiSelectGoogleCloudProject.png

  1. Google Cloud プロジェクトを選択したら、下の図のようにステータスバーの Cloud Code ステータス メッセージが表示されていることと、その右側で Gemini が有効になっていることを確認します。

GeminiEnabledStatusBar.png

Gemini Code Assist を使用できるようになりました。

3. アプリケーションをダウンロードして調べる

ターミナル ウィンドウで、コマンドを実行して開始コードを含むリポジトリのクローンを作成し、新しいディレクトリに移動します(ターミナル ウィンドウが開いていない場合は、[ターミナル] または [ターミナルを開く] ボタンをクリックして復元します)。

git clone https://github.com/GoogleCloudPlatform/testing-with-duet-ai-codelab.git
cd testing-with-duet-ai-codelab

エディタで main.py を開き、エディタの左側にある Gemini チャット アイコン をクリックして Gemini とのチャット ウィンドウを開きます。この Gemini Chat ウィンドウは IDE 内にあり、IDE のコードをディスカッションのコンテキストとして使用できます。プロンプト「Explain this 」を入力して、回答を表示します。

GeminiChatExplainThis.png

このチャット ウィンドウをスクロールして、回答全体を確認できます。説明によると、ターミナル ウィンドウでコマンド python3 main.py を使用して、このプログラムをローカルで実行できます。

4. ローカルで実行する

必要に応じて cd ~/testing-with-duet-ai-codelab でリポジトリ ディレクトリに移動し、ターミナル ウィンドウでコマンド python3 main.py を入力します。

3bf558e9cea15375.png

http://127.0.0.1:8080 リンクをクリックして、新しいブラウザタブでアプリケーションのホームページを開きます。

fb06f382a4c03e4c.png

アプリケーションは「ローカル」で実行されています。実際には、Cloud Shell エディタで少しマジックが行われています。アプリケーションは、自分のパソコンではなく Cloud Shell で実行されています。リンクをクリックすると、実際のローカル アドレス http://127.0.0.1:8080 ではなく、Cloud Shell がこの目的のために設定したプロキシ サーバーへのタブが開きます。効果は、実際にローカルで実行している場合と同じです。

実際に試してみましょう。「25 」と入力して [Convert!] を押します。

e1b9d5832f6d0058.png

そのとおりです。25 はローマ数字で XXV です。これで完了です。

他の数字もいくつか確認してみましょう。25 はうまくいきましたが、24 はどうでしょうか?

37982e385e17baac.png

すべて問題ないと考えていたのは少し早すぎたかもしれません。XXIIII は 24 の正しい変換ですか?XXIV ではないでしょうか?

XXIIII が正しいという意見もありますが、一般的にはそうではありません。ただし、実際には間違っていないため(多くの時計では 4 がローマ数字の IIII で表示されます)、この問題は今後の機能強化のために残しておきます。

負の数を試してみましょう。ゼロ?これらの数字をローマ数字で表す方法はありません。ユーザーに何も返されないため、対処が必要なエラーのように見えます。

テストはエラーを見つけて排除するのに役立ち、Gemini Code Assist はテストの作成と使用に役立ちます。

5. テストを追加する

Gemini とのチャット ウィンドウに戻り、次のように質問します。

How can I test the number_to_roman function?

回答を確認します。回答には、unittest モジュールと pytest モジュールに関する説明が含まれているはずです。

Gemini Code Assist にこれらのテストを実際に作成してもらうこともできます。実際には変換コードがある calendar.py をエディタで開き、Gemini とのチャット ウィンドウに戻って、次のように質問します。

How can I test the number_to_roman function?

回答はより具体的になり、新しいファイルにコピーまたは挿入できる unittest モジュールも含まれています。

import unittest
import calendar

class NumberToRomanTest(unittest.TestCase):

    def test_convert_1(self):
        self.assertEqual(calendar.number_to_roman(1), "I")

    def test_convert_4(self):
        self.assertEqual(calendar.number_to_roman(4), "IV")

    def test_convert_9(self):
        self.assertEqual(calendar.number_to_roman(9), "IX")

    def test_convert_40(self):
        self.assertEqual(calendar.number_to_roman(40), "XL")

    def test_convert_90(self):
        self.assertEqual(calendar.number_to_roman(90), "XC")

    def test_convert_400(self):
        self.assertEqual(calendar.number_to_roman(400), "CD")

    def test_convert_900(self):
        self.assertEqual(calendar.number_to_roman(900), "CM")

    def test_convert_1990(self):
        self.assertEqual(calendar.number_to_roman(1990), "MCMXC")

    def test_convert_2023(self):
        self.assertEqual(calendar.number_to_roman(2023), "MMXXIII")

上記の例とは異なるコードが表示される場合があります。Gemini Code Assist の基盤となるモデルは随時更新されるため、回答は常に同じになるとは限りません。別のコードセットが表示された場合は、ここに示されているコードをコピーして、この Codelab に示されているサンプルを引き続き使用するか、Gemini Code Assist が現在提供している別の回答を試すかを選択できます。時間があれば、両方の方法を試すこともできます。Gemini Code Assist は、必要に応じて使用できるコーディング アシスタントです。

Gemini Chat ウィンドウの右上にある二重矢印をクリックして、単体テストコードを含む新しいファイルを作成するか、IDE を使用して新しいファイルを作成し、このラボに示されているコードを貼り付けます。そのウィンドウで Ctrl+S または Cmd+S を押して保存し、保存したファイルに calendar-unittest.py という名前を付けます。

ターミナルに戻り、Ctrl+C キーを押して、先ほど実行したウェブサーバーを停止し、シェル プロンプトを表示します。次のコマンドを入力します。

python3 calendar-unittest.py

新しいテストを実行します。

出力はありません。これは想定外です。すべてがサイレントに渡されましたか?それを確実に知りたいでしょう。テストコードを含む Gemini Code Assist の回答をもう一度見てみましょう。コードの下には、テストケースの実行方法に関する詳細情報がありました。

run-unittest.png

推奨されるコマンドを実行してみましょう。

python -m unittest discover

マシンで python3 コマンドが python にエイリアスされていない場合は、次のコマンドを実行します。

python3 -m unittest discover

コマンドは実行されますが、Ran 0 tests in 0.000s が返されます。モジュールにはいくつかのテストが含まれています。現在、どのような状況でしょうか?

コマンドの最後の単語は discover です。どこから取得したか?Gemini Code Assist は、テストコードが discover または discover.py という名前のファイルに保存されることを想定していましたが、そのようにする必要があることは指定していませんでした。実際には calendar-unittest.py にファイルを保存したので、次のコマンドを実行してみてください。

python3 -m unittest calendar-unittest

次のような出力が多数表示されます。

$ python3 -m unittest calendar-unittest
.F.FFFFFF
======================================================================
FAIL: test_convert_1990 (calendar-unittest.NumberToRomanTest)
----------------------------------------------------------------------
Traceback (most recent call last):
  File "/home/charles_engelke/testing-with-duet-ai-codelab/calendar-unittest.py", line 28, in test_convert_1990
    self.assertEqual(calendar.number_to_roman(1990), "MCMXC")
AssertionError: 'MDCCCCLXXXX' != 'MCMXC'
- MDCCCCLXXXX
+ MCMXC

最初の行には、合格したテストごとにピリオド、失敗したテストごとに F が表示されます。ほとんどのテストが失敗しています。次に、失敗したテストが個別にリストされ、想定される出力と実際の出力が表示されます。これらのテストがどのような順序で実行されたかは少し不明です。テスト名でアルファベット順に並べ替えられ、ファイルに表示される順序ではありませんでした。そのため、最初に test_convert_1 が実行され、次に test_convert_1990test_convert_2023 の順に実行されました。12023 のテストケースのみが合格しました。

このコードを最初に試したときに、24XXIIII に変換されることに気づきました。これは完全に間違っているわけではありませんが、IIIIIV に変換される一般的な形式ではありません。失敗したテストはすべて同様のケースでした。この問題が最初に指摘されたとき、ラボでは「実際には間違っていないため(多くの時計では 4 がローマ数字の IIII で表示されます)、この問題は今後の機能強化のために残しておきます」と述べていました。

テストケースを変更して、コードで指定された「実際には間違っていない」回答を想定して受け入れることも、その「今後の機能強化」の時期が来たことを受け入れることもできます。次のステップでは、Gemini Code Assist の助けを借りてコードを修正し、テストで想定されるより適切な回答を提供します。

6. コードを強化する

24 の回答が一般的な XXIV ではなく XXIIII のような場合、「実際には間違っていない」と見なされ、今後の機能強化のために延期されました。その未来は今です。これらの「実際には間違っていない」回答は依然として煩わしいものです。

ローマ数字で繰り返される数字の最初のルールは、同じ数字が 4 つ連続している場合は、その数字の後に 1 つ上の数字を付けて置き換えることです。したがって、XXIIIIXXIV に置き換える必要があります。同様に、XXXXXL に、CCCCCD に変更する必要があります。

number_to_roman によって返される直前に、この方法で roman 変数の値を変更する方法を Gemini Code Assist に相談します。

If the final value of roman has IIII in it, that should be replaced by IV. Similarly XXXX should be replaced by XL, and CCCC should become CD. How can I make those changes?

最後にコードを追加することをおすすめします。

6437c3fa2c5fabd1.png

これらの行をコピーしてエディタに貼り付けるか、入力して、何が起こるかを確認します。

dcefa568cab82fb7.png

Gemini Code Assist は、最初の置換を行った後に発生するケースを処理するために、さらに行を追加しました。たとえば、19 は XVIIII に変換され、次に XVIV に変換され、最後に正しい XIX に変換されます。

Gemini Code Assist が明らかに役立つ提案を行った場合は、Tab キーを押して推奨事項を受け入れ、ファイルを保存して、ウェブサーバーを再度実行します。それ以外の場合は、ここに示されている行を手動で追加して、ファイルを保存します。難しい変換を試してみましょう。1999:

a206999587fdc9.png

正解です。

テストを再実行します。すべて合格しました。

ウェブ アプリケーションは本番環境にデプロイする準備ができたようです。

7. Cloud Run にデプロイする

Cloud Run は、コンテナ化されたアプリケーションをインターネット上で実行します。Flash などの一般的なフレームワークを使用して作成されたアプリケーションの場合、gcloud run deploy コマンドは、デプロイする前にコンテナをビルドします。次のコマンドを実行します。

gcloud run deploy

ターミナルで。ソースコードの場所を尋ねられたら、Enter キーを押して、推奨される正しい場所を受け入れます。同様に、サービス名を尋ねられたら、Enter キーを押して提案を受け入れます。

gcloud で使用するプロジェクトを特定できないため、コマンドが失敗する可能性があります。その場合は、次のコマンドを実行します。

gcloud config set core/project <project-id>

ここで、 はプロジェクトの ID に置き換えます。これはプロジェクトの名前と同じ場合があります。次に、gcloud run deploy コマンドを再実行します。

  • コマンドを実行すると、特定の API が必要で、まだ有効になっていないことが通知されます。y と入力すると、有効になります。
  • リージョンを選択するように求められたら、都合のよいリージョンを選択します。us-central1 に対応する番号を入力するのが安全です。
  • 確認を求められたら、Y と入力して続行します。
  • この Cloud Run サービスの認証されていない 呼び出しを許可します。Cloud Run で使用される認証オプションは、サービスを呼び出すプログラムでの使用に適しています。これはウェブサイトなので、認証は使用しません。

Google Cloud はコンテナをビルドしてデプロイし、トラフィックをルーティングしてアクセス ポリシーを設定し、ホームページへのリンクを表示します。

94ba7d8d63a44afd.png

そのリンクに移動して、アプリケーションにアクセスできます。

a2e51666dfd33a9f.png

数字を入力して Enter キーを押すと、

5021535ac991a95c.png

何?

自分のマシンでは動作しました。なぜ完了しないのですか?

調べてみましょう。Gemini Code Assist に相談します。

Why am I getting an internal server error on cloud run?

4b24321251d6eddf.png

Gemini Code Assist はログファイルを読み取ることができ、同様のことが記載されています。ログを自分で確認する方法を Gemini Code Assist に相談してみましょう。

92d1855be73ef1d.png

やってみましょう。次のように、赤い !! エラー インジケーターが付いた行を探します。

9bed4f9ed82de21c.png

この後には、ここに至るまでのコールスタックの詳細が多数表示されますが、次のようなものがあります。

47fc93be845f4e3f.png

calendar.py ファイルを見ると、number_to_roman 関数がそこにあります。自分のマシンで動作したので、正しいことがわかります。Cloud Run では何が違うのでしょうか?

答えは難しいです。Python3 には、number_to_roman 関数が定義されている calendar.py ファイルと同様に、calendar という標準モジュールが含まれています。ローカルマシンで、Python が calendar というモジュールを探したとき、最初にアプリケーション ディレクトリを検索しました。Cloud Run の Python は、最初に標準モジュールを検索してインポートし、number_to_roman 関数を見つけませんでした。

このような環境の違いは常に発生する可能性があります。幸いなことに、アプリケーションがコンテナ化されると、その環境が内部に保持されるため、どこで実行しても同じ動作が期待できます。Cloud Run と同じコンテナ化されたアプリケーションをローカルで実行した場合、同じ問題が発生します。

この問題を修正します。ローカルの calendar モジュールの名前を、標準モジュール名ではない名前に変更する必要があります。calendar.py ファイルの名前を my_calendar.py に変更し、import calendar 行を main.pycalendar-unittest.py に変更します。import my_calendar最後に、次の行を変更します。

roman = calendar.number_to_roman(number)

roman = my_calendar.number_to_roman(number)

ローカルで試してテストを実行し、再デプロイします。

gcloud run deploy

これで動作します。

ed288801c6825eb1.png

この URL を共有すると、ローマ数字変換ツールが必要なすべてのユーザーが使用できます。

8. 省略可: 見た目を改善する

アプリケーションは正常に実行され、ウェブ上の誰でもアクセスできます。しかし、少し地味に見えます。みんなに知らせる前に、Gemini Code Assist に外観を改善してもらいましょう。

templates/index.html ファイルを開きます。Gemini とのチャット ウィンドウで、次のように質問します。

Make this index.html file use material design.

回答は、現在のファイルに追加することです。次のような結果になります。

<!DOCTYPE html>
<html>
<head>
    <title>Roman Numerals</title>
    <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">   
    <script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>     
</head>
<body>
    <h1 class="mdl-typography--title">Roman Numerals</h1>
    <form action="/convert" method="post">
        <div class="mdl-textfield mdl-js-textfield">
            <input class="mdl-textfield__input" type="text" id="number" name="number" required />
            <label class="mdl-textfield__label" for="number">Enter a number:</label>
          </div>
          <button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored">
            Convert!
          </button>
    </form>
</body>
</html>

アイコンを使用して、推奨されるコードをコピーし、index.html の既存のコンテンツに貼り付けます。ターミナルで python3 main.py を実行し、リンクをクリックしてプレビュー ウィンドウを開きます。ページが少し地味になりました。

295643ec03fcaafc.png

必要に応じて、convert.html ファイルでこれを繰り返すことができます。

Gemini Code Assist は CSS をよく知っており、さまざまな方法でアプリケーション ページのスタイルを設定できます。これはほんの始まりにすぎません。

このアプリケーションを共有する場合は、Cloud Run に再デプロイすることを忘れないでください。

gcloud run deploy

ローマ数字に変換する必要があるユーザーに URL を渡すことができます。

9. 完了

お疲れさまでした。Gemini Code Assist を使用して、アプリケーションにテストを追加し、エラーを修正し、機能を強化することができました。

作成したアプリケーションの使用が終了したら、Cloud コンソール ダッシュボードから削除して、今後の課金を停止できます。

リファレンス ドキュメント