1
00:00:01,210 --> 00:00:03,880
‫So, after all the talk about middleware,

2
00:00:03,880 --> 00:00:05,290
‫let's now actually go ahead and

3
00:00:05,290 --> 00:00:07,463
‫create our own middleware functions.

4
00:00:09,000 --> 00:00:10,810
‫And again, remember that we actually

5
00:00:10,810 --> 00:00:12,930
‫already used middleware before.

6
00:00:12,930 --> 00:00:14,380
‫So let's take a look at that.

7
00:00:15,730 --> 00:00:18,350
‫And, somewhere up here.

8
00:00:18,350 --> 00:00:20,450
‫And so, you see that in order

9
00:00:20,450 --> 00:00:24,530
‫to use middleware, we used app dot use, okay?

10
00:00:24,530 --> 00:00:28,190
‫So, the use method is the one that we use in order to,

11
00:00:28,190 --> 00:00:30,030
‫yeah, actually use middleware.

12
00:00:30,030 --> 00:00:33,800
‫So, add middleware to our middleware stack, okay?

13
00:00:33,800 --> 00:00:37,520
‫So this express dot json here calling this json method

14
00:00:37,520 --> 00:00:39,620
‫basically returns a function, okay?

15
00:00:39,620 --> 00:00:42,650
‫And so that function is then added to the middleware stack.

16
00:00:42,650 --> 00:00:43,900
‫And so, similar to that,

17
00:00:43,900 --> 00:00:46,220
‫we can create our own middleware function.

18
00:00:46,220 --> 00:00:48,190
‫So, let's do that now.

19
00:00:48,190 --> 00:00:51,283
‫And so, of course, we still need to use app dot use.

20
00:00:53,840 --> 00:00:56,810
‫Okay, and so now, in here, all we have to do is to path

21
00:00:56,810 --> 00:01:00,820
‫in our function that we want to add to the middleware stack.

22
00:01:00,820 --> 00:01:02,730
‫So, remember from the last video that,

23
00:01:02,730 --> 00:01:04,520
‫of course, in each middleware function,

24
00:01:04,520 --> 00:01:08,340
‫we have access to the request and the response, okay?

25
00:01:08,340 --> 00:01:10,663
‫But also, we have the next function.

26
00:01:11,890 --> 00:01:15,060
‫And so, just like this, we edit as a third argument

27
00:01:15,060 --> 00:01:17,580
‫to this middleware function, okay?

28
00:01:17,580 --> 00:01:19,970
‫And like this, express then knows

29
00:01:19,970 --> 00:01:22,370
‫that we are actually defining a middleware here.

30
00:01:23,270 --> 00:01:24,820
‫Alright.

31
00:01:24,820 --> 00:01:26,160
‫Now, just like before, actually,

32
00:01:26,160 --> 00:01:28,920
‫we could have called this argument here something else,

33
00:01:28,920 --> 00:01:32,950
‫like X, or N, or, it doesn't really matter.

34
00:01:32,950 --> 00:01:34,270
‫What matters is that it's the

35
00:01:34,270 --> 00:01:36,540
‫third argument to this function.

36
00:01:36,540 --> 00:01:39,360
‫So express basically passes the next function

37
00:01:39,360 --> 00:01:42,780
‫as the third argument into this middleware function.

38
00:01:42,780 --> 00:01:44,500
‫And we can then call it whatever we want.

39
00:01:44,500 --> 00:01:47,720
‫But again, next is really the convention in express,

40
00:01:47,720 --> 00:01:49,420
‫and in order to avoid confusion,

41
00:01:49,420 --> 00:01:52,450
‫we always use this name, okay?

42
00:01:52,450 --> 00:01:54,250
‫And the same for request and response,

43
00:01:54,250 --> 00:01:57,590
‫as I mentioned before, we could call them something else.

44
00:01:57,590 --> 00:02:00,410
‫But the convention is to call them like this.

45
00:02:00,410 --> 00:02:02,470
‫Anyway, let's just log something to the console,

46
00:02:02,470 --> 00:02:04,080
‫here in this middleware function,

47
00:02:04,080 --> 00:02:06,650
‫just so that we have some code to actually run

48
00:02:06,650 --> 00:02:08,423
‫each time there is a new request.

49
00:02:09,280 --> 00:02:10,410
‫Let's say hello

50
00:02:12,510 --> 00:02:13,753
‫from the middleware.

