1 00:00:01,440 --> 00:00:02,250 Welcome back, guys. 2 00:00:02,280 --> 00:00:06,720 Welcome to the first video where we are starting working on the project, so we are not actually going 3 00:00:06,720 --> 00:00:12,690 to code much in this video because he's going to be getting the getting the first API call. 4 00:00:12,720 --> 00:00:15,970 And I'm going to talk about the OMV API. 5 00:00:15,990 --> 00:00:17,940 So this is a free you need to go here. 6 00:00:18,870 --> 00:00:21,320 And if you want to be a patriot, give them my money. 7 00:00:21,330 --> 00:00:21,810 That's good. 8 00:00:21,990 --> 00:00:22,560 For the moment. 9 00:00:22,560 --> 00:00:27,750 It's free so you can use register your name, all those things and they will shoot you back an email. 10 00:00:27,930 --> 00:00:32,480 So make sure that you check the email, even just spam or junk. 11 00:00:32,490 --> 00:00:39,540 It will be somewhere and they will give you the key and they will give you the curious API, how you 12 00:00:39,540 --> 00:00:44,060 can look for a particular movie and make sure that you click on this one. 13 00:00:44,070 --> 00:00:51,900 So don't use mine because my can be easily they can block it because you can have more than a thousand 14 00:00:51,900 --> 00:00:52,680 requests per day. 15 00:00:52,920 --> 00:00:55,710 You can't have actually more than a thousand requests per day. 16 00:00:55,710 --> 00:01:00,480 But if somebody else is using, you can easily make more than one thousand and they can block money 17 00:01:00,510 --> 00:01:01,460 by now. 18 00:01:01,500 --> 00:01:02,820 Why is API? 19 00:01:02,820 --> 00:01:05,380 Aiba is a special key, like a password. 20 00:01:05,430 --> 00:01:08,940 They will track you, they will know how what you're doing with it and stuff like that. 21 00:01:09,160 --> 00:01:13,740 Also, you need to tell them that you are building something here like a for web development. 22 00:01:15,400 --> 00:01:19,500 You can say, you know, testing of the development app and stuff like that. 23 00:01:19,500 --> 00:01:21,210 Give them an explanation. 24 00:01:21,750 --> 00:01:22,150 Nice. 25 00:01:22,410 --> 00:01:29,580 So going back here with your you're going to put your key here and this is actually the end point in 26 00:01:29,580 --> 00:01:32,880 the end point is actually where you can put parameters here. 27 00:01:33,120 --> 00:01:34,580 The different parameters we can use. 28 00:01:34,590 --> 00:01:35,740 This one is saying optional. 29 00:01:35,760 --> 00:01:36,020 Right. 30 00:01:36,360 --> 00:01:40,920 We will use the AI parameter that's going to be for the ID. 31 00:01:40,950 --> 00:01:46,100 So we get a search movie bag and we're going to say yes by search movie, by the title. 32 00:01:46,260 --> 00:01:47,190 That's cool. 33 00:01:47,430 --> 00:01:50,570 But let's go to back to the main controller here. 34 00:01:50,970 --> 00:01:51,840 So first things first. 35 00:01:51,840 --> 00:01:54,260 We need to create async function, right? 36 00:01:55,200 --> 00:01:59,880 And let's say a Test API in here. 37 00:01:59,880 --> 00:02:03,780 I'm going to pass the query, this query actually later on. 38 00:02:04,350 --> 00:02:06,030 So this will be just for testing later on. 39 00:02:06,030 --> 00:02:09,960 This Quiller query will come from the search. 40 00:02:09,990 --> 00:02:17,490 Also, make sure that you are always running in the background from now on and running it because you 41 00:02:17,490 --> 00:02:22,110 need to have these live server going on here in order when we do some changes. 42 00:02:22,110 --> 00:02:25,890 You want to see those changes here right now running it? 43 00:02:25,890 --> 00:02:26,880 I'm not going to show you. 44 00:02:27,240 --> 00:02:29,540 I'm not going to tell you anymore from now on. 45 00:02:29,760 --> 00:02:30,090 Good. 46 00:02:30,540 --> 00:02:34,650 Now, the query, we're going to call this function here Test API. 47 00:02:35,190 --> 00:02:40,110 We Batmen, for example, you can put any name of the movie you want in here. 48 00:02:40,980 --> 00:02:42,230 We will use the fetch method. 49 00:02:42,250 --> 00:02:42,500 Right. 50 00:02:42,690 --> 00:02:44,400 Remember, we use that such method. 51 00:02:44,670 --> 00:02:48,210 And let's go to your they will give you the email. 52 00:02:48,450 --> 00:02:52,980 Just copied this one here and paste those here. 53 00:02:53,370 --> 00:02:55,770 Make sure that you select them in common them out. 54 00:02:55,980 --> 00:02:56,370 Right. 55 00:02:56,850 --> 00:02:57,890 API key. 56 00:02:57,900 --> 00:02:59,100 You don't need this one. 57 00:03:01,890 --> 00:03:05,900 And here we go now, I'm going to copy this one, we're going to change it a little bit. 58 00:03:06,360 --> 00:03:08,480 So this actually should be put. 59 00:03:08,490 --> 00:03:09,420 I'm going to go back. 60 00:03:09,960 --> 00:03:12,360 I'm going to make it in the literal string, right. 61 00:03:13,110 --> 00:03:14,080 Template literals. 62 00:03:14,310 --> 00:03:18,810 Now, the fetch, we usually save it in somewhere. 63 00:03:18,820 --> 00:03:22,880 So I'm going to say consed result and away. 64 00:03:22,940 --> 00:03:25,620 Right, because this is a real API call. 65 00:03:26,040 --> 00:03:32,590 Now here my key is that one what we can do, we can just make more things interesting. 66 00:03:32,610 --> 00:03:33,660 Sorry about that. 67 00:03:34,890 --> 00:03:42,260 So const key and we will store this one inside here as a string. 68 00:03:42,270 --> 00:03:52,890 My key if I can just do it after it is I can just added here now so I'm going to leave this one for 69 00:03:52,890 --> 00:03:53,540 now. 70 00:03:53,550 --> 00:03:57,230 So I'm going to say const Hanzo log result. 71 00:03:57,540 --> 00:03:59,550 Now by the way, this will return. 72 00:04:02,230 --> 00:04:11,500 This will return a particular movie based on the idea, right? 73 00:04:11,530 --> 00:04:16,060 This is the movie idea, I don't know which movie is this is not Batman because we are not just using 74 00:04:16,060 --> 00:04:16,810 the query here. 75 00:04:17,040 --> 00:04:17,320 Right. 76 00:04:17,590 --> 00:04:18,910 So concerned like the result. 77 00:04:19,450 --> 00:04:22,370 You know, let's see what's happening if we have some results, by the way. 78 00:04:23,890 --> 00:04:24,230 Good. 79 00:04:24,250 --> 00:04:30,850 Now, we do have here we acquiring this one API and think the status is 200 in. 80 00:04:31,270 --> 00:04:34,890 Actually the data is here in the body readable stream. 81 00:04:35,020 --> 00:04:36,370 So we passing the headers. 82 00:04:36,550 --> 00:04:39,430 Everything is working pretty much as you should be in the state. 83 00:04:39,430 --> 00:04:40,220 It is 200. 84 00:04:40,390 --> 00:04:41,990 That means everything is good. 85 00:04:42,400 --> 00:04:44,750 Now, how are we going to draft the data? 86 00:04:44,950 --> 00:04:45,870 Remember how we did it? 87 00:04:45,880 --> 00:04:51,520 So we said console sorry, const data here. 88 00:04:51,520 --> 00:04:59,740 And what we have done is actually we say a wait in result that JS so we pass it back. 89 00:05:00,040 --> 00:05:05,680 Now I'm not going to print out the result, it's going to print out the data here and I'm going to save 90 00:05:05,680 --> 00:05:05,870 it. 91 00:05:06,220 --> 00:05:06,840 Here it is. 92 00:05:07,060 --> 00:05:11,770 Now I have the data for that particular movie and I have a lot of things here. 93 00:05:11,770 --> 00:05:14,170 The actors, the box office, the production. 94 00:05:14,170 --> 00:05:17,740 We're going to go through all of this here, the IMDB, actually the ID. 95 00:05:18,040 --> 00:05:19,180 That's the ID here. 96 00:05:19,460 --> 00:05:19,900 Nice. 97 00:05:20,500 --> 00:05:23,410 But what if I want to query this Batman here? 98 00:05:23,780 --> 00:05:26,070 OK, so I'm just going to copy this. 99 00:05:26,080 --> 00:05:27,040 The entire thing. 100 00:05:29,520 --> 00:05:31,000 No, change it like this. 101 00:05:31,000 --> 00:05:33,670 I'm going to paste it in here. 102 00:05:33,700 --> 00:05:40,800 I am going to delete until this questionmark and I'm going to say s here. 103 00:05:41,020 --> 00:05:44,580 S means for search and I'm going to pass the query. 104 00:05:45,850 --> 00:05:46,330 Nice. 105 00:05:46,360 --> 00:05:49,870 So let's see what will happen if this is actually going to work. 106 00:05:50,170 --> 00:06:01,030 Now the data so we having an object search object with ten with ten elements. 107 00:06:01,030 --> 00:06:01,320 Right. 108 00:06:01,660 --> 00:06:05,310 Actually we have area of ten objects and we have the Batman Begins. 109 00:06:05,560 --> 00:06:09,090 So this is pretty much what these are. 110 00:06:09,150 --> 00:06:10,690 IMDB API will give it to you. 111 00:06:10,700 --> 00:06:12,250 So we using this parameter here. 112 00:06:12,250 --> 00:06:12,520 Right. 113 00:06:13,000 --> 00:06:16,810 So this is I'm doing everything from this description here in the documentation to have. 114 00:06:17,080 --> 00:06:21,760 They also have the examples and yeah, it's free from 2017. 115 00:06:21,880 --> 00:06:24,150 I hope it's going to stay like this so you can test it out. 116 00:06:25,480 --> 00:06:25,800 Cool. 117 00:06:25,990 --> 00:06:34,600 So we know how to query the week to make up our own query and then just fetch that API and store the 118 00:06:34,610 --> 00:06:35,560 result in the data. 119 00:06:35,830 --> 00:06:39,160 Now what if I want to use this data to be more meaningful? 120 00:06:39,430 --> 00:06:39,790 Right. 121 00:06:40,030 --> 00:06:42,560 So it's stored here in this search area. 122 00:06:42,790 --> 00:06:48,280 So what I can do, I say search, save it. 123 00:06:48,400 --> 00:06:53,080 And now I will able to see the entire area of 10 objects. 124 00:06:53,200 --> 00:06:57,700 So these are everything that is grabbing from that API. 125 00:06:57,970 --> 00:07:05,020 So as I told you, I'm not sure if I told you before, but it will this API will provide your test results 126 00:07:05,590 --> 00:07:06,580 for the search. 127 00:07:07,340 --> 00:07:11,020 There are probably 300 or 400 other results. 128 00:07:11,290 --> 00:07:11,690 Right. 129 00:07:12,130 --> 00:07:21,370 For example, if we just can't unlock the result, we will be able to see we will be able to see how 130 00:07:21,370 --> 00:07:27,280 many, OK, we may not be able to see at the moment, but pretty much there are more results. 131 00:07:27,280 --> 00:07:31,000 But it's going to give you the ten results in those test results. 132 00:07:31,000 --> 00:07:32,450 We can use them later on. 133 00:07:32,680 --> 00:07:36,840 So this is pretty much how we're going to grab the data from the API. 134 00:07:37,180 --> 00:07:42,070 Now, one more thing that I want to make this thing more secure from errors. 135 00:07:42,070 --> 00:07:43,840 Try and catch. 136 00:07:43,840 --> 00:07:44,180 Right. 137 00:07:44,180 --> 00:07:51,400 So I just copy this one error here and I'm going to stay alert error, OK? 138 00:07:51,550 --> 00:07:53,290 And I'm going to step back here. 139 00:07:54,370 --> 00:07:57,040 The code either try block, so try and catch. 140 00:07:57,250 --> 00:07:59,680 So now it should work everything the same. 141 00:07:59,680 --> 00:08:06,400 But if we just change, let's put it here, double X here at type network error. 142 00:08:06,400 --> 00:08:14,590 If we change, maybe, maybe if we change the key here to SS, it will not give undefined, it will 143 00:08:14,590 --> 00:08:18,970 not give us an error because the fetch is working a little bit different than excuse. 144 00:08:19,150 --> 00:08:23,710 So if you, if you were using the axes you will see that one is popping right through here. 145 00:08:23,710 --> 00:08:24,070 Right. 146 00:08:24,370 --> 00:08:25,240 But it's cool. 147 00:08:25,420 --> 00:08:31,870 Now we are at least secure that something if there is something wrong here it will be catched here. 148 00:08:32,060 --> 00:08:32,380 Good. 149 00:08:32,830 --> 00:08:35,920 So this was the first our first API call. 150 00:08:35,950 --> 00:08:36,360 Right. 151 00:08:36,640 --> 00:08:41,410 And from now on we will we will work on our project. 152 00:08:41,410 --> 00:08:46,450 So, yeah, at least we are just trying to get the data and it's working cool. 153 00:08:46,570 --> 00:08:50,290 And after that we can use this to build this application here. 154 00:08:50,500 --> 00:08:51,310 So thank you very much. 155 00:08:51,310 --> 00:08:52,810 I will see you in the next one.