1
00:00:00,300 --> 00:00:06,300
OK let's get started on the solution to this exercise and we'll begin by creating a new folder that

2
00:00:06,300 --> 00:00:07,590
I'll just call solution.

3
00:00:07,710 --> 00:00:12,820
So make your solution and CD into solution.

4
00:00:13,260 --> 00:00:15,820
And then we need to create our package thought Jason.

5
00:00:16,050 --> 00:00:18,890
So I'll do NPM in it.

6
00:00:18,900 --> 00:00:24,000
That's usually the very first thing I do when I'm starting a new Express app before I make any files

7
00:00:24,000 --> 00:00:24,050
.

8
00:00:24,060 --> 00:00:31,710
I just run NPM in it and I'll just go with solutionis the name 1.0 point no description will be solution

9
00:00:31,980 --> 00:00:36,920
to first express exercise.

10
00:00:36,930 --> 00:00:43,920
Entry point will make app J.S. just a matter of preference test command and enter get repository hit

11
00:00:43,920 --> 00:00:52,100
enter keywords hit enter author cold steel license that's fine.

12
00:00:52,110 --> 00:00:53,200
Is this OK.

13
00:00:53,280 --> 00:00:54,120
Yes.

14
00:00:54,500 --> 00:00:58,060
OK so that gives us the package that Jason can see that here.

15
00:00:58,320 --> 00:00:59,860
Now I'm going to make our act up.

16
00:00:59,900 --> 00:01:03,090
Yes that's where I will write all the routes and the code

17
00:01:06,510 --> 00:01:13,890
and then we need to install EXPRESS So NPM install Express and the important part is that I want you

18
00:01:13,890 --> 00:01:17,140
to add as a dependency in the package stuff Jason.

19
00:01:17,370 --> 00:01:22,860
And technically you could do that manually by going in and typing it in there but the idea is to use

20
00:01:22,860 --> 00:01:29,430
dash dash save which will look for the package that Jason and automatically added in there for us as

21
00:01:29,430 --> 00:01:31,210
you can see here.

22
00:01:31,680 --> 00:01:33,850
Close out middies.

23
00:01:33,870 --> 00:01:34,720
Here we go.

24
00:01:34,980 --> 00:01:38,410
Now has dependencies and express listed under that.

25
00:01:38,770 --> 00:01:42,500
OK so let's begin by setting up our basic express app.

26
00:01:42,510 --> 00:01:52,050
So I'm going to open this app Julius and I'm going to require Express and this just takes the contents

27
00:01:52,500 --> 00:02:01,650
of the Express module the express package and then we want to execute it and save it to a variable which

28
00:02:01,650 --> 00:02:06,060
is commonly called app but it can be called anything just like that.

29
00:02:06,060 --> 00:02:11,010
Now we have the app variable that will be used to set up our routes and let's go ahead and do the first

30
00:02:11,010 --> 00:02:12,500
one which is the root.

31
00:02:12,630 --> 00:02:19,430
So apt get slash and the message that we're looking for is either.

32
00:02:19,560 --> 00:02:27,330
Welcome to my assignment so I'll just copy that over apt get and then we need our function with the

33
00:02:27,330 --> 00:02:29,850
request and the response object.

34
00:02:31,470 --> 00:02:40,260
And in here they set into start and we're going to do a rez send and just send that whole string and

35
00:02:40,260 --> 00:02:41,760
save.

36
00:02:42,450 --> 00:02:44,090
And let's go ahead and start the server.

37
00:02:44,250 --> 00:02:48,380
So node Abdulle Yes and you'll notice that nothing happens.

38
00:02:48,600 --> 00:02:50,470
And that's because we're missing the code at the bottom.

39
00:02:50,540 --> 00:02:54,880
That actually tells express it tells the app to listen on a particular port.

40
00:02:55,380 --> 00:03:02,520
So we need to add in app to listen and then we need to provide the port which is a process that EMV

41
00:03:03,270 --> 00:03:05,730
ports and same thing for the IP.

