WEBVTT 00:00.050 --> 00:03.080 Let's create a first web server with flask. 00:03.080 --> 00:07.100 We will do a very basic and minimalistic application to get started. 00:07.100 --> 00:13.610 So first of all, flask is a Python module that you can import in your code, just like we imported 00:13.610 --> 00:15.110 any other Python module. 00:15.110 --> 00:20.840 And good news, it's already installed for you on the Raspberry Pi OS, so you don't need to do anything, 00:20.840 --> 00:22.400 you can just import it. 00:22.400 --> 00:26.180 And what we're going to import is not the full module but one thing inside. 00:26.180 --> 00:35.330 So I'm going to do from flask like this all lowercase import and then flask with an f uppercase okay. 00:35.360 --> 00:36.770 So that's what we need to import. 00:36.800 --> 00:40.160 Let's just run that to see if it works. 00:40.160 --> 00:42.620 And you see that we don't have any error. 00:42.620 --> 00:45.230 So it means that it was correctly imported. 00:45.260 --> 00:45.770 Great. 00:45.770 --> 00:47.570 Then we will need to create. 00:47.570 --> 00:49.160 So we're going to create an app. 00:49.160 --> 00:51.980 So flask app and let's just name it app. 00:51.980 --> 00:53.690 That's going to be the web application. 00:53.690 --> 00:55.460 You do app is equal to. 00:55.490 --> 00:59.180 And then flask with open and close parentheses. 00:59.180 --> 01:02.280 And inside this we will need to write exactly this. 01:02.280 --> 01:07.410 So underscore underscore name and then underscore underscore. 01:07.410 --> 01:10.650 So you have two underscores here on each side okay. 01:10.680 --> 01:12.780 So there is not much to understand here. 01:12.780 --> 01:17.130 It's just something that you have to write to start an application with flask. 01:17.130 --> 01:19.620 So we have our app variable. 01:19.620 --> 01:25.260 Then what we will need to do is to create some routes. 01:25.260 --> 01:28.080 And I'm going to come back to routes in just one minute. 01:28.080 --> 01:31.170 So when you have a web server you will have URLs. 01:31.170 --> 01:33.750 You will have routes to different functionalities. 01:33.750 --> 01:41.070 So for example if you go to a website so example.com slash something okay the slash something is going 01:41.070 --> 01:41.790 to be a route. 01:41.790 --> 01:45.090 And for each route we're going to create a new function. 01:45.120 --> 01:45.690 All right. 01:45.720 --> 01:48.780 Let's skip that for in just one minute. 01:48.810 --> 01:52.500 Now I'm going to do app dot run okay. 01:52.530 --> 01:53.880 So you create the app. 01:53.880 --> 01:55.140 Then you're going to create some routes. 01:55.140 --> 01:58.540 And then that's going to be the last thing you do is app dot Run. 01:58.540 --> 02:06.400 And inside the parentheses you're going to put host is equal to 0.0.0.0. 02:06.400 --> 02:09.910 So you just write this and then you close the parentheses. 02:09.940 --> 02:10.300 All right. 02:10.300 --> 02:12.970 So this is going to run the application. 02:12.970 --> 02:14.800 And it's going to pause the program here. 02:14.800 --> 02:18.070 And when you press Ctrl C it's going to exit. 02:18.100 --> 02:21.070 Let's just try this okay. 02:21.070 --> 02:24.400 And you see well you might think that we have an error here. 02:24.400 --> 02:26.800 So you can run it here from Tony and from the terminal. 02:26.800 --> 02:27.730 It's going to be the same. 02:27.730 --> 02:31.150 And we have a warning here in red in in Tony. 02:31.150 --> 02:36.850 So you see the app is kind of running and you have a warning because this is a development server. 02:36.880 --> 02:37.420 ET cetera. 02:37.420 --> 02:38.140 ET cetera. 02:38.140 --> 02:39.520 But this is fine okay. 02:39.550 --> 02:43.330 We are just using flask for small applications and for tests. 02:43.330 --> 02:46.360 So it's not really a production environment okay. 02:46.390 --> 02:48.790 So we can just ignore this warning. 02:48.790 --> 02:54.940 And then I make sure that I select the shell and I press control C and you see we exit. 02:54.970 --> 02:55.480 Great. 02:55.480 --> 02:56.920 So the app is working. 02:56.920 --> 02:58.680 Now let's add a route. 02:58.680 --> 03:08.460 So to add a route you will need to add this specific syntax with at app dot route open close parentheses. 03:08.460 --> 03:12.210 And inside we're going to write for example slash okay. 03:12.240 --> 03:15.480 So the slash is going to be the home page kind of the homepage. 03:15.480 --> 03:19.590 If you go to example.com slash well you don't add any slash. 03:19.620 --> 03:21.150 It's just going to be the home page. 03:21.180 --> 03:26.550 And after we have this we need to create a function I'm going to name it index. 03:26.550 --> 03:31.680 So usually the function for the home page is going to be named index. 03:31.680 --> 03:33.480 You can name it as you want okay. 03:33.480 --> 03:34.680 It doesn't really matter. 03:35.100 --> 03:37.500 And what do I need to do from this function. 03:37.500 --> 03:41.490 Well I can do whatever I want and then I need to return a string. 03:41.520 --> 03:48.030 The string is going to be what is going to be displayed on this route here on the home page. 03:48.060 --> 03:49.560 And well, you can return anything. 03:49.560 --> 03:51.390 You just need to return a string. 03:51.390 --> 03:52.920 So it can be a very simple string. 03:52.920 --> 03:57.420 For example, hello from flask like that. 03:57.420 --> 03:58.230 That's valid. 03:58.230 --> 04:05.220 But then also, of course, you can create a complete HTML page and just return the HTML as a string. 04:05.250 --> 04:07.650 But for now, let's keep things very simple. 04:07.680 --> 04:10.500 So that's going to be enough for our first application. 04:10.500 --> 04:12.390 Let's run that. 04:12.900 --> 04:15.030 And well we still have all of those logs. 04:15.030 --> 04:16.890 And you can see that we have here. 04:16.890 --> 04:23.400 You can click on for example the first URL here we click here that's going to open a web browser. 04:23.400 --> 04:29.190 And as you can see so in a web browser we have hello from flask. 04:29.190 --> 04:30.540 So that's correctly working. 04:30.540 --> 04:33.180 We can get the result from the web server. 04:33.420 --> 04:37.290 Now I'm going to give you a few more details so you understand a bit more about all that. 04:37.290 --> 04:40.350 So first you can see that when we have a request. 04:40.380 --> 04:45.240 So basically when we open a page it's going to make a request to the server here. 04:45.240 --> 04:48.840 And the server is going to return whatever for example in this function. 04:48.840 --> 04:51.750 So here it's going to return some HTML or some text. 04:51.750 --> 04:59.080 If I refresh you can look at the bottom here if I refresh, you see we have a get and then 200. 04:59.080 --> 05:04.180 So this is going to get some HTML here which is just a string. 05:04.180 --> 05:08.230 And 200 is the code that basically means success. 05:08.230 --> 05:12.730 So if you see 200 it means you could correctly get the result from the server. 05:12.760 --> 05:13.000 Right. 05:13.030 --> 05:17.410 So every time I refresh I do a new request and I get the string. 05:17.410 --> 05:20.200 Now as you can see here I have. 05:20.200 --> 05:21.820 So that's an IP address. 05:21.820 --> 05:23.080 And then I have a colon. 05:23.080 --> 05:25.390 And then I have another number. 05:25.390 --> 05:27.310 This number is the port. 05:27.310 --> 05:30.280 So you have the combination of IP address and port. 05:30.280 --> 05:32.260 And the port is 5000 okay. 05:32.290 --> 05:34.870 That's the default port for flask. 05:34.870 --> 05:38.680 But let's say I write something else for example 5001. 05:38.710 --> 05:43.510 You see that we cannot reach the web server because this doesn't exist. 05:43.510 --> 05:46.360 If I go back to 5000 it's working okay. 05:46.390 --> 05:48.220 And what is this here? 05:48.220 --> 05:52.240 127 .0.0.1 this. 05:52.240 --> 05:53.870 You will get it every time. 05:53.870 --> 05:58.160 So this is an IP address that's just corresponds to this machine. 05:58.160 --> 06:05.540 So in any basically any device, if you write this IP address that's going to correspond to this machine, 06:05.540 --> 06:07.490 it's also called local host. 06:07.490 --> 06:10.700 And actually you can just write instead of this. 06:10.700 --> 06:14.540 You could write local host and press enter. 06:14.540 --> 06:17.000 And you see it's also working. 06:17.030 --> 06:17.420 All right. 06:17.420 --> 06:27.380 So the 127 .0.0.1 and localhost basically can be useful if you want to test a URL directly from the 06:27.410 --> 06:28.070 same device. 06:28.070 --> 06:32.690 So if you run the server on the Raspberry Pi, then you have a web browser on the Raspberry Pi and you 06:32.690 --> 06:34.850 can just type this address. 06:34.880 --> 06:35.510 Okay. 06:35.510 --> 06:40.820 But now if I come back to the logs, you see I have another address so I can run that too. 06:40.820 --> 06:42.020 And it's also working. 06:42.020 --> 06:46.370 And this you can see this is the IP address of the Raspberry Pi. 06:46.400 --> 06:49.070 Actually I can find that with the terminal as well. 06:49.070 --> 06:53.130 If I do hostname dash I upper case. 06:53.370 --> 06:55.050 You see, that's my IP address. 06:55.080 --> 07:01.050 All right, so if you type this IP address in a web browser and then call on with the port which is 07:01.050 --> 07:05.190 5000, then you will be able to get hello from flask. 07:05.190 --> 07:10.710 And this not just from the Raspberry Pi, but from any device that's connected on the same network. 07:10.710 --> 07:12.300 So here I'm using VNC. 07:12.330 --> 07:19.560 I could disconnect from VNC and just open a web browser on my windows, and I will be able to get access 07:19.560 --> 07:26.100 directly to the web server from the Raspberry Pi, or also from the smartphone here, because I'm using 07:26.100 --> 07:28.020 the smartphone as a hotspot. 07:28.020 --> 07:30.210 So the smartphone is on the same network. 07:30.210 --> 07:36.510 I can just open my smartphone, open a web browser and type this exactly, and I will also get the same 07:36.510 --> 07:36.960 results. 07:36.960 --> 07:42.540 So if you have another device connected to the Raspberry Pi, I encourage you to test that, to see 07:42.540 --> 07:47.340 that you can access the URL from outside of the Raspberry Pi. 07:47.370 --> 07:47.550 Okay. 07:47.580 --> 07:51.640 And that's going to be quite powerful because then you can run the server on the Raspberry Pi, and 07:51.640 --> 07:56.920 you can access to the functionalities from another device on the same network, not from the Raspberry 07:56.920 --> 07:57.340 Pi. 07:57.370 --> 08:01.570 Okay, and the last thing here this I'm going to come back to the ports. 08:01.600 --> 08:03.100 This is 5000. 08:03.130 --> 08:11.980 If you want to change it you can here in App.run you have host and then you can do port is equal to. 08:12.010 --> 08:15.190 And let's say for example 8500. 08:15.190 --> 08:23.710 So you can put any value you want but it needs to be minimum 1024 because all the previous values are 08:23.710 --> 08:25.690 reserved port okay. 08:25.720 --> 08:28.630 So 1500 for example is a valid one. 08:28.630 --> 08:30.520 I'm going to control C here. 08:30.520 --> 08:31.960 I'm going to run again. 08:31.960 --> 08:35.110 And you see we have the new URL here with the port. 08:35.140 --> 08:44.350 But if I go back here you see that with 5000 it's not working I have to put 8500 okay. 08:44.380 --> 08:45.850 And now it's working great. 08:45.850 --> 08:50.530 So you see, with just a few lines, you have created your first web server on the Raspberry Pi.