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

Talk Python's Mastodon Michael Kennedy's Mastodon