WEBVTT

0
00:00.420 --> 00:00.740
All right.

1
00:00.750 --> 00:05.210
So as always we're going to get started by creating a brand new project.

2
00:05.310 --> 00:11.520
So I'm going to cdover to my desktop and then my web development folder and inside here I'm going to

3
00:11.520 --> 00:16.140
create a new directory that's called todolist -v1.

4
00:16.410 --> 00:21.450
And this is because in this module we're going to be building version 1 of this to-do list which we

5
00:21.450 --> 00:25.350
will continue to improve in the next module.

6
00:25.350 --> 00:30.270
So we're going to call this todolist v1. Of course feel free to create your project any way you wish

7
00:30.630 --> 00:37.590
but once you're done let's cd over to it and we're going to create some files.

8
00:37.590 --> 00:42.120
So I'm going to use touch to create a index.html as well as an App.

9
00:42.130 --> 00:43.160
js.

10
00:43.200 --> 00:50.660
And finally I'm going to initialize npm. And I'm just going to keep all of the default options and hit

11
00:50.670 --> 00:51.520
Yes.

12
00:51.660 --> 00:56.800
And finally I'm going to npm install. So you can use npm i for short if you wish

13
00:56.850 --> 01:00.830
if you don't want to type out the entire long word that is install.

14
01:00.990 --> 01:04.120
So as you get used to this you can start using this as a shortcut.

15
01:04.320 --> 01:12.310
So we're going to install express as well as body-parser, our good old standard modules.

16
01:12.510 --> 01:21.270
So once that's done let's go ahead and open this project up using Atom and we are now ready to begin

17
01:21.270 --> 01:24.050
developing our brand new app.

18
01:24.060 --> 01:27.310
So let's head over to our App.js.

19
01:27.450 --> 01:34.080
Now we've already set up our App.js or our server a few times now and every single time you set up

20
01:34.170 --> 01:37.820
a new project you're pretty much doing the same thing.

21
01:37.860 --> 01:44.940
So sometimes you might find it helpful to simply create a template file that you can paste in here with

22
01:45.000 --> 01:47.580
all of the parts that you commonly use

23
01:47.700 --> 01:51.200
for example changing the jshint to ES version 6,

24
01:51.360 --> 01:59.240
adding in our express and body-parser, creating our app, creating the first get route on the home route

25
01:59.370 --> 02:02.500
and then writing the app.listen on port 3000.

26
02:02.520 --> 02:04.570
Now this is very repetitive

27
02:04.640 --> 02:10.650
and so if you don't want to type it out every single time then feel free to take a look inside the resources

28
02:10.650 --> 02:16.890
section of this lesson where I provided the App.js file that you can simply copy and paste into

29
02:16.890 --> 02:18.970
your own App.js. Now

30
02:18.970 --> 02:25.320
however some students find that they want to get extra practice and they want to write out more code.

31
02:25.320 --> 02:31.480
So both ways are equally fine and I'll leave it up to you to decide which path you want to choose.

32
02:31.500 --> 02:33.150
But let's just walk through this.

33
02:33.150 --> 02:37.850
We're requiring our two packages that we just installed: express and body-parser.

34
02:38.130 --> 02:41.810
And we're creating our app constant by using express.

35
02:42.030 --> 02:47.670
And then we create a simple get route that just sends the browser the word hello when a user tries to

36
02:47.670 --> 02:49.380
access the home route.

37
02:49.380 --> 02:53.870
And then finally we listen on port 3000 and we console log

38
02:53.910 --> 02:56.040
that our server has been started.

39
02:56.040 --> 03:02.340
Now if any part of this is confusing at all, make sure that you don't skip any of the previous modules

40
03:02.370 --> 03:08.400
because all the knowledge builds on each progressive module and it might get a little bit confusing

41
03:08.430 --> 03:10.530
if you jump around in the course.

42
03:10.590 --> 03:13.070
So take a look back at some of those lessons

43
03:13.080 --> 03:17.760
if this is confusing at all. It shouldn't be because by this point they should be pretty familiar to

44
03:17.760 --> 03:18.290
you.

45
03:18.630 --> 03:22.120
All right so let's talk about this res.send.

