Building Hybrid User Interfaces with Blazor Hybrid [Pt 4] | Blazor Hybrid for Beginners

[Music] welcome back everyone to the Blazer hybrid beginner series I'm your host James Monto Magno a program manager on the developer Community team here at Microsoft and so far we've learned all about what Blazer hybrid is and how it works inside of D Maui we've gone ahead and got our developer machine set up and we even created our first project and took a look at the entire architecture of a Blazer hybrid application running withm ma now we want to start building our application so today we're going to build a full to-do application that saves data locally to the file dis wherever the application is running we're then going to take a look later on in future videos of how to access native apis like connectivity for example and how how to share this code with a Blazer web app too but before we get there let's just start building our application so let's head over to visual studio and get going all right here I'm inside of Visual Studio 202 22 and we have our file new project so that Blazer hybrid app we have a few pages like counter fetch data and our index and the first thing we want to do is add a new page so here I can say add a new razor component and razor components are pages that we can add with special markup I'm going to go ahead and just call this to-do so it matches the same as our other razor components here and we can see that this has an H of three and our code block so to give it in href here I can say at page Todo there we go so by default it's just a component with no route but adding this page route will enable us to navigate to it or put it into our navigation with an hre so that's important to know so that is how we're going to go ahead and navigate to that automatically else it's just a component that I could reference from other pages so now that we have this page set up let's go ahead and actually add it to our main navigation and take a look and see what that looks like in the app so here under shared we're going to see our main layout and our nav menu so if I go ahead and expand this a little bit we can see that we have three pages here so we have our our main nav menu CSS class we have a toggle nav click which goes ahead and collapses it automatically or not and then we have three pages we have the homepage we have another counter page and we have this fetch data these are nav links and we can see that the hre for each of these is the same as the counter and the fetch data so here's the counter for example there we can go ahead and copy this last one this fetch data in here and I'm going to change the word fetch data to to-dos there we go and the H to to-do there we go so now that our hre matches our route the Blazer hybrid system will automatically pick that up for us so now I can go ahead and debug this locally on my machine and what we'll see is another uh item right here to-do too fetch data too everything is good to go now let's go ahead and start building out our application a little bit so under the data we have our weather forecast and Weather Service I'm going to go ahead and add two new classes so add class and I'm going to say too item just like that and I'm also going to add another class called our to-do service and that service is what will enable us to save information directly to the file system so we'll take a look at that in a little bit all right first the to-do item let's keep it simple I'm going to first go ahead and simplify our name spaces right there and I'm going to get rid of all these using statements we don't need that perfect all right so what is inside of our to-do item well the first thing that I want to do is I'm going to say public class just like that and what I then can do is say well every to-do item needs a string and a Boolean for is done so actually surprisingly get up copile is pretty close to what I want so we're just going to give it a title here and is done we're going to assign it to false by default and we'll assign this to string.empty by default Perfect all right so we have title and we have is done not bad so that is going to be our to- item that we're going to iterate over and add new items so let's head back to our to-do do raiser all right so now what we want to do is figure out a way of displaying a list of our to-do items inside of our razor page so the first thing we need to do is we need to actually create a list of to-do item right here and we're going to call that to-dos there we go so to-do item to-dos and we're going to say let me create a new list perfect now notice here that it actually doesn't know what my to-do item is so we're going to bring in the using and that's going to add it automatically for me so there we go we're good to go now what I can do is I can say let's create an unordered list and I'm going to say app for each and in this case each to-do in to-dos perfect and now I can just go ahead and display each of those items now for now I'm just going to give it a line item here and that's going to bind to to-do Dot and I have access to my different properties such as is done or title for example perfect now if I run this application it's actually not going to do very much because I have no items in my list so let's go ahead and create a few more items here so I'm going to create an input there we go and I'm going to say placeholder and let's say something to do right so that's going to be an input that I can go ahead and bind to here in a little bit can also say button and let's let's say the button is ADD too right so that we just add it and it's going to go ahead and add that item for me automatically all right so the next thing we need to do is figure out how to add some item into my list here um when I click on this button so let's go down and create a void of add too and we're going to go ahead at some point you know do this right add it to the list right so that would be good and now what I can do is on my button I can say at click so when that's clicked and that's going to call specifically add too perfect so whenever someone clicks that button it's going to go ahead and call this method and we're going to add that item into our list so what are we going to bind to on this input well we can go ahead and create a string of new Todo just like that and then we can bind this input field so so I'm going to say bind here and that's going to be to new too so this is great whenever someone enters text into that input field it's going to bind automatically to this new to-do and then whenever someone clicks this button this onclick bind will automatically call this method of add Todo so that's pretty awesome so now what we need to do is actually fill this in so I'm going to say if string do is null or Whit space so if someone hasn't entered anything so is null or Whit space and I can say new too let me just go ahead and return right so don't do anything if it's empty then we're just going to add it into the list so here I'm going to say to-dos do add perfect and I can create a new Tod do item perfect and specifically I can set the title on it to New Todo perfect just like that so we've added that into the list we've done that and then we can go ahead and say new Todo equals string.empty just so we clear it out now the Blazer binding system will automatically handle this for us it'll refresh that list it'll automatically clear out that input box as well which is really really great so let's just go ahead and see that in action and then we'll go ahead and give the flexibility to check and uncheck and is done option as well which will be really really cool so again this is going to be the starting point of our application so here is our application running we can see something to do I'll say add checkbox and then click add Todo perfect there we go in fact we can add breakpoints inside of Visual Studio go back to our running application and say check out debugger click Todo and we're going to hit a breakpoint right here we can hover over this new item see the property and we can go ahead and step through through it so let's go ahead and do that perfect really cool all right so now we're getting a little bit further but we do want to give the flexibility to check one of these items and slash it out so let's go ahead and do that perfect so let's go back up here and under this to-do item we can add more flexibility here so I'm going to go in and inside the LI instead of just doing the title I'm going to do Li there we go there you go perfect and what I can now do is say input and I'm going to say type and I'm going give this a checkbox and this is nice because this input down here is text by default but this can be a checkbox and I'm going to bind the check here specifically to the is done property so I'm going to say to-do do is done very cool just like that I can then also do another input and this one will be at bind equals to do. tile so this means not only can I bind this to the is done to check it in and out we can additionally on this input change it in real time which is really really nice now another thing that would be kind of nice to do is actually see how many items we have left so up in this to-do I can also do some more data binding I'm going to say at to-dos do count and use some link here and say show me the count of to-do items where they are not done there we go just like that so this will not only show to do it will also display account here for me automatically awesome so let's go ahead and see what this looks like now so I'm going to come back up I'm going to go over and back here and we can go ahead and say hot reload to do so hit save and we can see that hot reload in this case isn't available so we're just going to ahead and stop debugging and we're going to go and relaunch it so I made significant amount of changes to the code so it's going to have me relaunch it really quick here perfect so now I can go to to-dos and we can see that there's zero currently and now I can go in and say test this out awesome we can see we have a check boox here we have test this out we can say learn about.net Maui awesome here we get two automatically I can say build awesome hybrid apps add too there and now we can see this I can also check these off and we can see that automatically that count changes for us which is really really neat right so that's pretty awesome cool now notice though that whenever I leave and come back it clears it out we don't want that we want to go ahead and save this now there are many many ways of doing this right so ideally you would create a backend web API this might be a server saving it there you might save it in a SQL database you might connect it to Cosmos DB or some other backend back and forth but we're just going to save this dis really quick and see how that works so let's take a look really quick and implement this functionality so again I'm going to stop debugging and we can note here the weather forecast service for example is going off and this is just returning some data right now we could create something like this but instead of just returning data we could save that information and we could store it in memory or on disk so I'm going to go over here and go into my to-do service and again I can go ahead and clean this up a little bit and we have a public a public to-do service awesome now I'm going to go ahead and bring this code in and walk through it just because it is a little bit much so let's go ahead and grab this here and paste it in perfect awesome so we have our hybrid to-do app app .data namespace and I'm using system text Json now this is actually a really simple service all it does is go off and it creates the file path here I'm getting a special folder which is just the application data and I'm going to save one Json file which is items. Json and this is great if I'm an app because I'm just saving it locally here and actually it's really really simple I have two methods one called saved items which you pass in the items you want to save and it writes all the text using the built-in Json serializer to that file I also have a load items here which checks to see if the file exists and if it doesn't it just returns an empty list else it reads all that information from the file and deserializes it so just about 20 lines of code and I'm getting Json serialization der serialization simply using system.io now since Maui has a donet runtime and donet can run there system.io works right so I can check all of the different things that are running on iOS Android or Mac so we can now go ahead and inject this service so let's go ahead and do that I'm going to first go into my solution Explorer and go into Maui program and here we can see that we have our weather forecast service and what I'm going to do now is I'm going to say well let me go ahead and use the to-do service there we go and since these are in the same exact uh name spaces we can see that this using statement was brought in cool now what we can do on our to-do do riser is I'm going to say at inject I'm going to say to do service just like that and I'm going to say to do service there you go now what I can say is whenever I add a new item uh we could save it or we could probably add another button so I'm just going to add another button here and I'm going to say save there we go let's do that perfect I'm going to say save and now what I can do is I can say void save just like that and I can say to-do service Dot and I can say save items and just like that I'm going to pass in the to-dos awesome and done one line of code to save the items now we also want to load these items when the page loads like when it's initialized so let's go ahead add a little bit of code into the initialization of this page so whenever the app starts or when I navigate to and from so here I can go and say override and there is an uninitialize or uninitialize async so here I'm just going to say uninitialize it's going to call the base Constructor and then I can say uh VAR items and I'm going to say to-do service do load items perfect now all I need to do is add these items into my to-do list so I'll say to-dos do add range and I'll say items perfect done now I go ahead and run this again and when our application loads up it's going to go ahead and see if that file exists if it does awesome it'll go ahead and read that data we shouldn't have anything there yet else now we'll have a save button that will save those items automatically for us so here we go here's our application I'm going to go into dos we have no items I'm going to say save items boom access apis boom I'm gonna check one off I'm G to hit save now when I go back and I go fourth it automatically loads it all right so if I go ahead and add a breakpoint here let me go back into my running application I can click off click back on and boom I have my items right here in my list automatically for me that's really really cool now here like I said this is just saving that to dis however of course I could be calling a backend service with HTTP client I could be accessing a sqlite database uh Cosmos DB SQL Server anything like that automatically Ally through a web API or just go ahead and saving this into a local SQL light database for example now let's see what happens when I run this on Android because this is a multiplatform hybrid application so let's go ahead and stop debugging and I'm going to go ahead and now select my Android emulator and hit debug now this is really cool I'm not making any code changes right I'm just simply selecting Android as my deployment Target and what we should see is that the exact same page exists all the exact same functionality exists including saving that file to diss so let's go ahead and give this a second to compile up our native Android app and deploy it to our emulator all right our application is up and running here's our splash screen just like we saw in the previous video but now we have another item to do when I tap on that we can see it hits a breakpoint right now we don't have any items inside here so let's go ahead and continue on and now I can go in and I can say check it on Android hit add too there we go and of course I can resize this a little bit there we go and I can say uh eat something there you go probably want to do something at some point here and now I can check and uncheck these there we go and I can hit save so it's going to save it locally right into inside of my Android application if I go out hit fetch data come back into to-dos we can see that I now have two items just right here like we saw eat something I haven't done it yet so I'm going to hit continue and now we have our same exact application running but running here inside of Android which is really awesome all right there we go we've started to build out our Blazer hybrid application leveraging donet Maui to get our Windows Android iOS and Mac applications up and running now from here we can start to blend in some native apis Native user interface and start to share code with our Blazer web app as well and we're going to do all that in the next few episodes so stay tuned for even more Blazer hybrid goodness right here in the Blazer hybrid beginner [Music] series

Channel: dotnet

Views: 7,141

Keywords: .NET, Blazor, Blazor Hybrid

Id: pWDf1AnJ4ds

Length: 19min 20sec (1160 seconds)

Published: Fri Nov 10 2023