1 00:00:00,390 --> 00:00:08,400 Now that we are done with setting this looming variable or the hook next, let me show you which is 2 00:00:08,400 --> 00:00:16,170 the EPA, which we are going to use and that which is the EPA, which would be fetching the data and 3 00:00:16,770 --> 00:00:18,570 he'll be displaying it on the screen. 4 00:00:18,960 --> 00:00:21,720 So let us go to our browser first. 5 00:00:23,870 --> 00:00:24,560 And. 6 00:00:27,890 --> 00:00:29,600 Is it switching or switch? 7 00:00:29,960 --> 00:00:35,900 So after going to the browser, what we need to do is we need to search for this particular name that 8 00:00:35,900 --> 00:00:37,430 is the cocktail lobby. 9 00:00:37,730 --> 00:00:45,080 And once you search for it, then you need to go to this website, which is the cocktail bar dot com 10 00:00:45,440 --> 00:00:47,420 and to click on this website. 11 00:00:48,600 --> 00:00:54,180 And this is the website which we are going to use on API purpose. 12 00:00:54,840 --> 00:01:02,560 And you can see there are already so many of them displaying and we don't have anything related to this. 13 00:01:02,580 --> 00:01:05,490 We don't want to look at whatever is being shown here. 14 00:01:06,240 --> 00:01:13,170 Our point of interest is this thing here, this link, which is the API link, and we need to just click 15 00:01:13,170 --> 00:01:13,740 on this. 16 00:01:16,190 --> 00:01:24,680 And once we reach to the EPA like Slash, EPA or PSP, and now we are in the EPA or the documentation 17 00:01:25,370 --> 00:01:31,580 section, so here there are we're just like EPA is which we want to use. 18 00:01:31,910 --> 00:01:39,560 And the best thing about this website or this EPA is that we don't need a key to use it like the EPA 19 00:01:39,560 --> 00:01:39,740 is. 20 00:01:39,740 --> 00:01:45,020 What is the problem is that you need to generate a key and then you need to hydrate when you put your 21 00:01:45,020 --> 00:01:52,040 code in production or you could you put all your code on GitHub or anywhere and when you open source 22 00:01:52,430 --> 00:01:59,450 so you need to like, work hard to make your key invisible or hidden using the environmental variables 23 00:01:59,450 --> 00:01:59,800 and on. 24 00:02:00,150 --> 00:02:09,260 And that is so like a long process or with this website or with this EPA in the standpoint point, you 25 00:02:09,260 --> 00:02:13,580 don't need to provide any kind of EPA key that is the best part here. 26 00:02:14,790 --> 00:02:23,010 So here there are so many APIs, like some of them are free, like the upper ones, but above are the 27 00:02:23,010 --> 00:02:26,100 free ones, and then we have some next. 28 00:02:26,280 --> 00:02:28,470 The end points. 29 00:02:28,470 --> 00:02:35,850 So those are the ones you need to like, be Patreon for like $2 or $5. 30 00:02:35,860 --> 00:02:37,530 I don't know how to swim $2. 31 00:02:37,890 --> 00:02:39,420 But we actually don't need it. 32 00:02:39,780 --> 00:02:43,020 So we'll be working with the free ones and in the free ones. 33 00:02:43,020 --> 00:02:46,260 Also, there are so many of them, so we will be working. 34 00:02:46,260 --> 00:02:55,770 First of all, this very first one to like, search and get the related EBA related cocktails or such 35 00:02:55,950 --> 00:03:02,700 cocktail by name as it's already written, you will be using this for starting the cocktails and for 36 00:03:02,700 --> 00:03:03,990 getting into the. 37 00:03:05,610 --> 00:03:12,840 Particular cocktail and getting into the page of a particular separate component of the cocktail, who 38 00:03:12,840 --> 00:03:17,010 will be using this one look up full, contained, detailed by IED. 39 00:03:17,430 --> 00:03:19,620 So this is the endpoint which will be. 40 00:03:20,980 --> 00:03:27,910 We'll be using to get the details like all the ingredients and what kind of cocktail is there and what 41 00:03:27,910 --> 00:03:35,740 is the what is required to make it and all of that stuff we're not interested in what is that thing 42 00:03:35,740 --> 00:03:36,400 made up of? 43 00:03:36,670 --> 00:03:37,240 Not at all. 44 00:03:37,240 --> 00:03:40,270 We are here to learn and that is what we are doing here. 45 00:03:40,920 --> 00:03:44,290 We will third ingredient by name. 46 00:03:44,620 --> 00:03:48,610 This will do to look of this untidy. 47 00:03:48,880 --> 00:03:50,780 This one look awful. 48 00:03:50,800 --> 00:03:56,710 Cocktail details by I.D. so that there will be an I.D. which really grabbing from here and that I.D. 49 00:03:56,710 --> 00:03:59,530 will be passing to that particular at this particular point. 50 00:03:59,530 --> 00:04:05,590 And then we'll be looking up to all the ingredients and all the details to that particular cocktail. 51 00:04:05,890 --> 00:04:10,210 OK, so next, let us go to our browser sodium non browsers. 52 00:04:10,210 --> 00:04:13,060 The idea that me minimized this, I mean, not. 53 00:04:14,290 --> 00:04:21,940 So here will be like, first of all, will be grabbing that particular endpoint from that episode. 54 00:04:21,940 --> 00:04:25,330 Let me go to the browser and let me grab this one. 55 00:04:26,370 --> 00:04:28,620 Is it can you just copy this one? 56 00:04:29,820 --> 00:04:32,970 It is this only no if slash known or. 57 00:04:34,380 --> 00:04:39,240 We need to like see the JASON format for that to. 58 00:04:41,080 --> 00:04:42,550 I think the world was different. 59 00:04:43,650 --> 00:04:44,760 Let me see. 60 00:04:48,030 --> 00:04:48,540 Issam? 61 00:04:50,610 --> 00:04:55,140 Oh, yeah, oh, sorry, sorry, sorry, it does that also mean just copy this will already copy. 62 00:04:55,680 --> 00:05:00,540 So next we'll go to our browser and not call vial or keep calling it that. 63 00:05:00,540 --> 00:05:02,040 It's not a problem, it's an ID. 64 00:05:02,700 --> 00:05:05,640 So here to what we'll do is will create a constant. 65 00:05:05,820 --> 00:05:11,460 So we'll call a constant and constant will be you are still. 66 00:05:12,840 --> 00:05:14,670 And that's equal to. 67 00:05:16,280 --> 00:05:23,490 That you are allowed to let me face that you are all which we copied and you just be a here. 68 00:05:23,900 --> 00:05:29,870 So this strain, the cocktail leaves dot com slash API and the decent format and this is the virgin 69 00:05:29,870 --> 00:05:35,270 and whatever and like, this is the order or the endpoint. 70 00:05:35,720 --> 00:05:37,540 We call it endpoint that looks. 71 00:05:37,550 --> 00:05:38,840 That sounds good. 72 00:05:39,770 --> 00:05:42,490 So we have already done this thing. 73 00:05:42,530 --> 00:05:51,410 And next, we'll see what we can do with this data and how we can actually fetch this data. 74 00:05:51,800 --> 00:05:52,250 OK. 75 00:05:52,670 --> 00:06:00,710 So it does right now when we look at the endpoint, which you are using, let me to the students is, 76 00:06:00,950 --> 00:06:01,330 yeah. 77 00:06:01,340 --> 00:06:09,230 So right now when we look at our endpoint, so we see at the last and there is this already selected 78 00:06:09,230 --> 00:06:10,650 like Marguerita. 79 00:06:10,670 --> 00:06:15,200 So this might be the name of a particular cocktail and this is a static. 80 00:06:16,580 --> 00:06:17,320 What can we see? 81 00:06:17,330 --> 00:06:19,110 Static endpoint? 82 00:06:19,130 --> 00:06:24,200 I start thinking, you are like knowing that when we open this, the details will be shown for the mind 83 00:06:24,230 --> 00:06:26,870 to get it to a particular cocktail. 84 00:06:27,110 --> 00:06:29,810 Let me show you how the data looks inside. 85 00:06:31,310 --> 00:06:33,680 Also, let me close this, we don't need that anymore. 86 00:06:34,430 --> 00:06:37,860 Actually, we need it for we will open it again, so let me to speak to. 87 00:06:41,330 --> 00:06:41,810 So. 88 00:06:42,930 --> 00:06:47,250 This is the data which we are getting from the standpoint point and. 89 00:06:49,150 --> 00:06:54,020 And this is a little bit messed up like we need to refactor this data. 90 00:06:54,040 --> 00:06:56,170 I'm sorry, I'm sorry the screen was not visible. 91 00:06:56,740 --> 00:07:01,650 I went to this particular end point, which we are using inside this room. 92 00:07:02,810 --> 00:07:03,910 Like constant, you are. 93 00:07:04,070 --> 00:07:08,030 And then we open it inside the browser, and it looks something like this. 94 00:07:08,540 --> 00:07:16,130 So basically, it's a decent file or the decent response, but the data is so much disorganized and 95 00:07:16,730 --> 00:07:23,980 we need to like this structure everything and we need to grab the data off, but a lot of effort. 96 00:07:24,200 --> 00:07:32,870 So that is the only thing here and that will do like there's no problem but will do if it's straightforward. 97 00:07:32,880 --> 00:07:37,910 If it would have been straightforward, then it would have been an advantage for us. 98 00:07:38,300 --> 00:07:41,740 But right now, that is admittedly gibberish and unordered. 99 00:07:41,930 --> 00:07:45,560 Are this organized, so we'll have to work a little bit more. 100 00:07:45,860 --> 00:07:49,490 But that's not the end of the world we will do, and we will go to it. 101 00:07:49,850 --> 00:07:51,500 OK, so next. 102 00:07:53,740 --> 00:08:02,260 We will remove this particular name from here because we are going to make this this power dynamic like 103 00:08:02,260 --> 00:08:09,550 this part would be static and this little part here, which is containing the name that would be dynamic. 104 00:08:09,940 --> 00:08:11,320 And let me just. 105 00:08:12,830 --> 00:08:14,040 The move this. 106 00:08:16,190 --> 00:08:16,760 And. 107 00:08:17,910 --> 00:08:26,960 That sort of real point will be to this much only and next after that, what is the text that will be 108 00:08:26,980 --> 00:08:31,850 adding dynamically so BHP question mark as an equal to? 109 00:08:32,110 --> 00:08:37,770 And that's brought a semicolon, but that is what we are going to do. 110 00:08:39,010 --> 00:08:43,650 Like this is this is the only thing which will be static addressed. 111 00:08:43,650 --> 00:08:47,220 Either thing or after that will be dynamic, too. 112 00:08:47,280 --> 00:08:49,440 OK, let's move further and. 113 00:08:50,860 --> 00:08:53,230 It's a bet that they turn on. 114 00:08:54,500 --> 00:09:03,540 It will be like a hit and we'll hit a function, but that's that function will be fetching their drinks 115 00:09:03,540 --> 00:09:03,960 and all. 116 00:09:05,480 --> 00:09:08,380 So let us create that match. 117 00:09:11,290 --> 00:09:11,750 Strings. 118 00:09:12,490 --> 00:09:19,870 And for that, we will need another hook and that the will have to import a hook. 119 00:09:20,350 --> 00:09:23,320 And that is the U.S callback quick. 120 00:09:23,330 --> 00:09:30,250 So we will import that from REAC and we'll imported in a new line so that will be used. 121 00:09:32,610 --> 00:09:32,990 Back. 122 00:09:34,420 --> 00:09:36,970 And we'll make use of this use quarterback. 123 00:09:37,240 --> 00:09:40,060 So what does this use callback? 124 00:09:40,060 --> 00:09:46,060 Basically, it is used when we are like rendering something again and again, like continuously in a 125 00:09:46,060 --> 00:09:47,560 very short amount of time. 126 00:09:47,920 --> 00:09:54,190 So then we need this use callback, OK, and this will be needing when we are rendering like whenever 127 00:09:54,190 --> 00:09:54,910 we type. 128 00:09:55,600 --> 00:09:58,390 And now we'll use this. 129 00:09:58,810 --> 00:10:00,200 You will callback Cook. 130 00:10:00,640 --> 00:10:06,220 So inside this Konst Fetch brings function, we'll make use of this use callback. 131 00:10:06,880 --> 00:10:12,040 So when declaring this so we love right use. 132 00:10:13,270 --> 00:10:19,360 Fall back inside this, we'll right an easing function is sing. 133 00:10:21,170 --> 00:10:23,870 And this will be a function and. 134 00:10:25,710 --> 00:10:33,780 And so the very first thing which we do is we'll say the loading to blue because right now, maybe we 135 00:10:33,780 --> 00:10:36,120 can just start to put false. 136 00:10:37,770 --> 00:10:41,190 Because it does not loading or we can just let it be what it was. 137 00:10:41,670 --> 00:10:48,770 But definitely when we enter this block of code and when we are vetting the data like photos and the 138 00:10:48,870 --> 00:10:49,620 vetting, the drinks. 139 00:10:49,890 --> 00:10:57,090 That means definitely that the work is going on in the background and the system is working hard to 140 00:10:57,090 --> 00:10:59,970 get the data from that particular API endpoint. 141 00:11:00,360 --> 00:11:08,160 So that time we definitely need to switch our side loading to do what we do, set loading and we pass. 142 00:11:09,800 --> 00:11:15,770 Through inside this, we can provide a semicolon if we like, and if we don't, there's no problem. 143 00:11:16,710 --> 00:11:21,870 And next, what we'll be doing is we're providing some try and get blocks like. 144 00:11:24,930 --> 00:11:31,890 When we are trying to get the data from the EPA and maybe some adult happens, the EPA enforcement is 145 00:11:31,890 --> 00:11:33,180 not working properly. 146 00:11:33,250 --> 00:11:37,620 The EPA is down or there is some error while writing. 147 00:11:38,170 --> 00:11:44,320 So then we can display it on the screen or we can catch it in the console.log. 148 00:11:44,880 --> 00:11:50,550 That's why we'll be using that to try and get method inside that will be writing all of our code. 149 00:11:50,560 --> 00:11:52,560 So we'll do that in the next review.