1
00:00:00,150 --> 00:00:01,110
Not bad, not bad.

2
00:00:01,260 --> 00:00:08,040
We've got our set up in a place, so now let's take a look at the external API we're going to use.

3
00:00:08,610 --> 00:00:16,980
And I would want you to go to your search engine and we're going to type O DB API.

4
00:00:17,490 --> 00:00:19,800
So that's the API we're looking for.

5
00:00:20,160 --> 00:00:26,790
Just click on the link and this is going to be the case again, where you do need to sign up for the

6
00:00:26,790 --> 00:00:27,180
API.

7
00:00:27,840 --> 00:00:34,080
So before we take a look at the usage and all that, I would want you to navigate to the API key link

8
00:00:34,570 --> 00:00:35,100
online.

9
00:00:35,100 --> 00:00:40,680
And here you can either choose Patrón, which of course is going to give you a bigger daily limit,

10
00:00:41,100 --> 00:00:43,560
but you also have a free one for one thousand.

11
00:00:43,890 --> 00:00:45,280
So just click here on free.

12
00:00:45,780 --> 00:00:47,990
I'm going to type here my email.

13
00:00:48,390 --> 00:00:55,550
We're in code tutorial, then one of my emails and I believe it was Gmail.

14
00:00:55,560 --> 00:00:57,390
So we're going to go with Gmail dot com.

15
00:00:57,810 --> 00:01:01,080
The name will be Peter Smith.

16
00:01:01,560 --> 00:01:04,590
And as far as years, well, I'm just going to say testing.

17
00:01:05,100 --> 00:01:05,940
I'll submit.

18
00:01:07,110 --> 00:01:14,730
Now, of course, we'll have to wait for that email and I'm going to navigate back right now to my email

19
00:01:15,180 --> 00:01:18,950
and I'm just waiting for Turkey and I want to get the e-mail.

20
00:01:19,290 --> 00:01:22,080
You'll have to click here to activate the key.

21
00:01:22,500 --> 00:01:25,170
So definitely do that, activate the key.

22
00:01:25,440 --> 00:01:29,200
And of course, this is the API key that you're looking for.

23
00:01:29,610 --> 00:01:31,140
So just grab the key.

24
00:01:31,680 --> 00:01:39,720
And before we test out the paper, how it works and how we would set up our API endpoints, I would

25
00:01:39,720 --> 00:01:45,840
want you to navigate back to the project and remember how we were setting up the N.V. variables.

26
00:01:46,230 --> 00:01:48,120
So navigate back to the project.

27
00:01:48,240 --> 00:01:49,790
You're talking about the folder.

28
00:01:49,980 --> 00:01:51,300
I'm not in the setup folder.

29
00:01:51,300 --> 00:01:57,000
Create a new file with the name of Dot N.V. again, I already added to the get ignored.

30
00:01:57,270 --> 00:02:00,270
So it's going to be ignored with so much control.

31
00:02:00,570 --> 00:02:06,060
So when you're pushing this up to the get them because this key will be ignored and in here come up

32
00:02:06,060 --> 00:02:06,840
with a name.

33
00:02:07,020 --> 00:02:13,020
Now remember, the name had to start with react on the score app and then on the score.

34
00:02:13,290 --> 00:02:20,190
So I'll go all caps react and then on the score up on the score and I'll call this movie.

35
00:02:21,180 --> 00:02:28,500
Underscore API and underscore key, and then, of course, I don't want to copy and paste and I didn't

36
00:02:28,500 --> 00:02:35,280
copy the actual key, so my bad I mean, I have to get back and I'm going to copy and paste the key

37
00:02:35,730 --> 00:02:43,560
so that when you push this project up, get up, of course, no one will be able to see yours.

38
00:02:44,250 --> 00:02:50,010
Now, remember, though, we need to, of course, use it and I'll right away set it up in the context

39
00:02:50,060 --> 00:02:50,420
jazz.