51
00:02:15,850 --> 00:02:18,980
‫And add some emoji here, again, to make it pop a little bit.

52
00:02:18,980 --> 00:02:20,133
‫I really like that.

53
00:02:21,876 --> 00:02:22,709
‫And what happens here?

54
00:02:22,709 --> 00:02:23,750
‫Ah, right.

55
00:02:23,750 --> 00:02:26,210
‫So that is the code that we want to execute here.

56
00:02:26,210 --> 00:02:28,690
‫And now, just as we talked in the last video,

57
00:02:28,690 --> 00:02:31,780
‫we actually need to call the next function, okay?

58
00:02:31,780 --> 00:02:33,510
‫And if we didn't call next here,

59
00:02:33,510 --> 00:02:35,570
‫well, then the request/response cycle

60
00:02:35,570 --> 00:02:37,750
‫would really be stuck at this point.

61
00:02:37,750 --> 00:02:39,290
‫We wouldn't be able to move on,

62
00:02:39,290 --> 00:02:43,090
‫and we would never ever send back a response to the client.

63
00:02:43,090 --> 00:02:45,660
‫So I can't stress enough how important it is

64
00:02:45,660 --> 00:02:48,773
‫to never forget to use next in all of your middleware.

65
00:02:50,230 --> 00:02:52,290
‫Okay, and it's as simple as that.

66
00:02:52,290 --> 00:02:55,880
‫All we have to do is to specify next.

67
00:02:55,880 --> 00:02:57,330
‫So, this argument here.

68
00:02:57,330 --> 00:02:59,820
‫And then actually call that function like this.

69
00:02:59,820 --> 00:03:00,653
‫Okay.

70
00:03:00,653 --> 00:03:03,087
‫And with that, we are actually ready to test it out.

71
00:03:03,087 --> 00:03:04,370
‫And all we have to do is

72
00:03:04,370 --> 00:03:06,763
‫to send a simple request to our API.

73
00:03:08,900 --> 00:03:11,270
‫So, here is the API.

74
00:03:11,270 --> 00:03:13,083
‫Let's close up this one here.

75
00:03:14,210 --> 00:03:16,560
‫And so, it doesn't really matter, because this,

76
00:03:16,560 --> 00:03:18,980
‫of course, applies to every single request.

77
00:03:18,980 --> 00:03:20,420
‫So, let's go back.

78
00:03:20,420 --> 00:03:22,760
‫And indeed, we have hello from the middleware

79
00:03:22,760 --> 00:03:25,400
‫logged to our console, okay?

80
00:03:25,400 --> 00:03:26,313
‫So, great.

81
00:03:27,240 --> 00:03:30,140
‫And I wanted to quickly touch on what I just said before,

82
00:03:30,140 --> 00:03:32,150
‫which is that this middleware here applies

83
00:03:32,150 --> 00:03:35,160
‫to each and every single request, okay?

84
00:03:35,160 --> 00:03:37,600
‫And that's because we didn't specify any route.

85
00:03:37,600 --> 00:03:40,850
‫So, remember that before I said that all route handlers

86
00:03:40,850 --> 00:03:43,710
‫here are actually kind of middleware themselves.

87
00:03:43,710 --> 00:03:45,200
‫They are simply middleware functions

88
00:03:45,200 --> 00:03:47,790
‫that only apply for a certain URL.

89
00:03:47,790 --> 00:03:50,010
‫So a certain route, okay.

90
00:03:50,010 --> 00:03:52,980
‫But these more simple middleware functions

91
00:03:52,980 --> 00:03:54,900
‫that we define up here,

92
00:03:54,900 --> 00:03:58,080
‫well, they are going to apply to every single request.

93
00:03:58,080 --> 00:04:00,070
‫At least, if the route handler comes

94
00:04:00,070 --> 00:04:01,820
‫before this middleware.

95
00:04:01,820 --> 00:04:04,250
‫So let me actually show you something.

96
00:04:04,250 --> 00:04:06,610
‫And I'm going to cut it from here and

97
00:04:06,610 --> 00:04:08,670
‫now actually put it here

98
00:04:08,670 --> 00:04:10,563
‫after this route handler.

99
00:04:12,240 --> 00:04:14,910
‫So what do you think is going to happen now

100
00:04:14,910 --> 00:04:18,550
‫when I make a call to this route?

101
00:04:18,550 --> 00:04:20,900
‫So let's see what happens.

102
00:04:20,900 --> 00:04:24,040
‫So this exact route, so the one that I just showed you,

