簡単なチャットボットを作ってみよう（バックエンド編）

船井総研デジタルのtakizawaです。
今回は こちらの記事 の続編になります。
前回準備したバックエンドプロジェクトを実装していきます。なおAzure Open AIとの連携はフロントエンドまで実装が終わってから実装する予定です。

バックエンドの処理フロー

まだAzureOpenAIへの連携を実装しないので、今は単純に受け取った文字列をすこしだけ加工して戻すように実装します。単純ですがフローをは次のようになります。

今回ASP.NETのWebAPIで実装し、JSON形式でフロントエンドとデータのやり取りを行う想定です。

Modelの作成

まずデータをやり取りするための入れ物であるモデルを作成します。ここではdotnetプロジェクト直下に作成します。

• データ受信用モデル

  ReceiveMessage.cs

  namespace test_bot_back;
  public class ReceiveMessage
  {
      public required string Message { get; set;}
  }
  

  ここで受け取るMessageは必ず設定されてくる想定なのでrequiredを付与しています。

• データ送信用モデル

  ReplyMessage.cs

  namespace test_bot_back;
  
  public class ReplyMessage
  {
      public required string Reply { get; set; }
      public required string[] SendMessages { get; set; }
  }
  

  データ送信用モデルについても各フィールドに何かしらの値を設定する想定なので各フィールドにrequiredを付与しています。

Controllerの作成

dotnetプロジェクトにControllerフォルダが存在しているはずですので、そこにコントローラーを作成します。まずはコード全体を示します。

ReplyController.cs

using Microsoft.AspNetCore.Mvc;

namespace test_bot_back.Controllers;

[ApiController]
[Route("api/[controller]")]
public class ReplyController : ControllerBase
{
    private readonly ILogger<ReplyController> _logger;

    public ReplyController(ILogger<ReplyController> logger)
    {
        _logger = logger;
    }

    [HttpPost]
    public IEnumerable<ReplyMessage> Get(ReceiveMessage receive)
    {
        ReplyMessage reply = new ReplyMessage
        {
            SendMessages = new string[] { receive.Message },
            Reply = $"{receive.Message}の返答",
        };

        Thread.Sleep(1000);
        return new ReplyMessage[] { reply };
    }
}

ポイントを絞って解説していきます。

1. クラスはControllerBaseを継承します。

2. クラスに属性[ApiController]を付与します。
   これは「Web API のビルドを簡単にする厳格な動作を有効」にします。詳しくは ASP.NET Core を使って Web API を作成する を参照してください。

3. クラスに属性[Route("api/[controller]")]を付与します。
   このRoute属性はWebAPIを呼び出すURLを指定します。ここで[controller]トークンはコントローラクラス名から「Controller」サフィックスを除いた文字列に置き換えられます。この例では[controller] = Replyとなります。
   したがって開発環境でこのコントローラーを呼び出す完全なURLはhttps://localhost:{PORT}/api/Replyとなります。

4. フロントエンドから呼び出すメソッドにCRUD操作(GET、PUT、POST、DELETE) に対応する属性を付与します。
   ここではオブジェクトをJSONで連携しオブジェクトを返却するのでPOSTに対応する[HttpPost]を付与しています。

WebAPIに関する説明は以上ですがメソッドの処理についても軽く触れておこうと思います。
このメソッドでは受け取ったメッセージを使って返却するオブジェクトを作成しています。その後、1秒間処理を一時停止したのちオブジェクトを返却しています。このスリープ処理はフロントエンドの動作を確認するために加えており、最終的には削除する予定です。

ここまで出来たらもともとControllerフォルダ内に存在していたサンプルのコントローラークラスは削除してもらって大丈夫です。またそのコントローラーのみで使用しているモデルクラスも削除できます。もちろん削除しなくても動作に支障はありません。

ローカルで動かしてみる

Visual Studio Codeのターミナルを開きdotnetプロジェクトに移動します。（cd <プロジェクトフォルダ名>）その後に次のコマンドで起動します。

dotnet run --launch-profile https

起動したらswaggerを立ち上げます。ウェブブラウザで次のURLに接続してください。

https://localhost:7294/swagger/index.html

※ポート（ここでは7294）はコンソールに出力されたものに書き換えて下さい。

すると次のような画面が表示されます。

次に薄い緑色のPOSTを囲んでいるエリアをクリックします。

続いてTry it outボタンをクリックします。

赤枠のstringの文字列を任意の文字に書き換えます。ここではハローチャットボットで書き換えてみます。

その後Executeボタンをクリックします。

replyフィールドに加工された文字列が、sendMessagesフィールドに送信した文字列が設定されていれば成功です。

まとめ

今回はASP.NETのWebAPIでバックエンドを実装しました。次回はVue.jsとTypeScriptでフロントエンドを実装していきます。

続編の記事を投稿しました！
簡単なチャットボットを作ってみよう（フロントエンド編）