【VSCodeとGPT Pilotでアプリ開発をマスターする】英語解説を日本語で読む【2023年12月22日｜@Matthew Berman】
この動画では、GPT PilotというAIツールを用いたフルスタックアプリケーション開発のプロセスが紹介されています。GPT Pilotはエンジニア向けのツールで、エンジニアとAIの協力により複雑なアプリケーションを開発可能です。動画では、GPT PilotのVSCodeプラグインの使い方、プロジェクトの設定、バックエンドとフロントエンドの開発プロセス、デバッグとテスト方法が説明されています。最終的には認証機能を持つアプリケーションが完成し、GPT Pilotのドキュメント生成機能も紹介されています。
公開日：2023年12月22日
※動画を再生してから読むのがオススメです。
User password entered.
ユーザーパスワードが入力されました。
Log in.
ログイン。
There we go, you are logged in.
ほら、ログインできた。
So it fixed itself.
というわけで、勝手に直りました。
How impressive is that?
なんて感動的なんでしょう。
GPT Pilot allows you to work with AI to create sophisticated full-stack applications.
GPT Pilotを使えば、AIと協力して洗練されたフルスタック・アプリケーションを作成できる。
I know I've reviewed a few other AI coding assistants, but GPT Pilot really stands alone.
他のAIコーディング・アシスタントをいくつかレビューしてきましたが、GPT Pilotは本当に傑出しています。
The level of complexity and sophistication that you can build into a full-stack application simply by working with AI with GPT Pilot is incredible.
GPT Pilotを使ってAIと作業するだけで、フルスタックアプリケーションに構築できる複雑さと洗練さのレベルは信じられないほどです。
And GPT Pilot is made for engineers and engineering teams, so I'm going to show you how to use it today.
GPT Pilotはエンジニアやエンジニアリング・チームのために作られているので、今日はその使い方を紹介します。
They're the sponsor of today's video, and they have an amazing VSCode plug-in that just came out, so let's use that.
彼らは今日のビデオのスポンサーで、素晴らしいVSCodeプラグインが出たばかりです。
Let's go.
さあ、使いましょう。
So, with VSCode open, I'm going to go over to my extensions right here, and I'm just going to type in GPT Pilot.
VSCodeを開いた状態で、自分の拡張機能に行き、GPT Pilotと入力します。
And there it is, GPT Pilot Alpha.
そう、GPT Pilot Alphaだ。
So you're going to click this, and I already have it installed, so go ahead and click install.
これをクリックして、すでにインストールされているので、先に進んでインストールをクリックする。
And once you have it installed, you're going to see this little tab right here on the left side.
インストールが完了すると、左側にこの小さなタブが表示されます。
Click that.
それをクリックします。
We click open GPT Pilot.
GPT Pilotを開くをクリックします。
And since I've already done this, it's a little different, but the first thing you're going to be greeted with is asking for your GPT-4 API key.
そして、これをすでにやっているので、少し違いますが、最初に出てくるのはGPT-4 APIキーの入力を求められます。
Once you do that, click create new app.
そうしたら、create new appをクリックする。
And the really nice thing is you can save your progress along the way.
そして本当に素晴らしいのは、途中経過を保存できることだ。
If you build a complex enough application, it could take a few hours to do in collaboration with the AI.
十分に複雑なアプリケーションを作れば、AIとの共同作業に数時間かかるかもしれない。
But a few hours is nothing compared to potentially weeks of work that it would have taken without this.
しかし、これがなければ数週間かかっていたかもしれない作業に比べれば、数時間などたいしたことはない。
And what we're going to be building today is a full-stack application that allows for authentication.
今日私たちが作ろうとしているのは、認証を可能にするフルスタックのアプリケーションです。
So logging in, resetting the password, registering.
ログイン、パスワードのリセット、登録。
Everything full-stack.
すべてフルスタックだ。
So what is the project name?
プロジェクト名は何ですか？
Auth-Me.
Auth-Me。
Hit enter.
エンターキーを押してください。
Describe your app in as much detail as possible.
アプリをできるだけ詳しく説明してください。
So we're going to create a Node.js app that enables users to register and log into the app on the front end.
Node.jsアプリを作成し、フロントエンドでユーザーがアプリに登録してログインできるようにします。
Create only three pages.
3つのページだけを作成します。
One that enables users to log in, the other that enables users to register, and the third one shows the data of the logged-in user.
1つはユーザーがログインできるようにするページ、もう1つはユーザーが登録できるようにするページ、そして3つ目はログインしたユーザーのデータを表示するページです。
Make sure that after registration or login, the user is kept logged in in a session so that when you visit the homepage, you could see the login user.
登録またはログインの後、ユーザーがセッションにログインしたままであることを確認し、ホームページを訪問したときにログインユーザーを見ることができるようにします。
And we're going to be using for the database.
そして、これからデータベースに使用します。
Now you can build anything here.
ここでは何でも作ることができます。
Okay, now that we have this described, go ahead and push send.
さて、ここまで説明したら、送信ボタンを押してください。
And it's going to start asking me questions.
そして、質問を始めます。
So again, this is an engineer working with the AI together to create an amazing application.
繰り返しますが、これはエンジニアがAIと一緒に素晴らしいアプリケーションを作るための作業です。
What authentication method should we use for the login and registration process?
ログインと登録プロセスにはどのような認証方法を使うべきですか？
If you don't care, you could just say, I don't care, choose whatever you want.
もしあなたが気にしないのであれば、気にしない、好きなものを選べばいい。
But I'm going to say JWT tokens.
しかし、私はJWTトークンと言いたい。
Should the user verification process require email confirmation?
ユーザー認証プロセスでは、Eメールによる確認が必要ですか？
No.
いいえ。
Do we need password strength requirements or complexity validation for the user registration?
ユーザー登録にはパスワードの強度要件や複雑さの検証が必要ですか？
Yes, but you can decide what that is.
はい、でもそれはあなたが決めてください。
Should the homepage display any specific user data besides the username or email?
ホームページには、ユーザー名やEメール以外に特定のユーザーデータを表示する必要がありますか？
Just the first name.
名前だけです。
All right, now it's asking me all the clarifying questions that it needs, and it's giving me a project summary as you can see here.
よし、これで必要な明確な質問がすべて聞かれ、ここにあるようにプロジェクトの概要が表示された。
I'm going to make this screen a little bit bigger.
この画面を少し大きくします。
So now it is doing planning, and it's saying, Here are all the technologies that you're going to be using.
この画面ではプランニングが行われ、これから使用するすべてのテクノロジーが表示されます。
Now it already stopped, and it's waiting for an input from me.
今はすでに止まっていて、私からのインプットを待っている。
So please set up your local environment so that the technologies listed can be utilized.
というわけで、列挙した技術が活用できるようにローカル環境を整えてください。
When you're done, write done.
終わったら、doneと書いてください。
So I can either write done, or I can simply click this done button.
完了と書いてもいいし、この完了ボタンをクリックしてもいい。
I'll click the done button.
完了ボタンをクリックします。
I already have installed some of these things.
これらのいくつかはすでにインストール済みです。
It can actually install itself, but I like to just take a look, and if I don't notice anything that I clearly don't have, I go forward and click done.
実際にインストールすることもできますが、私はただ見てみるのが好きなので、明らかに持っていないものに気づかなければ、先に進んで完了をクリックします。
And now it's creating the action plan for development.
すると、開発のためのアクションプランが作成されます。
And the nice thing is, as you're developing, you're going to run into bugs, just like any developer would.
素晴らしいのは、開発をしていると、他の開発者と同じようにバグに遭遇することだ。
And you can work with the AI to debug things, to test things along the way, and to make sure that you're ironing out things as you go.
そして、AIと一緒にデバッグをしたり、途中でテストをしたりしながら、確実に問題を解決していくことができる。
And this iterative process between an engineer and an AI is really what distinguishes GPT Pilot.
エンジニアとAIの間で繰り返されるこのプロセスこそが、GPT Pilotの特徴なのです。
Okay, so let's take a look at some of the descriptions of what it's going to be building.
では、GPTが何を構築していくのか、その説明のいくつかを見てみよう。
Implement user registration backend logic.
ユーザー登録のバックエンドロジックを実装します。
And we have the programmatic goal, we have the user review goal.
そして、プログラム的なゴール、ユーザーレビューのゴールがあります。
Here's another one, create the registration page.
もう1つは、登録ページの作成です。
So it's saying exactly what it's going to be building.
ということで、まさに何を作るのかが書かれています。
Now for the actual development, implementation task one, initialize a Node.js project with Express.js and set up a basic server.
実際の開発、実装タスク1では、Express.jsでNode.jsプロジェクトを初期化し、基本的なサーバーをセットアップします。
So here we go, it says here to implement task one, you'll need to follow these steps.
タスク1を実装するには、以下のステップに従う必要があります。
But that just means that it's going to run it for me, and you'll see that in a minute.
ただ、これは私のために実行してくれるということを意味している。
So here you can see it's planning all the commands that it's going to have to write out.
このように、書き出さなければならないコマンドをすべて計画しているのがわかるだろう。
Okay, here we go.
よし、始めるぞ。
So now it paused, and it says, Can I execute the command npm init -y?
npm init -yコマンドを実行できますか？
And it gives you a timeout window that it can execute that within.
コマンドを実行できるタイムアウトウィンドウが表示されます。
So can I execute this?
実行できますか？
Yes, yes you can.
はい、できます。
And the nice thing is, as it's building, we're actually going to see the code being written over here on the left side, all the files being created.
素晴らしいのは、ビルドが進むにつれて、左側にコードが書き込まれ、すべてのファイルが作成されるのが見えることです。
And if it ever needs input on a specific line of code, it actually pulls up that file, highlights the line of code, and asks you for that input.
特定のコード行について入力が必要な場合は、実際にそのファイルを引っ張り出して、コード行をハイライトし、入力を求める。
So here we go, Can I execute the command npm install Express?
それでは、npm install Expressというコマンドを実行できますか？
Yes, you can.
はい、できます。
Okay, so here's the first good example.
さて、これが最初の良い例だ。
So I'm going to move that over a little bit.
それを少し移動させます。
And what we see here is that it asks me for input.
ここで私に入力を求めています。
Please open the file server.js and on line three, check it out.
server.jsというファイルを開いて、3行目で確認してください。
So here we go, input required.
では、入力が必要です。
Decide on a fallback port number other than 3000 if necessary.
必要に応じて、3000以外の予備のポート番号を決めてください。
So it is highlighted for me.
私の場合はハイライトされています。
I'll fall back to 3002.
3002にフォールバックします。
And that's it.
これで完了です。
You just save the file and you continue.
ファイルを保存して、次に進む。
And we keep going just like this.
こんな感じで進めていく。
So can I execute the command node server.js?
では、node server.jsというコマンドを実行できますか？
Yes, server is running on port 3002.
はい、サーバーはポート3002で動いています。
Great.
素晴らしい。
And now what we're going to be doing is testing whether the server is spun up correctly.
これから行うのは、サーバーが正しく起動しているかどうかのテストだ。
So it's saying, Okay, I'm going to spin up the server.
サーバーを起動します、と言っています。
Then you're going to run this curl command to just make sure it's up and running.
それから、このcurlコマンドを実行して、サーバーが起動していることを確認します。
And it's also telling me what to look for if it did work properly.
そして、ちゃんと動いたかどうかを確認するために何をすればいいかも教えてくれています。
Okay, so stopped.
よし、停止した。
We're going to click start app.
アプリの起動をクリックします。
Now the app is running on port 3002.
アプリはポート3002で実行されています。
Scroll up a little bit.
少し上にスクロールする。
We're going to grab this curl command.
このcurlコマンドを実行します。
And it asks me to ping port 3000, but I believe it's 3002.
3000番ポートにpingを打つように要求されますが、3002番ポートだと思います。
So I'm just going to change that, hit enter, and there we go.
それを変更して、Enterキーを押して、完了です。
It's alive.
これで生きている。
So we can either stop the app or we can just continue.
アプリを停止してもいいし、そのまま続けてもいい。
And I will continue.
続けます。
Now it's going to install packages, task two.
パッケージのインストール、タスク2です。
And so now you're starting to get the feel of the kind of ping pong back and forth between myself and the AI building this application.
これで、私とこのアプリケーションを構築しているAIとの間で、ピンポンが行ったり来たりしているような感覚を味わっていただけると思います。
Okay, so we got to another stopping point.
さて、もうひとつの停止ポイントにたどり着きました。
Can I execute the command npm install Mongoose?
npm install Mongooseというコマンドを実行できますか？
Yes.
はい。
So all I really have to do while it's sitting here building things is just confirm and make sure it's working.
このAIがビルドしている間に私がしなければならないことは、それが機能しているかどうかを確認することだけだ。
So here we can see user.js just got built out.
user.jsがビルドされました。
And now we have a pause.
そして今、一時停止しています。
Open the file MV and online one.
MVとオンラインのファイルを開いてください。
Check out the required input.
必要な入力をチェックしてください。
Okay, let's see.
よし、見てみよう。
So it just says replace with your MongoDB connection string if you're not using the default local.
デフォルトのローカルを使ってない場合は、MongoDBの接続文字列に置き換えてください。
But we are, so we just delete that comment, save, and continue.
デフォルトのローカルを使ってない場合は、MongoDBの接続文字列に置き換えるだけです。
And yes, you can do npm start.
そして、npm startを実行します。
Okay, so we have our first error.
最初のエラーが出ました。
So it says can't find module MV, and that's because we don't have it installed.
モジュールMVが見つからないと表示されていますが、これはインストールされていないからです。
So can I start debugging this issue?
この問題のデバッグを始めてもいいですか？
Yes.
はい。
So here we go.
では始めます。
The error message indicates that M package is not there.
エラーメッセージはMパッケージが存在しないことを示しています。
Can I install it?
インストールできますか？
Now it's asking me to install it.
今、インストールを要求しています。
Yes, you can.
はい、できます。
npm start again.
npm startをもう一度。
And that seems like it worked.
これでうまくいったようだ。
We have two warnings, which is what we're seeing here, but that's okay.
2つの警告が表示されていますが、問題ありません。
Now we've reached a point where it's asking me to make sure everything's working again.
これで、もう一度すべてが機能しているかどうかを確認するところまで来た。
So start app.
アプリを起動してください。
Okay, these are all warnings.
さて、これらはすべて警告です。
That's okay.
大丈夫です。
And MongoDB connected.
MongoDBが接続されました。
So it looks like it's working.
うまくいっているようだ。
So we're just going to click continue.
では、続けるをクリックします。
Now it's going to be implementing user registration backend logic with password hashing using bcrypt.
これでbcryptを使ったパスワードハッシュによるユーザー登録のバックエンドロジックが実装できました。
All right, we got another one.
よし、また別のものがあります。
npm install bcrypt.
npm install bcrypt.
Yes.
はい。
Okay, now it's gotten to the point where it actually wants me to test user functionality.
では、実際にユーザーの機能をテストするように求められました。
So I'm going to try to register a new user for the app.
アプリケーションの新しいユーザーを登録しようとします。
So we'll go ahead and click start app.
アプリの起動をクリックします。
And then, we're going to run this request to just make sure that the user registration works.
そして、ユーザー登録がうまくいくことを確認するために、このリクエストを実行します。
Now, I could also do this through the browser, no problem.
今、ブラウザを使っても問題ありません。
Alright, so I pasted in the code.
さて、コードを貼り付けました。
Let's see if it works.
うまくいくか見てみましょう。
User created successfully.
ユーザーの作成に成功しました。
Amazing!
すごい！
Okay, so now that we know it works, we're going to come back here and we're just going to click continue.
さて、これでうまくいくことがわかったので、ここに戻って、continueをクリックします。
And it's going to keep building.
このまま作り続けます。
It's that simple.
とてもシンプルだ。
And it looks like we're about a third of the way done.
進捗は約3分の1ほどです。
So, here we go.
さあ、いきますよ。
Now it's creating a bunch of new pages.
新しいページがたくさんできました。
It's also adding to the readme, which is really cool.
READMEにも追加されていますが、これは本当にクールです。
So, it's actually creating a readme as well.
だから、Readmeも作成している。
Okay, so now it needs to install ejs and bootstrap.
では、ejsとbootstrapをインストールする必要があります。
Go ahead.
どうぞ。
And now it's going to start doing the front end, I think.
そして、これからフロントエンドの作業を始めます。
So, now it is asking me if I want to do something.
何かしたいことがあるかどうか聞いてきます。
Can I execute the command make directory?
makeディレクトリというコマンドを実行できますか？
Yes, I need human intervention.
はい、人の介入が必要です。
Copy the bootstrap CSS and JS files into the public SL CSS and public SLJS directories respectively.
ブートストラップのCSSとJSファイルをそれぞれpublic SL CSSとpublic SLJSディレクトリにコピーします。
Okay, so it does seem like I need to do this part manually.
なるほど、この部分は手動でやる必要があるようだ。
So, let's go download those libraries.
では、ライブラリをダウンロードしよう。
So, I go to get bootstrap.css it told me to, and here it is.
bootstrap.cssをダウンロードするように言われたので、それをダウンロードします。
So, let's unzip it.
解凍してみよう。
And there we go, CSS and JS.
CSSとJSができました。
Those are the two things I need.
必要なのはこの2つだ。
So, I am simply going to replace what I have in there.
だから、この中にあるものを置き換えるだけです。
There we go.
そこです。
I'll delete these, and now it should be good to go.
これらを削除して、もう大丈夫でしょう。
Let's just make sure.
確認してみましょう。
Yep, there's everything.
はい、すべてあります。
Alright, that was very easy.
よし、とても簡単だった。
Next, let's start the app just to make sure it works.
次にアプリを起動して動作するか確認しましょう。
We have some warnings, but otherwise it seems like it works.
いくつか警告が出ますが、それ以外は正常に動作しているようです。
So, continue.
では、続けます。
Can I execute the command node server.js?
node server.jsというコマンドを実行できますか？
Yes.
はい。
Okay, so we have a little error.
ちょっとエラーが出ました。
Got incorrect CLI response.
CLIのレスポンスが正しくありません。
It's a deprecation warning.
これは非推奨の警告です。
So, this is a warning we shouldn't have got the error, but let's see.
これは警告ですが、エラーは出ていないはずですが、確認してみましょう。
Go ahead and debug it, and it might just say, Hey, this is actually a warning.
デバッグしてみてください、警告と表示されるかもしれません。
No big deal.
大したことじゃない。
Yeah, the deprecation warnings are not critical and should not prevent the server from starting.
そう、非推奨の警告は重要ではないし、サーバーの起動を妨げるものでもない。
Okay, so it might try to fix it anyways.
では、それを修正しようとするかもしれません。
No debugging appears to be necessary.
デバッグの必要はなさそうだ。
Okay, so we've gotten to another point where GPT Pilot is asking me to verify that it's working.
さて、GPT Pilotが動作していることを確認するために、もう1つのポイントに到達しました。
So, let's do that.
ではそうしましょう。
So, we just click again, start the app.
もう一度クリックしてアプリを起動します。
We have some depre warnings, and these are all warnings, so that should be fine.
depreの警告がいくつか出ていますが、これらはすべて警告なので大丈夫です。
Server is running on Port 3002.
サーバーはポート3002で動いています。
MongoDB connected.
MongoDBに接続しました。
Okay, so we're going to grab this curl request, going to copy it, switch over to terminal, paste it in, hit enter.
このcurlリクエストをコピーして、ターミナルに切り替えてペーストし、エンターキーを押します。
User successfully created.
ユーザーの作成に成功しました。
Let's try it again just to make sure.
念のためもう一度やってみましょう。
We get an error warning now because this user is already created.
このユーザーはすでに作成されているため、エラー警告が表示されました。
Perfect.
完璧です。
User already exists.
ユーザーはすでに存在しています。
Okay, now that's it.
よし、これで完了だ。
We just click continue.
continueをクリックします。
Implementing task five.
タスク5を実装する。
Implement password strength requirements as a middleware in the registration route.
登録ルートのミドルウェアとしてパスワード強度要件を実装する。
So now it's writing out the plan to put in stronger password requirements, and now it's actually coding it.
これで、より強力なパスワード要件を導入する計画が書き出され、実際にコーディングされました。
Okay, there it made the changes.
では、変更が行われました。
Okay, now it's asking if it could do npm start.
さて、今度はnpm startができるかどうか聞いている。
Sure.
もちろん。
Next, it's going to ask me to test if the password strength requirements are correctly implemented, and it's giving me the code to do that.
次に、パスワードの強度要件が正しく実装されているかをテストするように求められ、そのためのコードが与えられます。
So here it says password weak, and it's going to ask me to spin up the server again and try it again manually.
ここでpassword weakと表示され、もう一度サーバーを立ち上げて手動で試すように言われます。
So there it is.
それがあります。
So I just click start app again.
もう一度アプリの起動をクリックします。
I can scroll up, grab this command right here, switch over to my terminal, paste it in, hit enter, and there we go.
上にスクロールしてこのコマンドを取得し、ターミナルに切り替えて貼り付け、Enterキーを押せば完了だ。
Password does not meet strength requirements.
パスワードが強度要件を満たしていません。
Perfect.
完璧だ。
Okay, so I click continue.
よし、続けるをクリック。
We keep going.
続行する。
Now it's writing the JWT secret code.
今度はJWTの秘密のコードを書いているところだ。
Okay, so it wrote a bunch of code.
よし、たくさんのコードが書き込まれた。
Now it's asking me to install a few things.
いくつかインストールするように言われた。
Go ahead.
どうぞ。
Okay, and I can tell that it is asking me to verify something.
では、何かを確認するように求められていることがわかります。
So anytime you see code highlighted like this, it's asking to verify.
このようにコードが強調表示されているときはいつでも、確認を求めているのです。
So let's look at it.
それでは見てみよう。
Add a secure JWT secret key.
安全なJWT秘密鍵を追加します。
So I'm just going to add super secure.
スーパー・セキュアを追加します。
It doesn't really matter for this test.
このテストではあまり重要ではない。
I'll save it, open this back up, and continue.
保存して、また開いて、続けます。
Now we have another one, session secret key, and it'll be super duper secure.
次に、セッションの秘密鍵についてのもう1つの項目がありますが、これは非常に安全です。
And continue.
そして続ける。
Alright, now we're going to test the login functionality.
では、ログイン機能をテストします。
So let's click start app, grab that command.
アプリの起動をクリックし、コマンドを取得する。
I'm going to paste in the command they gave me, and I'm actually going to use a user that I already know is registered.
私は彼らが教えてくれたコマンドを貼り付けますが、すでに登録されているユーザーを使用します。
So back up here for my previous commands, copy that.
前のコマンドに戻って、それをコピーします。
Alright.
よし。
And then, I'm going to use the password of password 1 2 3 and hit enter.
パスワードをpassword 1 2 3にしてエンターキーを押す。
Logged in successfully, perfect.
ログインに成功しました、完璧です。
And it responded with a token, awesome.
そして、トークンが返ってきました、素晴らしいですね。
All right, back here, continue.
よし、ここに戻って続けよう。
And now we are 2/3 done, congratulations.
これで2/3が終了した、おめでとう。
66.67% of your project generation.
プロジェクト生成の進捗は66.67%です。
And before continuing, it's actually creating documentation, which I absolutely love.
続行する前に、ドキュメントが作成されていますが、これは本当に素晴らしいです。
Very cool.
とてもクールだ。
And here's the documentation on the left side, bunch of information about how this is built.
これが左側のドキュメントで、これがどのように作られているかについての情報がたくさんあります。
Now, implement task 7, create login page using EGS and bootstrap, and handle successful login by redirecting to the homepage.
さて、タスク7を実装して、EGSとbootstrapを使ってログインページを作成し、ホームページにリダイレクトすることでログインに成功したことを処理します。
And here's some of the code.
これがコードの一部です。
And we're on dev step 116 now.
今は開発ステップ116です。
And another really nice thing is that you can always go back.
そして、もう一つ本当に良いことは、いつでも戻ることができるということです。
If you have any problems, you can go back to any step in this entire process.
何か問題があれば、このプロセス全体のどのステップにも戻ることができます。
All 116 steps.
全116ステップです。
You can restart from there and go forward in different directions if you choose.
そこから再開することもできるし、別の方向に進むこともできる。
So if you don't like the way something came out or if you run into any bugs, simply go back to a step and restart it from there.
ですから、何か気に入らないことがあったり、バグに遭遇したりしたら、ステップに戻ってそこから再開すればいいのです。
All right, npm start again.
よし、npm start againだ。
Yes, it's just making sure that it's working.
そう、これは動作していることを確認しているだけなのだ。
And look how much code has been written already.
見てください、もうこんなにコードが書かれています。
I mean, there's so many different files.
さまざまなファイルがありますからね。
All right, dev step 121.
さて、開発ステップ121。
To test if the task was completed successfully, the user can follow these steps.
タスクが正常に完了したかどうかをテストするには、ユーザーは次のステップに従えばいい。
So now it's asking me to do it.
今、私にそれをするよう求めています。
And now I'm actually going to use the web login to see if it worked.
では、実際にウェブログインを使って、うまくいったかどうか試してみます。
And when it's done, it's going to give me the little message to start the app.
完了すると、アプリを起動するように小さなメッセージが表示される。
Yep, so go ahead and click Start.
はい、ではStartをクリックしてください。
I'm going to grab the login URL right there.
ログインURLをここから取得します。
And here we are.
さあ、できました。
So let's make sure that we can log in.
ログインできることを確認しよう。
So I'm going to grab the same user that I just logged in through the terminal, paste it in.
ターミナルからログインしたのと同じユーザーを取得し、それを貼り付けます。
And then I'm going to grab the password as well, paste it in.
そして、パスワードも取得し、貼り付けます。
Login invalid email or password.
ログインに無効な電子メールまたはパスワードがあります。
Okay, okay, okay.
オーケー、オーケー、オーケー。
So let's make sure we can still log in with this.
これでログインできることを確認しよう。
Found redirecting to home.
ホームにリダイレクトされました。
All right, so it does work through the console, but it's not working through the interface.
コンソールからはログインできるけど、インターフェースからはログインできない。
Okay, so we're going to debug this now.
ではデバッグしてみましょう。
So it says right here, if something is wrong, tell me.
もし何か問題があれば、教えてください。
So I'm going to tell it right away.
だからすぐに教えてあげよう。
Okay, so I'm going to say, through the terminal, it works fine.
では、ターミナルを通じて問題なく動作すると言います。
But when I try to log in using the same credentials through the UI, I get this error.
でもUIから同じ認証情報を使ってログインしようとすると、こんなエラーが出るんだ。
And then, I pasted it in.
そして、それをペーストした。
We're going to click submit, and hopefully it's going to be able to fix it.
submitをクリックして、うまくいけば修正できるかもしれません。
Okay, so given the information provided by your colleague, it appears that the issue lies in integrating the front-end login form with the backend login logic.
さて、あなたの同僚から提供された情報を考えると、問題はフロントエンドのログインフォームとバックエンドのログインロジックの統合にあるようです。
The fact that the login works through the terminal but not through the UI suggests that there might be a problem with the form submission.
ログインがターミナルを通して機能するが、UIを通して機能しないという事実は、フォーム送信に問題がある可能性を示唆している。
Okay, perfect.
よし、完璧だ。
So it's going to try to fix it now.
それでは修正を試みます。
Let's see what it does.
どうなるか見てみよう。
All right, now it's asking for some user input.
さて、ユーザーの入力を求めています。
Input required line 62 of users.
users.JSの62行目の入力が必要です。
JS.
JS。
So we're already there.
というわけで、もうそこまで来ています。
Let's go to line 62.
62行目に行きましょう。
There it is, and it says add the required input.
そこには必須入力の追加と書かれています。
So add server logic to handle incorrect email password and redirect with an error message.
そこで、間違ったEメールパスワードを処理し、エラーメッセージでリダイレクトするサーバーロジックを追加します。
Okay, that's fine.
大丈夫です。
And same thing here, that's fine.
ここでも同じことです、問題ありません。
Okay, so we're going to save and continue.
では、保存して続行します。
Type y to continue.
続行するにはyと入力してください。
Okay, submit.
はい、送信します。
All right, now we're going to test it again.
では、もう一度テストしてみましょう。
Start app.
アプリを起動します。
Grab this URL right here.
このURLを取得します。
Okay, let's try it again.
よし、もう一度やってみよう。
All right, user password entered.
ユーザーパスワードが入力されました。
Log in.
ログイン。
There we go, you are logged in.
これでログインできました。
So it fixed itself.
自動で直りました。
How impressive is that?
なんて素晴らしいんでしょう。
Very cool.
とてもクールだ。
Switch back to the app and continue.
アプリに戻って続けてください。
So it's asking to do npm start again.
もう一度npm startを実行するように要求されています。
Yes, great.
はい、素晴らしい。
Can I start debugging the issue?
問題のデバッグを始めてもいいですか？
So we have a deprecation warning.
非推奨の警告が出ています。
So it probably doesn't need to do anything with that, but it's asking to anyway.
なので、おそらく何もする必要はないのですが、とにかく要求されています。
So go ahead.
では、進めてください。
Yeah, so the deprecation warnings are likely not a cause of critical failure, but may require attention in future updates.
非推奨の警告は致命的な障害の原因ではないかもしれませんが、今後のアップデートで注意が必要かもしれません。
So it's still going to try to fix it and do it a little bit better.
だからまだ修正しようとしているし、少しはマシになる。
Remove the deprecated Mongoose warnings.
非推奨のMongooseの警告を削除します。
Now it's asking to run node trace deprecation.
今度はnode trace deprecationを実行するように言っています。
Yes, you can.
はい、できます。
Now it says manually verify that session persistence works by logging in, restarting the server, and verifying that the session remains active.
ログインしてサーバーを再起動し、セッションがアクティブなままであることを確認して、セッションの永続性が機能することを手動で確認してください。
Okay, start now.
よし、始めよう。
Here I'm logged in, refresh the page.
ここで私はログインしている。
I'm still logged in.
ログインしたままです。
I'm going to stop the server.
サーバーを停止します。
I'm going to restart the server.
サーバーを再起動します。
Go back, refresh, and I'm still logged in.
戻って更新すると、ログインしたままです。
Perfect.
完璧だ。
All right, implementing task number nine.
では、タスクナンバー9を実装します。
Build the homepage to display the logged in user's first name using the data retrieved from the JWT payload.
JWTペイロードから取得したデータを使って、ログインしているユーザーのファーストネームを表示するホームページを構築する。
Okay, here we go.
よし、いくぞ。
npm start again.
npm startをもう一度。
Yes, testing everything is working great.
はい、テストはすべてうまくいっています。
Moving on to the next step.
次のステップに進む。
Okay, now it's going to ask me to do something.
さて、今度は私に何かをするよう求めてきます。
So again, log in, then I'm going to be redirected to the homepage.
もう一度ログインして、ホームページにリダイレクトされます。
Verify that the page displays my name.
ページに私の名前が表示されていることを確認してください。
And for a more automated way to test the implementation from the terminal using curl, we can do that.
もっと自動化された方法として、ターミナルからcurlを使って実装をテストすることもできる。
But I'm going to do it the manual way.
しかし、私は手動で行うつもりだ。
So I'm going to click Start.
Startをクリックする。
I'm going to go over here.
こちらに移動します。
Welcome, test.
ようこそ、テスト。
Refresh, and I'm still logged in.
更新すると、ログインしたままだ。
And it still says welcome, test.
そしてまだwelcome, testと表示されている。
So perfect.
完璧だ。
All right, we're done.
では、完了です。
Congratulations.
おめでとう。
You've reached 100% of your project generation.
プロジェクト生成の100%に到達しました。
So now we have a full stack application, front end, back end, a way to log in, a way to store that login information in the database.
これでフルスタックのアプリケーション、フロントエンド、バックエンド、ログイン方法、ログイン情報をデータベースに保存する方法ができた。
We have a JWT secret protocol set up completely done for us by AI, by GPT Pilot.
JWTシークレットプロトコルは、GPT PilotのAIによって完全にセットアップされています。
It is super impressive.
本当に印象的です。
Now I worked with it step by step throughout the process to verify that it worked.
今、私はそれが機能するかどうかを検証するために、プロセス全体を通してステップバイステップで作業しました。
I ran into some issues, and I fixed it with the help of AI.
いくつかの問題にぶつかり、AIの助けを借りてそれを修正した。
And finally, now it's writing more information in the readme file.
そして最後に、readmeファイルにさらに情報を書き込むようになった。
The app is done.
アプリは完成した。
Now you can use it.
これで使える。
Wonderful.
素晴らしい。
Look at all that beautiful code written.
この美しいコードを見てくれ。
Now it's asking me if I want to add any features or changes.
何か機能や変更を追加するかどうか聞いてくる。
And so for now, I'm just going to click enter for no.
今のところ、「いいえ」のエンターをクリックするだけだ。
But of course, you can continue to extend this application.
でももちろん、このアプリケーションを拡張し続けることもできる。
And as I mentioned before, if I click this little back arrow right here, I select an app off me, you can select any of these major steps.
先ほども言いましたが、この小さな戻る矢印をクリックしてアプリを選択すれば、主要なステップを選択することができます。
So I'm going to say coding.
ここではコーディングとします。
And then, you can also select a development step.
そして、開発ステップを選択することもできます。
So, you can start over from any of these steps.
どのステップからでもやり直すことができます。
And these steps are referencing the different steps that we went through to build this application.
これらのステップは、このアプリケーションを構築するために行ったさまざまなステップを参照しています。
If you run into any problems, jump in their Discord.
何か問題にぶつかったら、彼らのDiscordに飛び込もう。
The two Founders are great.
2人の創設者は素晴らしい。
They're super helpful.
彼らはとても親切だ。
They'll help you out.
彼らはあなたを助けてくれるだろう。
I'll drop the Discord Link in the description below.
下の説明文にDiscordのリンクを貼っておく。
If you liked this video, please consider giving a like and subscribe.
このビデオが気に入ったら、「いいね！」と「購読」をお願いします。
And I'll see you in the next one.
それではまた次のビデオでお会いしましょう。
この記事が気に入ったらサポートをしてみませんか？