1 00:00:01,100 --> 00:00:04,270 ‫Welcome back, so now the time has come 2 00:00:04,270 --> 00:00:07,630 ‫to finally start building our API. 3 00:00:07,630 --> 00:00:10,720 ‫So this lecture is really gonna be the first step 4 00:00:10,720 --> 00:00:15,150 ‫in a long journey of building this main course project. 5 00:00:15,150 --> 00:00:17,730 ‫And let me actually start by showing you again 6 00:00:17,730 --> 00:00:19,750 ‫the project that we're talking about. 7 00:00:19,750 --> 00:00:21,610 ‫So this is the Natours project. 8 00:00:21,610 --> 00:00:23,210 ‫It's basically an application 9 00:00:23,210 --> 00:00:26,290 ‫where we can see tours and also book them. 10 00:00:26,290 --> 00:00:29,130 ‫We can create user accounts, we can log in, 11 00:00:29,130 --> 00:00:31,540 ‫and really do all kinds of different stuff. 12 00:00:31,540 --> 00:00:35,710 ‫So for example, we can take a look at the tour here. 13 00:00:35,710 --> 00:00:37,890 ‫It has all these details, this map, 14 00:00:37,890 --> 00:00:42,530 ‫it has reviews from other users that are using the platform, 15 00:00:42,530 --> 00:00:44,680 ‫and we can even book the tour then. 16 00:00:44,680 --> 00:00:47,730 ‫We would have to log in before we are able to book 17 00:00:47,730 --> 00:00:49,350 ‫and I'm not gonna do that now 18 00:00:49,350 --> 00:00:52,210 ‫because it's just a very simple demo here, 19 00:00:52,210 --> 00:00:55,230 ‫so I just wanted to show you this graphical interface, 20 00:00:55,230 --> 00:00:58,400 ‫basically, of the project that we are building. 21 00:00:58,400 --> 00:01:00,180 ‫Now this part that you're seeing here 22 00:01:00,180 --> 00:01:02,160 ‫is actually the part that we're gonna build 23 00:01:02,160 --> 00:01:03,380 ‫by the end of the course, 24 00:01:03,380 --> 00:01:05,030 ‫because this first part of the course 25 00:01:05,030 --> 00:01:07,760 ‫is to build an API using the exact same data 26 00:01:07,760 --> 00:01:10,460 ‫that you see here on this dynamic website. 27 00:01:10,460 --> 00:01:11,750 ‫So again, we start by building the API 28 00:01:11,750 --> 00:01:15,110 ‫and then the dynamically rendered website, 29 00:01:15,110 --> 00:01:16,460 ‫and I choose to do it like this 30 00:01:16,460 --> 00:01:18,300 ‫because this way, we don't have to mix 31 00:01:18,300 --> 00:01:20,930 ‫all this different content all together, 32 00:01:20,930 --> 00:01:24,510 ‫so in order to learn Express and Mongodb and Mongoose, 33 00:01:24,510 --> 00:01:26,950 ‫I find it much easier to just work with data 34 00:01:26,950 --> 00:01:29,360 ‫and not to worry about the graphical stuff, 35 00:01:29,360 --> 00:01:31,570 ‫even though that's maybe a bit more exciting 36 00:01:31,570 --> 00:01:33,980 ‫because you get to see the real results 37 00:01:33,980 --> 00:01:35,173 ‫in this beautiful interface. 38 00:01:35,173 --> 00:01:38,140 ‫But to learn, it's better to again, 39 00:01:38,140 --> 00:01:40,280 ‫simply just deal with the data itself 40 00:01:40,280 --> 00:01:42,673 ‫and worry about making it beautiful later. 41 00:01:43,540 --> 00:01:46,363 ‫Okay, so let me actually show you the API as well. 42 00:01:47,820 --> 00:01:50,250 ‫And for that, of course, I use Postman. 43 00:01:50,250 --> 00:01:51,593 ‫Create a new tab here. 44 00:01:52,560 --> 00:01:55,450 ‫And so the final API we accessed at 45 00:01:55,450 --> 00:01:58,570 ‫slash API, slash version one, 46 00:01:58,570 --> 00:02:01,383 ‫and then for example, we can take a look at tours. 47 00:02:03,540 --> 00:02:05,270 ‫So we use the get request 48 00:02:05,270 --> 00:02:08,820 ‫and then we get all of these different tours. 49 00:02:08,820 --> 00:02:11,010 ‫Right, so again, the exact same tours 50 00:02:11,010 --> 00:02:12,930 ‫that you saw on the graphical interface, 51 00:02:12,930 --> 00:02:15,730 ‫so on the rendered website before. 52 00:02:15,730 --> 00:02:19,780 ‫Okay, we can then also go ahead, take the ID, 53 00:02:19,780 --> 00:02:24,780 ‫and request only that ID, so on that tour for that ID, 54 00:02:25,120 --> 00:02:28,290 ‫and so you see that now we only have this one here 55 00:02:28,290 --> 00:02:30,090 ‫with even more data than we had before. 56 00:02:30,090 --> 00:02:32,220 ‫So we have start locations here, 57 00:02:32,220 --> 00:02:36,220 ‫we have tour guides which in turn has other ID's, 58 00:02:36,220 --> 00:02:39,660 ‫we have locations, we have reviews, 59 00:02:39,660 --> 00:02:42,010 ‫so all of that we have in a tour. 60 00:02:42,010 --> 00:02:43,910 ‫So you see, it's really advanced stuff 61 00:02:44,990 --> 00:02:47,680 ‫and so we actually have more than just tours. 62 00:02:47,680 --> 00:02:51,120 ‫We have users but we will not be able to access them 63 00:02:51,120 --> 00:02:53,650 ‫because we need to be authenticated. 64 00:02:53,650 --> 00:02:56,340 ‫So you're not logged in and so right now, 65 00:02:56,340 --> 00:02:58,490 ‫we would need to log into our app. 66 00:02:58,490 --> 00:03:00,560 ‫Now at this point, I'm gonna stop showing you 67 00:03:00,560 --> 00:03:02,750 ‫all the features because we will build this 68 00:03:02,750 --> 00:03:04,000 ‫throughout the course, 69 00:03:04,000 --> 00:03:07,340 ‫just to show you that there is really a lot going on here 70 00:03:07,340 --> 00:03:10,490 ‫and so there is a lot of material 71 00:03:10,490 --> 00:03:12,680 ‫and of stuff to learn ahead of you, 72 00:03:12,680 --> 00:03:14,330 ‫so I hope you're excited for that, 73 00:03:14,330 --> 00:03:17,470 ‫and that you want to take the first step with me right now. 74 00:03:17,470 --> 00:03:20,400 ‫So let's go back and implement the tours route 75 00:03:20,400 --> 00:03:22,523 ‫or starting to implement it, at least. 76 00:03:23,400 --> 00:03:26,620 ‫Okay, so this piece of code here, we no longer need, 77 00:03:26,620 --> 00:03:29,410 ‫and I'm not deleting it, just commenting it up. 78 00:03:29,410 --> 00:03:31,980 ‫So again, we use app.get 79 00:03:32,900 --> 00:03:34,600 ‫because in this lecture, we're gonna start 80 00:03:34,600 --> 00:03:36,490 ‫by just handling the get requests 81 00:03:36,490 --> 00:03:41,490 ‫and the URL will be slash API and tours. 82 00:03:42,210 --> 00:03:44,020 ‫So I'm not using v1, 83 00:03:44,020 --> 00:03:46,940 ‫well, I could use v1 right away, 84 00:03:46,940 --> 00:03:50,700 ‫so it's a good practice to specify the API version. 85 00:03:50,700 --> 00:03:52,840 ‫Okay, so that in case you want 86 00:03:52,840 --> 00:03:54,850 ‫to do some changes to your API, 87 00:03:54,850 --> 00:03:57,960 ‫you can do that but simply then on v2 88 00:03:57,960 --> 00:04:01,230 ‫without breaking everyone who is still using v1. 89 00:04:01,230 --> 00:04:03,600 ‫Okay, so basically, you can branch off, 90 00:04:03,600 --> 00:04:05,430 ‫create a new version of your API, 91 00:04:05,430 --> 00:04:07,870 ‫but all users can then still be using it. 92 00:04:07,870 --> 00:04:09,270 ‫If we did it just like this 93 00:04:09,270 --> 00:04:12,480 ‫and you did changes then to API slash tours, 94 00:04:12,480 --> 00:04:14,160 ‫then the users who started to use it 95 00:04:14,160 --> 00:04:18,340 ‫before you did the change would run into some problem. 96 00:04:18,340 --> 00:04:22,640 ‫Okay, so we always should specify the version of the API. 97 00:04:22,640 --> 00:04:24,307 ‫We could also do it in the subdomain, 98 00:04:24,307 --> 00:04:27,793 ‫but it's easier to just simply include it in the URL. 99 00:04:29,250 --> 00:04:33,120 ‫Okay, and then of course, our route handler. 100 00:04:33,120 --> 00:04:35,140 ‫So this is how we usually call this function. 101 00:04:35,140 --> 00:04:37,100 ‫We call it the route handler. 102 00:04:37,100 --> 00:04:40,770 ‫Okay, so just to get familiar with these Express terms. 103 00:04:40,770 --> 00:04:44,490 ‫Now what do we want to do when someone hits this route? 104 00:04:44,490 --> 00:04:47,240 ‫Well, we want to simply send back all the tours. 105 00:04:47,240 --> 00:04:49,220 ‫So that is similar to what we just learned 106 00:04:49,220 --> 00:04:51,160 ‫in the last lecture, right. 107 00:04:51,160 --> 00:04:54,240 ‫We have this URL or this endpoint, slash tours, 108 00:04:54,240 --> 00:04:56,890 ‫and that will usually send back all of the data 109 00:04:56,890 --> 00:04:58,720 ‫for that resource, right. 110 00:04:58,720 --> 00:05:02,270 ‫So, also tours is the resource now, 111 00:05:02,270 --> 00:05:03,760 ‫and I'm starting with tours here 112 00:05:03,760 --> 00:05:06,400 ‫because it's, I would say, the most obvious one 113 00:05:06,400 --> 00:05:10,040 ‫since we're building a website or a Web application 114 00:05:10,040 --> 00:05:12,590 ‫for selling tours, right. 115 00:05:12,590 --> 00:05:14,410 ‫Now where do we actually get these tours 116 00:05:14,410 --> 00:05:17,470 ‫that we wanna send back to the client? 117 00:05:17,470 --> 00:05:20,050 ‫Well, it's here in the dev-data folder, 118 00:05:20,050 --> 00:05:22,980 ‫then data, and then tours-simple. 119 00:05:22,980 --> 00:05:25,410 ‫So it's this JSON file, and it's very similar 120 00:05:25,410 --> 00:05:27,770 ‫to the one that we had for the note farm, 121 00:05:27,770 --> 00:05:31,270 ‫so again, it's an array of JSON objects 122 00:05:31,270 --> 00:05:34,673 ‫which then has a bunch of data about each of the tours. 123 00:05:35,640 --> 00:05:36,603 ‫And so yeah, that's the data 124 00:05:36,603 --> 00:05:39,550 ‫that we're gonna be sending to the client. 125 00:05:39,550 --> 00:05:41,000 ‫Now before we can send the data, 126 00:05:41,000 --> 00:05:43,200 ‫we actually need to first read it 127 00:05:43,200 --> 00:05:46,770 ‫and so again, we don't do it inside the route handler, 128 00:05:46,770 --> 00:05:48,920 ‫but we do it before. 129 00:05:48,920 --> 00:05:51,960 ‫Okay, and just like I explained in the previous project, 130 00:05:51,960 --> 00:05:53,960 ‫we can do that because the top-level code 131 00:05:53,960 --> 00:05:56,840 ‫is only executed once, which is right after 132 00:05:56,840 --> 00:05:59,420 ‫the application startup, right. 133 00:05:59,420 --> 00:06:01,660 ‫And now that you know all about the event loop, 134 00:06:01,660 --> 00:06:05,190 ‫it makes even more sense for you at this point, right. 135 00:06:05,190 --> 00:06:07,600 ‫So only this callback function, for example here, 136 00:06:07,600 --> 00:06:09,500 ‫will run inside the event loop 137 00:06:09,500 --> 00:06:12,260 ‫and so in here, we cannot have any block and code. 138 00:06:12,260 --> 00:06:15,170 ‫But outside, it is no problem at all. 139 00:06:15,170 --> 00:06:18,960 ‫So that simply reads the tours into a variable 140 00:06:18,960 --> 00:06:22,300 ‫outside of all of this in a synchronous way. 141 00:06:22,300 --> 00:06:24,280 ‫So fs, and for that, of course, 142 00:06:24,280 --> 00:06:26,767 ‫we need to require the module actually, 143 00:06:26,767 --> 00:06:29,033 ‫and so we do that here at the top. 144 00:06:30,350 --> 00:06:33,080 ‫And I like to always start with the core modules 145 00:06:33,080 --> 00:06:35,243 ‫and so I do that at the first one. 146 00:06:37,020 --> 00:06:41,400 ‫So require, fs, 147 00:06:41,400 --> 00:06:46,400 ‫so fs.readFileSync, it's already here. 148 00:06:47,010 --> 00:06:49,960 ‫And now, let's use the dirname. 149 00:06:49,960 --> 00:06:51,380 ‫And so again, at this point, 150 00:06:51,380 --> 00:06:53,518 ‫you already know why we actually have access 151 00:06:53,518 --> 00:06:58,518 ‫to this variable here, so dirname is the folder 152 00:06:58,570 --> 00:07:00,830 ‫where the current script is located, 153 00:07:00,830 --> 00:07:02,970 ‫and that is this main folder. 154 00:07:02,970 --> 00:07:05,573 ‫So from here, we need to move into dev-data, 155 00:07:06,940 --> 00:07:09,250 ‫then into data, and then in there, 156 00:07:09,250 --> 00:07:12,580 ‫we have tours-simple.json. 157 00:07:12,580 --> 00:07:15,990 ‫Okay, and now let's also, right in this step here, 158 00:07:15,990 --> 00:07:17,563 ‫parse the result of this. 159 00:07:18,520 --> 00:07:22,430 ‫So JSON, actually the uppercase one, 160 00:07:22,430 --> 00:07:26,650 ‫so JSON.parse, so that the JSON that we have in here 161 00:07:26,650 --> 00:07:29,930 ‫will automatically be converted to a Javascript object 162 00:07:29,930 --> 00:07:32,820 ‫or an array of Javascript objects, actually. 163 00:07:32,820 --> 00:07:36,840 ‫So saving it and so this will reformat it 164 00:07:36,840 --> 00:07:37,770 ‫and so now all we have to do 165 00:07:37,770 --> 00:07:40,380 ‫is to really send it back to the client, 166 00:07:40,380 --> 00:07:42,123 ‫so res.json, 167 00:07:43,410 --> 00:07:46,460 ‫and let me actually specify the status code here, 168 00:07:46,460 --> 00:07:48,280 ‫even if 200 is the standard, 169 00:07:48,280 --> 00:07:52,650 ‫I like to do it in each and every single response. 170 00:07:52,650 --> 00:07:57,650 ‫All right, so JSON, and what do we want to send back now? 171 00:07:58,080 --> 00:08:00,110 ‫Not message, that's for sure. 172 00:08:00,110 --> 00:08:02,600 ‫So what do we wanna send back? 173 00:08:02,600 --> 00:08:04,540 ‫Well, remember that we were gonna use 174 00:08:04,540 --> 00:08:07,960 ‫the Jsend JSON formatting standard. 175 00:08:07,960 --> 00:08:11,223 ‫Okay, and so in there, we specify a status, 176 00:08:13,919 --> 00:08:16,210 ‫and so status, and that can either be 177 00:08:16,210 --> 00:08:19,110 ‫success, fail, or error, okay. 178 00:08:19,110 --> 00:08:21,460 ‫So success is obvious. 179 00:08:21,460 --> 00:08:24,570 ‫It's when we have a 200 code or a 201 180 00:08:24,570 --> 00:08:28,000 ‫or really just any code that starts with 200. 181 00:08:28,000 --> 00:08:31,260 ‫Then we have the fail, which is an error at the client, 182 00:08:31,260 --> 00:08:32,800 ‫and then we also have error, 183 00:08:32,800 --> 00:08:35,120 ‫when there was an error at the server. 184 00:08:35,120 --> 00:08:38,010 ‫All right, but we are gonna use these a bit later. 185 00:08:38,010 --> 00:08:42,060 ‫Anyway, we also have then the data property 186 00:08:42,060 --> 00:08:43,600 ‫which is, as I mentioned, 187 00:08:43,600 --> 00:08:46,550 ‫the so-called envelope for our data. 188 00:08:46,550 --> 00:08:48,370 ‫So we specify the data property 189 00:08:48,370 --> 00:08:51,670 ‫and that data will then in turn have an object 190 00:08:51,670 --> 00:08:53,750 ‫which then contains the data, 191 00:08:53,750 --> 00:08:56,080 ‫so the response step we actually wanna send. 192 00:08:56,080 --> 00:08:57,793 ‫And in this case, that is tours. 193 00:08:58,810 --> 00:09:01,920 ‫So tours and then tours, 194 00:09:01,920 --> 00:09:04,000 ‫which is the same name in this case. 195 00:09:04,000 --> 00:09:06,990 ‫So with ES6, we actually do not need to specify 196 00:09:06,990 --> 00:09:09,900 ‫the key and the value if they have the same name, 197 00:09:09,900 --> 00:09:11,830 ‫so we could just write tours, 198 00:09:11,830 --> 00:09:13,840 ‫but I just wanted to specify it here 199 00:09:13,840 --> 00:09:16,352 ‫that I wrote tours here because, well, 200 00:09:16,352 --> 00:09:19,830 ‫that is the name of the resource and of the endpoint, 201 00:09:19,830 --> 00:09:21,660 ‫and so that's why, inside of data, 202 00:09:21,660 --> 00:09:25,860 ‫I then send back an object that has the tour property. 203 00:09:25,860 --> 00:09:28,690 ‫Okay, so if this was called x, for example, 204 00:09:28,690 --> 00:09:30,560 ‫then I would call this one here x, 205 00:09:30,560 --> 00:09:34,670 ‫but here, I would still need to say tours, okay. 206 00:09:34,670 --> 00:09:37,840 ‫I'm putting it back to tours because that makes more sense 207 00:09:37,840 --> 00:09:41,000 ‫and now I can delete this here and just leave it like this. 208 00:09:41,000 --> 00:09:43,500 ‫And that is actually all we have to do. 209 00:09:43,500 --> 00:09:47,590 ‫So we read our data and then we formatted our response 210 00:09:47,590 --> 00:09:51,800 ‫like this here, using the JSend data specification. 211 00:09:51,800 --> 00:09:53,577 ‫Okay, so very simple stuff. 212 00:09:53,577 --> 00:09:55,880 ‫Let's now just test it out 213 00:09:55,880 --> 00:09:59,310 ‫and we now have to change, of course, the URL, 214 00:09:59,310 --> 00:10:04,310 ‫so we have slash API, slash version one, and tours. 215 00:10:06,070 --> 00:10:07,520 ‫So that is our URL. 216 00:10:07,520 --> 00:10:09,880 ‫We still do a get request, 217 00:10:09,880 --> 00:10:13,253 ‫and so that's the one that we're responding to in code, 218 00:10:14,520 --> 00:10:17,470 ‫so remember, using this get method, 219 00:10:17,470 --> 00:10:21,560 ‫and so hit Send, and indeed, here we go. 220 00:10:21,560 --> 00:10:24,763 ‫So here, we have all our tours. 221 00:10:26,630 --> 00:10:30,060 ‫So, awesome, that's really cool. 222 00:10:30,060 --> 00:10:32,330 ‫Really, really nice work. 223 00:10:32,330 --> 00:10:34,650 ‫Now just to finish, something else that I like to do 224 00:10:34,650 --> 00:10:37,950 ‫usually when we are sending multiple responses 225 00:10:37,950 --> 00:10:40,190 ‫is to include a field called results 226 00:10:41,030 --> 00:10:43,900 ‫with the number of results that we are sending. 227 00:10:43,900 --> 00:10:45,890 ‫Okay, and this is not really part 228 00:10:45,890 --> 00:10:47,700 ‫of the JSend specification, 229 00:10:47,700 --> 00:10:49,560 ‫but I still really like to do it 230 00:10:49,560 --> 00:10:51,630 ‫because that makes it very easy for the client 231 00:10:51,630 --> 00:10:53,880 ‫to get very quick information 232 00:10:53,880 --> 00:10:56,290 ‫about the data it is receiving. 233 00:10:56,290 --> 00:10:58,680 ‫So we know that tours is an array 234 00:10:58,680 --> 00:11:02,713 ‫and so all we have to do is to say tours.length. 235 00:11:03,650 --> 00:11:05,720 ‫Okay, and this actually only makes sense 236 00:11:05,720 --> 00:11:09,260 ‫whenever we are sending an array, so multiple objects. 237 00:11:09,260 --> 00:11:11,840 ‫If we only were sending one tour, 238 00:11:11,840 --> 00:11:14,320 ‫then it wouldn't make sense to have results 239 00:11:14,320 --> 00:11:15,810 ‫such as one, right, 240 00:11:15,810 --> 00:11:18,360 ‫and so I only do this whenever we're sending an array 241 00:11:18,360 --> 00:11:20,163 ‫with multiple objects in there. 242 00:11:21,440 --> 00:11:23,220 ‫So let's do that again. 243 00:11:23,220 --> 00:11:25,930 ‫And indeed, we have nine results, 244 00:11:25,930 --> 00:11:29,030 ‫then we have the data property, then in there, tours, 245 00:11:29,030 --> 00:11:30,800 ‫to specify that we're sending tours, 246 00:11:30,800 --> 00:11:34,063 ‫and then an array with all the nine tours in there. 247 00:11:35,800 --> 00:11:37,850 ‫So you can see another object 248 00:11:37,850 --> 00:11:39,450 ‫and another one and another one, 249 00:11:40,992 --> 00:11:42,342 ‫and all the way to the end, 250 00:11:43,820 --> 00:11:46,940 ‫so that is the very first step to our API. 251 00:11:46,940 --> 00:11:51,500 ‫Of course, at this point, it's like a file-based API, 252 00:11:51,500 --> 00:11:53,670 ‫so we're reading this data from an API, 253 00:11:53,670 --> 00:11:55,780 ‫but later, of course, we're gonna store this data 254 00:11:55,780 --> 00:11:58,730 ‫in a database and then read it from there. 255 00:11:58,730 --> 00:12:01,410 ‫But anyway, this already looks kind of for real 256 00:12:01,410 --> 00:12:03,890 ‫and that for sure makes me feel really good, 257 00:12:03,890 --> 00:12:06,640 ‫and I hope it makes you feel good as well. 258 00:12:06,640 --> 00:12:08,560 ‫So that's it for the get request. 259 00:12:08,560 --> 00:12:11,370 ‫Next up, we're gonna take care of the post request 260 00:12:11,370 --> 00:12:14,343 ‫so that we can actually add a new tour to our data.