Duet AI アシスト機能を使用して Node.js アプリを開発する

このチュートリアルでは、Google Cloud の AI を活用したコラボレーターである Duet AI を使用して、サンプル Node.js アプリの探索、作成、変更、テスト、デプロイを行う方法について説明します。

次のステップでは、自身を Node.js デベロッパーとして、基本的なフォームを使用する簡単なウェブ アプリケーションを JavaScript で記述する場合について考えてみましょう。このシナリオでは、アプリに Express フレームワークを使用し、HTML フォームに EJS テンプレートを使用します。

このガイドは、Duet AI を使用して開発プロセスを高速化しようとしている Node.js デベロッパーを対象としています。クラウドのクラウドの基本コンセプトに精通していることを前提としていますが、必ずしも Google Cloud のコンセプトを理解している必要はありません。

目標

このチュートリアルは、Duet AI を使用して以下を行う方法を学習するのに役立ちます。

  • Cloud Shell で Node.js ウェブアプリを開発します。
  • Node.js ウェブアプリの単体テストを作成します。
  • Node.js ウェブアプリを Cloud Run にデプロイします。

使用する Google Cloud プロダクト

このチュートリアルでは、次の Google Cloud プロダクトを使用します。

  • Duet AI: Google Cloud の常時接続のコラボレーターで、デベロッパーやデータ サイエンティストなどの幅広いユーザーに、生成 AI を活用したアシスト機能を提供します。統合されたアシスト機能のエクスペリエンスを提供するために、Duet AI は多くの Google Cloud プロダクトに組み込まれています。
  • Cloud Code for Cloud Shell プラグイン: Google Cloud 上で動作するアプリの開発サイクルをサポートする IDE プラグインの拡張機能。
  • Cloud Run: コンテナ化アプリを構築してデプロイできるフルマネージド サービス。Google Cloud がスケーリングなどのインフラストラクチャ タスクを処理するので、デベロッパーはコードのビジネス ロジックに集中できます。 料金情報については、Cloud Run の料金ページをご覧になり、料金計算ツールを使用して、予測される使用量に基づいて費用見積もりを作成してください。

準備

  1. このチュートリアルで使用できる既存の Google Cloud プロジェクトがない場合は、Google Cloud プロジェクトを作成します。
  2. Cloud Shell をアクティブにします
  3. Duet AI が Google Cloud ユーザー アカウントとプロジェクト用に設定されていることを確認します
  4. Duet AI 機能へのアクセス権が付与されているプロジェクトを選択して、Duet AI for Cloud Shell を有効にします

Node.js コードを生成するように Duet AI に指示する

Duet AI を使用すると、チャットで指定したプロンプトとコードコメントで記述した説明に基づいて Node.js コードを生成できます。記述するコードが多く、Duet AI に提供するコンテキストが多いほど、Duet AI がアプリの開発の支援により役立ちます。Duet AI からのレスポンスは、質問方法やコンテキストの記述によって異なる場合があるため、開発プロセス中に提案を受け入れる前に、Duet AI のレスポンスを確認することをおすすめします。

Duet AI にスターター コードの生成を依頼する前に、Cloud Shell ターミナルを使用して空のディレクトリを作成し、2 つの空のファイルを追加します。

mkdir node-js-with-duet
cd node-js-with-duet
touch app.js test.js

Cloud Shell エディタで、content_copy [エクスプローラ] を選択し、Cloud Shell ターミナルで作成したフォルダを開きます。

パッケージをインストール

