1 00:00:00,900 --> 00:00:05,340 Unless section we spend some time to talk about the goals of our application including what we want 2 00:00:05,340 --> 00:00:08,840 to build and exactly what we want to learn while building it. 3 00:00:08,850 --> 00:00:14,250 Now one of the core aspects of this application is the ability to save and then later retrieve blog 4 00:00:14,250 --> 00:00:19,440 posts in this section aren't a little bit of time to talk to you a little bit about exactly how we're 5 00:00:19,440 --> 00:00:23,220 going to save these blog posts to some remote API. 6 00:00:23,220 --> 00:00:27,970 So first thing we'll do is take a look at the general architecture that we're going to use here. 7 00:00:28,470 --> 00:00:33,660 When a user visits our page or when they start up our application they're going to load up our redux 8 00:00:33,660 --> 00:00:37,670 application are reacting redux application into their web browser. 9 00:00:37,980 --> 00:00:43,410 The instant that the application loads up inside their browser We want to show the user a list of blog 10 00:00:43,410 --> 00:00:44,000 posts. 11 00:00:44,070 --> 00:00:50,730 So presumably we're gonna have to somehow source or find a list of blog posts to show to the user to 12 00:00:50,730 --> 00:00:52,140 store all of these blog posts. 13 00:00:52,140 --> 00:00:58,320 We're going to make use of an API that I've already taken the liberty of setting up for this application. 14 00:00:58,320 --> 00:01:03,750 So inside of our browser are reacting Reebok's application will make an Ajax request over to this blog 15 00:01:03,750 --> 00:01:08,410 post API fetch a list of posts and then show them on the screen to the user. 16 00:01:08,760 --> 00:01:13,820 So we've done quite a few applications now where we fetch some amount of data and show it to the user. 17 00:01:13,830 --> 00:01:16,070 This is going to be very similar in that regard. 18 00:01:16,140 --> 00:01:19,880 So we're going to fetch this list of posts shown to the user. 19 00:01:20,180 --> 00:01:25,500 I want to spend a little bit of time inside the section to talk to you more about this blog post API. 20 00:01:25,770 --> 00:01:28,000 We're not going to make immediate use of the API. 21 00:01:28,020 --> 00:01:32,460 You know we're not going to use it in the next section or two but it's going to have a huge impact on 22 00:01:32,460 --> 00:01:34,530 how we structure our application. 23 00:01:34,530 --> 00:01:40,080 So I want to make sure that you've got at least a preliminary understanding of how the API works. 24 00:01:40,080 --> 00:01:42,070 So we're going to check out some documentation. 25 00:01:42,120 --> 00:01:47,030 We're going to make a sample request or three and get a better sense of what it's going to do for us. 26 00:01:47,310 --> 00:01:47,620 OK. 27 00:01:47,640 --> 00:01:52,140 So let's first pull up the documentation for this API inside of my browser. 28 00:01:52,200 --> 00:01:59,730 I'm going to manually navigate to redux blog dot Heroku app dot com. 29 00:01:59,880 --> 00:02:04,550 Now do make sure that you're going to Heroku app dot com not just Heroku dot com. 30 00:02:04,560 --> 00:02:06,800 So don't do double check that. 31 00:02:07,360 --> 00:02:08,580 Get on this page. 32 00:02:08,580 --> 00:02:13,800 I've set up some amount of documentation that profiles the four different routes that you're going to 33 00:02:13,800 --> 00:02:15,620 be able to make access to. 34 00:02:15,780 --> 00:02:20,070 So you can see every single one of these rows on here is a different route that we can make a request 35 00:02:20,070 --> 00:02:20,560 to. 36 00:02:20,670 --> 00:02:23,110 And each one has a different purpose. 37 00:02:23,190 --> 00:02:26,770 Now the documentation here is you know I think somewhat clear. 38 00:02:26,850 --> 00:02:31,680 So I just want to do a very brief overview of each of the routes and if you wish. 39 00:02:31,680 --> 00:02:35,940 You can certainly pause the video right now and read through all the documentation yourself. 40 00:02:35,940 --> 00:02:38,820 So let's go through each of these four routes. 41 00:02:38,820 --> 00:02:43,620 The first route that we can make and request to will fetch a list of all the different blog posts that 42 00:02:43,620 --> 00:02:45,750 the user has created. 43 00:02:45,870 --> 00:02:53,110 The next one will accept a post type request to create a brand new blog post and save it to the server. 44 00:02:53,190 --> 00:03:00,060 The third one fetches a very particular post so you can see in here the intent is to provide the ID 45 00:03:00,060 --> 00:03:05,460 of the post that we're trying to fetch and then the last one is intended to delete a very particular 46 00:03:05,460 --> 00:03:06,100 post. 47 00:03:06,120 --> 00:03:09,750 So you're supposed to provide the ID of the post that you want to delete. 48 00:03:12,390 --> 00:03:18,000 I want to now try out some of these different routes inside of API client or a request client and we'll 49 00:03:18,000 --> 00:03:22,470 get just a better sense of how they work and just kind of clarify a couple of loose ends on exactly 50 00:03:22,470 --> 00:03:27,870 what the API is doing for us to make a couple of practice or test requests. 51 00:03:27,870 --> 00:03:32,810 I'm going to use an API client called post man so I'm going to open up a new tab. 52 00:03:33,030 --> 00:03:40,360 I'm going to go to my chrome installed applications and I'm going to open up post man. 53 00:03:40,360 --> 00:03:42,320 Now I already have postman installed again. 54 00:03:42,450 --> 00:03:48,450 It is a network request client that we can use to make network requests to arbitrary endpoints. 55 00:03:48,510 --> 00:03:50,030 You don't have to install postman. 56 00:03:50,040 --> 00:03:51,230 It's totally optional. 57 00:03:51,330 --> 00:03:55,460 I'm going to show it to you just to kind of demonstrate exactly how the API works. 58 00:03:55,650 --> 00:03:57,990 If you want to install post man and follow along. 59 00:03:58,020 --> 00:04:03,930 You can open up chrome and then go to the web store and do a quick search for man and download it and 60 00:04:03,930 --> 00:04:08,630 install it in case I open the thing up and we'll go ahead and make a test request 61 00:04:13,250 --> 00:04:14,880 or wait for the load. 62 00:04:14,880 --> 00:04:19,640 Any minute now there we go OK. 63 00:04:20,260 --> 00:04:25,870 So in this interface we can select the type of request up here we can enter in the URL that we want 64 00:04:25,870 --> 00:04:30,460 to send the requests to and we can specify some of the different options that are going to accompany 65 00:04:30,460 --> 00:04:35,070 that request and then eventually click send to send the request off. 66 00:04:35,110 --> 00:04:40,590 So I want to go through the process of first creating a post fetching it and then deleting it. 67 00:04:40,630 --> 00:04:44,980 So in total we're going to make three separate requests. 68 00:04:45,010 --> 00:04:50,110 Flipping back over to the API documentation I'll find the second route down here which is the route 69 00:04:50,110 --> 00:04:53,460 that we can use whenever we want to create a new blog post. 70 00:04:53,830 --> 00:05:01,540 So I'm going to copy this endpoint right here and copy it a flip back over to postman and put it up 71 00:05:01,540 --> 00:05:07,930 in the request you are l because the documentation says that to create a new blog post I have to make 72 00:05:07,930 --> 00:05:11,530 a post type request and make sure that I've got posts selected here. 73 00:05:12,360 --> 00:05:17,030 And then I'm also going to make sure that I specify some body of the request so you can see that I've 74 00:05:17,030 --> 00:05:19,240 already entered in a body here. 75 00:05:19,250 --> 00:05:23,450 Now if you're following along with postman some really important settings to make note of do make sure 76 00:05:23,450 --> 00:05:29,720 that you've selected rawe on here and make sure that you've also selected a post type of Jason or excuse 77 00:05:29,720 --> 00:05:32,400 me application slash Jaison. 78 00:05:32,510 --> 00:05:38,480 Now in the body of the request This is not a javascript object it's a sign object which has just slightly 79 00:05:38,480 --> 00:05:39,590 different semantics. 80 00:05:39,860 --> 00:05:45,150 Essentially just make sure that you're using double quotes around all the keys and all the values. 81 00:05:45,200 --> 00:05:49,640 If you use single quotes like so you're going to see a little error message pop up. 82 00:05:49,820 --> 00:05:51,760 And if you omit the quotes altogether. 83 00:05:51,770 --> 00:05:53,310 Yeah still going to be an error as well. 84 00:05:53,360 --> 00:05:57,860 So do make sure that you're making use of double quotes everywhere in here. 85 00:05:57,860 --> 00:05:58,110 OK. 86 00:05:58,130 --> 00:06:04,730 So when I send this request it should create through post on this server and then return the newly created 87 00:06:04,730 --> 00:06:06,200 post to me. 88 00:06:06,200 --> 00:06:12,080 Now one last thing that I want to mention before I actually send this thing off because this API right 89 00:06:12,080 --> 00:06:16,720 here it doesn't really have the concept of unique users or anything like that. 90 00:06:16,730 --> 00:06:22,340 So the kind of semantic that we're using for identifying posts that belong to a particular user is to 91 00:06:22,340 --> 00:06:24,490 add a little API key. 92 00:06:24,530 --> 00:06:28,190 So this is going to be a parameter that we'd tack onto the R L. 93 00:06:28,340 --> 00:06:33,170 The key is you don't have to generate it ahead of time you could just enter in a completely random string 94 00:06:33,170 --> 00:06:34,370 of characters. 95 00:06:34,370 --> 00:06:39,510 The only requirement is that you must provide the key on every followup request that you make some practice. 96 00:06:39,510 --> 00:06:44,870 All I really have to do is out on key and then some unique string that I continue to use to all the 97 00:06:44,870 --> 00:06:45,730 time. 98 00:06:45,740 --> 00:06:47,310 So for me I think I'll use Stephen. 99 00:06:47,330 --> 00:06:48,290 One two three four. 100 00:06:48,320 --> 00:06:50,800 That's good enough OK. 101 00:06:50,910 --> 00:06:52,830 So I'll send the request off. 102 00:06:52,830 --> 00:06:53,420 And yep. 103 00:06:53,460 --> 00:06:55,200 Looks like the post was created. 104 00:06:55,560 --> 00:06:58,760 I get back the title categories and content of the post. 105 00:06:58,920 --> 00:07:03,280 And you'll also notice that I now have an idea assigned to the post as well. 106 00:07:03,630 --> 00:07:11,020 So now I can make a follow up request to my API to fetch this particular post right here if I so chose. 107 00:07:11,040 --> 00:07:12,340 Let's try to do that now. 108 00:07:12,760 --> 00:07:19,290 So I'm going to copy the ID I'm going to change the type of request over to get and just to make sure 109 00:07:19,290 --> 00:07:20,130 everything is really clear. 110 00:07:20,130 --> 00:07:23,270 Let's check out the documentation on this as well. 111 00:07:23,310 --> 00:07:29,340 If I go down to the third line right here you'll see that to fetch a very particular post with a given 112 00:07:29,340 --> 00:07:37,670 ID will make a get type request to API slash posts slash the ID of the post I want to get. 113 00:07:37,670 --> 00:07:44,630 Ok so I'm going to make sure I go to API slash posts slash the API or something the idea of the posts 114 00:07:44,630 --> 00:07:46,580 I just created. 115 00:07:46,710 --> 00:07:53,300 So now make my request and I get the same request back or do I get the same post back. 116 00:07:53,300 --> 00:07:59,210 Now the last thing that we can do is make a delete type request with the same exact you are l and that 117 00:07:59,210 --> 00:08:03,400 will delete this post so I'll delete it and OK. 118 00:08:03,440 --> 00:08:04,880 That should pretty much be it. 119 00:08:04,910 --> 00:08:06,780 Now if I make a follow up get request. 120 00:08:06,800 --> 00:08:10,430 I would expect to see an error message saying hey can't find that post. 121 00:08:10,460 --> 00:08:14,070 So yep for a 4 status error not found. 122 00:08:14,660 --> 00:08:16,640 OK so that's the three big routes. 123 00:08:16,670 --> 00:08:20,930 And of course there's one other big route that we are going to care about which is the index route that 124 00:08:20,930 --> 00:08:26,330 fetches a list of all the different blog posts that are tied to this particular API key. 125 00:08:26,330 --> 00:08:30,380 Now there's one last thing I want to mention about this API that I put together. 126 00:08:30,510 --> 00:08:36,290 I'd put a throttling mechanism around the API so that you can only make a limited number of requests 127 00:08:36,290 --> 00:08:37,340 per second. 128 00:08:37,340 --> 00:08:43,100 This is just to avoid you accidentally writing a request inside of a for loop or something like that 129 00:08:43,130 --> 00:08:45,260 and firing off too many requests. 130 00:08:45,260 --> 00:08:51,170 So if you start to make a ton of requests and we're talking about like 5 in one second you might start 131 00:08:51,170 --> 00:08:56,930 to see some requests fail and again that's just because I'm making sure that you know you're not accidentally 132 00:08:56,930 --> 00:09:02,360 writing some mistake code here that starts to crash the API or anything like that in practice. 133 00:09:02,360 --> 00:09:05,100 I really don't expect you to run into that limitation at all. 134 00:09:05,240 --> 00:09:07,530 So it should definitely be A-OK. 135 00:09:08,250 --> 00:09:12,050 OK so in this section we did a big overview of the API that we're going to use. 136 00:09:12,050 --> 00:09:14,580 We've got a better idea of how the API is going to work. 137 00:09:14,750 --> 00:09:19,320 So let's continue talking about the architecture of our application inside the next section.