Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
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,009
Right, so again, the exact same tours
50
00:02:11,009 --> 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,339
before you did the change would run into some problem.
96
00:04:18,339 --> 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,799
and then we also have error,
183
00:08:32,799 --> 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,059
Anyway, we also have then the data property
186
00:08:42,059 --> 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.
20590
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.