Beginner to Advanced Chat Series with .NET 8 Blazor with Interactive Wasm : Create Database Service.

Hello friends and everyone welcome back to net  code Hub channel I am Frederick and I'm happy   to have you here today in this video we are going  to talk about advancing our chat application that   we started in the first video so if you haven't  checked this out then please do check it out check   the video description you're going to find it in  there so we are building a chat app using net8   blazer with interactive um web assembly render  mode okay yeah the name sounds confusing so it is   net8 Blazer web app with interactive web assembly  so that is what we have started so check the video   description for the first video now in the first  video you could see that we able to create our   connection and our Hub we able to call this method  and our chat was working but we had an issue that   we need to or it needs to be improved that is when  sending a chat we want to rather handle it with   a model and let's also see if we can optimize the  code that we have written we can create um a class   as a service to be use in in our chat application  all right so before we Dive Right into this make   sure you have subscribed to this Channel and I'll  hit on that Bell to receive update as soon as I   upload new content give this video a thumbs up if  you learn something here also I do offer coaching   to people who are interested in Blazer or let me  say they not technologist talking about Blazer web   assembly server Mari Blazer hybrid and Etc okay  so and web API is very important okay so if you're   interested check the video description and you're  going to find an email in there you can write to   me through it all right the S of this project also  be available so if you want to grab um it check   the video description and going to be possible  available as well all right so that is it let's   dive into it here we can add the models here but  you know we have this uh client project we have   the Ser projects and maybe later on we can decide  to add more models we do we want to organize our   work so it's better that we add a class Library so  we can um we can add them to each of the projects   okay and we can add that model in there or maybe  you can also add it in the client and well you can   do that so let's go solution right click on the  solution name let's click on new project and maybe   for this I'm going to add a class library and  maybe this is going to be only modus okay so chat modus so this chart model here  I'm going to make it as chart or   chat maybe chat will be okay so once you  have this chat what else are you going to do so we're going to pass in some properties  here test username and our message so instead   of this test they can make here as that's a  message you see we need to include component   model the DAT annotation so we can make them  required we can restrict it whil um using   this creating an instance of this okay so now  that we are done we can just go straight ahead   to the server section I click on dependencies  and you know add project reference and quickly   that is a model so you have to add this you  also do the same CH to the client from the   dependencies where click on it go to add project  references and then here get it done you see so   we are sharing this between the two projects  and when you come to the pages chart page in   here okay watch out so instead of creating  all this we going to remove everything from   here I'm going to say that this is message oh is  it message nope this is chat so private chat so   using chat model and now here we're going  to say that it's a chat and this equal to new you see is very simple now let's grab this  so here instead of passing on this long one no   we going to not replace it with this you see  that is a m very simple one but from this we   need to specify the data type so once have this  the T value so let's specify this T here as the   chart there is a model and that is an object so  we don't need this anymore or do you think we   need this no we don't so let's get rid of that  so all that we need to do here is messages. add   the chat and we are done but this is giv us error  why because of this so let's make it as a list of   chart error sub you see so reoptimizing this  aside from that when it come here we can see   message in chat chats let's here this these are  messages or we can make this as chats okay so   it countes more readable to you and I so chat  and now here message or chat in chat what can   we do in here to actually set this straight we  are going to modify this so instead of having   this here we can replace it with this very simple  one so control KD we format it well so chat in chat so chat in chat yeah so in here going  to say chat message then chat so this is   is coming from the message property and that  is all so can see we have the date we break   it we have the username we break it then we  have the message well you can customize the   way that you want to suit what you want it's  just a demo and you can build upon this also   aside from that when we come here instead  of having this input test box we can guess   we can get rid of this isn't it so let's get  rid of this one from this and that get rid of   this and we're going to replace with with a very  simple one as well and this we can use edit form we see so we're going to use an  edit form here and now let's clear this okay we have an error why because this is chat okay now send message we can still  navigate to the same send in here okay   but we're going to create a method for  that so let's it is a message and now   we have a username we have the message  you know this is not just a test it is rather message then we have this button as what  submit since an edit context or edit form you   have to have a submit type using name placeholder  these are the placeholders that we need for each   okay now here is still remain CH or we can from  this section we can actually do the same thing   okay so let's maintain as it is connected or  disconnected and now with this maybe we can   implement this font to t board okay now this  meod let's implement this now to change this   we want to actually you know we are not getting  from the database so we want us that to type in   the name once and we don't want to just to type  in all the time type in your name all time type   in your name so you want to actually catch the  name that is just toss or types in so next time   that you want to chat again we have the name  already okay this is just a feature that I'm   introducing you can also introduce your own all  right okay you can also follow this as well okay   so aside from having all this what else can we  do again we're going to have this send message   so you see this instead of having all this we're  going to remove this one make it as a void and   I'll send meage going to check if this chat.  username name is null then assign it to this   username okay and here we must passing this  message in here the chat in here as a model   that's what we are doing now aside from having all  this if I click on send you know we have have to   write definition for this method if I submit this  method get fired so send chat or send message to   chat clicked and we're going to write definition  for this so we are saying that you want to set   the DAT time is equal to day. now so we set the  instance in here because we clear that one over   here I believe you've seen that yes so when it  come here we have to set it and now this is no   more my message it's rather what good chat it's  good that you are following you can just grab   this and now message the username so we checking  if the username is not equal to now it means user   typ in the new one then you want to store it in  here so chat. usern name okay so that this the   first time the user types in the name and I'll  send it we're going to have access to this we're   going to store it here the next time we check is  the usern name equal to now no it is not because   we have the name typed already and in there we're  going to assign it so when you click on send you   know before we check if the name is SC to now then  what we have installed already Please assign it   to it and I'm go so isn't nullable okay this is  a correlation operator I think so Cor operator   also so all right and aside from that we say  chat. message is equal to now so the next time   we want to clear only the chart very simple one  okay so this is all that we need to do for this   okay but one left do you know go to this method  send message I believe you've done that correction   already good job if you haven't done it then let's  go to the chap hop we want to get rid of all these   guys in here and I want to maintain it replace  it with whatat and I will say this is chat grab   this chat and now instead of all this we going  to clear this and now pass down here the first   one is this one which one it's simple I think  you go for this one isn't it yes I also go for   this okay now we're going to save this in here and  now let's try to run this again and I'll check it out so this is ready and now let's click on chat  and check it out so chat and it's going to open so   we have it here you can see there is a nice one  that we have built chat connected and I'll type   in your name so net code Hub net code Hub and I'm  going to say hello so before I type in hello I'm   going to grab this go to the next page and and  I paste this and I'll switch it in here and I can okay so I have in this that's next  code Hub and now here I'm going to say   this is threed so let's wait for the  response so send you can see we have   it so we have the date in here we have the  name and we have the message let's respond so hi we have it so you see we have this a card  and then we have this page it so I can type   in how are you now you can see that here we  don't need to pass in the name again it has   in cash already check it so only thing that  you do is pass in here is because that we are   not having authentication attached to this okay  that's the reason why we have to um hardly it's   hardly or we have to manually um install this so  how are you I'm fine sir you know it's all the   time make sure being being po being respectful  polite is the key okay so please how are you too okay so please I'm fine sir okay so send  it and I can see we can actually chat here   when extend the next page you can also do same so  we've been able to customize our UI and also the   code itself to simplify this and put everything  in a model that we can Implement okay now let's   see what is the next thing that we can actually  do to implement or to modify um this chart system   that we are building so this time around um  I don't think this is good when you check we   have our UI in here as a Razer component and  in there b we have all the code the connection   H connection creating and Etc the might be that  there might be a time that you want to actually   increase or add some features to the system and  now currently what we have we have about line   78 so this could increase the number of codes on  this file okay so it's better that we exract all   the necessary ones and create them as a service  now when you create as a service we then have to   register it and we can use a service in here I  think um this is the best way so let's try to to   create a service for this and and see what we can  do so in the you can see that we created service   in here not a service a project class Library  as a chart model so this is going to contain   all our models the next thing here that's going  to do is you know the service that you're going   to create is going to be used by only the client  so there's no need for us to put it inside that   class we can put it within this so right click  on the client we're going to create a new folder   to this and we can say this is client services  or chat Services Etc so let's say this is chat Services inside this folder we're going to  create a class here and name this class as chat service so chat service so we have this service  in here now what is the first thing to do as far   as this service is concerned you know when you  go through the chat page we have a connection   um string is a connection string or yes H  connection now this H connection as soon   as the page initializes we are building the H  connection we specify the nav manager and I we   are linking straight to the URL that we specified  in the server section okay aside from that we want   to register for a receive method so as soon as I  click on a message oring message this message have   been registered already and now we can retrieve it  and I'll pass in the content that it we need okay   aside from receiving when it accept it we going  to add it to the chat list that we have in here   and now we're going to invoke it so we display  it on the screen okay so let's first let's first   of all create a class now within the class last  Constructor we want to initialize this as soon as   the page load initially okay so the same thing as  here we want to load inside the page Constructor   and now we can create this as a single method that  we can call um when the page initializes and you   can call this and now this together okay then the  same method to can also do that and here we're not   going to use this um invoke a sync method again  we're going to use an action whereby you're going   to subscribe to that event and as soon as anything  get fired um the page which are subscribed already   also will get rendered and I'm going to see the  current contest or the current data on the screen   so once you have this client service created the  first thing we're going to do here is we need to   set up our action method and now the first thing  is we have our action as invoke chat display you   can give it a name at all make sure it isable  aside from that you want to retrieve the chart   list from the it so we want to have our service  in here so we have our list of chats and in here   we have to bring in the chat. model Nam space so  that's our chat now let's create um a read only   for this H connection so set this as H read only  for the h connection so the H connection that we   created we initialize it inside the the chat  page that is what we are bringing it in here   okay so you have this have connection and we need  to create from the the very onset when the page   is being called or this file is being called you  know we have to create constractor for this chat   service and now we pass in navigation manager and  now in that we can get the navigation manager do2   absolute URI as you can see from the previous ones  then we build this so when build is this going to   be built when we create a constractor for um the  page okay for this chat service that's where we   call all this aside from doing this we need to  create a single method here to receive message   and now this message or this method received the  message you know when you check this chat um when   you check our chat Hub we have this receive  message as a method and I pass in this so we   have to create um a way to retrieve or to receive  a message from this method and thatly what we are   doing in here okay so receive message and that  is the method in here and now in that we add the   chat to the list that we have already then we  invoke the display because here chart has been   changed chart has been added to the list that we  have already so we have to update it or invoke it   so we can see the current context or current  chat being added then the last one left here   is to start the connection so after receiving  the chat finding this and I'm making all the   methods available in here we have to start the  connection so let's have another method here to   start connection and that is a start connection so  in here have connection do start then we need to   create a property value for is connected which  is the bullan expression we can put it on top here so can see see that this is stopped and if I  click on send chat we're going to move that method   from the UI to this place so send chart we sent  we call this method and now in here we pass in   the chart model okay so the chat model is going  to send it and now when it gets to this receive   it's going to pass the same chat model to the  received and now it's going to be added to the   list that we have in here so it's like it goes  in there and now it returns so when returning   it's going to add to this list and I'm going to  display it on the screen you see good now this is   the service that we need to create now we going  to consume this but first of all let's go to the program now in here we have  to reged service so build services do add this is going to  be scope then let's say this chat service we did not create interface so we need only  one let's grab this also let's go to the server and now paste it in here so before the build paste it in here so  chat service it is consumed from the client   service so that's fine because you know defaultly  the server has a page or project reference of the   client so anything that you want to reference  in the client it is possible but if you want   to reference anything from the server to the  client it is not okay this is possible because   you have the service inside a client and if  you don't put it if you don't register this   going to have an error because anything that  must go through the client must pass on the   server first okay we have this now let's go to  the chat page and now all all the list that we   have in here we going to clear everything  okay maintain and leave only the chats so   let's leave this the H connection we going to  clear this and um we going to clear this as well so let's clear all from here  so it is no more we have only the   chat and under username okay so in  here what are we or what can we do   you know we have to inject this  chat service so let's put it on top and we say this inject chat service you see this chat service now this chart service this it's coming from the name space of this we  don't need the nav manager cuz you're not using   it copy the chart service and now from  the list of chart you can get from the service also from this you can get from the service then that is so here we have  the list we get from the service and   also um this checking State or the the Boolean  expression which tells you if the connection is   well established or not we just get it now with  this method what can we do we can just create um a page life cycle method and that's initialized  async and in that we invoke we subscribe to this   but before we subscribe we have to implement um  ID posable interface so on top we have to add that okay now we have to implement the interface  in it that reason why we having the error in that so in a page when the page load we are  subscribing now in the page disposing we want   to unsubscribe from this and it has or it  must come from the page dispose method so   dispose then we unsubscribe from this if  I click on send message what do I want to   do I want to send a message and call this the  send chat service that's from the chat service   and I'll pass in the model okay so this  is all that I need to do very simple one   yes so all I need to do here is to create a  service and I'll consume the service in there   all right now I think it's okay let's  save this let's build this and check it out all right so the app is ready now let's click  on chat now let's see so we are in we're going to   open another interface from this page we have  this we can let's extract this too as you know   net code up so connected connected net code H  this time right net code so I'm going to say   hi Fred and now this is going to be Fred and  I'm going to say hi net code so each they are   exchanging what high high now let's initialize  this first so we have it high FR I concent you   know High net code you see this working isn't it  exactly it is working okay so we've been able to   implement a Class A simple class to um cut out  everything from the UI and I we have it in the   service that we can inject it dep injection and  now we are using it so what you're going to do   next here is to save the chart to database and  also retrieve the chart from the database and   display it on the screen so in order to do that  we have to um install some packages ENT framework   call framew call. tools and now we're going to  use an sqli database okay so let's quickly do   that and you know we have our server then we have  our client this going to happen in the server so   these are the step that we need to do first  we have to first install our packages after   that you have to create a connection string  we create our abdb contest class we register   the connection string we perform migration we  create our repo then we expose controller we   create create our endpoint that we can get to  save and I retrieve the list very simple okay   so let's keep get this going now right click  on the dependencies or even when you have it   here I have these packages installed already  so just install them any frameware call any   frame call. SQL light and now to so in this  three packages when we are done let's start   with our connection string so go to upsetting.  Json and I in here we are adding a connection   string and now the default connection here it is  what data source is equal to my chart. DB since   we using an SQL light that is how we supposed to  uh specify because this going to create a file   which is going to be attached to our system okay  so once you're done then let's go to pr. CS file   and I register this connection in there so here  we're going to say that builder. services addb contest and let's pass in this appdb  contest but we have not created the   appdb contest yet okay so let's go to solution  right click on the chat let's add a new folder   to this and name it as data inside this  we need to create our abdb contest class so we said this is an app DB context and now since we have ENT framework  call installed we can H it from DB contest okay now it in here  we can create Constructor for this or we can use this one we can just clear this  we can use Constructor passing this option let's specify the DB contest class by length here we can  use primary Constructor very simple one aside from   that we can use DB set let's pass in a chart model  and now with the chart model we need to include   the the name space and this is charts okay now  when we are done let's go to the program and I   register this so abdb contest contest then we  need to specify the options so option. use SQL   light oh supposed to be o see so dot use SQL light  then what we need to do here is to pass in the configuration do get connection string and   now what is the name of the  connection string that is the default okay so let me put this the next line so we have this here you see that so  up theb contest then I we pass an option.   use an SQL light and in that we are specifying  the configuration the connection string in the   very simple one you see okay so now that  we are done here what is the next thing   to do we can perform database migration  let's try that and see but before that   let's build this project and check it  out so we're going to build the server project right click on this build  project so succeeded now let's   click on package manager console  let's set the server to Startup   project and our package manager console  we're going to add my migration so add migration let's make it t first now let's update database I think this be spell wrongly so  we're going to have an that let's see yes   we know it already don't worry let's do it again yeah so it is done now let's create  our repo for this so right click on   this we're going to add a new folder to this  and we're going to say this is repost let's   right click on this and add a class now  this class going to be let's say chart reple now this chart triple let's  use primary Constructor which was   introduced in C version 12 and  we're going to say this is abdb contest then let's create a public asent task or save chat async and now you passing  this chat which coming from the modus we have   it instance created and now in here here we're  going to say that appdb contest. chat. add then   we're going to add the chat so from that I  wait abdb contest do save changes async we   save the changes so we saving it here and  now this is get so let's have public async   task and there going to be list of chat  and now here you're going to say get chat async and now with this it Maps up  to await abdb contest. chat do two   list from ENT call to list async  okay now let's register in the   program. Cs file so in here builder.  services. add scop then let's add chat repo okay now once we done with this  let's create a controller so before we   do that we have to expose this so let's add  a controller service so do add controllers so we add controllers and we have to map  the controller down here so app do map controllers okay so we map it like this and aside from doing this we have to   create controllers folder so  let's add this and say this is controllers now let's add a controller to this so API mt1 and you're  going to say that this is chart so in here we can still use primary  Constructor and we need to add chart repo   so we need an end point here since we just need  only an end point for the client to consume okay   but for saving we're going to implement it in the  hub so let's have HTTP get and here we have our   public Asing task and this is coming from an  action result which we can also have list of chat so and in this we can have  a look at get chat so get chat a   sync where about this map up to okay  then a wait chat repo do getet chat a sync it say this what we are doing very simple  now in order to save the chart let's go to the   Chart Hub and now in here let's inject the  chart Ripple now this is going to M possible   since in the same server okay we can use the  rle but outside the server we have to use an   endpoint so here we say chat repo then chat repo  so before we save we're going to say that I wait   chat repo do save chat we passing this chat  model that is all very simple okay now aside   from that let's consume this so before we consume  this um let's reg this service before we forget   so let's go to program. file in the client  service or the client project okay and now   in here we have to register an um HTTP a service  okay so that's all we need if we don't do this we   might forget it all right but I'm not working  on the the client now so we can still close it   okay so in here this is working now let's run  this and see so I can see see that we have the   app running but I want to open a database so  we need to install DB browser SQL light and   click on open database and that is the database  that we created to open this and then click on   browse data so you see we have an empty one in  here okay now we're going to test and see when   we add we must see the data or the message in  here so let's say we have high this is not high   it this Fred and I'm going to say hi so as soon  as I click on send it is here and when we come   to our data and I refresh this you see we have it  in here let's open the next one so the new one is   ready now let me extend this in here okay so it  is high fret now I'm going to say this is um net code I'm going to say hello now if I click on send  I have this in here now let's check the database so you can see that here we have everything right  this working and we have to then display it in   here because if I copy this and the third person  tries to access this the page becomes what blank   but when you check the chart we have about two  chat in here we are not saying when you open   this you check the message from the the route API  SL chart we have this chart in here you see that   we have these two chart so it is up to us to  consume this and display on the screen anytime   a use a new user joins okay so let's Implement  that now let's go to the Chart page and now in   there since we want to call the database on  the page loads up we want to actually have   it in the um code okay the file so we are not  going to implement we're not going to use this   class for now let's um write it within the code  so here from the chart page. Razer we are going   to specify this down here so instead of this  using this service we can get rid of this we   want to all the time make some some things simple  as well okay so for now we want to um clear this   code and let's see we have to remove this okay so  we need to when the page initializes we know what   we need to do already we have to create our  H connections and our list of chat so here we   can specify these guys in here we have our chat we  have our H connection then we have a list of chats   when the page loads up you want to build a hub so  in a very simple way we can build the Hub in here so after building the Hub what can we do we have  to bind up to the message that we're going to   retrieve so what is a message or what is a method  that we're going to retrieve you know that's a   receive message so when you check the chat H  it's going to call this method so I'm passing   this model as a parameter now here we are going  to retrieve it so from chat page you're going   to retrieve it in here and now when we retrieve  it what are we doing this is a payload so that's   the chart we adding it to the list of chart that  we have in here you see this is very simple okay   it's very simple than using the class to handle  this that's the reason why we not using the class   you want to make this project simple one for you  to get the understanding but the class you're   going to use this later on so don't worry okay  we have to inject our connection string on top   this a connection string that's the navigation  manager on top so let's inject it in here okay   now this is solved so after adding the chart to  the list we have to start so crl k d we have to   then start the connection okay so in order  to start the connection we have to have just   a line of code then we can now start so once we  start that is where you want to make an endo API   call so let's create an instance of an API know  the HTTP then we're going to use this HTTP call   so let's have this call okay so we can see that we  having the list this going to return return a list   of what chat and we are getting from Jason as a  list of charts so there is a local host there's   your port API route and then we have the the  controller name okay so we have this in here   and aside from that we can test if our connection  is in order and that's what we did so from the end   we can check if it's connected and also we have  to make a call to that method in the hub and that   is a send message so see from here what you're  doing here is we send a message we call this   method we pass in this property is it property  this Modo as a payload when it comes to the chat   H this is a method that we are sending it also  broadcast it to everybody and the current user   has a meod receive message so we're also passing  the same message what is send to all clients then   this message when it come to the chat page we  are receiving this message in here from the   method there's a pillot coming in we add it to  the chat of list and I we we um re the page to   get this displayed when we make a call or we're  going to now add we're going to assign the list   of chart that we have in here onto this chart  list that is when the page initializes okay so   we can be adding multiple charts the next chart  that you want to we can add so this get assigned   and displayed at the first time then the user can  now because since we are adding the user can now   be adding more to this chart so we can display we  can see everything that a very simple thing that   we are doing so when you compare this and using  the service I think this is much more easier to   understand than the service that's why we using  this for now okay so don't mind the service will   be there we're going to be using it later on  so since we are now going to use the service in   here we have to remove this service and also from  this we want to check from the list of models as   container that we have and we have to also remove  this because we have them from this page okay now   let's save this and let's run this application  and check it out all right so let's see it is   opening now let's start everything again so I'm  going to say this is hi Fred I'm going to say   maybe this is a good day so I'll just start the  conversation and it is in here then this is that's Cod okay so then I'll say ah good day how are  you then with this let's see so we have these   two conversation here the next person joins  and now let's check it out so I'm going to   copy this go to the next page paste it here and  I see we have the message and maybe this person   is so you connected this person is maybe this is  this is you right so this is you and you want to   say that hey everyone now check it out send it  and I we get it the next person joins from this Angle now let's see it is is everything so you  can read all the messages yeah all right so that   it for this video thank you so much for watching  and stay tuned for the next one the next feature   that we're going to add to improve this chart  so I'm going to catch up again so then take care

Channel: Netcode-Hub

Views: 593

Keywords: web assembly, .net 8, .NET 8, API, Develop, Blazor, WebAssembly, implementation, controller, .net blazor, nugget package, create package, install package, download, clipboard, clipboard in blazor, form validation, clean arhitecture, domain, application, infrastructure, MediatR, CQRS, Handler, Query, three-tier archtecture, clean vrs three-tier, DI, dependency, injection, container, blazor, .net blazor 8, signalR, chat app, .net 8 blazor interactive wasm, blazor web assmebly

Id: CxB53qnLZgU

Length: 46min 57sec (2817 seconds)

Published: Tue Feb 27 2024