1
00:00:01,380 --> 00:00:02,330
Welcome back, my friends.

2
00:00:02,330 --> 00:00:07,900
Today, we got to do we got to work on the search model, so we need to create that searching functionality.

3
00:00:08,250 --> 00:00:11,030
OK, so this is running, right?

4
00:00:11,410 --> 00:00:14,600
Make sure that you're doing this and running it before.

5
00:00:14,610 --> 00:00:17,190
So I just copy the euro and paste it back to Google.

6
00:00:17,190 --> 00:00:17,920
So I'm using Google.

7
00:00:17,940 --> 00:00:23,390
This time it's a better representation of the console and I think that we need to have.

8
00:00:23,760 --> 00:00:24,050
Right.

9
00:00:24,360 --> 00:00:30,810
And the way we thatching the data, it's going to be will be displayed differently in Firefox than in

10
00:00:30,810 --> 00:00:31,220
Google.

11
00:00:31,230 --> 00:00:33,870
So I use Google because it's more intuitive.

12
00:00:34,020 --> 00:00:37,500
OK, now here, open up the map.

13
00:00:37,500 --> 00:00:42,160
He started to go into the models and we do have already have this search, Jair.

14
00:00:42,180 --> 00:00:44,790
So this will be our model in our first things.

15
00:00:44,790 --> 00:00:50,930
First, we need to create a class here in that class because I'm going to be called search that the

16
00:00:50,970 --> 00:00:51,690
search class.

17
00:00:51,840 --> 00:00:56,610
And actually we need to export this class back to the the controller.

18
00:00:56,880 --> 00:01:03,030
OK, now in the control, last time we fetch the data and we've got to clean this part because this

19
00:01:03,030 --> 00:01:04,780
was just for testing, but we're going to use it.

20
00:01:05,610 --> 00:01:07,350
And so how are we going to do so?

21
00:01:07,350 --> 00:01:08,470
How we write classes.

22
00:01:08,640 --> 00:01:10,430
So first, how we export class.

23
00:01:10,490 --> 00:01:15,060
So export default and we're going to use here the default way not named.

24
00:01:15,250 --> 00:01:17,280
And I'm going to say class search.

25
00:01:18,570 --> 00:01:26,100
We define classes with this curly brackets here right now, inside every class, we do have a constructor.

26
00:01:26,100 --> 00:01:29,220
So we need to define the constructor in this constructor.

27
00:01:29,220 --> 00:01:31,140
We need to passing parameters.

28
00:01:31,510 --> 00:01:38,070
So these parameters with these parameters are the ones that we want this class or every object of this

29
00:01:38,070 --> 00:01:40,260
class to have them to have access to them.

30
00:01:40,270 --> 00:01:44,190
So the best way to do it is just to create the query.

31
00:01:44,430 --> 00:01:47,490
Remember last time we did have a query in that query.

32
00:01:47,760 --> 00:01:49,650
Later on will come from this board.

33
00:01:49,890 --> 00:01:54,210
We are not there yet, but we need to find a way how to get it manually.

34
00:01:54,210 --> 00:01:55,040
Now, now.

35
00:01:55,050 --> 00:02:02,550
So I have the search query here and how we set these dot query equal to the query we are passing here

36
00:02:02,550 --> 00:02:03,500
through the constructor.

37
00:02:03,900 --> 00:02:04,140
Cool.

38
00:02:04,410 --> 00:02:08,700
Now next part is we need to create the method that will fetch the data.

39
00:02:09,000 --> 00:02:15,390
We already have this method here, so I'm going to copy the entire one and I'm going to paste it here.

40
00:02:17,430 --> 00:02:19,350
And we need to change a couple of things.

41
00:02:19,560 --> 00:02:28,010
Now, when we defining a method here in in classes, we don't have to we we don't have to specify the

42
00:02:28,050 --> 00:02:28,920
word function.

43
00:02:29,160 --> 00:02:29,550
Right.

44
00:02:29,970 --> 00:02:36,030
So we don't have to specify the word function, but we can leave this for async, meaning that this

45
00:02:36,030 --> 00:02:41,670
will be the asynchronous function because it was the Ehsani synchronous function back here.

46
00:02:42,310 --> 00:02:45,570
Right now we're going to do the same same thing.

