Building data-driven web apps with Flask and SQLAlchemy Transcripts
Chapter: Your first Flask site
Lecture: Demo: CLI starter site
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
Now we're going to both use PyCharm
0:01
as well as just the command line interface
0:04
to create our first little demo site.
0:07
Let's get started by choosing the command line interface.
0:10
With this way you're going to see all the little steps
0:13
every single thing that you got to do.
0:14
With PyCharm, you might check a few boxes
0:16
and push some buttons, and things that you'll see here
0:19
will happen behind the scenes.
0:21
So, this might take a few more steps
0:22
but it's also going to show you exactly what's going on.
0:25
So, here we are on my computer.
0:27
And we're over in the GitHub repository for this course.
0:32
What we're going to do, is we're going to go into
0:33
ch04_first_site. The first three chapters had no code.
0:36
It's time to rectify that for
0:38
the rest of the course by the way.
0:40
So, we're going to start at chapter four.
0:42
And we have first_site final, and starter.
0:44
Remember, when I talked about following along
0:46
I'm going to show you, or provide you the code
0:48
that we start with and end with for each chapter.
0:51
Well right now, the starting code is basically non-existent
0:54
but in the future, maybe we've
0:55
already set up the database in SQLAlchemy
0:58
and now we want to add some kind of form input or something.
1:01
We don't want to rebuild the site from scratch
1:02
so we're going to kind of have these save points along the way
1:05
and we're going to work over here in final.
1:09
Now the first thing that we want to do
1:11
let's go into there, just copy that. See it's empty.
1:15
So what we need to do, is we're going to go
1:17
and create a virtual environment, that was our first step.
1:21
Or what I could do is I could type python3 -m venv venv
1:25
That will create it. And then I could activate it.
1:28
And of course, pip and setup tools are always out of date
1:32
so we could then go and upgrade those.
1:34
But what you'll see me do throughout this class
1:36
is I have a little alias
1:40
that I've defined, that does those three steps.
1:43
All right, so I'm just going to run that here.
1:47
And we can see the prompt changed
1:49
and if we ask which python it is now, this one right here.
1:53
By the way, sometimes people ask me how I get this shell
1:57
and this little git status tracking and so on.
1:59
This is Oh My Zsh or Oh My Zshell.
2:02
Check that out, that's very cool.
2:03
I definitely do recommend it, but it's not required.
2:05
Okay, so now we have this, the next thing to do
2:07
is to go and make our folder structure.
2:10
So we've got our app right here.
2:12
Let's suppose that this directory that we're working in
2:15
actually, we'll just make a directory called first_site
2:18
or something like that.
2:20
I want to go into first_site, and in here
2:23
we're going to have things like templates
2:26
and a static folder and those are kind of standard.
2:30
We're also going to have something called views
2:33
and this is where we're going to put all the view methods.
2:36
And we're also going to have something called viewmodels.
2:38
So, this is a design pattern that I really like
2:40
that I have adapted to the web.
2:41
And I think it is super, super powerful.
2:43
We have a whole chapter on it later.
2:45
Let's just make the structure for it now.
2:47
And make another one for data, so where our data models go.
2:50
And then finally, let's not throw everything
2:53
just into the root of that static folder.
2:54
You're going to have a lot of static files
2:56
so let's make a static js, a css and an img.
3:00
You can make them short, long names, javascript, or js
3:03
whatever, it doesn't really matter.
3:05
So now if we look here, we have all the stuff
3:07
and we upload of it, we have our virtual environment.
3:10
If we look down here, you can ask for a tree
3:12
and we can ignore the rich environment
3:14
we don't want to see that.
3:15
Here's what it looks like.
3:16
We have our first_site, we have data
3:17
we have our structured static file here.
3:19
We've templates, view models, and views.
3:25
The other thing that we need to do
3:26
is we need to have our app.py
3:28
and probably a good idea to have our requirements.txt
3:33
I also like to have the -dev.
3:35
The reason is, I want to put stuff for
3:37
like, testing, continuous integration
3:40
other helpful tools for me in here
3:42
that don't get installed on the server, but, you know
3:45
I always install this one when I'm working on it
3:47
and then this is like the production line
3:49
and the bottom one imports the top one.
3:52
Okay, so now everything's up and ready to go.
3:55
We're going to need to edit our app.py.
3:58
And just so we don't talk to PyCharm yet
4:00
let's just open us up Visual Studio Code.
4:03
And we just have to do a few things.
4:04
We're going to have flask, we're going to
4:06
define an app from flask, we'll say flask.Flask.
4:12
I'm going to pass that dunder name in there
4:15
and then we're going to have a method.
4:16
That's going to be our view method.
4:17
So I have an app.route.
4:19
So we'll just have a quick index method here
4:21
takes no parameters and it's going to return hello world.
4:25
And the simplest thing to do is say app.run.
4:28
There's better things to do in practice
4:29
but that's what we got.
4:32
Okay, so we should be able to run this
4:34
assuming that we've edited or
4:36
somehow installed our requirements.
4:38
We'll work on that in a moment.
4:39
Let's just pip install flask.
4:46
Now here we are with our app.
4:47
We can just say python app.py.
4:52
Looks like we have our flask app running.
4:53
Notice it's running in production.
4:55
We'll talk about how to alter that
4:57
as we get into a real app.
4:58
But for now let's just see what we got going on here.
5:02
Well look at that, hello world.
5:05
Make it more impressive, I'll zoom it.
5:07
There you go, hello world. That's our app.
5:09
So we've got our basic structure here.
5:12
Our tree that we can look at
5:14
so we've got our first_site and all that code here.
5:16
The reason I put this in a sub-directory
5:17
is we ultimately may want to install this as a package.
5:21
It makes some of the testing
5:22
and other things slightly easier when we do that.
5:25
Slightly easier for her to parts without worring
5:27
about partial relative paths and things like that.
5:30
So, that allows us to put the setup.py and other stuff
5:33
outside of the site itself, that's typically how that goes.
5:36
So, here's our code.
5:38
We've got our static section
5:39
our templates, our view models, our views.
5:41
Haven't done too much of that yet
5:43
but this is the general structure
5:45
we're going to use to get started.
5:47
We'll put flask in here, maybe pytest in there
5:50
and whatnot as we go.
5:52
But this is our first_site, and this is
5:53
how you do it on the command line.
