Chapter: Surveying the non-js-enabled Flask app
Lecture: Setting up and running the Flask app
0:00 Here we are in our GitHub repo for the course. When you get to it I'm sure there'll be a lot more things going on.
0:07 But we're going to start from the beginning and here we are with our starter video collector Flask web app. In order for us to explore it and run it,
0:15 the first thing we need to do is open it up in an editor, install some of the configuration files, the requirements and then we can go and run it.
0:24 So we're gonna use PyCharm and drop this over here and PyCharm will open it up. That only works on Mac, if you're on Windows or Linux,
0:32 just click on file, open directory, browse to that. PyCharm has noticed that there's no virtual environment but that we have a requirements.txt,
0:40 so he thinks we should have one and offers to create it for us, which is great. We come down to the terminal and do a pip list,
0:52 see what we've got, it's actually already installed,
0:55 Flask and everything that's specified here in the requirements file, except for, it didn't update our
1:00 pip, did it? Let's go and do that real quick as well. Just so we don't see warnings for the rest of the course.
1:05 Great, we've got our system all set up and ready to go.Before we look at the code, I think it makes sense to just run this app and see
1:14 what's going on. So in PyCharm we have no run configuration. We have to go over here and right click and say run 'app'. Fires up our
1:22 Flask web app after just a second. And here it is! This is our video collector. Your favorite videos, old school,
1:31 Yahoo! style. So what is this thing about? Well, it has categories of videos. Here, You can see five categories on the screen.
1:47 like if we go to racing, you can see here that we've got some driver coaching stuff about trail braking, Romain Grosjean's first IndyCar race.
1:57 Some stuff about Formula E. This one's kind of this crazy video here about this SIM that this Australian guy put together, and if you click on them,
2:06 they'll actually play. So here you can see this guy driving in his, here, uh go back and see this IndyCar start.
2:17 So these are real videos that we got off of Youtube and we put them into
2:22 these categories, and it's Yahoo! style because we're just kind of keeping track of the ones
2:26 that we like, right? we save them to the categories and whatnot. That's how Yahoo! used to be in the early days.
2:31 It was literally like the yellow pages of the internet. Very weird. The other thing that we have up here is this little dot, dot,
2:37 dot hamburger type thing. And if we click it, see it spins for a while, thinking,
2:43 thinking, thinking and then eventually it gives us every single video on the site. Oh, that seems not ideal.
2:51 Wouldn't that make a lot of sense to do like an infinite scroll? and over here when we're in a category, like one of the Python category,
3:00 what if we wanted to add a new video? Well that "Click to Edit", right
3:05 there would be super handy. And if you don't really know what videos are interesting, maybe a little search. We have no search
3:12 placeholder, anything yet. We're gonna have to write that entire page. So this is the application that we're going to be starting from in order for you
3:20 to get started and run it yourself. Just make a copy, so you have the original.
3:24 Of course, as you evolve it, create a virtual environment, pip install -r requirements.txt after you've activated environment, run app.py. That's it,
3:35 you'll have this site up and running right away.