42
00:03:05,760 --> 00:03:08,960
So process NVI IP.

43
00:03:09,600 --> 00:03:16,020
And I'd like to add in a little message afterwards so it accepts an optional callback where we can do

44
00:03:16,050 --> 00:03:17,930
a console log.

45
00:03:18,330 --> 00:03:29,520
No serving your app and let's save that and if we now start the server we get a little message and if

46
00:03:29,520 --> 00:03:33,630
we go to the you are just the root and I hit enter.

47
00:03:33,750 --> 00:03:34,920
I get either.

48
00:03:34,920 --> 00:03:39,180
Welcome to my assignment which is what we expect.

49
00:03:39,210 --> 00:03:41,520
So that's 1 out of 3 routes down.

50
00:03:42,060 --> 00:03:48,720
Let's get started on this speak slash animal route and the main goal here is to have you use a route

51
00:03:48,720 --> 00:03:51,090
parameter instead of the right definition.

52
00:03:51,210 --> 00:03:54,000
So have another abduct get before a share.

53
00:03:54,000 --> 00:03:54,810
The right way.

54
00:03:54,840 --> 00:04:00,750
I'll show you what you weren't supposed to do which is slash speak slash pig and make that its own route

55
00:04:01,020 --> 00:04:06,900
and then another one for kow that it's not very dry code especially if we had five different animals

56
00:04:06,900 --> 00:04:07,220
.

57
00:04:07,230 --> 00:04:08,850
That's not what you're expected to do.

58
00:04:09,030 --> 00:04:16,800
I was looking for this slash speak slash colon animal and this can be named anything but I think animal

59
00:04:16,800 --> 00:04:17,830
makes the most sense.

60
00:04:17,850 --> 00:04:22,890
Maybe you could have called it creature as well but we could also just call it X which is definitely

61
00:04:22,890 --> 00:04:27,910
not a great variable name it doesn't mean much but it will work the exact same way as animal.

62
00:04:28,560 --> 00:04:37,140
And then let's add this in with our request in our response and here we know we're going to send something

63
00:04:37,140 --> 00:04:39,380
back at the end so we can add that in.

64
00:04:39,630 --> 00:04:44,870
And why don't we start by just saying this is the speak route.

65
00:04:45,000 --> 00:04:53,270
Just to make sure our route parameters are set up correctly and if we restart the server go back and

66
00:04:53,270 --> 00:05:00,710
refresh and to trigger it we need to go to speak slash something slash anything and we get this is the

67
00:05:00,740 --> 00:05:01,710
speaker.

68
00:05:02,160 --> 00:05:06,820
OK so now let's focus on the logic here.

69
00:05:06,960 --> 00:05:10,830
The first thing we want to do is just extract the animal.

70
00:05:10,910 --> 00:05:13,720
So I'm going to make a variable just call it animal.

71
00:05:14,000 --> 00:05:20,200
And remember it's in the Paramo so request up harams dot animal is how we access that.

72
00:05:20,420 --> 00:05:24,980
Then the next thing we need to do is have a variable that will store the sound that the animal makes

73
00:05:24,980 --> 00:05:25,640
.

74
00:05:25,700 --> 00:05:31,760
So something like var sound and it will just be an empty string to start and then we'll basically check

75
00:05:32,390 --> 00:05:36,270
if animal is equal to pig.

76
00:05:37,220 --> 00:05:43,580
Then will say sound should be oink and did the same thing.

77
00:05:43,670 --> 00:05:46,990
LCF animal equals cow.

78
00:05:47,840 --> 00:05:49,360
And we can keep doing this.

79
00:05:49,460 --> 00:05:53,360
Sound equals Moo.

80
00:05:53,750 --> 00:06:00,800
And let's just leave it at that for now and add in our semi-colons and then redstart send and we'll

81
00:06:00,800 --> 00:06:14,260
just send the plus animal plus another space says space plus sound.

82
00:06:15,650 --> 00:06:17,950
And this only has two animals for now.