46
03:22.380 --> 03:31.410
Because so far we've been passing data from our server our App.js, to the browser via this send method.

47
03:31.620 --> 03:38.580
And we've been saying response as in the response from our server is send this message.

48
03:38.610 --> 03:42.060
So that's how we've been passing data around.

49
03:42.090 --> 03:45.660
Now this allows us to perform some logic on the server side.

50
03:45.660 --> 03:53.490
So for example we could you know do some calculations, say var a =  3 + 5 and then we

51
03:53.490 --> 04:00.640
can send this variable a back to the browser as a response to the browser.

52
04:00.810 --> 04:07.740
So that allows us to do a lot of calculations or processing on our server side and then only once that's

53
04:07.740 --> 04:10.740
done to send the result back to the browser.

54
04:10.830 --> 04:17.010
And this allows us render different results to the user depending on the logic that we include inside

55
04:17.370 --> 04:18.740
our server.

56
04:18.750 --> 04:27.780
Now let's write some logic to test if the current day of the week happens to be on a weekend and we're

57
04:27.780 --> 04:30.270
going to send a message depending on the day.

58
04:30.270 --> 04:36.360
So we're going to write some logic code inside our server where it's going to be processed and then

59
04:36.360 --> 04:39.830
we're just going to send the result back to the browser.

60
04:40.260 --> 04:43.160
So let's create a new variable called today.

61
04:43.430 --> 04:45.550
And this is going to be a new date.

62
04:45.570 --> 04:54.180
This is just bog standard Javascript. And then we're going to say if today.getDay which gets the

63
04:54.180 --> 04:57.260
day of the week as a number.

64
04:57.480 --> 05:01.860
So for example Monday will be 1 Saturday will be 6.

65
05:02.160 --> 05:09.780
And then we're going to test whether if this number is equal to the weekend which is Saturday for 6,

66
05:10.110 --> 05:18.050
or it could be-- or it could be Sunday which happens to be 0.

67
05:18.270 --> 05:27.810
So we'll say if today.getDay is equal to 6 or if today.getDay is equal to 0

68
05:27.930 --> 05:34.680
then in that case we're going to reas.send a message saying, 'Yay! It's the weekend'.

69
05:37.920 --> 05:51.400
Alternatively or other else, then it's going to be a weekday a working day and it will instead send...

70
05:51.420 --> 05:57.510
So we've created our conditional statement that tests whether if the current date when the request of

71
05:57.510 --> 06:05.400
the server is made is equal to a Saturday or a Sunday and then we send a different message depending

72
06:05.400 --> 06:07.670
on whether that is true or false.

73
06:07.890 --> 06:14.100
So today as you can see is currently a Thursday and hence that's why I'm recording this video because

74
06:14.130 --> 06:15.350
it is a working day.

75
06:15.360 --> 06:21.640
So let's see if we get this message triggered when we run our app.

76
06:21.720 --> 06:23.830
So I'm going to go over to hyper

77
06:23.840 --> 06:27.020
and I'm going to start off my nodemon on App.

78
06:27.060 --> 06:27.800
js.

79
06:27.960 --> 06:34.580
And then I'm going to head over to my localhost:3000 to see the message being sent.

80
06:34.670 --> 06:37.990
Boo! I have to work because today is a Thursday.

81
06:38.310 --> 06:45.080
So let's just make sure that this is actually working by checking to see if it is Thursday.

82
06:45.120 --> 06:50.720
So if today is equal to 4, which is Thursday, then it should send me this message.

83
06:50.850 --> 06:57.150
And of course it's not a weekend, I'm just pretending that it is to make myself feel better.

84
06:57.480 --> 07:03.830
So let's go over to our localhost and of course nodemon will be monitoring our changes and 

85
07:03.840 --> 07:05.650
it's already started the server.

86
07:05.790 --> 07:13.080
So if I just go ahead and refresh then we trigger the different message because today is indeed number

87
07:13.120 --> 07:15.300
4, Thursday.

88
07:15.390 --> 07:18.150
Now you might wonder where did I get this method from?

89
07:18.150 --> 07:20.310
How do I know how to do that?

90
07:20.430 --> 07:24.180
Then of course remember that this is just on the Javascript

91
07:24.180 --> 07:29.730
and if you don't want to search through MDN or you have trouble finding it, then there's always good

