1

00:00:00,950  -->  00:00:05,850
And the last section we spoke about the goals of our application specifically what we want to build

2

00:00:06,120  -->  00:00:08,620
and what we want to learn while building it.

3

00:00:08,640  -->  00:00:14,030
One of the core aspects of the app is the fact that we have to work with the remote data API.

4

00:00:14,310  -->  00:00:17,820
In this section we're going to investigate that API a little bit.

5

00:00:17,820  -->  00:00:22,050
We're not going to make immediate use of it as we start application our application by I want you to

6

00:00:22,050  -->  00:00:27,200
always be aware of how it works and kind of have it in your head how the API works.

7

00:00:27,480  -->  00:00:34,460
As the functionality behind it is going to be pretty core on how we structure application.

8

00:00:34,500  -->  00:00:36,600
So let's take a look at the API.

9

00:00:37,110  -->  00:00:43,000
I have already created the API and published it online along with some documentation to it.

10

00:00:43,020  -->  00:00:52,410
So in my browser I'm going to navigate to redux blog dot Heroku app dot com and this will open up the

11

00:00:52,410  -->  00:00:53,190
documentation.

12

00:00:53,190  -->  00:00:56,170
You should see a page just like this.

13

00:00:56,220  -->  00:00:57,810
The documentation is here.

14

00:00:57,810  -->  00:01:02,850
We're not going to refer back to the documentation very much as we go through the application but it's

15

00:01:02,850  -->  00:01:07,770
going to be here just in case you ever want to come back and refer to how a particular route works.

16

00:01:07,770  -->  00:01:10,410
So feel free to come back to this page at any time.

17

00:01:10,620  -->  00:01:13,860
And you know look at a particular route.

18

00:01:14,760  -->  00:01:20,780
So this documentation shows the four different routes that we have available to us on the API.

19

00:01:20,790  -->  00:01:24,960
There are four different routes that we're going be working with as we're building the South location

20

00:01:24,960  -->  00:01:25,700
.

21

00:01:26,430  -->  00:01:32,510
Each of the endpoints is listed on the far left hand side along with the method of the request and then

22

00:01:32,530  -->  00:01:38,310
an example of the complete u r l and a sample of the response that you would get from that endpoint

23

00:01:38,410  -->  00:01:38,890
.

24

00:01:38,970  -->  00:01:45,140
And then finally on the far right is a description of you know just a couple of notes on how that particular

25

00:01:45,140  -->  00:01:47,420
end point works.

26

00:01:47,460  -->  00:01:51,660
One very critical component is right up here at the top.

27

00:01:51,660  -->  00:01:54,360
I'm going to zoom in just so it's nice and legible.

28

00:01:54,720  -->  00:02:01,440
All the requests that you make to this API require a key parameter so you can see here on the end we've

29

00:02:01,440  -->  00:02:07,530
got a question mark which means it's a part of the query string key equals 1 to 3.

30

00:02:07,650  -->  00:02:10,050
You don't have to register for a key here.

31

00:02:10,050  -->  00:02:17,160
All you have to do is provide a unique key so you can have a question Mark T equals want to use three

32

00:02:17,250  -->  00:02:26,070
or ABC or you know elephants or really fancy telephone any random string of characters will do.

33

00:02:26,100  -->  00:02:28,480
Just make sure you've got something on there.

34

00:02:28,500  -->  00:02:35,070
The purpose of the key is just to make sure that your the blog posts that you create are sandbox from

35

00:02:35,070  -->  00:02:40,500
other people and that's just done so that people aren't constantly accidentally deleting other people's

36

00:02:40,890  -->  00:02:41,850
blog posts in here.

37

00:02:41,850  -->  00:02:46,850
So it's just a kind of a simple form of authentication on the API.

38

00:02:48,240  -->  00:02:53,250
OK so let's briefly talk about each of these four endpoints and then we're going to give them all a

39

00:02:53,250  -->  00:03:00,030
spin each of the endpoints in here kind of roughly corresponds to a different screen inside of our application

40

00:03:00,030  -->  00:03:00,580
.

41

00:03:00,600  -->  00:03:03,170
The first one is the index route.

42

00:03:03,180  -->  00:03:08,940
So we'll get a make a GET request to API slash posts.

43

00:03:09,450  -->  00:03:12,720
This will return an array of blog posts.

44

00:03:12,720  -->  00:03:20,610
You can see that each blog post is represented by a single object which has an ID a title and categories

45

00:03:20,700  -->  00:03:22,810
where the categories are intended to be like.

