Platform Features and Device Sensors - .NET MAUI Tutorial Step-by-Step

in this part part six already of the.net biocrash course we're going to see how to leverage platform functionality like the location services the gps sensors all those kinds of things [Music] for the people just coming into this video this is part of a course i would highly recommend that you watch the full course front to back so make sure to review the playlist that's popping up on your screen right now so let's talk a little bit about the device features right so all the devices mostly roughly have the same functionalities and the same sensors like a gps sensor to determine your location a camera also a unified api to open like the default maps application maybe share some content share an image to another application that kind of stuff that was all combined into a package that was called essentials back in xamarin essentials and also in done at maui essentials early on um but we decided like you know somewhere along the way that not everyone might know about the whole history why it's called essentials and why it's bundled into one package because now new people looking at don and maui like maybe you just need to use those apis and it would make much more sense to not be in microsoft.maui.essentials but in microsoft.maui.devices.sensors or something right in that namespace so that's why we divided like all the apis that were formerly known as essentials into the separate namespaces so that now it's just another api that will allow you to get the location or that will get you a image that you are picking from the gallery or taking through the camera now actually maybe enough with the talking already in our monkey finder what we're going to implement is um the actual location services that i've been mentioning a couple of times now because all the monkeys had a location attached which is of course well i don't know where the locations come from james montemagno set that up maybe it's it's based on some kind of truth but you know mostly it's just arbitrary gps locations all around the world and we're going to use the location services on our device to determine which monkey is the closest to us and whenever we actually found a monkey we can just click a button and it will open the default maps on the platform that we're running on and show us the monkey location so that we can navigate towards it if that's what we want let's go over to visual studio and let's see how to do all this for this video we will be working with the part 4 platform features folder right here that should be cloned from the repository onto your local disk whenever you open that just open the solution and you will end up in visual studio like i did now i actually ran the application already and the application this is like what where we ended on the previous part we've implemented this get monkeys we did that in an earlier video then whenever you click here you will see the detail screen of this monkey with the navigation to shell all that kind of stuff that is what we saw in the previous video now what we want to add is here we see a nice little space here down at the bottom where there might fit another button and that button is going to show us the closest monkey to us because all of these monkeys it isn't shown in the ui um have the coordinates uh the gps coordinates and with the platform features so on the device we can actually use the location services get our own gps location or however it's going to determine our location and it can see like where we are in the world and what the closest monkey is to us so we're going to implement that now to do that um first let me stop running this application right here to do that we're going to do it on the list page on the main page as you already guessed and know from the previous videos so let's go over to our views well actually our view model i'm going to implement it in the view model first and we're going to go to our monkeys view model and here at the the top basically i'm going to say i geolocation and that is the api is that essential so like i mentioned the previously essentials provides us to use the geolocation services on the device and actually determine our own location so let's name this geolocation as well and we're going to do this of course through dependency injection so here in my constructor i'm going to also add the well well it also it already predicts what i want to do here so ig location and it's going to assign that to this view location so i only need to do tab i think and boom i didn't even need to do the typing this is some visual studio magic going on here okay great um so that is implemented now and actually let's go over to our maui program now first so to the solution explorer and our maui program and what i'm going to do now is register those services right so we already have the monkey service here let's actually add that well i'm going to add two first i'm going to do the igl location and you can see i'm now registering a interface right and an interface isn't something that can be instantiated by itself so we're going to have to specify somehow which instance we're going to add here now for the other ones it's easy because um the monkey service is just a concrete type right it can just um go there it can just do like at runtime new monkey service and it will end up with a new monkey service but for the igu location you can't do that now this definitely has its use like if you don't have any use to create an interface for it if you don't want to swap out the monkey surface totally fine you can use it with concrete types and you can still get all the benefits of the dependency injection if you do want to swap out like the ig location maybe you want to use a mock location whenever you're testing this um then you can specify your own implementation now you can do that by specifying here a geolocation so comma geolocation now it will say like hey whenever you're going to request this ig location you could also use this geolocation and instantiate that basically but you know this is a static type so it's not going to work in this case but you can if i make this actually monkey service oh it's also not going to work because it doesn't implement ig location right but you get the idea but you know you this only works if you have like a default constructor without any parameters if you have a constructor with parameters then you can also provide your actual concrete implementation yourself and that's what we're going to do in this case so we have the geolocation and we have dot default because it's a static typewrite and the default has like a default implementation for the geolocation that will just get you the default one that's implemented through essentials now if you've worked with xamarin essentials before then there are two things new here all the services have interfaces so we can use it with dependency injection and this kind of like change that we have now geolocation.default for other apis it's um i think for display info for instance it's displayinfo.current because it's kind of like the current display um but we don't really have different geolocation providers right so that's kind of the difference between default and and current here um so yeah we just registered this with with the default one but if you want to make your own mock one just create a class that implements ig location return may be hard-coded coordinates and it will work all the same but you can now run tests over it and while i'm here i'm also going to do the same for imap which is also a api from originally essentials and here i'm going to say map dot default as well we'll see that we'll get to that in a little bit just forget it for now um so now that we've done this we want to go to our monkey's view model again and we need to have another i command right we have this one and this i command will source generate through the community toolkit mvvm will create a command that is actually something the loosely coupled event that we can use to actually trigger code so let's create that one make sure that you're outside of this method scope here so just do this and this is inside of our class scope else it doesn't work it doesn't do the source generation ask me how i know so here we're going to do i command and i'm going to do async we can just do the private one because it will generate the public one for us async task and i'm going to name this get closest whoops closest monkey and there's still a typo in there closest closest all right there we are and you can immediately see the two references are coming up so the source generator is already doing its work um which is kind of awesome if you go look at the solution explorer if you want to have a hint on what's going on to the solution explorer and you go here to dependencies and i'm working on android now but it should have it for all the targets right here you can see the analyzers and here let me make this a little bit bigger we have this community toolkit mvvm source generators and we have like all the generators that are available we're working with the i command right now and if we go here we can see that it generated for us the get closest monkey and we can actually inspect what it generated for us we can't make changes here because it's read only it's generated right but you can see it's it's kind of like gibberish because it's hard to read and it just generated things but you can hear see that this is a public iasync relay command get closest monkey command so it generates that for us that's how you can have a little peek at what's going on on the inside so now that we have that actually let me copy a little bit of code here actually it's a lot of code so you don't have to watch me type here um i'm going to paste the implementation here and the first thing that we're going to do is see that if we're is busy so we implemented that in the previous video if we're currently getting data monkey data then we're not going to bother we shouldn't even get here so we're just going to return or if we don't have any monkeys in our list so we didn't retrieve the data yet we're going to return because we cannot get the closest location then we're going to now for your implementation this might very much be different because you know i don't know what you're trying to write but for our little sample application here this is going to be enough um then inside of our try block we're going to see if there is a cached location so this is kind of like a shared thing we are just accessing the geolocation service on our device it can have a cache location from another application that just requested the location and we don't need to do anything right that will spare us battery network traffic all that kind of stuff so we're going to see this is a api from essentials get last known location async that's going to see if there is a location that we already can use and if that is null then we're going to go out to the next api and we're going to do get location async that will do an actual active new request to get the location for our device and we have to specify some parameters we can do that with a new location request and we can set a accuracy and the timeout so for the accuracy we set it to medium this is kind of something that's different depending on your use case if you're going to use turn by turn navigation for this road follow it for 20 miles then take the next exit then you want to use probably a more accurate one for finding a potential monkey somewhere around the globe the accuracy is medium that's perfectly fine so it's kind of like dependent on how far you want to be this accurate yes or no and the the more accurate it needs to be the longer it can take to actually determine your locations and that's kind of the trade-off that you have and that's also where the timeout is for we're going to wait at most 30 seconds so if you're maybe inside of a tunnel then the location cannot really be determined it will hit those 30 seconds and it will then throw an exception and we will go to this cat right here and show to the user like hey this timed out we can determine the location but we're going to assume the happy path um so we're going to actually find from the monkeys we have this monkey's collection where we have all our monkeys downloaded from the internet and deserialized through json and we're going to order them by and you can see this is the location that is from our device and we're going to do calculate distance now how cool is that that is a helper that also comes from the geolocation apis that can calculate the distance between new location and this is our monkey latitude and longitude and our own location so it's going to calculate the distance and in this case it's going to be in miles you can also do this in kilometers or any other measurements and we're going to order it by so we're going to get the closest one and then we're just going to take the first one or the default one so it can be null as well so technically we should probably do some null check here as well but that's a nice exercise for you to do at home so we're going to get that first monkey and then we're going to show a display a display alert and we're going to say hey this is the monkey that is closest to you and it's at this location there is another important part about permissions let me first just make this end-to-end working i will go to add the button to the view and then i'll go into the permissions so let's go over to our solution explorer oops make this a little bit less cluttery here and then i'm going to go to the views and to the main page and here you know if you recall from the earlier video we have like the whole layout with the collection view where it shows all of our monkeys we have the gesture recognizer to tap on a monkey this is all things that we set up but we also have this button here so let's add the other button i'm going to paste that in and with this button you can see the positioning is done through this grid right so it's a little repeat exercise here this works for our enclosing grid so we're inside of a grid right here and we're going to position this in the grid.row one so we have two rows this is going to be in the one so in the second one and grid column one so that's going to be again zero one and it's going to be in the down right corner where we have the little space now here the command you can see get closest monkey command that's generated for us and we're going to do this is enabled through the is not busy binding which is also generated through the mvpm2 kit that we have installed here and through the data binding where we enable and disable the things here right and we have this style and a margin again the styles we will get to that in a little bit so now we have this button button in place and we can press the button and it will find the closest monkey for us like i said live isn't as easy for mobile developers or you know also on the desktop this gets a little bit weird because especially location can be a privacy sensitive thing um so that's definitely something that you need permissions for and for a lot of the essentials apis i just keep calling on that you will need something with the permissions you will need to request the right permission so this is something that still is very much platform specific so for android work instance we can do it in a couple of different ways again i'm going to go to the solution explorer and we're going to explore the platforms folder here um and for android we did this through an assembly info.cs so this kind of like a dot net framework kind of thing um you can just create that file and it will be included and here we can register with these kinds of attributes on the assembly level user's permission android manifest permission access course location xs file location you can also do users feature that will i think make clear in the app store that this uses your location features or your gps or network and it if you set the required to true i think um devices that do not have a gps sensor will automatically be um excluded from the download so people who do not have a gps chip will not be able to download your application there's a lot of docs on this go check it out in the links below but you will have to list all these permissions so that people know what is going on right what you're going to do with this so you can declare it like this what you can also do is go to your solution explorer and go to the androidmanifest.xml which is kind of like the the really platform native and way of specifying the manifest for android and you can here see actually um this user's permission here as well you can duplicate this with all the permissions that you just saw if you're watching this sometime in the future i hope that we have the graphical interface back for this in visual studio we have a graphical interface that lists all the permissions and just you just need to check the right ones and they will be added for you so that's definitely a possibility as well but be aware of these permissions whenever you want to go out to the store if you take a wrong permission that you're not even using the user might be like i don't know if you need access to my contacts or to my i don't know gps center that seems weird for an app that you know typically doesn't use that so if you have permissions in there um it might be you know double check those because it might prevent users from installing it so uh make definitely sure that they're okay now for the same thing we also have this of course you need to do this for all the platforms that you want to support so for ios we have this info p list this is well we actually have the graphical interface here but i'm not sure if the permissions are already in here i don't think so um so here also we have a list with the permissions that you might be able to set up but this is another kind of like xml file so you can right click open with and we can just do the xml text editor and here you can see you will add have to add the right keys um in this case we already set it up for you so you don't need to worry about it we have the ns location when in user's description and on ios you can actually say like hey this is the reason why i want to use your location so that the user knows like okay that makes sense you need to find the monkey so that is something that i can trust so you set that up in the info peels like this the same kind of like for mac os that's kind of like the same concept also an info.plist and for windows you need to do it through the package app at manifest and i think we have the graphical editor for this one as well and you could see here i think you need to do it through the capabilities um which it doesn't really list right here right now so definitely go check out the documentation but it's set up maybe you know it should be set up for windows here as well um in the source so definitely just go check that out it's a good note but also like for the apis like for the geolocation that's also good to know um if you are going to do the geolocation it will automatically check for you it has some things built in to check for you if the permission is granted yes or no and else it will pop a little dialogue to act ask the user the again i keep calling it the essentials apis you also have permissions where you can actually check like hey did i declare this permission in the manifest did the user deny or accept the the things what is kind of like the granularity for the location services that i have so a lot to cover there which i'm not going to do right now but it's definitely good to know um that it's there so with this actually um it's time i think to just run this we're going to run this on the android simulator and we're going to see if we actually have the button and if we click it what will happen now while this is loading i think i might have briefly mentioned it before here in the android emulator you have these three dots down here which is really cool you have all these possibilities and you also have this location right here so depending on what you set here the kind of like results may vary so let's get our monkeys we need to do that first else it's not going to do and whenever i find closes does it actually get me one oh see here's the permissions at work um do we allow the access well do while using the app that's fine and it's going to find the closest is it actually do i need to click it again oh henry phoenix so that's the closest one and probably my location is set to i don't know somewhere around there but if i set it to amsterdam which is closer to where i am so let's do that and do i actually oh set location here we are and if i do it now it still says henry phoenix so i'm not really sure what's going on here um i'm looking at this it's all in america asia japan so if i just set this to i don't know japan you can do this pretty globally set location i'm expecting it to do the well it still does henry phoenix so there might be a little bug here or i'm not using this um location thing correctly maybe that's what's going on but it should give you the different results maybe you spot the bug please let me know down in the comments but typically this functionality definitely works like this so that is really really cool and with this like extra debug tools you can also simulate routes so if you do that actual turn by turn navigation then you can definitely do that as well so now back to the other thing which was the map if you remember that we also added to our maui program right here our imap which is an api that allows you to open the default maps application on your device so let's see how to do that we're actually going to do that in our details so let me close all of this and i'm going to go to the view model for the details first and i'm going to add this eye map here which is a map and let's add that to the dependency injection automatically visual studio knows what's up so let me just press the tab button and boom we have a map being dependency injected and let me just paste in some code here to actually you know trigger our map functionality so i'm going to do that here and again we see this i command so we're going to create this command here which does the open map and here we kind of see the same pattern right that's for the lot of the essentials apis try catch in something in case something goes wrong um await map open async so we're going to talk to this map api and apparently it has an open async api to open the application we have to specify a location so the monkey.latitudemonkey.longitude because we're in the details right so we have the data through our property already here and then we have the map launch option so again you can specify a couple of arguments just like with the geolocation but in this case we can set the name which will have like the name i think in the maps application and you can set the navigation mode to navigation mode none but you can also do driving or with transit or bicycling or all that kind of stuff so it will automatically open with some kind of navigation mode right so um that is pretty cool as well and for the exception same old same old just do a debug right line and pop a little alert to the user so we have this functionality in place now actually you have a button to do that so add a button to actually trigger this functionality so let's go over to our details i think i have that right here and then we have this um put it like let's let's just put it on top here right so we have this vertical stack layout we're going to add this button um and here again no surprise we have this command that we're going to trigger we're going to center it horizontally and set it to a certain width and we're going to do something with the styles that we're still going to see in another part so let's run this actually again on the android thing and maybe it's also a nice exercise to run it on windows although i don't know if that has a special maps application yes or no but here we're running it on android and then whenever we get the monkeys we will get the list we can click through to the details and whenever we do that we should see a new button that will now open the maps application and show us where this monkey actually lives well we see the button so that's great and whenever we click it we will go to the maps application google maps in this case for android for ios it would be apple maps for windows we'll about to see find out what's going on i'm going to say skip and hopefully because this is the emulator right so this is kind of like a new device that's coming out of the box well it does it proceed pretty nicely you can see it gets the coordinates it's going to load the map it already added a pin it doesn't really show me yet the map maybe it has some trouble loading for for some reason but on your local machine it's probably going to be much better now you remember that i specified the name i think it's kind of like dependent on the platforms that you're running on what of the details of the map open options it's going to actually show um but typically you know it should look nice on the platform that you're running on so let's stop this one let's get a little bit off script here and we're going to see on windows what it's going to do i'm i did prepare this so let's hope for the best and else um well you're going to see me fail on this little course right here but just to show you that this again without changes i just flip it to windows i'm going to run it here and i'm going to see what it does with opening the maps i don't think i really have the location settings set up for this device so i'm not going to attempt that but we're going to see what it does for the map apis now i'm told you in an earlier video i'm not going to really show you for the ios part in this case uh it definitely totally works for there as well actually i have a little note about that whenever we are done with this little experiment but you will have to figure that out for yourself so let's make this a little bit smaller get the monkeys and let's do another one this time the blue monkey show on map what's going to happen oh there is a maps application on windows as well that's pretty cool so it's going to open that let it access my precise location yeah why not and we can you see that name the blue monkey so for this platform it definitely is implemented for some reason it also doesn't load the map for this application so i'm now starting to wonder if my firewall is blocking maps services right here i'm not sure what's going on but this looks pretty nice and you can do the directions here and everything that comes together with the maps application that is on your platform so that is how we can use um the platform functionality on your uh platform there is a lot more apis that you can use here i put it up on the screen earlier in this video or in an earlier video there is a lot of api so go check that out basically i think all the apis that you would use for a fairly basic app you can definitely find them inside of the essentials package and you can use those and you have the abstractions and you don't need to worry about any platform-specific code to access all of that powerful functionality so that's really great so i promised you to get back to a little bit of an ios thing so if you are familiar with ios devices then the newer devices now have this notch right which kind of like is an interesting thing for your screen designs because um by default it will draw behind the notch um so you know if you're placing things really against it or maybe behind it then the user can't reach it and the ios has the apis available to influence that behavior it's called like the save area layouts but this is something very specific to ios right so on ios so another way to solve it is kind of like add a margin margin or padding at the top or at the bottom but then you would have to do that specifically for ios so for ios you can definitely also specify the platform-specific apis we have ways in.net maui for doing those kinds of platform-specific things you should find it in the readme for this repository for this folder for this part um there is a little exercise for the ios things in there i think you know unless you're running on ios and you can try this for now just take this in as a little bit of knowledge that you might want to use whenever you're actually going to build an ios app but it's definitely a nice exercise for you to try that as well for the next part of this course we're going to dive deeper into the collection views of the list of monkeys we're going to add pool to refresh we're going to see different layouts and we're going to add a little nice graphic whenever the collection is empty so that the user actually knows it's empty actually i'm gonna stop talking about it then here you can find the next part of the collection view and here you can find the full playlist for this course see you for the next part [Music] you

Channel: Gerald Versluis

Views: 10,092

Keywords: .net maui, dotnet maui, .net 6, .net 6 maui, dotnet maui tutorial, .net 6 xamarin, dotnet maui getting started, .NET MAUI crash course, .NET MAUI workshop, dotnet maui workshop, dotnet maui full course, .net maui full course, learn .net maui, learn dotnet maui, net maui, crash course, .net maui tutorial, c# maui, what is .net maui, VS2022, .net maui geolocation, .net maui essentials, dotnet maui essentials, maui device sensors, dotnet maui geolocation, .net maui gps

Id: eRXiiy800XY

Length: 27min 11sec (1631 seconds)

Published: Thu May 19 2022