92
07:29.730 --> 07:30.820
old Google.

93
07:30.870 --> 07:40.380
So you could search with something like 'get date of the week javascript' and we get w3schools.com and

94
07:40.450 --> 07:47.760
mdn and Stack Overflow all telling us the same thing which is we need this getDay method.

95
07:47.760 --> 07:53.220
And if you want to look at how you can use it then of course head over to the documentation for that

96
07:53.310 --> 07:54.670
relevant method.

97
07:54.840 --> 08:03.000
Then you can see that we can create a new date and we can get the day on that date and it will tell

98
08:03.000 --> 08:07.380
us Sunday through to Saturday which 0 - 6.

99
08:07.380 --> 08:12.350
So just a quick reminder that the documentation is like your family.

100
08:12.450 --> 08:16.860
Sometimes you find them difficult to deal with but they're always there for you.

101
08:17.130 --> 08:18.660
So let's continue.

102
08:18.840 --> 08:22.820
So as you can see our code is now working.

103
08:23.220 --> 08:32.700
Now if you want to make this a little bit better you can for example say var current day = today

104
08:33.300 --> 08:35.700
.getDay.

105
08:36.660 --> 08:44.910
And that way you can reduce the amount of repetition over here by saying if current day is equal to

106
08:44.920 --> 08:50.450
6 or current day is equal to 0,

107
08:50.450 --> 08:56.360
Saturday or Sunday, then do this or if it's false then do that.

108
08:56.360 --> 08:58.460
That just reduces it by one step

109
08:58.460 --> 09:00.260
if you find that helpful.

110
09:00.260 --> 09:06.720
Now what if we wanted to send the data back to the browser as HTML?

111
09:07.040 --> 09:11.820
Well we can do that by still using res.send.

112
09:11.840 --> 09:21.530
But in this case we're adding our HTML elements in, so our tags. So I can add a opening tag and a closing

113
09:21.530 --> 09:24.430
tag to whatever we send back.

114
09:24.680 --> 09:31.700
And this, when we refresh our website, you will see who gets rendered as proper HTML.

115
09:31.700 --> 09:33.000
Now here's the next question.

116
09:33.020 --> 09:38.890
What if we want to send multiple pieces of HTML back to the browser?

117
09:39.140 --> 09:44.710
Well we can't use res.send anymore because this only allows you to send one piece of data.

118
09:44.720 --> 09:50.420
You can't write a whole bunch of res.sends. When the server sees res.send, it sees this as the

119
09:50.420 --> 09:52.510
final sending instruction.

120
09:52.790 --> 09:56.650
But we can use a different method called res.

121
09:56.740 --> 09:57.550
write

122
09:57.560 --> 10:00.040
to send multiple pieces of data.

123
10:00.230 --> 10:07.540
So for example we can say res.write, Boo! I have to work'. And we add another one above

124
10:07.580 --> 10:11.220
let's say this is a paragraph tag instead.

125
10:11.540 --> 10:20.430
And instead of saying, Boo! I  have to work', we're going to say 'It is not the weekend'. And once

126
10:20.430 --> 10:26.150
you're done with all of your res.writes, then you can write res.send.

127
10:26.430 --> 10:30.120
And this basically sends off all of our messages.

128
10:30.150 --> 10:34.490
So let's hit save and refresh.

129
10:34.490 --> 10:35.780
It's not the weekend

130
10:35.820 --> 10:39.300
Boo! I have to work. So we get two pieces of data.

131
10:39.620 --> 10:47.090
And the way to think about this is it's almost like writing in something like a messenger versus writing

132
10:47.090 --> 10:48.220
in e-mail.

133
10:48.230 --> 10:54.590
So when you write in messenger you're using res.send and you have to send all your message in one

134
10:54.590 --> 10:55.290
go.

135
10:55.550 --> 11:02.660
Whereas with something like e-mail you can write one line then write another line and finally hit send.

136
11:02.660 --> 11:09.710
So this is kind of a different process and it allows you to send over multiple pieces of HTML and only

137
11:09.710 --> 11:12.860
once you're done do you call res.send.

138
11:13.160 --> 11:20.090
Although it is a bit painful though to keep writing res.write for  every single line

