Mobile Development with .Net MAUI by Mustafa Demirhan

Mustafa Demirhan

02.09.2024

Kategori

📚

Öğrenme

Döküm

Tüm video dökümünü görüntüle

00:00Alright guys so let us use this section to modify our user interface with a bit

00:07more purpose right so far we have our loading page we created a login page we

00:12know that it works and we can navigate to the main page however what we would

00:18want to do is probably simulate if you were in one role what you would see if

00:23you were in another role what would you see because a lot of the times that's

00:27the situation with mobile apps right or even if it's good to know how we could

00:33accomplish that so what we want to do is modify what we'll call the fly out item

00:38so we had modified the file behavior earlier where we change this from

00:42disabled to fly out and then we have the shell contents the default item is whole

00:49well it says home we can always change that and the content template is the

00:54loading page right so that means that you are going to get a default menu

01:00item called home but that will go to the loading page what happens is that the

01:06fly out items would be what you get when you tap the pill menu or the pill

01:12navigation in the top left hand corner of most mobile apps when you tap that

01:16and it kind of flies out to show you what the menu items are that's what we

01:19call the fly out item right and then you have you have the ability to set a

01:25header which is more static and then a footer which is also more static right

01:31so so far we've only been playing with the body section so what we're going to

01:35do here is create a new control first of all so I'm going to go ahead and add a

01:43new item a new folder first and we'll call it controls then we can add a new

01:49item and the thing is that you can always create the controls and then plug

01:54it in versus doing it all from C sharp we're actually going to look at how we

01:59do both of them so I'm going to create a new content view and I'm going to call

02:04it fly out header so we have the fly out header and I actually want this to be a

02:13stack stack layout so I'm going to change that here and if I change that

02:19there I have to change the inheritance over here to stack layout so that's fine

02:24alright so let us go back to that because I have some things that I need

02:33to accomplish code wise so I'm going to add another folder I'm just going to

02:36call this one helpers right and then in this I'm going to create a new class

02:43which is just going to be a menu builder that's all I'm calling it menu builder

02:50and this is going to be a public static class so menu builder is going to be in

02:55charge of you know putting together the menu items based on the role and

03:01whatever other stipulations we might need right so menu builder is going to

03:09have method that I'm going to call of course it's going to be a public let's

03:15make it async it's going to be static it's going to be a task well let me get

03:20my spelling right task and I'm going to say build menus or build menu because

03:27we only have one menu so build menu or we'll only build one at a time rather so

03:32build menu and then from build menu what are we going to be doing I'm going to

03:38first set the fly out header so I can say shell dot current dot fly out header

03:49fly out header is equal to a new instance of our fly out header that we

03:58just created so we're going to of course fly out header not behavior fly out

04:07header include the missing using reference so we're going to of course

04:12define what the fly out header looks like in its design and stuff but I'm

04:17just walking it through the code first so when we say build menu which we're

04:22probably going to do most likely after the app after the user has authenticated

04:29then we're going to say build menu then we're going to add the menu header and

04:37well let me actually start off by clearing anything that might be in the

04:47shell current item so shell current item so this is where all those fly out items

04:52get added right so I'm just going to clear it so any menu that might have

04:56been there clear it and let's start from scratch so we can always go now and

05:02proceed to get the details of the user now from the app remember that we had

05:09created user info and user info tells me the username and I also added the role

05:15right so I can say var role is equal to whatever value is currently stored in

05:24role then I can say if role is equal to and then let's try administrator once

05:35again you probably want to abstract these magic strings to like constant

05:39classes or enums or something but I'm just keeping it simple enough for now we

05:45can say else if role dot equals user and then you can have as many of those

05:56as you want right also in the case where you might have multiple rules you

06:02probably don't even want to use an else if so if the user might be in both

06:06administrator and user you could probably consider just doing if if if so

06:12all we do is add fly out items per role right so I'm just giving you ideas of

06:18course in our situation we know you're either user or administrator but in some

06:22situations you might be a user and a supervisor so you need access to both

06:27when they log in so that's I'll defer that to you so let us know decide if the

06:34person is an administrator what do we do so we can say var and I'm just going to

06:38say fly out fly out item is equal to a new fly out item so we can in code

06:49create our own fly out items all right and then what would have is a title so

06:57title would be equal to let's say car management and I'm going to do the same

07:04I'm going to do the same fly out item for both but I'm going to name them

07:08differently so that you can see that you know it's you can make your app as

07:13dynamic as you need it to because we really only have one place to go anyway

07:16so the root here is going to be name of and main page because we don't have

