.NET MAUI & Blazor - Sharing code between app and web

in this video i will build a web application and i will build a mobile app for ios android mac and windows and i will use dotnet maui and blazer and i will share a lot of code between the app and the web [Music] welcome to a new video about the.net maui in this video we will talk about a blazer and maui if you don't have watched my introduction video about the.net maui and blazer hybrid you should go and watch that video but in this video we'll focus more on sharing code between web and app so we will set up a visual studio solution do some basic architecture to show you how to use blazer maui to build both places server app and dotnet maui app for ios android mac windows but you can also use everything here for blazer webassembly even if i will use blazer server in these examples so let's get started okay so here we are now in visual studio i have opened the new project templates so what we first will do is to create a.net maui blaze wrap it doesn't matter on what to start with but i will start with the maui app and we give it a name like hybrid dot native clients create it and then we go here and we'll create a new project a blazer server app called hybrid hybrid.web and here we have that one and here we can also go and create a new project for the sharecode and that should be racer class library and we can call it hybrid dot shared and if of course you can split this up in more pieces if you want to to have only ui code in the shared product and you can have one project also for the business logic but in this demo i don't want to have too many projects so we will put all the shared code in the same project so then we can go to the web project and add that project as a dependency and then we do the same in the native clients project like this okay now we have a shell to get started with building this application so what we first need is some sort of data service for example that returns data to the application so we can create that one in this project create a new folder call it services and then we add an interface because i think it's important to have interfaces to make things more testable an empty interface i data service and in some services you maybe want to have a specific service for the native clients and one for the web and in that case you will only have the interface in the shared project and not the implementation but for this data service we can have the implementation here because it's not unique for some of the projects so create a class data service and implementate the i data service interface and of course we want this data service to do something so we can have it returning just a list of strings get data implement interface and then we can return some data what can be fun to have maybe guitar manufacturers like gibson thunder fender gretch uh we can back here ah we don't need to have more of them now we have a red here and that's because this returns a task and we return a list so we can instead do like this return task dot from result and if you have had real code here you could of course have it like an async method but we don't need that so we can go here and we can create a new page so we do that in a page folder called page and add a new file then we go here to asp.net core and create a razer component because everything our component when we're talking about blazer as you can see here we have eraser page also but you should not use that for blazer you should use eraser component so yeah we can call it index the first page of our application guitars we can inject the i data service it deserves just like this but to make this injection work we need to go and register the interface in the dependence injection container and that is something we need to do on both the native clients and on the web application so let's start with the native clients so we go to the maui program and we add builder dot services dot add a singleton data service and that should be mapped to data services then we can copy this and we can go to the web application on the program.cs and we add the same thing here if we have had a different invitation on different platforms we can configure that here and i will show you that later in this video so now we can clean this up a bit because you will get some pages when you create from the template and we don't need them anymore so we delete them just like this and we do the same here in the web application we delete counter we delete fetch data will delete index we should have this layout.cshtml left and also the host file and this error can also be saved so and here we have some shared components that we don't need so we delete them too and we do the same for the native clients project if we want to have the layout file left we can do that but let's delete that one too delete okay so now we can go to the main page december and here we can see that our root component is the main component so let's go to main component and see what happens here and here we can see that we load the main layout but we just deleted that one but that is because we want to have a shared layout between all those applications so we go here to the hybrid shared project we create a new racer component called main layout like this and the layout needs to have this layout component base as the base class so we add that and then we can add a new header h1 like daniel's demo app and then we render the body and we do that with the body variable from the base class okay so that should be enough but what we need to do is that we need to go and add those namespaces to this import.tracer so they will be imported so we do that that we can remove that one because that doesn't exist anymore using hybrid not shared and where the pages namespace using hybrid dot pages like this okay so now we can go here to the main racer and we can see now it's not red here anymore so let's see if we can run this and see if if it works so we can start to run it on mac and now we got an exception that the i data service interface cannot be found and that is because we need to add that to the imports file also but in this case we will add it to the imports file in the shared project so using hybrid dot shared dot services and now we should be able to run this as you can see here it worked to load the main layout but it did not work to load the index file to make that work we need to do some more steps so the first thing we need to do is that we need to go to the main racer here and we need to tell it that we have another assemblage that will search for pages and compo so so what we do is we use this additional assemblies property then we pass an array of assemblies so we do typo shared dot main layout and then dot assembly and now it will search that assembly for pages also but we also need to go and say that this index component is a page so we do that by doing this and this will be the root page if we add just a slash and now we can try to restart that and see if it can find the page yes here it is but without no data because we have not added any data here yet okay if we want this to work even on the web page we need to add this there too of course so we go down here to the app tracer and we add it to the router just like that okay let's show the guitar manufacturers in the page so here we override the on initialize async method await that method and here we can have a result variable and we use the data service let's get the data and then we put a property or a field if you want to but for me as an app developer that is used to use mvm it feels better with a property but it can be private prior list string data and we give it a default value but first we need to define it as a property and the reason that we give it a default value is to avoid null reference exceptions so here we go and we assign the data property with the result variable just like this and then we need to do this protected okay so let's show the data so here we add for each loop for each uh i wore item in data and then we just write out string like this okay we can also add a line break some then we can run the epic the web application so we set that as a start project and we run it and now we got an exception and the reason for that is that we only added those namespaces to the app so we need to go to the import.tracer and we add them here as well and now we can run it and here we have the web application having exactly the same code that the app both have the same web ui but the c-sharp code on the app is running on the device with native access and in the web application it runs on the server because this is a blazer server app if it's a blazer webassembly app it will run in the browser okay let's add some unique platform features that are different from the app and the web so the feature we will add to this application is that we want to show the yield position of the user and when we do that on the mobile phone for example we want to use the eps and on the web application we want to use the htf ml5 jo location apis so we will create interface we can call it i a service like this we add one method get position but we need a class also that we can return you can call it just position and that will have a lot to the longitude double latitude and longitude just like this and then we return a task of position and we call the method getposition okay now we can go and create two different implementations of this so we do that in the app project we create a new folder called services and we add a new class we can call it app you service app you service just like that then we take the iel sir this interface implement it and then now we can use mao essentials here if you want so we don't need to write this code specific for each platform there are some setup you need to do for each platform for example adding some stuff to the info.plist file i already prepared that we don't need to do that because that's not relevant for what i want to show in this video so we can go here and we can say position is equal to a weight you location dot default and get location async like that and now we can return new position and latitude is positioned at latitude position longitude okay so simple is it on the app application so now we go to maui program and we say so builder dot services that add can be a singleton i your service and resolve that app year service okay now we can go back to our index page here and then we can inject this i jao service your service and then we can create a new property stream latitude get set and longitude and then we do before the guitars we can do like this my position is latitude longitude so and now we only need to set those uh variables so here we have a noodle warning so we can do it like that so okay and okay our position is await dot jo service dot get position and latitude is position latitude longitude is position dot longitude so here we have the application running on ios and now we get the permissions dialog so we need to prove that the app can read the position so we've done that and here we have the coordinates so that is how it will be on ios and now we can go and create implementation for the web application so we create a services folder here too services and then we create a new class web u service we implement the iu service interface again and now to access this html5 apis from blazer we can go and write some javascript but i don't want to do that and there are people that already have done that for us so we can use an external library for that so we will go and add that nougat package and it's called darnton.blazer.device interrupt add that package so we create a new ao location services as you can see it requires an ias runtime so we inject that into our service iis time is run time assign it to field and now we can just pass it to that library and now we can do var result it is service dot get current position and that is an async method so we will add a weight and now we can do return new position latitude is result result dot position dot chords dot latitude and the same for longitude result.position.court.longitude okay let's try this okay so then we got this exception javascript interrupt calls cannot be issued at this time this is because the component is being statically rendered when pre-rending is enabled javascript in rows can only be performed during the on after render async okay and that is because here we added the on initial i think override and we have the get position here so we need to move that to the on after render async method and that should work both on the app on and on the web so yeah let's do that so and now we can try again and here we have the blazer app in the browser asking for permissions to get the position so let's allow that okay so what we have done now is that we have built an app or we have built multiple apps we have built a website and we're sharing code between them both business logic and ui but we also have some code that are unique for the app and that are unique for the web but we call that from share sharecode so that was everything for today if you want to know more about that maui blazer and how to use them together i recommend you to subscribe to my channel and please like this video see you soon bye bye

Channel: Daniel Hindrikes

Views: 7,375

Keywords:

Id: A_C8X-b2qXE

Length: 25min 30sec (1530 seconds)

Published: Fri Sep 02 2022