HTML/CSS Android App with .NET MAUI (Visual Studio 2022)

hello everyone welcome back once again in this video we will look at how to build an Android application with HTML and c-sharp using the.net Maui Blazer inside the visual studio 2022 you will also explore quickly the necessary components needed for us to get started but before we get started please make sure you subscribe to the channel if you haven't so Blazer Blazer is a framework for building interactive client web UI web.net and Maui apps or dot net Maui is a framework you use to build native cross-platform desktop and mobile apps from using a single C sharp code base so enough of all the Talking let's get into the real stuff here so as you can see here I've got a visual studio installer opened yeah so let's explore very quickly the necessary components needed for us to get started so as you can see I've installed the visual studio Community 2023 so let's click on the modifier so as you can see here we've got this workflow so we scroll down here so here as you can see we've got desktop and mobile yes so this is the next multi-platform app UI development so this to build Android iOS Windows and Mac apps from a single code base using c-sharp we.net Maui so you have to make sure that you've got this box checked you download and install it so once you once you're done with that then you can get onto the next page yeah so I'm just going to close the visual studio installer so as you can see I've got Visual Studio here so we go ahead and create a new project so new project create a new project yeah so here on this video you can leave it all languages of platforms but here you can select the Blazer yeah so once you select the Blazer so as you can see we've got a bunch of um potential um projects that you can use so this is what we're looking for so it's a Memory Blazer app yeah so this is the project for creating a.net Mario application for iOS Android Mac Catalyst when you are and and whatnot yeah so we select this bit here and we click on the next say 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 next and here you can select whatever.net framework that is applicable to you so let's as you can see I've got.net 6.0 and.net 7.0 so I will leave it out there uh dot net 7.0 yeah okay so we click on the create so it might take a while for the whole project to load so I'm just going to okay we've got everything fired up so ready to go so as you can see yeah you've got a project template created for us okay so let's go ahead and look what is inside of the template so let's start with the data so this is just a very simple data models that um whoever forecast data model yeah and then we've got the services that is attributed to the data model we're not going to look too much into that yeah let's go into the pages here so the page is obviously include eraser expansion yes so the razor is a combination of C sharp and HTML code okay so let's click on the index dot reader so as you can see we've got this very simple stuff here so if we look at it here we have um uh we've got an HTML code here yeah so basically with the razor you can fuse an HTML and c-sharp code together to build your application so let's look at the counter dot razor so as you can see here we've got this HTML and we've also got a c-sharp called DSL to write the series I've got there use the app code here and you surround it with apprentices okay so this is just a very simple that is actually adding once you click a button it adds a number to it so it's just so we've got this um variable uh an integer variable current count and obviously we've got a current count plus plus but this is just to add it whenever you click on it okay so let's we've got this let's have a look at the fresh data that raised as well so so this is the service this is the obviously to get the data from the what we looked at on the data side of the weather forecast service so as you can see here we've got um a sample data created for us so this actually retained a bunch of whoever's for I mean the weather forecast sample data okay so this is where the uh the flash data dot Razer graph the data okay so let's look at the platforms as well the platform folder so this is actually what type of platforms that you can actually Target with this project so basically you can Target an Android platform iOS Market with Titan and whatnot okay so let's quickly look at what is inside the resources folder so the resources folder yeah contains their application icons their phones images and whatnot yeah so basically this is where you put your funds the images and that kind of stuff yeah so let's look at the shade a shared folder so the third the third border we have the main layout yeah so this is this is the main layout so this is just a partial page yeah of the main layout of that of the project and we've got the navigation menu so the nav the nav monitor razor so this actually this contains the navigation menu okay and we've got a survey from so once we actually run the project we will we can see what is actually going on okay so let's go quickly go into the the main dot razor so let's collect the shed so the main razor so this is this is actually as you can see is is actually referencing the main layout which is inside uh the shared folder okay and then we have got the main pins if we look at it here so the main page here so this actually references the main which is the main door razor so this is the root The Roots page for their uh for the project okay so as we can see there's nothing really difficult about this yeah so I'm just doing this video to to get you started so let's run the application and see what is going on so as you can see on the top here we can have a drawdown here so here obviously as you can see we can we can run this same project on a bunch of platforms yeah it's called the Android it's got the iOS local device we've got the the windows the local machine the windows I'm actually using the windows 10. so let's have a look at the Androids the Android emulator so I'm going to select my Android demo later okay so let's run the application and see what actually comes out so I'm just gonna pause the video while the whole application runs so as you can see here now we've got the application so yeah if we look at it here yeah we've got the application running we've got the manual here so if we look at it here hello world Welcome to our new app yet let's go let's go back to the English let's go back to the solution Explorer and index the eraser so as you can see here this is what is actually showing on the main page hello world welcome to your new app yeah so you can continue and build from this bit here so I'm just going to leave the video here so you can have a look and explore the code server yeah but maybe on my previous videos yeah we will start from scratch and build our own application Okay so once again you know if you haven't subscribed to the Channel please make sure you do because I've got lots of videos coming up yeah so I hope you have a lovely morning afternoon evening wherever you are peace

Channel: Hacked

Views: 1,323

Keywords: android html development, html, android studio, javascript, visual studio 2022, android html visual studio, .net maui blazor, cross platform app

Id: JhCtkImVCZA

Length: 9min 17sec (557 seconds)

Published: Sun Aug 13 2023