1
00:00:02,060 --> 00:00:03,833
But how can we now test this?

2
00:00:04,730 --> 00:00:07,020
Well, of course we can start our server

3
00:00:07,020 --> 00:00:09,273
as a first step with NPM start,

4
00:00:10,160 --> 00:00:13,930
and then we could visit local host 3000/todos.

5
00:00:13,930 --> 00:00:17,380
This should work and I do get back my adjacent data here,

6
00:00:17,380 --> 00:00:20,120
but of course I got no todos yet.

7
00:00:20,120 --> 00:00:21,930
Now the problem is that we need to send

8
00:00:21,930 --> 00:00:24,120
a post request to add todos

9
00:00:24,120 --> 00:00:27,140
and we can't do this with the browser like this.

10
00:00:27,140 --> 00:00:30,581
If we enter a URL, it's always a get request.

11
00:00:30,581 --> 00:00:34,970
Of course we could now build some front-end, some views,

12
00:00:34,970 --> 00:00:37,330
some front-end JavaScript code,

13
00:00:37,330 --> 00:00:39,030
but that's not the idea here.

14
00:00:39,030 --> 00:00:40,550
We want to build an API,

15
00:00:40,550 --> 00:00:42,600
which can be connected to clients

16
00:00:42,600 --> 00:00:43,920
and we'll do this later,

17
00:00:43,920 --> 00:00:45,970
but which doesn't have a tight coupling

18
00:00:45,970 --> 00:00:48,370
to any views that belong to it.

19
00:00:48,370 --> 00:00:50,810
So therefore of course, adding a separate client,

20
00:00:50,810 --> 00:00:53,301
a front-end web app would be a solution,

21
00:00:53,301 --> 00:00:56,990
but since we don't have that yet we can use an extra tool

22
00:00:56,990 --> 00:00:59,860
that helps us with testing APIs like this.

23
00:00:59,860 --> 00:01:02,380
We can use a tool like Postman.

24
00:01:02,380 --> 00:01:05,459
Though there also are many alternatives to this.

25
00:01:05,459 --> 00:01:08,660
But Postman isn't the end of tool that makes testing

26
00:01:08,660 --> 00:01:11,560
APIs very easy because it allows us to send,

27
00:01:11,560 --> 00:01:14,780
get, and post and patch, and so on requests

28
00:01:14,780 --> 00:01:16,770
from such an interface here.

29
00:01:16,770 --> 00:01:18,920
So we don't have to build our own client,

30
00:01:18,920 --> 00:01:21,280
instead, this IS a client.

31
00:01:21,280 --> 00:01:24,410
Of course, a client regular users wouldn't use,

32
00:01:24,410 --> 00:01:26,910
but a great client for us as a developer

33
00:01:26,910 --> 00:01:30,830
to play around with APIs and test APIs.

34
00:01:30,830 --> 00:01:32,980
Now to use Postman, we can Google

35
00:01:32,980 --> 00:01:36,450
for postman download, and then here we can

36
00:01:36,450 --> 00:01:38,270
download the postman app.

37
00:01:38,270 --> 00:01:40,990
You currently don't need to sign up for that.

38
00:01:40,990 --> 00:01:43,050
Here, I'm downloading it for Mac OS,

39
00:01:43,050 --> 00:01:45,600
but it is available for all operating systems

40
00:01:45,600 --> 00:01:48,530
and your operating system normally should be detected

41
00:01:48,530 --> 00:01:51,070
automatically by default here.

42
00:01:51,070 --> 00:01:53,310
So here I'll download Postman

43
00:01:53,310 --> 00:01:55,380
and this can take a couple of seconds,

44
00:01:55,380 --> 00:01:57,930
but once it finished, we can walk through

45
00:01:57,930 --> 00:02:01,840
the installer process this download gives us

46
00:02:01,840 --> 00:02:03,620
which is super straightforward.

47
00:02:03,620 --> 00:02:05,120
There's nothing special to it.

48
00:02:06,750 --> 00:02:09,289
And then once you installed it, you can start it.

49
00:02:09,289 --> 00:02:10,820
Now it's super small here.

50
00:02:10,820 --> 00:02:12,600
It'll get bigger in a second.

51
00:02:12,600 --> 00:02:14,410
But on that starting screen,

52
00:02:14,410 --> 00:02:16,480
you can create an account and sign in,