40
00:02:50,910 --> 00:02:56,520
So if you navigate the context, yes, you'll notice this API endpoint.

41
00:02:56,850 --> 00:02:59,190
So what is this all about?

42
00:02:59,520 --> 00:03:03,900
Well, if we're navigate back to the docs, I'm going to go back to the Minox.

43
00:03:04,110 --> 00:03:10,710
And if we take a look at the usage, you'll notice that this is the root endpoint where we go with the

44
00:03:10,710 --> 00:03:13,660
URL, then a question mark, API key.

45
00:03:14,040 --> 00:03:19,710
So we provide our key and of course, we have you URL parameters in our project.

46
00:03:19,720 --> 00:03:25,620
We're going to use to we're going to use one for Idy, which essentially is just going to give us a

47
00:03:25,620 --> 00:03:26,520
specific memory.

48
00:03:27,000 --> 00:03:29,100
And then the second one will be the search.

49
00:03:29,550 --> 00:03:34,110
So this is where all pass the query that is coming from the input.

50
00:03:34,530 --> 00:03:39,870
So our input will type something and then will pass the Senate as the URL parameter and then, of course,

51
00:03:40,350 --> 00:03:43,060
as a result will search for the movies.

52
00:03:43,530 --> 00:03:48,260
So I would want to construct right now our basic request.

53
00:03:48,600 --> 00:03:50,430
So I would want you to navigate here.

54
00:03:51,670 --> 00:03:58,000
Grabbed this particular part of the URL, so pretty much everything up to the API key and I'm going

55
00:03:58,000 --> 00:03:59,050
to open up the new tab.

56
00:03:59,050 --> 00:04:05,620
I'll copy and paste, then look for your key and you can either grab it from the email or you can grab

57
00:04:05,620 --> 00:04:07,750
it from your project.

58
00:04:08,230 --> 00:04:09,850
That is definitely an option.

59
00:04:10,100 --> 00:04:11,800
I'm going to remember we needed to go with.

60
00:04:11,800 --> 00:04:16,500
And, um, as far as search, we need to go with s online.

61
00:04:16,550 --> 00:04:22,180
And by the way, in this case, I'm going to go Lorqess unequals and then whatever we will want to search

62
00:04:22,180 --> 00:04:22,430
for.

63
00:04:22,720 --> 00:04:27,580
So, for example, if I would want to see Batman movies, I'm just going to type here Batman.

64
00:04:27,820 --> 00:04:31,230
And then once I type notice, I get back to movies.

65
00:04:31,540 --> 00:04:38,680
So if you get this type of response, so if you type something and you get back the result, then you're

66
00:04:38,680 --> 00:04:39,350
in good shape.

67
00:04:39,550 --> 00:04:43,390
Now, also right away, show you some of the errors that we might get.

68
00:04:43,840 --> 00:04:50,760
For example, if you go with B.A., you might get this response force, too many results.

69
00:04:51,100 --> 00:04:55,210
So this is something that we'll handle as far as our application.

70
00:04:56,150 --> 00:05:01,130
So we will display the errors, but I'm just guessing that there's going to be cases where response

71
00:05:01,130 --> 00:05:08,450
is true, meaning we'll get some kind of mileage, but there's also going to be the cases where we fail.

72
00:05:08,600 --> 00:05:10,480
So this is one of the cases where we fail.

73
00:05:10,730 --> 00:05:16,610
But as long as you get something, when you type a meaningful movie name again, in my case, I'm going

74
00:05:16,610 --> 00:05:22,670
to keep on typing Batman because honestly, I'm not the biggest movie buff ever, so I'm just going

75
00:05:22,670 --> 00:05:24,110
to stick to the ones that I know.

76
00:05:24,350 --> 00:05:25,010
Notice here.

77
00:05:25,020 --> 00:05:26,090
I have response.

78
00:05:26,250 --> 00:05:26,530
True.

