.NET 8 Blazor eCommerce Part 2 - Creating Product service 🚀📱

Hello friends and everyone you're welcome back to  net code Hub channel in this video we're going to   continue on from the e-com project that we have  started together and that is a a Fone shop in the   last video we were able to create our controller  or our web service to handle the product by just   adding product and also retrieving all product  either it is featured or it is not featured so in   this video we're going to have a look on how to  consume this in an web API before we jump right   into the Practical aspect let me appreciate you  a lot for watching the video from this Channel   and thanks to all those who have been subscribing  to this channel who also like the videos who also   watch videos from this Channel and who buy  me coffee I really appreciate you a lot for   supporting this channel you know when you keep  doing that it helps this channel also grow so   with this project each part of the project that  we create is going to be available at the GitHub   so the previous one that is this that I'm talking  about is available there check the previous video   the first one the part one video check the  description and you're going to have access   to clone the repo from GitHub when we also done  consuming this API in a Blazer web assembly then   I'm also going to push the GitHub you can also  clone it so I'll put various links in the video   description as usual I do offer training session  for people who are interested in net Technologies   talking about Blazer which compris of the server  and the web assembly net net Mar and Mar Blazer   hybrid and also web services to precise a web API  so I have an email also beneath this video you can   just hook me up or right through that mail okay  now let's let's um jump into this as you can see   let me take some few minutes maybe one or two  minutes to go through what we did uh maybe for   those who is the first of you watching this video  we have a video already made and that is the first   part and I I suggest you watch that video before  you come to this although I'm going to take you   through but this won't be enough for you to get  the whole understanding okay in case you're also   good at it then let's move on so in our project  we have just an API end point that's for um get   product and also we have this um post product so  for now we have this parameters name description   price base image which convert to B4 string we  have quantity we have is it featured and um we   have dat uploaded so this is a default one it's  going to be asset automatically as soon as you   want to upload the product so you can see from  here we have this when X2 the product start um   retrieving you can see we have this um parameter  here and it's asking do you want to get featured   one or I want to get a whole list so if you want  to grab only featured product set it to through   and you make it um execute it and it's going  to return all product which are featured set   to through if you want to get product which also  all product either it is featured or not you said   this to no or false and it's going to get as the  whole list of product for now we have no product   which has a feature that's through but let's say  if I change this to first and I try to execute   this definitely I think in that video we made  one entry so we see we have this and I featured   is set to for this all that we did okay now to  go through quick with the code we created our   controller we created our service so you need good  solution you can see that we have our interface   and that's a general interface for the server  and also the the web assembly that's a client   we put that in the shed library and we see from  the server we created a specific uh repository   which is a product repository a class and in here  we um created this repository which inherit from   this interface and this methods are what we have  defined in here when you go to the interface we   Define just two method by creating the service  response and also um a product okay so that's what   we created now when I go to this service response  this is found in the sh say going to be a respond   for the server and now the API not the server  the API and now the client to we put it in the   service response in the shared product it product  shared project so you see this a record class and   which has this flag and um it has this message  okay now so we're going to continue on from here   we're not going to tackle the API for now because  we did that in the part one now in this part two   let's focus on how to retrieve this data from the  API and display them inside the web assembly but   before that you know C has been released the  C version 12 has been released and it has some   cute stuff that you can actually Implement I  um I said that when we starting this project   that during this project with net8 I'm going to  introduce you to some cool stuffs in the latest   update not only for Blazer but also the language  actually that you're going to use that's for the C   now um I believe you have net 8 installed yes and  what I'm going to do here it's it's it works only   when you have net 8dk installed so if you're not  having that try to update it to get a net 8 but   let's say you have it already so in doing so here  you know normally we create a Constructor here and   we um initialize this service actually be asking  yourself if you don't know what construct is it   is a piece of method that get execute as soon as  an instance of a class is being called so this   is a product controller when this method or when  this class is being called it is the Constructor   that's initialized first to to run some default  startup before the app gets run so we have it   here and that's what we are calling this product  service now instead of creating this startup here   as a controller or as a a Constructor from this  class what you can do here is we're going to use a   primary Constructor so what is primary Constructor  it allows you to specify this product this input   here and I remove the injection here so instead  of making this read only field this read only   field can be part of this Constructor to simplify  this so there are different ways to do it you can   do it manually or you can do it by click on this  control period or Control Plus Dot and you see   it tells you that use primary Constructors so if  I click on this we see use primary Constructors   or you can just open this like this and I specify  this i product then you have this product service so product service okay so this is all that we  need aside from that we can remove this this   is the the the best way for now and I think it  is very very simple and and easier to implement   compared to the previous one you can see inject it  over here and that's all fantastic okay so that is   a the modification that we are doing to the a So  currently we not having that Constructor here we   have it injected in the primary Constructor  that is from the first base class we have it   specified here okay now this is also this is our  controller and now let's try and see if this will   work so let's reload this now let's navigate to  the API that is going to be our Swagger and now   let's test our API and see if the new feature  added is going to make our API still work so   let's see for get product we said you want to  retrieve all product so try this out execute this now let's see all right so we have it so meaning that our  primary Constructor is kicking and working so we   can be using this all the time that's great  okay so now let's close this and let's go to   app so I'm going to close everything from here  you know I told that we are done with an API   we are not tackling the API for now we are done  with it so for now let's tackle the client SE so   control go to the solution Explorer we can just  close the API that is a server and now open the   client and that's a web assembly so the very  first thing we're going to do here is you want   to create a component which we going to use  to add and also update product so either you   want to add the product that's the phone or you  want to update the the phone data okay so you're   creating one component to serve two weight now  let's create it in here I'm going to say add   or update product component yes I wanted to say  control but not control it's component okay so   let's put in the pages folder let's right click  and add a component and I'm going to say add or   update product component okay so we have this we  can just for now we can clear everything or we can   even clear the title here this 83 we don't need  it now what we need here is to specify the maybe   the route okay so here we're going to specify  this page and now for now let's make it as ADD product whoa see what I've done so let me do it  well so add product yes so this is a route so as   soon as navigate to page the the base URL SL ad  product I have to be navigated to this page okay   now here let to do here is we're going to create  an instance of this product so that's our product   model that we created so we create an instance  here as my product control period we are going   to inject this but in using this let's grab this  cut this let's go to um the import because you be   using this often so here we can add it here like  that so all the time or any component that you   create you can be using this product Nam space  in there okay so the next to do here is once we   have this we're going to have maybe our um div  so let's say our class and this is going to be   our container let's use container for this adding  and let's have a div class and here we're going   to have our row know this is a bootstrap T and I  believe you know how to do that so close your eyes   and now let's do it as I've closed mine okay so  I have this and I'm going to use column MD let's   use six okay so colum md6 so it should beside  us let's use that and now in here once you have   this control KD let M to and now we are going to  use an edit form so edit form now this edit form   let's specify the model and the model here it is  M product so which model I going to handle it with   my product let's have this enhan now this enhan  is a new feature introducing net8 now it allows   the page to get reloaded without reload the whole  application so if I click on that button it is   type submit the page or that section get reloaded  but not the entire page it's a good enhancement so   you make sure you add that now on valid submit you  want to also specify um handle save so handle save   so save product that is a method so in here let's  specify our data annotations by data for this to   handle all errors and you want to summarize it so  you need a validation summary in here so I like to   use this to clear all this okay so now we have  this let's have our div and now here the class   that you're going to have is going to be a card  now with this card for now let's have a card title   so we have a div class and you want to set up the  card title so card and here you can use title you   can use header I like to use header because I love  this much and this is just let's say add product   okay so for now you're making a static you're  going to make it Dynamic but for now let's make   it a static so we have add product and in that  let's have our class now this class is going to   be a card body so this card body you're going to  specify this and aside from this card body let's   have the last one as div and this is going to be  a card fter and you know what footer means right   so card footer and this card footer you want to  have this button and at the name of this button   is going to be like the type of this button is  going to be submit going to submit you this method   here so handle save let's do rual and let's have  a class so the class of this maybe you're going to   use a class of BTN I like BTN outline so outline  primary maybe this will or info primary that is   it primary it be okay for us and let's say this is  save product okay so save we can change the name   here we can make it add product or save product  any one is still going to work so let's make that   save product for General one even when we update  it you can say save product as well all right now   in here what we're going to do here is we going to  you need to install some client Library such as um   boot strap icons I think so so or font aome so  to do that let's install this so we can be using   um this icons uh in here okay because you want to  make our work beautiful so we can use Font icons   of font aome so to do that let's um click on let's  click on solution Explorer now after you've click   on this solution Explorer we have to navigate  to the client section and search for add client   Library so I click on this ww root folder and  I click on ADD you can see you have this client   Library so we are going to add bootstrap let's  use is it bootstrap or font alome wow let's use   Font alome so type in font aome here and let's  see if you're going to have access to that Library okay so font some okay so we have this  this a font aome and the current version here it   is 6.5.1 this is a library so click on install  and I make sure here you see restore operation   started and it's going to be added into this  folder so we're going to have one aesome here   added as soon as this has finished we see it is  restoring um this for us so you see done and we   have the font aesome so once we have this the  next that we're going to do here is let's open   this you see it has CSS it has JS that is the two  folders that we need okay all the other icons are   found in the this PR and Al this web form but  we need a CSS so open it and see we have this   all. CSS so it is all in one we go back to the the  same ww folder you have this index click on this   index and I drag and drop this anywhere that  you want to add so let's D it here we making   a reference to this font aome we have the CSS  added now let's add the the JS the JavaScript   so also see we have this ajs you want to add  the minifi version but it is always advisable   to use the minified version because you know web  assembly is going to be downloaded to the client   browser so for for temp print user temp print  I think when you use the minified version it's   going to remove some of the long names and now  use them with a single or characters to Minify   it in a long one run all right so we have this  set that's right we are done with the the the   configuration now let's go and use it so here we  can have this added we can use this I and now here   we're going to have a class and we're going to say  fa stand for font alome then fa a font alome we   can use something like do we have a you can use  something like plus okay so this going to be fa   plus and I believe this going to have access to  the font alom okay now um and that is save data   so let's see but we can even change here to add  for now let's maintain this now let's copy this   and let's run the implementation for that we're  going to say void or Asing task remember that   is an asent task let's paste this and we have a  the block code okay so this is what we have and   once you have this button here as a fter we can  also start with the card body so with a card body   let's have this first one as an input um maybe  product name so we can use product name here so   see we have this form form group and input text  and we bind it to product name and the class here   is for form control for bootstrap T you're going  to have it set and also the we doing here is you   want to add the next one and this is going to be  the the number so input price and this is number   you can specify that also we have this quantity  so you want to also add quantity and there is a quantity so let's see so the quantity will also  be a number so you can specify the number in as   a product quantity okay and we have a product  description so this going to be a text area   so we have product description and maybe you  can have a column span Etc maybe do you have   that feature in it or well you need to um change  it yourself to set up the number of um rows in   here okay so let's see now the next to do here  is we are going to add upload an image okay so   this image upload we firstly want to have this  the same div session and with that div section   we having the label here and now with this label  we want to display when you upload an image and   there's an error maybe we want to specify only  PNG images but you did select the jpg you want   to display an error here on top of the the SE the  label we don't want to use maybe a dialog box to   handle that we can use dialog box to handle that  but maybe since this just a an information info   that we want to display we can Tagle between  the label and the message so that's how see I   have this image upload message so it is taken if  this is equal to empty then display this so This   equal to empty if yes then display empty but in  case it is not then display test danger it means   you want to form a class remember this is a class  so we are just manipulating the class to have the   test known as a red so because when you have  error in upload you want to display as a red   color so this is a method to get the red color and  here we check that this is the actual message so   we check if the image upload is equal to the same  thing as empty then I want to display this upload   image it means there's no error they're want to  display the label but in case there's error then   display the error and apply this test danger to it  I believe this is clear when we get to definition   for this you understand it okay so don't worry  we have our input file there's a class and you   see this an unchange event so when the the event  here changes or when a file here get change this   event going to get fired so you need to create a  method for this and you need to create a variable   to handle this message okay so this is all that  we need to do for now and the next thing to do   here is I want us to use something like with this  submit button maybe I want us to create another   busy button and now what is that busy button  busy button can be found in a bootstrap I am   not going to bootstrap for now okay but I'm going  to show you how it works we want to use a spinner   in that busy button so as soon as you click on it  that spinner gets spinning until the process is   being completed and in doing so if I let me do  this well okay so inste of this button here as   a button outline primary we are going to get cut  this okay I like to put this in this so I won't   confuse you to put it in a just one line okay like  horizontal form now here once you have this I'll   just grab this from this section cut this and I'll  paste it here okay now what I'm saying here is if   show save button is true then show this right  else show this so after it is showing this it's   still going to show this busy button and at this  busy button we've have an aod a variable bind to   it and we are saying show busy button so where  from this show busy button let's have a look   with how to create that show busy button it's  just a matter of creating a component and I we   name it as busy button which has a button with  a spinner from bootstrap okay now let's have a   look on creating that busy button before we come  to the implementation for this variables and this   method so we are creating a busy button and let's  go to solution Explorer and where we have our   Pages folder let's create one component and I name  it as busy button so busy button component as you   can see from here and this is what it's doing it  could see that it has a parameter here as a show   busy button and we are saying if this is true then  show this button you know this is a spinner have   you seen spinner border is a spinner so it's going  to spin and the button here it is disabled so this   is what you want to do you want to handle user  interaction when user click on the button and   um there's a process going on we want to update  the user that there's a process going on if not   the user can click on the button more than three  times and which maybe will just hold the system   or it will just send the same method again to the  server which has already been sent already so we   don't want to do that want to skip it so what you  do here is we hide or we disabled the the the save   button and then display a spinner button which run  for to know that there's a process going on so he   or she must wait so that is what we are doing  let's save this and can just open it again so   you see it well I like I dislike the fading aspect  see have have a parameter and this is the name is   a Boolean expression so see as soon it is through  then display this P button okay so we have it   let's come back here I need to create a variable  to handle this so we can toggle between this save   and this show busy button okay so to do that  let's um go back so here where the code section is let's create a string variable to handle the  image upload so initially this is set to empty so   if this is empty then display what upload image  that is for the start when this has no data okay   now if I click on this what should happen there's  a method known as a input change so input file   change event and this has to get fired as soon  as the uh a file changes so here we have this method and let me just verite this one okay so  this is a upload image so when this file change   we want to when this input file change call  this method and this a method it is coming as   a parameter as this input file change event acts  this argument contains we create an instant as e   so we can have access to the file now here we are  we did not add multiple so it means we are adding   one image okay so here we get the format of this  but how can we get the format we have to check   the name of the file does it contain this uh PNG  so we convert this to lowercase and I we uh we   we check okay so does it contain this PNG so if  if yes that's when it's going to um function but   if no then we are saying that this image upload  message is equal to PNG files needed so in such   case this has a data now now it checks here does  it have a data yes it has it then it's going to   change it to this data and I'll assign the test as  danger that means if you select an image which is   not PNG jpg or geg or Etc you're going to have  access you're going to have this error message   displayed by in case everything is working it is  a PNG file then we state or we cach the format in   here so after I creating the format you have to  resize it we create a buffer size you open read   it so we can have access to uh the size and  aside from that we are converting this into   basic defa string but before that we need to  specify this this format data then semicolon   is a colon or semicolon that's a colon right  we specify the format remember the format here   is a image like PNG and it is a basic defa string  and we convert to Bas defa string with the buffer   that we have when we are done with that then it  means everything is working set this image defa   to empty then we have this string here so let's  set my productbase before image to this string   that we have and set this image to empty because  we don't have we are not using this anymore we are   done working with this so to clear it to remove  the memory or to free the memory then you have to   return okay so that's what we are doing here  and when this button is get clicked what is   it doing so for now as I speak the image has its  string created or selected already and maybe you   have also the data here populated we can run our  own queries or we can run our own own system to   check for uh validations but since we have this  what you do here is we go to the model and now   on top of this model where we have this shared  Library you will see that we have a model folder   we have this product class now here we specify  the required attribute on top so that's going to   use maybe the quantity here must be required  okay and maybe should be more than what zero   so um the range should be zero up to maybe 99  N9 Etc so we can just grab this and let's put   it on top here so the range should be you don't  have to pass in zero because you can't pass push   an item which have the quantity of Zero no and  it should be 9999999 for now you can extend but   for now let's maintain this as what as um is it  99,999 that's what we going to do okay for this   quantity and now as it featured for that one  you can decide to set this to if defaultly set   to force okay so maybe default you can set this  to a force by default you canite it any time that   you want to do it and I we have the date set over  here so this date has a default value so we don't   need to specify um this required Fe feature also  has a default value so you don't need to set this   required on top now we have this let's see so  we have this set now in this method what are we   doing before we check this let's have a look with  with the the the features or the UI when you run this I believe in going to have an error isn't  it because we not specify the show button yes   so that's why we need to um set that before we  move on okay so let's handle that first so what   we need to do here let's create a public variable  here to handle this show button and maybe let's   put because you're going to use a dialog box to  display message so let's set it here as a show   busy button and we have it so I believe you're  not going to have any isue again and now save   um show save button to we need to uh um set that  as well so let's see and so sa so we're going to   tackle between the two don't worry I'm going  to explain them to you for now later on let's   run this and and see the UI that we have now  so the app is ready now let's navigate to add product so this is what we have you can see we  have this add product and we have the name we   have the price and we have the quantity the  description and the upload image so for now   defaultly it is an upload image if I click on we  have this plus if I click on Save product you I   have all these errors in here and our quantity  we set the range supposed to be one zero up to   you let's check it out and see if we able to do  it to well so go to the product and our quantity   the range must be okay so it must be one let's  save this now let's check it out so save this and   okay it hasn't refreshed yet let's see refresh  this all right so let's do it again now add product okay so we have it now if I click on um  save product you see I must have all of this uh   read because I need to specify this now you see  it has the base image f is required the f price   must between this the quantity must also be  between one and 9999 the name is required so   this AV validation is working as expected now if  I click on save button what to happen we want to   Tagle as soon as I click on save button you want  to hide this save button and I display the busy   button that a spinner button so it um deist  or it it it prevent the user from clicking on   the button again okay so let's have a look with  that now when it come here see this supposed to   be a class because the view here we must have the  page divided into two so you forgot this so it's   supposed to be class like this double s okay now  when I click on this what should happen the first   thing I do here is we want to set this button this  save button so um show save button let's set this   to foral you know defaultly as soon as you run the  page it is set you through so it is showing now   let's set this to false so is this equal to false  it means if I click on that button then hide the   save button if I hide that then I'm going to show  this so show busy button is set to through and if   I set this here let's set this through if I set  this here it's going to show this button notice   the show button variable bound to so it's just  going to show this button this button going to   be a busy button which is also disabled okay now  what I'm going to do here is in case this button   this is false okay this button is going to show  and in case this shows this button must be false   okay so we don't want to be running it on ourself  we can just use a simple negation to handle that   so instead of setting this to true we can just set  this the opposite of this and you know what is the   op sheet of this save button it is true so if this  becomes true then show button is going to be false   if this is false this becomes true if this is  true it becomes false okay so at the time show   busy button becomes the opposite of the S show  save button all right now um we have this set   let's save this I believe this is clear isn't it  if you not pause it and try to go back and listen   it again okay res setting it in an upite of this  so you can just automatically render it without   we have to create another method to handle those  okay now what we're doing here is we want to check   if the image has been selected then we check if  string here it is not n or empty from this base   image then we want to show this this B if it is  if Stringer it is null or empty take note I said   not now but I did not negate it it is now so if  the user did not select an image then message   dialog box. set dialog values so where from this  method it is a method that we using a dialogue in   net a to handle that I've made a video on how  to use net a dialog element and that's really   what I'm using in here I am going for um a type  an alert type and the alert message so you see   I have warning and I have the message in here  and also I have this set message dialogue what   are this method doing here don't worry let's  start with um creating or having this method set so let's first create this component you know  this a component that we need to create so let's   go to solution now in the pages folder let's  create this component in here and I'm going to   say it is a message dialogue the responsibility  of this guy here is to display messages to the   user either a assess message or an error message  okay so you're going to customize it to make it   in a in a dynamic form that when you have an  error you can call this display and also when   you have a success message you can also call the  same um um dialog element to um display that we   using a dialogue element by the end of the day we  are putting it in the component so going to be a   dialog component okay so you can keep this and  you can be using it in your subsequent that you   be doing I believe you're going to do that okay so  we have this dialog element from net8 and you see   we have this as my ID and we have this the style  these are all um CSS Styles and I believe you are   good at CSS than I do we have the card header as  you can see from here and there notifications and   the card body you can see this an alert type so  we're using a DA class of alert and alert type   and you specify the message so alert type here  could be alert danger Alert warning Alert info   alert primary okay so we're going to specify that  based on the state of the message that you want   to pass in and now you passing the message in  here we have a card fter and that is a um okay   or agreed or all right you can rename it any time  that you want any name that you want you can give   you to it and I you want to set up the button  based on the alert type so if this is a danger   you're going to have danger here if this is info  going to have info if it is Success you're going   to have success displayed in here and you know  this is a form method as dialog so as soon as   I click on okay this form can get hidden now  you specify this here as alert type and alert   and this message defaultly we set them to empty I  believe you be asking yourself why why don't you   create this as a parameter yes we don't to do that  because we want to perform state has change so you   want to create a priority method in it so we can  be setting this method ourselves so see we have a   priority method and now we say we have alert type  and the message so instead of calling this setting   the values for these guys here no we create a  method and we set the values from this method   through we set the values from this parameters  or these variables through the method that we   have defined after that we can call the state as  change and that's exactly what this is doing you   can see that this alert type have been assigned  the value to this alert so these are going to   come from outside the world okay so outside this  scope then we um set it to the values for this   aside from that use this sta stage which will  render the application or the content to have   these messages set over here and now um um refresh  the app to get them notified okay now here it is   show message so here to after setting this having  these values as a current state then we want to   invoke this void and now here it is the JavaScript  method that we are calling if you've watched that   video I'll put at the description you will see we  call the same method show dialog um um JavaScript   okay so this is a method that we are calling a  JavaScript and you know we have this error here   because you want if you want to invoke JavaScript  definitely you need an interface for this Java run   time so we can do that quickly from here let's go  to the import let's create one and for all so here   we're going to say at inject and let's inject IGS  run time I believe you've seen that before un let   say JS you save this and now when you go back to  the message dialog box you're going to say this   is going to get lost because you have the the  interface or the instance Creator or injected   in the import Razer file okay so this must be off  um now as I speak it should go off now let's say   if I close this and if I open it again I have to  see this gone okay yeah it is because it has now   found the root it is in the the input F can see  from this it has been injected okay now we have   this so this is the message so anytime that you  want to show this called this method anytime that   you want to set the values called this method  very simple isn't it so it seems like it is a   state that we are creating this um um a local  state local state okay this is not a global   State it's a local state that we are creating but  we have and a global method that we can invoke   it outside the component and we going to set the  state of this and Al Perform a state has changed   to under the component and I get that the current  values that we need so once we have this let's go   to the add or update component and I consume that  since we have method here the question is how can   we call this method we are not using an event call  back or an action type to return or to notify here   isn't a method in here the very the best way to  do that is use the ref attribute I hope you you   I've made a video on how to use a ref attribute  to handle method in a chart component so we have   to add this as chart component first and now down  here let's add a chart component so we can do that   from um down there and in here let's P this chart  component and that's a message dialog that we have   we set it as ref at message dialogue now when you  create this reference referring to this method   this component it means that all public method in  this component is going to be available in this   message dialogue reference here so to do that we  can also create an instance of this reference to   match the component State here so on top of this  I like to group them so on top here we say message   dialogue and this we set to n because you can  call a method you can pass in empty one and we   have to make it as nullable so we have nullable  here we create an instance and now we saying that   message dialog. set dialog values we passing the  alert type and this the alert message I believe   this is clear when we are done you want to call  this set message dialogue here once you set the   values it's going to call a state has change  isn't it because if I peep this here if I click   on PE definition it's going to set what state has  changed as you can see from this and we need to   call this method but this method will be called  often so why don't you create another separate   component so you can be calling it all the time  you know in programming one thing that you have to   take note here it is do not repeat yourself do not  repeat yourself okay so the code that you create   you make sure you create an an extensible one that  you can be using in and out of your application so   we don't want to repeat ourself so in order to  do that we want to create a component is it a   component or a class to handle that so the class  this what the class going to do let's put it down here and on this class you say it is set message  dialogue what is it going to do we are saying   that await message. show so we are calling this  message dialogue we call this to show the message   after showing the message we want to set show  button to force because show busy button here   has to um um hide because there's an output from  the the API so when there's an output we don't   want to start using showing the spinner no the  process is completed so the spinner should off   and now the show save button should come to live  all right so that's exactly what we are doing or   even with this we can say that this show save  button is equal to the up seat of this so we   can also do same here so instead of setting this  to true we can say it is an upseat of this show   message so both of them can at the same time  one must be off one must be on one must be off   one must be on anytime the show button here is  false this save button is going to be true and   Rec call this state has changed this state has  change here is going to be called inside this   this method here but here we have this show  button from this section so we need to also   call State T change so this means that we are  calling state t chain twice so this what we   can do we can also create this in the component  and I call the state has changed in here but for   now don't worry we call state has changed in this  component and we call state has Chang in also the   parent component and it's still going to work  okay no confusion I don't want to confuse you   much with a lot of code you want to do it step by  step I believe you you love it okay so um that is   this one what we need to do let's save this and  that is it now here we need to use is an asent   task so if this is null then we display this Mr  B what in case it is not in case it is not empty   it has data then we are going to um call our  service and display the results so here we are   using the tupo so tup here we making an explicit  output explicit outcome you know this method is   going to return the product service is going to  return a flag and also a message so if you check   our controller I don't want to go back but for  now let's say this is our product service when   go to solution and I'll check the service we have  our product service in the client section um let's   see we have our services where is it so let's see  where our service is going to handle okay so this   means we have not created any service but we are  trying to call this service wow I forgot to create   it all right so let's pause here and I create this  service before we come back here and I'll utilize   it so when I come I'm going to explain this to you  okay so for now skip this and now let's create the service so quickly we go to solution and in the  client section r CLI on the client project let's   add the folder here and this folder I'm going  to say okay so let's stop this it is still   running let's say this is a client service so  yeah I'm going to say it's a client service   so client services okay so or I want to make it  as client Serv because it's going to handle all   client services so services will be okay then  in that let's have access to um a class and on   this class I can make it as client service and  I think this will help so client service okay or   client services so this client services this what  it's going to do is going to inherit from the i   product this is an interface of i product and this  I is coming from the contract folder from the Shar   library and it has some method that you need to  implement so control period we Implement all the   interfaces here we have two interfaces in there  and this interface that we use in our API is it   the same same thing here we don't want to create  two interfaces no which have the same uh method or   types so then we can just create one and use them  here and there we make it in a smart way then we   move on with it okay so now that you have this  service let's since we're going to make a call   on API let's inject an HTTP client and you can do  that from a primary Constructor from now onward   anytime that I create net AG project I'm going  to use primary Constructor because that's a new   one and that's what we need to use okay we want  to upgrade our coding style so let's use the new   one and to use that to skip a whole lot of writing  a whole lot of cod so here let's pass in we need   to inject HTTP client let's create an instant  here and that's all we need not to inject this   okay we have it created already and that would be  all okay so once we have this let's go in there   and register this before quickly we forget so we  go to the program in the same Cent section now   in here we say builder. services so services. add  scop now with this scope you're going to specify   the i product as an interface then you're going to  say it is a client service so client services here   and we can now close like this okay so we control  KD save it well and let's go back to the client   services we have it injected all right so from ad  product what are you going to do in the ad product   before you create an ad that you want to create a  general static method to handle that okay and this   static method you want to have access to the the  base URL so on top here let's have this base URL   specified and is from the API product you know  where we get this from go to this solution now   go to the the the server and now can see from the  controller you have this product controller and   around here there's an API SL controller and the  name of that controller here it is a product so   it is an API product I believe is clear can we  continue on that's right now let's see we also   need to specify adjacent ization options now  I also made a video on um communication from a   client and a server made easy because of the new.  net age realization you can specify this from the   top of the model or you can do this inside the  options so let's create one option here to handle   all request so this has to return this so let's  specify it on top here this is going to return   ajent um serializer options okay so we're going  to call this method to return this now it is a   static we returning a new instance of this allow  training Commerce reset through also property name   case insensitive here it is through so maybe if  I have name capital and I have names lower case   you want to check that this you as soon as you T  the the name the same spelling you should match   it you shouldn't check either it's Capital so it's  going to skip it no and now here property naming   policy you're going to use camel case camel case  start with lower case and upper case so that's   a camel case and now on mapping member handling  we set it to skip for now we are not we are not   handling or we are not skipping any member when  you check the product when getting from the API   it is only ID even ID when posting it is only  ID that's not going to provide a value for it   so all the rest going to have a value but in case  we decide to retrieve that and Escape any of the   property here you're not going to have issue at  first you're going to have issue but because of   the the net 8 Wow net 8 this property we can now  skip that without having any issue I believe this   is clear okay so we have these two method these  are static and they are General one that we going   to be using often and often so that's why I put  them on top here now the first thing to do here   is you want to first get a string content because  you're going to make an an an a post so in a post   we have to specify a string content and I also  create one method to handle the string content   so here this method is going to handle the string  content let P it here so here this is what this   meth is going to do we have a private static  is a string content as a return type and the   name is generate string content we pass in a seriz  object and here we create a new instance of this   string content we pass in the isize object as  a pillot coming in here and we want to specify   the encoding type as utf8 and application type  here is called SL Jason because we are posting   adjon to the API so we need to specify this also  okay now that is this one so all this method are   General one that you're going to be using often so  that's why I decide to put them here so we can be   using this in case you want to use this outside  the scope of this you can put them in a separate   class then you can make it a static so you can  be using them both class and outside model but   for now let's maintain it here because we want to  handle everything in here okay now let's have a   look with the next one realiz object and now disiz  object so we're going to have two three aspect the   first one here it is if I want to seriz object  what can I do so if I want to serialize object   it's going to return a strength because you know  this model here is going to be an object you want   to make it as a generic so even when I call this  method I pass in the T value it's still going to   realize it that's why I made as an object I did  not specify as a product if you make this product   it means you are limited we want to make it as a  container a global one so any model can be cized   through this method so weiz it into a passing this  decent options from this down here which going to   return what I explained earlier on okay and next  one here you want to disiz this and now we want   to return a t value so this also a generic and I  I want to return a t value we do not specify it   we pass in the JavaScript JavaScript well it's a  Jon string um um here and now it's going toize it   into a t value then return this T value okay now  that we have this set we also want to return I a   numerable maybe this could be a list form thisiz  is only um a single model what of in case you get   all product you want to disiz them we cannot be  calling this one and one and one and one and one   no we don't do that you want to create a method  to handle both that's a book of what product and   let's put it down here so this realize and now  this what is doing you say an i a numerable of   T this Json string list you pass in as a list  of T then this the same string and now we want   to digize it in a list form and I'm passing this  Jon string and also passing the options and that   is all so the return type here it is iable that  is a list of T the return type of this is just   a single T right good so now we have this at the  General on and you're going to be using this often   that's why I just have to set them on top as a  static once so the instance of this are created   once in the memory and that's all so memory is  also very vital crucial in the application so   all the time you want to as soon as you use  static it means that the instance is created   once and un kept and can be using it often okay so  let's see how to add product so to add product we   can just have one method to handle this so it is  an add product and we can override it with this   method to add prod that it is returning a service  response and is coming with a model as a payload   so get resp sponsors is equal to HTP client. post  async passing the base URL then we have to pass   in generate string content analize this object  passing this model okay so that's all that we are   doing base URL is the base URL here API product  we need to pass in the string content so here   generate string content and on this string content  here it needs aiz object so the model that we pass   as a model we want toize it first before we pass  into this string content and now see within one   line of code we able to do that since we have them  extracted separately method down here okay now   let's read response so we check if response here  it is true if it is false you see we are negating   it so if the status code here it is false okay  then you want to return this the question is what   is the range of status code it is not actually 200  it is 200 2011 let me actually show you the status   code the range that we say it is s so this site uh  this side gives you all the complete HTTP status   code now you see if I say it is Success it means  it start from 200 and it ends up to 226 so if the   response is found within any of this range then  it is it is what it is sucess and that is actually   what we are getting here so in case it is success  in case it is not success it means it couldn't get   connected to the database at all mean you want to  return error try again later but in case able to   get connected to the API then going to return read  a respon from the API as a string then you want to   disiz a response into a response object whereby  this response say if I peep it it has the Boolean   expression had the message as a record class so  we can going to convert it into this and now we   can return this service response see are returning  this as a service response in here okay so that is   an ad now when you go to the next one that is  to get the list of produ we can also get the   whole list in here now you see from here we need  to have is it featured item then we can now get   the featured item in case it is not you can also  return that okay so let's have a look with this   too then the next you do here is you're going  to check and read a response if it is Success   so if this results or if this response so let's  make as response if this response is not sucess   return this because here is a list so return now  else then I want to disiz it as a list of product   and I return this results okay so if it is not n  then you you see from here that you say respond.   content. read as string a sync then we are going  to neize it into a list form and I return this and   now let's change this to I list as well okay so  this is going to be soloft and now when you come   here we change it to to this a list so here it is  a list of product and maybe instead of this um we   have to convert this into a list then return it  to this okay so to do that we can just specify   this dot what two list work for this okay so  two list will work because you're converting   this to a list now let's see so use collection  expression so okay so maybe this is also a new   one that we can actually use return it as a list  form into this list of product okay so that is   it when we check our controller we have this as  a list and that's fine all right so in the next   video we're going to talk about how to consume  this client service in the Blazer application   to make a query or request from the API and also  display it in a UI form thank you so much and I   hope you enjoyed this I also enjoy it with you as  well I'll leave this link under the description so   you can just go in there and unclone this report  to if you want to buy me coffee to support this   channel I'll be happy to receive it and check  the description the link is over there as I   earlier on I offer to any session for people who  are interested in Net Technology so you can hook   me up the link is beneath the video thank you and  take care of yourself and I'm going to catch you   up in the next video that's going to be the  part three or the episode s isn't it bye-bye

Channel: Netcode-Hub

Views: 2,780

Keywords: EcommerceApp, BlazorWebAssembly, DotNET8, OnlineShopping, PhoneShop, WebDevelopment, ProgrammingTutorial, CodeWithMe, AspNetCore, WebAssemblyTutorial, TechLearning, CodingJourney, AppDevelopment, WebDesign, DotNETDevelopment, Ecommerce, Blazor, DotNET, OnlineShop, PhoneApp, WebDev, CodeTutorial, AspNet, TechLearn, Coding, AppDev, UIUX, FullStack, DotNETDev, CSharp, DevTools, Web API, Wasm, client services

Id: pBpwjTo_It0

Length: 58min 27sec (3507 seconds)

Published: Sun Dec 03 2023