Full Web Apps with FastAPI Transcripts
Chapter: Dynamic HTML templates
Lecture: Bringing in the real home page

Login or purchase this course to watch this video and the rest of the course contents.
0:00 So we saw that we were able to get a really solid looking overall layout.
0:05 We have our navigation, we have our footer, all those kinds of things.
0:08 And yet, when we look at this here,
0:11 it still has this big fake section in the middle.
0:15 Remember what we're aiming for. It's supposed to look like this, this cool search section,
0:19 this info box here with three pieces of information,
0:22 a list of packages. But what we're gonna do here is copy over the HTML
0:27 and then write a little bit of code for first passing over fake data.
0:31 And then when we get to the SQLAlchemy data-driven section,
0:34 we're gonna have real data. So let's, just like before,
0:39 go over here and drop in the real HTML. I'll talk you real quickly through it.
0:43 There's not much to it. It uses the layout, the same,
0:46 the same shared content section and so on.
0:49 It has this little "hero" section that has that big header with the search text.
0:55 We have the styles and the CSS we already included.
0:59 We have that stats bar, that gray bar here and it has the package count. Instead
1:05 of just showing it as like this, we're formatting the string to do digit grouping.
1:09 So if it's 120,000, it's a 120 comma 000. We need to have
1:16 a package_count, release_count and user_count.
1:18 And then, we're gonna go over here and we're gonna do a loop through a
1:21 list of recent packages. And for each package,
1:24 we're gonna have the "id" and the "summary".
1:27 So we've got to write a little bit of code for that to work because if
1:30 we try to view this now,
1:31 we'll just get some weirdo server error.
1:34 So here we get this crash.
1:36 So you saw we're getting an error over here,
1:37 and the error is, and in Chameleon it's unfortunately
1:40 super hard to track down the errors.
1:42 You get all this junk here.
1:43 Look at all this. In the middle,
1:45 you could see that's the real problem.
1:47 NameError package_count. Jinja, if you don't provide some kind of variable,
1:52 it'll just come through as None
1:54 and then whatever happens then. Chameleon makes sure everything is hanging together,
1:58 it's good in that regard, but it's also a little annoying that you have to
2:01 be exactly there. So let's go to our home and remember what we have to
2:05 pass over. So let's just for now,
2:07 add some fake data. And then,
2:09 like I said, we're gonna be getting this from the database.
2:13 You will be data-driven and we won't be writing this code here,
2:15 but we do need a package count.
2:17 Let's say there's 274,000 packages and there's a couple others right in there.
2:24 We're gonna need a release_count,
2:29 which will be two million ish like that and the user_count
2:36 is gonna be, let's say there's 73,000 people who have created accounts here.
2:42 We're gonna need a packages which is actually gonna be a list, and into each
2:48 one of these, we're gonna need a little dictionary that has an id.
2:52 So let's just say one. I think it's a "summary", it's what it is.
2:55 We'll look at it in a sec. There's three things we need,
2:59 I believe. And here we need the "summary" and the id.
3:03 The id is like the actual package name.
3:06 So this would be, let's say FastAPI,
3:09 a great web framework. That uvicorn, favorite ASGI server.
3:21 And httpx, alright.
3:25 I think those three should do it.
3:27 This is not misspelled, right?
3:30 One more time. We have enough data. Is it gonna crash?
3:34 No, it's not gonna crash.
3:35 Oh my goodness, that looks fantastic!
3:38 So here's our hero section. Here's those counts.
3:41 Here is the number of projects, the number of releases. Notice the digit grouping? yes!
3:46 Number of users, and here's hot off, the releases. Out three
3:49 most recent projects or packages are FastAPI, a great web framework. Uvicorn
3:55 your favorite ASGI server. And httpx, requests
3:58 but for async world. Now these have links that if we click,
4:03 don't go anywhere yet. We're still working on that section,
4:05 but very cool, right? And maybe one thing we haven't really talked about and
4:09 it's not necessarily super obvious the first time that you see it, would be, how
4:15 do you do loops? Right, in Jinja,
4:17 you create the percent you say "for thing in that", then you end the loop and
4:21 so on. It's more implicit here.
4:23 So this is the thing that's looping.
4:24 Basically, this is, that will stop helping, it,
4:27 this is "for p in packages",
4:31 repeat that whole <div> section, including the part that has the "repeat" on it.
4:35 So we're just cloning that <div> over and over,
4:37 and each time through, we have this "p" variable that is one of the packages.
4:40 So that's how we got that repeated list of projects right in the home page.
4:46 Super cool, huh? So we've come a long ways from returning a string that
4:51 comes out as JSON, converting that to an HTML response that just has embedded HTML.
4:57 To now using a shared layout that brings in all the important pieces,
5:02 including the navigation, a common look and feel,
5:05 and then leveraging that overall CSS and designs theme brought in to bust out a
5:11 cool little homepage that looks like this.
5:15 We've used our template decorator. Go ahead and find the starting template,
5:20 a Chameleon template, which then finds the shared layout through the template engine and so
5:24 on. So I think we've come and built a really nice way to layer on
5:29 proper web development on top of FastAPI.
5:33 Of course, there's lots more to build.
5:34 There's some cool data layers that we've got to talk about and things like that. Already, hopefully, you can see the potential for what we're building here.