53
00:02:16,480 --> 00:02:18,790
but actually in the bottom left corner,

54
00:02:18,790 --> 00:02:21,560
you can also skip this and go right to the app,

55
00:02:21,560 --> 00:02:24,130
at least right now when I'm recording this.

56
00:02:24,130 --> 00:02:27,651
Now that this started, I'll go to its preferences

57
00:02:27,651 --> 00:02:31,190
and actually switch to the dark theme here,

58
00:02:31,190 --> 00:02:33,023
simply because I prefer that.

59
00:02:34,100 --> 00:02:36,260
And then with all of that done,

60
00:02:36,260 --> 00:02:39,480
we can go here in this middle panel

61
00:02:39,480 --> 00:02:41,540
where I can click this plus,

62
00:02:41,540 --> 00:02:43,840
which allows us to create a new request.

63
00:02:43,840 --> 00:02:46,230
And I will actually toggle that sidebar

64
00:02:46,230 --> 00:02:48,960
so that we see that a bit better.

65
00:02:48,960 --> 00:02:50,810
So here we can now create a new request

66
00:02:50,810 --> 00:02:53,713
by clicking on this plus in this middle area.

67
00:02:54,700 --> 00:02:55,940
And then here we can choose which

68
00:02:55,940 --> 00:02:58,040
kind of request it should be.

69
00:02:58,040 --> 00:03:00,210
Now, I want to send a post request

70
00:03:00,210 --> 00:03:03,420
since I want to create a new todo.

71
00:03:03,420 --> 00:03:06,510
Then here we entered a URL and that should be

72
00:03:06,510 --> 00:03:10,800
local host 3000/todos in our case here.

73
00:03:10,800 --> 00:03:13,810
And it is important that you add the domain, of course,

74
00:03:13,810 --> 00:03:16,310
because this is not part of our node web server.

75
00:03:16,310 --> 00:03:18,352
It wouldn't know on which domain

76
00:03:18,352 --> 00:03:21,380
this server is running otherwise,

77
00:03:21,380 --> 00:03:23,073
and then the path which we have.

78
00:03:24,590 --> 00:03:26,760
Now we can then configure this request.

79
00:03:26,760 --> 00:03:28,380
We can, for example, go to body here

80
00:03:28,380 --> 00:03:31,410
to add a body and we'll do this in a second.

81
00:03:31,410 --> 00:03:34,360
But first of all, let's have a look at headers.

82
00:03:34,360 --> 00:03:36,640
Here we see a couple of hidden headers

83
00:03:36,640 --> 00:03:38,700
which are added by default,

84
00:03:38,700 --> 00:03:40,610
which aren't too important to us.

85
00:03:40,610 --> 00:03:42,370
We can keep them,

86
00:03:42,370 --> 00:03:44,883
but we can also add our own headers.

87
00:03:45,840 --> 00:03:46,673
For the moment though,

88
00:03:46,673 --> 00:03:49,460
let's go to body and then there,

89
00:03:49,460 --> 00:03:51,320
you don't see JSON here,

90
00:03:51,320 --> 00:03:54,120
but you can actually choose raw.

91
00:03:54,120 --> 00:03:56,200
And then there you get a dropdown

92
00:03:56,200 --> 00:03:58,560
where you now can choose JSON.

93
00:03:58,560 --> 00:04:01,823
And this allows you to add a JSON body to this request.

94
00:04:02,730 --> 00:04:04,340
And now here we have to write

95
00:04:04,340 --> 00:04:05,420
valid JSON,

96
00:04:05,420 --> 00:04:07,240
which looks like JavaScript,

97
00:04:07,240 --> 00:04:09,220
but as mentioned early in the course

98
00:04:09,220 --> 00:04:10,960
has a couple of differences.

99
00:04:10,960 --> 00:04:12,930
For example, all the keys and objects

100
00:04:12,930 --> 00:04:15,040
have to be wrapped by double quotes.

101
00:04:15,040 --> 00:04:18,320
String values also have to be wrapped by double quotes.

102
00:04:18,320 --> 00:04:20,223
Single quotes are not allowed.

103
00:04:21,700 --> 00:04:25,050
So here I then add curly braces, opening and closing.

104
00:04:25,050 --> 00:04:26,933
And then here to add a todo.

