Anvil: Web apps with nothing but Python Transcripts
Chapter: Rounding out the UI
Lecture: Designing the account page
0:00 Here we are in our app again.
0:01 And we have our anonymous landing page, homepage
0:04 working well and we also have our homepage.
0:07 We've got add, we've two more to work on
0:09 compare, that's kind of involved
0:11 we'll get to that in a minute.
0:12 Also the account, now that is not super interesting.
0:17 It's cool, we can check
0:18 you have to have the right page
0:20 to be logged in to go there.
0:21 But other than that we have nothing going on.
0:24 So you already saw me drag and drop
0:25 a bunch of stuff in there.
0:26 Let me just do that again real quick and
0:27 then we'll fill in the interactive bits
0:31 or the part that loads up with the data.
0:32 And here we have a nice, new account page.
0:36 So this is going to be our account details.
0:38 Now notice it's going to show a couple of things.
0:40 Maybe it'll also show our email
0:42 but it's basically going to show our account type
0:45 whether or not we have a pro paid account or not.
0:48 And a couple things about us we haven't spoken about yet.
0:51 So I'll give you the rundown.
0:52 That's our height and our gender.
0:54 So later when we get to the compare section
0:57 we want to show your stats against some average stats.
1:03 How we going to do that?
1:04 Well it doesn't make sense to compare guys and girls.
1:06 We would obviously compare folks only
1:09 with their gender and with their height.
1:11 If you're six foot seven or five foot should probably weigh
1:14 something different on average.
1:16 The average person, of that size
1:17 weighs something different.
1:18 So we're going to have this data here.
1:23 Now in order for us to actually have our height
1:26 and our gender, we need to go over here
1:29 to our data table or our users
1:33 and again add some more stuff.
1:34 So we have API key and we also saw
1:36 we have whether or not it's pro
1:38 That's going to drive that account type.
1:40 But let's do the other two here.
1:44 Let's go and add a text column.
1:48 Called gender.
1:51 Alright so we have a gender and we're going to add another
1:58 number column called height.
2:04 And so that'll have the gender and the height.
2:05 We can use that actually, to show something on that page.
2:08 With this data in here, we'll be able to go
2:11 and load up those details.
2:15 We still need away to actually set them
2:17 hang tight for that. But here we can actually put something
2:21 in here.
2:22 So we need to come up with something for the value.
2:26 This says pounds, pounds don't know why I said that.
2:30 I want inches and value in inches.
2:36 Okay so when it loads up, we're going to put your value
2:39 in inches here.
2:41 And initially it's not set, but eventually it will.
2:44 So we'll come over and say the user is
2:46 data access member or caching our user
2:52 and I'm going to import that bit.
2:55 There's other stuff that we don't really need
2:58 that, that, that, that, that.
3:03 I have the user, like that.
3:06 I'm going to log them in.
3:07 If it needs to or it will just give us the user
3:10 if it's already gotten it.
3:13 So let's put in here, we want to say
3:15 valueandinches.text= and we've got a bit of problem
3:19 because we might not have user height set
3:24 value set for the user.
3:25 So we come over here we can say, something cool.
3:30 We can actually say that .format value=height.
3:39 If we have that
3:44 if we have a value there, else it could just be
3:50 with a backslash. I think this'll work.
3:53 Not set. Something to that effect and
3:57 a quote and a parentheses.
3:59 Let's make this a little bit simpler.
4:01 Height=user of height.
4:08 And let's just see what we get.
4:10 It put none in there, it might leave it empty.
4:12 I'm not entirely sure.
4:13 I'm going to find out though.
4:15 Alright go to our account over here.
4:18 None inches. Okay well, that's not super but it's okay.
4:23 We're going to actually set up something that
4:24 will actually pull that in for us.
4:26 You know what forget it.
4:27 I'm just going to leave it like this and it's
4:29 going to be good enough.
4:31 The other one, we wanted to self.label_gender.text=
4:38 use your gender and again that'll be something like none
4:42 not going to leave it that way but that's what it's going to say.
4:46 Alright, none and none, and then our account type
4:48 that one we can work with already.
4:51 self.label_account_type.text = pro if user is pro
5:01 else it's going to be basic or something like that.
5:04 The other thing we need to do
5:05 we don't want to show them this button here
5:08 if they're not already
5:11 if they already are pro.
5:12 So let's go and do one more thing
5:15 say self.label, actually button sorry.
5:19 Button.visable= whether or not they're a pro.
5:23 I think that'll round out other than the fact
5:25 that the data is missing.
5:31 Count, alright basic, well that didn't work.
5:36 Let's see what we're putting here.
5:45 None or not, for some reason, we set it false
5:50 but I think leaving it like this will do it.
5:55 Final test, it's going to be the time it worked.
5:58 There we go.
5:59 So we have the basic account we can click this
6:01 and go pro, obviously that's not written.
6:03 Save that for eCommerce chapter
6:05 but when this is pro, this button will go away.
6:09 Alright, so I think this is great.
6:10 The last thing we got to do is get this data.
6:13 Now remember when you create all the forms
6:15 through this little section in about
6:17 getting our height and actually
6:18 already through the elements in here
6:21 it's going to ask you for your height in inches
6:23 and your gender if you try to go to
6:25 your account page or the compare page and
6:27 you don't yet have those details that we need set.
6:30 So we're going to gather them one and only one time
6:32 and then send you along.
6:33 So next, what we have to do is actually find a way
6:37 to show this before we can show them their account page
6:39 or the compare page, which is super easy.
6:42 We'll can do that in navigation and set it on the server
6:44 and we'll be all good.