Full Web Apps with FastAPI Transcripts
Chapter: Dynamic HTML templates
Lecture: Bringing in the real home page
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.