この動画では、GPT PilotというAIツールを用いたフルスタックアプリケーション開発のプロセスが紹介されています。GPT Pilotはエンジニア向けのツールで、エンジニアとAIの協力により複雑なアプリケーションを開発可能です。動画では、GPT PilotのVSCodeプラグインの使い方、プロジェクトの設定、バックエンドとフロントエンドの開発プロセス、デバッグとテスト方法が説明されています。最終的には認証機能を持つアプリケーションが完成し、GPT Pilotのドキュメント生成機能も紹介されています。
公開日:2023年12月22日
※動画を再生してから読むのがオススメです。
ユーザーパスワードが入力されました。
ログイン。
ほら、ログインできた。
というわけで、勝手に直りました。
なんて感動的なんでしょう。
GPT Pilotを使えば、AIと協力して洗練されたフルスタック・アプリケーションを作成できる。
他のAIコーディング・アシスタントをいくつかレビューしてきましたが、GPT Pilotは本当に傑出しています。
GPT Pilotを使ってAIと作業するだけで、フルスタックアプリケーションに構築できる複雑さと洗練さのレベルは信じられないほどです。
GPT Pilotはエンジニアやエンジニアリング・チームのために作られているので、今日はその使い方を紹介します。
彼らは今日のビデオのスポンサーで、素晴らしいVSCodeプラグインが出たばかりです。
さあ、使いましょう。
VSCodeを開いた状態で、自分の拡張機能に行き、GPT Pilotと入力します。
そう、GPT Pilot Alphaだ。
これをクリックして、すでにインストールされているので、先に進んでインストールをクリックする。
インストールが完了すると、左側にこの小さなタブが表示されます。
それをクリックします。
GPT Pilotを開くをクリックします。
そして、これをすでにやっているので、少し違いますが、最初に出てくるのはGPT-4 APIキーの入力を求められます。
そうしたら、create new appをクリックする。
そして本当に素晴らしいのは、途中経過を保存できることだ。
十分に複雑なアプリケーションを作れば、AIとの共同作業に数時間かかるかもしれない。
しかし、これがなければ数週間かかっていたかもしれない作業に比べれば、数時間などたいしたことはない。
今日私たちが作ろうとしているのは、認証を可能にするフルスタックのアプリケーションです。
ログイン、パスワードのリセット、登録。
すべてフルスタックだ。
プロジェクト名は何ですか?
Auth-Me。
エンターキーを押してください。
アプリをできるだけ詳しく説明してください。
Node.jsアプリを作成し、フロントエンドでユーザーがアプリに登録してログインできるようにします。
3つのページだけを作成します。
1つはユーザーがログインできるようにするページ、もう1つはユーザーが登録できるようにするページ、そして3つ目はログインしたユーザーのデータを表示するページです。
登録またはログインの後、ユーザーがセッションにログインしたままであることを確認し、ホームページを訪問したときにログインユーザーを見ることができるようにします。
そして、これからデータベースに使用します。
ここでは何でも作ることができます。
さて、ここまで説明したら、送信ボタンを押してください。
そして、質問を始めます。
繰り返しますが、これはエンジニアがAIと一緒に素晴らしいアプリケーションを作るための作業です。
ログインと登録プロセスにはどのような認証方法を使うべきですか?
もしあなたが気にしないのであれば、気にしない、好きなものを選べばいい。
しかし、私はJWTトークンと言いたい。
ユーザー認証プロセスでは、Eメールによる確認が必要ですか?
いいえ。
ユーザー登録にはパスワードの強度要件や複雑さの検証が必要ですか?
はい、でもそれはあなたが決めてください。
ホームページには、ユーザー名やEメール以外に特定のユーザーデータを表示する必要がありますか?
名前だけです。
よし、これで必要な明確な質問がすべて聞かれ、ここにあるようにプロジェクトの概要が表示された。
この画面を少し大きくします。
この画面ではプランニングが行われ、これから使用するすべてのテクノロジーが表示されます。
今はすでに止まっていて、私からのインプットを待っている。
というわけで、列挙した技術が活用できるようにローカル環境を整えてください。
終わったら、doneと書いてください。
完了と書いてもいいし、この完了ボタンをクリックしてもいい。
完了ボタンをクリックします。
これらのいくつかはすでにインストール済みです。
実際にインストールすることもできますが、私はただ見てみるのが好きなので、明らかに持っていないものに気づかなければ、先に進んで完了をクリックします。
すると、開発のためのアクションプランが作成されます。
素晴らしいのは、開発をしていると、他の開発者と同じようにバグに遭遇することだ。
そして、AIと一緒にデバッグをしたり、途中でテストをしたりしながら、確実に問題を解決していくことができる。
エンジニアとAIの間で繰り返されるこのプロセスこそが、GPT Pilotの特徴なのです。
では、GPTが何を構築していくのか、その説明のいくつかを見てみよう。
ユーザー登録のバックエンドロジックを実装します。
そして、プログラム的なゴール、ユーザーレビューのゴールがあります。
もう1つは、登録ページの作成です。
ということで、まさに何を作るのかが書かれています。
実際の開発、実装タスク1では、Express.jsでNode.jsプロジェクトを初期化し、基本的なサーバーをセットアップします。
タスク1を実装するには、以下のステップに従う必要があります。
ただ、これは私のために実行してくれるということを意味している。
このように、書き出さなければならないコマンドをすべて計画しているのがわかるだろう。
よし、始めるぞ。
npm init -yコマンドを実行できますか?
コマンドを実行できるタイムアウトウィンドウが表示されます。
実行できますか?
はい、できます。
素晴らしいのは、ビルドが進むにつれて、左側にコードが書き込まれ、すべてのファイルが作成されるのが見えることです。
特定のコード行について入力が必要な場合は、実際にそのファイルを引っ張り出して、コード行をハイライトし、入力を求める。
それでは、npm install Expressというコマンドを実行できますか?
はい、できます。
さて、これが最初の良い例だ。
それを少し移動させます。
ここで私に入力を求めています。
server.jsというファイルを開いて、3行目で確認してください。
では、入力が必要です。
必要に応じて、3000以外の予備のポート番号を決めてください。
私の場合はハイライトされています。
3002にフォールバックします。
これで完了です。
ファイルを保存して、次に進む。
こんな感じで進めていく。
では、node server.jsというコマンドを実行できますか?
はい、サーバーはポート3002で動いています。
素晴らしい。
これから行うのは、サーバーが正しく起動しているかどうかのテストだ。
サーバーを起動します、と言っています。
それから、このcurlコマンドを実行して、サーバーが起動していることを確認します。
そして、ちゃんと動いたかどうかを確認するために何をすればいいかも教えてくれています。
よし、停止した。
アプリの起動をクリックします。
アプリはポート3002で実行されています。
少し上にスクロールする。
このcurlコマンドを実行します。
3000番ポートにpingを打つように要求されますが、3002番ポートだと思います。
それを変更して、Enterキーを押して、完了です。
これで生きている。
アプリを停止してもいいし、そのまま続けてもいい。
続けます。
パッケージのインストール、タスク2です。
これで、私とこのアプリケーションを構築しているAIとの間で、ピンポンが行ったり来たりしているような感覚を味わっていただけると思います。
さて、もうひとつの停止ポイントにたどり着きました。
npm install Mongooseというコマンドを実行できますか?
はい。
このAIがビルドしている間に私がしなければならないことは、それが機能しているかどうかを確認することだけだ。
user.jsがビルドされました。
そして今、一時停止しています。
MVとオンラインのファイルを開いてください。
必要な入力をチェックしてください。
よし、見てみよう。
デフォルトのローカルを使ってない場合は、MongoDBの接続文字列に置き換えてください。
デフォルトのローカルを使ってない場合は、MongoDBの接続文字列に置き換えるだけです。
そして、npm startを実行します。
最初のエラーが出ました。
モジュールMVが見つからないと表示されていますが、これはインストールされていないからです。
この問題のデバッグを始めてもいいですか?
はい。
では始めます。
エラーメッセージはMパッケージが存在しないことを示しています。
インストールできますか?
今、インストールを要求しています。
はい、できます。
npm startをもう一度。
これでうまくいったようだ。
2つの警告が表示されていますが、問題ありません。
これで、もう一度すべてが機能しているかどうかを確認するところまで来た。
アプリを起動してください。
さて、これらはすべて警告です。
大丈夫です。
MongoDBが接続されました。
うまくいっているようだ。
では、続けるをクリックします。
これでbcryptを使ったパスワードハッシュによるユーザー登録のバックエンドロジックが実装できました。
よし、また別のものがあります。
npm install bcrypt.
はい。
では、実際にユーザーの機能をテストするように求められました。
アプリケーションの新しいユーザーを登録しようとします。
アプリの起動をクリックします。
そして、ユーザー登録がうまくいくことを確認するために、このリクエストを実行します。
今、ブラウザを使っても問題ありません。
さて、コードを貼り付けました。
うまくいくか見てみましょう。
ユーザーの作成に成功しました。
すごい!
さて、これでうまくいくことがわかったので、ここに戻って、continueをクリックします。
このまま作り続けます。
とてもシンプルだ。
進捗は約3分の1ほどです。
さあ、いきますよ。
新しいページがたくさんできました。
READMEにも追加されていますが、これは本当にクールです。
だから、Readmeも作成している。
では、ejsとbootstrapをインストールする必要があります。
どうぞ。
そして、これからフロントエンドの作業を始めます。
何かしたいことがあるかどうか聞いてきます。
makeディレクトリというコマンドを実行できますか?
はい、人の介入が必要です。
ブートストラップのCSSとJSファイルをそれぞれpublic SL CSSとpublic SLJSディレクトリにコピーします。
なるほど、この部分は手動でやる必要があるようだ。
では、ライブラリをダウンロードしよう。
bootstrap.cssをダウンロードするように言われたので、それをダウンロードします。
解凍してみよう。
CSSとJSができました。
必要なのはこの2つだ。
だから、この中にあるものを置き換えるだけです。
そこです。
これらを削除して、もう大丈夫でしょう。
確認してみましょう。
はい、すべてあります。
よし、とても簡単だった。
次にアプリを起動して動作するか確認しましょう。
いくつか警告が出ますが、それ以外は正常に動作しているようです。
では、続けます。
node server.jsというコマンドを実行できますか?
はい。
ちょっとエラーが出ました。
CLIのレスポンスが正しくありません。
これは非推奨の警告です。
これは警告ですが、エラーは出ていないはずですが、確認してみましょう。
デバッグしてみてください、警告と表示されるかもしれません。
大したことじゃない。
そう、非推奨の警告は重要ではないし、サーバーの起動を妨げるものでもない。
では、それを修正しようとするかもしれません。
デバッグの必要はなさそうだ。
さて、GPT Pilotが動作していることを確認するために、もう1つのポイントに到達しました。
ではそうしましょう。
もう一度クリックしてアプリを起動します。
depreの警告がいくつか出ていますが、これらはすべて警告なので大丈夫です。
サーバーはポート3002で動いています。
MongoDBに接続しました。
このcurlリクエストをコピーして、ターミナルに切り替えてペーストし、エンターキーを押します。
ユーザーの作成に成功しました。
念のためもう一度やってみましょう。
このユーザーはすでに作成されているため、エラー警告が表示されました。
完璧です。
ユーザーはすでに存在しています。
よし、これで完了だ。
continueをクリックします。
タスク5を実装する。
登録ルートのミドルウェアとしてパスワード強度要件を実装する。
これで、より強力なパスワード要件を導入する計画が書き出され、実際にコーディングされました。
では、変更が行われました。
さて、今度はnpm startができるかどうか聞いている。
もちろん。
次に、パスワードの強度要件が正しく実装されているかをテストするように求められ、そのためのコードが与えられます。
ここでpassword weakと表示され、もう一度サーバーを立ち上げて手動で試すように言われます。
それがあります。
もう一度アプリの起動をクリックします。
上にスクロールしてこのコマンドを取得し、ターミナルに切り替えて貼り付け、Enterキーを押せば完了だ。
パスワードが強度要件を満たしていません。
完璧だ。
よし、続けるをクリック。
続行する。
今度はJWTの秘密のコードを書いているところだ。
よし、たくさんのコードが書き込まれた。
いくつかインストールするように言われた。
どうぞ。
では、何かを確認するように求められていることがわかります。
このようにコードが強調表示されているときはいつでも、確認を求めているのです。
それでは見てみよう。
安全なJWT秘密鍵を追加します。
スーパー・セキュアを追加します。
このテストではあまり重要ではない。
保存して、また開いて、続けます。
次に、セッションの秘密鍵についてのもう1つの項目がありますが、これは非常に安全です。
そして続ける。
では、ログイン機能をテストします。
アプリの起動をクリックし、コマンドを取得する。
私は彼らが教えてくれたコマンドを貼り付けますが、すでに登録されているユーザーを使用します。
前のコマンドに戻って、それをコピーします。
よし。
パスワードをpassword 1 2 3にしてエンターキーを押す。
ログインに成功しました、完璧です。
そして、トークンが返ってきました、素晴らしいですね。
よし、ここに戻って続けよう。
これで2/3が終了した、おめでとう。
プロジェクト生成の進捗は66.67%です。
続行する前に、ドキュメントが作成されていますが、これは本当に素晴らしいです。
とてもクールだ。
これが左側のドキュメントで、これがどのように作られているかについての情報がたくさんあります。
さて、タスク7を実装して、EGSとbootstrapを使ってログインページを作成し、ホームページにリダイレクトすることでログインに成功したことを処理します。
これがコードの一部です。
今は開発ステップ116です。
そして、もう一つ本当に良いことは、いつでも戻ることができるということです。
何か問題があれば、このプロセス全体のどのステップにも戻ることができます。
全116ステップです。
そこから再開することもできるし、別の方向に進むこともできる。
ですから、何か気に入らないことがあったり、バグに遭遇したりしたら、ステップに戻ってそこから再開すればいいのです。
よし、npm start againだ。
そう、これは動作していることを確認しているだけなのだ。
見てください、もうこんなにコードが書かれています。
さまざまなファイルがありますからね。
さて、開発ステップ121。
タスクが正常に完了したかどうかをテストするには、ユーザーは次のステップに従えばいい。
今、私にそれをするよう求めています。
では、実際にウェブログインを使って、うまくいったかどうか試してみます。
完了すると、アプリを起動するように小さなメッセージが表示される。
はい、ではStartをクリックしてください。
ログインURLをここから取得します。
さあ、できました。
ログインできることを確認しよう。
ターミナルからログインしたのと同じユーザーを取得し、それを貼り付けます。
そして、パスワードも取得し、貼り付けます。
ログインに無効な電子メールまたはパスワードがあります。
オーケー、オーケー、オーケー。
これでログインできることを確認しよう。
ホームにリダイレクトされました。
コンソールからはログインできるけど、インターフェースからはログインできない。
ではデバッグしてみましょう。
もし何か問題があれば、教えてください。
だからすぐに教えてあげよう。
では、ターミナルを通じて問題なく動作すると言います。
でもUIから同じ認証情報を使ってログインしようとすると、こんなエラーが出るんだ。
そして、それをペーストした。
submitをクリックして、うまくいけば修正できるかもしれません。
さて、あなたの同僚から提供された情報を考えると、問題はフロントエンドのログインフォームとバックエンドのログインロジックの統合にあるようです。
ログインがターミナルを通して機能するが、UIを通して機能しないという事実は、フォーム送信に問題がある可能性を示唆している。
よし、完璧だ。
それでは修正を試みます。
どうなるか見てみよう。
さて、ユーザーの入力を求めています。
users.JSの62行目の入力が必要です。
JS。
というわけで、もうそこまで来ています。
62行目に行きましょう。
そこには必須入力の追加と書かれています。
そこで、間違ったEメールパスワードを処理し、エラーメッセージでリダイレクトするサーバーロジックを追加します。
大丈夫です。
ここでも同じことです、問題ありません。
では、保存して続行します。
続行するにはyと入力してください。
はい、送信します。
では、もう一度テストしてみましょう。
アプリを起動します。
このURLを取得します。
よし、もう一度やってみよう。
ユーザーパスワードが入力されました。
ログイン。
これでログインできました。
自動で直りました。
なんて素晴らしいんでしょう。
とてもクールだ。
アプリに戻って続けてください。
もう一度npm startを実行するように要求されています。
はい、素晴らしい。
問題のデバッグを始めてもいいですか?
非推奨の警告が出ています。
なので、おそらく何もする必要はないのですが、とにかく要求されています。
では、進めてください。
非推奨の警告は致命的な障害の原因ではないかもしれませんが、今後のアップデートで注意が必要かもしれません。
だからまだ修正しようとしているし、少しはマシになる。
非推奨のMongooseの警告を削除します。
今度はnode trace deprecationを実行するように言っています。
はい、できます。
ログインしてサーバーを再起動し、セッションがアクティブなままであることを確認して、セッションの永続性が機能することを手動で確認してください。
よし、始めよう。
ここで私はログインしている。
ログインしたままです。
サーバーを停止します。
サーバーを再起動します。
戻って更新すると、ログインしたままです。
完璧だ。
では、タスクナンバー9を実装します。
JWTペイロードから取得したデータを使って、ログインしているユーザーのファーストネームを表示するホームページを構築する。
よし、いくぞ。
npm startをもう一度。
はい、テストはすべてうまくいっています。
次のステップに進む。
さて、今度は私に何かをするよう求めてきます。
もう一度ログインして、ホームページにリダイレクトされます。
ページに私の名前が表示されていることを確認してください。
もっと自動化された方法として、ターミナルからcurlを使って実装をテストすることもできる。
しかし、私は手動で行うつもりだ。
Startをクリックする。
こちらに移動します。
ようこそ、テスト。
更新すると、ログインしたままだ。
そしてまだwelcome, testと表示されている。
完璧だ。
では、完了です。
おめでとう。
プロジェクト生成の100%に到達しました。
これでフルスタックのアプリケーション、フロントエンド、バックエンド、ログイン方法、ログイン情報をデータベースに保存する方法ができた。
JWTシークレットプロトコルは、GPT PilotのAIによって完全にセットアップされています。
本当に印象的です。
今、私はそれが機能するかどうかを検証するために、プロセス全体を通してステップバイステップで作業しました。
いくつかの問題にぶつかり、AIの助けを借りてそれを修正した。
そして最後に、readmeファイルにさらに情報を書き込むようになった。
アプリは完成した。
これで使える。
素晴らしい。
この美しいコードを見てくれ。
何か機能や変更を追加するかどうか聞いてくる。
今のところ、「いいえ」のエンターをクリックするだけだ。
でももちろん、このアプリケーションを拡張し続けることもできる。
先ほども言いましたが、この小さな戻る矢印をクリックしてアプリを選択すれば、主要なステップを選択することができます。
ここではコーディングとします。
そして、開発ステップを選択することもできます。
どのステップからでもやり直すことができます。
これらのステップは、このアプリケーションを構築するために行ったさまざまなステップを参照しています。
何か問題にぶつかったら、彼らのDiscordに飛び込もう。
2人の創設者は素晴らしい。
彼らはとても親切だ。
彼らはあなたを助けてくれるだろう。
下の説明文にDiscordのリンクを貼っておく。
このビデオが気に入ったら、「いいね!」と「購読」をお願いします。
それではまた次のビデオでお会いしましょう。