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.