ChatGPTのAPIを利用してChatアプリを作ろう②　13日目

ChatGPTのAPIを利用してChatアプリを作ろう（環境構築編）

はじめに

前回は生成AIに関する概要を簡単に触りだけ説明しました。
https://zenn.dev/onecarat_tech/articles/4b6adf1d54f9be

今回はChatアプリを開発するための環境作りの記事となります。ChatGPTのAPIを利用するためのキー発行やプロジェクトの作成に関して説明していきます。

---

ステップ1: プロジェクトの計画

最低限開発する前に決めておくことは下記です。私はこちらで進めて行きます。

項目	内容
プロジェクト名	OnecaratWebApp
作業ディレクトリ	D:\zen\projects
Gitリポジトリ	onecaratwebapp-integration-dev

---

ステップ2: 必要なツールのインストール

1. .NET SDKのインストール

1. Microsoftの公式サイトから最新の.NET SDKをインストールします。
2. 以下のコマンドでインストールを確認します:

   dotnet --version
   

2. Visual Studio Codeのインストール

1. Visual Studio Codeの公式サイトからダウンロードしてインストールします。
2. 必要な拡張機能をインストールします：
   • C#: Microsoft公式拡張機能。
   • REST Client: APIリクエストのテストに便利。

3. Gitのインストール

1. Git公式サイトからGitをインストールします。
2. 以下のコマンドでインストールを確認します:

   git --version
   

※Gitの記事はこちらを参照ください
https://zenn.dev/onecarat_tech/articles/0dfc50cf0f9869

---

ステップ3: ChatGPT APIの発行

1. OpenAIのアカウント作成

1. OpenAIの公式サイトでアカウントを作成します。
2. メールアドレスを入力し、確認を完了してください。

2. APIキーの発行

1. アカウントにログイン後、APIキーの管理ページにアクセスします。
2. プロジェクトの作成
   
   
3. APIキーを発行
   左のリストから[API Keys]を選択して[+Create new secret key]を押します。
   
   Nameは複数のAPIを持つときに判別するための名称です。
   
   APIキーの発行が出来ました。
   
4. 発行されたAPIキーをコピーして安全に保存してください。このキーは再表示できないため、紛失しないよう注意が必要です。
5. APIキーが発行された後、クレジットカードを登録して課金しておいてください。
   注意！！　金額はお任せしますが、とりあえず10$課金しておけば数か月試せます。円とドルは違うので気を付けてください。自己責任なので課金方法は記載しません。

---

ステップ4: プロジェクトの作成

1. ローカルGitリポジトリの初期化

作業ディレクトリに移動してGitリポジトリを初期化します:

cd D:\zen\projects
git init

2. ASP.NET Coreプロジェクトの作成

以下のコマンドで新しいASP.NET Core MVCプロジェクトを作成します:

dotnet new mvc -n OnecaratWebApp

mvcテンプレートの説明は下記を参照してください。
https://zenn.dev/onecarat_tech/articles/fa6ab2f76e2183

3. APIキーのプロパティ管理

appsettings.jsonを使用してAPIキーを管理します。

appsettings.jsonの例:

{
  "ChatGPT": {
    "ApiKey": "your_api_key_here"
  }
}

APIキーを使用するクラスの例:

public class ChatGPTService
{
    private readonly string _apiKey;

    public ChatGPTService(IConfiguration configuration)
    {
        _apiKey = configuration["ChatGPT:ApiKey"];
    }

    public string GetApiKey()
    {
        return _apiKey;
    }
}

---

ステップ5: 必要なNuGetパッケージのインストール

以下のコマンドでHTTP通信に必要なパッケージをインストールします:

PS D:\zen\projects> cd .\OnecaratWebApp\
PS D:\zen\projects\OnecaratWebApp> dotnet add package Microsoft.AspNet.WebApi.Client

---

ステップ6: アプリケーションの起動と自動リビルド

1. dotnet watchを使用した自動リビルド

以下のコマンドを実行して、アプリケーションの変更を監視しながら自動的にリビルドと実行を行います:

dotnet watch run

2. 自動ブラウザ起動の設定

ASP.NET Coreでは、デフォルトでブラウザが自動的に開かれるよう設定されています。dotnet watch runを実行すると、ブラウザでhttp://localhost:XXXXが自動的に開き、アプリケーションを確認できます。

---

ステップ7: 初期コミット

作業状態をGitに記録します:

git add .
git commit -m "Initial commit: Project setup for OnecaratWebApp"

---

まとめ

この記事では、ChatGPT APIを利用するアプリケーション開発のための環境準備を解説しました。dotnet watchを使用することで、コード変更時のリビルドを自動化し、開発効率を向上させます。次回の記事では、この環境を利用してChatGPT APIと連携する具体的な方法を解説します。