139
11:20.090 --> 11:26.270
of HTML that we want to send. And that makes it really difficult if we want to send over a bunch of

140
11:26.270 --> 11:32.840
HTML for example like an HTML page right? Because then we have to add the boilerplate code in every

141
11:32.840 --> 11:37.220
single line of that boilerplate has to be added using a res.

142
11:37.270 --> 11:37.760
write.

143
11:37.910 --> 11:42.730
So good luck with not getting repetitive strain injury on that.

144
11:42.740 --> 11:50.060
So as we've seen before the way of getting around this is we can add a whole bunch of code to our index

145
11:50.150 --> 11:51.490
.html.

146
11:51.560 --> 11:54.070
So let's add in our boilerplate and 

147
11:54.350 --> 12:03.460
let's give our title a name, let's call it To Do List. And inside our body we will send

148
12:03.530 --> 12:05.330
Let's add an <h1>.

149
12:05.450 --> 12:09.390
It's a week day!

150
12:09.500 --> 12:12.420
Why are you not working!

151
12:12.590 --> 12:18.680
So just to show you we can basically paste this a few times and let's just pretend that we have a average

152
12:18.680 --> 12:26.550
sized HTML file and instead of doing this res.write res.write res.write, we can use res.

153
12:26.570 --> 12:38.160
send file to send over the entire file that is at the directory name plus a file name which is index

154
12:38.170 --> 12:40.370
.html.

155
12:40.400 --> 12:47.880
So now when this else statement is true it's going to send over this file.

156
12:47.930 --> 12:55.130
So let's refresh and you can see that it's sent over all of the HTML  in one go without us having

157
12:55.130 --> 12:56.250
to write

158
12:56.260 --> 13:01.800
res.write for however many lines, 25 lines of code.

159
13:01.820 --> 13:08.900
Now the problem here though that you might realize is if we wanted to send over a different response

160
13:09.290 --> 13:18.720
depending on the logic in our server, then we would have to write many different HTML pages.

161
13:18.830 --> 13:26.900
So we would need a HTML page that is called weekend.html. Then we would need another one that's

162
13:26.900 --> 13:29.730
called weekday.html

163
13:29.810 --> 13:36.380
and if you wanted a different response for each day of the week then you would have to make seven of

164
13:36.380 --> 13:39.680
these and send them over individually.

165
13:39.710 --> 13:45.980
So that's also pretty painful and you'll find that as you get better at programming, you'll find that

166
13:45.980 --> 13:51.570
your tolerance for pain becomes inversely proportional with your skill.

167
13:51.770 --> 13:58.610
So the more skilled you get, the less tolerance you have for repetition. And if you think about it if

168
13:58.610 --> 14:06.140
you wanted to create say a blog, then are you really going to make a post1.html, post2

169
14:06.140 --> 14:09.160
.html and so on and so forth.?

170
14:09.290 --> 14:13.930
And in our case we're making a to do list app which has the current date.

171
14:14.090 --> 14:20.310
Are we really going to make separate HTML files that have mostly the same code?

172
14:20.390 --> 14:20.720
No

173
14:20.720 --> 14:21.130
right?

174
14:21.140 --> 14:24.050
Because, remember what are we? We are programmers.

175
14:24.080 --> 14:26.310
What have we got? All the codes.

176
14:26.360 --> 14:32.240
So every time you're doing something repetitive, the reflex of a programmer should tell you to try and

177
14:32.240 --> 14:34.950
use code to make your life easier.

178
14:34.970 --> 14:36.340
That's what it's there for.

179
14:36.380 --> 14:38.510
That's why we use computers.

180
14:38.510 --> 14:41.740
So how do we make our lives easier in this case?

181
14:41.810 --> 14:44.620
Well, templating. That's what we need.

182
14:44.630 --> 14:53.360
We need to create a HTML template where we can change certain parts of the HTML depending on the logic

183
14:53.540 --> 14:54.930
in our server.

184
14:55.160 --> 15:02.180
So this is why we need to learn about templating. And in the next lesson we're going to be creating our

185
15:02.180 --> 15:06.730
very first template to solve this problem.

186
15:06.740 --> 15:09.520
So for all of that and more, I'll see you on the next lesson.