1 00:00:00,870 --> 00:00:03,580 Are you ready to jump into the world of flask? 2 00:00:03,580 --> 00:00:06,379 Let's start with importing flask. 3 00:00:06,379 --> 00:00:11,739 From lowercase f, import flask with an uppercase F. 4 00:00:14,996 --> 00:00:19,710 To start our site, we'll need to create a new variable called app, 5 00:00:19,710 --> 00:00:24,560 and set it equal to Flask and pass in Dunder name. 6 00:00:25,880 --> 00:00:29,906 Dunder name refers to the namespace this is running in, 7 00:00:29,906 --> 00:00:33,350 we will be running this in app.py directly. 8 00:00:33,350 --> 00:00:36,380 So the namespace will be Dunder main. 9 00:00:36,380 --> 00:00:39,755 If we were to import this file to be used elsewhere, 10 00:00:39,755 --> 00:00:43,213 it would take on the name of the file it is located in. 11 00:00:43,213 --> 00:00:48,193 In this case, app for app.py. 12 00:00:48,193 --> 00:00:52,100 Now that we've created our app, let's create our first route. 13 00:00:52,100 --> 00:00:57,014 A route from the user side is just like a URL, like teamtreehouse.com. 14 00:00:58,050 --> 00:01:02,914 From the application side, a route is a command to run a specific function, 15 00:01:02,914 --> 00:01:05,810 which then returns the response to the user. 16 00:01:06,980 --> 00:01:09,300 To create one, we'll have to use a decorator. 17 00:01:09,300 --> 00:01:11,297 It looks like this. 18 00:01:11,297 --> 00:01:18,666 @app.route, and we're gonna give it a slash. 19 00:01:18,666 --> 00:01:23,374 In simple terms, decorators are functions that wrap around 20 00:01:23,374 --> 00:01:27,170 other functions and let you do things with them. 21 00:01:28,750 --> 00:01:31,529 Next, we'll define a function called index. 22 00:01:38,555 --> 00:01:41,510 This is the function our decorator wraps around. 23 00:01:42,780 --> 00:01:46,020 Index is the typical name used for the homepage. 24 00:01:46,020 --> 00:01:47,990 And it's a pattern you'll see a lot. 25 00:01:47,990 --> 00:01:53,364 Inside this function, we'll return a string 26 00:01:53,364 --> 00:01:57,795 that says, Hello from Pet Adoption. 27 00:01:57,795 --> 00:02:06,720 Here, the app.route function works as a part of the request response cycle. 28 00:02:06,720 --> 00:02:11,314 When someone requests our apps homepage or 29 00:02:11,314 --> 00:02:17,438 the root route, this decorator will call our function, 30 00:02:17,438 --> 00:02:22,430 which will then send a response of our string. 31 00:02:23,710 --> 00:02:28,200 Now before we run this, we need to tell the app to well run. 32 00:02:29,260 --> 00:02:32,306 I'm going to place this inside of a Dunder main at the bottom here. 33 00:02:44,328 --> 00:02:47,710 We're going to use our app variable to call the run method. 34 00:02:49,770 --> 00:02:52,740 This method is going to take a few parameters. 35 00:02:52,740 --> 00:02:54,843 First, we're going to set debug to true. 36 00:02:59,284 --> 00:03:02,563 This will restart our server every time we change our code, 37 00:03:02,563 --> 00:03:05,590 which is a nice little feature that saves us some time. 38 00:03:07,230 --> 00:03:10,660 Next, we're going to give it a port and a host. 39 00:03:10,660 --> 00:03:14,220 This is like the address the website will be working on. 40 00:03:14,220 --> 00:03:20,738 We're going to use a port of 8000, and a host for 41 00:03:20,738 --> 00:03:26,827 those working locally of 127.0.0.1. 42 00:03:26,827 --> 00:03:31,100 If you're working in workspaces, then this needs to be all zeros like this. 43 00:03:32,980 --> 00:03:40,123 Since I'm working locally, I'm gonna save my file with the 127.0.0.1. 44 00:03:40,123 --> 00:03:42,877 Run the file python3 app.py. 45 00:03:42,877 --> 00:03:46,124 Again, if you're on Windows or in workspaces, 46 00:03:46,124 --> 00:03:48,750 you may not need this 3 here and run it. 47 00:03:48,750 --> 00:03:53,134 And you can either type in this address here into your browser like 48 00:03:53,134 --> 00:03:56,727 Google Chrome or Firefox, whatever you want to use. 49 00:03:56,727 --> 00:04:00,422 Or if you have the option, you can do a command click or 50 00:04:00,422 --> 00:04:05,286 control click if you're on Windows, to automatically open this up. 51 00:04:08,342 --> 00:04:10,208 Now if you're working in workspaces, 52 00:04:10,208 --> 00:04:13,610 you'll need to click on this little eye up here in the top right corner. 53 00:04:14,850 --> 00:04:18,262 Click on the matching port and this will open up your website. 54 00:04:25,567 --> 00:04:28,166 And awesome, our message is being sent to the user. 55 00:04:30,457 --> 00:04:32,350 It seems like magic, right? 56 00:04:32,350 --> 00:04:34,045 Well, maybe not so much anymore, 57 00:04:34,045 --> 00:04:36,780 especially now that you know how this works. 58 00:04:36,780 --> 00:04:39,210 But it can still feel like it sometimes. 59 00:04:39,210 --> 00:04:43,330 This works because you've just made the first request response. 60 00:04:43,330 --> 00:04:46,597 By navigating to the matching address, 61 00:04:46,597 --> 00:04:51,599 you've requested the homepage route from our application. 62 00:04:51,599 --> 00:04:58,060 And it sent back the response, which is our Hello from Pet Adoption string. 63 00:04:59,100 --> 00:05:03,052 This all happens in a matter of milliseconds. 64 00:05:03,052 --> 00:05:04,820 Nice work. 65 00:05:04,820 --> 00:05:09,640 Now, I challenge you to create another route on your own. 66 00:05:09,640 --> 00:05:12,710 You've got all the tools here that you need. 67 00:05:12,710 --> 00:05:16,047 It should have a different location from the homepage, 68 00:05:16,047 --> 00:05:19,530 but it should still start with the slash. 69 00:05:19,530 --> 00:05:22,918 The function you create should also have a unique name, 70 00:05:22,918 --> 00:05:26,500 try to name it something that matches the page. 71 00:05:26,500 --> 00:05:29,300 This is the pattern you'll want to work with moving forward. 72 00:05:30,320 --> 00:05:31,730 Pause me and give it a go. 73 00:05:34,305 --> 00:05:38,340 I made a cat route and sent back meow. 74 00:05:39,860 --> 00:05:45,360 In the browser, I can see this by calling that route/meow. 75 00:05:45,360 --> 00:05:45,881 And there it is. 76 00:05:50,509 --> 00:05:55,177 Check the teacher's notes for more information on decorators and namespace, 77 00:05:55,177 --> 00:05:58,280 if you would like to dive deeper into those topics. 78 00:05:58,280 --> 00:06:01,023 If you're saving your work in a GitHub repo, 79 00:06:01,023 --> 00:06:05,430 now would be a good time to add, commit and push your work. 80 00:06:05,430 --> 00:06:08,950 Before you leave, let's check out Flask's documentation. 81 00:06:10,190 --> 00:06:13,310 On their website, they have a quickstart. 82 00:06:13,310 --> 00:06:17,010 You'll notice their quickstart code looks a lot like what we've created. 83 00:06:18,040 --> 00:06:19,624 Many popular frameworks and 84 00:06:19,624 --> 00:06:23,960 libraries include quickstarts to help show you how to get started. 85 00:06:23,960 --> 00:06:26,200 There's some excellent information here. 86 00:06:26,200 --> 00:06:30,450 So, take some time to read or scan through it. 87 00:06:30,450 --> 00:06:34,280 Don't worry about needing to understand every detail of the page. 88 00:06:34,280 --> 00:06:35,460 We're just getting started.