Blazor WASM with REST API - Step by Step

hello friends thank you for watching this video i am muhammad and i will be showing you today how to create a blazer wasm app and to connect to our to-do api which you have created previously and how to load dyna data dynamically from that api some of the topic that we'll be covering today is creating a play zoroasm app creating components adding navigation connecting to the api as well as doing some api calls please like and subscribe if you like the video before we start building our application we need to have two things the first thing that we need is the net sdk so if we're gonna download it we need to go to dotnet.microsoft.com forward slash download and we need to download the net 5.0 version the installation is very easy and straightforward the second thing that we'll need is visual studio called our ide as well once we go to the website called visualstudio.com all we need to do is click on the download for mac or download for windows button and we'll have it it's a very simple installation as well okay great once we have those ready now we need to check if the net sdk has been installed successfully so in order for us to do that we need to open our terminal and within terminal we can write dot nut dash dash version and you can see here that we have dotnet version 5.0.102 which is the latest version of once uh recording this video if you have any other version it should be fine the only issue is if you have something else like an error once you type this this means that your sdk has not been installed successfully so you need to re-download it and install it again great we'll start by defining what is a client-side blazer wasm app a client-side blazer wasn't map is an application which is running as a web assembly directly in our browser so basically the application is not running on a server the application is compiled and then is downloaded to our browser as a standalone app this will then connect our api in order for it to fetch and manipulate data so first we need to start creating our application we're going to be using the nothing new keyword to do that so from within our terminal we can type dotnet new blazer wasm we'll give it a name we'll call it that to do client and click on enter this should take roughly around few seconds okay great now we can see the application has been created successfully let's navigate to the application and now let's open it up in our editor perfect so as soon as we open it we can see that this application looks very similar to an asp.net core application it has a program it has www root so let's open the program from within the program we can also see that it's also relying on a main function it's a static function and then it's building everything from there it's taking the same approach of an asp.net core application which is good which makes it easy for us to integrate different components from different parts of asp.net so the first thing that we're gonna do is we're just gonna discuss uh the structure of a blazer application and then we can take it from there so basically eraser project is formed of laser files as well as c-sharp files so if you can see here we can see we have pages and all of within those pages we have components and those components are razer files so for example we have counter fetch data index these components are provided for us for free from the framework once we have created our application let's open our terminal and let's run our application and see what is the outcome from running this application without doing any based on the boilerplate so type not run so this should take a few seconds perfect let's go to this browser and my advice if you if you want to debug it debug it using any of the chrominium chrominium browser it's either chrome google chrome or microsoft edge because they support direct level debugging within blazer specifically because it's built on web assembly so let's go visit this link and we can see that we have a boilerplate blazer application which has been created for us by the creating new but nothing new perfect so let's close this we wanted to make sure that everything is running so what are razer files laser files are composed of ui elements called components and another components which are the c sharp so if we look for example at the counter page we can see that because on the it has add page declarative on top of it this mean that this component we can direct redirect into so it could be considered as a page and we can navigate to as well we can see that we have different type of html element within that so that means that we are able to utilize html within our laser pages and finally we can see that we have code in this code block here we are adding all of our c sharp code this is one way of doing it for a small application another way of doing it which we're gonna which is which is the way that we're gonna be implementing it is having a um partial class with the same name of the razer component so this will allow us to have like a code behind functionality and it will allow us to do a good separation of concerns so we'll keep the files purely for the view for the view stuff and those partial classes will be responsible for all of the logics in the back in the background let's navigate one more page let's navigate to one more page and explain what does it do so as we discussed that different parts of the application uh laser application is built of components and then these components are linked with each other and built on top of each other so if we go for example to the index to the index component we can see it's very simple and it has this here because it's the root component if we go to the shared we can see that we have a layout component we have a menu component so if we click on the main layout component we can see that it's referencing the navigation menu component and it's using the same ad body from asp.net in order to for it to inject body inside this component so basically components can be inherited into each other and they can be embedded within different components in order for us to have the functionality that we need lastly what i want to mention is since once the application hits our browser it needs to be in html we're going to have an html here which is basically going to be the declarative that we're going to be using so what does that mean so since that since the html is going to be the first thing that's requested from the web server this html is going to be responsible for downloading our wasm app into our client and then from there it's going to be basically building uh building our references and everything within the browser cache and this will allow the application to run locally on the client machine without having to rely on the server the only thing the only time it's going to rely on the server when it's fetching data or manipulating data from there we need to do some cleaning up on our boiler plate boards uh laser application so in order for us to do that what we're gonna do is we're gonna delete the counter the tracer file not needed anymore as well we're gonna delete the fetch data okay great so once we did that we need to create a new folder inside our application on the root directory we're gonna call it models and this folder is gonna contain our item model so let's open it uh you guys just create a new class within that folder we'll call it item data okay good so within this uh modern class we're gonna have four properties and basically they're gonna be id title description and if it's done or not because basically this is i had to do client application so first of all let's create the id it's going to be an eye of type int the second one it's going to be string it's going to be the title the third one also string it's gonna be the description and the last one it's gonna be of type boolean and it's gonna be called done so we can check if this item has been done or not so the first component that we are going to be creating is the item overview we will be creating it under the pages folder so under the pages folder we create a new file we'll call it item overview dot razor perfect so this is going to be our first component that we're going to be creating and within this component we're going to be listing all of the items that we have so why are we creating it under the pages since it's a component and within our blazer application we need to have all of the components under the pages one so the next thing we're going to be creating is the code behind for this component so again we create a new class we call it with the same name item overview the first thing we need to do is we need to make this class partial why did we make this class partial because once we want to compile our application and run it our item overview the tracer cla or the tracer it's going to be converted converted into a class and we cannot have two classes at the same time it's going to call cause compilation error so for this reason uh and since this the item overview class is gonna be like the code behind for the atom overview we need to make it as a partial class in order to navigate to the item overview we need to do is we need to add some declarative into the razer file so let's open it up and the first thing we're going to be adding is going to be adding page item overview item overview okay perfect so as soon as we added the declarative page here it's mean that this razer component here we are able to navigate to for now we we're going to be adding some static information to our eraser view uh so we're going to be adding it hard coded and later on we're going to be converting it into dynamic dynamically calling the api and getting the data so let's go back to our itemoverview.cs and the first thing we're going to be creating since we're going to be listing the item data we're going to be needing an eye enjoyable so public i innumerable site item data we're going to call it items let's do the get and set and let's fix the references now let's create a function which is going to be basically responsible to initialize this list of items so private it's not going to return anything and we'll call it initialize initialize items okay great let's create two objects we'll call it var uh let's call it i1 equal new item data bear in mind these are all static data for now we're going to be changing it later but we just want to see the layout of it and we can see if how it's going to look once we have data so let's add a description for this item for example go get bread for example and is it done it's gonna be no and then if we're gonna give it an id of one and then we're gonna give it a title uh food shopping for example food shopping okay great now let's create another one call it i2 and we'll give it an id tool and we'll call this for example study and description study for the answer 204 exam okay great now what we need to do we need to add these two objects into our list so it's going to be items equal new list of item data and basically we're just going to give it the i1 and the i2 and that's it so this way we are able to add them directly to the list so right now we have created a function that's gonna initialize them but where are we gonna be calling this function so in order for us to load this information on the loading of the uh laserview object so what we need to do we need to override a function that comes directly within eraser review component which is going to be called uninitialized async so after this let's override protected protected override it's going to be a task of on initialized async and here basically we're going to be calling it the initialize item function so just to summarize a bit the uninitialized uh async function is provided for us by the dotnet sdk so the blazer sdk already provide this functionality for us so what we're doing here is when we're following the life cycle of the components it's always better to initialize any items that we want on the loaning of the component within the uninitialized async function rather than doing it in the constructor because if we try to do it within the constructor it's going to create is going to be creating for us issues since this is going to be a partial instructor and the of the item overview class because the main class is going to be our razor item overview.tracer so if we try to initialize item within a constructor and that class is also trying to initialize stuff in the constructor there's gonna be conflict and it's gonna fail for this reason we have the sdk provided us with this function online on initialized async so we can utilize it to initialize stuff within it okay great so once we do that uh now let's add some ite some layout to our component let's add an h1 and we'll call it all items and basically we're going to be using here some razor syntax in order for us to build our view similarly to what we do to it then asp.net core mvc so first if items equal equal null this means that we don't have any items yet still loading so we'll put a loading mechanism for us just to also mention one point as you can see here we haven't declared any variable called items so item is being read directly from our partial class it's automatically being injected for us from the porsche class to our raised review again since this is gonna be like a partial class it's automatically compiled with the main class so all of the objects there or all of the components that we have there are available for us here so after we make sure the items is not null else let's build a small table to display the items that we have we'll give it a class table it's a simple bootstrap class let's do the t-head put the r put the td it's going to be an id another td is going to be the title and let's and if it's done or not then the table body we're going to do a for loop using the for each so this is basically laser syntax so here it's going to be items and basically we're gonna just let's take these three and make them dynamic at item dot id add item title and add item dot done basically it's a simple laser syntax that we're utilizing here so this is our first component it's a very simple component with static data let's create right now our second component as well which is going to be the item details component and once we do that we can then run our application and see how it runs so first let's add a new file we'll call it item detail tracer and let's create the code behind which is going to be item detail and the first thing will make it partial okay great and so let's think about it for tell you what let's first run the application so we can see what's going on not run okay perfect now let's navigate to our web browser let's go to localhost 5000 or anthem overview and we can see so first before we go to item overview so this is our landing page when we're on our application and as you can see we didn't add anything to the menu to navigate to the uh other comp the newly component that we have so how can we navigate we can simply just put the component name like after the localhost 5000 and it will automatically take us there and as we can see here that we have the table that we have created before which is going to be the id title and done our next component is what if we're going to add for example here but create add a button it's going to be details if we click on it it's going to take us to the details page of this item so that's what we're going to be creating right now the second component so let's stop the application and let's go back one more time sorry so in order for us to navigate from the main landing page of all items to the details page of an item we need to pass an id so basically if we're doing it through a web app we're going to be passing a query string within a blazer app it's not called a query string it's called a parameter so we need to define a parameter so within our parser class we need to define a parameter and the parameter is always going to be a string so put public string id get unset perfect and let's fix the references but i forgot the parameter okay okay great so the next thing that we're gonna do we're gonna need is gonna be an item data so public item data we're going to call it item and let's do the initialization the gutters and the setters and also let's initialize it in case there is nothing in it so we'll call it new item data and let's fix the references so basically here we're declaring an object within our item detail class we're calling it item oh it should be an equal sorry we'll call it item and then if this item uh every time this laser component is loading we're just initializing it next let's also do the static initialization so we'll put the private void initialize initialize item and let's declare a single variable call it for ion equal new item data and let's give it let's take it from the details that we have declared before where was it so let's take this one and let's just paste it here and then let's assign this one to our uh double object that we have created here so it's gonna be item equal e1 i1 great now similarly to what we did before uh we need to have an uninitialized function so after this we do protected override task on initialized async and then we're simply going to call the initialize item function perfect so now let's run the application again i will include the view i apologize so let's create the view so as we mentioned earlier this is going to be asking for a parameter so first we need to make it navigateable by adding the page declarative and then we'll add the item detail so after that what we're going to do is because this is going to be uh we're going to be able to navigate through it and we're going to pass a parameter to it so we need to define the parameter from here so for this reason we said we're going to define the id from here and then let's create an h1 and we'll put item details we'll put the title here item.title and then we're just gonna do a simple div using the bootstrap classes and if class call dash md-12 and we're gonna simply using uh another div and we're gonna use the form group which is provided for us by bootstrap perfect i'm just gonna have a label here with a class i'll give it a call dash md dash 4 for example and we'll put this here the id and then have another div class call dash md-8 and we're gonna have another label of uh class form dash control and here we're just gonna pass the id add item dot id perfect now let's copy these and we'll put one for the title another one for the description and the last one for the done perfect so now we have built our view uh let's try to run the application and see what happens so or let's let's directly link the no let's run the application do not run and see the if this view is running without any issues so it's building and it's running now let's go to here and we call it item details let's go to it sorry there is no item oh because we need to give it an id perfect so we can see here because we defined here that the route needs an id and when i specified it i didn't provide an id that's why i didn't work the first time but now we can see if that everything is learning as it should be which is great let's stop the application and now let's go back to our item item overview.tracer and let's update it so within our item overview so now let's create a link between this one and the details page so let's add here another td make it empty and here we have a td it's gonna basically contain an href and we need to be very careful uh of how to add the references within an href so it has to be an add then a bracket we'll use string interpolation so put the other sign what's the name of the component we're gonna be navigate to so it's item detail and then we put the forward slash and then we're actually gonna provide the id of it so item dot id perfect and then we're gonna put the class it's just simply put strap at the end with the and that's uh success and we're gonna call it detail now let's run it and see what happens perfect it's running so let's go back to item overview again everything i'm doing right now is from within the url we're gonna be updating our menu after that perfect this is our item overview we can see that we have food shopping and if we click on details we can see on the lower right the left hand side that the url is automatically builded for us in the correct way so item detail for slash one and if you click on it it loaded for us perfect so that's working as it should be let's stop it for now and the next step for us is we need to update our menu so let's go to our shared folder under nav menu.razer we don't really need these so when they did this one and we're going to update this one so instead of having a link to the counter here we're gonna change it to item overview we're just directly linking to the main component so it's gonna be item overview and we're gonna change the name to item overview items overview let's keep the plus sign and let's try it again see if it works so let's run the application and navigate to the web browser and as simply as if we refresh this we can see the menu has been updated which is perfect and if we click on it it takes us back to all items and if you click here perfect so now we have like a easy to follow away instead of using the urls to navigate now that we have our application ready but with static data the next step for us is to make it dynamic and to connect our blazer up to our api what we're going to be doing is we're going to be utilizing an old not the old sorry uh an api that we have you previously used and we have previously built which is the to do api uh i'm gonna get it directly from github so within our web browser we're gonna be navigating to my github account so let me directly find the link okay perfect so from here i'll put this link in the description down below so once we go to this uh github repository all i'm gonna do is i'm gonna clone it so first let's clone it using ssh and let me open the terminal let's put it in the desktop so cd see the desktop let's create a new folder called api make their api and get the clone okay perfect now i have downloaded the source code for the api let's open it up in visual studio code and we can see that oh sorry we have opened the entire desktop so let's navigate to it so let's navigate to v8 and let's open it up perfect we have our to-do app ready and everything we need inside of it so the first thing that we're gonna be changing excuse me from uh our uh to do api is we're gonna be defining where a fixed url i've sorry fixed url with the port so we can connect to it so from within our startup class sorry program.class online for example 23 we're gonna be adding a web builder dot use urls and we're gonna be using http on port 80 90. so this is the first thing that we're going to be using then for testing purposes we are going to be removing the authentication requirement from our to-do controller so we go to controllers we'll go to the to-do controller and for the sake of testing only we're going to be removing the authorize in our later video for blazer we're going to be seeing how we can authenticate with an api and how we can send a proper jwt token to that api so we are able to access this information directly but for now we're just going to comment it out next what we're going to do is we're going to apply cores to our application so basically cores which is cors will allow us to connect to this api from another application so by default if anything try to connect to our pi from a different application it's going to be automatically blocked so how do we resolve that we need to enable course from within our application so for in order for us to do that we'll go to the startup class and inside our configure services at the end let's add services dot add cores perfect let's specify the options let's close it and the options they're gonna be at policy and this policy we're gonna be calling it the open policy so anyone can connect again this is purely for testing in a real life application this kind of we have way different rules and regulations for us to connect our api so let's call it a builder builder filter dot allow origin any origin perfect and then we're gonna add allow any header as well and let's add the semicolon at the end so basically what this will allow us is anyone who's trying to connect to our application they will be able to connect which is fine for testing our next step is we need to update our configure so before the app.use endpoints all we need to do is we're going to put up dot use course and we're going to give the policy open that we have created before now for testing let's open try to run this application so we do not first build let's build it up so all of the references will be installed and restored oh sorry we need to navigate that to do up now put dot nut build we can see it's building okay perfect the next step for us is gonna be running it and we're gonna be utilizing postman to see if actually there is data i think there's some data within our appdb but let's utilize it let's check it with postman i have already added the url basically we're connecting to it api to do and we're doing the get function so if we click on send now perfect we are able to see that we have six items within sorry five items within our to-do items in our api site which is great so once we make sure our api is running and we have that we have done the changes to it uh let's let's keep it running we don't really need to stop it let's navigate back to our application and now the first thing what we're going to be doing is we're going to be adding a new package to our application and this package is called microsoft.extension.http it will allow us to utilize the http client service so to do that we'll just not add package microsoft dot extensions dot http if i can type ok this should take also a few seconds perfect now it has been installed we can verify it by going to the to do client.cs browse and we can see it it's here perfect once the nuget is added we need to create a new folder called services in the root directory and the services folder will contain our http client service so let's create a new services folder and the first one we're gonna be creating is the interface we're gonna calling it the i to do data service basically for now it's only gonna have two methods i knew the one is gonna return for us all of the items from the api and second one's gonna return a detailed item of the api so i new rubble of type i item data call it get all get all items let's fix the references so perfect perfect and the last one is this perfect the next one is going to be also a task it's going to be item data and it's gonna call i got item details and we're gonna be using the id for it perfect now let's create our service so add a new class to do data service correct and basically this is going to be inheriting from the i to do service perfect and now we need to implement this implement interface great great so basically right now we just did the basic implementation so the interface will be happy the next step for us is we need to update our program.ts in order to utilize the http client and we can uh inject the http client directly within our services so let's go to our program.cs we're not going to be using the default http client that is provided we're going to be using our own that from the ex from the package that we have installed which is microsoft.extension.http so the first thing we're going to be adding is builder dot services dot add http client we're gonna pass the i to do data service and to do data service perfect and then i'm going to define lambda and basically within this lambda function we're going to define the base address so x dot base address and it's going to be of type uri so it's going to be equally new uri and the domain that we're going to give is basically the api domain that we have hard coded within our api so it's going to be http not https http localhost and we give it the port 8090 and now we just need to close it and fix the references perfect so let's save this and let's build the application to see if it actually builds without any errors and we can see the application has built successfully now let's implement uh the http client within our to do data service first what we're going to do is we're going to be defining the new property of http client so private read only http client so we're going to be using construction and constructor injection in order for us to initialize the http client and this is going to be provided for us from the di container because what we did here we have already either we have already added it to our di container to be injected from within when we added this line here so this line here builder the services.http client tell that the i container that we want to inject an http client within our data service class so let's go back to our data service and let's create a constructor and let's put http client called http client and then we're just gonna link them so http client equal http client perfect now we can utilize these within our methods so the first one is going to be get all items let's delete this we don't need it so first we're going to get the api response so far api response it's going to be equal await we're going to be calling the httpclient dot get the stream async so basically this is going to be creating a stream back for us so we can serialize it and send it back to the component so let's define the url so i have already defined the base url within the program don't see us now we need to define the rest of it so we just add dollar sign api forward slash to do and if you want to know exactly where this url came from we can we can go back to our application and so our api and we can see from the do controller this is the root so api to do controller and we're using get items so it's going to show it get us everything so this is giving us an await because we didn't we need to make it here an async perfect and now we need to return the serialized results so we're going to put return await you can use json serializer dot d serialize async and it's gonna be of type of i enumerable of item data and it's kind of basically processing the api response that we have from earlier and we're gonna add options to the serialization to ignore casing it's gonna be basically we're gonna put that property insensitive okay equal true that's it and then we need to close it now let's fix the references so this is the first one jason serializer perfect json serializer options we've got yes then this okay it worked perfect so this one here we the first thing we did is we connected our http client which is kind of getting the base address from here it's going to be localhost 1890 and then we have appended the rest of the url which is api to do and we said it's going to be a gut so it's getting everything from there and once we have the api the response and a stream we are serializing it using the json serializer into a i in removal of the item data and we just passed an extra option so it will ignore any case sensitive so the next one we're going to be building is the get item details let's make it async from now let's delete this we don't really need it now and similar to what we did before let's copy this let's copy all of this i will just modify it so the first thing is we're going to be modifying the url so we're gonna be adding the id perfect second it's not gonna be returning and i am removable just gonna return an item data so let's delete this and this and we should be done so similarly to what we did in the first one we just connected to the http client we defined the domain or actually the url that we're going to be connecting to we pass the parameters the query string that we need and then we returned it back so the next step is we need to build our item details and item overview and remove all of the static data and utilize the calls from the api so let's save this build it make sure everything is building perfect now let's go back to our item overview dot cs and let's delete this function we don't really need it anymore because we're going to be utilizing the api and thus delete this one perfect so what are we going to do right now we're going to be basically injecting the to do data service within our item overview class how do we do that so we start by adding a reference public item sorry i to do data service and we'll call it to do data service let's do the gutter and setters and let's fix the reference so how are we going to inject this into we have declared it but this is not injected or initialized so the way to do it is since we have already informed our uh dependency injection container or the i container that we have a service that we're going to inject specifically here because we said that we are injecting that to do data service an easy way for it for us to do it within our components is simply by adding on top of this the inject attribute so the inject attribute means it will gonna tell the eye container to do all of the heavy lifting for us and do all of the proper wiring in order for us to utilize the data service here so once we have that it's going to be simply we're going to add within our uninitialized async the items variable that we have it's going to be await to do to do data service dot get all items and let's make it to a list not lost to rest okay and this needs to be async and we need to delete this we don't really need it now and i think let's add the reference to the link perfect so this is gonna be our this is only the change that gonna do to item overview now let's do the changes to the item details as well let's delete this we don't really need it okay and let's delete this let's uh delete this let's delete this and let's make this async and what we're going to add here is as well item equal await oh we didn't inject it so sorry that's injected first so let's add the inject simulator we did before and then we're gonna put public i to do data service to do data service put the gutters and setters perfect so now let's use it to do data service dot get item details and we're gonna be passing in the id but the id here is string so let's convert it so put far id let's call it item id equal convert dot to n32 and we'll pass the id for it let's add the reference to system and now let's pass the item id here okay perfect so now this function also connects to our api and pull all of the data so let's build it and see what happens let's run it sorry now it's running it's building first it's running let's go back to our web browser first let's go back to the home page refresh it perfect let's go to item overview and great we can see that it's pulling all of the data from our api let's check the result against postman we can see we have one do shopping third item read the book play xbox play sports if we go here we can see do shopping third item eat xbox play sports play sports and if we click on details for example read a book we can see that it's actually pulling the data from the api which is readable clone about higgs boson and it's not done yet perfect so basically right now what we did is we have created the laser app we have created two components we have updated the menu we have connected to an api and we have pulled that information from the api as well in two ways the first one we got all items and then we got the details item so this is gonna be the end of our video right now there's gonna be a part two for this which we're gonna be covering adding updating delete items within our api creating forms within blazer and then a video after that was going to be responsible of on creating authentication and authorization within blazer thank you very much for watching please like and subscribe if you like this video and if you have any other ideas or if you have any other topics that you would like me to cover please mention it in the description down below as well all of the source code and all of the references they're going to be available in the description down below have a great day

Channel: Mohamad Lawand

Views: 4,128

Rating: 4.9560437 out of 5

Keywords: asp.net core, restapi, rest, api, beginner guide, step by step, postman, dotnet 5, blazor, WASM, Web Assembly

Id: 87DRaPlvqT4

Length: 56min 29sec (3389 seconds)

Published: Fri Jan 29 2021