Welcome back. In this section we're going to continue working on our final project:
the face recognition app that we've built, and we have the front-end mostly done for it but now we need
a server – something that the front-end can communicate with
so that this app can live on more than just our laptop – we can actually deploy it.
And if you remember our app we have a Sign In and the Sign In also links to a Register that we can register
the users.
And if we just had the app the way it is now there's nothing interacting with it.
Every time we log into the app we can just create a new user a new password and sign in no problem.
But if we build a back-end for it we now have the ability to interact with it.
We can even include a database so there's memory and we can have actual users that our back-end will
remember, and we'll get to the database in the next sections.
But for now we've worked on Node and Express and we should be familiar with how they work.
It's fairly nice and simple right?
We're simply creating URLs and endpoints and providing a response to the front-end.
So that's what we're going to work on in this section.
If we go back to our app
just looking at this app we can figure out what endpoints we might want to have.
We definitely want to have a 'sign in' endpoint; we want to have a 'register' endpoint and every time we
log into this app – well, we'll have some sort of a profile.
We want our name and our rank displayed and ideally this rank will change based on how many faces or
how many URLs I've submitted for my profile.
So here's the fun part.
We actually won't be really touching the front-end for the first couple of videos because the way you
want to build an API server is you want to figure out what the functionality is that we want and test
it out on something like Postman. So over the next couple of videos we're going to be using Postman and
just creating our server, and with Postman we're going to test our server just like we did in the previous
section,
get all our end points working and then finally we're going to connect it to our front-end.
It's going to be a lot of fun.
Now over here I have renamed our front-end project to smart-brain, but that's the React app that we've
been working on and I've also created a folder called 'smart-brain-api', and it has absolutely nothing
in it except for a 'package.json'.
So I just ran 'npm init'.
But it's something that we were already familiar with so I won't bore you with it.
And then I've installed a couple of packages that we've used in the previous section.
The Express framework – so that we can build a server really nicely, Nodemon – so we can run Nodemon in our
scripts and make sure our server is running, and we also have body-parser, which we use to parse and
have access to the request dot body [req.body] to read JSON and form data.
Other than that well there's no JavaScript file.
So let's start off by creating a 'server.js' and now that we have 'server.js', in the "scripts" we
can just say that NPM "start" and again it's JSON so I got to wrap it in curly brackets.
And this "start" will just say "nodemon server.js"
-
And now every time we run 'npm start' our server will run but we have nothing yet.
So let's get our basic skeleton of our Express app, and this should be familiar to you by now.
We'll just have a const express equals require the express package [const express = require('express')].
We'll then create our app by running Express
and then finally we'll have app dot listen and we'll use port 3000 [app.listen(3000)] and within the 'listen'
we can actually send it a second parameter, which is a function within this function,
it will run right after the 'listen' happens on port 3000.
And just to make sure that everything is running smoothly we'll just say 'app is running on port 3000'
Nodemon kind of does this for us but I like having it here regardless.
All right.
So just to test this if I do 'npm start'
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')].
Right so now that we have app running let's just create a basic route to make sure that everything
is working nicely.
You can just create a 'app.get()' at the root route [('/')].
And again as we've done previously this will get a request response.
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
do our localhost 3000 and we'll just do a root [/]
and we get 'this is working' perfectly.
So now that we have this set up I like planning our API.
And this is something as a developer you really want to do before you just start coding and you want
to make sure that you have an idea of what your API design will look like.
So let's think about this.
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
that perhaps for now we'll just say responds with
'this is working'.
We also want to have a 'signin' route because well we want people to sign in and this 'signin' will most
likely be a POST request because we're posting some data some JSON, some user information, and it's going
to respond with either
success or fail.
All right.
We also have a 'register' and the register again will be a POST request because we want to add the data
to the database or in our case a variable in our server and with our new user information.
So perhaps this one instead of saying 'success/fail' we will return
the newly created user to make sure that everything is working.
And we will say that this is the new user object that we'll return. OK.
We also want in the homescreen to have an ability to access the profile of the user.
So perhaps we'll have a profile with an optional parameter of 'userId' so that each user has their own
homescreen.
And this will most likely be a GET request.
We just want to get the user information and this will return us the user. And because we want to work with
the ranking or anytime a user posts a new photo we want to make sure that their count of how many photos
they've submitted goes up and maybe you have a way to keep score – a variable that increases by one every
time a user submits these photos and then checks against other users to see who has submitted the most
and give them a rank.
Perhaps we can have an image endpoint that again will be a post or maybe in our case because we're
updating the score it should be a PUT.
Because the user already exists and we want to make sure that there is an update on the user profile.
And this will just return the updated user object or perhaps whatever we've updated – in our case a
count of some sort.
And you also might be wondering here with the 'signin' if we're not creating a new user why are we doing
a POST?
And if you remember any time we're sending a password we don't really want to send it as a query string
do we? We want to send it inside of the body ideally over HTTPS so that it's hidden from man-in-the-middle
attacks and it's secure. Looking at this
this might change as we go through the project but we have an idea of what we want to create.
So in the next videos we're going to start creating these endpoints and testing them with Postman to
make sure that they're working.
I'll see you in the next one. Bye-bye