Loading video player...
This is an introduction to using fasttop
to build a simple project.
We're going to build this type of simple
country store.
We may put images in here in the future,
but it's using a something called a
model, a data model, which is the main
point of this tutorial. These are your
learning objectives for this tutorial.
Your main goal is to build a Python web
application. We're using fast API. We
have a stack around fast API called fast
op. That's entirely open source. In a
Python web application or most web
applications, there's a concept of a
route. There is for example the home
route. When you go to a web page, there
is a route at the end of the domain.
Usually, if it's by default is just
slash. The next concept is something
called a template. Think of a web page
template where you have HTML and you
have embedded in the HTML
some Python code to handle things like
for loops.
Next we'll cover models and in this case
we're using SQL model
pyantic
for data type checking and there's a
model
file on fasttop the sample application
we'll be using which we'll be editing
and the design will be handled by a
framework called tailwind going to a
this GitHub repository here opkey/bast
desktop. I'm going to go to this code
down arrow. I'm going to select download
zip. I'm not going to clone it down
because I don't want to contribute back
to this repo. I want to start my own
project. So, the easiest way in my
opinion is to just use this zip here.
I'm going to download it. And now it's
in this folder. I'm going to move it
into a brand new folder on my computer.
On Macintosh, I'm going to double click
it. It opened it up. I'm going to delete
the zipped file. Move into trash.
And I'm going to rename this file
so that we don't get confused. So I'm
going to call mine
country
store
tutorial. I have a blank terminal here.
I'm going to type in cd. I'm going to
drag and drop the folder onto the
terminal and I'll press enter. And now
I'm in the folder that I just
downloaded, which is the country store
tutorial. I just renamed it. I'm going
to do ls- a to see the folders that have
a dot in front of it as well.
I'm going to delete a bunch of the
folders. I'm going to do recursive
delete. Make sure you're careful with
this one. Uh, so recursive will go down
the directory structure. F is force. So
I'm going to have the GitHub
not the git the GitHub because this is
uh it's using a GitHub workflow. I'm
going to delete the blog which we don't
need. I'm going to leave the docs which
it's on the main repo. So you if you
need the docs, you can just look at it
there. And then I'm going to leave the
test
test
and
let's see where we are right now with
this.
Let's type in a at this point there's no
DB. There's no test DB.
So, I'm going to I have UV installed
already.
If you don't have UV installed, you'll
need to install it. I just run UV sync
uvun
op.py.
I'm going to initialize a database
I'll call DB
initialize the database
and I have I'm using SQL light.
So there's a a DB is right there. I'm
going to create a super user
uv runoffman.ply apply super user and
then I'm going to run the server. We can
check out what we what the starting
point is.
So there's a pretty extensive demo which
you can it good to look at but it's
going to get confusing if this is what
you're editing from the start. So we're
going to delete this page and some of
this so that it's easier for you to
focus on the main points. So this part
of tutorial will be on the styling in
the terminal I'm going to control C I'm
using called cursor which is pretty
common. Now
for the purpose of the tutorial I'm
going to turn off the cursor tab. I'll
just press snooze. I'll snooze it for
one hour.
I'm going to do control back tick to
open up this console on the bottom.
And then we'll go command shift or
command option B. It collapses the AI
portion of that window there. You can
open it up from right here too. In the
left hand panel, there's a bunch of
folders. We're going to go templates.
Within templates, the main file is
index.html.
and we will check out and I'll focus on
index.html HTML which is in templates.
Do
the command B on map that collaps the
side panel.
We're going to go down.
Okay. Right at line 35
on this version of fast stop there's
something called main. within that
there's there's a div for
uh this class right here which is some
tailwind syntax.
So I'm going to put my cursor there
and I have rainbow indents.
So I'm going to follow it down.
It keeps going. So there's a div that's
one before the ending main.
I'm going to delete everything in there.
Okay, you identify the main content.
There's a main tag and there's only one
of it in here. And there's a bottom main
tag. And then there's a single div in
here with some Tailwind syntax which you
can ignore for now.
So it's main and there's a single div in
here. The bottom terminal, I'm going to
run uv run
op
run server.
Starts off a local host at port 8000.
Let's open up a web browser.
Okay. So, right now I have a blank page.
There's nothing here because I took out
all the guts of the the main. If you
want to because we're using tailwind and
the styling is going to be a little
funky, right? So, if you just do
food uh product or something
like that, it's not going to actually
have the H1 stylings, which may it may
be a little surprising to you if you're
not used to using Tailwind, but the idea
is it does inline syntax. So you do text
hyphen Excel and you can look at the
Tailwind site for the information on
this on which of the commands to use
here.
I'll make it bold.
So class of 2XL and font bold.
I'll pressing reload here and I'll have
food products. We've got this thing up
here and this. So, you want to make it
into your own
uh store. So, look for a graphic right
now.
I'm going to use this simple graphic
here. Just grab one from the internet.
You're not going to be releasing this
product most likely with this. I think
just for your your own uh development on
your local computer, I think any graphic
is fine.
I'm going to open up the sidebar again
with commandB.
There's a folder called static here. In
the folder, there's something called
images. I'm going to create a subfolder
in images called
Craig store,
which is my name. I'm going to drag and
drop the the logo in here. So, we have
country store.jpg JPG
and you'll see this keyword include for
and include for header and this is for
the footer. It's in the subfolder called
partials. So we'll go into partials and
we'll look at the
header first and we will
notice right here on line seven already.
You can find the path to the logo.
If remember I have it in Craig
store
I believe
country store.jpg JPG
JPEG.
And there's this span here which
originally was fast off. We'll just put
Craig store. You should put your own
name.
We have the logo here.
And there's some headers here which
we're not going to use.
So I'm pressing control back tick
to collapse the bottom portion.
So there's the demo pages
and we're not going to use it.
Let's find the ending do.
It's right there.
There's a comment that says management,
which is how I know that there's a div
there.
Got rid of that.
Um,
I think for your We're going to delete
this one too, just to make it simpler,
just for the aesthetics.
So, we'll scroll down
right above database status.
I think I'm going to leave the database
status here because
we're we're going to connect it to the
SQL database in the future. It might be
good to see uh what the status of the
database is. If you want to add it back
in, you can refer back to the original
GitHub repository.
Okay.
So, do command
B to open up the sidebar template
partial and let's go to footer.
The same thing here. It's not the op key
logo.
Want the country store
and
We start at JPEG
Craig_tore
slashcountry
store.jpeg JP EG on ours
store
instead of the site being about open
source
old
school
small
town
charm and
hustle
shopping experience.
Talk to the owner.
Okay. So, there's some quick links here.
Um, for the purpose of this demo, that's
called hot products.
So, this is linking to different demo
pages, right? So, I'm fast out, but
we're not going to do that. So, I'm
going to delete the bottom two list
items.
and we'll just show you what it looks
like at this stage. So, we've changed
that. Working on the hot product right
now
and instead of Tailwind CSS
or here design demo, we'll call it uh
pets and
household goods.
Uh we don't have a separate page right
now. So we're just we just use a pound
sign as a placeholder for the route at
this point.
So, pets and household goods under hot
products. And then we won't have
technologies here.
We'll have um
entry days
discount.
We'll change it from CSS to
30%
off.
And instead of HTMX, we'll have it be
50%
off. That'll be a huge discount.
Delete the rest of them.
And then there's this bottom portion
here.
So I'm going to delete the the license.
You can make the license whatever you
want.
And we don't want to link to
OP key.
We'll have the
your name for the copyright.
Move it over so you can see. So, we just
have the div single paragraph and it's
the copyright of your name. It's kind of
like this right here. Or
you can make like a fake company, right?
Like Craig Incorporated.
Okay. We can start populating this area
with products.
So, I'm going to uh X out the footer and
X out the header. We won't be working on
it anymore. That's just the graphic. And
we're going to focus in on the
index.html
file in the templates. We just have this
food product right here.
So we'll start with a
basic uh ginger 2 syntax. So you do
curly bracket and there's this percent
sign and then percent sign curly bracket
and here you can put some Python like
code like for I in range
five
and at the end of your for loop
you have to do a keyword and four and
within here you can do your
uh
the loop the actions of the loop. So
we'll set up a div and we'll start off
with
product.
So I'm doing curly bracket curly
bracket. It's different from this. This
the Python syntax ones are curly bracket
percentage but this one will just be a
variable and the variable is I. So that
eye and that eye are the same.
So it's a special Python variable,
right?
And we'll see what it looks like. So it
goes through the loop.
You can match a product with this and
it'll do it out here.
Okay. So let's make it just a little bit
nicer.
not not
anything too crazy here. So, let's go to
this div here which has the
um the product right now.
Press enter.
Let's set up a just some basic styling.
Background will be white. We'll have it
rounded
kind of a a larger round. Apply some
shadow. make it kind of on the larger
side and we'll apply some padding of
four. So P without uh specifically you
should put the padding on all four size
of it. So it's starting to get a little
bit of styling here.
Okay. So right where this for loop is
I'm going to put another div in here.
So div and I'll end the div after the
for loop.
So for this styling right there
class equals
grid
and then we'll do so by default it's the
mobile mobile mobile first view grid
columns one if it's on a mobile phone
like so kind of narrow if it's a medium
width web browser we'll two grids
and a large
grid will be
let's put it at three grid columns
three and we'll have a gap between the
grids of four.
The bigger the unit, the larger the gap.
Let's see how it looks. Okay, so there's
a four gap here. If I
make it more narrow is like two across
and continue to make it more narrow like
a mobile phone. It'll be one. So, we can
place the products right here.
Press command D. Opens up the side
panel. I'm going to collapse the
templates for now. Open up something
called models.py.
And there's a bunch of stuff in here.
I'm going to grab the
product
right there.
Pressed enter.
Pasted it. I have
duplicate prop. So I'm going to call 101
food
and
table name will be foods.
We'll keep the u uh uyu ID and the
uh this the same. So we now have a model
in this file called models.py and that
class is called food.
You don't need self id or self.name
because
it's extending the SQL model which is
handles it for you.
So this is imported from up there
and yes without SQL model
um being the superass you would have to
put self ID
we've covered templating so far that's
the HTML page uh we just started to
build one SQL model SQL model does have
the pyantic type checking in it and we
just have the basic model right Now in
the models file uh we have not covered
routes yet just to be clear models built
on paidantic. Paidantic does the type
checking and also the the IDE completion
and we'll show you what that means. So
let's go to the routes.
In the left hand bar, there is a folder
called routes. And in the folder called
routes, there is a file called pages.py.
So, let's click on that one.
And
right here on
75 is router.get
the slash. That's the home route. and it
says homepage right here. It if you
can't find it right there. So let's
first start off with a
foods
with the colon and I'll have to type
here
which will be a string a list of strings
and we'll have a list here and it will
be let's go like burrito
we'll have a pokey which is raw fish
over some usually poke ball for rice.
We'll have uh
steak
and we'll have um
just had a pretty big lunch, too. I had
a mahi sandwich for lunch. Little mahi
sandwich.
Wow.
Looking pretty nice.
Okay, so I have a list of foods which
are a string right now
and we're going to pass it over
here. I'll go
foods.
There's the handle and foods. A little
comma there. We'll change this title of
the homepage to
Craig store
specializ in selling food. I guess
in the
index.html
reason is this Python syntax. Well, I'll
go
for food. on the screen right now in
foods a variable that I just passed over
from the route. We're going to uh output
product will be food
and we'll see whether it comes out.
It does.
We can delete that product
and
do it like that. However, as this thing
gets more complex,
uh we don't want to
put the foods in a string and eventually
we actually want to have it in the
database.
So,
we're going to import the model.
It's called models.py. name of the file
and the model that we created is called
food. So at the top here in the import
statement is already from models import
user and we're going to put in the
class. Remember what it was? It was
called food
and
there's some llinter errors or llinter
warnings. Let's just ignore it for now.
Okay, let's go back to the home route.
And instead of a list of
foods with that string, we can now
specify the data type as a food. And
we can start instantiating
food.
Uh because we're using paidantic, we
know that the two things are uh name and
description.
So we'll go name a little colon there is
burrito
and the description is um
uh tasty food or something for now. Oh,
which is the description is
description
is tasty food.
And I think this should be equal signs.
Okay, start adding more food in here
pizza. And actually the cursor
tab thing is
great at making fake data. So let's just
unsnee it.
I don't know about tasty burrito.
That would be better than that.
Okay. Well,
guess it has
pretty weak description here,
but maybe it's good enough for testing
or we snooze it.
So you instantiate a
the the food object and let's just drop
it into the
so now it's a list of this class or
object food. So it's not just going to
be food, it'll be food
name.
We'll have another descript uh div for
the food.escription. description.
Okay.
And it should be within the card.
div
and
this one.
Okay, so there's an outer div which is a
card, right? So this this section here
is a card. Within the card, there's two
divs. Well, let's see whether it works
before I explain it. Okay. So, the first
one's the the title and then the second
one's a description.
We want to just add a little bit of
styling here.
Nothing too crazy.
Maybe font
bold. Maybe I'll make the the text uh
Excel
so it stands out a bit.
Looks okay.
Okay. Uh you can easily extend this with
the URL.
Oh, there's actually
in this class you can just there's an
example here which is just a string. So
you just put the string in for the
the food which is the one we're working
on and you can have a string here and
put an image there. You can have it be
aworked image initially and then we'll
show you how to store it to be a static.
So you can easily extend this with text
or images if you want and get more
comfortable with the model and the
styling.
In the future, we're going to put this
into the database with some additional
pictures.
Covers this concepts: FastAPI, templates, models, routes. FastOpp uses Jinja2 for the templating language and Tailwind for CSS styling. Models are created with SQLmodel, which is based on Pydantic and SQLAlchemy models. Start of tutorial: https://github.com/Oppkey/fastopp