But how can we now test this?
Well, of course we can start our server
as a first step with NPM start,
and then we could visit local host 3000/todos.
This should work and I do get back my adjacent data here,
but of course I got no todos yet.
Now the problem is that we need to send
a post request to add todos
and we can't do this with the browser like this.
If we enter a URL, it's always a get request.
Of course we could now build some front-end, some views,
some front-end JavaScript code,
but that's not the idea here.
We want to build an API,
which can be connected to clients
and we'll do this later,
but which doesn't have a tight coupling
to any views that belong to it.
So therefore of course, adding a separate client,
a front-end web app would be a solution,
but since we don't have that yet we can use an extra tool
that helps us with testing APIs like this.
We can use a tool like Postman.
Though there also are many alternatives to this.
But Postman isn't the end of tool that makes testing
APIs very easy because it allows us to send,
get, and post and patch, and so on requests
from such an interface here.
So we don't have to build our own client,
instead, this IS a client.
Of course, a client regular users wouldn't use,
but a great client for us as a developer
to play around with APIs and test APIs.
Now to use Postman, we can Google
for postman download, and then here we can
download the postman app.
You currently don't need to sign up for that.
Here, I'm downloading it for Mac OS,
but it is available for all operating systems
and your operating system normally should be detected
automatically by default here.
So here I'll download Postman
and this can take a couple of seconds,
but once it finished, we can walk through
the installer process this download gives us
which is super straightforward.
There's nothing special to it.
And then once you installed it, you can start it.
Now it's super small here.
It'll get bigger in a second.
But on that starting screen,
you can create an account and sign in,
but actually in the bottom left corner,
you can also skip this and go right to the app,
at least right now when I'm recording this.
Now that this started, I'll go to its preferences
and actually switch to the dark theme here,
simply because I prefer that.
And then with all of that done,
we can go here in this middle panel
where I can click this plus,
which allows us to create a new request.
And I will actually toggle that sidebar
so that we see that a bit better.
So here we can now create a new request
by clicking on this plus in this middle area.
And then here we can choose which
kind of request it should be.
Now, I want to send a post request
since I want to create a new todo.
Then here we entered a URL and that should be
local host 3000/todos in our case here.
And it is important that you add the domain, of course,
because this is not part of our node web server.
It wouldn't know on which domain
this server is running otherwise,
and then the path which we have.
Now we can then configure this request.
We can, for example, go to body here
to add a body and we'll do this in a second.
But first of all, let's have a look at headers.
Here we see a couple of hidden headers
which are added by default,
which aren't too important to us.
We can keep them,
but we can also add our own headers.
For the moment though,
let's go to body and then there,
you don't see JSON here,
but you can actually choose raw.
And then there you get a dropdown
where you now can choose JSON.
And this allows you to add a JSON body to this request.
And now here we have to write
valid JSON,
which looks like JavaScript,
but as mentioned early in the course
has a couple of differences.
For example, all the keys and objects
have to be wrapped by double quotes.
String values also have to be wrapped by double quotes.
Single quotes are not allowed.
So here I then add curly braces, opening and closing.
And then here to add a todo.
If we have a look at our todos controller again,
we try to extract the text field
on the incoming request body.
So then for here, I'll add a text field now
and then any value of your choice.
Like for example, learn building web APIs.
This is now my todo.
By the way, you might notice that headers
now changed to eight headers.
If we go back there and we view the hidden headers,
we see that one very important header was added,
this content-type application JSON header
and this needs to be part of the request.
Otherwise our backend, our API,
wouldn't be able to parse this request body
successfully because you did learn
that this JSON middleware which we added
looks for this header for this content type header
and only parses the request body if that header
is part of the request.
So it's important that this header is added
and Postman adds it automatically for us
if we select adjacent body here.
Now with that, if I now click send here,
that should be all we need.
If we click send here,
we should get back a response
where we actually see our
response data that we prepared before.
We have our message here
and then the create a todo with our text
and the automatically generated ID.
And now if I go back to the browser
and load local host 3000/todos here
and therefore we send a get request to that
we also do find this todo here now.
Of course, we could also use Postman for this.
We can keep this post tab open here
so that we can easily send more post requests
by simply altering the body and clicking send again.
This will then send a new post request
with the same configuration as before,
but I'll click the plus here to add a new tab
and now send a get request to local host 3000/todos.
Here, since it's a get request,
we need no body, no special headers.
And if I click send this now indeed
also gives us all the todos.
And it's a bit nicer formatted than in the browser,
therefore I will use Postman for testing these APIs here.
By the way, of course, Postman has way more features.
You can definitely play around with it,
but we will use it here for testing our APIs.