1
00:00:01,240 --> 00:00:06,030
All right let's start building some actual routes for our app.

2
00:00:06,100 --> 00:00:11,470
We have a good plan in place and we can start implementing these based on what we know.

3
00:00:13,040 --> 00:00:18,830
And again the way we're going to test these is using Postman we don't need to worry about the front-end

4
00:00:18,830 --> 00:00:27,060
now; we want to build our server to be working properly and only at the end once everything is working,

5
00:00:27,110 --> 00:00:34,230
we can plug it into the front-end and we can also let the front-end team know, "Hey these are the endpoints

6
00:00:34,680 --> 00:00:36,510
that we expect."

7
00:00:36,960 --> 00:00:41,610
And this is what we will respond with.

8
00:00:41,680 --> 00:00:42,020
All right.

9
00:00:42,040 --> 00:00:43,830
So I think it's time to get started.

10
00:00:45,980 --> 00:00:50,680
The very first thing we want to tackle is the 'signin'.

11
00:00:50,770 --> 00:00:51,840
So let's think about this.

12
00:00:51,850 --> 00:01:02,280
I'm going to do 'app.post()' for signin. And when we do the signin route we're going to have a request

13
00:01:02,430 --> 00:01:03,230
response.

14
00:01:06,470 --> 00:01:11,600
And here just to test that everything's working we'll do 'res.send('signing')'

15
00:01:14,990 --> 00:01:24,690
Let's save go to Postman, do localhost click Send.

16
00:01:24,740 --> 00:01:29,690
I always like doing incremental steps to make sure that everything is working and getting those small

17
00:01:29,690 --> 00:01:32,440
wins every time as we're working.

18
00:01:32,480 --> 00:01:37,230
So I have it saying 'this is working'.

19
00:01:37,610 --> 00:01:46,160
Well that's because we did a GET request to the root instead of doing 'signin' and then a POST.

20
00:01:49,840 --> 00:01:58,380
And we have 'Cannot POST /sigin' because apparently I can't spell there you go – a bit of misspelling

21
00:01:58,400 --> 00:01:59,470
on my part.

22
00:01:59,510 --> 00:02:00,440
There you go 'signing'

23
00:02:03,380 --> 00:02:04,110
perfect.

24
00:02:04,160 --> 00:02:07,160
Now I want to show you something that we're going to use moving forward.

25
00:02:07,160 --> 00:02:14,910
Up until now we've done 'send', which can also send JSON but Express comes with a built in JSON method

26
00:02:15,140 --> 00:02:21,040
on response that we can use and it has a bit of added features when responding with JSON

27
00:02:21,040 --> 00:02:23,490
and we want to focus on using that.

28
00:02:23,490 --> 00:02:30,480
So from now on I'm going to be using this and there's a slight difference in what we receive.

29
00:02:30,760 --> 00:02:33,080
We receive a JSON string this way.

30
00:02:35,230 --> 00:02:35,530
All right.

31
00:02:35,570 --> 00:02:41,350
So let's think about 'signin' – we're not going to necessarily just say 'signin' and that's it.

32
00:02:42,150 --> 00:02:47,820
We want to check whatever the user enters on the front-end – it's going to come back here in the response

33
00:02:47,850 --> 00:02:54,750
or in the request and we want to check it with our current list of users to make sure that their passwords

34
00:02:54,750 --> 00:02:56,300
match.

35
00:02:56,300 --> 00:03:02,300
So it sounds like we need some sort of a database but for now because we haven't learned about them

36
00:03:02,300 --> 00:03:07,720
yet we're going to create a variable and this variable is going to be called 'database'

37
00:03:11,380 --> 00:03:21,930
and it will have users and this 'users' property will be an array of objects

38
00:03:25,280 --> 00:03:28,510
and this array of objects will have id: '123'

39
00:03:28,700 --> 00:03:32,690
will have name: 'john'

40
00:03:33,230 --> 00:03:36,360
will have e-mail