46

00:03:23,090  -->  00:03:26,750
You know the category of the blog post.

47

00:03:27,510  -->  00:03:32,230
The second route here is a post to API slash posts.

48

00:03:32,280  -->  00:03:39,210
So this is for creating a new blog post will post a some amount of to songes and plain and it will create

49

00:03:39,210  -->  00:03:42,120
the blog post and then return it back to us.

50

00:03:42,120  -->  00:03:52,590
The saved version of it which includes an ID next is a get to a route like API posts slash and then

51

00:03:52,650  -->  00:04:00,360
an ID where the ID is some positive integer so it might be something like API posts slash 5 or post

52

00:04:00,360  -->  00:04:09,410
slash 2000 or any integer that's valid ID and that return a single post to you.

53

00:04:09,420  -->  00:04:16,930
Finally there is the delete option down here so we have API posts and then we delete a single record

54

00:04:16,940  -->  00:04:16,980
.

55

00:04:17,040  -->  00:04:19,410
So we're deleting a single blog post at a time.

56

00:04:19,410  -->  00:04:24,160
For example a blog post with ID 5.

57

00:04:24,580  -->  00:04:29,820
There is one thing that I really want to draw your attention very closely to as it's going to very deeply

58

00:04:30,060  -->  00:04:34,290
impact the way we put our our application together.

59

00:04:34,290  -->  00:04:44,850
Notice that the index route here has ID title in categories whereas getting a single post requests excuse

60

00:04:44,850  -->  00:04:55,400
me getting a single blog post returns ID title categories and the blog posts content so this year just

61

00:04:55,400  -->  00:04:56,610
note the difference here.

62

00:04:56,750  -->  00:05:04,250
A good on the individual blog post includes the content the content is not included in the index request

63

00:05:04,260  -->  00:05:04,470
.

64

00:05:04,670  -->  00:05:10,430
So this is kind of a arbitrary requirement that I threw into the application just to kind of simulate

65

00:05:10,580  -->  00:05:17,240
an API that might not work quite how we intended to be or how we would like to work so we can use the

66

00:05:17,240  -->  00:05:21,770
index route right here to make a request for your list of blog posts.

67

00:05:22,040  -->  00:05:27,650
But when a user wants to see an individual post they're going to need to make a additional Ajax request

68

00:05:27,770  -->  00:05:28,690
to fetch that.

69

00:05:28,760  -->  00:05:31,190
You know the content for that particular post.

70

00:05:31,190  -->  00:05:37,670
So again this is something you're not something we'd seen a normal everyday API but in you know real

71

00:05:37,670  -->  00:05:42,470
world situations you'd run across arbitrary requirements like this just all the time.

72

00:05:43,160  -->  00:05:48,050
OK SABMiller we've got a little bit of a rundown on the four different routes available to us.

73

00:05:48,050  -->  00:05:57,200
Let's do a little bit of a demo with them so I can open up a new tab in Chrome here.

74

00:05:57,320  -->  00:06:02,140
I'm going to click my apps button on the top left and I'm going to open post man right here.

75

00:06:02,180  -->  00:06:06,130
Postman is a API or really an H CTP client.

76

00:06:06,140  -->  00:06:12,560
It's just a tool that we can use to make arbitrary API requests to some end point.

77

00:06:12,680  -->  00:06:15,060
You don't have to install paceman if you don't want to.

78

00:06:15,170  -->  00:06:18,780
You know it's totally optional to you whether or not you want to follow along with this and get you

79

00:06:18,780  -->  00:06:20,000
know a better idea.

80

00:06:20,000  -->  00:06:26,960
So if you want to just watch if you want to grab postman you can go to the web store over here and just

81

00:06:26,960  -->  00:06:30,580
search for post man and install it and should just take a minute or two.

82

00:06:30,920  -->  00:06:32,720
So I can go ahead and open it up

83

00:06:41,300  -->  00:06:42,490
and there we go.

84

00:06:42,920  -->  00:06:43,370
All right.

85

00:06:43,520  -->  00:06:47,130
So I've already got you arland they're going to take it out.

86

00:06:47,150  -->  00:06:49,000
So here's the postman client.

87

00:06:49,010  -->  00:06:51,060
It's pretty darn straightforward.

88

00:06:51,260  -->  00:06:55,250
Up here you get a drop down and he's like the type of requests you want to make.

89

00:06:55,280  -->  00:07:00,330
So the ones that we're going to really care about are get post and delete.

90

