Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
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,077
that we're currently executing is located.
68
00:04:21,077 --> 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?
18325
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.