41
00:03:36,800 --> 00:03:39,040
as 'john@gmail.com'

42
00:03:39,190 --> 00:03:40,220
-

43
00:03:41,150 --> 00:03:45,780
We'll also have password – we'll say 'cookies'

44
00:03:48,760 --> 00:03:57,670
We'll have 'entries', which is what we're going to use to track scores so entries means how many times

45
00:03:58,090 --> 00:04:03,730
John has submitted photos for face detection and then finally we probably also want to keep track of

46
00:04:03,970 --> 00:04:06,590
when John joined our app.

47
00:04:06,640 --> 00:04:11,860
We can do that by doing 'new Date()', which comes with JavaScript –

48
00:04:11,860 --> 00:04:17,459
it will just create a date when this part gets executed.

49
00:04:18,839 --> 00:04:21,300
And you'll see later on how this is going to get displayed.

50
00:04:23,550 --> 00:04:23,800
All right.

51
00:04:23,820 --> 00:04:28,110
And let's create another user because we are in an array after all.

52
00:04:29,660 --> 00:04:38,510
And this user will be called – well we'll have an 'id' of '124' – it'll be 'Sally', 'sally@gmail.com'

53
00:04:38,510 --> 00:04:42,670
and her password will be 'bananas'.

54
00:04:45,950 --> 00:04:46,970
Perfect.

55
00:04:47,000 --> 00:04:51,620
Now looking at this for 'signin' we're going to get a request.

56
00:04:51,680 --> 00:04:55,940
And within this request we're going to have – remember with 'signin' we want to make sure that we use

57
00:04:56,440 --> 00:04:57,070
POST.

58
00:04:57,140 --> 00:05:03,300
So we're going to have access to 'req.body()' and it sounds like a conditional statement doesn't it?

59
00:05:03,300 --> 00:05:03,780
-

60
00:05:03,780 --> 00:05:10,970
If we do an 'if' statement and we say 'req.body()' – well what are we going to have on the body – before we do

61
00:05:10,970 --> 00:05:17,940
this let's go back to Postman and think about where we're going to send when we do 'signin' we're going

62
00:05:17,940 --> 00:05:21,610
to do a POST request in the body.

63
00:05:21,990 --> 00:05:27,830
Remember we're going to be sending JSON because we aren't using an HTML form.

64
00:05:28,040 --> 00:05:36,930
We're going to hit 'raw' and then JSON(application/json) and now that we have JSON here we have this

65
00:05:36,930 --> 00:05:41,380
box where we can enter what we want to send with our body.

66
00:05:41,900 --> 00:05:49,130
Again it'll do validation for us and we'll say that – as the Sign In form on our front-end had – we have

67
00:05:51,540 --> 00:05:58,590
'email' which will be – let's say we'll have 'john@gmail.com'.

68
00:05:58,630 --> 00:06:04,540
So you can imagine that John is entering our website and using the 'signin' route, the Sign In form

69
00:06:05,800 --> 00:06:07,210
and his password

70
00:06:10,420 --> 00:06:14,050
will be 'cookies'.

71
00:06:14,190 --> 00:06:19,680
We're going to send this information from the front-end and we're just pretending that John is logging

72
00:06:19,680 --> 00:06:22,730
in so that we have access to it here.

73
00:06:25,560 --> 00:06:29,640
So let's add that 'if' statement 'if (req.body.email === [

74
00:06:33,370 --> 00:06:33,770
-

75
00:06:37,100 --> 00:06:40,070
whatever we have in the database])

76
00:06:40,370 --> 00:06:48,080
So let's say 'database.users' and we'll just grab John's [0] although we should be looping through this,

77
00:06:48,090 --> 00:06:54,920
for now we just want to make sure that it works, we'll grab 'John' and we'll check against the email entry

78
00:06:55,040 --> 00:06:56,390
in the database.

79
00:06:57,340 --> 00:07:06,040
And 'req.body.password === [whatever we have in the database]'