00:07:01,130  -->  00:07:04,910
So going to sites get to start with and then we'll enter a u r l.

91

00:07:05,120  -->  00:07:08,450
So the first type request I want to make is an index.

92

00:07:08,450  -->  00:07:16,280
So I got a copy of this example you are l u r l right here and I'm going to put it in here and then

93

00:07:16,280  -->  00:07:18,740
we need to add on our key.

94

00:07:19,040  -->  00:07:25,010
So I going to click Paramo right here and then on the second row down here that says pacifically you

95

00:07:25,010  -->  00:07:26,660
r l parameter T.

96

00:07:26,990  -->  00:07:34,080
I'm going to say key equals 1 to and then just some random characters just to make it unique again.

97

00:07:34,100  -->  00:07:35,620
Try to make your key unique.

98

00:07:35,630  -->  00:07:39,320
Just as long as it's consistent between tween requests.

99

00:07:39,320  -->  00:07:44,550
I know that that text is very small so I apologize if it's tough to read but you want to be looking

100

00:07:44,550  -->  00:07:46,200
at this for a minute or two.

101

00:07:46,730  -->  00:07:47,120
OK.

102

00:07:47,120  -->  00:07:50,370
So we've got our you are all in here we've got the key.

103

00:07:50,510  -->  00:07:52,880
Oh we have do now is click send.

104

00:07:53,900  -->  00:07:57,820
And so it makes the request and then it prints whatever's returned right here you can see that we've

105

00:07:57,820  -->  00:08:03,680
got a status of 200 OK which means that we successfully made the request and the response we get is

106

00:08:03,740  -->  00:08:04,770
an empty array.

107

00:08:04,790  -->  00:08:08,020
That means that we currently have no blog posts available to us.

108

00:08:08,030  -->  00:08:09,800
No blog posts whatsoever.

109

00:08:10,370  -->  00:08:15,140
So let's go ahead and add a blog post to make this all that more interesting.

110

00:08:15,140  -->  00:08:18,280
I'm going to go back over to the documentation.

111

00:08:18,350  -->  00:08:26,720
Note how creating a blog post is the same route but I'd change the type of the request to a post.

112

00:08:27,260  -->  00:08:28,950
So let's flip back over.

113

00:08:28,970  -->  00:08:34,900
I'm going to change it to a post right here and we have to actually post some blog post content so I

114

00:08:34,900  -->  00:08:37,880
don't click on body and then RA.

115

00:08:38,390  -->  00:08:43,610
And we're going to make sure that we have Jaison applications selected right here and then we're going

116

00:08:43,610  -->  00:08:46,530
to put in some Jaison to simulate our blog post.

117

00:08:46,700  -->  00:08:50,300
Again I'm sorry that the font size is so small right here.

118

00:08:50,450  -->  00:08:52,670
Unfortunately I can't really zoom in that easily.

119

00:08:52,780  -->  00:08:55,440
See maybe I can.

120

00:08:55,540  -->  00:08:57,160
That will do.

121

00:08:57,470  -->  00:09:02,470
So in here I'm going to add in some content that's going to simulate a blog post.

122

00:09:02,910  -->  00:09:06,530
I'll add in title a great post

123

00:09:09,080  -->  00:09:17,630
categories and this is just a string so we'll see other great comma content.

124

00:09:18,650  -->  00:09:26,440
A great long blog post with some content to go along with it.

125

00:09:26,660  -->  00:09:31,560
Make sure that both the keys and the values are both wrapped in double strings like so.

126

00:09:31,580  -->  00:09:35,890
Otherwise you get an error or request back and there is the response.

127

00:09:36,410  -->  00:09:43,130
OK so we've got the body of our post here so I'm going to go ahead and send it and you can see that

128

00:09:43,130  -->  00:09:50,420
we got a status of 201 created and it is signed in ID of 57 to our blog post which is very important

129

00:09:50,840  -->  00:09:53,640
and we've got the title categories and content.

130

00:09:53,660  -->  00:09:55,400
Great.

131

00:09:55,400  -->  00:09:58,240
So let's try making our index request again.

132

00:09:58,250  -->  00:10:03,800
I'm going to click on the saved request over here under the history so this is just the get request

133

00:10:03,800  -->  00:10:05,820
that we just made the index route.

134

00:10:06,290  -->  00:10:12,890
I'm going to go ahead and send it now and you can see it now we've got the response of ID 57 her title

135

00:10:12,950  -->  00:10:14,170
in our categories.

136

00:10:14,360  -->  00:10:14,750
Awesome.

