1 00:00:00,480 --> 00:00:04,970 All right guys so this is one of my favorite projects of this course this is going to be a good help 2 00:00:04,980 --> 00:00:10,390 finder where we can search get hub users by user name and it'll give us their profile. 3 00:00:10,390 --> 00:00:16,530 It'll give us all their information it'll give us a list of their repositories and links to them show 4 00:00:16,530 --> 00:00:19,650 us how many forks how many watchers things like that. 5 00:00:19,800 --> 00:00:24,000 So this is the interface We're actually we're using bootstrapped for but we're using something called 6 00:00:24,000 --> 00:00:30,660 boot's dirt bootstrap swatch which gives you kind of a customized look in terms of colors and fonts 7 00:00:30,660 --> 00:00:32,760 and all you need to do is include the Cdn. 8 00:00:32,760 --> 00:00:35,270 You just need to include an external link. 9 00:00:35,270 --> 00:00:36,670 Well let's go ahead and do a search here. 10 00:00:36,670 --> 00:00:42,310 So if I just type something and if I put a B in it's going to reach out to get hub using. 11 00:00:42,420 --> 00:00:44,660 Were you actually using a away. 12 00:00:44,880 --> 00:00:49,490 And we're using the fecche API to get the user from get Hobb. 13 00:00:49,500 --> 00:00:56,710 Not only is it going to get the user profile stuff here but it's going to make another request to get 14 00:00:57,060 --> 00:01:05,670 repositories the latest five repositories and this input right here is connected to a key down event. 15 00:01:05,670 --> 00:01:07,380 I think it's key down or keep up. 16 00:01:07,560 --> 00:01:13,770 So every time I type in it's going to make a request to get Haab looking for this username. 17 00:01:13,770 --> 00:01:20,430 So you see this is whatever the user B.R. is will do be Aure VRA. 18 00:01:20,460 --> 00:01:24,760 So this use this is the Bradd user will put in be at Brad T. 19 00:01:24,780 --> 00:01:26,230 So that's a user. 20 00:01:26,470 --> 00:01:30,320 OK now when there's no use it's going to just pop up with the user not found. 21 00:01:30,330 --> 00:01:32,610 And it's going to stay on the current user. 22 00:01:32,610 --> 00:01:33,800 So we'll continue. 23 00:01:33,840 --> 00:01:35,370 I'm just spelling out my name here. 24 00:01:35,370 --> 00:01:38,890 There's no user with this trash. 25 00:01:39,440 --> 00:01:42,950 Put it in there put it in. 26 00:01:43,260 --> 00:01:46,170 So there is actually a user called Brad traveler. 27 00:01:46,410 --> 00:01:47,490 Let's put an s in there. 28 00:01:47,490 --> 00:01:51,170 No use and let's put a Y and we reach my profile. 29 00:01:51,430 --> 00:01:51,750 All right. 30 00:01:51,750 --> 00:01:54,380 And you can see my latest repositories. 31 00:01:54,450 --> 00:02:01,110 We have the the number of repositories just the followers following all that stuff. 32 00:02:01,110 --> 00:02:06,440 All right and if we clear this out completely it's just going to go back and the profiles disappear. 33 00:02:06,750 --> 00:02:13,210 So this actually takes advantage of a lot of the stuff that we've learned so far. 34 00:02:13,350 --> 00:02:19,670 A lot of the the six plus stuff sync await fetch. 35 00:02:19,710 --> 00:02:25,290 We're going to we're going to create a get hub J.S. file that will take care of actually reaching out 36 00:02:25,290 --> 00:02:26,520 to the API. 37 00:02:26,820 --> 00:02:32,940 Not only that but we're going to create a UI class to handle inserting stuff into the DOM for instance 38 00:02:32,940 --> 00:02:37,940 when a profile gets inserted like this or the Repos get inserted. 39 00:02:38,070 --> 00:02:42,600 That's going to be handled in the user interface class so we're going to kind of break our application 40 00:02:42,660 --> 00:02:46,870 up a little bit more than we have been with the past. 41 00:02:47,010 --> 00:02:55,230 You know the few small projects that we've done so one thing with the get hub API if we looked this 42 00:02:55,230 --> 00:03:00,900 up here it's actually a pretty nice API really like it. 43 00:03:00,920 --> 00:03:06,600 There's a lot of things you can do but one thing that they have a restriction they have is that you 44 00:03:06,600 --> 00:03:13,350 can only make about 100 requests per hour without an API key and where making a request every time we 45 00:03:13,350 --> 00:03:14,910 type something in here. 46 00:03:15,030 --> 00:03:16,850 So you're going to quickly run out. 47 00:03:16,860 --> 00:03:25,230 So what you need to do is register your application with good hub and get an API key and an API secret 48 00:03:25,380 --> 00:03:27,690 or client id and a client secret. 49 00:03:27,690 --> 00:03:31,500 I forget the exact you are else I'm just going to search for register 50 00:03:34,470 --> 00:03:43,600 search for register or get hub off and it's this link right here. 51 00:03:43,650 --> 00:03:50,340 It's a good hub dot com slash setting slash application slash new and you have to be logged in as well. 52 00:03:50,340 --> 00:03:56,550 All right so you just register that put in your home page you are all just put in local host whatever 53 00:03:56,610 --> 00:04:01,850 doesn't matter any kind of description authorization callback. 54 00:04:01,860 --> 00:04:06,700 Let me actually see what I have from mine because I already have this registered. 55 00:04:06,840 --> 00:04:13,140 So yeah I just put in I actually have localhost 80 100 here because I did this for an application I 56 00:04:13,140 --> 00:04:20,010 built a while ago and then I have the same for the call back so that so those really don't matter and 57 00:04:20,040 --> 00:04:24,750 it's fine if you guys see the secret you can always just reset these as well. 58 00:04:24,750 --> 00:04:31,380 Now one thing I want to mention is that if we go in we view the source code and we click on the Get 59 00:04:31,380 --> 00:04:37,820 hub J S file you're going to see the client id in the client secret right there in the constructor. 60 00:04:38,100 --> 00:04:44,070 And this isn't something you would want to do in production if this was on an application you are actually 61 00:04:44,070 --> 00:04:46,260 going to put into production. 62 00:04:46,260 --> 00:04:51,540 You'd want you'd want to have some kind of server where you make a request and you get this stuff from 63 00:04:51,540 --> 00:04:57,620 the server behind the scenes without it being visible in the browser like this. 64 00:04:57,660 --> 00:05:02,670 I mean you know there's really no reason for people to take your get Hub's secret key and use it. 65 00:05:02,670 --> 00:05:04,130 They can just create their own. 66 00:05:04,140 --> 00:05:09,920 But it's really not good practice and I just wanted to mention that to you guys. 67 00:05:10,110 --> 00:05:15,270 So it really doesn't matter in this situation because this is all for just learning purposes. 68 00:05:15,270 --> 00:05:18,030 This isn't something we're going to deploy. 69 00:05:18,030 --> 00:05:23,070 So go ahead and register an application like I said I already have one registered so I'm not going to 70 00:05:23,070 --> 00:05:28,220 do that but just go ahead and fill that fill that form out and you'll have this new app. 71 00:05:28,230 --> 00:05:29,810 And you should have your keys. 72 00:05:30,030 --> 00:05:32,850 All right and then you'll be ready to get started. 73 00:05:32,850 --> 00:05:36,450 So what we're going to do now is we're going to create our user interface. 74 00:05:36,450 --> 00:05:42,750 Now it's going to be pretty simple because most of the stuff is going to be generated in our UI class 75 00:05:42,750 --> 00:05:43,920 so we're going to create. 76 00:05:43,950 --> 00:05:46,690 So the actual age team will be pretty minimal. 77 00:05:46,740 --> 00:05:58,120 So when you create a folder here I'm going to call it good hub finder and let's open that with vs code. 78 00:05:58,260 --> 00:05:58,660 All right. 79 00:05:58,670 --> 00:06:01,040 And then we're going to create a couple of different files here. 80 00:06:01,040 --> 00:06:03,820 We want our indexed on aged him and file. 81 00:06:03,950 --> 00:06:10,490 We're going to want an app J.S. which will be our main javascript file then we're going to have good 82 00:06:10,490 --> 00:06:11,540 hub. 83 00:06:11,820 --> 00:06:15,800 J.S. and then we're going to have UI. 84 00:06:15,940 --> 00:06:16,580 Yes. 85 00:06:16,700 --> 00:06:23,720 OK so we'll have a good hub class and in a UI class we're going to be using ESX classes for this application. 86 00:06:24,050 --> 00:06:30,290 And again if you want to kind of do the reverse of what we've been doing you can go and do the E.S. 87 00:06:30,290 --> 00:06:37,450 five prototypes and remake the application that way after if you want one. 88 00:06:37,460 --> 00:06:43,160 What I'm doing here creating separate files we haven't done this really yet. 89 00:06:43,160 --> 00:06:50,060 We've been doing everything in this in one single app Das file so to do this we'll just have to have 90 00:06:50,060 --> 00:06:53,160 multiple script tags in our index each time. 91 00:06:53,300 --> 00:07:00,890 Now when you get into ESX modules which aren't supported in the browser yet you'll have to use something 92 00:07:00,890 --> 00:07:10,220 like web pack along with babbel to transpire your code to be able to have modular file modular javascript 93 00:07:10,220 --> 00:07:15,950 Well you'll be able to actually include one javascript file into another and we're going to learn about 94 00:07:15,950 --> 00:07:16,840 that later on. 95 00:07:16,850 --> 00:07:20,750 But for now we're just going to have to have multiple script tags. 96 00:07:20,750 --> 00:07:21,110 All right. 97 00:07:21,110 --> 00:07:25,850 So that's kind of the kind of the old way of doing it but we will get into web pack and babbel later 98 00:07:25,850 --> 00:07:26,470 on. 99 00:07:26,780 --> 00:07:29,260 So let's start off just creating our UI. 100 00:07:29,270 --> 00:07:34,930 So I'm going to put an exclamation tab just to get some Hedden body tags in here. 101 00:07:34,940 --> 00:07:42,700 Let's change this to get hub finder and then like I said we're going to be using something called boot's 102 00:07:42,700 --> 00:07:48,310 swatch which is really cool to boot's launch. 103 00:07:48,320 --> 00:07:56,630 I think it's watchdog com and they basically just give you different variations of a bootstrap template. 104 00:07:56,810 --> 00:08:01,760 Now I stopped using this for a while because they were using bootstrap 3 which you can still use if 105 00:08:01,760 --> 00:08:02,800 you click this link. 106 00:08:02,930 --> 00:08:05,720 But they recently updated to bootstrap for. 107 00:08:05,720 --> 00:08:07,580 So now I'm back to using them. 108 00:08:07,610 --> 00:08:10,000 I just think it's cool to switch up the design. 109 00:08:10,310 --> 00:08:13,240 Well we're going to use is the where is it. 110 00:08:13,250 --> 00:08:16,550 This right here this litera latera template. 111 00:08:16,550 --> 00:08:22,230 So if we just click download it will bring us right to a link that we can copy. 112 00:08:22,400 --> 00:08:27,110 You can download this and include it locally if you want but I'm just going to grab the link and just 113 00:08:27,110 --> 00:08:31,090 put it up here inside of a link tag just like that. 114 00:08:31,100 --> 00:08:32,690 And we should be all set. 115 00:08:32,690 --> 00:08:34,240 Now we're not going to need. 116 00:08:34,640 --> 00:08:37,890 Well actually we should put in the javascript. 117 00:08:37,990 --> 00:08:43,670 I was going to say we we don't need the bootstrap J.S. but just in case it's a good idea to include 118 00:08:43,670 --> 00:08:43,790 it. 119 00:08:43,790 --> 00:08:52,220 So let's go to get bootstrapped dot com gets started and we're going to grab these three links here. 120 00:08:55,010 --> 00:09:05,000 So grab those and it's actually snap that to the side and we can close that up and then we're going 121 00:09:05,000 --> 00:09:10,910 to put these links down at the bottom and then let's make be sure to include our script tags. 122 00:09:10,910 --> 00:09:13,320 Now the order is is pretty important. 123 00:09:13,340 --> 00:09:15,650 We want to get hub to be the first one 124 00:09:20,670 --> 00:09:27,760 so we're going to say get hub dot Jay ass. 125 00:09:27,860 --> 00:09:35,020 And then after you get how well do the UI dot J.S. and then we want our app Jap's 126 00:09:38,210 --> 00:09:44,060 OK and for the each team I'll body again it's going to be pretty simple. 127 00:09:44,120 --> 00:09:47,920 Now vires and even going to have any length so that's going to be really easy. 128 00:09:47,930 --> 00:09:52,900 We're going to create a nav tag with the class of now bar. 129 00:09:53,190 --> 00:10:04,880 Let's see we're going to do now of bar dash dark class of B.G. dash primary and a class of B3 which 130 00:10:04,880 --> 00:10:06,790 will give it margined bottom. 131 00:10:07,400 --> 00:10:14,030 OK and then inside here we'll just put in a container and then we're going to do the branding which 132 00:10:14,030 --> 00:10:18,890 is going to be a link with the class of nav bar dash brand 133 00:10:21,570 --> 00:10:27,990 and for that for the title here we'll just say get hub finder. 134 00:10:28,350 --> 00:10:31,770 And that should be it for the nav bar so let's save this and open it up. 135 00:10:31,770 --> 00:10:33,250 I'm going to use a live server. 136 00:10:36,310 --> 00:10:37,090 And there we go. 137 00:10:37,090 --> 00:10:43,890 So those are now very simple it's close that up and then under that we need to put our form. 138 00:10:43,900 --> 00:10:47,680 So we're actually going to put a div here with the class of container. 139 00:10:47,890 --> 00:10:54,610 And I'm also going to give it a class of search container and you'll see why later on. 140 00:10:54,910 --> 00:11:05,930 And then inside here we'll have a class of search a class of card and a class of card body. 141 00:11:07,400 --> 00:11:08,070 OK. 142 00:11:08,080 --> 00:11:11,290 And then we'll put in each one and we'll say search 143 00:11:14,140 --> 00:11:15,950 get hub users. 144 00:11:18,090 --> 00:11:24,390 And then under that age one we're going to put a paragraph in the class of lead and we're just going 145 00:11:24,390 --> 00:11:43,840 to say enter a user name to fetch a user a user profile to user profile and repots from get hub. 146 00:11:44,220 --> 00:11:49,530 So save that actual get rid of the from get up. 147 00:11:50,670 --> 00:11:51,020 OK. 148 00:11:51,030 --> 00:11:54,540 And then underneath the paragraph are just going to have an input. 149 00:11:54,570 --> 00:11:56,400 It'll have a type of tax. 150 00:11:56,610 --> 00:12:08,640 And we're going to give an ID given an ID of search user and we'll give it a class of form control which 151 00:12:08,640 --> 00:12:11,910 is a bootstrap class. 152 00:12:12,120 --> 00:12:17,520 You guys know that by now and then a placeholder. 153 00:12:18,800 --> 00:12:26,460 So placeholder rules just say get hub user name. 154 00:12:26,680 --> 00:12:27,010 All right. 155 00:12:27,030 --> 00:12:33,000 And then under this div we're going to put just a line break and then we're going to put a div with 156 00:12:33,000 --> 00:12:34,060 the class. 157 00:12:34,140 --> 00:12:37,440 Or I'm sorry the ID of profile. 158 00:12:38,100 --> 00:12:40,290 And this is basically just a placeholder. 159 00:12:40,290 --> 00:12:46,020 We're going to insert the profile through javascript into this element so let's save that and now we 160 00:12:46,020 --> 00:12:47,440 have our form. 161 00:12:47,460 --> 00:12:49,810 All right so very very simple UI. 162 00:12:49,950 --> 00:12:51,330 Actually let's just create a. 163 00:12:51,390 --> 00:12:56,820 Real quick we're going to go under the container so down at the bottom here and just put in a folder 164 00:12:57,290 --> 00:13:07,440 we're going to give it a class of empty five Marjan top five P3 which is padding 3 text center which 165 00:13:07,440 --> 00:13:12,900 will center the text and then B.G. light which will make it like color. 166 00:13:13,230 --> 00:13:21,420 And then in the former I'm just going to say good hub finder handle just put a little copyright symbol 167 00:13:23,370 --> 00:13:24,090 and there we go. 168 00:13:24,090 --> 00:13:25,600 So there's our UI. 169 00:13:25,950 --> 00:13:30,840 So that's going to be it for this video guys in the next one we're going to start on our Javascript. 170 00:13:30,870 --> 00:13:36,180 And we're going to add an event listener to this form so that when we start to type it fires off an 171 00:13:36,180 --> 00:13:41,850 event and then we'll continue on to reach out to the API and all that stuff. 172 00:13:41,850 --> 00:13:44,870 All right so thanks for watching and I will see you in the next video.