80
00:07:10,680 --> 00:07:20,000
If that works and that is true then we'll respond with a JSON that says 'success'

81
00:07:22,920 --> 00:07:32,860
otherwise we can say we'll respond with a 'res.status(400)' and we'll say

82
00:07:35,770 --> 00:07:41,470
'error logging in'.

83
00:07:41,470 --> 00:07:52,600
All right let's give this ago – I'm going to save, come back here – '/signin' – let's click send and I get a bit, a bit

84
00:07:52,600 --> 00:07:58,670
of an error – '... read property email of undefined'.

85
00:07:58,730 --> 00:07:59,750
This is a little tricky.

86
00:07:59,750 --> 00:08:03,520
Why isn't it reading the email property?

87
00:08:03,740 --> 00:08:10,070
And I want to show you this error because it happens a lot and it's something that people forget all

88
00:08:10,070 --> 00:08:10,760
the time.

89
00:08:11,030 --> 00:08:19,160
Remember when we're sending data from the front-end and it's using JSON, well we need to parse it because

90
00:08:19,160 --> 00:08:26,390
Express doesn't know what we just sent over; in order to be able to use 'req.body()' well we need

91
00:08:26,390 --> 00:08:29,590
to use body-parser, don't we?

92
00:08:31,610 --> 00:08:32,559
So let's do that.

93
00:08:32,600 --> 00:08:43,659
I'm going to import body-parser and 'require' it.

94
00:08:43,809 --> 00:08:47,640
And if you don't have this in your project then you'll have to 'npm install' it.

95
00:08:47,770 --> 00:08:55,810
But in all Express apps you're going to see this so it is one of those packages that you should never

96
00:08:55,810 --> 00:09:01,060
forget and pretty much every Express app comes with it. In order to use this if you remember from our previous

97
00:09:01,060 --> 00:09:01,780
lesson,

98
00:09:01,900 --> 00:09:12,180
we just do 'app.use()' because it's a middleware and we'll do 'body-parser.json'.

99
00:09:12,410 --> 00:09:17,970
And we should do this after the app has been – app variable – has been created.

100
00:09:19,750 --> 00:09:23,080
Let's say that and try that again.

101
00:09:24,030 --> 00:09:33,990
I going to click Send and we get "success" – look at that – if I change this to now just say "cookie"| – click Send

102
00:09:35,230 --> 00:09:45,180
I get a '400 bad request' with "error logging in". Let's make this a little bit bigger so you can see. How

103
00:09:45,270 --> 00:09:46,470
awesome is that?

104
00:09:46,530 --> 00:09:49,070
We got our Sign In working nicely.

105
00:09:51,970 --> 00:09:52,460
All right.

106
00:09:52,460 --> 00:09:54,430
That's that's pretty nice.

107
00:09:54,430 --> 00:09:59,620
We could do a 'for' loop here – 'for each'

108
00:09:59,650 --> 00:10:06,370
maybe – to check in case Sally registers but that is a bit of a hassle isn't it?

109
00:10:06,370 --> 00:10:13,360
Imagine if we had hundreds of users and we use the for loop in the Sign In to check against all the

110
00:10:13,360 --> 00:10:15,380
users and all the passwords.

111
00:10:15,670 --> 00:10:22,200
And this is exactly why one of the reasons that we use databases is well databases are really really

112
00:10:22,200 --> 00:10:30,390
good at grabbing and checking against different inputs versus a variable or an array here where we have

113
00:10:30,390 --> 00:10:31,860
to loop through everything.

114
00:10:32,370 --> 00:10:35,200
So for now because this is working let's keep it the way it is.

115
00:10:37,860 --> 00:10:39,340
Let's do the next one.

116
00:10:39,420 --> 00:10:44,850
Register if you remember, register will be a POST request

117
00:10:49,170 --> 00:10:52,230
and again we'll get a request, response [(req.res)].

118
00:10:54,760 --> 00:10:59,840
This request, response '/register' means the user – a new user – is going to be created.