79
00:05:26,900 --> 00:05:34,670
So what it means is that I have a successful request because I got some movies back again.

80
00:05:34,820 --> 00:05:38,540
If we never get back, we have the you are important.

81
00:05:38,840 --> 00:05:42,880
We need to pass in the key and then there's more parameters.

82
00:05:43,070 --> 00:05:48,050
So, of course, if you want to set up for your application different parameters, please do so.

83
00:05:48,290 --> 00:05:51,030
But in my case, we'll just worry about the idea.

84
00:05:51,500 --> 00:05:53,450
So essentially would pass in I.

85
00:05:54,530 --> 00:05:59,540
And then the ad and the morning, of course, will get there in our application, and the second one

86
00:05:59,540 --> 00:06:00,550
is the search.

87
00:06:01,000 --> 00:06:03,520
So this is where we'll search for tomorrow.

88
00:06:03,920 --> 00:06:09,770
And by the way, if you want to see the example, just navigate here online.

89
00:06:09,770 --> 00:06:12,020
For example, again, type Superman.

90
00:06:13,160 --> 00:06:20,150
And of course, there should be some kind of response, and there is so that's the response that comes

91
00:06:20,150 --> 00:06:20,450
back.

92
00:06:20,690 --> 00:06:25,130
If we type the title of Superman, hopefully this is clear.

93
00:06:25,380 --> 00:06:32,090
And once we never get back to our project, more specifically context, just you'll notice that I set

94
00:06:32,090 --> 00:06:37,760
up the variable by the name of API, underscore, underline and point.

95
00:06:37,910 --> 00:06:42,150
And you'll also notice that I'm right away exporting now.

96
00:06:42,150 --> 00:06:42,980
Why exporting?

97
00:06:42,980 --> 00:06:47,780
Because we will use it later when we search for a single movie.

98
00:06:48,320 --> 00:06:53,920
So essentially what I would want is to have some kind of end point that is ready to go.

99
00:06:54,320 --> 00:06:56,750
And I also have right away the API.

100
00:06:57,320 --> 00:07:03,800
So then we just need to add whether we're searching or we're looking for specific movie using the.

101
00:07:04,520 --> 00:07:08,820
So in this case, what I'm going to do is set up my API key.

102
00:07:09,230 --> 00:07:13,670
And in order to do that, I already have template strings related here.

103
00:07:13,880 --> 00:07:17,030
And then remember that we're looking for that.

104
00:07:17,750 --> 00:07:18,500
A variable.

105
00:07:18,500 --> 00:07:18,950
Correct.

106
00:07:19,220 --> 00:07:28,130
And in order to access it, we need to go with process process and then that money and we online, the

107
00:07:28,130 --> 00:07:29,330
name was React.

108
00:07:30,260 --> 00:07:39,620
Underscore online, Saurabh, underscore movie and underscore key, and the reason why I'm doing that

109
00:07:39,620 --> 00:07:44,780
right now is because remember, we needed to restart the server online.

110
00:07:44,810 --> 00:07:49,470
I also do want to try to work on some unlogged just so I can see that I have some kind of result, because

111
00:07:49,520 --> 00:07:51,940
that way I'm not going to have surprises later.

112
00:07:52,340 --> 00:07:56,840
So in here, I'm just going to say that I would want to log API endpoint.

113
00:07:57,210 --> 00:08:04,940
So API underscore and point and see what kind of result I'm getting and point over here.

114
00:08:05,300 --> 00:08:13,030
And then remember we needed to restart the server, so stop the server controversy and npm start and

115
00:08:13,220 --> 00:08:16,490
if a console I see that everything works.

116
00:08:17,590 --> 00:08:23,350
Meaning that I have some kind of Yooralla that makes sense, but of course we are in good shape if we

117
00:08:23,420 --> 00:08:24,680
see at the end undefined.

118
00:08:25,060 --> 00:08:32,530
Well, that means that either your variable is a match or you did not create the N.V. in the correct