103
00:04:24,040 --> 00:04:25,640
‫let me send the request to that.

104
00:04:26,520 --> 00:04:29,420
‫And now let's go back and now we don't have

105
00:04:29,420 --> 00:04:31,000
‫hello from the middleware.

106
00:04:31,000 --> 00:04:32,460
‫So, why is that?

107
00:04:32,460 --> 00:04:34,930
‫Well, simply because this middleware,

108
00:04:34,930 --> 00:04:36,580
‫so this route handler here,

109
00:04:36,580 --> 00:04:40,200
‫it comes before this middleware function that we have here.

110
00:04:40,200 --> 00:04:42,330
‫And this route handler, which in this case,

111
00:04:42,330 --> 00:04:46,570
‫is get all tours, actually ends the request response cycle.

112
00:04:46,570 --> 00:04:48,130
‫So lets take a look at that.

113
00:04:48,130 --> 00:04:49,763
‫So we have get all tours.

114
00:04:51,220 --> 00:04:52,600
‫So, where is that?

115
00:04:52,600 --> 00:04:56,100
‫Yeah, so here is the function and by sending a result

116
00:04:56,100 --> 00:04:58,550
‫with res dot json, we actually

117
00:04:58,550 --> 00:05:01,090
‫end the request response cycle.

118
00:05:01,090 --> 00:05:03,440
‫And so the next middleware in the stack,

119
00:05:03,440 --> 00:05:05,430
‫which in this case, is

120
00:05:06,280 --> 00:05:09,700
‫is this one, so our custom one will then not be called.

121
00:05:09,700 --> 00:05:13,300
‫Again, because the cycle has already finished, okay.

122
00:05:13,300 --> 00:05:15,930
‫So make sure to understand that this order

123
00:05:15,930 --> 00:05:18,200
‫really matters a lot in express, okay.

124
00:05:18,200 --> 00:05:20,490
‫It's fundamental to understand

125
00:05:20,490 --> 00:05:23,590
‫that this is how express apps work, okay.

126
00:05:23,590 --> 00:05:25,760
‫So, in order to kind of test that,

127
00:05:25,760 --> 00:05:27,730
‫let's try to see what happens when

128
00:05:27,730 --> 00:05:30,190
‫we do a request to this route.

129
00:05:30,190 --> 00:05:33,173
‫So to get tour update tour or delete tour.

130
00:05:34,900 --> 00:05:38,090
‫So lets do this one, send the request here,

131
00:05:38,090 --> 00:05:41,150
‫and let's go back and now we have

132
00:05:41,150 --> 00:05:42,740
‫hello from the middleware.

133
00:05:42,740 --> 00:05:45,180
‫So that is actually what we expected, right?

134
00:05:45,180 --> 00:05:48,120
‫So that is because of course, this middleware here

135
00:05:48,120 --> 00:05:50,630
‫now is before the route handler.

136
00:05:50,630 --> 00:05:53,390
‫And so it is, of course, part of the middleware stack

137
00:05:53,390 --> 00:05:57,050
‫that get executed before the request response cycle ends.

138
00:05:57,050 --> 00:05:58,673
‫Alright, make sense?

139
00:06:00,630 --> 00:06:03,250
‫So, let's take that back and so usually

140
00:06:03,250 --> 00:06:05,560
‫we define this kind of global middleware

141
00:06:05,560 --> 00:06:08,183
‫here before all our route handlers.

142
00:06:09,500 --> 00:06:11,830
‫Alright, so this is one very simple

143
00:06:11,830 --> 00:06:15,500
‫middleware function that we just defined to run some code.

144
00:06:15,500 --> 00:06:17,490
‫But lets actually do another one.

145
00:06:17,490 --> 00:06:18,920
‫And of course, we can have as many

146
00:06:18,920 --> 00:06:21,800
‫middleware functions as we like.

147
00:06:21,800 --> 00:06:23,170
‫And this time we actually want to

148
00:06:23,170 --> 00:06:25,053
‫manipulate the request object.

149
00:06:27,040 --> 00:06:29,090
‫So the signature here is always the same,

150
00:06:29,090 --> 00:06:31,343
‫always request, response, and next.

151
00:06:32,890 --> 00:06:35,370
‫And now let's actually manipulate the request.

152
00:06:35,370 --> 00:06:36,800
‫All we want to do in this case,

153
00:06:36,800 --> 00:06:39,990
‫is to add the current time to the request.

