- [Instructor] Now that we've seen some basic examples
of how an express server works,
let's make our server do something more relevant
to our actual site that we're working on.
We'll want users to be able to do a number of things
on our site, such as add and remove items from their carts,
as well as load all our product data from the server.
And in order to do this,
we need to add a good bit of code to our backend.
Now, in a later video,
we'll look at how to add an actual database to our server,
but for now, the first thing we're going to do
is create a sort of fake database,
which will keep track of the data for our products,
as well as our users shopping cart.
And this fake database is going to consist of two things.
It's going to be an array of Json objects,
representing the available products on our site
and an array of objects representing our users cart
that we modify whenever specific routes are hit.
And this is going to be pretty similar
to what we saw on the front end.
The only difference here is going to be
that we're actually going to be making changes
to our fake data.
Now, unless you want to sit there and type out
a bunch of Json's data,
just feel free to copy and paste this data
from the end folder of the exercise files for this video.
So what we're going to do, is inside our server.js,
we're going to delete these existing end points,
well at least I am, if you want to keep them around
for reference, feel free to do that too.
The more what we're going to do is right above
where we create our app here,
we're going to paste all of that data.
And here's what that's going to look like for me.
There we go.
So we have, the cart items here,
and we have the products here,
pretty much the same data as our front end.
The only thing you might notice
is that there's one main change with this data.
And that's the way that we're working with image URLs here.
Instead of importing our images directly from their files
and setting them for the image URL property,
on our backend we're just providing a URL string like this.
Now, in order for this to work, we also have to copy
and paste the actual images from
our front end to our backend.
So let's head over to our front end here,
and we're going to copy the assets folder.
And we're going to go back to our backend
and paste that on the root level of our folder okay?
So we'll click paste and that'll put the assets right there.
And one thing is, let's just get rid of this logo.png thing,
we don't need that anymore.
Okay, so now that we've done that,
the next thing we're going to do
is define some new end points that we can send requests to,
in order to get this new data
then we just paste it from the server.
And note that the URL for all of our end points
is going to start with api.
This will be helpful for us down the road
when we start integrating our front and back ends.
But for now, just remember
that there's a reason why we're doing it this way.
So the first end point we're going to define here
is going to be an end point
for getting all of the products available on our site.
And this is actually going to be dead simple.
Here's what it's going to look like.
We're going to say app.get,
and then we're going to make a request to /api/products.
And then the callback here is going to take request
and response.
And it's simply going to say response.status200,
this is how we send a 200 response code,
in other words, letting the client know
that everything went okay.
And then we're going to say .Json,
which is sort of like that .send,
but it's used specifically for sending Json objects
and we're going to simply send, our products, array
that we pasted up at the top.
And that's it.
So that's the end point for getting all the products.
We'll test that in just a second.
The next thing we're going to do,
is we're going to create a new end point
for getting all of the items
that the user currently has in their cart.
So here's what that's going to look like.
It's going to be very similar to the products, end points.
We're going to say app.get/api/users.
And we're going to use a URL parameter here
it's going to be user ID and then /cart
and request and response.
And then we're just going to say response.status 200 Json,
and we're going to send back the cart items, fake data
that we pasted up at the top.
Now you might notice that this is almost identical
to the products endpoint
and that's mostly incidental for now.
Once we get to incorporating a database
into our backend later on in the course,
these two end points will actually
end up looking quite a bit different.
And the other thing that you might be wondering
is why we're bothering with this user Id URL parameter here
at the moment we're not even using right?
Well in the real world, our e-commerce app
would have a large number of different users
each with a unique ID
and all these users would be making requests
to this end point to get the products
in their own respective carts.
And this is actually not something
that we're going to delve into in this course,
since it involves incorporating user authentication
into our application, which, you know, goes a bit beyond
the scope of what I want to talk about here,
but for now, just remember
that even though the app we're going to build here
only has one user.
If we were to incorporate user authentication
into our app, this user Id URL parameter here would allow us
to keep the data for different users separate.
Anyway, there's one more end point that we're going to do now.
And that's the end point for getting data
for a single product from our server.
This will be the end point that we send requests to
from our product detail page.
So here's what that is going to look like,
We're going to say app.get,
and then we're going to say /api/products/
and then colon product Id.
And then what we're going to do is save request
and response.
And we're going to get the Id URL parameter,
which is going to look like this.
We're going to say const product ID equals request.params.
And we're going to say const product=products.find
And we're just going to find the product
who's Id matches the product Id URL parameter
that we got there okay?
So at this point, we could simply say response.status.Json
with this product that we got,
but what we're going to do instead
is something a tiny bit more complicated.
You see, there is a possibility that the user will try
and request a product that doesn't exist.
And in that case,
what we'll want to do is return a 404 status code.
So here's what we're going to do here.
We're going to check and see if the product exists
and to do that we say if product like that,
and if it does exist,
we're going to say, res.status 200.Json, product.
And otherwise, if the product does not exist,
we're going to say response.status 404.Json,
and we're just going to send back a message
that says something like could not find the product okay?
Cool so now that we have these three end points created,
let's test them with post-match.
So we have to restart our server,
which again, we can do by saying NPX babel-node
source, server.JS.
And then the first thing
we're going to to do is send a get request
to local host 8000/api/products
and hit send.
And that'll send us back all of our products,
the Json data for all of our different products on our site.
And the next one that we're going to test
is we're going to say api/user/
and then we'll just say one, two, three, four, five.
It doesn't really matter what ID we put here.
And then /cart and dips that gives us an error
that's because this should be users instead,
if we try again,
that will only give us the three items
that are in our user's cart, currently
inside the fake data anyway.
And then last but not least,
we're going to send a request to api/products/123,
and hit send.
Oops and I will get an error for that.
And that's because I just typed this fine thing wrong here.
So that should just be product with a little arrow after it.
Okay we'll trap that in parentheses.
And if we save it again
and we're going to have to run our server again.
Now, if we make this request,
we should see that we get back a specific product
and you can play around if you want to
with getting different products.