1 00:00:00,760 --> 00:00:04,450 In the last section we generated a YouTube API access key. 2 00:00:04,460 --> 00:00:09,880 Now we're going to learn how we can take this key and actually initiate a search of the YouTube API. 3 00:00:10,280 --> 00:00:13,900 The first thing we need to do is look at some documentation around that process. 4 00:00:13,910 --> 00:00:18,260 So back inside of my browser I'm going to open up a new tab and I'll do a search for something like 5 00:00:18,290 --> 00:00:27,860 YouTube API search like the one the first results on here is search Colan list at the YouTube v3 docs. 6 00:00:27,870 --> 00:00:28,970 So take a look at that. 7 00:00:32,320 --> 00:00:32,620 All right. 8 00:00:32,630 --> 00:00:37,690 So to be honest with you personally this documentation isn't the most helpful thing in the world. 9 00:00:37,690 --> 00:00:39,300 It's kind of hard to read sometimes. 10 00:00:39,310 --> 00:00:40,780 Let me show you why that is. 11 00:00:40,780 --> 00:00:44,620 If you scroll down a little bit on this page you'll see that it gives you a nice little code snipped 12 00:00:44,620 --> 00:00:45,380 right here. 13 00:00:45,400 --> 00:00:50,280 You can use to figure out exactly how to make a request so we could click on Javascript. 14 00:00:50,350 --> 00:00:55,840 But when you do so you'll notice that they kind of reference this function that they put together in 15 00:00:55,840 --> 00:01:01,840 their documentation somewhere else called Build API request so the documentation doesn't make it super 16 00:01:01,840 --> 00:01:06,900 clear exactly how we make requests to do a search based on this little code snippet alone. 17 00:01:07,060 --> 00:01:10,710 But nonetheless I'll tell you exactly what we need to be doing here. 18 00:01:10,720 --> 00:01:11,050 All right. 19 00:01:11,050 --> 00:01:15,260 So if you scroll down a little bit more you'll notice the section called the request right here. 20 00:01:15,460 --> 00:01:22,660 So essentially what we need to do is make a get type request to this your L Google API dot com slash 21 00:01:22,660 --> 00:01:24,530 YouTube the three search. 22 00:01:25,030 --> 00:01:30,280 When we make a request over there we will pass in some number of query string parameters and you can 23 00:01:30,280 --> 00:01:34,870 see the preceding parameters that you and I are going to pass in listed right here. 24 00:01:35,140 --> 00:01:38,920 So first off is part and we're going to set that equal to snippet. 25 00:01:38,980 --> 00:01:44,200 The purpose of part right here is to essentially tell the YouTube API what information that we want 26 00:01:44,200 --> 00:01:50,530 to retrieve about each particular video that we end up finding the term snippet essentially says to 27 00:01:50,530 --> 00:01:51,460 the API. 28 00:01:51,550 --> 00:01:56,950 Send us back a snippet summary of the entire video and so that will give us information like the video's 29 00:01:56,950 --> 00:01:59,450 title description a link to the video. 30 00:01:59,530 --> 00:02:03,130 The author a lot of other useful stuff like that. 31 00:02:03,250 --> 00:02:07,400 The next parameter right here called Max results is pretty self-explanatory. 32 00:02:07,510 --> 00:02:12,970 We put in the number of results we want to get back from the search process for you and I we're going 33 00:02:12,970 --> 00:02:18,310 to be using a max results of 5 just because that's going to end up looking pretty good on a UI we're 34 00:02:18,310 --> 00:02:22,760 putting together without a doubt you could increment the max results to be greater than 5. 35 00:02:22,780 --> 00:02:27,740 I'm just saying that for our application we're going to start off by just showing 5 videos at a time. 36 00:02:28,030 --> 00:02:33,140 And then finally the other parameter we're going to pass in here is q which is short for queery. 37 00:02:33,160 --> 00:02:37,400 So it's going to be the actual search term that we want to attempt to make. 38 00:02:37,400 --> 00:02:37,670 All right. 39 00:02:37,710 --> 00:02:38,600 That's pretty much it. 40 00:02:40,040 --> 00:02:45,110 You know to be really clear these different properties you see right here are query string parameters. 41 00:02:45,200 --> 00:02:51,380 And so with X-ers we passed those in on that harams object or the configuration object just as we did 42 00:02:51,380 --> 00:02:54,230 previously with the splash API. 43 00:02:54,240 --> 00:02:54,480 All right. 44 00:02:54,480 --> 00:03:00,150 So it then mind we're going to flip back over to our editor and inside the YouTube G-S file We're going 45 00:03:00,150 --> 00:03:01,990 to start to set up accedes. 46 00:03:02,100 --> 00:03:07,820 We're going to create and pre-configured instance of Axel's just as we had previously we have not installed 47 00:03:07,840 --> 00:03:09,550 Axel's into our project yet. 48 00:03:09,600 --> 00:03:14,420 We will do so in just a moment but for now let's just write out some code inside this YouTube dachas 49 00:03:14,430 --> 00:03:18,100 file of imagining that we had already installed it. 50 00:03:18,540 --> 00:03:25,380 So at the top I'll say X import accedes from ASIO's and then a little bit lower. 51 00:03:25,430 --> 00:03:29,480 I'll say export default accedes dot create. 52 00:03:29,490 --> 00:03:34,700 So remember the idea here is that we are going to make a pre-configured instance of Axel's that already 53 00:03:34,700 --> 00:03:39,400 has a base you are l and some default parameters loaded into it. 54 00:03:40,530 --> 00:03:43,490 So I get to specify a base you are l. 55 00:03:43,500 --> 00:03:48,580 Notice the capital U R L and then for the base you are l. 56 00:03:48,580 --> 00:03:56,440 I went to put in everything up to the three like so it's like in pace that. 57 00:03:56,820 --> 00:04:00,400 And I'll flip back over and I'll paste it in like so. 58 00:04:00,510 --> 00:04:05,050 Now notice that this you are right here does not have a ending slash. 59 00:04:05,130 --> 00:04:06,800 It's just v3 on its own. 60 00:04:07,780 --> 00:04:12,510 So remember the idea behind this space Eurail is that later on we'll be able to get our instance of 61 00:04:12,510 --> 00:04:17,640 this X-posts that we are creating right here and we'll be able to say something like YouTube. 62 00:04:17,680 --> 00:04:20,290 Don't get slash search. 63 00:04:20,310 --> 00:04:25,890 And then the string right here search we can imagine is taken in kind of like appended onto the end 64 00:04:25,890 --> 00:04:27,300 of the base rail like so 65 00:04:31,540 --> 00:04:32,690 now after the base you are out. 66 00:04:32,710 --> 00:04:37,480 We're going to stick in a Options object here called Puranas and this is going to contain all the different 67 00:04:37,480 --> 00:04:41,500 queery string parameters that we want to have added onto the request. 68 00:04:41,620 --> 00:04:49,030 So remember the first one is going to be required part and we're going to set equal to snippet. 69 00:04:49,130 --> 00:04:52,820 So I'll say part and I'll said it equal to the string snippet. 70 00:04:53,240 --> 00:04:56,600 Except we're going to do a max results of five. 71 00:04:57,020 --> 00:05:02,930 And then finally it's not specifically mentioned inside the documentation right here but we actually 72 00:05:02,930 --> 00:05:07,940 have to depend on our API key to this request as well inside the query string. 73 00:05:07,970 --> 00:05:10,710 So you're not going to see it on this particular page right here. 74 00:05:10,850 --> 00:05:15,200 Like I think we could even do a search on here for key and we're not going to find anything about it 75 00:05:15,260 --> 00:05:15,880 on here. 76 00:05:16,010 --> 00:05:21,470 But essentially whenever we make our final request we have to throw our API key into a query string 77 00:05:21,590 --> 00:05:27,210 on the or L and so the final results of that would look like questionmark key equals and then our X 78 00:05:27,210 --> 00:05:31,590 Eski of like you know AIC or whatever it is in order to do so. 79 00:05:31,600 --> 00:05:37,360 We're going to add on key and that's going to come from our key variable. 80 00:05:37,360 --> 00:05:37,710 All right. 81 00:05:37,780 --> 00:05:38,910 So that's pretty much it. 82 00:05:38,920 --> 00:05:43,210 Now you'll notice that the one thing we are missing here is a queue of Sayne like you know a surfboards 83 00:05:43,210 --> 00:05:45,010 or something like that. 84 00:05:45,010 --> 00:05:50,260 That's because we are going to specify our queery only when we actually make use of this X-ists instance 85 00:05:50,320 --> 00:05:52,890 and send a request over to the Google API. 86 00:05:53,170 --> 00:05:58,930 So we do not want to pre-configured our query or the search term on this instance right here. 87 00:05:58,960 --> 00:06:03,400 We're going to pass in that query string were that thing that we want to do our search for when we actually 88 00:06:03,460 --> 00:06:05,550 make use of this instance. 89 00:06:05,560 --> 00:06:05,940 All right. 90 00:06:05,950 --> 00:06:08,410 That's it for our YouTube chase file. 91 00:06:08,410 --> 00:06:13,510 Now the last thing on doing side of your is make sure that we install X is so to do so I'll flip back 92 00:06:13,510 --> 00:06:15,240 over to my terminal. 93 00:06:15,410 --> 00:06:22,880 Here's my running project all hit Control C and then I'll do an NPM install dasht are safe access like 94 00:06:22,880 --> 00:06:28,840 so now this will just take a second or two to install some skin to let it go very quickly and then when 95 00:06:28,840 --> 00:06:32,910 it's all done I'll make sure that I start my server back up with NPM start 96 00:06:36,920 --> 00:06:37,190 right. 97 00:06:37,190 --> 00:06:38,360 Very good. 98 00:06:38,360 --> 00:06:38,580 OK. 99 00:06:38,590 --> 00:06:40,070 So let's take a quick pause right here. 100 00:06:40,130 --> 00:06:45,020 When we come back the next section we're going to try out that YouTube API from our app component and 101 00:06:45,020 --> 00:06:49,460 then we'll start to wired up to our search bar and make sure that any time that someone submits a search 102 00:06:49,460 --> 00:06:53,160 term we try to make an actual request to the YouTube API.