154
00:06:39,990 --> 00:06:42,110
‫So we can simply define a property on the

155
00:06:42,110 --> 00:06:44,963
‫request object called request time.

156
00:06:47,480 --> 00:06:50,300
‫And then set it to a

157
00:06:50,300 --> 00:06:51,210
‫new date,

158
00:06:51,210 --> 00:06:54,300
‫which basically translates to right now.

159
00:06:54,300 --> 00:06:57,230
‫And then we can use a very handy date function,

160
00:06:57,230 --> 00:06:59,670
‫which is called to ISO string,

161
00:06:59,670 --> 00:07:01,520
‫which will then convert it into a nice,

162
00:07:01,520 --> 00:07:03,330
‫readable string for us.

163
00:07:03,330 --> 00:07:05,930
‫So, let's pretend we have some route handler

164
00:07:05,930 --> 00:07:07,860
‫that really needs the information about

165
00:07:07,860 --> 00:07:10,310
‫when exactly the request happens.

166
00:07:10,310 --> 00:07:12,860
‫And so the very simple solution is to simply add

167
00:07:12,860 --> 00:07:16,470
‫something like this to a request using middleware.

168
00:07:16,470 --> 00:07:17,520
‫Alright?

169
00:07:17,520 --> 00:07:18,960
‫Now, don't forget, of course,

170
00:07:18,960 --> 00:07:21,890
‫to call the next middleware in the stack, okay.

171
00:07:21,890 --> 00:07:26,830
‫So right now, we have request, time on all requests.

172
00:07:26,830 --> 00:07:29,800
‫So we can now use some route handler here,

173
00:07:29,800 --> 00:07:32,850
‫for example, (mumbles) for getting all the tours

174
00:07:32,850 --> 00:07:35,163
‫to simply log that for us to the console.

175
00:07:36,640 --> 00:07:40,583
‫So console dot log, and its actually request time.

176
00:07:42,130 --> 00:07:46,170
‫Okay, or we could even sent this in the response as well.

177
00:07:46,170 --> 00:07:47,460
‫Let me just test that.

178
00:07:47,460 --> 00:07:49,590
‫And let's just call this one requested at

179
00:07:52,670 --> 00:07:56,830
‫and req dot request time.

180
00:07:56,830 --> 00:07:57,870
‫That's the one.

181
00:07:57,870 --> 00:08:00,160
‫And so, yeah, let's go ahead and figure this one out.

182
00:08:00,160 --> 00:08:02,840
‫So our middleware is correct, right?

183
00:08:02,840 --> 00:08:05,870
‫Yeah, so we call next, when we're done,

184
00:08:05,870 --> 00:08:07,413
‫and so let's test this now.

185
00:08:08,450 --> 00:08:10,273
‫Remember it's on get all tours.

186
00:08:11,310 --> 00:08:14,000
‫And when we go back now, or when we go up,

187
00:08:14,000 --> 00:08:16,420
‫well, it should actually be here.

188
00:08:16,420 --> 00:08:17,973
‫So, what is wrong here?

189
00:08:18,920 --> 00:08:20,060
‫You see that down here,

190
00:08:20,060 --> 00:08:22,430
‫we actually just logged a function and yeah,

191
00:08:22,430 --> 00:08:27,230
‫of course, we didn't actually call the two ISO strings.

192
00:08:27,230 --> 00:08:31,000
‫So it's a method we have to call it.

193
00:08:31,000 --> 00:08:33,930
‫So give it a save, try it again.

194
00:08:33,930 --> 00:08:37,790
‫And now we have requested at and then today's date.

195
00:08:37,790 --> 00:08:38,740
‫So, perfect.

196
00:08:38,740 --> 00:08:40,860
‫That came from our middleware.

197
00:08:40,860 --> 00:08:44,980
‫So simply because we added that property to our request.

198
00:08:44,980 --> 00:08:46,250
‫Great.

199
00:08:46,250 --> 00:08:49,280
‫So I hope that with that, you made a great step forward

200
00:08:49,280 --> 00:08:52,730
‫in order to really understand how Node app work,

201
00:08:52,730 --> 00:08:53,810
‫how middleware works,

202
00:08:53,810 --> 00:08:56,370
‫how the entire request response cycle works,

203
00:08:56,370 --> 00:08:58,300
‫because that really is going to make all the difference

204
00:08:58,300 --> 00:09:00,453
‫when you're writing your own applications.