119
00:08:32,530 --> 00:08:36,430
spot because remember, the N.V. needs to be in the.

120
00:08:37,030 --> 00:08:39,540
So my guess, I'm going to have to get back to my project.

121
00:08:40,030 --> 00:08:47,110
First of all, I guess the bigger browser window should be good than we inspect and in the console notice

122
00:08:47,110 --> 00:08:49,080
here I have right now undefined.

123
00:08:49,600 --> 00:08:53,200
So this is one of those cases where we just need to double check.

124
00:08:53,450 --> 00:08:54,270
Hey, what's happening?

125
00:08:54,610 --> 00:09:02,700
So I go back to context API and then I'll check first where I'm going with process and not envy.

126
00:09:03,040 --> 00:09:03,970
So that is correct.

127
00:09:04,300 --> 00:09:07,230
And I'm going to check whether my name is correct.

128
00:09:07,570 --> 00:09:09,730
And again, I'm just showing you those things.

129
00:09:09,880 --> 00:09:13,570
So you know that if you get some kind of error, it's not the end of the world.

130
00:09:13,730 --> 00:09:15,580
We just need to troubleshoot a little bit.

131
00:09:15,820 --> 00:09:18,430
And I think I messed it up with my name.

132
00:09:18,730 --> 00:09:20,110
So I go with process.

133
00:09:20,470 --> 00:09:24,700
And then, of course, if I copy and paste notice my name was a bit different.

134
00:09:24,870 --> 00:09:26,750
I also have the API.

135
00:09:27,190 --> 00:09:30,190
So again, we need to save and now we need to restart the server.

136
00:09:30,430 --> 00:09:34,150
So again we start a server and we go with an RPM start.

137
00:09:34,420 --> 00:09:41,230
And yes, I purposely leave these errors in the videos, so I'm not cutting them out just so I can see

138
00:09:41,230 --> 00:09:46,720
that if there's some kind of issue, you don't need to start stressing about it.

139
00:09:46,930 --> 00:09:47,440
It's OK.

140
00:09:48,070 --> 00:09:52,480
You just need to troubleshoot back and see where the error is.

141
00:09:52,780 --> 00:09:56,200
So I'm going to navigate here and that will refresh.

142
00:09:56,500 --> 00:09:59,520
And of course, I do have the euro.

143
00:09:59,860 --> 00:10:05,590
Now, if I want to test it, I can just say copy a link or, you know, we can just open it up in a

144
00:10:05,590 --> 00:10:06,190
new time.

145
00:10:06,400 --> 00:10:08,470
And I notice in here I have the error.

146
00:10:08,710 --> 00:10:13,120
Now I have the error because I'm not searching for anything or I'm not looking for ID.

147
00:10:13,420 --> 00:10:19,120
So I'm going to say and and then again, we'll look for my bathmat or you know what?

148
00:10:20,030 --> 00:10:21,820
I should know this movie as well.

149
00:10:22,250 --> 00:10:29,630
So we're going to go for Avenger's and yes, Verity's, so if this works, if now you can just take

150
00:10:29,630 --> 00:10:35,870
the you are off from the console, the opinion point, you're in good shape because of course for the

151
00:10:35,870 --> 00:10:38,630
rest of the application we will use this value.

152
00:10:38,810 --> 00:10:42,920
And the reason why I'm supporting this, because notice here we have a single movie.

153
00:10:44,040 --> 00:10:53,640
I will also use this variable, so I'll also construct my request using this API endpoint, and if you're

154
00:10:53,640 --> 00:11:01,620
in good shape, if you have the API key, if you have an V file, if everything works as far as the

155
00:11:01,620 --> 00:11:03,300
endpoint, we're in good shape.

156
00:11:03,540 --> 00:11:07,650
And I think we can start setting up the react router.

157
00:11:07,650 --> 00:11:07,940
Dom.