119
00:11:03,200 --> 00:11:08,120
So we're not going to be doing any checks like this because the user doesn't exist.

120
00:11:08,120 --> 00:11:17,900
We want to grab the 'req.body' and enter the new information into our database.

121
00:11:17,930 --> 00:11:25,820
In this case we have a database object that has users and an array so we can do 'database.users.push()'

122
00:11:26,780 --> 00:11:28,170
to add to this array.

123
00:11:28,250 --> 00:11:28,680
Let's do that.

124
00:11:31,730 --> 00:11:35,060
I always love starting off with what the request is going to look like.

125
00:11:35,710 --> 00:11:39,960
So going back here we see that when we create a new user –

126
00:11:40,150 --> 00:11:50,280
– if you remember the registration form – we get name, email and password. Let's go to Postman and create those.

127
00:11:50,560 --> 00:11:52,240
I'm going to say.

128
00:11:52,240 --> 00:11:54,450
POST '/register'

129
00:11:55,060 --> 00:12:07,730
and here we get "email", "password" and also "name" and we'll say that the name is "Ann" her password is "apples"

130
00:12:08,210 --> 00:12:17,710
and email will be "ann@gmail.com" and we're going to be sending that through JSON - and see how it gives

131
00:12:17,710 --> 00:12:18,300
me an error?

132
00:12:18,310 --> 00:12:21,860
That's because I get a comma – again,

133
00:12:22,020 --> 00:12:25,240
Postman is just awesome for this.

134
00:12:25,420 --> 00:12:32,540
Going back we want to create a user like this so let's just copy

135
00:12:32,580 --> 00:12:33,680
this, what we have here

136
00:12:38,130 --> 00:12:48,600
and say that we want to create a new user by saying 'database.users.push()' to add to the user's

137
00:12:48,600 --> 00:12:49,370
array.

138
00:12:49,920 --> 00:12:54,120
And within here we'll add an object which is what we just copied,

139
00:12:57,220 --> 00:13:01,680
but we don't want to add John again to the users do we?

140
00:13:01,720 --> 00:13:06,180
No, we want to grab whatever we get from 'req.body'.

141
00:13:06,280 --> 00:13:22,620
In our case using destructuring we can just say '{ email, name, password } = req.body' and now on

142
00:13:22,620 --> 00:13:29,600
the database we can just for now just statically add the 'id' of '125'.

143
00:13:29,870 --> 00:13:36,840
'name' will be the name that we get, 'email' will be email again that we get

144
00:13:36,840 --> 00:13:45,390
and then finally 'password' will be what we receive and 'entries' will be zero because

145
00:13:45,640 --> 00:13:51,640
well, Ann will be a new user and she'll start off with zero entries and 'joined' will be a new date because

146
00:13:51,640 --> 00:14:00,910
it will generate – whenever this is run – it will generate the timestamp of that day and time.

147
00:14:01,020 --> 00:14:04,040
Let's save this and see if this works.

148
00:14:05,130 --> 00:14:09,630
I go back here click Send.

149
00:14:09,740 --> 00:14:11,990
I get a 'loading' and it's just spinning.

150
00:14:12,050 --> 00:14:16,320
I'm going to click Cancel Request, and you know why that is?

151
00:14:16,710 --> 00:14:19,500
Well because we haven't sent a response.

152
00:14:19,500 --> 00:14:25,210
Express now is just hanging in there because we haven't returned anything we haven't responded. So

153
00:14:25,230 --> 00:14:26,730
always remember to do that.

154
00:14:28,000 --> 00:14:38,780
In our case will say that 'res.json()' will be the user, the new user that was created.

155
00:14:38,880 --> 00:14:44,730
Perhaps if they're registering we want to grab that info and display it in the profile page.

156
00:14:44,730 --> 00:14:52,140
In our case we'll say that we want to grab 'database.users' and we want to grab the last user which

157
00:14:52,140 --> 00:14:54,660
we just created. That's simple to do.

158
00:14:54,660 --> 00:14:57,080
We just do 'database.users.length'

