WEBVTT 00:06.040 --> 00:12.770 In this module you're going to build a fantastic full professional projects using no dates. 00:12.850 --> 00:19.850 You're going to use your know days without having recourse to any node J.S. frameworks. 00:19.930 --> 00:28.390 So this is going to be a brilliant opportunity for you to master a wide range of advanced features which 00:28.390 --> 00:30.590 come with note. 00:30.580 --> 00:35.650 So let's have a look at our up and explore its different functionalities. 00:35.650 --> 00:38.630 So this is the landing page of the app. 00:39.730 --> 00:48.520 So when your users land in this page they can see different folders and files which are located in a 00:48.520 --> 00:52.300 directory which you choose In your server. 00:52.300 --> 00:59.650 So they'll be able to explore these folders and read the different files inside them. 01:00.130 --> 01:08.010 So for example if I click on that folder I'll be able to see the different folders and files inside. 01:08.320 --> 01:13.050 If I click again on another folder I can see folders and files inside it. 01:13.960 --> 01:22.790 So here we display the name of each folder or file the extension or file as well he signs. 01:22.990 --> 01:31.870 And when that file or folder was last modified are the top you can see the full path of the folder or 01:31.930 --> 01:33.790 file. 01:33.790 --> 01:34.690 Okay. 01:36.830 --> 01:47.510 Relative to the home directory which is the location of the directory but you choose in the 7. 01:47.790 --> 01:56.400 So this directory home is like a static folder with static contents which you aren't serving to to your 01:56.400 --> 01:58.440 users. 01:58.500 --> 02:07.680 Now if I click on a folder and then I click on a file inside it then the server is supposed to serve 02:07.770 --> 02:15.430 that file and the browser will be requested or required to read the file for me. 02:15.510 --> 02:22.410 Now if your browser is capable of reading the extension of the file or that type of file then is going 02:22.410 --> 02:23.610 to read it successfully. 02:23.640 --> 02:33.710 So if I click on this PDA file then I can read the file on my browser. 02:33.740 --> 02:36.020 Now if I go to another folder 02:39.750 --> 02:40.470 for example 02:43.800 --> 02:52.710 a folder containing images then if I click on any of these images I can see the contents of the image 02:57.890 --> 02:59.130 perfect. 02:59.150 --> 03:02.540 Now let's try a folder where there are videos 03:07.400 --> 03:15.000 OK so I can see that the video is being streamed so by the way here you're not gonna be downloading 03:15.000 --> 03:18.840 the full video before showing it to the user. 03:18.840 --> 03:25.570 You're going to be sending chunks of data to the user as they are reading or watching the video. 03:26.010 --> 03:32.700 So to do this you're going to need to to use a readable file streams and that's a very important feature 03:33.090 --> 03:36.060 in no Jesus and you'll see how to do that in the products 03:46.580 --> 03:56.570 now when you browse for this you can see that we are showing here the full path of. 03:56.950 --> 04:04.670 Before that or file you can still click on any of these links and it will take you to the folder as 04:04.720 --> 04:05.020 you want. 04:05.050 --> 04:11.230 So if I want to go back to projects I just click that and takes me back to the projects folder if I 04:11.230 --> 04:14.950 want to go to home then I just click that and it takes me back to him. 04:16.670 --> 04:22.070 You can also read a shemale files say for instance if I go to 04:25.360 --> 04:28.640 this folder and then click on index was HMO. 04:28.930 --> 04:32.110 Then it displays the corresponding a CML file. 04:32.320 --> 04:38.170 So it's using the correct dependent dependencies of that file including see as files JavaScript files 04:38.180 --> 04:44.290 etc. Now you'll see how to do this in the projects. 04:44.400 --> 04:51.630 Now another important features of these projects is that you can reorder your folders and files by name 04:51.630 --> 04:53.460 size or last modified. 04:53.460 --> 05:01.680 So if I click on the name header then this will reorder the elements alphabetically okay. 05:01.730 --> 05:05.050 If I click again it will just reverse the order. 05:05.060 --> 05:10.660 Now you can do the same thing for the size either increasing or decreasing. 05:10.700 --> 05:16.940 Now you can see the bigger or the biggest for this first well folders all files first and then going 05:16.940 --> 05:22.390 down to the smallest ones and last modified as well. 05:22.990 --> 05:28.880 Okay to build these projects are you going to use a wide range of node built in modules. 05:29.020 --> 05:34.520 So one of these modules is going to be ATP which you will use to create a server. 05:34.630 --> 05:39.760 Will also use it to accept user requests and respond to them. 05:39.760 --> 05:46.690 You will also use the ATP s module which is the ATP protocol over TADS SSL. 05:46.900 --> 05:54.490 So you will use it to get dates on data from an external link which uses HECS so you will do this at 05:54.490 --> 05:56.900 some point in the project. 05:57.070 --> 06:04.000 You will also use the child processes module which is also a built in module in node. 06:04.660 --> 06:11.470 So this module will help you run shell commands directly from your node code. 06:11.530 --> 06:17.250 So at some points you will need to get the size of directories. 06:17.320 --> 06:20.960 So this is something that is not straightforward in node. 06:20.980 --> 06:25.200 So this is something that you will do using shell commands. 06:25.270 --> 06:31.930 So to do that you will need the child processes module so you will get the outputs of the command and 06:31.930 --> 06:33.670 then uses inside Europe. 06:33.670 --> 06:38.020 Now there is another module you will need in this project is the path module. 06:38.020 --> 06:43.930 So the path module will help you manipulate paths in an easy way without having to worry too much about 06:43.960 --> 06:51.760 how to resolve or concatenate paths as this module comes with strong features designed mainly for that 06:51.760 --> 06:52.820 purpose. 06:52.900 --> 06:58.770 So paths are very important in this projects because you're going to be dealing with them quite a lot 06:59.140 --> 07:02.980 and you will need to Prince the path right there. 07:02.980 --> 07:09.580 And also you need to read files using their path. 07:10.020 --> 07:10.660 Okay. 07:10.660 --> 07:13.780 Another module you will need is the filesystem module. 07:13.780 --> 07:19.720 So this is an important module in this project which will not only help you read data on the server 07:20.080 --> 07:25.520 and pass it to the ATP response is will also help you create readable streams. 07:26.230 --> 07:35.140 So for example when you are streaming videos you will need to create a readable stream 07:38.630 --> 07:46.390 meaning that you will be sending chunks of data to the user instead of sending the whole file. 07:46.490 --> 07:55.310 So these streams send small chunks of data to the ATP response to reduce memory usage. 07:55.310 --> 08:00.360 So this will help a lot especially with large files like videos. 08:00.610 --> 08:06.380 OK I hope that you're now excited to start this fantastic project. 08:06.380 --> 08:12.080 So in the next video you're going to start building the skeleton and decoration of the up before diving 08:12.080 --> 08:13.820 into the logic of the app.