1
00:00:01,100 --> 00:00:06,280
Welcome back. In this section we're going to continue working on our final project:

2
00:00:06,410 --> 00:00:12,620
the face recognition app that we've built, and we have the front-end mostly done for it but now we need

3
00:00:12,620 --> 00:00:16,720
a server – something that the front-end can communicate with

4
00:00:17,060 --> 00:00:23,910
so that this app can live on more than just our laptop – we can actually deploy it.

5
00:00:24,120 --> 00:00:33,480
And if you remember our app we have a Sign In and the Sign In also links to a Register that we can register

6
00:00:33,480 --> 00:00:35,270
the users.

7
00:00:35,520 --> 00:00:40,130
And if we just had the app the way it is now there's nothing interacting with it.

8
00:00:40,290 --> 00:00:47,830
Every time we log into the app we can just create a new user a new password and sign in no problem.

9
00:00:50,530 --> 00:00:57,140
But if we build a back-end for it we now have the ability to interact with it.

10
00:00:57,250 --> 00:01:02,820
We can even include a database so there's memory and we can have actual users that our back-end will

11
00:01:02,830 --> 00:01:07,450
remember, and we'll get to the database in the next sections.

12
00:01:07,540 --> 00:01:12,440
But for now we've worked on Node and Express and we should be familiar with how they work.

13
00:01:13,330 --> 00:01:15,500
It's fairly nice and simple right?

14
00:01:15,520 --> 00:01:24,160
We're simply creating URLs and endpoints and providing a response to the front-end.

15
00:01:24,180 --> 00:01:26,360
So that's what we're going to work on in this section.

16
00:01:27,730 --> 00:01:28,930
If we go back to our app

17
00:01:32,470 --> 00:01:37,080
just looking at this app we can figure out what endpoints we might want to have.

18
00:01:37,090 --> 00:01:46,370
We definitely want to have a 'sign in' endpoint; we want to have a 'register' endpoint and every time we

19
00:01:46,370 --> 00:01:50,480
log into this app – well, we'll have some sort of a profile.

20
00:01:50,480 --> 00:02:00,450
We want our name and our rank displayed and ideally this rank will change based on how many faces or

21
00:02:00,450 --> 00:02:03,190
how many URLs I've submitted for my profile.

22
00:02:05,870 --> 00:02:07,610
So here's the fun part.

23
00:02:07,610 --> 00:02:13,850
We actually won't be really touching the front-end for the first couple of videos because the way you

24
00:02:13,850 --> 00:02:21,790
want to build an API server is you want to figure out what the functionality is that we want and test

25
00:02:21,790 --> 00:02:30,100
it out on something like Postman. So over the next couple of videos we're going to be using Postman and

26
00:02:30,100 --> 00:02:37,310
just creating our server, and with Postman we're going to test our server just like we did in the previous

27
00:02:37,310 --> 00:02:38,020
section,

28
00:02:39,030 --> 00:02:43,060
get all our end points working and then finally we're going to connect it to our front-end.

29
00:02:44,360 --> 00:02:45,740
It's going to be a lot of fun.

30
00:02:45,920 --> 00:02:54,200
Now over here I have renamed our front-end project to smart-brain, but that's the React app that we've

31
00:02:54,200 --> 00:03:03,050
been working on and I've also created a folder called 'smart-brain-api', and it has absolutely nothing

32
00:03:03,050 --> 00:03:07,090
in it except for a 'package.json'.

33
00:03:07,220 --> 00:03:10,040
So I just ran 'npm init'.

34
00:03:10,040 --> 00:03:13,520
But it's something that we were already familiar with so I won't bore you with it.

35
00:03:13,760 --> 00:03:19,560
And then I've installed a couple of packages that we've used in the previous section.

36
00:03:19,880 --> 00:03:26,870
The Express framework – so that we can build a server really nicely, Nodemon – so we can run Nodemon in our

37
00:03:26,870 --> 00:03:36,100
scripts and make sure our server is running, and we also have body-parser, which we use to parse and

38
00:03:36,100 --> 00:03:40,120
have access to the request dot body [req.body] to read JSON and form data.

39
00:03:40,360 --> 00:03:43,610
Other than that well there's no JavaScript file.

40
00:03:43,720 --> 00:03:53,760
So let's start off by creating a 'server.js' and now that we have 'server.js', in the "scripts" we

41
00:03:53,760 --> 00:04:02,280
can just say that NPM "start" and again it's JSON so I got to wrap it in curly brackets.

42
00:04:03,280 --> 00:04:08,410
And this "start" will just say "nodemon server.js"

43
00:04:10,730 --> 00:04:12,800
-

44
00:04:12,800 --> 00:04:19,800
And now every time we run 'npm start' our server will run but we have nothing yet.

45
00:04:19,810 --> 00:04:27,170
So let's get our basic skeleton of our Express app, and this should be familiar to you by now.

46
00:04:27,640 --> 00:04:38,470
We'll just have a const express equals require the express package [const express = require('express')].

47
00:04:38,620 --> 00:04:41,890
We'll then create our app by running Express

48
00:04:46,140 --> 00:04:55,710
and then finally we'll have app dot listen and we'll use port 3000 [app.listen(3000)] and within the 'listen'

49
00:04:55,710 --> 00:05:00,970
we can actually send it a second parameter, which is a function within this function,

50
00:05:03,610 --> 00:05:08,220
it will run right after the 'listen' happens on port 3000.

