ChatGPT を使用して Web アプリケーションを構築する方法は?

翻訳者 |ブガッティ

レビュー | Chonglou

ChatGPTの最大のセールスポイントの 1 つは、効果的なプログラミングツールになり得ることです。アイデアは次のとおりです。自然言語で要件を記述すると、チャットボットがその要件を満たすコードを生成します。しかし、 ChantGPT はこの点でどれほど優れているのでしょうか?

自分で試してみるより良い方法はありますか? ChatGPTに、シンプルなWebアプリケーションをゼロから構築するよう依頼しました。以下は、私たちのテスト結果と、 ChatGPTを使用してゼロからWebサイトを構築するために実行できるいくつかの手順です。

ステップ1 : Webアプリケーションのブループリントを生成する

任意のツールを使用してWebアプリケーションを構築する場合と同様に、 ChatGPT を動作させる前に、アプリケーションの外観と構築に必要な手順の青写真を描く必要があります。

最初のタスクとして、 ChatGPT にシンプルなチャットアプリケーションの青写真を開発してもらいました。これを実行するには、この Webアプリケーションの要件を説明し、チャットボットにアプリケーションの開発計画を詳細に説明させます。

上記のヒントを使用すると、次の結果が得られます。

上記のようなフローチャートを生成するには、ChatGPT アカウントで「Show Me」プラグインを有効にする必要があります。 ChatGPT プラグインはわずか数ステップでインストールして使用できますが、有料サブスクリプションが必要になります。

プラグインを使用しない場合は、テキストベースのブループリントまたはASCIIアートのフローチャートが作成されます。プラグインがなくても、ChatGPT は以下の例のようにアプリケーションの明確な青写真を提供する必要があります。

ステップ2 :ブループリントを小さなモジュールに分割する

全体像が描けたので、ChanGPT を利用してアプリケーションを小さなコンポーネントに分割し、それらを個別に開発してから統合して完全なWebアプリケーションを形成します。 ChatGPT では、これを 3 つのコンポーネントに分割することを提案しています。

1.登録モジュール

2.ログインモジュール

3.チャットモジュール

他にもアイデアはありますが、ここでの目標は ChatGPT に決定権を委ねることです。

1. 登録コンポーネントを構築する

早速登録コンポーネントを構築してみましょう。 ChatGPTに適切なアルゴリズムを設計させました。ここでは、ユーザーのユーザー名、電子メール、登録アバターのみが必要であることを指定することで介入します。ここにいくつかのヒントがあります:

結果は次のとおりです。

次に、ChatGPT に登録コンポーネントを構築するように指示します。

登録プロセスにパスワードフィールドを含めませんでしたが、ChatGPT は生成された HTML コードにパスワードを含めるという正しい選択をしました。コードを変更せずにコピーすると、ブラウザ上で次のように表示されます。

次に、ChatGPT に PHP 登録スクリプトを生成するように指示します。まず、「フォームの送信を処理するサーバー側ロジックの PHP コードを記述してください」というプロンプトが表示されます。生成されたスクリプトは正常に動作しましたが、多くの欠陥がありました。

パスワードのハッシュ化やエラー処理がなく、SQL インジェクション攻撃を受けやすい - Char GPT は基本的なことしか実行しませんでした。この問題を解決するのは比較的簡単です。 ChatGPTに「生成したコード内のすべてのエラーを識別し、識別した内容を使用してコードを最適化」させるだけです。これで、PHP 登録スクリプトの準備が整いました。

重要な注意事項:

プロンプトの具体的な文言は重要です。 ChatGPT に何を実行させたいのかを明確かつ具体的に指定する必要があります。「このコードの問題を修正してください」と指示するだけでは、修正したい問題のほとんどは修正されません。

次に、 ChatGPTに「 PHP スクリプトでキャプチャしたデータ用のデータベースを作成するための SQL コードを記述する」ように依頼しました。生成された SQL コードは次のとおりです。

以下は SQL を実行して生成されたテーブルです。

データベースが作成された後、エラーなしで最初の登録を試行しました。

2. ログインコンポーネントを構築する