Node.js アプリに express パッケージと ejs パッケージをインストールします。これらのパッケージのインストールについて Duet AI に依頼するには、次の手順に従います。

  1. Cloud Shell エディタの左側のパネルで[chat_spark [Duet AI] をクリックします。

  2. [Duet AI] ペインで、次のようなプロンプトを入力します。

    What is the command to install express and ejs packages for node.js?

  3. send [送信] をクリックします。

    Duet AI から次のようなレスポンスが返されます。

    Node.js 用の express パッケージと ejs パッケージをインストールするには、次のコマンドを使用します。

    npm install express ejs
    
  4. Duet AI から提供されたコマンドをコピーして、Cloud Shell ターミナルで実行します。

アプリケーション ファイルを作成する

パッケージをインストールしたら、Duet AI を使用して、インストール済みパッケージを app.js ファイルに追加する方法についてガイダンスを受けます。

  1. app.js ファイルを Cloud Shell エディタで開きます。
  2. Duet AI チャットに、次のようなプロンプトを入力します。

    How do I add these packages to my app.js file?

    Duet AI のレスポンスは次のようになります。

    app.js ファイルに express パッケージと ejs パッケージを追加するには、次のコードを使用します。

    const express = require('express');
    const ejs = require('ejs');
    

    そのためには、express パッケージと ejs パッケージが必要であり、これらを app.js ファイルで使用できるようにします。

  3. Duet AI から提供されたコードを app.js ファイルに追加します。

コメントを使用してコードを生成する

Cloud Code プラグインには、Duet AI がファイル コメントを使用してコードを生成できるようにする機能があります。たとえば、ファイルにコメントとしてプレースホルダを追加すると、コメントで説明されているように、Duet AI にコードを生成するように指示できます。

app.js ファイルでこの機能を使用するには、Cloud Shell エディタで Duet AI が有効になっていることを確認します。

  1. ファイルの末尾に、ウェブアプリを初期化するためのコメント プレースホルダを追加します。例:

    // Initialize express web app using ejs templating engine
    
  2. テキスト カーソルをコメントの末尾に移動し、Control+Enter (Windows および Linux の場合)または Control+Return(MacOS の場合)キーを押してから、タブを押して Duet AI のコード生成機能を使用してコードを生成します。

    Duet AI のレスポンスには、次のようにコメントの下に 2 行のコードが含まれます。

    // Initialize express web app using ejs templating engine
    
    const app = express();
    app.set('view engine', 'ejs');
    

    コード生成の出力が想定と異なる場合は、必要に応じて追加コンテンツを変更または削除します。

次に、Express ウェブアプリの基本機能を生成するためにコメントを追加します。

  1. app.js ファイルの一番下に移動し、次のコメントを追加します。

    // add urlencoded middleware to parse form data
    
    // define the home route
    
    // create a /greeting POST route with a `name` parameter
    
    // create a /greeting route that accepts a name parameter
    
    // start the server on port 8080
    
  2. 各ファイル コメントに対して、前にコードを生成した方法と同様のコードを生成します。

  3. 提案を受け入れる前に、生成されたコードを確認して、Duet のレスポンスが正確であるかどうかを確認します。

    app.js ファイルのコメントには、次のような対応するコードが含まれています。

    // add urlencoded middleware to parse form data
    app.use(express.urlencoded({ extended: true }));
    
    // define the home route
    app.get('/', (req, res) => {
      res.render('index');
    });
    
    // create a /greeting POST route with a `name` parameter
    app.post('/greeting', (req, res) => {
      const name = req.body.name || 'World';
      res.render('greeting', { name });
    });
    
    // start the server
    const port = process.env.PORT || 8080;
    app.listen(port, () => {
      console.log(`App listening on port ${port}`);
      console.log('Press Ctrl+C to quit.');
    });
    
    // create a /greeting route that accepts a name parameter
    app.get('/greeting/:name', (req, res) => {
      res.render('greeting', { name: req.params.name });
    });
    

package.json ファイルを作成する

ベース アプリケーションのコードが生成されたら、コンテンツを作成して package.json ファイルに追加します。

  1. app.js ファイルと同じディレクトリに package.json ファイルを作成します。
  2. Cloud Shell エディタで、chat_spark [Duet AI] を選択し、次のようなプロンプトを入力します。

    Based on my app.js file, can you create a package.json file?

    Duet AI のレスポンスでは、指定する起動スクリプトと依存関係が提案され、次のようになります。

    app.js ファイルで使用できる package.json ファイルを以下に示します。

    {
      "name": "my-app",
      "version": "1.0.0",
      "description": "A simple Node.js web app using Express and EJS.",
      "main": "app.js",
      "scripts": {
        "start": "node app.js"
      },
    
      "dependencies": {
        "express": "^4.17.1",
        "ejs": "^3.1.6"
      }
    }
    

    この package.json ファイルには次の情報が含まれています。

    アプリの名前(my-app)
    アプリのバージョン(1.0.0)
    アプリの説明(Express と EJS を使用するシンプルな Node.js ウェブアプリ)
    アプリのメインファイル(app.js)
    アプリで実行できるスクリプト(start)
    アプリの依存関係(express と ejs)

  3. Duet AI で提供されるコンテンツだけをコピーして package.json ファイルに貼り付けます。

ejs テンプレートを作成する

ウェブアプリを完成させるには、app.js ファイルおよび package.json ファイルと同じディレクトリに ejs テンプレート用の views ディレクトリを作成します。

  1. ターミナルで、次のように入力します。

    mkdir views
    touch views/index.ejs views/greeting.ejs
    
  2. エディタで index.ejs ファイルを開き、次の内容を貼り付けます。

    <html>
    <body>
        <form action="/greeting" method="post">
        <label for="name">What's your name?</label>
        <input type="text" id="name" name="name" autofocus />
        <button type="submit">Submit</button>
        </form>
    </body>
    </html>
    
  3. エディタで greeting.ejs ファイルを開き、次の内容を貼り付けます。

    <html>
    <body>
        <a href="/">Home</a>
        <p>Hello <%= name %>~</p>
    </body>
    </html>
    

ブラウザでアプリをプレビューする

アプリのコード、テンプレート、要件がすべて完成したら、アプリが動作するかどうかを確認できます。

  1. 次のコマンドを実行して、依存関係をインストールします。

    npm install
    
  2. 次のコマンドを実行してアプリを起動します。

    npm start
    
  3. アプリが動作していることを確認します。Cloud Shell のタスクバーの右上にある [ウェブでプレビュー] ボタンを選択します。次に、表示されたメニューからポート番号を選びます。Cloud Shell が、新しいブラウザ ウィンドウでプレビュー URL を開きます。

単体テストを作成する

Node.js アプリが動作していることを確認したら、Cloud Run にアプリをデプロイする前に、test.js ファイルで単体テストを作成できます。次の例では、HTTP レスポンス コードが 200 のとき、単体テストの生成の支援を Duet AI に依頼します。

  1. app.js ファイルの末尾に、次の行を追加してアプリファイルをエクスポートします。

    module.exports = app;
    
  2. test.js ファイルを開きます。

  3. レスポンスが HTTP 200 ステータス コードを返すタイミングをテストするには、Duet AI のチャットペインを開き、次のようなプロンプトを入力します。

    Can you generate a unit test for my home route in app.js to assert that the response code is 200?

    Duet AI から次のようなレスポンスが返されます。

    レスポンス コードが 200 であることを確認する、app.js のホームルートの単体テストを以下に示します。

    const assert = require('assert');
    const request = require('supertest');
    
    const app = require('./app.js');
    describe('GET /', () => {
      it('should return a 200 response code', async () => {
        const response = await request(app).get('/');
        assert.equal(response.status, 200);
      });
    });
    

    このテストでは、ホームルートがステータス コード 200 を返すことを確認します。

    提案されたコードブロックを test.js ファイルに追加します。

  4. ターミナルで次のコマンドを実行して、mocha テスト パッケージと supertest パッケージをインストールします。

    npm i mocha supertest
    
  5. package.json ファイルを更新して、新しいテスト スクリプトとそのパッケージを追加します。例:

    {
      "name": "my-app",
      "version": "1.0.0",
      "description": "A simple Node.js web app using Express and EJS.",
      "main": "app.js",
      "scripts": {
        "start": "node app.js",
        "test": "mocha"
      },
      "dependencies": {
      "express": "^4.17.1",
      "ejs": "^3.1.6",
      "mocha": "^10.2.0",
      "supertest": "^6.3.3"
      }
    }
    
  6. 次のコマンドを実行して、テストを行います。

    npm test
    

エラーがなければ、テストは合格と次のように表示されます。他のルートにテストを追加する場合は、test.js ファイルに追加する提案について Duet AI への依頼を続けます。

Cloud Run にデプロイする

アプリをローカルで実行したら、Google Cloud へのデプロイに進みます。ソースコードからデプロイでき、アプリの実行時にインフラストラクチャを管理する必要がないため、Cloud Run はこのシナリオに適しています。

  1. Duet AI のチャットで、gcloud を使用してソースコードから直接 Cloud Run にデプロイする方法を Duet AI に質問します。

    What is the gcloud command for deploying a Cloud Run service from source code?

    Duet AI から次のようなレスポンスが返されます。

    gcloud を使用して、現在のディレクトリ内のソースコードから Cloud Run に直接デプロイできます。これを行うには、--source flag を付けて gcloud run deploy コマンドを使用します。このフラグは、ソースコードを使用してコンテナ イメージをビルドして Cloud Run にデプロイするように gcloud に指示します。

    たとえば、app.js ファイルのコードを Cloud Run にデプロイするには、次のコマンドを使用します。

    gcloud run deploy app --source .
    

    このコマンドは、app.js ファイルからコンテナ イメージをビルドして、Cloud Run にデプロイします。

    --region フラグを使用して、アプリをデプロイするリージョンを指定することもできます。たとえば、アプリを us-central1 リージョンにデプロイするには、次のコマンドを使用します。

    gcloud run deploy app --source . --region us-central1
    

    ソースコードから Cloud Run にデプロイする方法については、Cloud Run のドキュメントをご覧ください。

  2. Duet AI がレスポンスで提供している gcloud コマンドを使用します。

  3. リージョンを選択するためのプロンプトに従って、テストアプリの未認証の呼び出しを許可するオプションを選択します。アプリが正常にデプロイされると、Service URL が返されます。

クリーンアップ

このチュートリアルで使用したリソースについて、Google Cloud アカウントに課金されないようにするには、このチュートリアルで作成した Google Cloud プロジェクトを削除します。また、リソースを個別に削除することもできます。

  1. 注意: プロジェクトを削除すると、次のような影響があります。
    • プロジェクト内のすべてのものが削除されます。このドキュメントのタスクで既存のプロジェクトを使用した場合、それを削除すると、そのプロジェクトで行った他の作業もすべて削除されます。
    • カスタム プロジェクト ID が失われます。このプロジェクトを作成したときに、将来使用するカスタム プロジェクト ID を作成した可能性があります。appspot.com URL など、プロジェクト ID を使用する URL を保持するには、プロジェクト全体を削除するのではなく、プロジェクト内の選択したリソースを削除します。
  2. 複数のアーキテクチャ、チュートリアル、クイックスタートを検討する予定がある場合は、プロジェクトを再利用すると、プロジェクトの割り当て上限を超えないようにすることができます。Google Cloud コンソールで [リソースの管理] ページに移動します。

    [リソースの管理] に移動

  3. プロジェクト リストで、削除するプロジェクトを選択し、[削除] をクリックします。

  4. ダイアログでプロジェクト ID を入力し、[シャットダウン] をクリックしてプロジェクトを削除します。

次のステップ