船井総研デジタルのtakizawaです。
今回は簡単なチャットボットアプリケーションを作ってみようと思い記事にしました。
お付き合いいただければと思います。
チャットボットとは？
「チャットボット（英: chatbot）は、もともとはチャッターボット（英: chatterbot）とよばれ、テキストや音声による対話を通じて人間的な会話の模倣を目的としたソフトウェアアプリケーションで、通常はオンラインで使用される。」
(Wikipediaより抜粋)
ということで、ここではテキストベースでボットと会話するアプリケーションを作成していこうと思います。
構成
現状はこのような構成を考えています。まずはローカルでフロントエンドとバックエンドを連携させバックエンドからAzure Open AIにアクセスすることを目標とします。
構築する順序は次の順番で考えています。
- バックエンド
- フロントエンド
- Azure Open AIと連携
※今回筆者はVSCode＋WSL＋devcontainerの組み合わせを用いて開発を進めていきます。（Dockerデスクトップは使用しません！またdevcontainerの試用は必須ではないです。）
WSL2を使用できるようにする準備とdevcontainerを使用する方法はこちらの記事が参考になると思いますのでここでの説明は省かせていただきます。
バックエンドの開発環境構築
チュートリアル: ASP.NET Core で Web API を作成する の記事を参考に環境構築を行います。
プロジェクトの作成
バックエンドの開発コンテナに接続してある状態でVisual Studio Codeのターミナルを開き、dotnet new webapi -o <プロジェクト名> でプロジェクトを作成します。
https開発証明書のインポート
筆者環境ではWSLで動いているUbuntu上のコンテナで稼働するのでhttps開発証明書をUbuntu（devcontainer）にインポートする必要があります。
-
Windows上で証明書を出力する。
windowsでPowerShellを開き証明書を出力するフォルダに移動したのちdotnet dev-certs https -ep https.pfx -p $CREDENTIAL_PLACEHOLDER$ --trustコマンドを実行します。するとhttps.pfxというファイルが作成されていると思います。 -
https.pfxファイルをバックエンドのフォルダの直下に移動します。 -
バックエンドの開発コンテナに接続してある状態のVisual Studio Codeのターミナル上で
https.pfxファイルを配置したフォルダでdotnet dev-certs https --clean --import ./https.pfx --password $CREDENTIAL_PLACEHOLDER$コマンドを実行します。
DevContainerを使わずにWindows上で構築している場合はこちらのページを参考に証明書を準備してください。
ここまで出来たら一度、稼働確認をしてみましょう。
フロントエンドの開発環境構築
フロントエンドの開発コンテナに接続してある状態でVisual Studio Codeのターミナルを開き、npm init vue@latest でプロジェクトを作成します。
| 設定内容 | 設定 |
|---|---|
| Project name | <プロジェクト名> |
| Add TypeScrpt? | Yes |
| Add JSX Support? | No |
| Add Vue Router for ... | Yes |
| Add Pinia for ... | Yes |
| Add Vitest for ... | 任意 |
| Add Cypress for ... | No |
| Add ESLint fro ... | Yes |
| Add Prettier for ... | Yes |
作成されたプロジェクトを実行して稼働確認をしてみましょう。
ここまででバックエンドとフロントエンドを実装していく準備ができました。
次回はバックエンドを実装していきたいと思います。
続編を投稿しました！！
簡単なチャットボットを作ってみよう（バックエンド編）