00:0.04 Let's go and create a web application,
00:2.31 a server side python based web app in PyCharm.
00:6.04 Now, just like before I could go and find a folder and drop it in
00:9.09 here and just start writing code.
00:11.64 But with the web apps sometimes there's a little more setup and configuration and it might
00:16.14 actually be easier to start from here to be honest.
00:18.37 I still often start from scratch if I'm doing something like Flask or Fast API but
00:22.86 if I was doing pyramid, I would start with either this or maybe cookie cutter
00:26.04 So we go over here,
00:27.92 we click new project and then these are service side web apps.
00:31.51 We could do Django and you can see what's going to create a virtual environment wherever
00:35.3 we want that to go or pick an existing template.
00:39.47 And then if you expand out this more settings,
00:41.36 you can see we could pick the template language to be either Django templates or Jinja2
00:45.77 templates, name the folder,
00:48.5 give the application name and decide whether or not.
00:51.19 To enable the admin backend. We go over to pyramid.
00:54.88 The settings are a little bit different.
00:56.48 Same thing virtual environment. But then we give it a name.
00:59.79 We choose from its selection of template languages,
01:3.56 Chameleon my favorite. And you can even choose the database back end.
01:6.92 Is it ZODB, SQLAlchemy or bring your own,
01:10.61 you know, Mongo DB or whatever you want to write.
01:13.64 But we're going to do Flask.
01:14.92 I think Flask is the right mix of really popular and well known and not too
01:18.61 complicated. So we're going to create one of these and really Jinja2 to is the
01:23.44 primary option here create a new virtual environment and I've already copied the path into our
01:29.23 GitHub repository into this web server side thing.
01:32.5 And let's give it a name,
01:33.49 first flask or something like that.
01:36.64 Let's go see what we get.
01:42.94 Did you see that? It was actually downloading flask.
01:45.2 So in addition to just creating the files,
01:48.05 the sort of starter files and start a structure here.
01:50.74 It also realized that we depend upon Flask.
01:53.93 So it automatically added that. Let's go ahead and let it add what it thinks
01:57.49 it needs to run here. So it's created a few things you can see our
02:1.07 'app.py' this is your sort of Hello World flask app.
02:4.66 And quite literally it says Hello world.
02:7.04 And then we have our static folder where we could put stuff like if we wanted
02:10.74 we could come over here and make a directory called CSS and into the directory
02:15.94 we could put something like 'site.css' when you create our html templates,
02:21.68 we're gonna put them over here.
02:24.14 So let's go out and do that.
02:25.11 Let's convert this from Hello World to actually use uh template and we can see some
02:30.12 of the cool features. So notice it's already detected that it's a Flask app.
02:35.79 If we hit the edit configuration,
02:37.33 you can see it has certain things like here's the target.
02:40.96 We're going to use this Flask Environment Flask  debug and so on.
02:44.87 So it's going to use the Flask run style instead of running this app directly.
02:49.44 Although you could run it with this right here.
02:53.44 So we go, you can see up here that it shows the settings,
02:56.31 here's the app, here's the environment and here is whether or not the bug is
02:59.11 turned on and let's just click it.
03:1.47 See what we get. Hello world.
03:3.35 A little underwhelming. Not the most incredible thing in the whole wide world,
03:6.72 is it? Let's go and actually add something to do with templates.
03:12.42 Some html because really that's the way things are supposed to be done.
03:16.44 So first of all this is forward slash(/)
03:18.76 I like to name this index and just say a little flask,
03:23.74 something like that. And then we could add some sort of secondary thing,
03:28.02 but let's just start by having an index or here so we can add HTML5
03:33.37 call this index. I like this method name to match the file name.
03:37.84 Right, So we can set the title and let's just go put an H1 its
03:42.74 capital expand that will say hello to the flask.
03:47.96 World from PyCharm now over here.
03:52.55 We need to do something like Flask,
03:56.69 render template. What are we gonna do?
03:59.6 We got to give it a template name.
04:1.4 Right, check this out. I told you there's this cool integration between the template
04:5.63 folder. If it's marked as a template directory.
04:8.31 That's the purple in the main framework.
04:10.26 So I go over here at this command space.
04:13.43 It auto completes. Why did auto complete?
04:15.32 Well there's only one option there.
04:17.37 If I get it to type it out of my type,
04:18.91 I see it knows into that templates folder that this is the one if there's subdirectories
04:24.38 it knows about those. So we can come over here make a new directory
04:28.72 called call this home when you put this in there.
04:32.72 For example, PyCharm actually automatically did that.
04:39.28 Re factoring when I did that file move,
04:41.46 which is pretty awesome. But let's just go and type it again just to see
04:44.1 what happens. So if I type home then I type this,
04:47.57 see it auto completes and then right here there's this to allow us to jump over
04:52.45 there and we can jump back so we can navigate super quick between this view method
04:57.84 and that. Let's make sure things still work the first time that you run this
05:1.64 it's going to say we already have this app running you can see is running
05:5.57 down here, we're gonna have to start over in order for it to take up
05:8.88 the changes that we did and that's just how python works.
05:11.97 That's how we can't share port things like that.
05:14.26 So we'll just help to do this now.
05:16.54 If we hit this, check it out.
05:17.91 Hello to the flask world from PyCharm.
05:21.24 Super. Cool. Right, so we're now using this template,
05:24.14 The final thing that might be interesting to do here is to pass some sort of
05:28.59 data. So let's just go over here and put a random number.
05:33.28 So we'll put a number, this is going to be something from random which we
05:36.9 can import create a random randint between 50 and 100.
05:43.04 We'll just say number=num.
05:45.64 So we'll pass these keyword arguments.
05:47.81 These will appear over here as variables that we can either work with through python expressions
05:53.93 or turn into strings. So I'll put a little div and then we'll say your
05:58.23 number of the day is and in Jinja we do a double curly brace that will
06:4.48 tell you were about to take a variable,
06:6.61 it was passed over and turn it into a string.
06:8.53 What we're gonna do, we're gonna work with number that auto complete all that is
06:12.77 cool. So let's rerun it again,
06:16.34 go back over here, refresh Your day,
06:20.05 your number of the day is 100 incredible.
06:22.08 You got 93 52 69 59 awesome.
06:28.26 So is it impressive? No,
06:30.63 is it a good start. Absolutely.
06:32.74 The thing I want to have you take away here is this deep integration notice we
06:37.51 have automatic, we have auto complete for things like four and then I guess maybe
06:43.28 more easy. See as if we haven't and an end for we have all these
06:48.89 sort of auto complete type things for the Jinja language which that doesn't make sense what
06:54.11 I wrote but shows you some Auto complete as well as the fact that this data
06:58.99 there is being passed over. Notice our variables is num,
07:1.9 but the keyword argument is number and that's what it auto completed when I typed in
07:6.45 Super, super cool. So the integration and just getting us off on the right foot pretty awesome.