登録コンポーネントが完了したら、ログインコンポーネントの構築を開始します。驚いたことに、追加のセッション管理ロジックにもかかわらず、構築するのが最も簡単な部分でした。

これは生成されたログインページです。重要なハイライトは、サインアップページと同じ配色を使用していることです。

ChatGPT の指示に従って「 server.login.php 」ファイルを作成し、生成された PHP スクリプトを追加した後、変更やデバッグなしで初めてログインに成功しました。

3. チャットコンポーネントを構築する

チャットコンポーネントの構築は、この小さな実験の最後の部分であり、おそらく最も難しい部分です。まず、 ChatGPT にチャットコンポーネントのコードを記述させます。言うまでもなく、それは大失敗でした。作成するアプリケーションの複雑なコンポーネントは、小さなコンポーネントに分割し、 1つずつ作業する必要があります。

ChatGPT にチャットコンポーネントを分割する方法についてアドバイスを求めたところ、次の 3 つのページを作成することを提案されました。

1.チャット

2. Send-messages.php

3.メッセージを取得する.php

重要な注意事項:

プロジェクト全体で異なる名前を使用すると、チャットボットはプロジェクト全体で作成されたすべてのコードで同じ名前を参照するため、ChatGPT がファイル名を提案するときに意図しない問題が発生する可能性があります。私たちはこのことについて深く理解しています。同じ間違いをしないでください。

Chat.php ページを作成する

まず、チャットインターフェースの外観をどのようにしたいかについて、ChatGPT に詳細な説明を伝えました。

生成された HTML コードを実行すると、メッセージ入力ボックスのないチャットインターフェイスが作成されます。これを修正するには、 ChatGPT に「メッセージ入力ボックスと送信ボタンを含むようにコードを書き直す」ように指示するだけで済みます。ブラウザで 2 回目に試したときに生成されたコードは次のようになります。

重要な注意事項:

生成されたコードが期待どおりの結果をもたらさなかったり、重要なコンポーネントが欠落していたりする場合は、ChatGPT に最終コードを書き直すように指示するだけです。コンポーネントを追加するか、最初のコードで実行しなかった操作を実行するように指示します。

「 send-messages.php 」と「 Fetch-messages 」ページを作成する

インターフェースに満足したら、チャットロジックを処理するスクリプトの構築に進みます。データベースからメッセージを送受信するには、ChatGPT は「メッセージ」テーブルが必要であることを正しく強調表示します。チャットボットにメッセージテーブルの SQL を作成させます。

SQL コードを生成した後、チャットボットにメッセージングロジックを処理する PHP スクリプトを生成させました。

ChatGPT は、「 send-messages.php 」ページと「 fetch-messages.php 」ページのスクリプトを生成しました。これら 2 つのスクリプトを実行すると、最終的に最初のエラーが発生しました(奇妙なことに満足です) 。コードを 1 行もデバッグせずにプロジェクトをここまで深く理解できるというのは、そのシンプルさにもかかわらず、信じられないほど素晴らしいことのように思えました。

エラーは、ChatGPT がスクリプトに導入した宣言されていないセッション変数( $_SESSION['user_id'] )のチェックが原因であることが判明しました。これは、ChatGPT がプロジェクトで使用されている一部のコンテキストと変数の名前を忘れたことが原因と考えられます。

重要な注意事項:

ChatGPT を使用してアプリケーションを構築するときは、必ず同じチャットスレッドを使用し、関連するコンポーネントをできるだけ早く完了するようにしてください。新しいチャットスレッドを使用したり、長い休憩を取ったりすると、不整合が発生する可能性があります。コーディングセッションの合間に長い休憩を取ると、ChatGPT は現在のプロジェクトの詳細(配色など)を忘れてしまう傾向があります。

そうは言っても、私たちは脆弱性を修正し、コードを展開しました。登録してログインし、チャット機能を試してみました。登録ユーザー同士でメッセージを送信することはできますが、メッセージボックスの色や配置が若干ずれています。ただし、完了までに 1 時間 23 分かかったアプリについては、あまり厳しく評価する必要はないでしょう。