07:24anywhere else to go really based on the design of our app right but of course as

07:29many pages as you might have and you want them to be navigated to you add the

07:34root accordingly then fly out display option here it is going to be fly out

07:41options which is an enum and I'll say as multiple items right so after that we

07:48can define the items so items would be equal to and this just takes an object

07:55that has let's say a list of shell content objects so we'll say shell new

08:03shell content and then we can have as many shell content objects as we need to

08:11afterwards alright so I'm just going to once again I'm kind of simulating what

08:17it might look like we can add an icon right so icon would be equal to and then

08:25pretty much you just define the name of the icon so if you had additional

08:30resources and additional images so I don't have any additional images but

08:36let's just say that we wanted the dotnet bot it's a dotnet underscore bot dot SVG

08:43that's the icon that I would want for argument's sake right so we could do

08:49that we could say the title here would be admin page one and then the content

08:59template would be we specify a data template that takes a type so type off

09:10and then whatever page this should be associated with so type off and in this

09:17case I'll just use this main page again because we don't have anywhere else to

09:21go so that's pretty much what the shell content would look like so I am just

09:25going to duplicate this and call this admin page two let me fix the spelling

09:31of admin all right and we have too many items for admin and that's that's pretty

09:40much it I know we have items and then we can close this with an if with a

09:46semicolon so that's if you're in the admin role then this is what you should

09:51have new fly out item with all of that so now that we've compiled or fly out

09:58item I'm going to know have to add it so I'm going to say something like shell

10:03dot current dot items I can check if it's there before or I can just add it

10:14so I can say dot contains and then give it the object so I'm basically saying if

10:22it does not contain this fly out item then I want to add it then shell dot

10:34current items dot add there we go all right so if let me just review all of

10:40that with you because it's kind of difficult to absorb once I'm explaining

10:46and trying to type so let me know that I've typed it let me grow through it I

10:49go through it again right so if the role is equal to administrator then we want

10:54to create our new menu items right so we can create a fly out item that has a

10:59title car management I could easily say admin car management just so it's very

11:04clear we have the roots that it will go to and then we have the different items

11:09the shell content items and the content template to say when it's on this

11:16particular page I will activate I will look active right so that's what our

11:21content template means it sets or gets the data template to create when the

11:27shell content becomes active right so that's how that navigation works so

11:31after we've compiled all of the menu items that an administrator should have

11:36then we go on to say if this flight item is not in the current set of items then

11:45go ahead and add it so we've done that for admin guess what very similar steps

11:51for user so I'm just going to change all references the admin to user right once

11:58again we're kind of cheating here so we'll just say user user user and then

12:03we'll add it just the same so one word of advice regarding all of this once

12:11again with the magic strings maybe stuff like title and it's on you would want to

12:15type here but maybe like the icons you could create a static class that has all

12:20of the reference names to all of the icons or images that you would have

12:25added to your app right so you don't have to magically type that every single

12:29time also things like maybe the roles and all the things that you know you

12:34want set in stone you can always abstract those into their own data

12:39classes now let us turn our attention to the flyout header so we would have

12:44created the flyout header and we did not do anything else so what I'm going to do

12:51is create a label so well firstly this I don't want it to be vertically stacked I

12:57want it to just be a stack right then the first label I'm going to create I'm

13:02going to give it the label the name username right so label X name equals

13:08LBL username so I probably didn't mention this before but it's something

13:12that I practice with WPF and winforms application or code I always try to add

13:20a prefix to the name so that I can remember what kind of control it is so I

13:27probably broke that rule a bit for this course but I'm just mentioning it now

13:31before I reach too far and it's too late to make amends right so I can say LBL

13:38username and let's say I wanted to say LBL role I wanted to also specify what

13:44role this user is in and I'll just set up to 20 and that's fine right so here

13:50we'll see the username and the role displayed in the header now in the code

13:57behind I need to make sure that those values are set so when I'll just do that

14:02inside of the constructor or I can just say set values let's create a method

14:07here that says set values and then inside of this method I am going to say

14:13if if the user info in the app so if app dot user info is not equal to null

14:25then I would like to set the username label to have the value well username

14:32label dot text rather to be equal to app dot user info dot username so that's why

14:41I said that this static class is very handy because then we don't have to go

14:45and fetch the token and then these you know decrypt the token and then get the

14:49data out of the token just by setting this constant in the back end or in the

14:55code itself in the app itself we can access it easily wherever we need it

15:00right and we'll do the same thing for the role LBL role right now with those

15:09done let me try that again there we go so with that done I'm going to call on

