Effective PyCharm (2021 edition) Transcripts
Chapter: Server-side Python web apps
Lecture: Creating server-side projects

Learn more about this course
Login or purchase this course to watch this video and the rest of the course contents.
0:00 Let's go and create a web application,
0:02 a server side python based web app in PyCharm.
0:06 Now, just like before I could go and find a folder and drop it in
0:09 here and just start writing code.
0:11 But with the web apps sometimes there's a little more setup and configuration and it might
0:16 actually be easier to start from here to be honest.
0:18 I still often start from scratch if I'm doing something like Flask or Fast API but
0:22 if I was doing pyramid, I would start with either this or maybe cookie cutter
0:26 So we go over here,
0:27 we click new project and then these are service side web apps.
0:31 We could do Django and you can see what's going to create a virtual environment wherever
0:35 we want that to go or pick an existing template.
0:39 And then if you expand out this more settings,
0:41 you can see we could pick the template language to be either Django templates or Jinja2
0:45 templates, name the folder,
0:48 give the application name and decide whether or not.
0:51 To enable the admin backend. We go over to pyramid.
0:54 The settings are a little bit different.
0:56 Same thing virtual environment. But then we give it a name.
0:59 We choose from its selection of template languages,
1:03 Chameleon my favorite. And you can even choose the database back end.
1:06 Is it ZODB, SQLAlchemy or bring your own,
1:10 you know, Mongo DB or whatever you want to write.
1:13 But we're going to do Flask.
1:14 I think Flask is the right mix of really popular and well known and not too
1:18 complicated. So we're going to create one of these and really Jinja2 to is the
1:23 primary option here create a new virtual environment and I've already copied the path into our
1:29 GitHub repository into this web server side thing.
1:32 And let's give it a name,
1:33 first flask or something like that.
1:36 Let's go see what we get.
1:42 Did you see that? It was actually downloading flask.
1:45 So in addition to just creating the files,
1:48 the sort of starter files and start a structure here.
1:50 It also realized that we depend upon Flask.
1:53 So it automatically added that. Let's go ahead and let it add what it thinks
1:57 it needs to run here. So it's created a few things you can see our
2:01 'app.py' this is your sort of Hello World flask app.
2:04 And quite literally it says Hello world.
2:07 And then we have our static folder where we could put stuff like if we wanted
2:10 we could come over here and make a directory called CSS and into the directory
2:15 we could put something like 'site.css' when you create our html templates,
2:21 we're gonna put them over here.
2:24 So let's go out and do that.
2:25 Let's convert this from Hello World to actually use uh template and we can see some
2:30 of the cool features. So notice it's already detected that it's a Flask app.
2:35 If we hit the edit configuration,
2:37 you can see it has certain things like here's the target.
2:40 We're going to use this Flask Environment Flask debug and so on.
2:44 So it's going to use the Flask run style instead of running this app directly.
2:49 Although you could run it with this right here.
2:53 So we go, you can see up here that it shows the settings,
2:56 here's the app, here's the environment and here is whether or not the bug is
2:59 turned on and let's just click it.
3:01 See what we get. Hello world.
3:03 A little underwhelming. Not the most incredible thing in the whole wide world,
3:06 is it? Let's go and actually add something to do with templates.
3:12 Some html because really that's the way things are supposed to be done.
3:16 So first of all this is forward slash(/)
3:18 I like to name this index and just say a little flask,
3:23 something like that. And then we could add some sort of secondary thing,
3:28 but let's just start by having an index or here so we can add HTML5
3:33 call this index. I like this method name to match the file name.
3:37 Right, So we can set the title and let's just go put an H1 its
3:42 capital expand that will say hello to the flask.
3:47 World from PyCharm now over here.
3:52 We need to do something like Flask,
3:56 render template. What are we gonna do?
3:59 We got to give it a template name.
4:01 Right, check this out. I told you there's this cool integration between the template
4:05 folder. If it's marked as a template directory.
4:08 That's the purple in the main framework.
4:10 So I go over here at this command space.
4:13 It auto completes. Why did auto complete?
4:15 Well there's only one option there.
4:17 If I get it to type it out of my type,
4:18 I see it knows into that templates folder that this is the one if there's subdirectories
4:24 it knows about those. So we can come over here make a new directory
4:28 called call this home when you put this in there.
4:32 For example, PyCharm actually automatically did that.
4:39 Re factoring when I did that file move,
4:41 which is pretty awesome. But let's just go and type it again just to see
4:44 what happens. So if I type home then I type this,
4:47 see it auto completes and then right here there's this to allow us to jump over
4:52 there and we can jump back so we can navigate super quick between this view method
4:57 and that. Let's make sure things still work the first time that you run this
5:01 it's going to say we already have this app running you can see is running
5:05 down here, we're gonna have to start over in order for it to take up
5:08 the changes that we did and that's just how python works.
5:11 That's how we can't share port things like that.
5:14 So we'll just help to do this now.
5:16 If we hit this, check it out.
5:17 Hello to the flask world from PyCharm.
5:21 Super. Cool. Right, so we're now using this template,
5:24 The final thing that might be interesting to do here is to pass some sort of
5:28 data. So let's just go over here and put a random number.
5:33 So we'll put a number, this is going to be something from random which we
5:36 can import create a random randint between 50 and 100.
5:43 We'll just say number=num.
5:45 So we'll pass these keyword arguments.
5:47 These will appear over here as variables that we can either work with through python expressions
5:53 or turn into strings. So I'll put a little div and then we'll say your
5:58 number of the day is and in Jinja we do a double curly brace that will
6:04 tell you were about to take a variable,
6:06 it was passed over and turn it into a string.
6:08 What we're gonna do, we're gonna work with number that auto complete all that is
6:12 cool. So let's rerun it again,
6:16 go back over here, refresh Your day,
6:20 your number of the day is 100 incredible.
6:22 You got 93 52 69 59 awesome.
6:28 So is it impressive? No,
6:30 is it a good start. Absolutely.
6:32 The thing I want to have you take away here is this deep integration notice we
6:37 have automatic, we have auto complete for things like four and then I guess maybe
6:43 more easy. See as if we haven't and an end for we have all these
6:48 sort of auto complete type things for the Jinja language which that doesn't make sense what
6:54 I wrote but shows you some Auto complete as well as the fact that this data
6:58 there is being passed over. Notice our variables is num,
7:01 but the keyword argument is number and that's what it auto completed when I typed in
7:06 Super, super cool. So the integration and just getting us off on the right foot pretty awesome.