.NET 8 Blazor Ecommerce: Part 1 - Creating Product API Endpoints 🚀📱

hello guys welcome back to net code he Channel I  am frerick and I'm happy to have you here today I   believe you've seen what we're going to talk about  today isn't it yes I believe you guys have been   waiting for this for a long time and there is the  time building an e-commerce app to be precise a   phun shop is a broad app to use a video One video  to complete everything no it is not possible okay   so this what we're going to do we're going to  create it in episode so to mean an episode okay   now I'm going to create a specific playlist and  put all of this together both of those who cannot   be watching this PC species PES then what can I  do what can I do to help you guys yes I have you   in mind also after creating all these pages of  videos I'm going to put all them together as one   and I give it to you so don't worry if you can't  watch this pieces this episodic please wait when   we done I'll put all of them together for you but  it's good that you watch in this episode form okay   I am just creating this specifically on the phone  shop but this could be any any other e-commerce   app okay it could be anything that has come to  your mind or that you want to build just that   what you're going to do you can actually pick  some point from this and also use it in yours   all right but before we jump right into this  make sure you have please subscribe to this   Channel and also hit on that notification Bell so  you never miss out any episode coming up and and   also if you enjoy what you're going to see today  please don't forget to like this video because   when you do that it helps this channel grow very  well stick around so we finish all this series   or this episode because trust me it is something  that you love that you w want to miss it all right   so thank you so for taking time to watch videos  from this channel as well as usual I would do my   best to make this very simple and clear so that  you can get the understanding I offer training   session to people who are interested in Blazer  that is Blazer server Blazer assembly umet mar.   netar Blazer hybrid and our web services talking  about the web API so if you're interested I have   an email at the video description hook me up or  you can write me through that mail now um when   we are done with this I believe I'm going to put  everything together and I'll put it at the GitHub   or no I'm going to do it like this this after  every episode I'm going to push it okay and now   if you want to grab that specific episodic section  check the that video description I'll put the link   over there so you can just go in there and I  clone that specific one so the basic one like   what you're going to do I'm going to put it there  you can just grab it from there okay so let's jump   right into this what you see it is not actually a  complete one it is just the the Forefront that is   what I have built okay now nothing else the rest  you are not going to do it together so I do you   do I do you do then we move forward now it's just  a you know you saying this a what is it is it not   a slideshow yeah a slideshow okay and this what  you know it has the the iPhone that the iPhone   talking about the iPhone not actually only Iphone  but any other phone as well okay so see how this   buy me this by med they empty buttons If I  click nothing happened you can see nothing   happened here I've have not implemented them  you're going to do it together you and I okay   and you know it has this new these are this let  me say they are badges you have new and you can   see a 13 plus it tells you the qualtity of this  specific product that we have we have the image   here and we have a search button and we have  this home this product and Etc all these are   going to implemented you and I going to do it  together we also have an account that's going   to be authentication system but for now this just  a bootstrap you know as soon as you've seen this   you know where it's coming from isn't it yes but  this what I did if I refresh this now you see we   have this search icon okay so as soon as I click  on it then the search icon fits off then I have   this new one it's very simple to implement that  we're going to have a look with that youo and I   think the featured item this is just a customized  slideshow here we are not using any slideshow like   a bootstrap or any third party component it is  just a card that I display then display this   as an icon as an image if you want to make it an  image then this what you're going to do we going   to do Skip and take Skip and take right so if I  click on this one currently I have eight here I   think they are 10 or so you see I have this  the last one as soon as I click here I have   the rest I click here it doesn't go again maybe  this what we can do during our formation we can   decide to hide this so as soon as it doesn't go  anywh we can hide this as soon I gets the last   s you can also hide this well you can beautify  it as you want okay but for now we're going to   have a look on how to build this interface  then we can now move on with this you want   to buy me coffee to support this Channel and  I specifically this project you I'll be glad   to take that one so we are going to use net8 um  web assembly core hosted project you're going   to create an API for that's going to be for our  server you're going to create our sh library to   be added and we're going to add the Blazer web  assembly yes so that's what we're going to do   it's going to be the co said one now let's see  so with this the name of this project is going   to be the demol blazer. net 8 eCommerce then I'll  add the specific Commerce that is a phone shop so   when you go to GitHub you check the name and you  be it will be there so let me close all this then stop so let me just create file new project  so you know before we can have a look with   you can take part in this you have to have  this. net 8 installed the SDK installed I   believe you've done that so the first that  we're going to do here we can go in for our   API our web API and that's a esp.net called  Web API now the name this is going to be the   API so with this this is a solution so let me  write here solution and our this is too long   for this I'm going to write here as a shop um  phone shop server so this is going to be phone shop so this is phone shop server then let's  have it created you know the framew version   must be 8.0 authentication type is n we're  going to create a customize one so let's   click on create are you done adding yours  let's add the next one and that's going be   the the client so let's right click on the  solution name and now add a new project this   time around we choose Blazer assembly stand  alone if you can't have that it's over here   so choose find Blazer and you're going to see  it here Blazer assembly stand alone you must   have it somewhere else that is this one so this  is going to be um online this will be a phone   shop client so there's a client you choose  8.0 as well authentication type is none now create okay now we add the last part and that's  going to be the Clash Library so choose come here   for Library and now you see class library for  C click on this and now let's say this is phone shop and would I say this is shared  or shared Library yes so there is shared Library so this what you're going to do  make sure it is also 8.0 now the staffs that   both are going to use we put them in the library  but if it is limited to a specific project then   we're going to put it under that specific project  okay if you don't understand this don't worry when   we start with it you get it okay so let's do some  cleanup and we delete that we can also go to the   controller from this API we delete that and also  delete the the class now when you go to program.cs   file let's check we have okay so we have swag that  we need to build this we see also from program.cs   file let's see okay now let's check the client  section then we can also remove we have this in   here now check Pages whether forecast you can  remove this two let's remove the counter and   let's go to ww folder we have this sample folder  it contains just the the Json file for we forecast   we don't need it so let's also remove that I  believe all set now let's build this application together to right click and I  go to build solution and like   we see it is restoring some n packages so let's wait all right so we can see that yes succeeded  so all the three projects are built successfully   that's great I hope you have also yours done  isn't it now the next to do here is we going   to install some package you want to configure  this as a the old web assembly okay so as soon   as I run I start the server as the setup  project I start to run that and is going   to run the client so that's going to be the ESP  Blazer is ESP net call call hosted so the server   section on dependencies let's add get package  and need to going to install ASP component do   let's see I think I have it here so component  we click on the brow section then I think components so do I have it component. web assembly do server okay so this is what I'm  talking about microsoft. as net.   component. web assembly. server  it's too long so this make sure   you install to the the server section  so click con it now let's install that okay so it is asking  us are you missing some name space okay so I think that's set  now if I decide to build it again   what going to happen let's see I  have it installed let's see build this okay so built now let's go to the server  let's configure the server first so go to server   and go to the program.cs file now in here we  are going to be using app. use web assembly   so what we have this if is a development stage  then we want to use this web assembly also we   want to change instead of using controller only  we're going to use controller with views so here   we are going to change this to controllers with  views and so add razor Pages now I believe when   you create this um that is when you use this Auto  render mode and you create this web assembly it   comes in with a server already but this time  around you want to have access to an API okay   on web API so that's why we using this called  State section and this 8 but you are referring   to a project in Net 7 or 6 okay so maybe we  can have when we have time I'm going to have   a look on that maybe in the next project for  now let's have a look with this now we have   this set and we have also I use web assembly  debugging the next thing that we're going to   do is we have to use Blazer framework files  and also we need to add the static files so   we can have access to ww folder and you know we  have authorization already we can map use map   Razer pages so with this we're going to also  add this map razor pages and let's also map controllers so map controllers and now map  fall back so to this index.html and that is   what we finding here then we have app. run  so this what we need to do now after doing   this when you run this project it's  going to run the API okay let's try   that and see um I'm done with this if I  click on this server is set to setup run this oh I set it you can see we have the API and  displayed so we are going to configure it so the   we assembly will just run the last end here  is to go to the client so we have this is the   client section now we have properties here so Lun  settings we have this here all right so this what   we're going to do we're going to copy this then  so this then let's go to the server now can see   we have properties line settings you want to  make it run the web assembly so what we have   this L URL replace it with what you copied so  this and this and that and this yes so this all   you want to do or we have to do let's save this  and now let's add the client to this project   so right click on dependencies from the server  and I click on ADD project reference let's add   the two references to the two projects let's  go to the client right click on dependencies   ADD project reference now let's choose only the  shed so click on okay now let's build this once again okay so I'll show you one benefit  of creating this configuring your your   own co-hosted project now let's run this  so when you create this as c pro defaultly   you don't have access to the API okay unless  maybe install some swag and try to make some   configuration but when when we do this we're  going to have access to our clients and you're   also going to have access to our API let's make  this run and I'll show you all right so there's   the there is the one now the same end point can  just grab this we can paste it here and I use Swagger so this going to run the Swagger and  I going to have our Blazer assembly here so   we can test our API we can test them if they  are working and we can also test our web app   if it is also working isn't that beautiful  yes it is I believe you've done the same if   you're not able to do this please pause here  and I'm trying to go back small small so you   get it so the next one here once you have  this we're going to create our model for   this product and I'm going to make it as maybe  a phone or a product let's say product so I'll   just close all this cuz you are done with them  you don't need them anymore yes now let's go   to the Shar so we going to work on the Shar  first so we have the shared project where is   it this one let's create a folder and I name  it as model not this so here new folder and I   name this as models now with this model we're  going to have one model and it is going to be product so products and now inside this product  model we're going to make here as public and with this maybe you're going  to have these properties we have the ID   the name description price we have um this is  going to be the B4 image quantity and our date   uploaded equal to today the DAT that you're  going to upload are there now the next thing   to do here is I want us to add one property to  it if it is featured so let's make a duplicate   here and this going to be it's going to be  bullan expression and say is it featured so   if it is a featured product then we're going  to put it maybe top there okay as a featured   product you can just clear these ones because  we don't need them to simplify the work okay so   we have this as our product and in this for now  we're going to create one model okay and that's   for product when as far as as we get this project  built we're going to also increase this the model   okay but for now let's maintain this product to  have access to database we need to install some   packages and you need you need to install ef  ef do um tools we have to also install es EF   SQL Server to so these are the packages that  think we need to Stu for now so we can have   access to the the um the server okay and that's  database so now let's see from the server right   click on the dependencies and now let's manage  new get packages let's install this here so EF core and now this EF core we need EF  call this a EF call so let's install   that you make sure it is 8.0 version we  need to install tools so let's search   for tools this is the tools let's  install then we install the SQL Server okay so SQL Server 2 we have to install that so when me check you see we have them  here right so these are the packages that we   want for now let's close this after this we're  going to create our appdb contest and let's put   this let's create a folder to the server because  this appdb contest here is going to be used by   the server so no project again we add a folder  to the server and now we can name it any name   that you want but say data let's create a class  to this and that's going to be a contest class   and this contest class we're going to have  access to our database I'm going to say appdb contest so we we installed EF core so we can have  access to this DB contest it is a class in the EF   package that we installed so we have to use any  framework now this is what you're going to do   control period we're going to use create this  Constructor and pass in this op and now here   we're going to specify this appdb which is going  to inherit from this DB contest class after that   we can create our database so we say DB set then  passing the model so create database and I use   this product as the database columns now the name  of the database table must be product so that is   a name and maybe defaultly we can set this to  default because that is the only database that   we going to create so we save that all right so  all set now the next do here is to add create our   configuration settings in the app set. Json so I  believe you know how to do this isn't it yeah if   you know then pause the video Try answer on it and  now let's see I'm going to give this as default   that's what I normally use even be watching  my videos now here server since I'm working   with the same computer I have it as local and it  understands the database here is going to be well   well well let me say demo demo shop DB yes then  we're going to have trusted connection so trusted   isore take note then connection set this to true  and also let's try the server certificate so try   server certificate set this to through okay  if you don't do this you might have an error   trying to run this migration so make sure you do  this write it correctly as you can see from here   okay now that we have this we have to register  this settings in the program. Cs file so in here   before this up build I'm going to create a v space  this are going to do all our steps so I'm going to   say starting I'm going to say ending okay so I  won't get you confused now here let me move one   so here I'm going to say Builder do services.  add DB contest passing the appdb contest class   that we created and also this needs to specify  an options the options will help us we'll see   what I've done the options will help us to have  access to the SQL Server so this options and now   in here we say options. use SQL server and I we  can just have access to builder. configuration do   get connection string and do you remember we are  going to get the default do you know where this   default is coming from it is coming from the.  Json and in case this is null then true new   maybe in case you delay this invalid operation  exception and now we can say that so connection string not found it's good that you handle  errors okay in case this a feature in case   there's any other issue or there's some issue  that you unintentionally delet that then let   me move this here so we can just terminate this  here so this is our configuration that need to   do contr KD we can format it to well now that  we are done we can build this application and   I try to run database migration to get our table  or database created now since we have installed   the ef. tools we can do this peacefully with  without any error okay but I think here for   us to have this done successfully let's go  to the server click on it now here invariant   globalization please stand this to force else  there'll be a problem now let's go to package   manager console so set for tools then you  get package manager click the console that is   where're going to perform a database migration  to create or to put all the codes here into an   actual database and the tables for us so CS  can clear this make sure you have this server   selected and I say add- migration let's add  a name I normally use first for it so you can   also give it a name that you want you can even  specify with your name so funny right now let's wait okay so it is done forget about this yellow  yellow yellow yellow guys now what we're going to   do here is update database oh this is not working  okay so update database okay so let's update this too okay so now it is running our this  and I'm creating the table for us so   when we run our this management  Studio let me just see if I have this okay I have one here already or even  without using this measurement studio if you're   not having that install we can also check from  SQL Server object so click on views then check   for SQL Server object Explorer you want to have  everything here then wait for this to open open   this up now this is let's see if I open this  this is not what I want I use so we're going   to create a new connection so click on this and  now the server name it is the same de stop so   if I click on local that is a server name okay  so choose a server name for this computer now   authentication is the same USIC Windows click on  connect and now it's going to get connected let's see so trust server certificates yes set is  True Connect this and I have it connected   so you want to I open this go to databases  and I see I have this demo shop DB so this   a database currently if I open it we see data  tables you have product table which will be   going to be here after it get refreshed and  that is it so this is our table okay they can   just click on this and our view data and our  table is going to be empty because we have not   added any record yet let's see so we can close  this that's a table here good so we have this so the next thing to do here is to create  our contract and that's going to be the   interface we're going to create one interface  which will be used by the server and also the   client so which project do you think to be  suitable for to hold this I believe you said   it is a library isn't it that is it so let's  close all this then let's go to the library   and now here right click on this let's add  a folder and I name this as going to be the contract so with this contract we are going to  create one interface in it and we're going to   say this is going to be a class of interface  and let's say this is i product i product now   in this i product we building this uh L by  letter so for now we are going to have a tax   of add product so TX of response then add  product let's make this as public you can   remove all an accessory us to simplify  the class now this service response we   have to create it so let's put it in the shed  project here in our modus or we can put it in   a response folder so let's add another one  here new folder and now let's say this is responses and the name of the next  model that's going to be service response okay now within this  service response what do you   think will be the properties that  you're going to have in this service response for now let's have just this a record  class of this we have our flag we have our message   as the as we move on maybe we can expand this a  little bit okay but for now we this okay control   period we're going to remove this very simple  class all right so control period you have to   include the name space here maybe we can create a  global class to include our name spaces but maybe   for noway okay let's have it set now you need to  create an implementation now this implementation   is limited to the server the server needs as a  repository to have in connection with the appdb   context to get data from database and also make  and input output and Etc so instead of putting   the interface here it wouldn't be a good idea  because here no one is going to use this interface   that is going to be the implementation so let's  make it as limited so we go to the server and   I right click on this create a folder here and I  maybe this folder we can name it as repository so repository and now of this you're going to create  produ repository class so this is going to be product repository now this is going to inherit  from the interface so I product control period   you can have access to that and now this has  one method to control period let's implement   the interface we have to create Constructor so  we can inject our appdb contest class to make   an input to appdb contest create an instance  control period let's inject this let's create   an initialize this so create and assigned the  field okay now when it comes to the addition   or add in we can just make some checks up and  see first if the model coming in it is not null   this going to be check from the client section  but maybe it's good to also validate here before   you add it to database or make any query so  here we can say that if the model coming in   here is null then you want to just return the  new service response so new service response   then in here what we need to do here is specify  the response here so this going to be false and   oh not FL it's false they're going to have we're  going to say model is n something like that okay   you can just like put like that and now let's  make here as an async okay so in case it is   not null then we can just check a name and  see if this has been added already so to do   that we can create one method to check the name  and this must return a service response so down here we can call this method to check name you  passing the name and I'll check from the database   and see if the name is equal to the name that is  coming in here okay so if not maybe you can just   convert this lower case so to lower will be okay  and let's also check this name to also to lower   as well so to lower to work so let's convert  this to lower I think so all right so we have   this and in case return here if product is null  so if product is null here then we are returning   true else we return false and I'll display this  product already exist so let's go to let's call   this method in here so we're going to make a check  first and I'll see if it is there already and we   need to specify the name passing the model name so  we can just copy this and now in here we're going   to say that here we're using the twole so we can  extract the the the output from this service here   you see we have this flag and message we passing  the model name and now this what you're going to   do we can now check if through meaning it is null  so if it is null then you want to just add okay so   you can see appdb contest. prod. add then there's  a commit where from this comit this what I did you   could see that you're going to be using appdb save  changes more time so it is good to create a simple   class to handle that so you can be calling them  any time that you want so from that commit I have   the definition in here and it is just a simple  class which is going to use Save changes from   the appdb contest so down here you're going to  say private it's a private class and here you're   saying that commit and app theb contest save  changes so we commit this it means that after   adding we save changes then return saved so you  can even add product saved or Etc so the output   that you want to add you can override and put it  over here if not then return the message because   you know in case it is not null we're going to  have this product already exist and return that   message from the twood over here return that  message in from this okay and that would be   all okay so we have this saved let's save this  now we have our implementation done what is the   next thing to to do we need to register this in  the program.cs file so here let's create a DI   that's dependency injection so builder. services.  add let's use scope and now scope we need the   interface first and have eight corresponding  repository so this going to be product repository and here we can terminate it  okay so now we have this set the next to   do here is to create our controller so let's  have a look how to create a controller for this so let's close all these save them I believe  here you are the we are the same level isn't it   let's go to the controller right click on this  let's add a new controller here and this going   to be product I think so so let's use an API  then empty one so here we're going to make it as product so product controller and we  have the r specify API SL the name of   this controller that is a product now we  need to create our Constructor for this so   we can inject so this C okay then we have  to inject our repository so let's create   an interface inject our interface here  then we say this product service this is product service control period then we can  create an assigned field okay so the first   one is to we going to have this HTTP get  and now this get it is just getting the   product list isn't it so um okay so we  did not get a product list and I think we   have to add it to the repository and now  the contract so the ey product let's get   the entire product list we going to say  task then this going to be list list of product I believe you got this  right so list of product you   say get all products all right and  maybe we can have access to um get   featured product isn't it and yes  so let's see we can have access to this or can we specify this and uh maybe  we can say this is BU we can use featured product so we can also get the same featured  product and also get the same product if get   featured product is false it means we want to  get all product but in case featured product is   through it means you want to get only featured  product and all of this must be in the list so   instead of creating a separate um method for them  you can use one okay so we won't have some a lot   of quotes in our application now let's go to  the repository here we need to implement this   interface control period implement it like that so  we have this get all product T this parameter then   here we going to check if through if featured  through that if through then going to get off   product isn't it then this what we're going to do  we can return abdb contest do product do where now   with this where you're going to specify this dot  featured so this Miss is true then two list is   sync return it okay else then return await abdb  contest do product. two list async so this must   be an async okay so here must also be in the  weight so this is all that you doing we check   if it is featured get the same if it is not  featured get this but see with the featured   we are specifying a function here so we making  a check right and then here return everything so   this going to be both featured and not featured  product but this also limited to only featured   product maybe in case you want to have access to  um the products which are not featured to you can   also do that I believe now you have the idea you  can Implement your own okay so in the controller   we can have get and this going to be a public  async task so we can make it I action or let's   let's make this specific okay so task and we  say this action results let's specify a list of product so list of product control let's  include this okay then we say get our product now we need to pass in so Boolean we say um featured product so featured okay so with this we can open  this and now we're going to have access   to V product so it's equal to a  wa then let's call this product   service so product service over here  dot get all product and I pass in this feature okay so after that you're going to return  okay so this what we are doing now since we have   this you can return this okay but it returns  okay if only this there's an error here now   if this is null well here cannot be null okay if  this is false then we want to return only the all   product in case it is true you want to return  all featur and now this method going to handle   the two um guys in there okay if this is null  well it means the communication was established   successfully so you can return the same okay  you can return not found or exception or bad   request when um the parameter that you send  here it's is is inaccurate or the parameter   that you're going to receive is in accurate  but for now let's maintain this okay we have   a lot of response codes that we can send this  is 200 we have bad requests we have not found   we haven't gotten there so let's maintain  what we have here okay now let's get let's   add product and this going to be HTTP post okay  now post we can copy the same signature of well   let's have a public Asing task and we're going  to have action results and this return a service   response so this service respond you're going to  say add product and then the payload here it is   product and let me make it as model so this  is a payload and I'm going to check if this   product or this model is null although this not  be null but it's good that we have you check so return um bad request then do you want to pass  in model State you want to pass in um model is   no okay let's pass in our own okay in case it is  not then V product is equal to a we then you can   have product service do add product then pass in  this model then then um in case this work there's   no need for us to return it let's return okay and  I'll passing the result so product or it's not   product there say is not it's a service response  so it not product we can say this a response okay   so let's return all so we can use we can check it  and data on we can display the error to the user   so let's return the results in here is a result or  response so this must be a response all right so   let's save this so this what we want to do for two  product you have this the first one getto product   we can specify it as featured or not then we also  want to add product okay this is what I'm going to   do now let's try this and see if this is working  so let's run this and I'll check our API first okay so now that we have this we can  just grab this and I'll check the Swagger and I'm going to have access to our  controller so that's the get and I'm post so if   I click on get we have to get you see we have this  featured product when we leave this we can just   click on try this out we passing it means that you  want to get the whole list of product now click on execute and this must return null because there's  no product yes see we have everything now when we   also set this to through it me get only featured  one and still the same let's try to add so post   try this out and now here you can see featured  is true so let's set this to false now click on execute Let's see we see we have flag is through  product saved response is working now let's see   for get product and our featured is false execute  this we have it because featured is false featured   is false now let's get those ones which are  featured as true is empty you see good so we are   the next one here is to um create um configure or  consume this service in the client section so we   can receive or display them here you know I want  this video to short once not too long so I want to   end here okay and this is going to be the first  episode for this series and now you've seen how   to create a controller and also add and also get  product the next one going to be how to consume   maybe if this approach it is not the best for you  let me know maybe if you want me to spend maybe um   two hours or one and a half hour in doing this or  if I make it in this pie form is okay for you too   please let me know but for now I'll be waiting  I going to improve based on your response okay   thank you so much for watching and you know check  the description you're going to have this access   to this then let's wait for the next the next  episode which will talk about consuming this API

Channel: Netcode-Hub

Views: 4,742

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

Id: Ra5nMWKTzwI

Length: 48min 31sec (2911 seconds)

Published: Fri Dec 01 2023