All right let's start building some actual routes for our app.
We have a good plan in place and we can start implementing these based on what we know.
And again the way we're going to test these is using Postman we don't need to worry about the front-end
now; we want to build our server to be working properly and only at the end once everything is working,
we can plug it into the front-end and we can also let the front-end team know, "Hey these are the endpoints
that we expect."
And this is what we will respond with.
All right.
So I think it's time to get started.
The very first thing we want to tackle is the 'signin'.
So let's think about this.
I'm going to do 'app.post()' for signin. And when we do the signin route we're going to have a request
response.
And here just to test that everything's working we'll do 'res.send('signing')'
Let's save go to Postman, do localhost click Send.
I always like doing incremental steps to make sure that everything is working and getting those small
wins every time as we're working.
So I have it saying 'this is working'.
Well that's because we did a GET request to the root instead of doing 'signin' and then a POST.
And we have 'Cannot POST /sigin' because apparently I can't spell there you go – a bit of misspelling
on my part.
There you go 'signing'
perfect.
Now I want to show you something that we're going to use moving forward.
Up until now we've done 'send', which can also send JSON but Express comes with a built in JSON method
on response that we can use and it has a bit of added features when responding with JSON
and we want to focus on using that.
So from now on I'm going to be using this and there's a slight difference in what we receive.
We receive a JSON string this way.
All right.
So let's think about 'signin' – we're not going to necessarily just say 'signin' and that's it.
We want to check whatever the user enters on the front-end – it's going to come back here in the response
or in the request and we want to check it with our current list of users to make sure that their passwords
match.
So it sounds like we need some sort of a database but for now because we haven't learned about them
yet we're going to create a variable and this variable is going to be called 'database'
and it will have users and this 'users' property will be an array of objects
and this array of objects will have id: '123'
will have name: 'john'
will have e-mail
as 'john@gmail.com'
-
We'll also have password – we'll say 'cookies'
We'll have 'entries', which is what we're going to use to track scores so entries means how many times
John has submitted photos for face detection and then finally we probably also want to keep track of
when John joined our app.
We can do that by doing 'new Date()', which comes with JavaScript –
it will just create a date when this part gets executed.
And you'll see later on how this is going to get displayed.
All right.
And let's create another user because we are in an array after all.
And this user will be called – well we'll have an 'id' of '124' – it'll be 'Sally', 'sally@gmail.com'
and her password will be 'bananas'.
Perfect.
Now looking at this for 'signin' we're going to get a request.
And within this request we're going to have – remember with 'signin' we want to make sure that we use
POST.
So we're going to have access to 'req.body()' and it sounds like a conditional statement doesn't it?
-
If we do an 'if' statement and we say 'req.body()' – well what are we going to have on the body – before we do
this let's go back to Postman and think about where we're going to send when we do 'signin' we're going
to do a POST request in the body.
Remember we're going to be sending JSON because we aren't using an HTML form.
We're going to hit 'raw' and then JSON(application/json) and now that we have JSON here we have this
box where we can enter what we want to send with our body.
Again it'll do validation for us and we'll say that – as the Sign In form on our front-end had – we have
'email' which will be – let's say we'll have 'john@gmail.com'.
So you can imagine that John is entering our website and using the 'signin' route, the Sign In form
and his password
will be 'cookies'.
We're going to send this information from the front-end and we're just pretending that John is logging
in so that we have access to it here.
So let's add that 'if' statement 'if (req.body.email === [
-
whatever we have in the database])
So let's say 'database.users' and we'll just grab John's [0] although we should be looping through this,
for now we just want to make sure that it works, we'll grab 'John' and we'll check against the email entry
in the database.
And 'req.body.password === [whatever we have in the database]'
If that works and that is true then we'll respond with a JSON that says 'success'
otherwise we can say we'll respond with a 'res.status(400)' and we'll say
'error logging in'.
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
of an error – '... read property email of undefined'.
This is a little tricky.
Why isn't it reading the email property?
And I want to show you this error because it happens a lot and it's something that people forget all
the time.
Remember when we're sending data from the front-end and it's using JSON, well we need to parse it because
Express doesn't know what we just sent over; in order to be able to use 'req.body()' well we need
to use body-parser, don't we?
So let's do that.
I'm going to import body-parser and 'require' it.
And if you don't have this in your project then you'll have to 'npm install' it.
But in all Express apps you're going to see this so it is one of those packages that you should never
forget and pretty much every Express app comes with it. In order to use this if you remember from our previous
lesson,
we just do 'app.use()' because it's a middleware and we'll do 'body-parser.json'.
And we should do this after the app has been – app variable – has been created.
Let's say that and try that again.
I going to click Send and we get "success" – look at that – if I change this to now just say "cookie"| – click Send
I get a '400 bad request' with "error logging in". Let's make this a little bit bigger so you can see. How
awesome is that?
We got our Sign In working nicely.
All right.
That's that's pretty nice.
We could do a 'for' loop here – 'for each'
maybe – to check in case Sally registers but that is a bit of a hassle isn't it?
Imagine if we had hundreds of users and we use the for loop in the Sign In to check against all the
users and all the passwords.
And this is exactly why one of the reasons that we use databases is well databases are really really
good at grabbing and checking against different inputs versus a variable or an array here where we have
to loop through everything.
So for now because this is working let's keep it the way it is.
Let's do the next one.
Register if you remember, register will be a POST request
and again we'll get a request, response [(req.res)].
This request, response '/register' means the user – a new user – is going to be created.
So we're not going to be doing any checks like this because the user doesn't exist.
We want to grab the 'req.body' and enter the new information into our database.
In this case we have a database object that has users and an array so we can do 'database.users.push()'
to add to this array.
Let's do that.
I always love starting off with what the request is going to look like.
So going back here we see that when we create a new user –
– if you remember the registration form – we get name, email and password. Let's go to Postman and create those.
I'm going to say.
POST '/register'
and here we get "email", "password" and also "name" and we'll say that the name is "Ann" her password is "apples"
and email will be "ann@gmail.com" and we're going to be sending that through JSON - and see how it gives
me an error?
That's because I get a comma – again,
Postman is just awesome for this.
Going back we want to create a user like this so let's just copy
this, what we have here
and say that we want to create a new user by saying 'database.users.push()' to add to the user's
array.
And within here we'll add an object which is what we just copied,
but we don't want to add John again to the users do we?
No, we want to grab whatever we get from 'req.body'.
In our case using destructuring we can just say '{ email, name, password } = req.body' and now on
the database we can just for now just statically add the 'id' of '125'.
'name' will be the name that we get, 'email' will be email again that we get
and then finally 'password' will be what we receive and 'entries' will be zero because
well, Ann will be a new user and she'll start off with zero entries and 'joined' will be a new date because
it will generate – whenever this is run – it will generate the timestamp of that day and time.
Let's save this and see if this works.
I go back here click Send.
I get a 'loading' and it's just spinning.
I'm going to click Cancel Request, and you know why that is?
Well because we haven't sent a response.
Express now is just hanging in there because we haven't returned anything we haven't responded. So
always remember to do that.
In our case will say that 'res.json()' will be the user, the new user that was created.
Perhaps if they're registering we want to grab that info and display it in the profile page.
In our case we'll say that we want to grab 'database.users' and we want to grab the last user which
we just created. That's simple to do.
We just do 'database.users.length'
which is the length of the array minus one, again it grabs the last array or last item in the array.
Let's save here.
And go back click send.
All right look at that.
We have Ann with zero entries.
A new timestamp for when she registered.
And now we have a new user.
Let's go back to the root route here.
And let's just return for now
the 'database.users' to make sure that we see what users we have.
I'm going to save here, go back and just do a GET request on the root route.
If I click Send
I made a bit of an error here, I can't spell.
Let's try that again.
If I go back click Send.
All right I got John and Sally but where's Ann?
Let's go back to our request again and Postman gives you the history of your request so you don't have
to keep writing them you can go back to register look at the body and let's send Ann again.
All right.
We've registered. Now if we go back to our GET request and click Send.
All right.
Ann's there; we got three new users.
But what just happened? Well this is another good case for why we need a database.
The reason that Ann wasn't added the first time around is because I changed the root route to include
'database.users', which meant the Nodemon had to restart; the server had to restart and start over.
And because these are JavaScript variables every time we restart the server this gets run all over again.
So the database initiates with just the two users.
Again we don't really use variables to store information that we need to what we call 'persist'
– that is to last and be memorized by the system. Databases are really really good because they run on
disk somewhere out there in the world and they're really really good at keeping this information and
not going down or if they do go down that they have backups so that users always get at it and we don't
lose any information.
We'll get to databases and we'll actually implement this with a database.
But I want to show you right now the pain points of not having databases.
We had to loop or we would have to loop through these users if we had to check 'signin' or we had to always
keep in mind that whenever the server restarts we lose all of our data.
All right well things are looking good.
There's definitely a few things that we can improve on here but we just want to build the skeleton.
We have two more endpoints left and we're going to tackle those in the next video.
I'll see on that one.
Bye-bye