47
00:02:45,840 --> 00:02:47,340
But we need to change a couple of things.

48
00:02:47,340 --> 00:02:58,230
So async instead of testing the API, we are going to say, OK, that will be get this will we get search

49
00:02:58,620 --> 00:02:59,160
result.

50
00:03:00,720 --> 00:03:01,110
Right.

51
00:03:01,350 --> 00:03:02,430
And it will be async.

52
00:03:02,430 --> 00:03:02,800
It will.

53
00:03:03,090 --> 00:03:06,000
So here we need to clean up a little bit.

54
00:03:06,000 --> 00:03:07,010
This mess here.

55
00:03:07,380 --> 00:03:10,920
What I want is, yep, I want this to stay.

56
00:03:12,060 --> 00:03:13,650
I don't need this board.

57
00:03:14,940 --> 00:03:16,920
So we are searching using this query.

58
00:03:17,190 --> 00:03:18,240
I don't need this.

59
00:03:18,950 --> 00:03:20,010
Don't need this.

60
00:03:20,010 --> 00:03:21,330
So try and catch block.

61
00:03:21,330 --> 00:03:25,860
So make sure that you or you are cleaning.

62
00:03:26,040 --> 00:03:26,370
Come on.

63
00:03:26,370 --> 00:03:26,850
What's happening?

64
00:03:29,380 --> 00:03:34,150
We are cleaning up this code because if we don't do it right now, it will be it will stay like that

65
00:03:34,150 --> 00:03:35,620
and I don't really like.

66
00:03:36,220 --> 00:03:37,130
So that's the API.

67
00:03:37,150 --> 00:03:39,810
We don't need it anymore, OK?

68
00:03:40,240 --> 00:03:41,700
I think we don't have any error.

69
00:03:41,710 --> 00:03:46,190
So for now, let's move with this one to the right side.

70
00:03:46,220 --> 00:03:47,380
Ian, we are done.

71
00:03:47,380 --> 00:03:48,760
So we have the key.

72
00:03:49,220 --> 00:03:50,060
That's our key.

73
00:03:50,380 --> 00:03:51,820
We do have the fetch method.

74
00:03:52,000 --> 00:03:53,010
That's going to be a weight.

75
00:03:53,810 --> 00:03:55,590
We searching by the key and the query.

76
00:03:55,960 --> 00:03:58,520
And by the way, this query, we should replace it.

77
00:03:58,750 --> 00:04:01,240
So we have this query from the constructor.

78
00:04:01,270 --> 00:04:02,650
We don't need to pass it here.

79
00:04:02,650 --> 00:04:03,310
Like before.

80
00:04:03,490 --> 00:04:07,690
That was just for testing out the testing out the method.

81
00:04:07,780 --> 00:04:08,000
Right.

82
00:04:08,170 --> 00:04:08,610
Testing out.

83
00:04:08,620 --> 00:04:12,100
If we're going to get some response now here, are we going to get this query?

84
00:04:12,220 --> 00:04:15,470
But I need to use this keyword, right, because it's coming from there.

85
00:04:16,720 --> 00:04:19,010
This query, what else we need here.

86
00:04:19,030 --> 00:04:21,790
So we are pretty much done now.

87
00:04:21,790 --> 00:04:28,200
The data, we are going to change that and we're going to say, OK, so the data will stay.

88
00:04:30,780 --> 00:04:32,920
We also need to store this data somewhere.

89
00:04:32,940 --> 00:04:38,730
So what I'm going to do is I'm going to create another piece, dot movies and I'm going to study the

90
00:04:38,730 --> 00:04:42,210
data, see the data, their data that search.

91
00:04:42,420 --> 00:04:43,880
So remember, I use this keyword.

92
00:04:43,890 --> 00:04:49,860
Just take note that I'm using this keyword and you will see that after that, how he's done and how

93
00:04:49,860 --> 00:04:52,050
the object that we're going to do it will look like.

94
00:04:52,050 --> 00:04:58,260
So these DOT movies and what we can do because he comes along after those movies.

95
00:04:58,790 --> 00:04:58,980
Right.

96
00:04:59,190 --> 00:05:02,010
I can kind of like this part here just to see the result.

97
00:05:02,230 --> 00:05:04,890
OK, so we are done here.

