Anvil: Web apps with nothing but Python Transcripts
Chapter: Rounding out the UI
Lecture: Creating the landing page: Anonymous home
0:00 Now there's a few parts of our app
0:01 that are just kind of unfinished.
0:03 Like, for example, this.
0:04 Let's run our app and just see
0:06 what the experience is here if we're not logged in.
0:09 I think you'll find it to be less satisfying.
0:11 So, log out. Login looks just totally good.
0:14 But this, not so much, huh?
0:16 Home anonymous? Yeah.
0:18 If this was the thing you found
0:19 when you went to the website
0:20 to try it out
0:21 to consider creating an account
0:23 you would go away.
0:25 So, let's just quickly add some kind of landing page here.
0:29 So, let's go over.
0:30 And I've got some rebuilt text here.
0:32 Let's call this "Label Title".
0:33 Something like that.
0:34 "Home Anonymous" is not what we want.
0:38 We want to set a few text properties
0:40 to make it a little bit bigger.
0:42 So, go down here.
0:45 Let's actually set, span that out.
0:48 Set that to be centered.
0:49 And the font size to be 32.
0:53 And let's actually go and add
0:54 one of these little icons as well.
0:57 Let's put a scale. Balance scale.
1:00 There we go because we're tracking
1:02 stuff you weigh with scales.
1:03 Things like that.
1:04 Next up, we want to put an image.
1:08 It's going to go to the top there.
1:10 Put an image. And let's say we want it about like so.
1:12 Nice and big. Put that banner.
1:21 So, here, I have this peaceful image
1:23 I've gotten from a place called Unsplash.
1:27 You get a whole bunch of awesome, free
1:30 rights free, royalty free big images like this.
1:33 So, go ahead and grab that
1:35 and we're going to throw that in there.
1:37 Make it a tad bigger.
1:39 And let's go ahead and set that to zoom to fill.
1:42 There we go, like that. That's good.
1:44 We're going to put a little text box in here.
1:47 We'll call this "Label Pitch" or something like that.
1:51 It's like a sales pitch.
1:52 Let's set thee font size here to be 18.
1:55 All right, now let's just see
1:56 where we are with this so far.
1:58 All right, this looks really good.
2:00 Maybe that image is a little grainy but it's okay.
2:03 I've noticed there's nothing else to scroll down to.
2:05 Which is fine, it's okay.
2:08 But we need some kind of call to action.
2:10 Right? Let's get a big button right there next.
2:21 So, we'll call the button "Register"
2:22 but the text will show as
2:23 "Create A Free Account" like that.
2:28 And its role is going to be primary.
2:31 And "Create A Free Account".
2:32 And does it have a name?
2:33 Yes. So, that's cool.
2:35 Let me double-click it.
2:37 First we're going to use our "Sign Up With" form.
2:39 And then we're going to set the account for our...
2:44 Actually, don't need to do that.
2:50 I think that should work.
2:52 Here we go. Maybe we're still going to need some help here.
2:54 But I think this might work.
2:56 Anyway, we'll see.
2:57 We might have to do something by setting the account bit.
3:01 In terms of, you know
3:02 showing register versus account.
3:04 And login versus logout.
3:05 And so on. But we got that.
3:07 But let's just finish out the design of this page here.
3:09 And I'm going to have a couple of icons.
3:11 So, let's have one other section here.
3:16 Put this image down below.
3:19 And actually, I want to have some text in here as well.
3:22 So, I'm going to use a column panel.
3:25 There we go. Put a little column panel down here.
3:27 And within that, I'm going to put three more columns.
3:30 One column just goes like that.
3:33 And let's go ahead and put some stuff into the columns
3:36 so we don't lose track of what's going on.
3:39 And let's put some text below the image.
3:42 This looks pretty good.
3:44 It's a couple of layers so it might
3:46 get a little tricky with drag and drop
3:47 but let's see what we can do.
3:49 Notice here it's trying to go to the right of the image
3:50 but if I go more right
3:51 that little blue thing drops down.
3:53 Now, it'll go right in that column, the outer column panel
3:57 which is what I want. There. There we go.
4:04 And in here, we want an image and we want a label.
4:09 If we can get it to go down in this spot. Perfect.
4:12 Now, that looks like it's not quite in the right spot.
4:19 Just put that right over here.
4:21 Yeah. Not always the easiest thing to do
4:24 but there we go. Pretty close.
4:27 We need to maybe align these up a little bit better here.
4:29 Okay. Move that over. Maybe a tad bit more.
4:35 There we go. Are these the same size?
4:37 Perfect! Okay.
4:39 Well, that was a lot of drag and drop playing
4:42 but, let's just go ahead and set the text for these.
4:45 I'm going to do, like, little icons
4:46 and we're going to give them a nice message.
4:47 We'll say, "Wake up feeling energized"
4:54 and let's just set that to be bold and center.
4:58 I want to pick an image here.
5:01 And I got some more cool transparent images.
5:04 These came from a place called The Noun Project.
5:07 If you pay for it, also royalty free, like I do.
5:09 If you don't, I think you've got to do attribution.
5:11 But, got these cool icon-type pictures.
5:14 So, we're going to put that picture there.
5:16 The next one we're going to pick is this free thing.
5:19 There you go. And then, third, is going to be that app.
5:27 Like so. And then for the text on these two.
5:35 All right, there we go.
5:37 So, let's go ahead and run this
5:38 and see how our page looks.
5:39 We should be logged out now, I think.
5:42 Yes, we are. And look at this
5:44 Fitness works!
5:45 Get fit by tracking your health!
5:47 Are you looking to be more healthy?
5:48 It takes time, we get it.
5:49 But if you see progress, that'll keep you going!
5:52 And that's where fit works will
5:55 Get you started!" Or whatever.
5:56 So, here's our cool little icons.
5:57 And it's going to be our landing page.
5:59 Obviously we would do more in a real one
6:01 but it's an okay start. We click this.
6:04 It's going to either let us sign up or
6:09 Yeah, I guess, just sign up.
6:13 I guess I'll create another one.
6:19 Use the letter "A" for the password
6:20 because hey, I'm security conscious.
6:24 All right. Copy.
6:26 That's how I remember it.
6:27 All right. Try and sign up.
6:28 Just take us home. Perfect!
6:31 And that almost worked
6:33 but notice "register" and "logged in" is up here.
6:36 So, let's just quickly fix that.
6:38 And I think the best way to fix it might be over here.
6:42 So, when we go over here to load component rather
6:49 Yeah, there's a couple options
6:50 but let's go ahead and just put it over here
6:51 into load component.
6:54 I guess we'll say.
6:59 So, we'll just ask if there is a user.
7:01 Let's go ahead and set the account state.
7:02 And I forgot
7:06 Are we passing the user? Yes.
7:08 This thing again. Okay.
7:12 If we're doing this in the right order
7:14 we'll be fine over here long as we go home.
7:17 Yeah, I think this will work.
7:19 Let's try it one more time.
7:23 Now it's working because we're loading up from start
7:25 but let's go down here. Click this button.
7:29 And firstname.lastname@example.org. So many accounts.
7:35 Totally different password this time. Alright.
7:38 Sign up should not take us home with the navigation.
7:40 The navigation will check for the user
7:41 and then trigger that.
7:43 Well, actually the home form will.
7:45 Cool. So we saw that change as you would expect.
7:48 Now, we're in our authenticated home
7:50 but we got to add our first measurement.
7:53 I think this home landing page, when we're logged out.
7:58 It's not perfect but it's going to be what we're going with.
8:00 It's good enough.