1 00:00:00,960 --> 00:00:06,510 In the last section we installed as a dependency to our project we're not going to use X CEOs in some 2 00:00:06,510 --> 00:00:12,330 documentation in the unselfish API to make a request over to Splash and then eventually just cancel 3 00:00:12,330 --> 00:00:16,580 log out a list of images that will then eventually show to our users. 4 00:00:16,620 --> 00:00:21,720 So this section is going to be all about trying to read some of the splash documentation and understanding 5 00:00:21,720 --> 00:00:23,800 how to make a request. 6 00:00:23,800 --> 00:00:24,100 All right. 7 00:00:24,100 --> 00:00:26,830 So I'm going to flip back over to my documentation. 8 00:00:26,830 --> 00:00:30,110 I see all the documentation here on how we search for photos. 9 00:00:30,310 --> 00:00:35,680 So it says that in order to make a search for a list of photos matching a query we're going to make 10 00:00:35,710 --> 00:00:43,990 a get type network request to an end point of search slash photos in order to make a request with ASIO's 11 00:00:44,830 --> 00:00:52,270 back here inside of on search submit we will call ASIO's dot get this get function is going to take 12 00:00:52,270 --> 00:00:53,830 two separate arguments. 13 00:00:53,830 --> 00:00:57,990 The first argument is going to be the address that we want to make a request to. 14 00:00:58,180 --> 00:01:03,220 And then the second argument is going to be an object that will have a bunch of options that will customize 15 00:01:03,280 --> 00:01:04,470 this request. 16 00:01:04,910 --> 00:01:10,180 Let's first make sure that we understand how to get some path in here or some end point that will make 17 00:01:10,240 --> 00:01:11,590 our requests too. 18 00:01:11,620 --> 00:01:15,970 Now as you just saw in the documentation it says that we want to make a request to the endpoint search 19 00:01:16,060 --> 00:01:20,650 slash photos but it's not just search slushed photos that we're making requests to. 20 00:01:20,650 --> 00:01:26,680 We actually have to get the route your L for the Sunsplash API first and then we can enter search slasher 21 00:01:26,680 --> 00:01:27,520 photos. 22 00:01:27,800 --> 00:01:32,740 So to get the route you are Alpher on Splash we're going to go back up to the top left hand side the 23 00:01:32,800 --> 00:01:41,020 left hand nav over here and click on under schema location and so the location the API or the route 24 00:01:41,020 --> 00:01:43,650 you are for the API is API. 25 00:01:43,670 --> 00:01:45,470 Sunsplash dot com. 26 00:01:45,790 --> 00:01:48,230 So I'm going to copy that right there. 27 00:01:48,920 --> 00:01:54,320 I'll pull it back into my editor and put it in as the first part of the path that we are going to make 28 00:01:54,320 --> 00:01:57,450 a request to. 29 00:01:57,520 --> 00:02:03,070 Now this is just the route you are l of the API to actually access the end point that's going to allow 30 00:02:03,070 --> 00:02:04,870 us to search for photos. 31 00:02:04,960 --> 00:02:07,800 We now need to access search slash photos. 32 00:02:07,930 --> 00:02:14,340 So go back over and add in soup add in to the very end of that search slash photos. 33 00:02:14,380 --> 00:02:19,080 And of course make sure you have a forward slash between the dot com and search. 34 00:02:19,080 --> 00:02:24,330 All right so this right here is going to specify where we want to make a get request to get an order 35 00:02:24,390 --> 00:02:26,900 to actually get access to the splash API. 36 00:02:26,910 --> 00:02:29,160 We have to do a little bit more work beyond this. 37 00:02:29,310 --> 00:02:34,540 We have to actually identify ourselves and who is trying to access the Sunsplash API. 38 00:02:35,380 --> 00:02:39,880 So in order to get some documentation or instructions on how to do that I'm going to again scroll up 39 00:02:39,880 --> 00:02:46,650 on the left hand side and find the section marked as authorization inside this public actions right 40 00:02:46,650 --> 00:02:46,980 here. 41 00:02:46,980 --> 00:02:52,390 It tells us how to identify ourselves or identify requests that are being made to an splash. 42 00:02:52,440 --> 00:02:55,270 So they're telling us that we can do two things. 43 00:02:55,380 --> 00:03:00,630 We can either include a header in the request called authorization that contains our personal access 44 00:03:00,630 --> 00:03:05,960 key or we can add on the access key to a query string when we make the request. 45 00:03:06,000 --> 00:03:07,650 Either way is going to work just fine. 46 00:03:09,020 --> 00:03:14,480 Now we're going to go ahead and take the route of adding in a letter of authorization because eventually 47 00:03:14,510 --> 00:03:20,000 we're going to come back to this code this ex-CEO code right here and do a little bit of a factor to 48 00:03:20,060 --> 00:03:21,680 really simplify some stuff. 49 00:03:21,770 --> 00:03:26,610 And when we do that refactor it's going to be a lot easier if we use this Hetter approach. 50 00:03:28,060 --> 00:03:32,410 All right so back over here inside of Acciona Doggett remember I had said that there was the second 51 00:03:32,410 --> 00:03:35,090 argument that allows us to configure a request. 52 00:03:35,200 --> 00:03:39,910 One of the options that we can put inside there is a header's object. 53 00:03:39,910 --> 00:03:44,560 This is going to add on some number of headers that we are making are headers on the requests that we're 54 00:03:44,560 --> 00:03:46,380 making to that Sunsplash API. 55 00:03:46,750 --> 00:03:53,650 So we want to add on a letter of authorization and we want that to have a value of client id and then 56 00:03:53,650 --> 00:03:59,460 our actual access key right after that is some things to triple check your mixture. 57 00:03:59,480 --> 00:04:01,270 We put on authorization right here. 58 00:04:01,270 --> 00:04:03,160 You have a capital A. 59 00:04:03,160 --> 00:04:09,280 The reason it needs to be Kappel is because the splash API is expecting a header with a capital A authorization 60 00:04:10,430 --> 00:04:15,580 the other thing to double check is make sure that in client id you have a capital D not a lowercase 61 00:04:15,590 --> 00:04:16,030 one. 62 00:04:16,940 --> 00:04:19,670 All right so now we have to put in our access key. 63 00:04:20,090 --> 00:04:24,570 We saw that access key just a moment ago when we were when we created our application. 64 00:04:24,770 --> 00:04:30,500 So to get back there you can go to your apps at the top and then open up the project we just created 65 00:04:31,250 --> 00:04:35,150 and then scroll on down to our keys right here. 66 00:04:35,150 --> 00:04:42,050 So I will copy my key and then go back over and paste it in after the client id and make sure you got 67 00:04:42,080 --> 00:04:47,590 a space between the client id and the access key. 68 00:04:47,590 --> 00:04:49,700 All right so now one last thing we have to do. 69 00:04:49,850 --> 00:04:55,410 I'm going to go back over to the search photos API documentation. 70 00:04:55,470 --> 00:04:56,880 So here is search photos. 71 00:04:57,360 --> 00:05:03,000 And you'll notice that when we make a request to this end point we have to include a query parameter 72 00:05:03,300 --> 00:05:09,030 a parameter literally called query and that's going to contain the search term that we want to use. 73 00:05:09,030 --> 00:05:14,550 So in order to add a query string or this query parameter or request with X-posts I'm going to find 74 00:05:14,550 --> 00:05:18,570 that second argument the options object and right above the headers. 75 00:05:18,570 --> 00:05:20,180 Key value pair are put in. 76 00:05:20,190 --> 00:05:27,240 Perhaps Parama specifies the different query string parameters we want to add into this request. 77 00:05:27,240 --> 00:05:34,380 So in our case we want to add in a parameter of query and we want to set its value equal to the term 78 00:05:34,590 --> 00:05:37,660 that was passed into the on search submit function. 79 00:05:37,680 --> 00:05:40,200 So I will put term in there like so. 80 00:05:40,270 --> 00:05:42,870 So the net result of that line right there. 81 00:05:43,170 --> 00:05:48,850 Essentially it's going to add onto the end of this request or else something like queery equals my term. 82 00:05:48,860 --> 00:05:53,570 Or you know in our case if for searching for cars that's going to be the end result. 83 00:05:53,580 --> 00:05:59,440 Now one thing not to forget here Mr. Colma at the end that line make sure you get that Khama as well. 84 00:05:59,850 --> 00:06:00,840 Okay so that's pretty much it. 85 00:06:00,840 --> 00:06:05,940 So this right here is going to make a request over to the splash API make a search for some number of 86 00:06:05,940 --> 00:06:11,400 photos on Splash is going to send back a big blob of juice on to us describing all the different photos 87 00:06:11,400 --> 00:06:12,400 that it found. 88 00:06:12,900 --> 00:06:18,080 So lesing I want to do is save this file and we're going to test it out in the browser really quickly. 89 00:06:18,090 --> 00:06:24,080 Now what we want to mention right now is that we're not doing anything with the data that gets returned. 90 00:06:24,100 --> 00:06:30,010 So in order to actually make sure that the request gets issued I'm going to pull open my Network tab 91 00:06:30,040 --> 00:06:31,980 over here in some of my Chrome browser. 92 00:06:32,770 --> 00:06:34,680 I'm going to clear the request log. 93 00:06:35,050 --> 00:06:42,040 And then I should be able to type in some search terms here like say cars enter and then see two requests 94 00:06:42,070 --> 00:06:43,210 appear. 95 00:06:43,210 --> 00:06:47,320 Now the reason that you see two requests is because technically the requests we are making is what is 96 00:06:47,320 --> 00:06:53,760 referred to as a course or cross Orjan research sharing request that goes into way more detailed than 97 00:06:53,830 --> 00:06:54,650 we need to know. 98 00:06:54,760 --> 00:06:59,080 But essentially all you really need to understand is that the request we care about is the second one 99 00:06:59,140 --> 00:07:03,670 on here the one marked with a method of get. 100 00:07:03,670 --> 00:07:06,060 We don't really care about the options one too much. 101 00:07:06,170 --> 00:07:11,480 It's all look at the get request I can select it and then go to the preview tab right here. 102 00:07:11,710 --> 00:07:14,800 And I should see some results for the data that was fetched. 103 00:07:15,070 --> 00:07:20,320 So open up results and it's going to show me the first 10 images that was felt that were fetched from 104 00:07:20,320 --> 00:07:23,950 the splash API matching the search term of cars. 105 00:07:24,000 --> 00:07:28,690 And so I can expand these and it will show me a ton of different data about the images that were search 106 00:07:29,350 --> 00:07:31,690 just to make sure that this worked successfully. 107 00:07:32,830 --> 00:07:37,380 On this first result right here I'm going to find the you are Elle's property. 108 00:07:37,510 --> 00:07:38,510 Expand that. 109 00:07:38,770 --> 00:07:44,630 And then I will copy the URL of it like this regular one right here. 110 00:07:44,830 --> 00:07:46,090 That's a really long link. 111 00:07:46,090 --> 00:07:50,270 So make sure you get the entire thing so I'm going to copy that. 112 00:07:50,490 --> 00:07:51,910 Open up a new browser tab. 113 00:07:52,140 --> 00:07:57,150 Put in that link that I just copied and sure enough it gives me an image of a car. 114 00:07:57,180 --> 00:07:58,320 Perfect. 115 00:07:58,320 --> 00:08:02,900 All right so we've got our data or at least we've got our request to get the data. 116 00:08:02,910 --> 00:08:05,720 We'll take a brief pause right here when we come back in the next section. 117 00:08:05,730 --> 00:08:09,330 We'll start to think about how we're going to get the data out of the requests that it's made right 118 00:08:09,330 --> 00:08:14,060 here and eventually render a list of images on the screen using it. 119 00:08:14,070 --> 00:08:16,190 So quick pause and I'll see you in just a minute.