7.2 Start a web app with Flask - Video Tutorials & Practice Problems

<v ->So let's actually start on developing our web app.</v> There are a number of Python web app frameworks out there. We're gonna be using Flask today, which is considered a micro-framework. It only provides you with a couple of things, like a templating language and simple server and URL routing, and you only need to use what you need. And if you want more functionality, you can download extra libraries to provide that functionality. So another framework is Django, and it's the one that I do most of my work in. It's a full-stack framework, and it has a lot more features out of the box. The downside is, if you don't need all of those features, well, too bad, it comes with it anyways and there's a lot more overhead for even just small projects. So that's why we're gonna be using Flask today. Because we're not gonna add that many features. I just want to give you a taste of what creating a web app would look like. And then there's also Pyramid. And it's a middle ground between the two. We won't be looking at that today either. So, if I go to the Flask website, we can see here, the setup, creating a simple server, some more information, but then, the part of the Flask documentation that I find more useful is the Flask Quickstart. So, I can go here, and it's like a very simple, like minimalist, tutorial that tells you how to get started with flask. So a little bit about Flask. It actually started as an April Fool's joke in 2010 when the creator had this idea to make a web framework that you could write on a single page and didn't need all these folders and all these different types of files. It has, it's simple core functionality is creating a development server, doing some URL routing, so creating those URL end points that get handled differently if a user accesses them. Templating, which means, like, creating the HTML view, like what the page is gonna look like, but being able to fill in some useful information that comes from the back end. And then also, sessions and cookies and a debugger. We'll look at the debugger. It's quite useful, but it doesn't include a database or ORM library. It doesn't include authentication, so if you want a user to log in and log out, it doesn't have that built in. If there are forms, it doesn't do any automatic validation on them. And then, Django also comes with admin views by default, so if your staff, you can log in and actually see the data and change it all in the back end and it comes with a special Gooey for that, included. So Flask doesn't include that. So let's go to our code. And inside of the challenges folder, we've got this Challenge-5 web app. And I already have some folders and files in here already. Let's look at app.py. That's going to be where our Python code lives and it's currently empty because we're gonna fill that out. There are some templates that are gonna hold our index.html so that you don't have to write all of this from scratch. And then, also, some java script and some CSS. So we will go over HTML, java script and CSS in the next lesson. But the basic idea about it is that HTML provides the structure of the webpage, CSS provides the styling and, like, look of it, and then, java script provides some functionality. So, if I click this, then do this. If my mouse hovers over here, then do this thing. And then, and all of those are part of our front end, our client, our user facing interface. Whereas, app.py is going to be our server and this is going to handle those requests that the client makes. So we're gonna start off looking at this minimal application. I'm actually just gonna copy and paste all of this. And I'll put it inside of app.py. We've got a few errors. That's okay. So this is saying it's an error because Flask isn't a library that it has access to yet, so we have to still download that. But what we're gonna do, once it's downloaded, is we're gonna import this Flask class, create a new app, create a new instance of it. And then, this will add some routes, so this would be the URL end point. So, for example, you know, it could be home or about. If I just have a slash, that means it's the index, so it's the first thing that comes up if you just go to the website. And if I wanted to add another route, I'd have to create a new one, and maybe call it about. Change this name and then return, like, I, a website. The function under the end point route is what's gonna be called when the user tries to go to this route, and then, this is what's gonna be returned. So, to run this, so we actually first have to install Flask. So I'm going to go to my settings. And inside of the project, I have this project interpreter here, and if you wanted to install Flask at the top level, like, so it's accessible anytime you're running Python 3.7, you can do that here. Do install. Flask. Click it. And then install packages. If you want to be able to run multiple projects off of the same computer and maybe have different versions, you know, one project is for Flask, one is for Django, one is using, like, the new version of Flask, whenever it comes out, you know, it's better to have virtual environments. And I talk about this more in depth in lesson five. So, I'm gonna do the simple PyCharm method, so that you don't have to use the console or terminal. So I'm gonna add a new project interpreter. I've got this virtual environment, so I'm creating a new virtual environment. I'm gonna put it in a location, so, challenges. Not an example solution in the Challenges-5 web app. I'll put it inside there. And then, slash, a new folder called Venv, short for virtual environment. So that's where the, all of the libraries are going to be installed to. And then the base interpreter is gonna be Python 3.7. You can change it to Python 2 or whatever version of Python you want. And then, I'm gonna leave that, say okay. So it's now going to create a new virtual environment. And then, I can install Flask into here. Install packages. You can see there are a lot more Flask libraries for doing various things that you'll only download if you need to. So it installed successfully. Now I've got more stuff in here. Flask. It comes with these other things. And say okay. So now you've got to wait for a while, for PyCharm to recognize that the, like all the different libraries it has access to now, and then you should have this not as an error anymore. Great. Okay. So, now we want to actually run the server. So to do that, if you were using the terminal, you could run these two lines from the location that your hello.py or, in our case, app.py is located. But we're trying to avoid using the terminal for now, so we can actually do this in our PyCharm configurations. So I can do edit configuration. I've got one set up here already for the solutions, but let's create a new one from scratch. Flask app. So, the script path has to go to our virtual environment, so challenges, web app, virtual environment. And then go into bin and Flask. So open that. And then, parameters, we're gonna put run, 'cause we're gonna do Flask run as our command. And then this is going to be an environment variable that we want to add. So in environment variables, let's click this. Create a new one. And upper case, Flask, underscore, app. And this is going to be app.py. Okay, and then, Python interpreter. Yeah, this is probably, should be a different name, but this is our virtual environment one. That should be the same. And our working directory will be this directory, the same one that has our app.py. Okay, so do that. Press run. And then, it's good. It's saying it's running on this URL and port 5000. So, the URL 127.0.0.1 is equivalent to saying local host. So I can open up a new tab. You can just click it, or you can type local host and then colon, 5000 and I've got this app, Hello World. And then I also have this other route called about that I've added already. So if I go to slash, about, I can see this "I'm a website here." And I can go back and forth between them. Great. And it looks very simple right now because we're only returning text. But eventually we want to be returning some HTML. Okay, so that is gonna be the start of our website. I will show you what our eventual website looks like. I've got to stop this. Run the solution. And this is gonna be our website. Every time I click the cat, it changes color, and remembers how many times it's been clicked. If I refresh the page, or go to a new one, if I refresh this one, then it's, maintains the count of how many times it's been clicked. So I can open this up in any browser, but it is still only located on my computer until I deploy it and put it onto the internet.