137

00:10:14,750  -->  00:10:16,010
Just we want.

138

00:10:16,700  -->  00:10:20,560
Let's go ahead and do the show route now.

139

00:10:20,720  -->  00:10:25,610
So this is going to fetch a single post but it's going include the content.

140

00:10:25,610  -->  00:10:29,340
Notice how the index route right here did not include the content.

141

00:10:30,110  -->  00:10:37,430
So I'm going to go ahead and replace the L and make sure that instead of ID 5 right here

142

00:10:41,480  -->  00:10:43,150
you'll want to replace it with the idea.

143

00:10:43,160  -->  00:10:44,990
The blog post that you just created.

144

00:10:44,990  -->  00:10:53,030
So mine for example is 57 so I can say PPO's slash 57 and then questionmark.

145

00:10:53,090  -->  00:10:54,580
Blah blah blah blah blah.

146

00:10:55,090  -->  00:10:57,340
So going to do a get an idea.

147

00:10:57,350  -->  00:11:02,730
Here we go we've got the blog post my ID titled categories and I got my content as well.

148

00:11:02,750  -->  00:11:04,820
Fantastic.

149

00:11:04,830  -->  00:11:06,400
The last requests of want to make.

150

00:11:06,560  -->  00:11:12,930
Just to test this out is a delete sunniness swap the type request to delete.

151

00:11:13,220  -->  00:11:18,530
I don't need to change the URL here at all because I'm still targeting blog post 57 and I'll go ahead

152

00:11:18,530  -->  00:11:19,690
and send this.

153

00:11:20,090  -->  00:11:21,610
And I got to 200 OK.

154

00:11:21,710  -->  00:11:26,790
And I also got the blog post that was deleted back.

155

00:11:27,070  -->  00:11:35,780
So now it should be able to do a request to hit index route and will get empty O'Reagan because we created

156

00:11:35,780  -->  00:11:39,020
a post and then we immediately deleted it.

157

00:11:39,020  -->  00:11:46,120
In addition I could do a show on ID 57 again and I should probably get a 404 not found.

158

00:11:46,160  -->  00:11:48,950
Perfect just what I expected.

159

00:11:49,700  -->  00:11:52,250
OK so one last word on the API.

160

00:11:52,290  -->  00:11:58,310
It is throttled and by that I mean if I start making a ton of requests really quickly.

161

00:11:58,310  -->  00:12:04,700
So if I clicked send some send you'll see that sometimes the response I get is instead of a 404.

162

00:12:04,730  -->  00:12:08,990
I get retry later and that's just because I'm making too many requests.

163

00:12:08,990  -->  00:12:13,520
The API you'll see I've got regular 4:29 too many requests.

164

00:12:13,850  -->  00:12:16,050
The throttle amount is very generous.

165

00:12:16,070  -->  00:12:23,450
It's only here since we're doing active development you know in case you actually make say 40000 requests

166

00:12:23,450  -->  00:12:28,790
in one second it'll start giving you this throttle notice right here.

167

00:12:28,790  -->  00:12:32,840
Otherwise it's a very generous throttle these shouldn't really you know you don't have to worry about

168

00:12:33,140  -->  00:12:34,790
running into it.

169

00:12:34,790  -->  00:12:37,930
Also don't forget to add the key here.

170

00:12:37,940  -->  00:12:42,790
You don't have to sign up for it key it just has to be some unique tokens some unique string.

171

00:12:42,830  -->  00:12:49,790
The only purpose of the key is to make sure that you are in kind of a separate bucket as everyone else's

172

00:12:49,820  -->  00:12:50,710
blog posts.

173

00:12:50,900  -->  00:12:53,320
And that's really just done so that you know.

174

00:12:53,550  -->  00:13:00,130
Please please don't put any offensive words in here or anything like that.

175

00:13:00,500  -->  00:13:05,660
I've automated or I've already put in a filter to filter out offensive words but you know we're all

176

00:13:05,660  -->  00:13:09,340
adults here let's not put anything too ridiculous.

177

00:13:09,470  -->  00:13:14,780
If you start seeing any offensive content or anything like that pop up feel free to drop me a line and

178

00:13:14,780  -->  00:13:18,090
we'll fix you up with your own separate server to run with.

179

00:13:18,440  -->  00:13:21,330
OK so just a little bit of a disclaimer there.

180

00:13:21,410  -->  00:13:26,750
Now that we've got a better idea of how the API works let's go ahead and continue in the next section

181

00:13:26,760  -->  00:13:26,830
.