And the last section we spoke about the goals of our application specifically what we want to build 2
and what we want to learn while building it. 3
One of the core aspects of the app is the fact that we have to work with the remote data API. 4
In this section we're going to investigate that API a little bit. 5
We're not going to make immediate use of it as we start application our application by I want you to 6
always be aware of how it works and kind of have it in your head how the API works. 7
As the functionality behind it is going to be pretty core on how we structure application. 8
So let's take a look at the API. 9
I have already created the API and published it online along with some documentation to it. 10
So in my browser I'm going to navigate to redux blog dot Heroku app dot com and this will open up the 11
documentation. 12
You should see a page just like this. 13
The documentation is here. 14
We're not going to refer back to the documentation very much as we go through the application but it's 15
going to be here just in case you ever want to come back and refer to how a particular route works. 16
So feel free to come back to this page at any time. 17
And you know look at a particular route. 18
So this documentation shows the four different routes that we have available to us on the API. 19
There are four different routes that we're going be working with as we're building the South location 20
. 21
Each of the endpoints is listed on the far left hand side along with the method of the request and then 22
an example of the complete u r l and a sample of the response that you would get from that endpoint 23
. 24
And then finally on the far right is a description of you know just a couple of notes on how that particular 25
end point works. 26
One very critical component is right up here at the top. 27
I'm going to zoom in just so it's nice and legible. 28
All the requests that you make to this API require a key parameter so you can see here on the end we've 29
got a question mark which means it's a part of the query string key equals 1 to 3. 30
You don't have to register for a key here. 31
All you have to do is provide a unique key so you can have a question Mark T equals want to use three 32
or ABC or you know elephants or really fancy telephone any random string of characters will do. 33
Just make sure you've got something on there. 34
The purpose of the key is just to make sure that your the blog posts that you create are sandbox from 35
other people and that's just done so that people aren't constantly accidentally deleting other people's 36
blog posts in here. 37
So it's just a kind of a simple form of authentication on the API. 38
OK so let's briefly talk about each of these four endpoints and then we're going to give them all a 39
spin each of the endpoints in here kind of roughly corresponds to a different screen inside of our application 40
. 41
The first one is the index route. 42
So we'll get a make a GET request to API slash posts. 43
This will return an array of blog posts. 44
You can see that each blog post is represented by a single object which has an ID a title and categories 45
where the categories are intended to be like. 46
You know the category of the blog post. 47
The second route here is a post to API slash posts. 48
So this is for creating a new blog post will post a some amount of to songes and plain and it will create 49
the blog post and then return it back to us. 50
The saved version of it which includes an ID next is a get to a route like API posts slash and then 51
an ID where the ID is some positive integer so it might be something like API posts slash 5 or post 52
slash 2000 or any integer that's valid ID and that return a single post to you. 53
Finally there is the delete option down here so we have API posts and then we delete a single record 54
. 55
So we're deleting a single blog post at a time. 56
For example a blog post with ID 5. 57
There is one thing that I really want to draw your attention very closely to as it's going to very deeply 58
impact the way we put our our application together. 59
Notice that the index route here has ID title in categories whereas getting a single post requests excuse 60
me getting a single blog post returns ID title categories and the blog posts content so this year just 61
note the difference here. 62
A good on the individual blog post includes the content the content is not included in the index request 63
. 64
So this is kind of a arbitrary requirement that I threw into the application just to kind of simulate 65
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
index route right here to make a request for your list of blog posts. 67
But when a user wants to see an individual post they're going to need to make a additional Ajax request 68
to fetch that. 69
You know the content for that particular post. 70
So again this is something you're not something we'd seen a normal everyday API but in you know real 71
world situations you'd run across arbitrary requirements like this just all the time. 72
OK SABMiller we've got a little bit of a rundown on the four different routes available to us. 73
Let's do a little bit of a demo with them so I can open up a new tab in Chrome here. 74
I'm going to click my apps button on the top left and I'm going to open post man right here. 75
Postman is a API or really an H CTP client. 76
It's just a tool that we can use to make arbitrary API requests to some end point. 77
You don't have to install paceman if you don't want to. 78
You know it's totally optional to you whether or not you want to follow along with this and get you 79
know a better idea. 80
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
search for post man and install it and should just take a minute or two. 82
So I can go ahead and open it up 83
and there we go. 84
All right. 85
So I've already got you arland they're going to take it out. 86
So here's the postman client. 87
It's pretty darn straightforward. 88
Up here you get a drop down and he's like the type of requests you want to make. 89
So the ones that we're going to really care about are get post and delete. 90
So going to sites get to start with and then we'll enter a u r l. 91
So the first type request I want to make is an index. 92
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
we need to add on our key. 94
So I going to click Paramo right here and then on the second row down here that says pacifically you 95
r l parameter T. 96
I'm going to say key equals 1 to and then just some random characters just to make it unique again. 97
Try to make your key unique. 98
Just as long as it's consistent between tween requests. 99
I know that that text is very small so I apologize if it's tough to read but you want to be looking 100
at this for a minute or two. 101
OK. 102
So we've got our you are all in here we've got the key. 103
Oh we have do now is click send. 104
And so it makes the request and then it prints whatever's returned right here you can see that we've 105
got a status of 200 OK which means that we successfully made the request and the response we get is 106
an empty array. 107
That means that we currently have no blog posts available to us. 108
No blog posts whatsoever. 109
So let's go ahead and add a blog post to make this all that more interesting. 110
I'm going to go back over to the documentation. 111
Note how creating a blog post is the same route but I'd change the type of the request to a post. 112
So let's flip back over. 113
I'm going to change it to a post right here and we have to actually post some blog post content so I 114
don't click on body and then RA. 115
And we're going to make sure that we have Jaison applications selected right here and then we're going 116
to put in some Jaison to simulate our blog post. 117
Again I'm sorry that the font size is so small right here. 118
Unfortunately I can't really zoom in that easily. 119
See maybe I can. 120
That will do. 121
So in here I'm going to add in some content that's going to simulate a blog post. 122
I'll add in title a great post 123
categories and this is just a string so we'll see other great comma content. 124
A great long blog post with some content to go along with it. 125
Make sure that both the keys and the values are both wrapped in double strings like so. 126
Otherwise you get an error or request back and there is the response. 127
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
we got a status of 201 created and it is signed in ID of 57 to our blog post which is very important 129
and we've got the title categories and content. 130
Great. 131
So let's try making our index request again. 132
I'm going to click on the saved request over here under the history so this is just the get request 133
that we just made the index route. 134
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
in our categories. 136
Awesome. 137
Just we want. 138
Let's go ahead and do the show route now. 139
So this is going to fetch a single post but it's going include the content. 140
Notice how the index route right here did not include the content. 141
So I'm going to go ahead and replace the L and make sure that instead of ID 5 right here 142
you'll want to replace it with the idea. 143
The blog post that you just created. 144
So mine for example is 57 so I can say PPO's slash 57 and then questionmark. 145
Blah blah blah blah blah. 146
So going to do a get an idea. 147
Here we go we've got the blog post my ID titled categories and I got my content as well. 148
Fantastic. 149
The last requests of want to make. 150
Just to test this out is a delete sunniness swap the type request to delete. 151
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
and send this. 153
And I got to 200 OK. 154
And I also got the blog post that was deleted back. 155
So now it should be able to do a request to hit index route and will get empty O'Reagan because we created 156
a post and then we immediately deleted it. 157
In addition I could do a show on ID 57 again and I should probably get a 404 not found. 158
Perfect just what I expected. 159
OK so one last word on the API. 160
It is throttled and by that I mean if I start making a ton of requests really quickly. 161
So if I clicked send some send you'll see that sometimes the response I get is instead of a 404. 162
I get retry later and that's just because I'm making too many requests. 163
The API you'll see I've got regular 4:29 too many requests. 164
The throttle amount is very generous. 165
It's only here since we're doing active development you know in case you actually make say 40000 requests 166
in one second it'll start giving you this throttle notice right here. 167
Otherwise it's a very generous throttle these shouldn't really you know you don't have to worry about 168
running into it. 169
Also don't forget to add the key here. 170
You don't have to sign up for it key it just has to be some unique tokens some unique string. 171
The only purpose of the key is to make sure that you are in kind of a separate bucket as everyone else's 172
blog posts. 173
And that's really just done so that you know. 174
Please please don't put any offensive words in here or anything like that. 175
I've automated or I've already put in a filter to filter out offensive words but you know we're all 176
adults here let's not put anything too ridiculous. 177
If you start seeing any offensive content or anything like that pop up feel free to drop me a line and 178
we'll fix you up with your own separate server to run with. 179
OK so just a little bit of a disclaimer there. 180
Now that we've got a better idea of how the API works let's go ahead and continue in the next section 181
.