Build Hybrid Apps with Blazor & .NET MAUI | Visual Studio 2022

hello everyone welcome back once again in this video we will look at getting started with blazer hybrid applications with dot net maui inside the visual studio 2022 but before we get started please make sure you subscribe to the channel if you haven't so let's get into it then the net multi-platform application maui is a cross-platform framework which is developed by microsoft it enables you to build a cross-platform applications with a shared code base that can run natively on android ios mac os and windows so the blazer hybrid applications are native apps that can leverage web technologies like html css etc and of course for this video we use the microsoft visual studio 2022 preview since the dot net malware is at the moment a release candidate is so it's not in the development at the moment or in production at the moment so if you look on the screen i've actually got the visual studio installer opened yeah so i've got um the visual studio 2022 community and then the preview installed on my system so for this video like i said we use the preview so we click on the modify so here obviously we can install the necessary workloads to get us started with the um dot net maori so here under the desktop and mobile we've got the net multi platform apps ui development so we check on this box yeah then we can check on this um net the desktop development and universal windows platforms yeah just to run our project yeah so once you have once you've checked on these boxes then you download and install from this part yeah and for this video we also run the same code on um we use the android emulator so you can also download and install the android emulator if you don't have it so you can get it from this from here so at um the emulators so you can check on this box as well yeah but i'm not gonna i'm just gonna we're not gonna look into that yeah so once you download and install it then obviously we can launch the vs 2022 preview so here click on the create a new project so here on the on the platform side here we can select ios android yeah so i'm just going to select the android here so we scroll down so as you can see here now we could actually create a netmari app or we can create the dotnet marley blazer application so we're going to select this here and then we go next so here obviously you can configure your project details yeah but we're not going to look too much into that yeah so we click on the create so this might take a while for the whole thing to load so i'm just going to pause the video then okay so as you can see here now we've got the project opened yeah but before we run it for the first time we're just going to look we're just going to look at what is inside the project i mean the the template right so first let's see we've got this um data folder it's got a class weatherforecast.cs so this actually has the weather forecast details yes like the day temperature and whatnot yeah and we've got the service that will generate the data for the weather forecast yeah so it's still a very simple stuff we're not going to look too much into that yeah so we come inside the pages so if you're familiar with uh with a net call then you understand what was actually going on here so basically we've got um in desktop razer so this actually brings us the the main razer page yeah and then we've got this counter dot razer so this actually gets some some some details here using that both the html and c-sharp yeah so as you can see he's got that code here just to use the c-sharp code yeah and then we've got this fetch data yeah it's also got a very simple html and some few few c sharps yeah it's a few c sharp code yeah so we come inside the platforms here so basically these are the targeted platforms so basically we can actually if what is say for this code here we can directly run it on android ios my catalyst windows ns trial so and the resource folder contains the images fonts and whatnot yeah and of course in the shade contains the layouts yeah if you familiar with dot net call yeah it's very it's very similar so this actually con this is the main layout and it's actually referencing this nav menu for navigation menus which is this so it's basically this for the navigation so as you can see it's a very simple stuff here and then this for the survey so basically this will like when we run it we see where all this is coming from yeah and then we've got this www root folder which contains the css and and the fav icon and then the index.html which i'm i guess is the entry for the application yeah so as we can see here is very simple and we've actually got uh uh the main program so basically this is the entry point for the program so if you if you're familiar with dot net call then this will be like this will look very familiar to you yeah so basically we're actually configuring the uh the phones so i think i guess you can you can configure a whole lot of stuff from here yeah so now we come inside and running it here so first of all we're going to build it so i'll build a project so we've got the build succeeded so we just go into the build i mean running it so as you can see yeah we've got a couple of devices that we can target like i said earlier on so we can target the ios simulators the android emulator uh the windows local machine yeah and whatnot so what we do is just um first of all we're just gonna run it on the windows here so and let's see what actually comes up yeah yeah so i'm just gonna post it while the whole thing runs so as you can see we've actually got the um the application running running as a windows desktop application here so that same code here we could just run it as an android application i saw so i'm just going to pause this bit here and we're going to open the we're going to run it as an android so we come back here so let's see the android emulator yeah so i'm just gonna come to the android emulator so i'm just gonna pause it because this might take a while while the emulator starts yeah so as you can see i've got the emulator up now so we're just waiting for the project to build and then and then install on the android emulator so as you can see here now we've got the same application running on android yeah so you could do the same thing for ios and mac os as well so like i said this video just to get you started so i'm just going to leave it here and we go into further details on our upcoming videos so once again yeah if you haven't subscribed to the video add them to the channel please make sure you do because i've got loads of videos coming up and i hope you have a lovely morning afternoon even wherever you are peace

Channel: Hacked

Views: 8,322

Keywords: blazor, .net, asp.net core, blazor c#, how to blazor, .net maui, android maui, android, ios, visual studio 2022, multi-platform app ui (maui), what is blazor, hybrid app development, cross platform games, android html css, maui, maui ios app, ios app, macos app, ios visual studio

Id: BGASRG9dsoI

Length: 8min 41sec (521 seconds)

Published: Fri May 20 2022