1 00:00:01,260 --> 00:00:02,700 Welcome back. 2 00:00:02,700 --> 00:00:06,280 So I hope that you're enjoying this section so far, 3 00:00:06,280 --> 00:00:09,800 and enjoying working with Node.js. 4 00:00:09,800 --> 00:00:13,100 So let's now move on in our project 5 00:00:13,100 --> 00:00:17,573 and build an extremely simple web API. 6 00:00:19,430 --> 00:00:23,290 Now, to start, what actually is an API? 7 00:00:23,290 --> 00:00:25,759 Well, the long answer, you're gonna learn 8 00:00:25,759 --> 00:00:30,450 in one of the next sections, but for now, the short answer, 9 00:00:30,450 --> 00:00:34,510 at least in this context of web APIs, basically, 10 00:00:34,510 --> 00:00:39,510 an API is a service from which we can request some data, 11 00:00:39,750 --> 00:00:43,880 so in this case, the data that the user wants to request 12 00:00:43,880 --> 00:00:46,470 is data about the products that we are offering 13 00:00:46,470 --> 00:00:50,070 in this node farm, so in this project. 14 00:00:50,070 --> 00:00:54,360 So I have here this dev-data folder, and in there, 15 00:00:54,360 --> 00:00:58,870 I have a JSON file, and JSON, in case you don't know, 16 00:00:58,870 --> 00:01:01,500 is a very simple text format 17 00:01:01,500 --> 00:01:04,250 that looks a lot like JavaScript object, 18 00:01:04,250 --> 00:01:07,720 so it looks like this, and we can have arrays, 19 00:01:07,720 --> 00:01:11,010 which we actually have, so we have one big array, 20 00:01:11,010 --> 00:01:14,630 which then contains these five objects, 21 00:01:14,630 --> 00:01:18,400 and each object then has the ID, product name, image, 22 00:01:18,400 --> 00:01:20,160 and so on and so forth. 23 00:01:20,160 --> 00:01:24,270 Now each of these has to be a string to each of the keys, 24 00:01:24,270 --> 00:01:26,593 and then we have the value. 25 00:01:29,828 --> 00:01:34,010 So basically, this data here is what our API 26 00:01:34,010 --> 00:01:36,673 will send to the client when requested. 27 00:01:37,840 --> 00:01:40,763 So we will have yet another route here. 28 00:01:43,250 --> 00:01:48,250 So right here, else if the path name equals /api. 29 00:01:55,980 --> 00:01:59,580 And for now, as a placeholder, we will simply send back 30 00:02:04,070 --> 00:02:05,703 API just like this. 31 00:02:08,520 --> 00:02:12,750 So what we want to do now is to actually read the data 32 00:02:12,750 --> 00:02:17,500 from this file here, then parse JSON into JavaScript, 33 00:02:17,500 --> 00:02:20,520 and then send back that result to the client. 34 00:02:20,520 --> 00:02:24,053 So something very simple and so let's get to work. 35 00:02:26,430 --> 00:02:29,350 So the first approach of doing this 36 00:02:29,350 --> 00:02:33,400 is to come into this route and then read the file in here 37 00:02:33,400 --> 00:02:36,350 using the file read function, right? 38 00:02:36,350 --> 00:02:37,853 So let's start by doing that. 39 00:02:40,110 --> 00:02:44,393 So fs., and it's actually readFile, not fileRead, 40 00:02:46,287 --> 00:02:50,110 so readFile, and then the name of the file. 41 00:02:50,110 --> 00:02:52,593 Now, remember how I told you earlier 42 00:02:52,593 --> 00:02:56,260 that this is not the only way of locating 43 00:02:56,260 --> 00:02:58,223 our file in the file system. 44 00:02:59,300 --> 00:03:01,460 Let's for now actually use it still, 45 00:03:01,460 --> 00:03:03,510 but after we have it written here, 46 00:03:03,510 --> 00:03:04,910 I will show you another way. 47 00:03:05,790 --> 00:03:10,790 So, a note, this dot here actually refers to the directory 48 00:03:11,260 --> 00:03:14,633 from which we run the node command in the terminal. 49 00:03:15,740 --> 00:03:18,420 So, again, this dot here right now 50 00:03:18,420 --> 00:03:21,414 represents this current folder here 51 00:03:21,414 --> 00:03:25,800 because that is where we actually run the node command, 52 00:03:25,800 --> 00:03:28,600 so in this 1-node-farm folder, 53 00:03:28,600 --> 00:03:32,270 which is our current working directory anyway in this case, 54 00:03:32,270 --> 00:03:35,230 but we could have run the node command somewhere else, 55 00:03:35,230 --> 00:03:38,260 and then the dot would mean something else. 56 00:03:38,260 --> 00:03:42,860 So, for example, we could perfectly find, go to the desktop 57 00:03:42,860 --> 00:03:46,380 and run node there, and then specify the whole path 58 00:03:46,380 --> 00:03:50,600 to index.js, but we could do that, but then in this case, 59 00:03:50,600 --> 00:03:55,080 the dot would mean the desktop, so if we started the script 60 00:03:55,080 --> 00:03:57,390 from the desktop, then this here, 61 00:03:57,390 --> 00:03:59,890 this dot, would mean the desktop, 62 00:03:59,890 --> 00:04:03,200 and so that is not always ideal, and therefore, 63 00:04:03,200 --> 00:04:05,290 there is a better way. 64 00:04:05,290 --> 00:04:08,230 So all Node.js scripts, they get access 65 00:04:08,230 --> 00:04:12,790 to a variable called dirname, and that variable 66 00:04:12,790 --> 00:04:17,200 always translates to the directory in which the script 67 00:04:17,200 --> 00:04:21,078 that we're currently executing is located. 68 00:04:21,078 --> 00:04:24,170 So in this case, it's actually the same place 69 00:04:24,170 --> 00:04:28,410 because index.js is also in this node farm folder, 70 00:04:28,410 --> 00:04:31,980 but again, for the reasons that I mentioned before, 71 00:04:31,980 --> 00:04:34,280 it is many times a better practice 72 00:04:34,280 --> 00:04:38,670 to use the dirname variable, so let's do that, 73 00:04:38,670 --> 00:04:41,343 and for that, we create a template string, 74 00:04:44,400 --> 00:04:46,690 and then we use the variable, 75 00:04:46,690 --> 00:04:51,567 so it is __dirname, so which stands for directory name. 76 00:04:54,870 --> 00:04:57,870 And so usually, we do it like this. 77 00:04:57,870 --> 00:04:59,850 Now there is an exception to this rule, 78 00:04:59,850 --> 00:05:01,963 which is the require function. 79 00:05:03,224 --> 00:05:05,140 So when requiring modules, 80 00:05:05,140 --> 00:05:08,160 we can actually require our own modules, 81 00:05:08,160 --> 00:05:10,650 and we're going to do that a bit later, like in the next, 82 00:05:10,650 --> 00:05:13,800 or one of the two next videos, and in there, 83 00:05:13,800 --> 00:05:18,200 the dot actually also means the current working directory 84 00:05:18,200 --> 00:05:20,863 and not the place we're executing the script from. 85 00:05:21,965 --> 00:05:25,270 So just keep in mind that the require function 86 00:05:25,270 --> 00:05:27,780 is an exception to this rule, but usually, 87 00:05:27,780 --> 00:05:30,050 the dot is where the script is running, 88 00:05:30,050 --> 00:05:35,050 and __dirname is where the current file is located. 89 00:05:37,920 --> 00:05:42,920 Right, now moving on let's specify the utf-8 file encoding, 90 00:05:43,840 --> 00:05:48,840 and then our callback function, which is error first, 91 00:05:49,900 --> 00:05:54,900 remember, and so we now have access to this data. 92 00:05:56,700 --> 00:05:59,920 Now the data is in JSON, and so in JavaScript, 93 00:05:59,920 --> 00:06:04,023 we have something built in which is called JSON.parse. 94 00:06:06,290 --> 00:06:08,600 And so this will take the JSON code, 95 00:06:08,600 --> 00:06:10,190 which is actually a string, 96 00:06:10,190 --> 00:06:14,400 and will then automatically turn it into JavaScript, 97 00:06:14,400 --> 00:06:17,593 so a JavaScript object or array in this case. 98 00:06:19,240 --> 00:06:21,117 Let's call this one productData, 99 00:06:23,857 --> 00:06:26,743 and then also quickly take a look at it. 100 00:06:32,500 --> 00:06:34,853 So in the console in this case. 101 00:06:36,520 --> 00:06:40,740 So, restarting the server, and now, don't forget 102 00:06:40,740 --> 00:06:45,740 to hit the /api route, and oh, what's happening here? 103 00:06:47,520 --> 00:06:49,470 Oh, we did actually restart the server. 104 00:06:52,545 --> 00:06:54,397 And so now we get a response API, 105 00:06:55,330 --> 00:06:58,020 and let's now take a look here, actually, 106 00:06:58,020 --> 00:07:01,140 at the product data object. 107 00:07:01,140 --> 00:07:04,340 So this is just a nice object, 108 00:07:04,340 --> 00:07:09,340 with all the data that we had in this data.json file. 109 00:07:09,620 --> 00:07:13,450 All right, now the next step is to then actually send back 110 00:07:13,450 --> 00:07:16,653 this data as the response. 111 00:07:17,640 --> 00:07:20,180 Now this response.end method here 112 00:07:20,180 --> 00:07:24,953 actually needs to send back a string and not an object here. 113 00:07:25,890 --> 00:07:28,510 And so in fact, what we want to send back 114 00:07:28,510 --> 00:07:33,230 is the data directly, so data is a string 115 00:07:33,230 --> 00:07:37,410 that we then transformed into an object using JSON.parse, 116 00:07:37,410 --> 00:07:41,730 but for now, we actually would not have need to do that, 117 00:07:41,730 --> 00:07:44,445 but I did it anyway because we will need this later 118 00:07:44,445 --> 00:07:48,130 when we start to build our HTML templates. 119 00:07:48,130 --> 00:07:50,710 So that is when we're gonna need this data 120 00:07:50,710 --> 00:07:52,890 in a JavaScript format. 121 00:07:52,890 --> 00:07:56,280 For now, we just want to send back the actual string 122 00:07:56,280 --> 00:07:57,453 that we receive. 123 00:07:59,146 --> 00:08:02,380 Now before we can do that, we actually need to specify 124 00:08:02,380 --> 00:08:04,220 so we need to tell the browser 125 00:08:04,220 --> 00:08:09,220 that we're sending back JSON, so just like before, 126 00:08:10,110 --> 00:08:14,160 where we set the Content-type to text/html, 127 00:08:14,160 --> 00:08:17,703 we now need to tell a browser that we're sending JSON. 128 00:08:19,060 --> 00:08:24,060 So we say res.writeHead just like before, 129 00:08:24,160 --> 00:08:27,260 and now we're using the status code 200, 130 00:08:27,260 --> 00:08:31,830 which stands for okay, and then the object of the headers. 131 00:08:31,830 --> 00:08:35,330 In this case, it's just gonna be one, so Content-type, 132 00:08:40,320 --> 00:08:45,320 and when we send JSON, we need to say application/json. 133 00:08:49,570 --> 00:08:53,240 So for HTML, it's text/html, 134 00:08:53,240 --> 00:08:56,323 for JSON, it's application/json, 135 00:08:58,330 --> 00:09:01,933 and let's now take a look at that. 136 00:09:05,200 --> 00:09:08,183 Reload server here very quick, and indeed, 137 00:09:12,600 --> 00:09:17,600 here we have our API sending back all the data 138 00:09:17,690 --> 00:09:20,053 about our five products. 139 00:09:20,950 --> 00:09:25,800 So awesome, that's great, and it's great, 140 00:09:25,800 --> 00:09:27,970 but it's actually not perfect, 141 00:09:27,970 --> 00:09:31,463 because it's not really 100% efficient, 142 00:09:32,546 --> 00:09:36,780 and that is because each time that someone now hits 143 00:09:36,780 --> 00:09:40,640 this /api route, the file will have to be read 144 00:09:40,640 --> 00:09:42,640 and then sent back. 145 00:09:42,640 --> 00:09:45,720 Instead, what we can do is to just read the file once 146 00:09:45,720 --> 00:09:49,110 in the beginning, and then each time someone hits 147 00:09:49,110 --> 00:09:51,600 this route, simply send back the data 148 00:09:51,600 --> 00:09:55,273 without having to read it each time that a user requested. 149 00:09:56,410 --> 00:09:58,180 Does that make sense? 150 00:09:58,180 --> 00:10:01,423 Well, what I'm gonna do is to put this out here. 151 00:10:03,550 --> 00:10:07,680 Okay, and of course, I don't need all of this, 152 00:10:07,680 --> 00:10:10,530 so this is not here, and this is not here, 153 00:10:10,530 --> 00:10:12,720 and actually, it will be kind of different, 154 00:10:12,720 --> 00:10:15,630 and that is because we will now actually use 155 00:10:15,630 --> 00:10:19,570 the synchronous version, and I know what you're thinking, 156 00:10:19,570 --> 00:10:22,280 which is that the synchronous version 157 00:10:22,280 --> 00:10:25,440 blocks the code execution, right? 158 00:10:25,440 --> 00:10:27,570 And while that is true, in this case, 159 00:10:27,570 --> 00:10:29,580 it is not a problem at all, 160 00:10:29,580 --> 00:10:32,040 and that's because the top level code 161 00:10:32,040 --> 00:10:36,240 actually only gets executed once right in the beginning. 162 00:10:36,240 --> 00:10:39,260 Only this callback function, for example, here, 163 00:10:39,260 --> 00:10:43,440 the createServer one, so this function here, 164 00:10:43,440 --> 00:10:46,160 this is what gets executed each time 165 00:10:46,160 --> 00:10:50,260 that there is a new request, but not a code that's out here. 166 00:10:50,260 --> 00:10:53,210 The code that is outside the callback functions, 167 00:10:53,210 --> 00:10:57,500 so the so-called top level code, is only ever executed 168 00:10:57,500 --> 00:11:01,500 once we start the program, and so in that situation, 169 00:11:01,500 --> 00:11:04,660 it doesn't matter at all if it blocks the execution, 170 00:11:04,660 --> 00:11:07,350 because again, it happens only once 171 00:11:07,350 --> 00:11:11,160 and only when the code actually starts, right? 172 00:11:11,160 --> 00:11:12,820 Makes sense? 173 00:11:12,820 --> 00:11:16,060 And so we're gonna use the sync version now 174 00:11:16,060 --> 00:11:19,100 because it's actually easier to then handle that data, 175 00:11:19,100 --> 00:11:23,060 because that simply puts the data into a variable 176 00:11:23,060 --> 00:11:25,253 that we cannot use right away. 177 00:11:27,930 --> 00:11:32,180 So don't worry about the fact that this function is blocking 178 00:11:32,180 --> 00:11:34,800 because, again, it is in the top level code 179 00:11:34,800 --> 00:11:37,200 and is only executed once. 180 00:11:37,200 --> 00:11:39,410 The secret here is simply to know which code 181 00:11:39,410 --> 00:11:42,530 is only executed once and only at the beginning, 182 00:11:42,530 --> 00:11:45,890 and which code gets executed over and over again, 183 00:11:45,890 --> 00:11:49,663 and is therefore problematic when blocking the event loop. 184 00:11:50,560 --> 00:11:52,240 And of course, throughout the rest 185 00:11:52,240 --> 00:11:55,990 of this big, big course, you will learn that. 186 00:11:55,990 --> 00:11:58,650 So you will learn everything about the event loop, 187 00:11:58,650 --> 00:12:01,990 and which code is blocking and which one not, and why, 188 00:12:01,990 --> 00:12:04,760 and so this is just the first time I'm mentioning it, 189 00:12:04,760 --> 00:12:06,560 but it's not gonna be the last time. 190 00:12:07,620 --> 00:12:11,173 You will hear me saying the same stuff over and over again. 191 00:12:14,180 --> 00:12:18,550 So, just calling this one data, and then of course, 192 00:12:18,550 --> 00:12:20,423 we don't need any of this. 193 00:12:21,550 --> 00:12:24,253 Let's just move this here out, and that's it. 194 00:12:29,040 --> 00:12:32,120 So before anything happens, it will read the data 195 00:12:32,120 --> 00:12:34,340 from the JSON file into data. 196 00:12:34,340 --> 00:12:38,740 It will then also parse that into an object. 197 00:12:38,740 --> 00:12:43,043 Let's call it dataObject here, 198 00:12:44,370 --> 00:12:48,060 and so what we're gonna do here is to not read this file 199 00:12:48,060 --> 00:12:51,030 each time that there is a request, and instead, 200 00:12:51,030 --> 00:12:55,960 simply send back the data that we have now 201 00:12:55,960 --> 00:12:57,283 in our top-level code. 202 00:13:04,010 --> 00:13:08,450 So this data here now comes from here because, of course, 203 00:13:08,450 --> 00:13:11,060 this code in the callback function has access 204 00:13:11,060 --> 00:13:15,543 to the top-level code because of the scope chain, right? 205 00:13:17,510 --> 00:13:21,000 Canceling, running again, and just to prove you 206 00:13:21,000 --> 00:13:23,803 that it still works, and it does. 207 00:13:25,070 --> 00:13:28,560 So perfect, and that's better, that's more efficient, 208 00:13:28,560 --> 00:13:30,023 oh, and why did I close this? 209 00:13:31,470 --> 00:13:34,863 All right, let's just open it up again very quick. 210 00:13:37,890 --> 00:13:38,793 So here we go. 211 00:13:41,430 --> 00:13:45,890 So that is our very simple API, which now allows the user 212 00:13:45,890 --> 00:13:49,430 to simply request all the data about our application 213 00:13:49,430 --> 00:13:52,353 with one single API call, basically. 214 00:13:53,810 --> 00:13:56,740 So we added another route here, /api, 215 00:13:56,740 --> 00:13:59,340 then we read the file synchronously, 216 00:13:59,340 --> 00:14:02,930 put it into this object, and then simply sent back 217 00:14:02,930 --> 00:14:06,010 that object as a response, but before that, 218 00:14:06,010 --> 00:14:11,010 specifying that we're sending back application/json, 219 00:14:11,353 --> 00:14:15,200 so that the browser knows exactly what to expect, 220 00:14:15,200 --> 00:14:16,720 and in the next couple of videos, 221 00:14:16,720 --> 00:14:19,730 we will actually start building the user interface, 222 00:14:19,730 --> 00:14:22,673 so that's the most exciting part, right?