New Course 🔥 Blazor E-Commerce in .NET 6

hey friends patrick god here and i'm so proud to tell you that finally the blazer webassembly e-commerce course is online after one year of hard work not only regarding the course but of course it was scripting coding editing the videos creating the videos and so on uploading all that stuff while also dealing with full-time work of family getting kovitz and well moving three times in this last year the course is now available i'm so happy that i can tell you this finally and if you want to skip that preview here now just head down to the video description and make sure to use the link there because then you get a discount so if you think this course might be something for you or if you just want to support me thank you very much then make sure to use the link in the video description to get the course enroll now and then you've got lots and lots of hours of pure learning content but the other option of course is just keep watching first i give you a quick overview of the complete course so just keep watching and then you'll know what you can expect of this course and what you're going to learn in there and after that you will you see the title and the the time codes you will already see a lot of this course in this preview so i hope all that resonates with you again thank you so much for staying with me because really you guys and the whole community motivated me to to just keep up the work and do that stuff and finally finish the complete course okay i think there's not much to say of course like and subscribe if you want to but now it's about the course so enjoy the preview as the name of this online course implies we are going to build an e-commerce web application with net and blazer web assembly we'll cover the complete stack meaning blazer for the client a web api for the backend web service and entity framer core with sql server express for the database we'll start with a walking skeleton this means right at the beginning of this course and in just a few hours you learn how to build a running full stack web application with all the mentioned frameworks and technologies so after the section you won't use any mock data for instance you will already make calls to the web service grab the data from the sql server and return the results back to the blazer webassembly client on top of that we will introduce best practices to that walking skeleton for instance we don't want to use fat controllers instead we'll use the repository pattern together with dependency injection after that we build a huge part of the ecommerce application in this section it's all about the products your user can buy in your shop it's about categories product variants a search bar pagination a basic card and much more with all these implementations you learn lots of features of blazer web assembly together with the web api and also relationships between entities and how to manage them with entity frame a core and sql server after that we dive into authentication with json web tokens you will learn how to register users log them in and create json web tokens to authenticate your users set the token in the default http request header utilize the famous authorize attribute to secure your web api and add a page for the user's profile so that they can change their password for instance the next section is all about the card and orders until this point you've already implemented a card but it only works offline so now it's time to store the products of the card in the database and also implement the final order and an overview of the order history but one thing will still be missing and that's an option to check out and pay for your order we cover that with the next section and use stripe to do that this means your users can pay with credit card google pay and apple pay additionally we'll continue with the smaller section where we implement the option to add a delivery address and after that it's time for the big administration dashboard everything you've learned so far comes together in this section we utilize lots of features of blazer webassembly we build several crud operations for our entities meaning an administrator should be able to create read update and delete all products categories and product variants and to know if the user is allowed to do all that we introduce role-based authorization okay so far the overview and now let's start with something simple let's install the net framework and visual studio next and then we start with the e-commerce project all right now the very first thing we have to do is before we can start building our blazer webassembly e-commerce application of course downloadingthe.net framework and also visual studio now what i did is simply you can see it already of course i googled for net download and as you can see the first hit is already the correct one so simply go there and by the time of recording this course the latest version is or was a.net is 6.0 so please just click this button here download.net sdk the sdk of course is very important not only the runtime the sdk but i'm sure you already know all this probably for a 64-bit operating system like windows 10 or 11 for instance so again please download this one install it and then you're good to go and after that let me cancel this here we need visual studio again the latest version now is visual studio 2022 i download visual studio 2022 download here we come to the dev blog of visual studio nice little post by amanda and here we see the button for the download of visual studio 2022 so please go there and then from all these versions we are going to use the community edition this is the released one it's not a preview the community edition final version and with that we can do everything we want to do so please feel free to download the community edition here of visual studio 2022 and when you're done with that one more hint again you probably already know that but if you want to build blazer applications you have to select a certain package in my case here's the visual studio installer now you can see i've got a few versions installed already but here version 17 of 2022 i have to click modify in your case there's something else here a button to probably install visual studio long story short you have to select this box here asp.net asp.net and web development and only then you will install everything you need to build blazer web assembly applications okay and that's that so please do that i'll wait here and when you download it and install everything please move on with the next lecture welcome to the foundations the walking skeleton section in this section we will create our blazer web assembly asp.net core hosted project this means we will have a blazer webassembly client project so we will have a server project for the web api and we will also have a shared project for all our models throughout the upcoming lectures we will install entity framework core sql server express and if you want the sql server management studio to manage your database everything is available for free so please don't worry about that after this section you already know how to build a complete full stack blazer web assembly application you'll be able to make a call from your blazer client to the web api grab data from the sql server database and display the data on the client are you ready let's start all right everything is downloaded and installed so please start visual studio 2022 and then let's create our new project simply click this button here and here already you can see it in the reset recent project templates i'm using blazer web assembly apps quite often and in your case please also select blazer web assembly app if you don't find it here directly of course you can search for it just enter blazer and there it is important is that we are not going to build a blazer server app we are going to build a blazer web assembly application the typical spa or single page application architecture where the client downloads the application and it is not only rendered on the server so this is in essence the the big difference between those two so again blazer webassembly app and this is what we want to do okay and then of course we give this thing a name for instance blazer ecommerce choose location [Music] that's fine click next and now the new beautiful.net 6 framework is here of course we could also use dotnet core 3.156 whatever you've got installed but please use dotnet 6.0 if you want to follow this course right now regarding authentication we won't use anything here in the dropdown we will build our own authentication meaning we will create json web tokens we will register users we will login users we will again return json web tokens and authenticate users with these tokens and also authorize them of course meaning if you want to know if the user is an administrator or not we will store the roles or claims in this token but this is for another section of course configure for https is just fine and then very important please select asp.net core hosted what this thing is of course you can read it here specified includes an asp.net core host for the blazer web assembly app i don't know if this tooltip is really helpful it simply means we get three projects and under these three project is also a server project and this in essence is a web api and we want to do that of course so we've got the full stack here we've got our blazer web smd client the web api server project and also a shared project for the models but you will see that in a minute so please hit create and then visual studio and the 0.06 framework is doing its magic and we have our solution here alright nice please don't be confused by the big font i zoomed in here my display in this case is zoomed to 150 per cent just did this so i hope that you can read everything more easily so uh when i go to the code for instance this is the weather forecast um a model you can see the font is actually 110 but the whole display here the whole screen is zoomed in to 150 percent so that's why the font is a bit bigger hope you like this in this case also the solution explorer is bigger and everything else all right but anyways let's close everything and then let's give you a short a really short overview of the solution explorer here now in the solution here we've got again three projects we've got the blazer ecommerce client project we've got the blazer ecommerce server project which is also the start project in this case and the blazer ecommerce shared project now the shared project is well the simplest one i would say here we will add all our models and as you can see here in the default project or in the default application we've got this model the weather forecast that's because we've also got a controller that is using this class and of course also a page here the fetch data page in a sense of the blazer e-commerce application that is also using the weather forecast model so here we will add the models and the fantastic thing here is that we can use the models both in the server as well as in the client project if you build applications with other spa frameworks like angular and react also great frameworks also vue of course and all the others really like them but it could be the case maybe in your situation that you would have to create models for the server and for the client but this is not the case here we can access every model in both projects i really love this and we will do this a lot of course so this is the shared project then let's go to the server first again this is simply a web api and since this this online course is not for the absolute beginner although i think if you are a beginner to a blazer web assembly you i think you will be able to follow along really really nice but anyways i won't go over every single file uh the most important thing here is the program cs in the beginning i'd say as you can see here now with dotnet six we've got or this thing looks a little bit different than uh in the older.net framework versions we've got the minimal api approach here i'd say where we don't see a namespace and the class and so on um earlier or in dotnet 5 we've also got a startup cs this is gone we've only got the program cs in here you can see we've got the services that are registered the web application is built and we use some middleware and in the end we run the app won't go deep here for now but just so you know this is the start class the starting file of the server project and here we will also add our own services later and other middleware for the authentication for instance additionally we've got a settings file we will use this later for our connection string for instance and also for the json web token and here now already very interesting the controller folder we will add several controllers and in here this controller is creating mock weather forecast data with already one method here that will well return five random weather forecasts okay and that's already the server projects so let's go to the client here as you can see we've also got a program cs really short in this file and here well you can see it the application starts we've got an app eraser file we've got an imports file now this is interesting here we can add global using to the imports file and with net 6 we can also do that in our server project we'll do this in a couple of minutes anyways and then interesting is this thing here we've got several components and we will build our first component soon so that you know what this thing actually is but in essence this counter thing here is a page it's a component but also a page that you can access you see the page directive here and we've got html here and also c-sharp already so we will use all this later again and we've got the main layout which is a shared component in this case the main layout then uses the nav menu which is also a shared component so you see already maybe you get the idea how these components interact how these things work and additionally we've got the default html folder i'd say the www root folder with the index.html which is the start of this or the base file of this web application then you see this loading string here for instance and you will see this when we start the app as well we've got a fav icon and we also got css the global style sheet here bootstrap is already included in this default blazerweb assembly template and also open iconic for several icons okay and i think this should be it for a short overview of the solution and now i'd say we already start the app but there are two ways to start it actually there are three or even more ways to start it the very first thing i want to show you next is how to start this application in the debugging mode and then we will also have a quick look at how to debug this app all right now as i already said the starting project here the start project is the blazer e-commerce server project we've got two run buttons here this thing will start the application with a debugging features and this thing without i can already say that throughout this course we will rather use this little button here it's just faster but just to show you how debugging works maybe you have to do it who knows maybe i have to do it let's see um let's click this button here and you can already see the diagnostic tools are here the call stack the watches and so on and here on the other screen now is the actual application so this is the default blazer web assembly app we've got the nav menu here we've got a home page we've got the counter page and the fetch data page which is loading some data now here in the counter page you can see this button click me and we can click it and then it increases the counter and fetch data is the page that is actually doing the get call the web api call we can already see it here in the or also see it here in the network tab let's filter it by fetch xhr which stands for xlxmlhttp requests i opened the console with f12 but what you can also do is of course go to more tools and then the developer tools here and now let's just uh go back to the counter and then the fetch data and here you see the call already please bear with me if this is a bit overwhelming a bit too fast too much right at the beginning we will go through this step by step of course but just so you know how this application works in general i just want to show you this here already so you see the call and this is important we see a real web api call already we got no mock data here in the client this is a web service call the only thing left i would say is that we access the data from a database we will do this in the next section full stack foundation there we will build a walking skeleton a so-called working skeleton meaning that we have the blazer web samd client and the web api web service and also a sql server database where we get them data from but here you can see the data and this is exactly that what you also see on this page now the great thing really is when we start this application in debugging modes we can debug the client and the server at the same time so let's go back to visual studio and for instance we've got the counter page here and here is the method that increments the count you can already see some data binding here for instance here this is a paragraph a simple html paragraph that binds the current count and here now in the code block you see this this variable as well current count so this is what is displayed and now here this button binds the function increment count on the event on click and this thing is simply again increasing the account so very simple stuff let's debug this so we add a breakpoint here go back to the page go to our counter page and then hit click me and there we are the breakpoint was hit and we can debug this thing and now really great stuff let's continue and remove this breakpoint now and now again the same application i did not restart anything let's go to the weather forecast controller here and here's this get method looks a bit strange maybe if you see this for the very first time so what this thing does is simply returning random weather forecasts as you can see here temperature is random the summary is random only the date is correct i'd say for the next five days so we've got the hit the breakpoint here and when i now go to the page fetch fetch data it already makes the call and you see how fast this is this is really interesting for me as well because dotnet 6 and visual studio 2022 is very very new so this is really exciting okay breakpoint is hit we can debug we can step in through over whatever continue this and that's it this is really everything i wanted to show you continue again and here we are back at the page so this is how debugging works and let's do one more thing already which is trusting the dev certificate now what what is this well you can see here in my case it already works connection is secure so this means when you can remember that by creating this application we selected configured this for https now when you're doing this for the very first time maybe you already already got the pop-up in a visual studio that it wants to trust a certificate because usually you do not have a certificate or it's not trusted when you create a new application or a new website you first have to create a new or get a new certificate for this application but what you can do here locally when we develop this we can trust the dev certificate and this is what i want to do next all right now i stopped the application with this stop icon there and now again to trust the dev certificate we go to the cli so let me open this new window here and what we can do now is we can use the net command as you can see here and with the command there's also something like dotnet dev certs https and let's have a look at the available commands here as you can see there are some but what we want to do again if you did not already get the pop-up from visual studio and we want to use this command here trust the certificate on the current platform and so on so again let's just enter this thing here with https and then dash dash trust was requested a valid https certificate is already present so this is happening in my case but in your case now you should trust this certificate and the great thing is now that when you open the application in chrome or any other browser you shouldn't get the warning that this connection is not secure okay so with that out of the way you're ready for everything you want to implement in particular the stripe check out there we really need the certificate because otherwise we cannot work with the web hooks when we use stripe checkout but again this is for another section the very next thing i want to show you is a really great feature that we get with net 6 and visual studio 2022 and this is the hot reload now hot reload what is this if you do not know this already b4 when you started the application with this button here you run it you can debug it but when you make any change you would have to restart the complete application to see the change now with dotnetcore 3.1 and 0.5 there was a little trick i would say to or just another way to start the application in a sense and what we did is we opened the package manager console and started the application from the cli we can still do that for that we have to go to the server directory so change directory blazer e-commerce and then server because this is the starting application and then we can for run enter.net run but then again we would have to stop and start the application when we want to see our changes but there's also another command which would be net watch run and with that you can see it here hot reload is enabled and then chrome starts on my other screen here it is and now as soon as i change something let's let's do that we go to the counter it's page and then let's go back here and now i say for instance click me now i save this you can see the watcher recognized the file change how the reload of changes succeeded and when we go to chrome we already see the change here you did not have to stop and start the application but now microsoft and the.net team changed something and this change is huge we do not have to do this here we do not have to use the cli we can now use hot reload from visual studio 2022 or within visual studio itself isn't that great so let's stop the app here and maybe also close this and now hot reload should work also with debug debugging but in my case i tested it a little was a little buggy still but when we really use start without debugging let's do that now you see we do not get the diagnostic tools nothing changes here in the ide but what we get is the application again of course and we got hot reload now the thing is you've seen it a couple of seconds ago i just saved the file and the hot reload was already doing its magic here you first have to activate it so you can unselect this by default it is not selected how to reload on file save you would have to manually click hot reload but i think it makes a lot of sense to just select this thing here hot reload on save and now let's just remove this again like that save it let's go back and we already see it it was really fast maybe you've seen the uh the check mark here this icon here that well showed us that the hot reload was doing its magic maybe we can try this again one more time click me exclamation mark we save go back yeah there it is and we already see the change and this works for other files as well so it's not the razer file here it's not the html it's also the c sharp code it's also the the web api here the server project so when we make any change here it also works and it is hard reloading the only thing that is not working but this was already the same with the net or watch run command is when we add new models for instance add new functions in this case we have to restart the application but it's not stopping and starting the debugging process it's really really fast how this thing works as you can see here in the background it's in essence the same command it's it's the typical it's it's the watcher in essence you see the same uh lock here you can just rewind the video a little bit and then you can see in the oh no here it's still here of course so you see in the package manager console this is in essence the same stuff even the port was the same so yeah this works quite good i think and maybe just to show you one more thing let's change that back it is reloading in the background background i know this um as i said it already works for other files such as stylesheets css this thing here is called css isolation we will do that in a couple of lectures as well for instance if i want to change the background color and this was some more not sometimes in my experience it was really often that this did not really work with dotnet watch run you changed the css file and it simply did not recognize the change but here now it's this background here this gray yeah top row when i change this color now to i don't know blue [Music] and save it there it is there was the change really really fast so i just love this thing and i am really really excited about all our experiences we do together in this course with the new hot reload feature where we really do not use the cli any more well for the migrations we will use it with entity framework but not for running the application we will really use the buttons now here in visual studio so really exciting i think but now with that out of the way let's continue or start with actually building our ecommerce application and in the next lecture what we want to do is we create our very first model which is the product model okay so the application is still running and let me close all this don't need it and now so now we've got an empty space here got some room we want to create the product model now and just to tell you already the first product model we will create here is not the final thing of course we will add some properties we will make some changes we will refactor stuff i'm telling you this just because i got some feedback from students not many students but they did not like the approach that we have to refactor some things sometime i do this i still do this i worked on it and i hope i improved it a little bit but i still do it that way because i think this is the best way to learn if i would give you the complete product model for now i think this is too much simply too much too overwhelming way too complicated to explain all the connections all the relationships to all the other stuff that is coming so please bear with me i hope you like this i would love to get your feedback about this so what we do is we right click the shared project and we add a new class here and this class is called products and just click add all right and what you can see here now is already the new thing these violet or purple squiggly lines say you see it here adding namespace requires restarting the application adding class requires restarting application so i think we will see that a lot when we add new code another thing is here i don't want this to be an internal class i want this to be a public class and then let's add some properties here so the very first thing is i use the built in snippet prop so just enter just enter prop and then hit tab twice and here we add an id so a product gets an id also a string which is a title another thing that is new this is amazing this is intelli code it's not called intellisense anymore it's now intellicode so an a i improved intellisense in essence what this thing does is it suggests some code and this actually was really great because when i would not add the default value here or the initial value string empty then in another situation in our code we would run probably into another reference exception so this is a nice little suggestion thank you very much for telling me that and this is also crazy that it already suggests the description i tested this earlier of course and it really learned what i want or what i did and what i probably want to do here so yeah i just hit tab and this is the very next thing a description and what's this yeah not announable property so again this is new and what we can do here now again set this to empty by default great stuff and with alt shift and if i formatted this thing okay so the product gets also a description the next thing i want to add is an image url and again we get this suggestion here great stuff oh but it changed that to my property so now i wanna use an image url and then already the last thing which is a decimal now and this thing is the price okay what happened now i i hit ctrl s to save to save the product model now in this project and this is this is again a new it says that hot reload cannot automatically apply your changes what we can do now is continue editing but then we would not see the change well it's a new model so nothing changes actually in the client but still what you can do is we select this box now to always rebuild when updates can be automatically applied and this checkbox as you can see here will be reset when the solution is closed i think in the settings we can change that as well so let's simply do that and re build apply the changes and now let's go here yeah you see that was everything this was the rebuilding of the application and this is actually what the dotnet watch run command did earlier with dotnet5 for instance so there was it was not really a hot reload where it simply changed a little bit of your application it always rebuilt your app your app but it was very fast similar to this thing here yeah you see lots of new stuff and that's why i'm talking maybe a bit too much again feedback we can also always update the lectures if you think this is just too much talk but this is the product model now so we've got our product model one more thing i already want to do is i want to add this model now in the imports razor here because then when we create our first component in the next lecture we don't have to add the using there so slim simply enter at using blazer ecommerce shared that's it that's everything we have to do and now i would say let's try this already in our program cs we will create in a couple of minutes we will create a new controller that is using the product model and now we can also use a global using so global using has to be in front or you have to type this before the uh not global usings so for instance if i do this here just to show you this global using and that already tells us a global using directive must precede all non-global using directives so let's move that back global using and then also blazer ecommerce ecommerce shared like that and with that we do not have to again add the using for the product later when we add the product controller here and actually this is what i was waiting for we can also remove this thing now because now also the weather forecast model is available here in the controller without adding the using so we can either use the light bulb to say remove unnecessary usings here or we click this little thing run code cleanup and this is doing exactly the same thing so let's save this now got our product model we've got the global using here in the server project in essence also the global using in our imports file okay great that's that and now let's create your first component so your first component and we do that in the client project and the very first thing i want to create is a product list and this product list should be a component that is actually shared it's not a page i want to create a shared product component here and show this product list then in the index raiser here so on the start page similar as you can see here to the survey prompt this is also a shared component and you can find it here so everything you see on the page let's have a quick look again this thing here this is our index razer component so this page actually with this little page directive the route is simply the forward slash and you can see the hello world and welcome to your new app great stuff and then you see this little box here but this is actually another component so again the survey prompt component and with this thing here it already communicates so the index razer component already communicates with the survey prompt by giving the survey prompt a title so this is one way of communication between components how can a parent component communicate with a child component then there's also a way back of course child with parent and then another way where any component can in essence communicate with any other component and this is done with events we'll do that later but something similar will be done now with the product list again the survey prompt gets this title parameter here and we will now create our product list so please right click the shared folder select add and then razer component again this is our product list component there it is now as already mentioned we've got html code here and also c sharp code if you don't like this approach meaning that you have the c sharp code or the code block in the same file as the html you can create a code behind file it's absolutely no problem what you have to do then is right click the shared folder again click add and then a new class and this thing this is a convention has to be called product list razer and then cs and as you can see now it is below the product list razer file you can collapse this and expand this again and now you can add your c sharp code here and not here in the code block so this is totally up to you but i'm a guy who likes this approach here so i remove this file again this works for me so we've got our product list and what i want to do now is i want to create mock products so let's create three products that we will then display in the component and for that i prepared some products on wikipedia let me do this manually now for for this time for this time only if you want you can of course go to the github repository and simply copy and paste the products from there but let's do this manually only for now and after that we we also kind of copy and paste the stuff and change it where it is necessary so first let's create a new private static field which are our products a list of products we call this products and this is already a new list of products here and we will add three products the first one has the id i love that it is formatting automatically that's nice now id is one and now regarding the title let me just add empty strings here and then we will paste the stuff from wikipedia and so title description image url is also empty here and then the price let's set this to 9.99 and also let's copy this so we really have three products change the id maybe maybe also the price so there's a little bit of variation okay another title the first thing i opened here is the hitchhiker's guide to the galaxy so let's copy this and paste it here and regarding the description let's just use the first paragraph here all right image url now is this thing and we're done with this book now the next one [Music] i would like to use is ready player one not the image the actual article here so ready player 1 also of course a great book then the first paragraph here please alright and now the image okay and then the last one [Music] is 1984 so this is the title we've got a description [Music] and also again an image all right okay so we've got our mock products and now we write some html and what i want to do is simply show an unordered list with some style sheet stuff not much i promise and already the great thing here is that we can use c sharp code not only in the code block but also inside the html so inline c sharp so let's just do this we don't need the title here let's add our unordered list with the class unstyled so we get no you know you know bullet points or something some classes of course are already provided by bootstrap and some we have to create ourselves now i did this or we would do this because i think this is also a good way to learn to do all this manually and please again bear with me i'm not a designer of course so it's not the very best design in the whole universe there are frameworks like mudblazer or blazerize if you want me to use them and show you how to create an application maybe even this ecommerce application here with a new section with these frameworks then or these libraries then tell me this please write that in the comments or the q a section but anyways let's use our custom css now and here already what we can do is we use a for each with the add character here so for each and normally i'm able to click or hit tab okay let's try that again let's choose this one all right so we've got a for each and now we save for every product in our products collection now from the code block and in here now we can say we've got a list item with the class media not really media a custom class we will add and my three this is the margin on the y-axis axis that's the correct term then we add a diff for our image with the class media image wrapper and a right margin of two these are bootstrip class again and we will add a link here but for now let's just use the hashtag here or the hash character and after that we add the actual image with the class media image and now the source and this is also amazing with the add we say this is c sharp code so we access our product and then we see it here already the image url and of course we can also give this thing a text with alt add products title okay so this is our image and next we add a body with a new div class is media body here again let's add a link like that and later of course we will add a link here to the details of this product and then we add the title with h4 [Music] the class we can add here is margin bottom zero and then we add the products title and after that we add a paragraph after the link paragraph where we add the description like that and then the price with the class price and here this is displayed as dollar and then the products products price all right so we save everything and now we go to our index razor and actually let's remove everything now almost everything and we add the product list like that and what we can do here this is also new with net six the page title component sets the title of the header of the page and what we can do here maybe already is setting this to my shop because this is the very creative name of our ecommerce application all right so short recap first we created our shared component product list we added some mock products here in the code block so we've got the list of products and then we added some html already with a for each loop where we access some properties of these products and then in the index raiser the very first page we access here we added the product list component and when everything worked as expected we should already see our products so let's go back to our application and there they are well does this look nice so we really see the title my shop and we also see our products here our books but of course this does not work because oh that's nice that's also new that we've got this scroll scrolling effect of course this of course this doesn't look very nice we have to add some css and we do that next now to add the cascading style sheets we have several options again we've got this app css file the global style sheets in the www root folder but we don't want to use this every time or for every component what you want to do is we use css isolation and you can already see that here in the main layout razer we've got the main layout razer css file and also here in the nav menu for instance and we do the same now for our product list similar to the code behind file we create a new file here so add new item and this is a css file so we look for style sheet and now we call this product lists razer css and again you see it's now below our component and now we can add our css and i know that this is tedious at times but let's do this just for learning purposes so the first class here i would want to add is the media image you give this thing a maximum height of 200 pixels we give it also a maximum width of 200 pixels then we set the border radius to 6 pixels all right so what i want to do is set the margin bottom to 10 [Music] and a transition transform for to point s at 2.2 0.2 seconds that's what i wanted to say now regarding the media image wrapper we say the width is 200 pixels and the text align [Music] is center then we've got the media image hover and actually let's move that up here like that okay and this now gets a transform with a scale so we zoom in a little bit or scale it a little bit make it bigger all right and then we've got the price which simply gets the color green okay with that we should i thought we should also already see a change but we don't that's interesting anyways we have to add a little more css for the responsiveness so add media and now uh for a maximum width of 1023.98 pixels so almost 10 24 we say media flex direction is a column and then the media image wrapper gets a width of a hundred percent and the height auto okay so that's our css and again let's have a look what happens if you reload the application or if we open the console and say empty cache and hard reload nope that's interesting hard reload button doesn't work either and what about restarting the application now it it's done okay well i don't know if this is really disappointing but well in this case maybe because this is a new css file we really have to restart the app manually but you can see it's really fast still so i think that's still okay and i just want to see what happens now if for instance set this to 2 and save this yeah ok so this is this is then really fast if the file is there it works but if not we have to restart the application browser refresh with an error interesting interesting as i said very very new all this 0.06 and visual studio 2022 we already achieved i would say a big milestone because we now see a shared component here with css isolation we also changed the styling for another view as you can see here already when i make this a bit bigger not really able to do this so when i close oh yeah okay so when i close the console or i really make this big then we see the image here but if i make this a bit smaller then we got the the column here the column design all right so this works and next we are creating our first web api controller so we are moving from the client to the server project okay sorry for this i continued with the recordings of this course but now i realized i made a little mistake regarding the css as you can see here i actually wanted this div to be next to the image and for that i well wanted to use a class that was available in bootstrap version 4 but with dotnet 6 now we got bootstrap 5 and this class is gone and the class i mean is you see it here we already got the product details so i continued with the course but let me make this change now and push this lecture between the others it's not much but it's a little a little fix still that makes the design a little bit better i think and now here in the product list razer you can see this thing here media body and media are actually classes that were available in bootstrap 4. now let's add them real quick and then we are good to go and we can continue with the application so first the media class is simply display flex and then align items flex start and now media body media body and this thing here now it gets flex 1 and now let's have another look yet already reloaded this is the great thing of the new hot reload now it looks better and in the case we have less space then we see it as a column okay this is everything i wanted to show you and now let's continue now your first controller of course will be created in the server project and here you see it already and you have seen it already as well this is the controllers folder here and here we already got the weather forecast controller this is a web api controller and now let's create our very first own controller by right clicking this folder and then add and then not a new item this time we choose controller and now here we see a bunch of options but these are the wrong ones we are not building an mvc application so we do not want to create an mvc controller instead we go to api you want to build an api controller and now we've got another three options here are other three options here you see an empty api controller an api controller with read and write actions you can see it here rest actions to create read update delete and a list entity so all the crud operations already are prepared here and there's even more generated code for us if we want we can create an api controller with actions using entity framework so actually using entity framework to do all the crud operations now in my opinion first for learning purposes and second also when you already know what you're doing i think an empty controller is the best choice but that's just my opinion at least for learning purposes i think this is a really really great thing so please let's create an empty api controller and then we will create our methods by ourselves so all the crud operations so we just click add and then we call this thing since we want to create something to get our products the product controller and click add okay there it is already we have a little bit of generated code first the base class here which is an mvc controller without view support if we wanted new support we would inherit from the controller class let's have a quick look maybe just click control and then click on the class here you can see there's already a bunch of stuff available that we will use well parts of that we will use for instance the http context claims principle the user here is very important later for authentication then methods for the results we want to return like the okay method here and so on so lots of stuff we will use here and apart from that we see these two attributes here the route and the api controller attribute and as you can see here when i hover over api controller this thing indicates data type and all derived types are used to serve http api responses so actually exactly what we want here and the routes well maybe the name already implies what it is it specifies an attribute route on a controller so this is then the actual uri the link or the url you name it for accessing the controller and this is the string api then forward slash and then in brackets controller which means the name of the controller and this is this string here this term before the controller term so simply product so api controller this is how we access our product controller just to compare it really quick with the weather forecast controller we do not see the api string here again that's totally up to you some apis use the api string some don't i like to use the default string here so api first and then the forward slash and then the controller name and then later when we use different methods we add something else to access the specific method so what we want to do here in this controller is returning our products our mock products and when we go back to our product list component real quick then what we can do is we can actually grab them and paste them to the controller because now we want to get them from here right so we have our product list now here let's format this if it wants to but it doesn't all right and now again just to mention this class now already knows the the product type play the ecommerce shared when we is the namespace and when we remove this here let me just cut this real quick then the type is not known and we could add the using directive in here but let's keep it like that i really like that and when dot net six is or c sharp 10 is providing this feature why not use it right so we got our products list and with that the next thing we can already do is create the method which is a get method and real quick the http request method we are going to use in this course are get post put and delete now to receive or read data we will use get and this is where we really just receive data we do not send anything to the web service well maybe a query string meaning something in the url but we do not have a body a request body that we sent to the server here so this is the get request method and again here in the weather forecast controller we also see this thing this is the attribute we need to uh create a get method it is not really necessary if you call your method something like get get weather forecasts get products and so on this is a convention where the web api then knows that this is a get method and that an http get request method is used here so you don't have to do it but as we will see in the next lectures we will add the swagger ui so an api documentation that is generated and this thing really needs this attribute otherwise it does not know what request method is used here so we've got get and then we've got post put and delete and post will be used to create stuff put is used to update stuff in both these cases we will have the request body that we will send to the server and then the last thing is the delete method and well the name already says it all it's there to remove stuff but we want to create a get method so let's add our attribute already http get there you see it here we've got get we've got the lead we've got more stuff of course but post put get and delete is everything we're going to use in this case if you want me to implement something else again please tell me i'm open for your feedback but now the get method and then we say public async and you see now the suggestion here which is really interesting because this is totally sufficient we can say it returns a task with an i action result and i would say we do it like that and we call this thing get products and now this is really simple it returns [Music] okay and then our products all right now why do i say this is interesting this is the return type here it defines a contract that represents the result of an action method another way to do this is not using the interface of the action results here but actually using the class with the type that is returned and we will again need this actually for the swagger ui but let's try it that way now and then we will change it later and the other thing here which is important again is the okay function here this creates well this creates an okay object result object that produces instead of a code 200 okay and 200 okay you maybe already know this just means well everything is okay everything went just fine we've got no error this is the data here you are perfect so move on other cases would be something like a bad request for instance when we hover over this it says 400 bad requests something is wrong here or we've got something that knows everyone even people who do not code maybe 404 not found and so on but everything is okay here with the products call so let's just save it this line here tells us that you're not using something asynchronous but we will later when we use entity framework so this is our method already and we can already test this of course so let's save this i have to start the application again because i'm recording this part now on another day so build succeeded we've got our hard reload activated and here is our application and what i want to do now is i want to go to the network tab and we can use the address bar to make the call so let's test this with api and then products hit return and there are our products and here we can also see them make sure that you have no filter active and here we see them a bit better a bit more organized so this is the preview of all our products products and to really prove that these are the ones from the controller let's add a one here save this and now reloads and i was hoping that this changes now product controller okay what about restarting the application now it worked all right that's interesting let's try this again restart again okay maybe this did not work because we have this abr api route here but it would have worked if we we have opened the application anyways this already worked and now to test this with our client app let's make the get call well in the product list component so let's go back to the product list component here and we can actually remove all our products here like that maybe still initialize this as a new empty list of products and now the interesting stuff is that we have to make an http call and for that we need an http client and to get the http client we have to inject this thing so we're already using dependency injection here and to do that we use this inject directive and we inject the http client and call it http again you can always at least at the beginning compare this to the default application here it's exactly the same we have injected the http client here and down here then we are using this method so let's do something similar now by ourselves so what we can do is again we inject the http client and then what we can do is on initializing this component so when this when this component has been started rendered you know what i mean we can make the call and what we're going to use here is the method on initialized async again let's compare this real quick it's also used here now this is one of three life cycle methods in blazer webassembly we've got on initialized async the other ones would be on parameters set and on after render now we will use them later just so you know uninitialized async is the very first one so it's really on initialization on initialization of the component then we've got on parameter set which is the second lifecycle method this means when we set any parameters for instance from the the route and we can add the parameters to the pages to the to the page directives or to the url to the route that's the term i was looking for and then this parameter is set and this method can react to that and then the last one is on after render so when everything has been finished rendering then we can do something there so long story short let's create our methods protected overrides and then now you see them here on off the render again method invoked after each time the component has been rendered important here is this boolean flag first render so after you can check for this flag if it's just the first rendering and then we do something or we do something after every single time the component renders uninitialized you know this already now and now here method invoked when the component has received parameters from its parents and the render tree and the incoming values have been assigned to properties although although the the parent stuff is well it doesn't have to be the parent again it can also be so not the parent component it can also be the uh the the the route and that's also a parameter then all right so anyways what we want to use here is the uninitialized async and they fixed the formatting really like this before 1.085 formatting was kind of destroyed when we used the suggestion here and now we say our products that we have initialized as an empty list are await in our http which is our injected http client here and then get from json async because it's actually a json object that we want to use here and then we define a type so list products and something is going on here with visual studio okay and then okay maybe i have to reset visual studio 2022 well this works just great and then we add the route so we got the list of products as type and then we say api products add the semicolon here and this should be it then of course there is a possible null reference assignment also something new here so what we can do now is say first the result is this thing [Music] and if the result is not null then we say products is the result and we get no warning i will save this now and i think i have to restart the visual studio because of these errors because i think they seem to come back again and again but let's test that really quick i saved this i don't know if the rebuild did work this time on in the hot reload let's see when i refresh the application we should actually see the call but we don't see it see something is fishy now okay i'm restarting visual studio and then we'll try this again all right we are back so now let's start the app again [Music] there it is we open the console and let's reload it again and now we see the call this is the actual call filtered this for the http requests product and here we get them back and now let's test that well we got no other mock products and then the uh except these here so it really should be these but hot reloading does not make the call again so we have to reload the page well that's fine i guess but it does not recognize the change that's really interesting so we really have to restart it good to know and there we are all right so this is lots of stuff we have to do just for making the get call but actually it's not a lot but we had to explain a lot but now you made your very first get call in the blazerweb assembly client with your web api and now the next thing as i already told you what i want to do is add the swagger ui so we have an automatically generated api documentation all right now to install or to use swagger we have to add a new get package and to install this we right click the server project here and go to manage nuget packages then we go to the browse tab and in here we will look for the very interesting name swashbuckle there it is already and then we choose this one asp.net core you see it got a bunch of downloads here so let's just install this and it says it here swagger tools for documenting apis built on asp.net exactly what we want and what we do so it's now installed and after that we have to configure this thing a little bit so we go to the program cs file and now first what we have to add here in the program cs is builder services add endpoints api explorer and this configures an api explorer using endpoint meter data so this is the very first thing we have to add here and then the next thing is builder services and then add speaker gen and after that after we build the app we say app use swagger ui and then the very last thing and then we got the middleware working is app use swagger okay and this is everything we have to do we save this now and now we can already go back to our application and should be able to access the api but i think we have to restart it to make this work so let's restart the application here this was actually an advantage when using dotnetwatchron and.net5 because in this case the app was always rebuilding actually and took a bit longer but we did not have to make any manual manual change here but anyways we restarted the application and now we can go to swagger and then the index html and there you have it we've got the weather forecast and we've got our product call you see the weather forecast type here but what you don't see is the product type and the list of products and for instance if you have a look here you see an example value for the weather forecast but not an example value for the product now why is that well this is the return type of the controller method the i action result so when we go back to our controller here this is what i mean when we now say instead of i action result we really define it with action result and then list product and another angle bracket here well now it tells us to that we have to update the application or restart the application that's totally fine that's great and now when we go back already restarted the app this is this is great now then we see the schema meaning the model so this is our product model with the id which is an integer the title string and so on and now here we also see an example value and we can't what we can already do is we can say try this out we say execute and we get our products isn't that great so we don't have to use the address bar now in chrome whenever we add a new controller method we can just test it here and this of course also works with post calls put calls and so on also delete called any kind of call you want to make of course you can test this thing here so also add a request body and so on all right now with that out of the way we want to build our working skeleton so we've got the client part we got the server part and now we wanna create our database and entity framework and so on so let's install sql server now because we want to use secret server express for this application all right now to get sql server or sql server express again what you can do is of course simply google for it so sql server express is maybe the correct search term here and then just go to the first hit and you get to this page here try sql server on premises or in the cloud and what we want to use is secret server express it is a free edition of sql server that's important so really free for everyone and just click download now and you're good to go of course open it install it and so on and while installing this thing you will already see a connection string if you want you can copy this thing or you just wait for the lecture the very next one and there we will add the connection string as well and what you can also do is again at the end of the installation of sql server you will see a link for the sql server management studio so you can either click on that button or again you google for it and again try the first hit here and then you will get to the download page of secret server management studio i like this thing it's a great browser for databases for sql server databases you can also only use visual studio it's totally fine works great but i'm a guy who really likes the management studio here or just another ide for your databases actually so this is up to you but i recommend downloading sql server express and then downloading and installing sql server management studio again please do that now i'll wait and we'll see us in the next lecture now with sql server and entity framework we have to configure some stuff of course we have to set everything up so how does our application know where the database is well for that we will use a connection string and the connection string is usually usually stored here in the app settings json file so just go there and then we add a new section and there it is already it says it is suggested connection strings so we choose this one and in here now of course you can add as many connection strings as you want but the default one is usually also called default connection and then for that we say server and if you've installed secret server express on the same machine as this application here or your visual studio ide then this would be a localhost backslash backslash and then sql express with the default installation if you're more like an expert maybe you have changed something then i think you know what you're doing of course in this case the connection string is different but by default it is server localhost sql express after that we can define the name of our database well project is called blazer ecommerce so maybe also call this thing blazer e-commerce and the last thing we want to use is trusted connection true and that's it this is our connection string so server low close sql express database blazer e-commerce and trusted connection set this to true save it and we've got that out of our way and the next step now is to install entity framework now to install entity framework i'm using the cli of course you can use the command line interface or the powershell or the package manager console here and i'm using this thing and what i want to do now is i want to look if a dot or entity framework is already installed and to do that you can simply type net ef let's have a look yep there was something let's see the entityframerecord.net command line tools 5011 are installed in my case so maybe it's a good idea to first uninstall them and then reinstall them so i get the latest version to uninstall this we just enter.net tool uninstall and then dash dash global.net dash ef already done this is really fast and to install it again it's almost the same dotnet tool and then install and then dash global and then dotnet dash ef alright we've got net ef version 6.0.0 isn't that great now let's double test that just to be sure dotnetdf there it is enter the thermocore.net command line tools 6.0.0 are now installed perfect now this is one of the requirements we need and in the next lecture we will add our data contacts and also some more packages to make everything work all right now first the packages we want to use entity framework or it should be more exact it's entity framework core although they don't use the core term with dot net still it's called entity frame record and in the server project we manage our nuget packages and here now this thing is called microsoft and then entity framework core this is the very first one you can see it here entity from a modern object database mapper for net supports link queries change tracking and so on so exactly what we want here please install this package here click ok i accept beautiful then we need another one i could show you the errors that occur when we try to add our code first migration but let's save some time here and simply install the design package shared design time components for ng framework core tools so this is necessary for our migrations install this one please and already the last one is sql server so microsoft entity firmware core sql server this is our secret server database provider for entity framework core we're using secretary express so this works just fine with the sql server database provider install this thing and then we've got everything installed that we need all right now let's have a look at the project file we see swagger we see sql server we see engine thermocore design and microsoft entity framework core so everything seems to be installed this is great and now we can add the data context now with entity framework and the data context we want to access our data from the database you see lots of data and that's why i like to create a folder also called data like that and then in here we will create our data context as a new class so add a class and then call this thing data context and now the first thing we have to do here is we need our abstract class db context and for that we need the namespace or the using directive here with the reference let's say microsoft entity framework core and we will need that more often so maybe again we can add this to our global usings so let's say global using microsoft entertainment core and then we go back and voila the db context is here for us now what is this thing well we can read the beginning here together a db context or a database context instance represents a session with the database and can be used to query and save instances of your entities dbcontext is a combination of the unit of work and repository patterns we will also use the repository pattern quite often in our or starting in the next section where we will use services instead of the or instead of only using the controllers because when we would do that we would create fed controllers so-called fed controllers we don't want to do that otherwise people will tell me hey this is not the right way to do you're wrong okay i know so we will create services with the repository pattern but as you can see here the db context is simply there for us to query our data from the database and that's why we need this and we can call it however we want to call it but the typical way to call this thing is data context so we've got this thing but additionally we have to add a constructor now we can use this snippet here enter cdor tab twice and the data context now gets an argument and this one is called db context options with the type data context and we call this thing options and this thing should also use the base constructor here already suggested by intellicode nice this is now our constructor and now the last thing we have to add is a db set which is a property like that of type db set with the product type and let's see what what it tells us here a db set can be used to query and save instances of in our case now product because we already defined it we can use link queries against a db set and they will be translated into queries against the database so actually with our link queries we will create sql or sql statements and this is where we will add the db set here for products and we call this property then products usually you just pluralize the name of the model and this thing here will then result in a database table of products so whenever you wanna see your entities or your models in the database then you have to add a db set there are some exceptions of course as always when you're using relationships maybe then you do not have to do this all the time but to be sure and when you say hey i've got this model here my product and later for instance we will create categories users and so on and you want to see them in a table in your database then this is the place where you have to add them so just add a new db set of your type and then give this a name and again usually you just pluralize your model so this is then our products table actually and this is everything we have to do regarding the data context we save this and then the application is rebuilding that's fine for now and next up we register this data context now and configure this thing for the sql server now to do that we go to the program cs and now this is exciting because before with dotnet 5 we had the startup cs file where we had to well configure all our things but now we do this in the program cs with dotnet six now we have to use the builder object here to do that and maybe let's do this at the beginning here so we say builder services and then we can say add db context with the type data context and this is now not known here so we can add the using directive and after that this thing also gets options so let's call this thing options and this is how we configure this for sql server so options and then we say options was already here nice sql server but what we do here now is again we need the builder to access the configuration this is actually how we get uh information from our app settings json file and then we say get connection string and then the name of the connection string which is default connection like that we close this here and here format this thing and we're done so builder services add db context and then options use sql server with builder configuration collection of configuration providers and so on get connection string default connection so this is now everything we have to do we have to prepare to make use of entity framework and sql server and now it's finally time to add our very first migration so there are actually two ways to use migrations with entity framework we've got the code first migration and the database first migration now with the code first migration again the name already says it we write your or you write your code first like your models the product model for instance and then when you add a migration and update the database entity framework will create the tables for you in the database that will work with your models the other way is simply the other way around you create your database first your tables your relationships and so on and then entity framework will create the models for that now i think code first migration is used more often and in my opinion it's also way more fun so i don't have to bother a lot with the database although it's also fun to have a look at the database change stuff and so on but still that way we can keep coding and we stay in visual studio so let's just use the code first migration here now to add a migration we can use the package manager console again but first we have to stop the application here and we can do that by pressing ctrl c several times or simply closing the window and now let's go to the package manager console again and first let's have a look at the dotnet ef command here as you can see we've got three commands available the database commands to manage the database db context and migrations which provides commands to manage the migrations so it's not much and of course maybe you guessed it to add a migration we need the migrations command so let's clear this and then we say dot net ef my grations and then add and since this is our initial migration we can also call this initial or maybe something like create initial and then hit return and then it's building build succeeded great now we get a warning here because of our price property and that's simply because when we use the decimal type here we need to define the digits that are used so what we can do now and it's good to see that now we got a new folder here the migrations with the migration file but if something like that went wrong for instance we can always remove the last migration so for instance we can say.net ef migrations remove all right you see no migrations folder anymore and then let's add or let's define the digits here for the model and to do that we say column and then type a name let's add another package here another reference system component model data annotations schema and after that we say type name and then decimal and then we will simply use the default digits so after the comma we've got two digits and then we should be good to go and now let's try another migration again so dot net df migrations remove not remove also let's get some space here and then say add create initial and now let's see but succeeded this info is fine for us this thing is done and now let's have a look at the migration file we've got the folder here this is not really interesting for us this is energy framework stuff and now here we can see this is our actual migration file and we can see an up method and a down method and now the up method is called when we update the database and when we roll back the don method is called actually and now here we can see it will create the table products then it will automatically use the id field here as identity field meaning that it will also increment the id by itself automatically and then we got the title field description image image url and the price again you can see the decimal type here and then again here the primary key id so that's great and now i would say we update the database or when the database is not there it will also create it and we do that with dot net ef data base and then update keep in mind also when there is no database we use the command update let's go okay nice this is done we also see some stuff that was happening here for instance you see the call create database and here create table and so on this is the table year of migrations history so this is ef core internal stuff but where is it here's our product table actually so this was called great this is done and now let's have a look at the sql server management studio there it is we simply connect to our sql server we open the databases and here it is already we can open this and then have a look at the tables there is our products a table let's make this a bit bigger we see the columns we see the keys and the constraints triggers indexes statistics but i think the most important stuff for us here are the columns and maybe also the keys and now we can right click the products table and say edit 200 top 200 rows and we see nothing of course because we do not have entered any products yet but this is exactly what we're going to do next in the next lecture we seed new data automatically now what we could do here is of course enter our products manually but we don't want to do that at least i don't want to do it i'm a lazy coder so what we or what i want to do is i want to see the data and for that again we can move our products one step further we moved it we moved them from the client to the web api controller and now we will use them in the data context because here we want to seed our data and to be able to seed data we use another method and in this case this is the method on model creating that we will overwrite in a sense so let's enter protected overrides void and then on model creating we need the model builder here let's call this also model builder and now in here to seed data for a specific table or for a specific entity we enter model builder and now we see already the right suggestion entity product because we want to do something with our product entity and what we want to do is we want to give it some data and we do that with has data and now in here we can again add our product list so from our product controller let's get these products here copy them [Music] and now here we just paste them formatting does still not work that's a shame so maybe we have to format this by ourselves no not working okay i think that's correct so these are the products now that we initially have then in the database so let's save this and then add another migration let's clear the screen and then we say dot net ef migrations add and then maybe we can call this product seeding all right let's have a quick look again we've got another migrations file and in here now in the up method we see that some data is inserted great and in the down method the data has been or would be deleted so let's update our database with dot net ef database update nice we see what's happening here all these insert statements and then let's have a look at our sql server management studio we can simply right click here and say execute sql and there are our products great we do not have to add anything manually this is now the data in our products table all right and now it's time to finish up our walking skeleton by now receiving our products from the database now to get the data from the database we have to go back to our product controller and now in here we can actually remove this product list we don't need our mock products here we've got real data now in the database and of course this method is telling us hey there are no products what the heck are you doing here well yeah that's true but we'll fix that right now the very first thing we need again is a constructor here in our controller and now we want to use dependency injection again we want to inject the data context and now to do that we enter the type data context again something actually for a global using i really like this so let's do that real quick we've already got it in our program cs there it is so let's just add the global keyword save it go back and there it is isn't that great and now we've got for instance the name context suggested here so let's use this one and now the interesting thing is we have to create and assign the field context but what visual studio is doing here now this is a private read-only field we've got the this keyword and i really don't like this usually i and a lot of other developers i think use the underscore here but if you do not want to do this manually we can also configure visual studio to do it like that without this keyboard so let's first remove this and now to configure visual studio we go to tools and then options then the text editor there it is let's open this then we go to d-sharp then code style and then naming and in here now what we can do is we can specify a new naming styles so we go to manage and naming styles we add a new one and in here now well first we can name it probably something like that underscore and then field name and the required prefix this is the only thing we have to enter here is the underscore and we change that to camel case name and we've got our new naming style and after that we have to add this naming style here and what we want to do is we want to use private or internal fields and then we use the field name here as a suggestion like that and that's everything again manage naming styles add the field name you can always edit edit it afterwards add this thing here and then add a new entry here private for private or internal fields and then use this new field name thing for suggestions now hit ok and now when i do this again with control and then period or you use the light bulb now we see create an assign field context and there is the underscore so this is just a side note i like to do it that way maybe it helps you as well and now we've got our data context and now to get the the the products from our data context well we have to access it of course and we do that with our products oh wait you see now we've got an asynchronous call underscore context and now we can simply access our products table with products and then we turn this into a list like that and then in the end we return okay products great that's it and now let's start our application again and have a look here we are we make our product call of course there's nothing different now but when we go back to our database and make our creative test again and simply add the one here hit return now we reload the application again it's making the call and here we see the change isn't that great so this already worked we've got our walking skeleton and now the the very last thing i want to do is we'll create a github repository so you can see the code of course and also store your own code if you want to github so let's do that next now to create our repository our git repository maybe also using github we go to add to source control pretty simple we use git and then if you're already logged in to github then visual studio knows this and it will choose your account for the owner you see the repository name name of the repository on github i think this is fine because the project is also called blazer e-commerce we've got the local path here for now i'd set this to private because i'm still recording but of course when i'm done recording with the complete online course i will set this to public so that you will have access and for instance can copy and paste all the products and the variants and the categories for the seating so you really don't have to type this in manually and this then will be the url so maybe you write this down github.com patrick god forward slash blazer e-commerce and i would say let's create and push this thing all right and when this is done you see our master branch here you see the github repo and now we can drag our changes and then commit our stuff publish it and so on let's have a look at the history here and now we see the local history add get ignore and get attributes and add project files well with that we added some more than just the first project files we've got our model and so on but i think this is a good moment now in this course or in creating this application we've got our walking skeleton so now we've got also our github repository and i'd say let's sum up what we did congratulations you got your walking skeleton now meaning we've got the blazer web assembly client this thing here with already a new component which is the product list that will display our products and then we've got our server project with a web api and already a product controller that you have created and this product controller is accessing the data context or the database our sql server express database with the products table you used code first migrations to well create the database create the product table and also already seed the data as you can see here in the data context file we created the product model of course so lots of stuff was happening here and this is the absolute foundation for our application here now so we've got the client again i know i'm repeating this but this is very important we've got the client we call the server and the server gets the data from the database and returns it all the way back to the client great so this works we pushed it to github and the next thing now in the next section we will add and use best practices because what i already mentioned is you see here and you also see it here in the default uh example that this controller has a bit more logic into it for instance it returns or it creates random data now this product controller here only accesses the context but even this should not happen actually the product controller should call a product service which is then accessing the data context and then returning the data so the controller should only really forward the request from the client to the service to the product service that we will create in the in the next section and then the service it's returning the data we will also add a new class so-called service response that we can use with generics so that we can return more data so bit stuff is happening in the next section and we will call this best practices so i hope you're still with me enjoy the next section now all right welcome to the best practices section now if you skip the summary of the last section or you did not pay attention let me repeat this one more time if you paid attention then you can skip to the next lecture but i really want to emphasize here that there are some practices we should use in our application one thing is the controller we don't want to use so-called fat controllers we want to use thin controllers controllers that are well in essence kind of stupid they just want to receive the request from the client and then call a service that is doing the whole logic the whole magic and then returning this data to the controller and so on so this is one thing we want to do and the other thing is we can use a specific class to return the data and this is what we will do in the next lecture we will not return the list of products directly we create a service response that will also have two more properties that will tell the client what is actually going on what was the call successful for instance successful for instance of course there are return types we're using okay here in this case and we can use bad request for for not found and so on to tell the client that something is happening but what about a message for instance we could do that as well with returning a 404 directly and add a message here but maybe there are other situations where we just need a bit more flexibility and this is where the service response comes in so service response and services this is what we will do here in this section and the very first thing now is implementing a service response with generics all right now to add the service response or to implement it we add a new class in our shared project here so right click add and then class and we call this thing service response now this is a public class and we also add the generic type here because we want to use generics and this is also the very first property here of type t let's make this nullable and we call this data then the next thing already is a flag here success and by default we set this to true and the last thing now is a string the message which is an empty string by default so we've got the service response with the data which will be the list of products now in this example then the success flag and then also the message so with that now we also want to make a change to the product controller because instead of the list of the products we now want to return the wrapper object here so the service response with a list of products and for that we also create a new response here this is a new service response with a list of products and we use the object initializer here to simply set the data to our products and we format this and then we return this response here and then we're done and now with that we have to change the client as well because here we still expect a list of products and this is simply wrong so let's add the service response object here with the list of products maybe we put this in a new line and in the end we set the products to result data and also add a null check here so the warning disappears like that and then we get an error but this is funny because i get this from time to time with visual studio 2022 and dot net six it's telling us you can read it following error occurred following error occurred this might have corrupted the running process i don't see the error actually so i can go to edit or i can keep editing or i say i stop the application let's keep editing i saved everything already and let's go to our application here we see in fact we see an error and when we go up here we see something is wrong unhandled exception okay hot reloads last time i did this i got a json serialization error now what happens if you just restart the application all of a sudden we get no error any more so and when we have a look at the network tab we see the correct call and we also see our wrap object now the service response instead of the three books directly we first have the data property with the three books and then the message and the success so when you get this strange pop-up that an error occurred and hot reloading does not work then please consider restarting the application might be the case that actually everything went fine and well you just have to restart your application let me do it again just to be sure yeah it loads if we've got our call and the console does not report any error okay so this is the service response and the in the next lecture we add a product service so now we will move the logic from the product controller in the server project to a product service again we do that instead of using fed controllers and we do depend we use dependency injection to do that we did this already with the data context for instance and now we will do that with our own classes our own services and we also have to register them in now with 6 the program cs but let's do that one step after another first thing i want to do is add a new folder for all our upcoming services so let's call this services and then we add another folder that we call product service and this is something we will do a lot we will create a folder and then in here we will first add an interface we call this i product service public interface i product service and then we will add the implementation class which is called product service in this case and this thing implements the i product service already suggested by intellicode here we save this and then we can already register this thing so in the program cs let's edit down here maybe builder services and then add scoped at the scoped service of the type specified in server side to the specified isos collection let's also add transient transient service and also add singleton for a singleton but what we want to use is add scopes with i product service and then we tell our application with that registration here as soon as a controller or class anything wants to inject the i product service we want to use the product service class for the implementation and now of course we have to add another using directive and since we will use the product service more often again let's add a global using here now with that we can again use dependency injection the great thing is now as soon as we inject the product service we will get the product service implementations now with dependency injection what we can do is maybe we want to change something or test something whatever instead of changing the code in the product service directly we can create another implementation class for instance the product service to and then we don't have to change the logic in the controllers or wherever we inject the i product service we just want to test this new product service implementation class we can do something like that so meaning as soon as the i product service is injected please use this class then as implementation and then we get the new logic the other code that we just wanted to test or we got i don't know just another version and then we can use this class instead of instead of the old one so this is one advantage of dependency injection of course it's also there for unit testing makes it a lot easier it's just great so i hope uh this helps and you understand why you're doing this and now in here we wanna of course inject the i product service instead of the data context because the product service will now do exactly that injecting the data context and then the next step would be to inject the product service in the product controller but first of course the interface this is the way we do this first we define a new method and here now it returns a task with a service response and then i like the suggestions really but here now it's a list of products and this method is called get products async it's a good name why not use it and with that then we implement our interface here automatically so this is how we get our new method at the async keyword here and then also add the constructor so again cdor and here now we inject the data contexts context and we add our private fields and now in here we say response is a new service response with a list of products that's correct and the data now let's do it in one line is a weight context products to list async and in the end we return the response all right and now regarding the controller we do not inject the data context anymore again instead we now inject the i product service call this product service and define this field now and we can remove the context all right and now what we do we simply call our new service and set this to the result object here so result is a weight product service get products async and in the end we return the results and we get some build errors let's see well this should be easy let's save this again everything is saved and does our application still work let's reload this yep seems so okay let's go over this real quick again we added our product service folder we add an interface where we define our methods this is important because only with that way the product controller can use these methods of course and now in the product service implementation class we now inject the data context same what we did in the product controller earlier and then we simply implement the get products async method and then the product controller is now pretty thin and stupid but let's not call it stupid really it's great what it does so we have this method here you know what let's give this another name get products this name is better and yeah we've got our constructor still but instead of the data context we now inject the i product service and here we only access the product service and in essence pass the request through to the service get the result and then return the result this is everything the controller should do really just passing through the requests and that's it all right let's save this again and i think it's already done sometimes it's so freaking fast and sometimes we see so strange errors all right so this is in essence already the product service on the server project and now we do something very similar on the client so on the client we also add a product service and in essence we also add first our folder at new folder services and then also product service like that and again we create an interface and also an implementation class so right click add new item it's an interface i product service and there it is and then the implementation class product service and this one implements the i product service interface and now in here we define not only the methods but also the products list itself because now we will store the products in the service and the product list components as well as probably other components access the products from the service you see what we do here we store the products in the service so we don't have to make cards in other components it's a better architecture in essence where several components only access the services and the products are stored only on one place and not every single component has to get the product itself so let's do it that way we got our list of products and we call this products and then well this is a property so let's add our getter and setter and then we say task get products for our methods and we don't want to do this in our implementation class of course we want to do that in the interface so here we are we don't know the product type here so this does not work for our code files so but we can what we can do is again use global using directives so let's add it here global using [Music] laser ecommerce shared save this and then when we go back here we get our product yeah of course it does not implement all this stuff but we do this next so again when this was too fast we added the global using here i saved everything that's why we got the error because we already defined the product's property here and the method but we did not implement it here so let's do that next we implement this automatically when it lets us alright okay we remove the exception like that by default we set this to a new list of products and now regarding our method here get products we want to make our http call so similar to the product list component we want to use something like that but we first have to inject the http client so you see is pretty similar now again we need a constructor here and now we inject the http client here as well let's call it http like that we add the private fields and now in here we say our results is a weight http get from [Music] get from json with a service response here's another using directive we can actually add globally so let's do that real quick because we will use this really often all right actually it should work now [Music] save this maybe okay service response and then list of products and again this string here is api and then products again let's put this in a new line okay [Music] and now instead of returning something we say our products here are now result in data and of course this could be now so let's just copy the null check real quick there it is and at the semicolon okay and now to be able to use this thing we also have to register it again pretty similar to the server project we say builder services at scoped and then i product service product service again we add the using directive here and let's make this global all right and with that now we registered this thing and next we have to use it in the product list component to make everything complete so let's do that now now before we make the change here and inject the product service the client product service we add a new using directive here so that we make the product service globally available for every component and we do that with add using blazer e-commerce client services product service this is now the using directive for our product service and every component now knows this and here instead of injecting the http client we now inject the i product service so that'll be i product service we call this product service and then down here we only call awaits product service get products okay get some errors here let's just close this and there's one more thing i'd like to do because it could be the case that the products are null or the list is empty and in this case let's show the user a little message like loading products for instance we don't know what this is but let's just continue with our implementations if now the product service products are now or the product service products count is zero and then in this case we show something like loading products and if everything is okay we've got our products then we display our unordered list now one more thing is missing do you know what yep the products here we cannot access these products of course we want to use our product service products now and then we can remove these products so the code block now is pretty small and the products are stored in the product service again let's close this but i have a feeling that i have to restart visual studio but let's see let's reload this thing again and you can see we're making the product call we got our products and in essence nothing has changed for the user but under the hood a lot has been changed everything still works so let's sum up real quick what we did in this section congrats now we've got best practices maybe it was a bit complicated maybe a bit confusing but let's go over it real quick we started with our shared project in essence we created this service response class with these three properties data success and message the data will be well the data with a generic type and then also we use the success message here to tell the client if everything went well or not and we can also add a message that can display something to the user for instance and with that then we added a product service to the server project first here's the interface and then also the product service short note on that this is an asynchronous method and intellicode suggested to use the async term here this is as many things totally up to you i don't use this usually because all my methods or my web api methods are well mostly they are asynchronous anyway so it's not really necessary to use this name like that on the client we also did not use it play around with that i'd say test it with intellicode so please bear with me if this is not consistent now in this course that's the reason why just because visual studio 2022 and intellicode does some magic here so we've got our interface and then we implemented the interface here now the product service injects the data context and then we have to register this thing here and we do this with builder services add scopes and then the i product service and the product service as you can see by the way i really have to restart visual studio so if you have these issues with with visual studio 2022 as well please tell me that would be really interesting to know so we registered the service and then with the product controller we are able to inject the product service and now this logic here well there's not much logic we just you're just passing through the requests great and then in essence we did something similar here now we've got on the client also a product service the interface and the implementation class but now here in the implementation class we also have the product of the products property which is then accessed by the product list so we do not store the products here in the component itself we access the products from the product service directly okay and now one more test this works and to show you the message we can activate the throttling actually maybe we see yeah we see it here really short for really short time but when we add fast 3g here or activate fast3g reload this again then we see loading products nice so in this case the product list count was zero we see this little message here good information for the user and then the products are loading great so this was the best practices section and next up we will do lots of stuff with our products so let's go alright welcome to this new section where everything is about or all is about the products blazer web assembly in action here we'll see a lot of blazer web assembly action here we will add product details so meaning we see the list here of products but we want to click them of course now nothing is happening but when we're done with that we are able to see the product details apart from that we will also add some categories add them to the menu here and then add some variants so when we have a look at the hitchhiker's guide to the galaxy for instance maybe we do not buy the paper bag or the hard cover or whatever we also want to buy an ebook maybe or an audio book whatever so then we will add product variants with product types that will enable the user to do the exactly that get the product in another way or in another type while doing that we will use select boxes for instance so other html components the same with the search so here in the top bar we will add a product search with an input text field and also a data list so a search that will suggest some words some terms the user wants to enter and also it will suggest final products in essence we will add featured project products we will add pagination we will use another layout then so the sidebar will be removed and we will only see top menus here and then of course when we access the the products here we want to buy them so we will implement a card where the user can put the products he or she wants to buy we will be able to change the quantity update them and so on so lots of stuff we will do here but what we will not do is authentication this is then done in the next section and with authentication we will then store everything the user wants to buy for instance in the database but for now lots of stuff will be changed here in the client application all right and the first thing we want to do is finally showing the details of a product so we've got here our product list component which is a shared component but the product details now will be a new page but still in essence eraser component so right click the pages folder here go to add and then eraser component and we call this now product details there it is and and of course we want to rebuild and deploy the changes and since this is a new page we also add the page directive here and the url now will be products and then we already use a page parameter and we add this parameter in curly braces and we can also use a constraint here meaning we want this id of a product to be an integer now what i can also do here and say we will need the i product service to get the product details so let's already inject it with add injects i product service we call this product service the title can here be removed for now and then let's go to the code block first very first thing i want to add here is the current product because we want to access the product in a minute in the html and by default or in the beginning this thing is a null and then we've got our integer parameter the id and since this is a parameter we also use the parameter attribute here and then we say public and id it is a property so i could have used the built-in snippet here and after that we will use now another life cycle method still know this right and this time it is not on initialized async it is on parameters set async because we want to set the parameter the id so protected overwrite async task oh there it was already on parameters set async and what we will do here for now we will not make a web service call here we just say product is product service products finds and then we want to get the product we do this with a little lambda expression here where the id of the product equals the given id now when we do it that way and fix this little typo here now when we do it like that i have to mention that this only works when we load the products before we access the product details because of course when we go to the index page we will load the products here and we've got them the list of our products and only then we can actually find them so when we first go to the index page and then access the details it'll work but if we reload the page then or directly access this route here product and then the id it won't work because the products list is empty now let's fix this thing here real quick and then the warnings are gone and now let's add some html so first if our product here is now we tell the user that we're currently loading the products and if we got a product we will display it with some html here again let's add some divs and stuff and also some css classes so first div with the class in media and then again we display the image with a media image wrapper here and write margin two then the image class will be media image and the source here now is of course the image url of our products you can also add the text product title like that and after that we add a diff with the media body class and here now we give this title nh2 [Music] or we use the h2 tag here for the title add product title and then we add the description and product description and in the end again the price with also the price class all right now the price class will be the same as the one of the product lists so actually let's just move it to the global style sheet here it is we remove it here and add it here maybe okay and then similar to the product list we have to add another css file and we use css isolation again here so add a new item in our pages folder now again this is a css file and the name must be correct so product details razer css there it is and now again we can add some classes so first the media image with a maximum height of 500 pixels this time also a maximum width of 500 pixels we give this a border or radius of 6 pixels margin would be 0 then 10 pixels 10 10. like that then the media image wrapper maximum width of 500 pixels maximum height 500 pixels and the text align should be center and then already our responsive stuff max width would be 10 23.98 pixels and in this case we say the media image gets a max width of 300 pixels and the media image wrapper gets the width of a hundred percent and the height then is set to auto all right and now the last thing is well fixing the url actually because in our product list here we have to change the href so it's not the hash sign anymore no it's a proper route products and then at product id and we do the same down here save that and then let's test that already product application should be rebuilt let's try the hitchhiker's guide to the galaxy and there it is something is wrong with the image so let's have a quick look yeah the ad was missing here let's do that whoa this is this is the great stuff of the hot reloading this now worked pretty well very fast and we got our big image and the same works of course for ready player one the scrolling is done automatically like i really like that that's really really nice okay so we've got our product details and when we reload the application now as you can see it says loading product which is not correct of course so we have to fix that next meaning receiving a single product from the server so we made our changes to the client with the new product detailed component adding some code here we've got our product variable our parameter here with the id and now it's important to use this id here to make a call to the server and get the single product from the server so that this route really works when we access it directly now to do that of course we have to make a change to our i product service interface we add a new method here and this time it returns a service response with a single product and we use the suggestion here again get product async with a product id but this thing is an integer now let's implement this method already right here we implement the interface automatically there is our new method we add the async keyword and now first let's define our service response it is an empty response for now so new service response products that's correct and then we say var products is await context products and then find async and then we add the product id here now if the product is then null we say response success is false and we can also add a message like sorry but this product does not exist something like that and in the else case we say response data is the product and in the end we return our response so again we initialize the service response we get the product from the database with find async and give this method the product id so it is really looking for the entity for the product that has the given id if it doesn't find one then the result is null and in this case we set the success flag to false and also give this thing a message like sorry but this product does not exist but everything if everything went right we set the data to the actual product and return this with our service response and now we have to add a new controller method here which is also a get method but this time we will add the id to our method and to do that let's copy this here we return now a list not a list of products of course just a service response with one product and we can also call this method here get a product with still the product id like that and to make use of this parameter here we have to add a route actually so in essence you can do it like that http get and then also add the route attribute here and then this would look like that so again a parameter is done in curly braces but we can combine these two attributes here http get and the route so let's remove the route attribute and simply add the parentheses here and then also the parameter and curly braces which is the product id then so the name product id should be the same as this one here so this is our parameter and with that we access our get product async method and give this thing the product id and in the end we just return the result so that's already it we did not implement it in the client for now but we can still test it with either the address bar of course or swagger again so let's go to maybe subwegger here we see our method already we see an example value and now let's try this and add one as an id for instance hit execute and there's the hitchhiker's guide to the galaxy let's test it one more time id2 ready player one so this works just fine and now let's finish this implementation in the client now similar to the server we have to make changes to the product service on the client of course and first we add another method in the interface this time it also returns a task but also with a service response with a product here and we call this method get a product maybe so it's similar to our get a products method and we add the parameter again so int product id so this is our method then in the interface you get a build error that says yeah the product service does not provide this method of course now visual studio is faster than my implementations here in this case so let's implement the interface automatically and already add the async keyword and now the body of this method looks pretty similar to the get products method here we make another http call so let's start with our result is a weight and then http get from json async again that's correct we wanna get a product here but with a service response as our wrapper objects and now regarding the url we use the dollar a character here because we want to add a parameter to this string and the string then is api products and then again in curly braces product id like that and in the end again we return the result all right now maybe you're wondering why we really return the service response this time well you will see why in a minute and the product details now we will use this method from the product service instead of this find method here and then we will check for the success flag and if the success flag is then set to false we will display a message and otherwise we will will simply display the product so the very first thing now we have to add in the code block is the or a new message variable so private string message and then again we use this new method here so product service and then get products with the id this is an asynchronous method so we also use the await keyword here and we cannot set the product directly of course we first have to set a new result here now in the beginning let's set the message to loading a product so the stuff we entered up here and instead of this fixed and hard coded text now we display our message and now we decide how this message should look so if the result was not successful then we say the message is result message and otherwise we say finally our product is result data all right of course this message here could be now so let's set this to string empty like that and then the warning should disappear all right now it did we reloaded the application so let's test that already we see the hitchhiker's guide to the galaxy for instance we can click on it and we really get it and here you already see the call so we really get the data from our database in this case and now we can also reload the page and it still works but what happens if we enter an id that is not there [Music] we get the proper message sorry but this product does not exist perfect so this works just fine and next we introduce categories now one more thing before we continue with the categories i had to make this little fix already in the last section again we've got bootstrap five now with uh net six so as you can see here again we've got bootstrap version five and with dot net with net five we got bootstrap version four and in this case uh there was or there were some css classes available that are not any more and here already we fixed this we added the media class in the media body class and now actually since we also want to use these two here in the product details you can see it here we've got media and media body let's just put them here in the app css because now let me rebuild it wait a sec when we don't have these classes save this it looks like that but with these classes now in the product details don't know why hot reloading is not working here this is really interesting but when we reload the app by ourselves or the page here then we see now this looks just fine and while we are already added as you can see now regarding the responsiveness this shouldn't really look like that we also want to put this div at the bottom or below the image so let's fix this as well real quick we go back to our first product list actually because here we see the media class with flex direction column in case we have a resolution resolution below 10 24. now of course we could move that to the app css as well or let's do it just real quick we copy and paste it here into the product details razer save it and now the hot reload already did its magic now this looks as it actually should okay so this works now and now let's continue with the categories all right now for our categories the very first thing we need is the model of course so let's add another class to our shared projects there we are and we call this thing category here we are let's make this public of course we would have to restart the app to make the changes work but we have to write some code first now the category is actually pretty small the first thing we need is again an id then we add a name which by default is string empty and after that we also add a url also string empty in this case now the url is there for instance if we got a name like video games that has a space in between then we will use the url with a dash in it so video dash games for instance and that we can use to then access the actual page and only see products by the specific category all right now with that we've got our category model already but we want to add a relationship to the product so a product now always has a category and to do that simply we add here our category call it a category like that and then what we also want to add is actually the category id so category id like that and we can make this actually nullable all right we saved it and now why the category id well in essence this would not be really unnecessary because entity framework would add a field called categories id then i think automatically and it will well work out the rate the relationship by itself and we developers in the code we can always include the category to the product so that we can see everything of this category but if we want to well specify the id name by ourselves for instance entity framework is calling this thing categories id but we want to set this to category id for whatever reason then we can do it that way and entity framework will know okay this is the foreign key now in this case for the product and the other thing is when we want to seed some data we also need this property so that we can set the category id for the product and this is what we will do in the next lecture meaning next we seed some categories and also add a new migration so again for seeding data and adding a new migration we go to the data context and for the categories let's do that manually here again we say model builder model builder entity and now it's our category entity and here again we say has data and in here now we say category new category and this category gets the id 1 then the name should be books in this case and the url is in this case books with a lowercase b let's format this already and now let's just copy it so that we get three categories total for now remove the comma here format this again okay and now the next one of course id2 should be yeah movies name would be movies and now here id3 and as i said i want to add some video games to our application to our shop and this then would be the proper url and now regarding the products here well we've got only three products and all of them are books so now we can set the category id 2-1 for every single one of them because every single one is a book and don't forget the comma here like that okay so we've got our categories seeded them we've got our products and edit the category id and now you remember it we want to add our categories to the database and that's why we add another db set here of type category and we call this thing now categories that's it save everything and now i hope we won't get any errors because then we can run our migration so we are in the server directory let's have a look yep blazer e-commerce server and now we add we add a new migration with dot net ef migrations and categories for instance let's see i think because the app is still running we have to close it first and try that again yep now it worked okay great so we've got a new migrations file here as you can see we get this new column category id in our products table we get this new categories table here with id name and url we got the primary key id we insert some data and what else we got that's what i was looking for we got the foreign key here meaning that products now have a relationship two or products and categories have a relationship so every product now can have one single category and this is done with the category id here perfect so this is everything we want and now let's update the database with net ef database updates lots of stuff is happening and this was done and now let's have a look in the sql server management studio real quick we connect to our server and we open our blazer ecommerce database and there it is this is our categories table we got the columns yep and when we have a look we should see our three categories great and now regarding the products when we have a look here we see our category id nice all right but now we've got more categories than just books so i would say we add more products to our application all right now to seed more products i really don't want to do this manually now and i actually don't want you to do this manually this is tedious work so we really don't have to do this so please go to the github repository and just copy and paste a little code this time or don't i really don't make this often that you have to copy code actually i think this is the very first time in any of my online courses but please go to patrick god that's me and then just blazer ecommerce not prep it is in your case blazer ecommerce like that but as you can see by recording this well the products have not been seeded yet the other products so after this lecture i will commit this and push this and then you should have this available in the github repository so please go to patrick blazer e-commerce and then you go to the blazer e-commerce folder then server data data context and then we go to the history and i will push this with you together yeah i will also maybe call this commit seeding more products and then you see it already here this is the change in the on model creating a method and in here now this product here is the id 3 and here it starts with id4 and so on so let's just copy it from here so that we get some more products this should be it id 11 yep the super nintendo entertainment system well let's just try it now we go back to our data context we add a comma here and paste this and now something is wrong of course let's see okay there's a curly brace missing yeah that's everything that was missing let's also format this so put this here and now this should work so we've got our first three products these are the books then we've got some movies the matrix back to the future toy story and then games half-life 2 diablo 2 day of the 10 tackle and then two consoles the old xbox and the snes that's great you see the category id is set here we've got the price and so on so this should be it now let's add another migration with dotnet ef my migrations and and then seed more products all right let's have a quick look there it is it's just inserting some here it is it's inserting more data that's nice so let's update the database with net ef database update all right quick look at sql server management studio we simply reload this sql here for the products and there are our products all right this works now real quick let's push this got some changes already anyways and i'd say we call this product details categories and seeding more products push this and then of course we've got one out going so we can or commit this and now we can push it there we are and now let's have a quick look again at the repository so as i said we just go to blazer ecommerce there it is now and again in your case you can go through the folders here first and then to data and data context and here in the history you see this commit now and here are all the products actually with the new ids and here the the rest of the products okay so please do that and now when we start this app and test it real quick we go to swagger and the index.html we've got our product method here let's try it out at execute and here are all our products from the database okay great and next we should i would say receive the categories from the server okay now to get the categories from our database well we have to do something that is pretty similar to our product service here already we are in the server project of course and now in the services folder here we create a new folder for our category service so right click add new folder category service there it is and now again we have to create an interface and an implementation class first for our dependency injection so add a new item this is an interface we call this i category service and also the implementation class category service and this thing implements the i category service all right now we can already register this thing so similar to the i product service and product service here again we can just copy this line in the program cs edit here a new one with the category service and implementation class is the category service and again similar to the product service we copy this and use the magic of the global using directive now for our category service so it is available everywhere for instance when we create the controller in a minute then we can make use of this global using directive here okay but first now the interface of the eye category service here already we create a method called get categories and if intellicode again suggests to call it get categories async then we will do that but first the return type is a task returning a service response with a list of categories calling it get all okay this is interesting that i want to call this one get categories it's not suggesting get categories async this time i don't know why but please let's just stick with it i mentioned it so i hope you bear with me and it's not a bad i already don't think it's it's so bad that the product methods here are called get products async for instance in the category methods not again it's it's always it's up to you and since we are using asynchronous methods almost all the time in this course i think we can we can just stitch the async term at the end and only call this method for instance you get categories and later maybe when we refactor our code we can remove the async for these methods here on the product servers anyways we've got our get categories method here and now in here we want to implement this thing let's do that automatically here's our get categories method and the first thing as always we add our async keyword and now let's implement this the first thing again is a constructor with ctor hit tab twice and then we've got our constructor and again we inject our data context call it context and create and assign the field underscore context so that we get access to our categories and now in here we get our categories with a weight context and this is amazing categories async categories to list async this is exactly what you want and now here we return a new service response with a list of categories of course and here we now set the data to the categories great and this is how fast you can implement your logic your code with the new intelli code so although i think visual studio 2022 is still a bit buggy this feature is amazing all right and now with that we can create our controller so in the controllers folder we right click add a new controller and again it is an empty api controller click add and we call this one now you guessed it category controller all right in here now again we want to create a constructor and we inject the i category service maybe also call it category service again i know i'm repeating this but we do not need the using directive here and i just think this is great and here we create and assign the field one little comment still i know i know that some of you will say well it is hard to maintain the code when we use the global using directive maybe you're right maybe not i don't know i don't have a lot of experience with that and well you know it's really new so i cannot really say this but maybe if you have some more experience in the near future then please please tell me tell us tell the community maybe write a comment in the q a section and i think this that i think it would be really interesting to know this all right now we've got our constructor here and now we implement our web service call first it's again an http get method and then we add public async task and then action result again because we want to test this and see the type in swagger so we use the action result return type with a service response and then here a list of categories with a lot of angle brackets and we call this thing get catagories like that and now in the body we just type intellicode is really funny but it should be the result a weight category service get categories that's correct and then we return okay result nice all right this is everything and now let's start the app i have to start it again it's another day so we started without debugging and then when the application has been loaded we go to swagger and test this real quick of course we could also use the address bar up to you what you prefer but here now is our app for instance if you want to use the address bar just type api and then a category here they are and regarding swagger we say sweger index html we see it already here this is the call and this is our type this is great also category list service response this is the thing we get from our controller method and now up here this is the actual method we see the example value and now let's try this thing and here are our categories perfect so this works and now the next step is to add a category service to our client so back to our blazer web assembly client and again we do something really really similar we create a new folder category service and of course in the beginning of creating all these services we do this a lot it's kind of no it is a repetitive work really but well if you want to use better practices maybe then you have to do it and afterwards you will thank me and yourself that you did it because maintaining and reading all this may be easier than if you would use the components regarding to the blazer client or only the controllers regarding to the server project so let's just do this let's create the new interface again i category service and also the implementation class category service implementing the i category service and let's again also already register this thing so in here we copy this paste it we've got our i category service same here and again the using directive for the category service let's use this service here all right and also here in the client we real quick go to the imports raiser file and also import the category service for our components all right and now again similar to the product service we've got our products here and i want to do the same in the i category service so that the components will access the categories from the service so it is a property meaning we can use our prop built-in snippets although we remove the access modifier here so this is a list of categories we call this categories and then we add another method task get catagories yeah i think this is correct it's good categories all right again notice we do not return the categories here we will set the categories within this method but of course we will make the http call so let's implement this here and again we implement the interface we remove the exception [Music] and this thing here right we can add the async keyword and again we need a constructor which injects the http client so ctor there it is we inject the http client call this http and create the fields all right and now in our get a categories method we say our response is awaits http get from json async this time it's a service response with a list of categories one more angle bracket yep and the url now is api category it doesn't matter if you use uppercase or lowercase but this should be it and after that we set our categories to response data if of course they are not null so let's also add the null check here if response is not null and also the response data is not now then we set the categories and the last thing let's also initialize the categories here as a new category list okay so we've got that and the next thing now is of course we want to display the categories here and we want to display them in the nav menu so let's implement that next all right now to display the categories in the nav menu of course we go to the nav menu eraser component here and as you can see the only thing here in the code block is these little variables the toggle left menu method and so on but now we want to get the categories here and for that we use the category service and to be able to do that we have to inject the service first so at the top of the nav menu razer component we add add injects i category service we call this category service and then now down here we add another lifecycle method this would be now the uninitialized method so protect it override async make sure to write this properly now here on initialized async that's the one again we have to add the async keyword here and now we simply call awaits category service and then get categories and remove this thing here and i think i have to restart visual studio again and by the way i had to restart it as well before i recording before i started recording this lecture now but anyways we've got the category service here it's injected we make the call we can already test this of course and have a look at the network tab yes we have to rebuild the application that's correct so let's do that and then in our browser now we have a look at the network tab let's reload this page again and here we already make this call okay this is nice this works and now just ignore these little information thingies here but let's focus now here on the actual menu so we've got the home menu button or the link the console and the fetch data first thing i want to do is remove the icon save this and how to reload not working now what if we reload this now it's telling me that we got some errors okay you know what i'm restarting visual studio and then we have a look again okay we are back i'm not starting the application now so let's just continue implementing this all right and now let's focus on the actual menu so we've got the home link here and now i want to simply create a for each which it goes through all the categories now with for each var category in our category service and then categories collection and there it is and in here now we just copy this stuff here or cut it paste it down here we remove the fetch data and now here also i remove the icon i for the ahref now use add category url and then here the category name like that save everything and now let's start the app again and i'm really thinking about disabling the hot reload feature but still this is now our menu isn't that great not that much but it took lots of work with visual studio 2022 no sorry still like it of course but yeah sometimes you know there are some little bugs anyways we've got the home link we've got books movies and video games now of course we can go there but nothing is happening it says sorry there's nothing at this address well where's this coming from let's have a look what about the appraiser oh yeah really if the url is not found then we get this little text here that there is nothing at this address okay so this is nice but or not so nice we've got our menu now but of course we want to get the correct products now so let's implement that next all right now to get our products by category on the server we have to add another method to the i product service interface so again in our server project this one here we go to the i product service interface and then maybe we can copy this line here because we also get a list of products but now we call this method get products by category and we add an argument string category url so get products by a category returning a list of products with the service response of course and the argument is the category url and now let's implement that here in our implementation class and there it is we add the async keyword all right and now here we can already initialize our servers response so this is a new response make sure to write this properly so new service response with a list of products and we use the object initializer here already and can set the data to a weight context products and then we want to filter these products by the category url so what we can do is we can use the where function here and this where function gets a little lambda expression so we want to filter the products where or get the products where the product category and then its url to lower so that this thing is case insensitive equals the given category url also to lower just to make sure and then we turn this into a list async like that and in the end we return the response so again we use this little filter method here where where we then filter the products where we can then filter the products by any property and in our case it's the url of the category all right and now let's just save this by the way maybe you've already seen it i again had to restart visual studio so sometimes i will just restart it and not show you this because i think this is just not exciting for you and maybe it's getting on your nerves so if i have any problems with visual studio 2022 then might be the case that i restarted you won't see it but i then have to restart the application so if you're wondering wait a sec a second ago or in the last lecture the application was running why does this guy have to restart the app again well maybe there was something going on with visual studio or the hotly or the hot reload did not really work anyways we've got our function here and now the last step is the product controller where we add another gets method so http gets and now the url is category and then our category url as a parameter like that so the complete route then would be api then product and then category and then the category rail we'll see this in a second let's maybe just copy this thing here because we get a list of products and we call this again get products by a category and we add the string here so string category url and finally we just call get products by category with the category url and this should be it then and now let's start the app all right there it is now the client would still not work of course because we haven't changed it yet but what we can do is we can test this with swagger here's our method so category url let's try it and for instance let's add books here hit execute and we get our books which i just got to the galaxy ready player 1 and 1984 then we've also got the movies this works and also the video games like that what about music for instance nothing there an empty array of products okay this is exactly what we want and now let's make a change to the client okay now regarding the client this is a bit different so first regarding the i product service interface here what we will do is we will not add another method we will actually change our get products method and in here now we will say we add a new argument the category url and by default we will set this to null so with that we will then just decide okay if we have no category url given then we will display all the products or receive all the products from the request all the products from the server and otherwise of course we will make a call with the given category url and another thing we want to add is now actually an event because the thing is when we switch the categories the product list component won't call the uninitialized method so the products won't be refreshed so we do not really see the change the component does not know that something has been changed but to tell the component that something has been changed we will use an event and with that event we will also make use of the lifecycle method on parameters set so let's do this now and you will see what i mean by all that along the way so first the event event action and then let's call this products changed so we will invoke this event whenever the products list will change and to make this warning here go away let's just turn this into a nullable string and then there is no warning anymore okay let's save this one yeah there are errors i know this and i think that visual studio is not happy with all the other implementations now but let's just keep doing this we implement the interface we've got our our event here and now here the get products method of course we did not have to write a new method we just changed this one so now we've got our parameter here or the argument and what we now do is we will use the tenari operator to check if the category rail is null so result category url equals null and if so we still use this call here but if not so we had the colon here and then we make the other call so if not we make the call to api product and then category and then the category url and to make this work we add the dollar character here all right so that's that and again in the end we invoke our event so product changed invoke and now with that every component that subscribed to this event will then know hey something has been changed so let's do something and what this something is i will show you now so we've got the product service covered and now let's go to our index page actually because this is where we will use the product list component so in our index razer component here there's not much as you can see but there now is another option so we have this route and now we can also add another route with a parameter and this would simply be the category url like that we've got our product list and now in here we will add the lifecycle method so we add a code block first all right then we need the category l of course as parameter so prop prop now this is a string the category url and we add our parameter attributes and now down here we add the lifecycle method protected overrides async and then on parameters set async and i don't know why the async keyword is disappearing all the time but that's the one now here we set this to now make this nullable then the warning is gone and here now we say await product service get oh yeah of course we have to inject the product service first so good that you told me this inject i product service product service and now product service gets products and then the category url okay and now one thing is still missing in this case we use the on-parameter set async method because of our category url parameter this is great but still no components subscribe to the actual event and this should be done by the product list component and there it is but first let's test this now keep in mind i made the invoke call so what is happening now let's just start the application and again when we go to our product service here you see the invoke call and let's see if the app is running somewhere there it is let's see the loading product we get an error and this is actually what i expected there it is object reference not set to an instance of an object something is wrong here product service line 30 let's have a look yeah this is actually what we did so we invoked this event but no components subscribed to this event and this is crucial actually because as long as no component is subscribing to this we get this error now when we comment this out and reload the application the error is actually gone this is nice what if i go to books now movies video games nothing changes right so let's go to movies and reloads nothing is happening now what happens when we reload the app still we always get all the products but when i go to the network tab now go to the movies for instance or we see that the movies call was made but here nothing changes and now we have to fix that so again let's add the invoke here and now in our product list component there it is we have to add something right here so the first thing is we remove this method this is why we actually saw all the products now we don't need this anymore because now our index page is making the call but what we want to do now is actually we want to subscribe to this event so product service and then the event products changed and when this event is raised we say state has changed and you can see it here in the tooltip this thing notifies the component that its state has changed when applicable this will cause the component to be re-rendered so again this really means when this event products changed is invoked then this component will re-render itself this is not asynchronous anymore so we can use the synchronous uninitialized method and one more thing is important we also want to unsubscribe to this event on dispose for that we implement a little interface here so implements i disposable and then we add the method public void on this pose and here now we say product service products changed and then minus equals status changed and this is how we unsubscribe to this thing now let's save everything we've got an error let's see progress doesn't implement i just want to dispose yeah it's not called on dispose it's called this pose that's correct now we have to start the app again still an error yep void now let's try that okay there we are and we already see the change now everything works as expected so when we go to home we do not set a category url as you can see here also when we reload the page we get all our products and we also see the product call here so that we get all the products but regarding the books for instance we see the books call is done here this is the url category books get the books same for the movies and for the video games okay but still since this is i think a bit complicated let's recap what we did here first in the i product service interface we changed the get products method we added the nullable string category url and set this to null by default and we added the event action products changed after that regarding the implementation we say if we get a category url then or we get no category url then we make our call we did in the past api product but if we get a category url then we say api product category with the given category url and in the end we invoke the products changed event telling every component that subscribe to this event hey you have to do something then instead of calling the uninitialized async method in the product list component right here and instead of getting all the products here now the receiving part is done by the index page so in here we have a new routes with the page parameter category url we inject the product service and now in here we say when all parameters are set because it could be that we get a url then we make the actual get products call and the product list now is just reacting to that by subscribing to the products changed event meaning as soon as the products changed event has been invoked we change or we say the state has changed and this means this component is re-rendering and this is everything you wanted to do okay so i hope you got this and now what we want to do is we want to introduce product variants meaning for instance for books the user don't want to don't want to always buy the paperback for instance maybe there's an option to buy an ebook or an audio book and this is what we will implement next well what a ride so far don't you think if you really made it this far then i think now is the time to tell you that you've really got what it takes to finish the complete course so first thank you so so much for staying with me for such a long time you already did a lot in the last couple of hours and now if the whole content resonates with you i would be really happy if you head down to the video description check out the link to the course then you get a discount for the complete course and of course you can continue with this thing and finish everything and after that maybe give me some feedback some suggestions of course a product like that is never really finished so of course as with all my other courses i will add updates i will add new lectures when the next.net version is out there then i will update the course as well so yeah i think now it's the time to enroll in the course thank you very very much and additionally if you like my content here on my youtube channel i would really appreciate it of course if you like and subscribe maybe click the bell icon and i hope i see you next time take care [Music] you

Channel: Patrick God

Views: 69,975

Keywords:

Id: d8LObmppBdw

Length: 223min 22sec (13402 seconds)

Published: Tue Feb 01 2022