83
00:06:18,020 --> 00:06:21,400
Because as you can see it's a little bit of work to get another animal in there.

84
00:06:21,410 --> 00:06:25,850
It's an entire other state statement and I'll show you a shorter way of doing this in just a second

85
00:06:26,210 --> 00:06:27,790
but let's make sure this works.

86
00:06:27,800 --> 00:06:36,410
So if animals pig sound as if it's cow sounds moo and then read out and the animal says Plus the sound

87
00:06:36,410 --> 00:06:36,950
.

88
00:06:36,950 --> 00:06:37,980
Let's restart.

89
00:06:37,980 --> 00:06:40,720
See if we have any syntax errors to start.

90
00:06:41,420 --> 00:06:42,470
Looks good.

91
00:06:42,830 --> 00:06:43,910
Let's refresh.

92
00:06:43,910 --> 00:06:45,860
This is speak slash pig.

93
00:06:46,250 --> 00:06:50,120
And yet the pig says oink and let's do the same thing for the cow.

94
00:06:50,630 --> 00:06:51,790
The cow says moo.

95
00:06:52,160 --> 00:06:53,290
Excellent.

96
00:06:53,300 --> 00:06:57,830
Now let's go back and talk about the easier way that I mentioned where we don't have to have a separate

97
00:06:57,850 --> 00:07:00,840
if statement for every single animal.

98
00:07:01,760 --> 00:07:08,000
So rather than doing that I'm going to delete it all and I'm going to define a dictionary of animal

99
00:07:08,030 --> 00:07:15,950
sound pairings which will just be a plain javascript object so I'll call it far sounds and inside we'll

100
00:07:15,950 --> 00:07:20,100
have an animal like pig which will correspond to a sound point.

101
00:07:20,450 --> 00:07:24,370
And then we'll have another one for cow which corresponds to mu.

102
00:07:24,710 --> 00:07:30,040
And another one for a dog which will correspond to Wolf Wolf.

103
00:07:30,170 --> 00:07:35,640
And then we'll add in cat as well which says I hate you human.

104
00:07:36,110 --> 00:07:41,810
And the last animal will be goldfish and the goldfish says dot dot dot.

105
00:07:42,110 --> 00:07:48,110
So now that we have this object sound that matches an animal with a sound although we need to do is

106
00:07:48,110 --> 00:07:51,070
take the animal that the user is looking for.

107
00:07:51,080 --> 00:07:58,070
So speak slash dog for instance and we take dog and plug it into sounds and we'll get Wolf Wolf back

108
00:07:58,070 --> 00:07:58,940
out.

109
00:07:58,940 --> 00:08:06,140
So we'll keep animal how it is we need this variable but sound is now going to equal sounds of animal

110
00:08:06,920 --> 00:08:07,840
just like that.

111
00:08:07,840 --> 00:08:09,330
And we should be good to go now.

112
00:08:09,770 --> 00:08:15,160
Let's save restart the server refresh.

113
00:08:16,250 --> 00:08:17,950
And it says the exact same thing.

114
00:08:17,960 --> 00:08:19,840
Let's try goldfish.

115
00:08:20,170 --> 00:08:29,960
The Goldfish says dot dot dot and cat the cat says I hate you him and there are two minor changes that

116
00:08:29,960 --> 00:08:30,830
I'd like to make.

117
00:08:30,860 --> 00:08:35,880
The first one is that I want quotes around the animal's sound.

118
00:08:36,020 --> 00:08:39,860
So it says the cat says and then quote I hate you human.

119
00:08:40,340 --> 00:08:42,000
And there's a few ways of doing that.

120
00:08:42,020 --> 00:08:45,210
The simplest one is just to use single quotes around sound.

121
00:08:45,290 --> 00:08:46,820
So we'll do something like this.

122
00:08:46,820 --> 00:08:52,910
Or we add a single quote and then at the end we do plus a new string and all that goes inside that string

123
00:08:53,270 --> 00:08:54,510
is a single quote.