105
00:04:27,970 --> 00:04:31,140
If we have a look at our todos controller again,

106
00:04:31,140 --> 00:04:33,430
we try to extract the text field

107
00:04:33,430 --> 00:04:35,093
on the incoming request body.

108
00:04:36,660 --> 00:04:38,581
So then for here, I'll add a text field now

109
00:04:38,581 --> 00:04:41,840
and then any value of your choice.

110
00:04:41,840 --> 00:04:44,863
Like for example, learn building web APIs.

111
00:04:45,700 --> 00:04:46,700
This is now my todo.

112
00:04:48,440 --> 00:04:50,380
By the way, you might notice that headers

113
00:04:50,380 --> 00:04:52,670
now changed to eight headers.

114
00:04:52,670 --> 00:04:55,660
If we go back there and we view the hidden headers,

115
00:04:55,660 --> 00:04:59,070
we see that one very important header was added,

116
00:04:59,070 --> 00:05:02,910
this content-type application JSON header

117
00:05:02,910 --> 00:05:06,360
and this needs to be part of the request.

118
00:05:06,360 --> 00:05:08,820
Otherwise our backend, our API,

119
00:05:08,820 --> 00:05:11,230
wouldn't be able to parse this request body

120
00:05:11,230 --> 00:05:14,010
successfully because you did learn

121
00:05:14,010 --> 00:05:16,470
that this JSON middleware which we added

122
00:05:16,470 --> 00:05:20,090
looks for this header for this content type header

123
00:05:20,090 --> 00:05:22,790
and only parses the request body if that header

124
00:05:22,790 --> 00:05:25,010
is part of the request.

125
00:05:25,010 --> 00:05:27,230
So it's important that this header is added

126
00:05:27,230 --> 00:05:29,690
and Postman adds it automatically for us

127
00:05:29,690 --> 00:05:32,003
if we select adjacent body here.

128
00:05:33,890 --> 00:05:38,261
Now with that, if I now click send here,

129
00:05:38,261 --> 00:05:39,440
that should be all we need.

130
00:05:39,440 --> 00:05:41,350
If we click send here,

131
00:05:41,350 --> 00:05:43,810
we should get back a response

132
00:05:43,810 --> 00:05:45,310
where we actually see our

133
00:05:45,310 --> 00:05:48,080
response data that we prepared before.

134
00:05:48,080 --> 00:05:49,760
We have our message here

135
00:05:49,760 --> 00:05:52,260
and then the create a todo with our text

136
00:05:52,260 --> 00:05:54,683
and the automatically generated ID.

137
00:05:55,550 --> 00:05:57,370
And now if I go back to the browser

138
00:05:57,370 --> 00:06:00,507
and load local host 3000/todos here

139
00:06:00,507 --> 00:06:02,730
and therefore we send a get request to that

140
00:06:02,730 --> 00:06:05,313
we also do find this todo here now.

141
00:06:07,030 --> 00:06:09,890
Of course, we could also use Postman for this.

142
00:06:09,890 --> 00:06:12,720
We can keep this post tab open here

143
00:06:12,720 --> 00:06:15,290
so that we can easily send more post requests

144
00:06:15,290 --> 00:06:18,230
by simply altering the body and clicking send again.

145
00:06:18,230 --> 00:06:20,170
This will then send a new post request

146
00:06:20,170 --> 00:06:22,660
with the same configuration as before,

147
00:06:22,660 --> 00:06:25,440
but I'll click the plus here to add a new tab

148
00:06:25,440 --> 00:06:30,440
and now send a get request to local host 3000/todos.

149
00:06:31,380 --> 00:06:33,220
Here, since it's a get request,

150
00:06:33,220 --> 00:06:35,920
we need no body, no special headers.

151
00:06:35,920 --> 00:06:38,290
And if I click send this now indeed

152
00:06:38,290 --> 00:06:40,650
also gives us all the todos.

153
00:06:40,650 --> 00:06:43,570
And it's a bit nicer formatted than in the browser,

154
00:06:43,570 --> 00:06:47,830
therefore I will use Postman for testing these APIs here.

155
00:06:47,830 --> 00:06:51,370
By the way, of course, Postman has way more features.

156
00:06:51,370 --> 00:06:53,340
You can definitely play around with it,

157
00:06:53,340 --> 00:06:56,323
but we will use it here for testing our APIs.