WEBVTT 1 00:00:00.230 --> 00:00:01.680 Hi and welcome back. 2 00:00:02.545 --> 00:00:03.378 In this video, we're going to be implementing 3 00:00:03.378 --> 00:00:06.040 our first Flask application. 4 00:00:06.040 --> 00:00:08.300 It's not going to be a very large application 5 00:00:08.300 --> 00:00:09.470 but it's going to give us a taste 6 00:00:09.470 --> 00:00:11.330 of how Flask works. 7 00:00:12.370 --> 00:00:15.620 Now that we've imported the Flask class here 8 00:00:15.620 --> 00:00:20.180 from the Flask module, we're ready to start. 9 00:00:20.180 --> 00:00:21.370 The first thing we have to 10 00:00:21.370 --> 00:00:24.420 is to use that class to create our Flask app 11 00:00:25.290 --> 00:00:28.730 and every Flask app must have a unique name. 12 00:00:30.030 --> 00:00:33.580 We can do something like app equals Flask 13 00:00:33.580 --> 00:00:35.850 and then dunder name. 14 00:00:36.750 --> 00:00:38.580 The reason why I'm using dunder name here 15 00:00:38.580 --> 00:00:40.670 is just because that's always going to be unique 16 00:00:40.670 --> 00:00:43.210 for an application, you know that the file you run 17 00:00:43.210 --> 00:00:47.050 has a name of main and all the other files 18 00:00:47.050 --> 00:00:49.060 are gonna have different names so there's no chance 19 00:00:49.060 --> 00:00:51.440 of us creating another Flask app with the same name 20 00:00:51.440 --> 00:00:54.610 throughout our entire application by mistake. 21 00:00:54.610 --> 00:00:56.120 In this project, we're only going to be creating 22 00:00:56.120 --> 00:01:00.220 a single Flask app but, you know, this is important anyway 23 00:01:00.220 --> 00:01:02.430 make sure to have a unique name there. 24 00:01:02.430 --> 00:01:05.580 Also, when you are seeing logs and things like that 25 00:01:05.580 --> 00:01:09.050 you may wanna see there the name of the Flask app 26 00:01:09.050 --> 00:01:11.340 and it can be helpful to know that this is 27 00:01:11.340 --> 00:01:13.020 the main file that you ran. 28 00:01:14.260 --> 00:01:15.580 The next thing we wanna do, 29 00:01:15.580 --> 00:01:20.450 is define the first URL of our application. 30 00:01:20.450 --> 00:01:23.260 Remember this is going to be a web application 31 00:01:23.260 --> 00:01:26.190 which means users are going to be accessing this application 32 00:01:26.190 --> 00:01:28.250 using their browsers like Google Chrome 33 00:01:28.250 --> 00:01:30.030 or Internet Explorer. 34 00:01:30.030 --> 00:01:31.810 So the first thing we have to do is say, 35 00:01:31.810 --> 00:01:35.450 you know what happens when somebody arrives at our page? 36 00:01:35.450 --> 00:01:38.020 What happens when somebody tells the browser 37 00:01:38.020 --> 00:01:41.760 to send us a request for data? 38 00:01:41.760 --> 00:01:42.593 What do we do? 39 00:01:43.870 --> 00:01:46.339 So the first thing we do, is we use a decorator 40 00:01:46.339 --> 00:01:48.760 to say app dot route 41 00:01:48.760 --> 00:01:52.080 and then we're gonna give this forward slash there. 42 00:01:52.080 --> 00:01:54.050 The forward slash on any page is always 43 00:01:54.050 --> 00:01:57.449 the homepage, we're gonna see this in action 44 00:01:57.449 --> 00:01:58.630 in just a moment. 45 00:01:58.630 --> 00:02:01.520 Then we're gonna do, def home for example 46 00:02:01.520 --> 00:02:04.390 defining a function, and as you know, 47 00:02:04.390 --> 00:02:08.330 this decorator here is going to act on this function here. 48 00:02:08.330 --> 00:02:11.020 So the function name doesn't really matter 49 00:02:11.020 --> 00:02:12.400 all that matters is that we've got 50 00:02:12.400 --> 00:02:14.540 the right decorator on top. 51 00:02:15.470 --> 00:02:17.830 This function is going to run 52 00:02:17.830 --> 00:02:20.390 when the user visits this route. 53 00:02:21.840 --> 00:02:26.450 And for now, it's just going to return hello world, okay? 54 00:02:27.450 --> 00:02:30.840 So what's gonna happen when a user visits our home page 55 00:02:30.840 --> 00:02:32.990 is they're going to be received 56 00:02:32.990 --> 00:02:34.680 with the words hello world. 57 00:02:35.530 --> 00:02:37.360 The connection goes as follows, 58 00:02:37.360 --> 00:02:40.520 the browser, the user's going to type our website 59 00:02:40.520 --> 00:02:42.970 into their browser and the browser is going 60 00:02:42.970 --> 00:02:46.160 to send us a request, it's gonna say hey I want 61 00:02:46.160 --> 00:02:48.000 the home page. 62 00:02:48.000 --> 00:02:50.510 Then we're going to run this home function 63 00:02:50.510 --> 00:02:52.550 and Flask is going to take care of, you know, 64 00:02:52.550 --> 00:02:54.540 communicating with the browser and sending information 65 00:02:54.540 --> 00:02:56.200 over the internet and so forth, 66 00:02:56.200 --> 00:02:59.090 and at the end this function is going to return hello world 67 00:02:59.090 --> 00:03:01.130 and that's what we're gonna send the browser 68 00:03:01.130 --> 00:03:04.280 as data to display on the webpage. 69 00:03:04.280 --> 00:03:06.670 So the browser is then going to show that to the user, 70 00:03:06.670 --> 00:03:08.370 the words hello world. 71 00:03:09.640 --> 00:03:11.820 Finally, we have to run our app 72 00:03:11.820 --> 00:03:14.130 to start the server that allows Flask 73 00:03:14.130 --> 00:03:16.400 to receive connections. 74 00:03:16.400 --> 00:03:17.480 The way we're gonna do that 75 00:03:17.480 --> 00:03:21.420 is of course if name is main, 76 00:03:21.420 --> 00:03:23.950 so that we only run this when we actually want to run it 77 00:03:23.950 --> 00:03:25.870 as opposed to when we import the file, 78 00:03:25.870 --> 00:03:28.850 which again we're not going to do in this section 79 00:03:28.850 --> 00:03:30.010 but nonetheless it's something you may 80 00:03:30.010 --> 00:03:31.680 wanna do in the future. 81 00:03:31.680 --> 00:03:34.580 All we do is, apologies by that by the way, 82 00:03:34.580 --> 00:03:37.540 app dot run, debug is true. 83 00:03:38.890 --> 00:03:40.470 This starts running our app 84 00:03:41.380 --> 00:03:44.280 and we can give it this debug flag 85 00:03:44.280 --> 00:03:45.940 which usually is just here for development purposes 86 00:03:45.940 --> 00:03:48.720 but it just means that we're gonna get a few more errors, 87 00:03:48.720 --> 00:03:50.470 sorry a few more informations 88 00:03:50.470 --> 00:03:52.980 if an error happens, so a couple of more 89 00:03:52.980 --> 00:03:55.200 bits of information if something does go wrong. 90 00:03:55.200 --> 00:03:57.630 We don't foresee anything going wrong with this app 91 00:03:57.630 --> 00:04:00.300 but nonetheless, it's always a good thing to have here 92 00:04:00.300 --> 00:04:02.320 when you are developing. 93 00:04:02.320 --> 00:04:04.180 Once you share this with your users, 94 00:04:04.180 --> 00:04:05.680 you may want to turn this off. 95 00:04:06.790 --> 00:04:08.440 Okay so that's it. 96 00:04:08.440 --> 00:04:11.749 This is our first Flask endpoint, 97 00:04:11.749 --> 00:04:15.010 now we can right click app dot py and run it, 98 00:04:15.960 --> 00:04:17.930 and as you can see, 99 00:04:17.930 --> 00:04:20.690 we get something from Flask. 100 00:04:20.690 --> 00:04:23.610 We get that it's running, we get the URL 101 00:04:23.610 --> 00:04:25.630 in which it is running the address 102 00:04:26.470 --> 00:04:28.480 and then you know get some debugging information here 103 00:04:28.480 --> 00:04:30.130 because we've used debug is true. 104 00:04:32.110 --> 00:04:33.360 This here, 105 00:04:34.410 --> 00:04:38.080 is the address of the application. 106 00:04:38.080 --> 00:04:41.116 When we send a request to this application 107 00:04:41.116 --> 00:04:43.830 it's going to be interacting with this Flask app 108 00:04:43.830 --> 00:04:44.980 what was in the request with this address 109 00:04:44.980 --> 00:04:47.120 is gonna be interacting with this Flask app 110 00:04:47.120 --> 00:04:48.500 and the Flask app can then choose 111 00:04:48.500 --> 00:04:51.110 to return some information. 112 00:04:51.110 --> 00:04:54.530 Let's go over to Chrome and access this URL. 113 00:04:55.740 --> 00:04:57.910 I've accessed the URL here with Chrome 114 00:04:57.910 --> 00:05:00.690 and as you can see we get the words, hello world. 115 00:05:00.690 --> 00:05:02.200 I know they're a bit small there, 116 00:05:02.200 --> 00:05:04.600 we're gonna look at how we can style things 117 00:05:04.600 --> 00:05:09.380 much later on, but this is what the application has returned 118 00:05:10.660 --> 00:05:14.330 so going back to PyCharm you can see that, 119 00:05:14.330 --> 00:05:17.140 we get some more information now on these logs. 120 00:05:17.140 --> 00:05:20.300 We get that on this date, 121 00:05:20.300 --> 00:05:23.680 there was a request being made to the homepage, 122 00:05:23.680 --> 00:05:26.800 this is the protocol used to make the request, 123 00:05:26.800 --> 00:05:29.990 it's just version of you know the way the browsers 124 00:05:29.990 --> 00:05:32.890 communicate with servers, HTTP 1.1. 125 00:05:32.890 --> 00:05:35.730 You can see that this is a get request 126 00:05:35.730 --> 00:05:38.810 and all that means is a particular type of request, 127 00:05:38.810 --> 00:05:39.650 there are various types, 128 00:05:39.650 --> 00:05:40.870 we're going to be exploring other types 129 00:05:40.870 --> 00:05:41.980 throughout the section. 130 00:05:41.980 --> 00:05:44.320 A get request which is what a browser sends 131 00:05:44.320 --> 00:05:47.230 when they access the page, just asks the server 132 00:05:47.230 --> 00:05:49.090 to send some information, 133 00:05:49.090 --> 00:05:50.430 it doesn't ask the server to you know 134 00:05:50.430 --> 00:05:53.890 make changes or add things to a database, things like that. 135 00:05:53.890 --> 00:05:56.510 And there are other types of request for that. 136 00:05:57.400 --> 00:05:59.320 And then we also see that the code 137 00:05:59.320 --> 00:06:01.990 that the server returned is a 200 138 00:06:01.990 --> 00:06:05.150 which means okay, it means everything's fine 139 00:06:05.150 --> 00:06:06.940 there were no errors or anything happened 140 00:06:06.940 --> 00:06:07.890 that was incorrect. 141 00:06:09.530 --> 00:06:11.740 This log here, if you can see that, 142 00:06:11.740 --> 00:06:13.690 means that everything's good. 143 00:06:13.690 --> 00:06:16.090 Sometimes you may see more than one log, 144 00:06:16.960 --> 00:06:19.550 and that's because some browsers do multiple requests 145 00:06:19.550 --> 00:06:21.931 for a single page like Safari can do that sometimes, 146 00:06:21.931 --> 00:06:24.140 don't worry about it. 147 00:06:24.140 --> 00:06:26.812 If you can see these logs even if you see a couple of 'em, 148 00:06:26.812 --> 00:06:28.240 this is good. 149 00:06:28.240 --> 00:06:29.820 This means your server is running 150 00:06:29.820 --> 00:06:31.900 and we've created our first endpoint. 151 00:06:32.830 --> 00:06:35.050 This here is known as a route 152 00:06:35.050 --> 00:06:38.010 or an endpoint and they essentially mean the same thing 153 00:06:38.010 --> 00:06:41.610 and this here is the, essentially the address 154 00:06:41.610 --> 00:06:42.530 of the route. 155 00:06:43.790 --> 00:06:46.430 A single forward slash, if we go back to Chrome 156 00:06:46.430 --> 00:06:49.230 just means nothing. 157 00:06:49.230 --> 00:06:51.150 But we can access other pages 158 00:06:51.150 --> 00:06:54.390 by doing, as you've probably seen in other sites, 159 00:06:54.390 --> 00:06:58.408 something like posts, or something. 160 00:06:58.408 --> 00:07:00.810 So you can see we've got a few test URLs here 161 00:07:00.810 --> 00:07:02.370 that I've been accessing already 162 00:07:02.370 --> 00:07:03.850 because what we're going to be creating in this section 163 00:07:03.850 --> 00:07:06.590 is a blogging application so we're going to be looking 164 00:07:06.590 --> 00:07:08.720 at various different posts. 165 00:07:08.720 --> 00:07:11.160 If you access the URL here 166 00:07:11.160 --> 00:07:13.500 with a single forward slash at the end, 167 00:07:13.500 --> 00:07:14.860 it's just going to take you to the same page 168 00:07:14.860 --> 00:07:15.870 you're already at. 169 00:07:16.790 --> 00:07:17.810 And then going back to PyCharm 170 00:07:17.810 --> 00:07:20.300 we can see that there's another log that appeared here. 171 00:07:20.300 --> 00:07:21.950 All I wanted to say here is 172 00:07:21.950 --> 00:07:24.040 the forward slash is the homepage 173 00:07:24.040 --> 00:07:26.990 but we can add routes for other things. 174 00:07:28.060 --> 00:07:29.450 Anyway that's it for this video. 175 00:07:29.450 --> 00:07:31.460 I wanted to show you how to go about this 176 00:07:31.460 --> 00:07:32.740 and I'll see you on the next one 177 00:07:32.740 --> 00:07:35.890 where we're going to look at some more complex Flask. 178 00:07:35.890 --> 00:07:36.840 I'll see you there.