Welcome back.
In this video we're going to talk about RESTful API.
Now what is that?
A REST API defines a set of functions which developers can perform requests and receive responses
via a HTTP protocol such as GET, POST, PUT, DELETE – something we've talked about.
Remember how I said a web browser sends a request and just hopes that the server returns what the browser
asked for.
A Google server can send us whatever it wants.
It doesn't have to follow the rules that perhaps the web browser sets. With RESTful API we're able to
create an API that is RESTful – something that follows the rules that everybody can agree on so that we
have compatibility between different systems.
So a RESTful API is an architectural style and it's an approach to communications; an agreed upon set
of rules so everyone plays nicely. A RESTful API users GET to receive a resource, PUT to change the state
or update a resource, a POST that creates a resource, and a DELETE to remove it.
And that's something that we've already talked about, and the RESTful API is a way to define our server
so that it specifies what it can provide and how to use it.
In other words the URL parameters should make sense.
For example if we're doing '/profile' – well, we expect that if it's a GET request we're going to
get a profile.
If it's a POST request we're going to add a profile.
If it's a PUT perhaps we're updating the profile, and this URL makes sense.
And you can think of this as the noun of what we want to receive. The HTTP request
is the verb and everything after the slash [/] is the noun.
Now finally REST APis are something called 'stateless' – meaning that calls can be made independently
of one another and each call contains all the data necessary to complete itself successfully. A server
doesn't need to keep memorizing things.
Each request that comes in has enough information that the server can respond with, regardless of who
that person is.
So in this example let's build a small little app that has a RESTful API.
Let's make this a lot smaller.
There you go – we have our previous example – we'll start the server and talk about some of the things that
we can do here.
Well when we look at a GET request this GET request – let's actually remove this as well just so it's
not too messy.
This GET request will have a request object that we receive.
Now this request object can have a few things – we can have
request dot query [req.query]
we can have request dot body [req.body], which we saw in the previous video.
We also have request dot header [req.header], again something that we've seen before and also request dot params [req.params] and
this is probably the most used properties of request.
So let's go through it one by one.
'req.query' is what we get when we do a GET query.
For example within here, if I do a
'console.log(req.query)'
Well I can go to localhost and in here – something that we've already talked about – I can add a question
mark
to say that this is a query string and say 'name=andrei&age=31'.
I press Enter
go back and I see here that I have 'name' is 'andrei',
'age' is '31' because I have access to the query string [console.log(req.query)].
We also have request body [req.body], which again we've talked about – using something like your 'urlencoded' or 'JSON'
body-parsers, we can add that middleware to receive whatever the request sends in the body.
We also have request dot header [req.header].
So if I 'console.log(req.header)' well this time using Postman I can say in the header – and
it has a nice Headers tab - you see that we have Content-Type
'application/json', which automatically does it because the last request was a JSON request.
But I can put in anything here I can say 'name' is 'andrei' – or this time just to change it we'll say 'sally'
if I send this – and this is a DELETE method let's make sure it's a GET method –
If I send this
I see that now (req.header) has all these headers but also – name: 'sally'.
Very cool.
And then finally we also have something called (req.params)
And if 'console.log(req.params)' – this is a syntax where you use the parameters of the URL.
If I do the semicolon and then let's say 'id' ['/:id'] – I save this and now we have access to whatever the parameter
is of the URL.
So let's just say '1234' and I'll remove the header for now.
If I 'Send' I now have { id: '1234' } right.
Awesome.
And you can have as many parameters as you want and you can nest them but we have access to our request
information, which is fantastic.
Now when we send a response we also want to have a bit of an option as to what we want to send. Well with
a response we can say that with sending
we also want to respond with a status, let's say a status of 404 and we could say send("not found")
if I refresh and send now, I get 'not found' with a status of 404.
Again if I go back to my browser and refresh
I have in my Network tab a 404 status.
All right.
Perfect.
And again you customize – so that we have a RESTful API –
the GET, POST, PUT, and DELETE to follow the rules that the web browsers expect.
Now one last thing.
Up until now we're just sending data back and forth.
But what if we want to serve something called static assets that is 'index.html', CSS file, JavaScript file
– that's more realistic right?
Usually we want an index file and having our app run – well that's very easy to do.
We can create it within this project – let's just do a new folder called public.
And this name might be familiar to you because when we did 'create-react-app' public was there and it
held all our static files.
So in here let's just do a new file – 'index.html'.
Now within this public file we'll just do a quick
HTML document that says 'hi'.
And within here I'll say 'it's working'.
In order to get Express to send static files
we can just remove this for now
just to keep this clean and do another middleware 'app.use()'.
And this comes with Express already we do 'express.static()' and within here we give it the file path.
In our case we know that we want to get the '__dirname', which we've seen in a previous video, which is the
directory of where we are; in our case its node and we want to go to the public folder so we do 'public'.
This is going to print out 'node'
then 'public'.
So now if I save this and go back to our GET request I get 'it's working'.
Let me make that bigger so you can see.
And if we open up our Console and our Network tab – I refresh I get – ooh, let's do a hard refresh – I get '200'
I get 'text/html'
And the response is my HTML file.
And if I had a CSS link here it will load the CSS in my public folder.
If I had a JavaScript file then it will load it because within the body we can add a script tag.
And this is a server that we just built that serves simple static assets.
And as soon as we want to have something like an API where we interact with it we do GET, POST, PUT
DELETE
that's when we start using our methods that we learned previously.
Very cool.
Now that we have this basic foundation we're going to build our server for our app – the app that we build
in our final project, our image recognition app?
Well we're going to build the back-end for that.
I'll see in the next one. Bye-bye