51
00:05:08,440 --> 00:05:19,990
And just to make sure that everything is running smoothly we'll just say 'app is running on port 3000'

52
00:05:20,240 --> 00:05:28,110
Nodemon kind of does this for us but I like having it here regardless.

53
00:05:28,120 --> 00:05:28,410
All right.

54
00:05:28,420 --> 00:05:30,790
So just to test this if I do 'npm start'

55
00:05:35,330 --> 00:05:42,410
we have Nodemon started, app is running on port 3000 just like I've said it here [console.log('app is running on port 3000')].

56
00:05:42,500 --> 00:05:48,830
Right so now that we have app running let's just create a basic route to make sure that everything

57
00:05:48,830 --> 00:05:50,720
is working nicely.

58
00:05:50,750 --> 00:05:58,780
You can just create a 'app.get()' at the root route [('/')].

59
00:05:59,080 --> 00:06:04,700
And again as we've done previously this will get a request response.

60
00:06:08,150 --> 00:06:19,240
And in here we'll just do a response dot send [res.send('this is working')] let's save and go back to our Postman and

61
00:06:19,250 --> 00:06:24,100
do our localhost 3000 and we'll just do a root [/]

62
00:06:27,270 --> 00:06:31,850
and we get 'this is working' perfectly.

63
00:06:31,870 --> 00:06:35,560
So now that we have this set up I like planning our API.

64
00:06:35,590 --> 00:06:40,450
And this is something as a developer you really want to do before you just start coding and you want

65
00:06:40,450 --> 00:06:44,900
to make sure that you have an idea of what your API design will look like.

66
00:06:46,470 --> 00:06:47,850
So let's think about this.

67
00:06:47,940 --> 00:06:53,760
I'm going to wrap this in comments and we can work on it one by one. If you want to have a root route

68
00:06:53,850 --> 00:07:00,280
that perhaps for now we'll just say responds with

69
00:07:00,510 --> 00:07:02,760
'this is working'.

70
00:07:02,820 --> 00:07:12,150
We also want to have a 'signin' route because well we want people to sign in and this 'signin' will most

71
00:07:12,150 --> 00:07:22,190
likely be a POST request because we're posting some data some JSON, some user information, and it's going

72
00:07:22,190 --> 00:07:24,530
to respond with either

73
00:07:27,680 --> 00:07:29,640
success or fail.

74
00:07:30,110 --> 00:07:30,710
All right.

75
00:07:30,770 --> 00:07:39,200
We also have a 'register' and the register again will be a POST request because we want to add the data

76
00:07:39,230 --> 00:07:49,610
to the database or in our case a variable in our server and with our new user information.

77
00:07:49,620 --> 00:07:53,860
So perhaps this one instead of saying 'success/fail' we will return

78
00:07:53,880 --> 00:07:57,620
the newly created user to make sure that everything is working.

79
00:07:57,930 --> 00:08:03,300
And we will say that this is the new user object that we'll return. OK.

80
00:08:03,310 --> 00:08:11,190
We also want in the homescreen to have an ability to access the profile of the user.

81
00:08:11,250 --> 00:08:19,890
So perhaps we'll have a profile with an optional parameter of 'userId' so that each user has their own

82
00:08:20,020 --> 00:08:21,110
homescreen.

83
00:08:21,390 --> 00:08:25,230
And this will most likely be a GET request.

84
00:08:25,230 --> 00:08:33,700
We just want to get the user information and this will return us the user. And because we want to work with

85
00:08:33,700 --> 00:08:41,530
the ranking or anytime a user posts a new photo we want to make sure that their count of how many photos

86
00:08:41,530 --> 00:08:49,190
they've submitted goes up and maybe you have a way to keep score – a variable that increases by one every

87
00:08:49,190 --> 00:08:54,740
time a user submits these photos and then checks against other users to see who has submitted the most

88
00:08:54,740 --> 00:08:56,170
and give them a rank.

89
00:08:56,540 --> 00:09:09,080
Perhaps we can have an image endpoint that again will be a post or maybe in our case because we're

90
00:09:09,080 --> 00:09:11,210
updating the score it should be a PUT.

91
00:09:11,210 --> 00:09:17,520
Because the user already exists and we want to make sure that there is an update on the user profile.

92
00:09:17,810 --> 00:09:26,470
And this will just return the updated user object or perhaps whatever we've updated – in our case a

93
00:09:26,800 --> 00:09:28,130
count of some sort.

94
00:09:29,710 --> 00:09:37,660
And you also might be wondering here with the 'signin' if we're not creating a new user why are we doing

95
00:09:37,690 --> 00:09:40,110
a POST?

96
00:09:40,140 --> 00:09:46,680
And if you remember any time we're sending a password we don't really want to send it as a query string

97
00:09:46,670 --> 00:09:56,030
do we? We want to send it inside of the body ideally over HTTPS so that it's hidden from man-in-the-middle

98
00:09:56,030 --> 00:10:00,250
attacks and it's secure. Looking at this

99
00:10:00,250 --> 00:10:06,860
this might change as we go through the project but we have an idea of what we want to create.

100
00:10:06,880 --> 00:10:14,070
So in the next videos we're going to start creating these endpoints and testing them with Postman to

101
00:10:14,070 --> 00:10:16,950
make sure that they're working.

102
00:10:17,040 --> 00:10:18,900
I'll see you in the next one. Bye-bye