1 00:00:00,510 --> 00:00:05,260 Hey there and welcome in this lesson, we're going to do a quick overview of our each Timal setup. 2 00:00:05,370 --> 00:00:06,200 Our starting point. 3 00:00:06,510 --> 00:00:11,670 And then we're going to prepare to add in the Java script and as well set up our YouTube API key, which 4 00:00:11,670 --> 00:00:14,970 we're gonna need in order to connect to the YouTube search API. 5 00:00:15,330 --> 00:00:16,920 So I've got some basic styling. 6 00:00:16,920 --> 00:00:19,710 I've got an index page, I've got a style. 7 00:00:19,830 --> 00:00:21,060 I've got only one class. 8 00:00:21,090 --> 00:00:24,630 So this is box and it's got a with the display. 9 00:00:24,840 --> 00:00:26,880 So these are some basic styling properties. 10 00:00:26,880 --> 00:00:32,340 And of course, you probably want to adjust these as this is simply creating us an element or a class 11 00:00:32,340 --> 00:00:37,650 that we can use in order to add two elements as we're creating them and adding them to our page. 12 00:00:37,890 --> 00:00:43,170 We've got an input for input, content for the search, as well as a button that says search. 13 00:00:43,470 --> 00:00:46,470 And then we can also have another element here. 14 00:00:46,500 --> 00:00:52,560 So this is a div and I'm just going to get a class of output so we can select it and identify it using 15 00:00:52,620 --> 00:00:55,140 JavaScript and then linking to apps J. 16 00:00:55,170 --> 00:00:55,520 S. 17 00:00:55,740 --> 00:01:00,760 So currently right now, Ops G.S. was just clear out this content that's here and apps G.S.. 18 00:01:00,830 --> 00:01:05,160 This could be a blank starting point when we're gonna be using all of the JavaScript in order to make 19 00:01:05,160 --> 00:01:05,760 connections. 20 00:01:06,150 --> 00:01:08,170 And I am using a Brackett's. 21 00:01:08,400 --> 00:01:10,800 So Brackett's is a free open source editor. 22 00:01:10,980 --> 00:01:17,430 And the one thing I like about Brackett's is that I can get an HTP protocol connection within the browser. 23 00:01:17,640 --> 00:01:24,240 So that means that I'm not going to file, but I'm going to HGP and I get an IP address, which gives 24 00:01:24,240 --> 00:01:27,360 me more flexibility, especially when I'm trying to connect to API. 25 00:01:27,360 --> 00:01:31,560 Is sometimes you gonna come across errors or different cause errors or issues. 26 00:01:31,890 --> 00:01:38,640 So that is one thing to watch out for when you are trying out and connecting to API is is to make sure 27 00:01:38,640 --> 00:01:41,700 that you're always running on the HTP protocol. 28 00:01:41,880 --> 00:01:46,740 So it's the same thing as Web sites use when they go to see Web pages. 29 00:01:46,920 --> 00:01:48,180 It's using that same protocol. 30 00:01:48,180 --> 00:01:49,350 So there's nothing in front of it. 31 00:01:49,650 --> 00:01:55,200 And this is different than the file protocol, which if you open up the file within the viewer. 32 00:01:56,860 --> 00:02:01,720 So if I was to just open up the index file and open in the viewer, you're going to see that this is 33 00:02:01,720 --> 00:02:04,960 a different protocol that's being used, that we see the word file there. 34 00:02:05,230 --> 00:02:10,750 And this means that it's using the file protocol and it's not using the Web protocol that we use to 35 00:02:10,750 --> 00:02:11,710 get Web pages. 36 00:02:11,980 --> 00:02:17,320 So make sure that you do have an editor or that you're able to run a local machine on your computer 37 00:02:17,500 --> 00:02:19,150 before proceeding to the next lessons. 38 00:02:19,360 --> 00:02:23,560 And one of the easiest ways is just go ahead and download brackets available at brackets I. 39 00:02:23,980 --> 00:02:27,280 So this is, again, that error that I'm using within the upcoming lessons. 40 00:02:27,610 --> 00:02:29,090 So brackets, I, I'll. 41 00:02:30,180 --> 00:02:32,290 It's available at Brackett's I or. 42 00:02:32,490 --> 00:02:35,190 And this is the editor that I'm using in the upcoming lessons. 43 00:02:35,520 --> 00:02:40,380 So the other thing that you're also going to need is you're going to get a YouTube account or a Google 44 00:02:40,380 --> 00:02:42,090 account and log into it. 45 00:02:42,450 --> 00:02:45,780 And this is going to give you access to get an API key. 46 00:02:46,080 --> 00:02:46,710 And the API. 47 00:02:46,790 --> 00:02:52,260 Here's what we're gonna use in order to authorize our application to make the connection to the YouTube 48 00:02:52,350 --> 00:02:52,980 API. 49 00:02:53,250 --> 00:02:56,670 And there's some instructions in here that we're gonna run through in the upcoming lesson. 50 00:02:57,030 --> 00:03:03,450 And again, here, they do tell you that you do need to have or you should have an HD protocol, local 51 00:03:03,450 --> 00:03:05,960 host or the way that we're doing with the IP address. 52 00:03:05,970 --> 00:03:06,690 It's the same thing. 53 00:03:07,080 --> 00:03:11,340 And this is gonna give us the ability to authorize the JavaScript origins. 54 00:03:11,610 --> 00:03:14,400 And it's going to make our application a little bit more flexible as well. 55 00:03:14,670 --> 00:03:15,660 So it's always a good idea. 56 00:03:16,890 --> 00:03:21,020 So once you're set up, I'll walk you through how to get your YouTube API key. 57 00:03:21,060 --> 00:03:25,890 Coming up, being Brackett's, which is the editor that I'm using, and within brackets, there is an 58 00:03:25,890 --> 00:03:31,770 option called Life Preview, which lets you preview out the content in an HTP protocol. 59 00:03:31,980 --> 00:03:32,850 So this is important. 60 00:03:32,940 --> 00:03:37,770 A lot of times when you are making API connections, it might not work directly with the file protocol. 61 00:03:38,040 --> 00:03:43,560 So the difference really is that when you use the file protocol and if you go to the Web page. 62 00:03:43,590 --> 00:03:48,840 So for instance, this is the same HTP each team, El-Hage that we're just looking at. 63 00:03:49,170 --> 00:03:51,570 And if I click that, you can see that it opens up. 64 00:03:51,610 --> 00:03:55,770 But right in the beginning there within the browser you are well, it's going to tell us that this is 65 00:03:55,770 --> 00:03:56,850 using file protocol. 66 00:03:57,150 --> 00:04:02,480 And sometimes within the API is when you are making connections, you're going to get blocked with cause 67 00:04:02,520 --> 00:04:06,360 or you can experience other different errors when you are using this type of protocol. 68 00:04:06,570 --> 00:04:10,140 So within brackets, it does have life preview and that's enabled. 69 00:04:10,380 --> 00:04:12,300 So you can open in a number of different ways. 70 00:04:12,300 --> 00:04:16,050 You can use a shortcut or for instance, you can use a little lightning bolt. 71 00:04:16,320 --> 00:04:19,680 And that's going to open up a page giving said IP address. 72 00:04:19,890 --> 00:04:21,090 And this is a local address. 73 00:04:21,100 --> 00:04:22,640 So same thing as local host. 74 00:04:22,950 --> 00:04:24,930 And then we've got the port and then the file. 75 00:04:25,140 --> 00:04:30,090 So presenting it within this format is going to make it a lot more flexible when it comes to connecting 76 00:04:30,090 --> 00:04:30,650 the API. 77 00:04:31,050 --> 00:04:34,110 Also, I am using Chrome as the browser of choice. 78 00:04:34,410 --> 00:04:38,490 Chrome comes with developer tools a lot at browsers now come with developer tools. 79 00:04:38,850 --> 00:04:44,610 And that gives us access to the JavaScript information within the console that we can get information. 80 00:04:44,880 --> 00:04:48,870 As we make the API connections, we can ensure that we've got the object properly. 81 00:04:49,080 --> 00:04:54,690 We can loop through the check out the object within the console before hard it and adding it into our 82 00:04:54,690 --> 00:04:55,140 Web page. 83 00:04:55,160 --> 00:05:01,800 So that's a definite advantage and it's going to become really useful and helpful when we are developing 84 00:05:01,800 --> 00:05:02,610 these APIs. 85 00:05:02,970 --> 00:05:06,520 The other thing that we are going to set up, and this is coming up in the next lesson, we're gonna 86 00:05:06,540 --> 00:05:12,540 do a quick start with setting up the YouTube data API, and that means that you are going to need to 87 00:05:12,540 --> 00:05:19,230 have a YouTube or a Google account in order to connect and get your authorization key in order to connect. 88 00:05:19,500 --> 00:05:24,390 So we do need to authorize the app before we can pull data from the YouTube API. 89 00:05:24,690 --> 00:05:31,860 So you have to create an API key and then authenticate it and then pull in the information to our application. 90 00:05:31,890 --> 00:05:35,400 We could also set the different authorized JavaScript origins. 91 00:05:35,640 --> 00:05:36,960 And there's that localhost again. 92 00:05:36,990 --> 00:05:42,420 So it is important to set this up and be ready in order to move on to the next lesson. 93 00:05:42,450 --> 00:05:46,260 So once you've got it all set up and you can set up some basic H.T. email as well. 94 00:05:46,680 --> 00:05:50,580 Make sure they have an input area as well as a search button and an output area. 95 00:05:50,790 --> 00:05:55,410 So those are the three pieces that you are going to need moving into the next section so that we can 96 00:05:55,410 --> 00:05:59,310 connect those with JavaScript and put them on the page in the next lesson. 97 00:05:59,370 --> 00:06:03,090 We're going to show you walk you through how to get your YouTube API key. 98 00:06:03,360 --> 00:06:05,520 And then we're going to be ready to start Java scripting. 99 00:06:05,610 --> 00:06:06,190 So that's coming up.