Web to app in one hour with .NET MAUI & Blazor

hi welcome to a live stream it was a while ago that I lost did this because I've been a little bit too busy doing live streams so my plan right now is to do some live streams from time to time but focus on publishing videos one or two per week so but today I will talk about.net Maui and Blazer and this is based on a presentation I did on the update conference in Prague where I took a website and converted it live on stage to an app so I think it would be a good idea to do this for my YouTube audience too so all code I will show you today will can also be found on my GitHub in that repository called update demo 2022. so so what I will do today is that I will take this website from.net Fountain day a conference that will be back next year and I will convert that to an app because we are a.net front and Conference of course we also need to have an app for it so that is what I will do today and hopefully I will have a working app in about an hour I at least I managed to do that live on stage in Prague around I think it took around 40 minutes then so but the plan first is to migrate it straight over so we will have the same functionality in the app and after that I will spice it up with some native stuff some native UI so what about Blazer and not Maui Blazer when you're building a does not Maui Blazer app that's some sort of a hybrid app you will have a web UI but you will have everything running native on the device in the same process as everything else and that means that the UI that you have is native is web and everything else is native so in your Blazer components you will have native access to everything that the platforms offers so I think that is a really good approach when you want to build hybrid apps so I will not talk it much so much about that in theory today so we will go into visual studio and we will take this website and we will convert it to an app so let's start with that let's go back to the browser and uh open Visual Studio so here we have one project that maybe not the best ID if you want to share code between app and a web because you cannot just take this web project and reference it from malware app project so you need to break out those shared stuff into a separate library but first let's go and create a new Maui project it's a new project oops that was slow I wonder why maybe because I have the streaming software on the same machine so but there are basically two types of the .net malware templates in here we have the one called.net Maui app here and then we have the.net model Blazer app if you start with the app first it doesn't matter really what you take you can add Blazer content even if you started with the.net model app but you need to do some more steps so let's create dotnet Maui Blazer app and we should of course Target no we should not Target on the 7 right now because the web project is not six but it doesn't matter really what you do as long as you have everything as the same so not front and day up yes so we'll just wait when it creates the projects for us so what differs here from a regular Maui app is that we will have this WWE root folder for all web content and with web content I mean the static content like HTML files CSS images and then if you go to Maui program we have this add Maui Blazer webview and this is required if you want to do.net Mario Blazer and with this ad Blazer webview developer tools it's also possible to connect for example Safari to the iOS simulator to the bug the web UI and if you also take a look at the project file we have something that are not the same as in a regular Mao app we have another SDK as specified here so instead of microsoft.net SDK erase raiser in um ordinary I don't know if ordinary is a good way but the non in a non-mar Blazer malware app we don't we only have Microsoft not SDK instead of not SDK eraser and here we can see the target platforms we have not 600.60rs.net six Mac Catalyst and we also have Windows here if we were running this on a Windows machine so I don't think it's something more interesting here so we can now go and create a new library for our shared code and for that we need to create eraser class Library should not be a ordinary class Library should not be a.net Maui class library because I think that is also something you can do not here okay strange I think they had that before but that was maybe another version of the visual studio so I took it on the six again we should not add support from pages and views because Blazers have components not pages and not use so I'm not from and they core for example because we will have all our core logic here and now we can see that this also has the same project SDK here but racer and that makes it possible to have the Blazer component in there or razor components if you prefer to call it lemon so okay so then we need to move some stuff over here so we will move all our models pages and the services so that will be pretty straightforward but we can start with the models okay seems like we already had them here maybe because I did this with this project before but that's good then we'll save us some time here let's see what build error we have yeah we don't have the nuget packages that we need of course because if we look here we have uh yeah no okay we don't have them here but when we don't reference all this we need to add the caching the memory cache libraries so let's go to nougat we need to wait a bit and the reason that the files still are here is that I just did a git reset and it was it was just created not changed so they stayed we need this extensions dot no not that one caching can we search just like that yes Microsoft extensions caching memory let's see so we have the components moved over here we should also move the pages and not all of them you should not move the host file and not the layout so let's go here and create a folder for that pages like that and then we can copy all of those files over just like that and it seems like we have an error in here so let's see what we need then maybe as the rebuild we have some other problems here too let's see what that is models about schedule but they are here so that should be fine I should not care about this yes run times because that are in the generated file and that will probably work when we fixed other errors yeah but let's do write the full namespace we'll probably solve it okay let's do a rebuild okay strange schedule racer that or something with that see what it should be models schedule and we have that ah okay that's the reason we have the wrong namespace here but we can fix that we can import this namespace that this is why you should start with the thinking about code sharing already when you build something you should not do like I did here create a web project with everything inside it start with code sharing in mind and you will don't have problems like this okay but we already have no we should not have it in global using the error is an eraser file and that that means that we need to have it in this imports.tracer so using and then okay that will probably fix the error and let's see if I removed like this okay I think we need models.schedule because we have another schedule model somewhere some Library okay okay we do like this instead we don't have time to struggle with some small errors because what I prepared a bit so I have this project I don't know see if it is this one where I have moved all the files already no it was not sorry so I don't know why Visual Studio is so slow sometimes it's maybe because of that are running streaming software also okay now we start we do like this we change to this running app example and then we can talk about it so we're waiting for it to load so if you want you can split this in more projects as well you can have one project for your UI components and you can have one for your business logic now I have all all the things that are shared in the same library but it depends on your project how you want that to be I think we do like this we kill Visual Studio I need to force quit it yeah just because of that maybe I woke up yeah I heard okay Harry's have waken up so then we can take a look here again so I moved all the components and moved the models I moved the services and as you could see in the web project I had the caching service under the memory cache because I don't want to go to sessionize every time I wanted to know the speakers because we use such a nice as the API for for this app so I use memory cache as I said but that is not maybe relevant on an app so what I did then is that I've wrapped like memory cache in another name interface like called icache service to have a more specific implementation on the apps but I can still have the memory cache on that when I set that up in the startup here so on web I use memory cache service and if you go to the app project I have another implementation here called let's see where we have that one here file cache service so instead I cache it on file and that means that even if the app is killed I still have the cash left and what's important here when you're doing caches in your apps is that you place them in the cache directory not in the app directory because you don't want caches to be part of the backups if the user back up their device you don't want the cache folder to be backed up for them at least they don't want it because that will make the backup unnecessary big okay so if we take a look at the mobile program.cs here we instead have the I cache service you can remove that one we don't need that because we have a cash service so and of course we should have the interface here in the shared Library so we can use them on both projects so let's see if we can build and run this so I can show you what I have done it will always take a bit of time the first time you build a dotnet malware app because it needs to recreate everything next time it will be faster because then it can reuse a few things that they from the first build because it will not rebuild everything so it will take a lot of time now maybe not a lot of time but maybe a minute or so but I can show you some how you use the Blazer webview first I have not done that I realize so if you go to main page that is in the app is always a sample page or yeah you can do this in season two of course but you will always have an app page that you can use and then you need a blazer webview you need a host page and you'll find that host page here in the www folder you can open that see how that looks here and here you will have this div and here we have an ID app remember that and if we go back to the main page here you can see that here we said selector app and that means that we will replace this div or the content in this div with a Blazer component in this example the main component that still are in the.net Maui project because in this main dot eraser we have the router and that makes it possible for us to navigate inside of the Blazer content if we don't have a router we cannot navigate but in some cases we maybe just want to show a single page then we can use a page or a component without a router because this Blazer webview is just like all other.net malway components you can place it as a whole page yeah you can have it as the whole app and but you can also have it just like part of a page so that makes it really useful and possible for you to produce content if you don't want to reuse a whole page you maybe have some great components let's say a component for visualized data then you can reuse that in your apps you don't have to build that again or you can use some nice components from third-party vendor select progress tellerics in Fusion or some free great components that are out there okay let's see why this did not build yeah it seems like some that maybe we don't need to care about or we maybe need to restart Visual Studio I would say that was not a real error at least not in our code so let's try to start this on an iPhone simulator and see what happens so okay now we have not serve errors so that means that the simulator soon will be started so here we have it yeah and the simulator is also a bit slow the first time but you don't need to close it just close to the bugger and that means that everything will start faster next time and usually it takes a little bit longer to start the first time too oh I don't know why everything is so slow today usually not this slow working with my Mac but maybe it's because of obs soon we will have it hopefully at least start moving in the console here so yeah here we have it here we have the website as an app and as you can see here I also have added some native tabs and I will show you how I did that soon so here we can navigate we can go and see the 2022 speakers exactly as with the web application and here we can of course add some padding if we want the nicer experience in the top or some safe areas maybe okay so how did I add the tabs here because the tabs are native and the UI are web so let's close to the bugger and go to the code yeah okay so if you go here to app dot thermal where everything starts on the Maui side of the app we set the main page here and I set it to app shell and app shell is this file here of type shell and shell is like the main layout of your app not on pages it's like on your app you can add the navigation menus yeah and stuff like that I can't really understand why it is so slow today it used not to be any problem to run the streaming software and we just do it at the same time but I also see saw that when I started this that I had an update of OBS so maybe I need to go and update that for the next stream so I'm really sorry about that things take a bit longer than it should so here we can see I have the shell and I have here at the tab bar with three tabs we have homes speakers and sponsors and here we have a name page for each Tab and here on main page we had the Blazer webview and that loaded the main component where we have the router let's see if we can take a look at that one now yeah here we have it so it's a router and it's loading the main layout or here's something good that you also need to think about when having components in a separate assembly you need to add additional assemblies and that is because when you're starting a router up it will scan for page and directives on a page so if you go to index here for example you can see that we have page here and we have the path to it it would scan for those and so it will be possible to navigate so if we go back to app shell and then we can see what other tabs we had we have speakers and sponsors so we can take a look at the speaker space for example and here we can see I also load the main component to have the router but if we take a look at the code behind I also send some parameters to the root component and to do that right now we need to do it from code behind like this I could not manage to do it in saml at least and I also tried to make some bindings to the parameters probably but it seems like it's not bindable so here we have a parameter URL and that is with speakers and 2022 and that means that I want to load the speakers patients at the parameter year to 2022 so if you go back here to main racer you can see here in the on parameter set and the parameter called URL so this the compo sorry when I set the components root components and the parameters on the Blazer webview site I will have this URL set and here I use the Blazer navigation and navigate to to navigate to that page and this will be so fast so you will not see that it first loading the main component a little or the index page because it will be more or less directly loading the speaker's page and if we go to the speakers component or the speakers page here everything is components when talking about Blazer but we can call them a page when we have this page directly here we can see that we also have this gr parameter here so it knows what the data to load so if we run the app again yeah it won't hopefully be faster now than last time but you never know because my computer seems to be very slow today yeah at least it's built it's faster this time yeah it's also started faster so here we have speakers and that makes it possible for the users to navigate directly to the speakers page they don't need to do the navigation here and I could think that can be pretty smooth if you are in a that you can see that directly because that's something you want to know about directly when you open an app like this and here we also have a sponsors tab not that great style I see so if we go here and look at this page you you can see that only a part of the page here is the Blazer webview so here we have the place of every View and we have a label here and this means that a label are a native label but one downside with blaze webview when you do like this is that you write now at least need to set height request on it otherwise it will not show up so in this case it is 500. so that's why we have this part purple now you can see this is old sponsor page because right now we also have new sponsors for next year like progress for example but if you will do this for real or if you will continue to work with this app you will of course fix this the colors will match but I wanted to make it obvious what part it was the web content and what part that was the Blazer webview but you can see here that this is the web content and this is the native content except like sponsors label disappeared of some some reasons also maybe we need to add some padding because we will be it will be behind this navigation bar so let's say at 15 padding and maybe hot reload will work today also yeah I did okay strange that we did not get the the label there you can say spacing here so I have some spacing between the label and the laser webview to see what happened then yeah it will just move the labeled down maybe we have some text color we try text color red yeah here it is okay that was some styling already added on it maybe that did a text color white so okay so here we have the native label and here we have the web content baked in to the native page yeah so one more thing to show we can go back to speakers page here where we have some more web content is how you can use the browsers developer tools to debug the UI so I will go and start Safari for iOS for Android you will use the Edge or Chrome to do this but for for iOS you need to use Safari so if you go to develop I already enabled developer mode that's something you need to do to make this possible and here we can see my devices so we have the simulator here I don't know why we have multiple of them but it seems like it is the same so select that one and here we have the web inspector of safari and then we can use that together with the simulator so if we go here and Mark this okay you can see things happens on the site so we can take a lot okay we have this height of the skyline okay that's 500 maybe we can try to change it because it on app it look very much so say 250 pixels on that okay that looks maybe better here and then we can go and edit the CSS file in uh Visual Studio but this is good if you want to try something out or if you have some errors because you can also see the console here so if you have some errors that are not visible to visual studio you can often see them here you can also see some Network on the website you can see all the images how fast they are loading and so on maybe some storage I don't know if that relevant for an app but yeah it's possible to do everything you do when you normally do web development inside of here yeah okay so uh right now things went a bit faster than I had planned because of the problems with the visual studio and we opened an already finished solution so uh if you have some questions you can ask them to me in the chat and I will do my best to answer them otherwise I have shown everything I wanted to show you today so we wait a few minutes to see if there are any questions otherwise I will end the stream and if you don't subscribe to my channel and you're interested in total Maui content and other.net content Please Subscribe and like my videos that will help me producing more content and you can also write in the chat here or add a comment what you want me to talk about in a video or maybe an upcoming live stream but if I will do more live streams I need to fix my environment so it will work better than it did today okay it seems like there are no questions so thank you very much for watching this video and I hope you learned something even if I struggled a bit with a vicious dude and my slow uh computer so I will end the stream now and I will go and update OBS and see if things works better thank you very much for watching and hopefully we'll see you next time bye bye

Channel: Daniel Hindrikes

Views: 2,596

Keywords:

Id: _mHZME9GWHI

Length: 36min 18sec (2178 seconds)

Published: Tue Dec 20 2022