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?