GPT-4 builds a Chat App with SignalR & Angular 16 🚀

hello my dear friends welcome back to the channel now last week we created a chat console application with signalr and the help of chat GPT or gpt4 and this was pretty amazing because we did it in maybe just 10 minutes so please have a look if you want to know how we did this but today your request was to create the client application for that signal or chat application on the chat server with angular so today let's do pretty much the same thing just with angular but before we start if you learned something and like this tutorial I would really appreciate it if you click the like button maybe even subscribe to the channel it does make a difference thank you very much for that and now let's start with the tutorial and here is already The Prompt I would like to build a chat app with.7 signalr and angular 16 any ideas how to do that certainly GPT always has the right idea to do that and the first thing we have to do are some prerequisites of course we have to install.net 70.7 SDK node should be installed and also angular so I did this already if not please make sure if you you didn't please make sure that you do this first and then we can actually create our application now here GPT suggests to use the.net CLI yes of course we can do it that way or we just use Visual Studio to do it and there we are already and the first thing we need is actually an asp.net core web API project this is what we are doing with this Command right web API new web API and it is calling it chat app now I will choose the name chat app angular maybe that's better so we know that this is done with angular angular then the client is done with angular and I will of course as always push this to a public GitHub repository so check out the video description for the link below and if you like the repo maybe you want to subscribe to my channel that would be very very nice thank you so much all right.net7 it is no authentication https we use controllers enable open API support why not just leave it at that we hit create and there is our web API now again we can use the.net CLI of course for the next steps which is installing this package here so one very important step is to actually install this the signal r nuget package we can of course also do it like that if you would like to click and not use the CLI for this little step here and there it is signalr components for providing real-time bi-directional communication across the web all right install this thing accepts it is now installed but first little well it's not really an issue but something GPT does not know as you can see here that this package is actually deprecated of course it still works and we can still use it but it is actually not really necessary all right so this is unfortunately one thing we have to consider when using GPT here in this case it does not have the latest knowledge of all these Technologies again still it works like that next thing we can also see here it suggests to use or change the startup c as well internet 7 and actually.net6 also of course we have no startup CS anymore and I ask GPT to use something different here there was my uh prompt and in the end actually I don't have a startup CS only a program CS what should I do apologizes that's nice and it says in.6 and later by default startup the startup class is not used we have a program CS so we can use this thing and what we have to do then is to still let me go back up we can simply add this line this thing is not necessary probably let's see there we are so we go to our program Cs and now here this won't work but we just the Builder and then Services add signal R it's called Builder and we're done and you see it grabs this from Microsoft asp.net core signalr now what happens if you remove this reference so here we just uncomment this save it go back still seems to work right so let's move on next steps are to at the end point that we want to use well we haven't created the chat Hub class yet but still let's just do this and again this is the startup CS way with the configure method and down here in the program CS it should look a bit different actually uh there it is nope here it is okay it says use endpoints but this again is not really necessary you can also do something like that app map Hub chat Hub and this works as well you see right at the beginning we have pretty much the right steps but the code is not a hundred percent correct but again with the experience I have so far now with GPT you can ask GPT to fix that every time and usually eventually it will get it right so let's focus now on the next step which is creating the chat Hub class there we are and we can actually yeah let's let's copy this thing here only the method all right so we create a new folder call this hubs and in here now we add a new item this thing I was called chat hop and in here now we just paste this method and this Arrow here comes because we have to also inherit from or derive from our Hub class and then this works and it automatically adds the using directive here all right now to explain that maybe just real quick and later we do a code recap this sent message method is called then from the client as soon as a user wants to well send a chat message with the arguments the username and also the actual chat message and when this happens this chat Hub then broadcasts another message to all connected clients with this name so this message then gets the name receive message and also with the with the arguments the username and the actual chat message so many messages and then we have kind of a listener in the angular client later and whenever this listener will get a message from our chat Hub with the name receive message it will grab the arguments the username at the chat message and do something with that so that's the idea and this is pretty much everything we need here for our chat server already alright the next step is to create the actual angular project and let's do that here but we will use the terminal so here first we check node version 1816.0 and PM is 8 12 and 2 and now the version of angular is angular CLI 16.0.0 all right and now with that we can actually copy exactly that command so we will create a new engine app without a routing without routing and CSS for The Styling now let's see and it's creating the angular app this takes a while so let me skip this and here is the result our chat app client and what I like to do is I just open this with Visual Studio code instead of visual studio so we've got visual studio for our web API and now angular in Visual Studio code because we have no CS approach file for instance if you want to do that differently of course you can create an angular project using the templates from Visual Studio use it then in Visual Studio itself but if you're doing it with the CLI I think still the maybe easier option is to use Visual Studio code instead so here's our project and now I would say we continue implementing the client so first thing we need is the signalr package so we open the terminal and just paste this command and this package will be installed and then the next thing already is to modify the app component so we will rgbt is suggesting to not create another component for our website application it is just doing everything here in the default or the standard app component so let's just copy this and go back here package is installed so in the source and then app folder we've got our app component TS and here we enter the Hub connection after that we add the following properties or we can just copy it here all right so let's do that already got an error here S6 levels and yep all right let's try to figure that out later then the Constructor all right okay now first thing I guess we have to fix here is this URL since we did not use the CLI the default Port now it's not 5001 so let me have a quick look here in the properties folder and the launch settings we see here on https when we run this here in a minute or so Port is 7084 so let's grab this one paste it here and then this should work next thing is methods to start the connections send messages and handle received messages alright so we just again copy everything and paste this down here engine in it now here's the listener I talked about earlier so whenever we get this message here receive message then we push this string to our messages array up yeah here it is all right okay now this is also fixed great and then okay we start the connection and this is not a send message so I assume when we are clicking a buttoners or enter on the keyboard then this method is called and it tries to invoke the see that send message message to the the chat Hub all right and now the markup so only the HTML is left copy this overwrite everything of course there's something missing so I had to enter continue and that's the rest almost something like that I guess um I think this should be it and now the errors are because of actually the forms module I think but it is not telling us how to fix this or did I miss something we have The Hub connection and the parameter of the properties here signal Hub connection the methods HTML and then it is continuing with cores this is of course something we have to do so yeah why not we can do this as well again we have no startup here so no configure Services method told you that I asked GPT to fix that so here now we see the correct implementation actually so let me just go back real quick to the program CS and for instance up here now we can add our course policy so meaning if you're not familiar with cross origin resource sharing this means that the base URL here localhost 4200 and localhost what was it 7084 I think is not the same so this won't work just for security reasons but here now we tell our web API everything's fine just allow any request methods any had any credentials that are coming from 4200 and they are allowed to access our watch setup in essence real real short explanation I guess okay and also yep that's what I was looking for we have to add this little line and we can actually edit let's say down here we use this course policy and here we need to add our using director for the chat hub okay so this looks good I think now here's the complete thing all right and here now it's telling us to run everything but this won't work so let's see let's just try to run this okay we've got the open API Swagger not really necessary here and this will not work definitely not work we already see the arrows here but let's just see what the errors are or let me just save everything first and now try NG serve because what I plan to do is to just copy and paste the error to GPT and I hope the gbt will do its magic then uh uh yeah let's say getting the following errors and it should yeah look likes the four module is not imported of course for the two-way binding we need this so let's just copy this and in the app module now we add this line and also the forms module to the Imports and that's the complete codes remove the user and message template variables are okay all right let's copy this and now this should work let's see we just paste everything again save everything is it rebuilding no it's not oh yeah NG surf or maybe already with open okay now this still does not seem to work getting this error here again let me try to copy and paste this and then maybe we try to fix this ourselves because this is not very big application okay let's try that but actually it does look exactly the same yeah let me let me try something remove this and this and now instead of using the template variables let me just add a user and a message here so we have our user which is a string by default an empty string and also a message that is a string like that and here now we just use the user enter message save everything [Music] and it compiles successfully but I try to let me just try to run this one more time manually and then I would like to see if it works okay this well it does look kind of better I guess so now let's enter our username and the message hello second window open here hey what's up we're getting the message all right and then Joel says something like nothing and Ellie also gets the message okay so this worked but we have to definitely talk about that first thing you see it would not work if you have no knowledge at all regarding the.net web API or angular so you really have to know what's going on there kind of or at least a little experience you should have a little experience here and then I think you can fix this manually still it's a great start to do this actually with.net alone in my other video with the console application this worked extremely well but with angular GPT seems to have some problems I don't know why tried it before it got different solutions from gpt4 and then I decided to use this solution here but it really bothers me that it's not able to fix this here so maybe we can just ask could you use properties for the user and the message instead and what does GPT then suggesting but you see to to write this prompt again you you have to know what you actually want to do and you have to know what's going on there so now it is pretty much doing something similar that I did edit the user and the message and then it changed the sent message methods it's a quick look yeah I could do it like that of course and then where is it that's the updated app component it is uh setting the message to an empty string again here after sending the message and then in the HTML this is the new one without the arguments here let's try that as well I think it is a better way to do it like that so here I change the send message now to use the actual properties here and then we also can now I think could we paste the complete HTML here save this again it is rebuilding and now uh let's say and we should get the message already hello Yep this works it works worked yeah nice all right so this works now again I will push this to GitHub but now if you want to stay with me a quick code recap now first again the the web API really really small project of course important stuff is the ad signal R and then that we want to use this Hub this is the the first thing you should do create the Hub class here deriving from Hub a base class 4 signal or Hub and then in here you can write any methods you want actually simplest thing we did is to write a method called send message with two arguments the user and the message and when this is done and it gets this message from any client then it broadcasts this back to all the connected clients so this means when Joel writes a message then Joel and Ellie gets the uh the data there right user and message that's pretty much everything now regarding course we also had to add these lines here to make this possible so that the client works with the actual server this is already the web API and now angular we had to add the forms module for our two-way binding and then here in our HTML this is really really simple it doesn't look that nice so maybe you want to use at least an unordered list or something like that to display the messages or maybe even a text area check out this video here in the info card for my older video about that done with blazer but if you want me to do this with gpt4 and Blazer together with the signalr web API then and let me know that in the comments below please and then I'm happy to do this as well but here we just have a for loop with the message in the messages array and then we have a little tiny form with the send message method the username the message I think this is clear and the button to to send this stuff and here then again there are endless ways to do that so here then we have our chat up client we need the Hub connection I think this is important we need the Microsoft signalr package also very important and then this I think there are again infinite variations of that we have an area of messages also the user and the message here and the first thing is we connect to our chat up and then here The Listener for the receive message messages with the user and the actual chat message and then we push this and when this is done we see our messages here of course this is just the listener then we start the connection and then here also very important the send message method to will tell the chat Hub the chat server whatever to broadcast this new data to all the connected clients so I hope you learned something if so I would really appreciate it if you hit the like button maybe even subscribe to my channel thank you very much for that again code is available on GitHub check out the video description below thank you very much for watching and I hope I see you next time take care

Channel: Patrick God

Views: 6,135

Keywords:

Id: aGRryIwvnS8

Length: 23min 59sec (1439 seconds)

Published: Tue May 09 2023