159
00:14:57,120 --> 00:15:04,670
which is the length of the array minus one, again it grabs the last array or last item in the array.

160
00:15:07,030 --> 00:15:08,020
Let's save here.

161
00:15:09,490 --> 00:15:13,540
And go back click send.

162
00:15:13,550 --> 00:15:15,070
All right look at that.

163
00:15:15,170 --> 00:15:19,900
We have Ann with zero entries.

164
00:15:20,030 --> 00:15:23,690
A new timestamp for when she registered.

165
00:15:24,080 --> 00:15:26,040
And now we have a new user.

166
00:15:26,270 --> 00:15:31,090
Let's go back to the root route here.

167
00:15:31,370 --> 00:15:33,390
And let's just return for now

168
00:15:33,620 --> 00:15:40,720
the 'database.users' to make sure that we see what users we have.

169
00:15:43,580 --> 00:15:50,500
I'm going to save here, go back and just do a GET request on the root route.

170
00:15:50,540 --> 00:15:51,440
If I click Send

171
00:15:55,160 --> 00:15:58,230
I made a bit of an error here, I can't spell.

172
00:15:58,460 --> 00:16:00,140
Let's try that again.

173
00:16:00,140 --> 00:16:03,970
If I go back click Send.

174
00:16:03,990 --> 00:16:10,360
All right I got John and Sally but where's Ann?

175
00:16:10,900 --> 00:16:17,110
Let's go back to our request again and Postman gives you the history of your request so you don't have

176
00:16:17,110 --> 00:16:25,320
to keep writing them you can go back to register look at the body and let's send Ann again.

177
00:16:25,320 --> 00:16:25,630
All right.

178
00:16:25,630 --> 00:16:32,140
We've registered. Now if we go back to our GET request and click Send.

179
00:16:32,140 --> 00:16:32,610
All right.

180
00:16:32,650 --> 00:16:36,190
Ann's there; we got three new users.

181
00:16:36,190 --> 00:16:44,100
But what just happened? Well this is another good case for why we need a database.

182
00:16:44,130 --> 00:16:51,480
The reason that Ann wasn't added the first time around is because I changed the root route to include

183
00:16:51,560 --> 00:16:58,680
'database.users', which meant the Nodemon had to restart; the server had to restart and start over.

184
00:16:59,160 --> 00:17:06,810
And because these are JavaScript variables every time we restart the server this gets run all over again.

185
00:17:07,109 --> 00:17:11,319
So the database initiates with just the two users.

186
00:17:11,500 --> 00:17:18,609
Again we don't really use variables to store information that we need to what we call 'persist'

187
00:17:18,640 --> 00:17:28,040
– that is to last and be memorized by the system. Databases are really really good because they run on

188
00:17:28,040 --> 00:17:36,050
disk somewhere out there in the world and they're really really good at keeping this information and

189
00:17:36,140 --> 00:17:43,910
not going down or if they do go down that they have backups so that users always get at it and we don't

190
00:17:43,910 --> 00:17:45,220
lose any information.

191
00:17:46,990 --> 00:17:51,380
We'll get to databases and we'll actually implement this with a database.

192
00:17:51,490 --> 00:17:54,960
But I want to show you right now the pain points of not having databases.

193
00:17:55,060 --> 00:18:04,220
We had to loop or we would have to loop through these users if we had to check 'signin' or we had to always

194
00:18:04,640 --> 00:18:10,230
keep in mind that whenever the server restarts we lose all of our data.

195
00:18:10,250 --> 00:18:13,380
All right well things are looking good.

196
00:18:15,160 --> 00:18:21,110
There's definitely a few things that we can improve on here but we just want to build the skeleton.

197
00:18:21,470 --> 00:18:27,180
We have two more endpoints left and we're going to tackle those in the next video.

198
00:18:27,200 --> 00:18:28,570
I'll see on that one.

199
00:18:28,640 --> 00:18:28,820
Bye-bye