124
00:08:54,830 --> 00:08:58,920
Quotations can be such a pain sometimes in javascript but this isn't too bad.

125
00:08:58,940 --> 00:09:03,690
We have single quotes instead of double quotes or for using single quotes in the double quotes inside

126
00:09:03,710 --> 00:09:04,190
.

127
00:09:04,220 --> 00:09:05,940
And now let's restart again

128
00:09:08,690 --> 00:09:12,070
refresh and we get the cat says I hate you human.

129
00:09:12,080 --> 00:09:13,370
End quote.

130
00:09:13,370 --> 00:09:18,690
However if I go to cat with a capital C we have a problem.

131
00:09:18,830 --> 00:09:21,430
Same thing if a good dog with a capital C.

132
00:09:21,440 --> 00:09:26,080
And that's because inside of our sounds object they're are not upper case.

133
00:09:26,150 --> 00:09:32,360
The key is here pig with a lowercase P dog with a lower case D and rather than duplicating it we could

134
00:09:32,360 --> 00:09:35,380
do dog corresponds to Wolf Wolf.

135
00:09:35,540 --> 00:09:37,340
That's really not dry.

136
00:09:37,460 --> 00:09:40,680
What we could do instead is just down case the animal as it comes in.

137
00:09:40,850 --> 00:09:46,830
So a request up for an animal got to lower case just like that.

138
00:09:47,240 --> 00:09:57,640
And now we restart one more time refresh and now uppercase D for dog and lower case work just the same

139
00:09:57,630 --> 00:09:58,870
.

140
00:09:59,110 --> 00:09:59,810
There we go.

141
00:10:00,030 --> 00:10:01,550
So that's it for this route.

142
00:10:02,010 --> 00:10:04,320
The next route is the repeat route.

143
00:10:04,410 --> 00:10:10,830
So we're going to have an apt get and we know we're going to have Slash repeats and then we need two

144
00:10:10,840 --> 00:10:13,490
variables or two parameters in the route.

145
00:10:13,620 --> 00:10:16,030
And the first one is the message.

146
00:10:16,090 --> 00:10:18,730
So we'll just call it message to be repeated.

147
00:10:18,730 --> 00:10:21,230
And the second one is the number of times.

148
00:10:21,290 --> 00:10:22,450
And does call that times

149
00:10:25,170 --> 00:10:31,440
and we'll add in our callback at the request and response that code that will be run when this route

150
00:10:31,800 --> 00:10:32,630
is hit.

151
00:10:33,000 --> 00:10:37,240
And inside of here why don't we start just capturing these two variables.

152
00:10:37,440 --> 00:10:48,910
So var message equals request top harams message and var times equals requests.

153
00:10:49,120 --> 00:10:54,690
Harams times and floods do a response send.

154
00:10:55,000 --> 00:11:01,780
And we'll just do message plus message just to see what it is.

155
00:11:02,010 --> 00:11:08,390
And we'll also do plus times is class times.

156
00:11:08,460 --> 00:11:15,360
So just to make sure that we're getting message and times correctly restart the server again go back

157
00:11:16,290 --> 00:11:24,220
refresh in this time go to repeat slash and we'll do hello slash one and we get messages Hello times

158
00:11:24,210 --> 00:11:26,470
is one and if we change that.

159
00:11:26,830 --> 00:11:28,090
It works just fine.

160
00:11:28,440 --> 00:11:34,890
OK so now let's go back and work on actually getting this to work where we repeat message times number

161
00:11:34,890 --> 00:11:39,390
of times and the first thing we want to do is make sure that times is a number.

162
00:11:39,420 --> 00:11:40,900
Because right now it's a string.

163
00:11:41,130 --> 00:11:47,820
So we'll do number requested perhaps sometimes just like that and then we need to do a loop.

164
00:11:47,880 --> 00:11:49,270
So we're going to loop through.

165
00:11:49,330 --> 00:11:53,770
So I'll just start with the for loop for var I equal.

166
00:11:54,210 --> 00:11:57,050
Is less than times.

