Accessing Platform Features in Blazor Hybrid [Pt 5] | Blazor Hybrid for Beginners

[Music] welcome back everyone to the Blazer hybrid beginner series I'm your host James montagno a program manager on the developer Community team here at Microsoft now so far we've learned all about Blazer hybrid we've installed Visual Studio 2022 and got our development machine setup we've created our first project and looked at the architecture we started building out a to-do application that Sav aves information to the file system so we can save and load items on iOS Android Mac and Windows using Blazer hybrid inside of a mai application now so far we've just built out our razor components and we're displaying all of our UI inside of the Blazer H uh hybrid web view inside of our application now one of my favorite parts of developing with blazer hybrid is that since they run inside of these native platforms we can add native features so things like geolocation device sensors connectivity and so much more that make these unique platforms really awesome for creating awesome experiences for our users so what this means is that since you're building with blazer hybrid inside a d Maui you have access to all those apis for iOS Android Mac and windows what it also means is that with Don Maui you have a bunch of common abstracted platform features that you can access from a single codebase which is really cool so let's go ahead and get started now the place I tell people to start is theet Maui documentation now even though we're building with blazer hybrid it's still really good to dive through how to get set up build your first app package and really complex things with net Maui it also will show you how to use those native API features so here for example under platforms we can look at the platform integration and overview this will show you how to access access iOS Android Mac and windows apis directly or how to use the ones that are abstracted into a common API things like app actions information Maps permissions Version Control contacts email SMS battery device display flashlight geocoding location so much more there's so much built in to Don Mai it's fantastic the one that we're going to want to use specifically if I scroll up here is networking this is going to show us how to access things things such as if I'm connected to the internet for example or what profiles if I'm on a Wi-Fi or ethernet for example and this is really important because when you're building native desktop and mobile apps you want to add these unique features that your users are expected if you're offline and you can't make web requests off to access your to-do items then should probably display a little message there for example so let's now integrate this into our application so here we can see up top that everything is available through connectivity so we have a full interface that we can inject into our application so let's go ahead and take a look at how to do this so so far our application looks like this it has a counter it has fetch items and it has our to-dos so I could go in and say add uh connectivity I'm going to say add too and I'm going to hit save when I go back and forth this is automatically going to save it there so I can add another item like test it out there we go I can check that one out off hit save and here we go back and forth It's good to go we have a single razor file here that has our to-do header that's showing us how many are left we're iterating through the to-do items we have a few buttons here to add a to-do item and save and then we have a little bit of code to call into our to-do service to load those items save those items and to add those to-do items to our list so really all of that in just 50 lines of code which is really great all right so let's say we want to add access that connectivity the first thing we're going to do is go into our Maui program now we've already added our weather forecast service and our to-do service we can also add our I connectivity so I'm going to say builder. services. add Singleton I'm going to say I connectivity perfect and then what I can do is I can simply pass in the implementation of it or I can actually pass in a function so it'll lazily load so let's do that I'm just going to say connectivity Dot and this will show me the current one there we go so now I can inject in I connectivity and it will automatically in a Singleton pattern create that for me and return it so I can access that on any page I only need one instance of this so that's why I'm going to use a Singleton here so I have one access to that uh connectivity API and use it throughout my app now if we go back to the razor uh page for the to-dos we've injected that to-do service we can also inject here the IE connectivity now since this is a d Maui application you might be wondering like where did this come from well there's a bunch of global implicit usings that are automatically brought in and here we can see this interface is coming from Microsoft Maui networking. connectivity that's brought in automatically for us so that's why everything just sort of naturally came in now let's go ahead and give this a name so I'm going to call this connectivity service just like that and now we can start using it so if I go down we might for example want to save if I'm online or not save when I'm offline right so we might want to display something to our user so here I'm just saving it locally so it doesn't actually matter but let's say I wanted to upload this for example so here I'm just going to say uh there we go button I'm going to say upload and here say upload and now what I can do is I can say void upload right and at this point if I wanted to upload my to-do items I need to make sure that I'm online right that would be pretty important so all we need to do is fill in the upload so let's do something first let me just say bull has internet and we're going to use this to display you know something inside the UI so by default I'm just going to say true it has internet perfect so in the upload what we want to do is fill in that has internet so let me go ahead and say um if the connectivity service is null then probably don't want to use it we just want to go ahead and return okay so for some reason we didn't register it or didn't new up uh for some reason on a platform that doesn't support it it might be null so we're just going to go ahead and and say that we're fine at this point else I can say has internet this a Boolean I'm going to say equals connectivity service Dot and I can check the network access I can check the profiles I can even Loop into a event handler when the connectivity changes so here for example I'm just going to see if the network access equals equals network access and there's a bunch of them here I can say there's none unknown internet local constrained internet there's a bunch of different ones based on what's happening on my device so if I have internet I have internet so there we go perfect so now we can update our UI based on this so I'm going to say up here a if does not has internet if I don't have internet I'm just going to go and display no internet there we go perfect awesome so now with our application I'm just going to go ahead and restart it there we go and we can go off and add a breakpoint here as well to see if we have internet or not now I'm on Wi-Fi locally so ideally I should have internet that's going on in my machine but let's go ahead and see what happens here all right we have fetched data we have to-dos and we have the upload button so I'm going to click on upload and we can see that I have a connectivity service which is quite nice and the network access is internet so that's really nice so I'm going to add another breakpoint here and has internet is true so we should be totally good to go perfect nothing is displaying in our UI uploaded it magically to the internet now what I'm going to do is I'm going to go and I'm going to turn on airplane mode perfect now when I'm in airplane mode I can go back and I can hit the upload button again now in this case when I hover over the connectivity service we can see that the network access is unknown so I don't have internet right so internet access is false and now we can see no internet is displayed right inside of our application so automatically for us if I come back down I turn off airplane mode right and we get our Mouse up and running again I hit upload again at this point we have internet yet again which is great and we can go ahead and upload it and that will be disappearing from our user interface that's really really neat the same functionality works on every single platform D supports so iOS Android Mac and windows all automatically now beyond that inside of our solution Explorer I want to point out you still have access to those individual platform apis so if I go into the platforms folder we can see under Android we have Android resources under iOS iOS resources and more so when I open up that main activity we have these Android namespaces so things like using I can say Android dot we have access to those specific Android namespaces including the Android app X libraries as well the same thing is true over here inside of iOS if I open up my iOS project I can see using UI kit for example or using core audio Bluetooth data a lot more so that means if something isn't abstracted by D Maui into single API you have access to do it and create your own interface on top of it now the last point that I'll mention here is that you get to take advantage of the vast dami ecosystem that's out there since the Blazer hybrid app that we're building is built with onui you can use amazing Community UI libraries and plugins that abstract additional functionality so things like Bluetooth or background updates those are available to you automatically through libraries I'll put some of my favorites in the show notes below but feel free to add comments if you're watching this over on YouTube to share your favorite libraries that you found and that you're using all right that's going to do it for this video we've easily integrated connectivity into our application with with just a few lines of code we registered as a dependency we accessed the service automatically and we even updated the UI to see if there was internet access at all now in the next video we will take it a step further in blending into more native functionality and spice this application up with a little bit of native UI so stay tuned for more in the Blazer hybrid beginner [Music] series

Channel: dotnet

Views: 3,357

Keywords: .NET, Blazor, Blazor Hybrid

Id: Vgs4SYdZ_Qk

Length: 11min 30sec (690 seconds)

Published: Fri Nov 10 2023