98
00:05:04,900 --> 00:05:07,320
So we created the asynchronous function like this.

99
00:05:07,560 --> 00:05:13,350
We just get rid of the function where we don't need to pass any parameter here because we grabbing from

100
00:05:13,350 --> 00:05:16,950
the constructor and remember to change this query in the constructor.

101
00:05:17,160 --> 00:05:17,480
Good.

102
00:05:17,730 --> 00:05:21,830
Now here I'm saving that data and that's it.

103
00:05:21,850 --> 00:05:25,590
Try and catch block where before we work, same as before.

104
00:05:26,070 --> 00:05:28,020
Make sure that you cut this whitespace here.

105
00:05:28,050 --> 00:05:28,560
You don't need it.

106
00:05:28,570 --> 00:05:28,970
Save it.

107
00:05:29,250 --> 00:05:30,320
Go back to the index.

108
00:05:30,810 --> 00:05:32,190
So first first things first.

109
00:05:32,190 --> 00:05:33,060
We need to import it.

110
00:05:33,730 --> 00:05:42,480
Make sure that you import everything on top here import and what we're going to say search from here.

111
00:05:42,540 --> 00:05:45,570
We're going to define the model's search.

112
00:05:45,930 --> 00:05:51,330
Right, because the search is actually located in the SJS models.

113
00:05:51,480 --> 00:05:53,240
So you can see the path here on top.

114
00:05:53,250 --> 00:05:53,580
Right.

115
00:05:53,940 --> 00:05:55,950
So I've got that one semicolon here.

116
00:05:56,130 --> 00:05:57,270
What else we need so.

117
00:05:57,390 --> 00:06:03,720
Well, we still don't have a way how to get the data from the search right from this here.

118
00:06:04,110 --> 00:06:10,800
So what we need to do so what we need to do is actually to pass some kind of the data through the constructor

119
00:06:10,800 --> 00:06:13,920
here because we have the constructor and that will be the first things call.

120
00:06:14,250 --> 00:06:20,970
Now, what I'm going to create, I'm going to say const movie search, and this will be actually the

121
00:06:20,970 --> 00:06:22,810
instance of the search class.

122
00:06:23,070 --> 00:06:25,410
So how we create an instance, new search.

123
00:06:25,440 --> 00:06:30,320
Remember, we have done this before and here I'm going to pass a data.

124
00:06:30,330 --> 00:06:34,230
This data, for example, it will be Batmen, right.

125
00:06:34,770 --> 00:06:38,180
And actually the data will go through the constructor.

126
00:06:38,340 --> 00:06:39,720
So we are setting Dysport.

127
00:06:40,470 --> 00:06:40,740
Nice.

128
00:06:40,890 --> 00:06:42,840
So let's consular.

129
00:06:43,020 --> 00:06:48,870
So what we can do, we can control Lunga, the movie Search and let's see what will happen.

130
00:06:50,850 --> 00:07:01,920
Good, save it and go back to the to the browser, inspect, console log, you know, we do have a lot

131
00:07:01,920 --> 00:07:02,700
of things here.

132
00:07:02,940 --> 00:07:04,410
Let me just hide this one.

133
00:07:04,560 --> 00:07:05,620
Unnecessary things.

134
00:07:05,640 --> 00:07:08,490
OK, so we do have this search object inside.

135
00:07:08,490 --> 00:07:10,370
We do have the query right.

136
00:07:10,500 --> 00:07:11,370
In a prototype.

137
00:07:11,370 --> 00:07:13,860
We do have the access of the get search result.

138
00:07:14,460 --> 00:07:14,790
Right.

139
00:07:15,090 --> 00:07:15,890
This is how we do.

140
00:07:15,900 --> 00:07:21,320
We have this search object with the query inside this.

141
00:07:21,360 --> 00:07:26,760
This is this is the one because we called because Movie Search is the instance of the class search and

142
00:07:26,760 --> 00:07:29,370
we exported this class and imported here.

143
00:07:29,610 --> 00:07:30,900
That's why we do have access.

144
00:07:31,050 --> 00:07:36,840
Now, what one more thing that we do have access is that movie search as an object.

145
00:07:36,840 --> 00:07:38,820
It can access these, get search results.