15:16our menu builder in two specific places in the code right and while I'm here I'm

15:25going to change this from being async because I'm really not doing anything

15:29asynchronous so I'll just make it a static void so I'm going to call on this

15:34menu builder two places in the code right one we want to call on it in the

15:40loading page view model and it becomes useful when we go to main page right so

15:47I'm just going to put that here menu builder dot build menu menu builder let

15:54me control dots at the using reference menu build menu when you move across

16:00right no there are not there are a few other things I want to do here because

16:05when we're accessing the app fresh we need an instance of the user info again

16:13right so in the login view model we had done the user info from our JSON web

16:22token so the other place that I would want to build menu is here so I'm going

16:27just do the build menu here while I'm in this bit of code so menu builder dot

16:34build menu go ahead and build up everything and then navigate but I also

16:39want to borrow this bit of code and do that inside of this section so if if the

16:48token is valid then go ahead and get the role from the token and then go ahead

16:55and create the instance of app user info and username here would actually have to

17:01come from the token this time so our JSON token dot well actually just let's

17:13jump back over to the API where we compile the token and let's see so

17:20that username was included as the email claim and once again this is our token

17:31to compile the way that we need it to be compiled so if for your situation you

17:36want to change it then you can do that but what I'm going to do in this

17:41situation seeing that email and username are the same thing and we do have the

17:46email claim I am going to at this point say get me the token claim that is email

17:56right so I'm going to do the same thing here that I did for role but claim types

18:02would be email all right good so once I do that it should be able to go in to

18:08the token get that email value and store that as username that's a little mismatch

18:16I can appreciate that the mismatch is there but I hope you get the concept so

18:21once again this is where naming and context will come into play and govern

18:25how you build your app regardless though this is all setting that user info

18:31instance if we hit the loading page and there's still a valid token then we build

18:36the menu and then we just navigate to the main page so let us test out what

18:42this would look like all right guys so let us run I'm just going to run without

18:46debugging so that it will run a bit more quickly and when our app launches

18:53we get navigated to the login page so let's try this admin at localhost.com

18:59and then we enter password which is p at sswd1 we sign in then we get our success

19:09message fine click ok and then it navigates us to our car management page right so now

19:18if we look we see that we have admin page with the dotnet bot down below so these are

19:23many items that got added and I'm sure that there are things we can tweak to make sure

19:28that they don't necessarily get added down below here as well as the fact that if we

19:32look in the pill menu we see that we have admin at localhost administrator and we have

19:38our two pages that pretty much go to the same place right so if I close the app let's say I

19:46actually let me get the hang of this emulator here if I actually bring up the app and close it

19:55okay that's not working out it's much easier when you're actually using the app itself but

19:59what I'm going to do or the phone itself what I'm going to do is just rerun this so what it will do

20:04is restart the app on the device and our token should still be valid well it isn't actually

20:14reduced it to one minute so that we could test a bit more easily so I'll just log in again

20:20and then once I've logged in I'm just going to rerun the app so that it will restart the app

20:27at this point the token should already be on the phone and be valid so when the app starts this

20:32time it's just going to go straight to our car management page there we go right so we don't

20:39have to worry about logging in again because the app was valid or the token rather was valid for

20:46the app now one thing that I did notice is that it could not find the claim that I was looking for

20:53here right so these are very important points because when we were compiling our our token

21:05over here we use the JWT registered claims and if we hover over the email value it just says email

21:14versus when I tried to get that claim in code it actually would have said that was in the loading

21:23page we actually looked for claim types that email which had this so that is why nothing is going

21:30back so I just wanted to point that out as well so you have two options either you can use the JWT

21:37claim items or sub claim items here or you can go back and make sure that the token gets compiled

21:45with the correct claim type relative to what you expect your users or whoever is building a mobile

21:51app to use right so you can always do that so if I just do that claim types that email over here

21:59then that should be fine and we shouldn't have that issue with it blanking out notwithstanding

22:05that it is evident that we are getting the information that we need accordingly right

22:11so if I just do this one more time and I'm going to try and log in as a user just so we can confirm

22:17that the administrator is seeing something different from what the user is seeing so if I

22:23do user at localhost.com and the same password and then proceed to login successful and then

22:34when we look we see user page one user page two user page and the user everything is user related

22:41so just like that we were able to let the administrators see something different from

22:46the users and while it's a simple example and we only have one page the principles can be transferred

22:55to any other kind of app that you need to build or you may need to specify what each user sees

23:01based on the role that they play in the system

Mobile Development with .Net MAUI