1 00:00:00,770 --> 00:00:04,670 Unless section we got our search part component into a pretty good state. 2 00:00:04,670 --> 00:00:10,310 Now any time the user submits the form we're going to eventually try to call a Colback passed down from 3 00:00:10,310 --> 00:00:11,750 the app component. 4 00:00:11,750 --> 00:00:16,400 And so in order to actually have a callback that we pass down to the search bar we need to make sure 5 00:00:16,400 --> 00:00:19,680 that we actually have the ability to make a request over to the YouTube API. 6 00:00:19,880 --> 00:00:23,360 But that only makes sense to implement the callback until we put that together. 7 00:00:23,360 --> 00:00:28,580 So in this video we're going to put the search bar on Temperley pause and it kind of pause development 8 00:00:28,590 --> 00:00:33,650 for right now and then we're going to make sure that we understand how the YouTube API is used and wired 9 00:00:33,650 --> 00:00:34,970 up to our project. 10 00:00:35,000 --> 00:00:39,920 Now in practice the YouTube API is going to be almost identical to the n splash stuff that we had worked 11 00:00:39,920 --> 00:00:40,780 with previously. 12 00:00:40,910 --> 00:00:44,030 So let's just dive right in and get a better idea of what's going on. 13 00:00:44,960 --> 00:00:46,350 All right so here we go. 14 00:00:46,580 --> 00:00:52,480 Just as before we have our re-act application or react up is going to make use of that X-ers library. 15 00:00:52,550 --> 00:00:58,190 It's going to make a network request over to the YouTube API essentially saying hey we're looking for 16 00:00:58,250 --> 00:01:04,400 a list of videos here related to some search term YouTube API is then going to respond to us with a 17 00:01:04,400 --> 00:01:06,400 list of videos to show on the screen. 18 00:01:06,710 --> 00:01:12,710 That list of videos is going to be an array of objects where every object represents a different video. 19 00:01:12,710 --> 00:01:17,380 So like I said very similar in nature to the splash stuff that we had done previously. 20 00:01:18,610 --> 00:01:25,040 Now in order to make use the YouTube API we first have to get an API key to get the API key. 21 00:01:25,120 --> 00:01:30,670 We're going to navigate to console developers Google google.com inside of our browser and then we will 22 00:01:30,730 --> 00:01:35,260 very quickly go through a little bit of a sign up or set up process. 23 00:01:35,260 --> 00:01:40,810 So I'm going to take this link right here and open up a new tab in sudden my browser. 24 00:01:40,850 --> 00:01:46,910 Now the first time that you log onto this page the Google developers con. You might see a tiny little 25 00:01:46,910 --> 00:01:52,780 pop up appear that says something like a project is needed to view enabled API and services. 26 00:01:52,790 --> 00:01:58,340 So right now at the very first time that you ever visit this little dashboard right here you need to 27 00:01:58,400 --> 00:02:04,200 create a project which you can do by selecting this little button appear on the top left hand side. 28 00:02:04,220 --> 00:02:09,740 Once we create it once we create a project we can then generate an API key that will allow us to access 29 00:02:09,740 --> 00:02:11,140 the YouTube API. 30 00:02:11,510 --> 00:02:16,610 So I'm going to click on that link and then on the top right hand side I'm going to click on new projects 31 00:02:18,090 --> 00:02:25,980 we then get prompted to enter in a project name I'll give this a name like say videos or Video Video 32 00:02:25,980 --> 00:02:31,550 browser that works and then click on Create. 33 00:02:31,550 --> 00:02:35,860 Now something very important to notice up here on the upper right hand side I get this little spinner 34 00:02:35,860 --> 00:02:40,360 that says creating projects you get returned to the dashboard over here. 35 00:02:40,360 --> 00:02:42,770 But the project hasn't been created just yet. 36 00:02:42,880 --> 00:02:45,790 So the UI is just a little bit misleading here. 37 00:02:45,790 --> 00:02:48,130 It might make you think that the project has been created. 38 00:02:48,130 --> 00:02:49,090 No it hasn't. 39 00:02:49,090 --> 00:02:53,740 We have to wait until that spinner goes away and the project has been created before we can start to 40 00:02:53,770 --> 00:02:56,800 enable any API or anything like that. 41 00:02:56,800 --> 00:03:02,200 All right so once that little spinner goes away I'll see that it says create project video browser has 42 00:03:02,200 --> 00:03:05,050 now been finished just right now. 43 00:03:05,140 --> 00:03:09,460 So now I'll go back up to that little Selecta project draw down on the top left hand side. 44 00:03:10,310 --> 00:03:14,050 And then I'll select my video browser project that I just created. 45 00:03:14,940 --> 00:03:21,820 Ok now I'm ready to go now I'm ready to start to create a API key to use to access the YouTube API. 46 00:03:22,960 --> 00:03:27,860 It's now the next you are going to do is find the big blue button right here that says enable API and 47 00:03:27,860 --> 00:03:29,020 services. 48 00:03:29,480 --> 00:03:35,240 Now the Google suite of API is absolutely gigantic and you can actually see over here on the left hand 49 00:03:35,240 --> 00:03:42,270 side at present there is 214 different products inside the Google world that we can get access to. 50 00:03:42,290 --> 00:03:47,090 We need to enable access specifically to the YouTube API. 51 00:03:47,090 --> 00:03:53,300 So we're going to search right here for YouTube and even in the YouTube world there are four separate 52 00:03:53,390 --> 00:03:54,100 API. 53 00:03:54,110 --> 00:03:58,390 It's you and I are making use of the YouTube data API. 54 00:03:58,450 --> 00:03:59,970 That's the one you see right here. 55 00:04:00,020 --> 00:04:01,390 We are not using analytics. 56 00:04:01,400 --> 00:04:02,530 We are not using reporting. 57 00:04:02,540 --> 00:04:10,160 We are using the data API so I'm going to select that and then click on and enable and that's going 58 00:04:10,160 --> 00:04:13,020 to give us access to that particular API. 59 00:04:14,060 --> 00:04:19,850 Now before we can make use of this API lesing do is actually generate API key and you'll even see a 60 00:04:19,850 --> 00:04:24,980 little notification right here that says to use this API you need credentials so click Create credentials 61 00:04:24,980 --> 00:04:26,160 to get started. 62 00:04:26,330 --> 00:04:30,470 So you can either click Create credentials over there on the right hand side or you can click on the 63 00:04:30,500 --> 00:04:36,310 credentials link over here on the left hand side either one click on the left hand one just for fun. 64 00:04:36,320 --> 00:04:41,300 Now if you go this route you'll then click Create credential at the top the level and eventually end 65 00:04:41,300 --> 00:04:44,150 up at a little form like this right here. 66 00:04:44,160 --> 00:04:50,280 So the first thing we'll make sure is that we are saying yes we want to make use the YouTube data API. 67 00:04:50,500 --> 00:04:54,630 Then for the next question it's asking us where we are going to be calling the API from. 68 00:04:55,030 --> 00:05:00,010 So we're going to click on choose you and I are going to be calling the API from code that is running 69 00:05:00,040 --> 00:05:01,410 inside the browser. 70 00:05:01,570 --> 00:05:07,810 So we're going to select web browser javascript next up what data are we accessing. 71 00:05:07,810 --> 00:05:10,330 We are only making use of public data. 72 00:05:10,450 --> 00:05:16,120 We would only select user data right here if we want to attempt to log in as a on a user's behalf and 73 00:05:16,120 --> 00:05:21,800 say edit their list of videos or recreate videos or otherwise manage videos on behalf of the user. 74 00:05:21,820 --> 00:05:25,300 You and I are just searching for data publicly available data. 75 00:05:25,300 --> 00:05:28,720 So we want public data selected. 76 00:05:28,790 --> 00:05:31,110 We can then click on what credentials do I need. 77 00:05:31,250 --> 00:05:35,720 And it basically just kicks us over here and gives us an API key. 78 00:05:35,840 --> 00:05:41,040 So we're going to copy this key and then we'll flip back over to our editor and we're going to paste 79 00:05:41,040 --> 00:05:44,610 this summer over there so we can make use of it in just a moment. 80 00:05:44,610 --> 00:05:44,920 All right. 81 00:05:44,910 --> 00:05:50,700 So I'm going to go back over to my editor now as before we are going to create a separate folder inside 82 00:05:50,700 --> 00:05:58,730 of our sarcy directory called API is and inside of this API is directory. 83 00:05:58,890 --> 00:06:01,820 I'll make a new file called YouTube. 84 00:06:02,110 --> 00:06:03,350 Yes. 85 00:06:03,660 --> 00:06:10,710 And then inside this YouTube dodgiest file or create a new variable that will call a key and I'll paste 86 00:06:10,710 --> 00:06:12,540 in my Access Key like so. 87 00:06:12,720 --> 00:06:18,030 I notice that I created this as a capitalized variable key as opposed to like lowercase. 88 00:06:18,030 --> 00:06:23,610 The reason I marked it as uppercase is because this specifically says this is a constant value and it 89 00:06:23,760 --> 00:06:26,640 should not be changed unless you really know what you're doing. 90 00:06:27,950 --> 00:06:28,220 All right. 91 00:06:28,230 --> 00:06:32,160 So make sure I save this file and then I want to flip back over to the YouTube dashboard. 92 00:06:32,220 --> 00:06:35,400 Just one more time just to show you some other interesting stuff. 93 00:06:35,400 --> 00:06:41,730 Now a very common question that comes up around all this API access and whatnot is people who are concerned 94 00:06:41,820 --> 00:06:47,300 about some users getting access to this API key and making use of it for their own applications. 95 00:06:47,520 --> 00:06:54,060 So to be clear this key right here is going to be used inside of the browser. 96 00:06:54,080 --> 00:07:00,330 That means that when a user accesses your application you are going to be sending them this API key. 97 00:07:00,350 --> 00:07:05,940 It's going to be inside their browser and the user without a lot of trouble without a lot of effort. 98 00:07:06,050 --> 00:07:11,290 They could potentially very easily get their hands on your API key. 99 00:07:11,330 --> 00:07:13,930 Now a lot of people think that's a awful thing. 100 00:07:13,940 --> 00:07:14,680 And let me be clear. 101 00:07:14,690 --> 00:07:15,040 Yeah. 102 00:07:15,110 --> 00:07:19,070 Certainly in several cases where you are accessing a secure API. 103 00:07:19,220 --> 00:07:20,420 Yeah that's a big bad thing. 104 00:07:20,420 --> 00:07:23,030 We don't want users getting access to our API keys. 105 00:07:23,090 --> 00:07:29,420 But in this case this is an API that is specifically meant to be made publicly available. 106 00:07:29,420 --> 00:07:35,220 It is meant to be allowed to be shipped down to a user's browser and accessed from the user's browser. 107 00:07:36,280 --> 00:07:42,150 If you want to we can add in some additional restrictions in how this key can be used. 108 00:07:42,160 --> 00:07:46,630 So even though it is going to be shipped down to the user's browser the Keeble only be able to be used 109 00:07:46,630 --> 00:07:48,650 in some very certain scenarios. 110 00:07:48,910 --> 00:07:53,740 So if you want to we can click on restrict key right there and then we can scroll down a little bit 111 00:07:54,790 --> 00:07:57,460 and you'll notice there is a application restriction. 112 00:07:57,670 --> 00:08:05,050 If you click on HGT it refers right there we can set inside your different web pages that can make use 113 00:08:05,050 --> 00:08:06,120 of this key. 114 00:08:06,130 --> 00:08:10,470 So right now for you and I we are making use of this key from localhost 3000. 115 00:08:10,600 --> 00:08:18,330 So we could enter in local host 3000 like so now if anyone tried to take our API key and use it from 116 00:08:18,330 --> 00:08:25,200 some different Web site like let's say if someone's at my a malicious Web site dot com and they try 117 00:08:25,200 --> 00:08:30,240 to use our API key Google is going to see that the key is being used from my malicious Web site dotcom 118 00:08:30,240 --> 00:08:35,600 and say hey sorry but only people at localhost three thousand are allowed to use this key. 119 00:08:35,660 --> 00:08:40,530 And so a request with our key from my malicious Web site dot com will be completely blocked and we wouldn't 120 00:08:40,530 --> 00:08:42,620 pay for it or anything like that. 121 00:08:42,990 --> 00:08:43,190 OK. 122 00:08:43,200 --> 00:08:49,050 So just a quick aside in case you're a bit curious about these kind of security around API keys so click 123 00:08:49,050 --> 00:08:50,040 on safe right there. 124 00:08:50,310 --> 00:08:52,300 And that's pretty much it. 125 00:08:52,300 --> 00:08:52,530 All right. 126 00:08:52,540 --> 00:08:57,760 So if I now click on credentials on the left hand side I should see that I've got my one generated API 127 00:08:57,760 --> 00:09:00,120 key Alara selected. 128 00:09:00,230 --> 00:09:01,410 Let's take a quick pause right here. 129 00:09:01,430 --> 00:09:06,070 When we come back the next section will start to write a little bit more code inside this YouTube dodgiest 130 00:09:06,080 --> 00:09:10,750 file to make use of this key and actually send a API request over to you to.