167
00:11:57,580 --> 00:12:00,180
Plus plus just like that.

168
00:12:00,180 --> 00:12:05,720
And then inside of here what we need to do is add a message to a variable.

169
00:12:05,740 --> 00:12:10,970
So every time through the loop we'll add in message and we'll be making this giant Stringer potentially

170
00:12:10,990 --> 00:12:13,950
a giant string that we're then sending at the end.

171
00:12:13,950 --> 00:12:20,440
We can only do redstart send one time when you make a request to a Web site you get one response back

172
00:12:20,450 --> 00:12:20,480
.

173
00:12:20,500 --> 00:12:26,850
You don't get multiple responses and redstart send is sending the response so we can't just do rest

174
00:12:26,880 --> 00:12:29,670
out send in the loop because it will only happen the first time.

175
00:12:29,700 --> 00:12:30,750
And then we're done.

176
00:12:31,020 --> 00:12:33,250
So we need to do a restart send.

177
00:12:33,370 --> 00:12:39,940
And let's just do restart and result which is a variable that doesn't exist yet that we need to define

178
00:12:40,360 --> 00:12:45,930
and we'll start with var results equals just empty string.

179
00:12:46,120 --> 00:12:53,030
And then inside the loop each time we'll do result plus equals message just like that.

180
00:12:53,430 --> 00:12:59,670
And this will then send back the result string that we've constructed that we've built up by going through

181
00:12:59,670 --> 00:13:01,020
this loop.

182
00:13:01,440 --> 00:13:11,100
So restart the server again refresh and just do something a little more manageable like hi slash 10

183
00:13:11,120 --> 00:13:11,660
.

184
00:13:12,390 --> 00:13:18,300
And it looks like we get 10 highest let's do three get three guys there.

185
00:13:18,630 --> 00:13:22,010
But I do want to have spaces between them and to do that.

186
00:13:22,080 --> 00:13:26,740
It's a simple change we'll just add a space.

187
00:13:28,440 --> 00:13:36,070
We'll just add a space after we add in message and again restart refresh.

188
00:13:36,580 --> 00:13:39,670
And now we get high space high space high.

189
00:13:40,260 --> 00:13:44,040
And let's do a low slash 1000.

190
00:13:44,040 --> 00:13:44,790
There we go.

191
00:13:44,790 --> 00:13:46,060
Looks good to me.

192
00:13:46,050 --> 00:13:51,740
The very last thing is getting the catchall route which is supposed to print sorry page not found.

193
00:13:51,800 --> 00:13:54,760
What are you doing with your life to make this work.

194
00:13:54,780 --> 00:13:56,390
We need to use the asterisk.

195
00:13:56,520 --> 00:14:06,360
So we'll go back and just at the bottom of the file apt get star and then our function request and response

196
00:14:06,370 --> 00:14:06,920
.

197
00:14:07,290 --> 00:14:16,720
And then in here we'll do a redstart send and paste that string in and save the very last time restart

198
00:14:16,710 --> 00:14:17,870
the server.

199
00:14:18,480 --> 00:14:25,490
Let's go back refresh and try going to a route that doesn't exist like this.

200
00:14:25,540 --> 00:14:26,760
Forget sorry.

201
00:14:26,830 --> 00:14:27,880
Page Not Found.

202
00:14:28,000 --> 00:14:30,170
What are you doing with your life.

203
00:14:30,180 --> 00:14:32,180
All right so that's it for this exercise.

204
00:14:32,190 --> 00:14:34,800
Coming up next we're going to keep working with Express.

205
00:14:34,810 --> 00:14:39,440
We're going to talk about how we can work with HDMI all how we can send back an entire file of HDMI

206
00:14:39,440 --> 00:14:39,910
now.

207
00:14:40,090 --> 00:14:44,620
We're going to talk about templates and something called the Ejay Yes stands for embedded Javascript

208
00:14:44,630 --> 00:14:44,890
.

209
00:14:45,030 --> 00:14:46,840
And we're also going to talk about post requests