146
00:07:38,940 --> 00:07:42,840
So let's see if that will be it.

147
00:07:42,840 --> 00:07:48,420
Will that if that will working and we have some sort of reference from the movies is not defined.

148
00:07:48,560 --> 00:07:50,220
OK, but.

149
00:07:51,700 --> 00:07:56,290
We are getting back the search with the movies, with the 10 movies, so we get and get results.

150
00:07:56,320 --> 00:07:57,660
I don't know what is a problem.

151
00:07:57,670 --> 00:08:03,310
We're going to check in a second, but we're getting these very often, and that's pretty much cool.

152
00:08:03,320 --> 00:08:04,630
That's what we need it.

153
00:08:04,630 --> 00:08:07,280
But let's see what was the problem here.

154
00:08:07,870 --> 00:08:12,640
So if you refresh one more, you will see reference to horror movies is not defined.

155
00:08:12,910 --> 00:08:15,710
And actually these movies comes from this line here.

156
00:08:17,020 --> 00:08:21,760
Of course, this movie is not defined because I'm trying to pass constant here.

157
00:08:21,760 --> 00:08:22,990
That is not defined anywhere.

158
00:08:23,200 --> 00:08:25,390
These are not movies, is not seen as movies.

159
00:08:25,540 --> 00:08:25,920
Right.

160
00:08:26,140 --> 00:08:32,860
So it should be these movies that should get rid of that one and save it.

161
00:08:33,310 --> 00:08:33,850
Here it is.

162
00:08:34,970 --> 00:08:36,220
Let's refresh to see.

163
00:08:36,400 --> 00:08:42,370
Here is now we do have the search that's come from the this come from this port.

164
00:08:42,760 --> 00:08:43,900
So we can comment that one.

165
00:08:45,760 --> 00:08:46,230
Right.

166
00:08:46,240 --> 00:08:48,460
So I do have only the 10 results I need.

167
00:08:48,790 --> 00:08:49,150
Right.

168
00:08:49,150 --> 00:08:52,290
Because I told you that the DeSapio will return 10 results.

169
00:08:52,600 --> 00:08:53,580
So congratulations.

170
00:08:53,590 --> 00:08:54,640
What we have done.

171
00:08:54,850 --> 00:09:05,200
We just created our first API call and we also that first apical and such method is done and our searching

172
00:09:05,500 --> 00:09:08,420
model is pretty much working, is doing its job.

173
00:09:08,590 --> 00:09:09,760
So this is how are we going to do it?

174
00:09:09,910 --> 00:09:18,070
We can export the classis from the models and we're going to do this here, the method.

175
00:09:18,250 --> 00:09:20,650
So when I say methods or functions, I mean the same thing.

176
00:09:20,770 --> 00:09:22,240
So they are same, pretty much.

177
00:09:22,420 --> 00:09:26,050
So the functions are here to do his job.

178
00:09:26,050 --> 00:09:30,460
And after that we can just grab that information here in the index.

179
00:09:30,640 --> 00:09:35,890
And after this we go, Jesus, sorry, we've got to change this a little bit here, because this is

180
00:09:35,890 --> 00:09:41,110
not the way we this is not the final, because we need to find a way how we can grab the data from here

181
00:09:41,410 --> 00:09:45,730
not to pass it through the constructor like that, through the class constructor.

182
00:09:45,940 --> 00:09:50,870
OK, but this was the first step and that is pretty much it.

183
00:09:51,130 --> 00:09:53,800
So we have done everything that we have.

184
00:09:54,040 --> 00:09:55,870
The object of the movies.

185
00:09:56,110 --> 00:10:05,050
Right, contains the query and also the get search result contains this area of then and that's pretty

186
00:10:05,050 --> 00:10:05,740
much awesome.

187
00:10:05,770 --> 00:10:08,470
So after that, we're going to do so.

188
00:10:08,470 --> 00:10:12,880
We're going to work probably on The View or the the controller.

189
00:10:13,090 --> 00:10:13,720
I will see.

190
00:10:13,900 --> 00:10:15,000
But it doesn't matter.

191
00:10:15,010 --> 00:10:18,990
It will be still interesting lecture and make sure that you watch that one as well.

192
00:10:19,090 --> 00:10:21,840
So take care and I will see you in the next one.