1
00:00:00,200 --> 00:00:02,540
In this video, we'll be testing out our travel

2
00:00:02,540 --> 00:00:05,560
destination search feature that we just built.

3
00:00:05,560 --> 00:00:06,880
So let's begin.

4
00:00:06,880 --> 00:00:08,660
First, you need to make sure that your server

5
00:00:08,660 --> 00:00:09,720
is running.

6
00:00:09,720 --> 00:00:12,160
So let us check that.

7
00:00:12,160 --> 00:00:16,100
In our backend folder, let us run our server

8
00:00:16,100 --> 00:00:19,440
with the python main.py

9
00:00:19,440 --> 00:00:21,260
command.

10
00:00:21,260 --> 00:00:22,560
That's good.

11
00:00:22,560 --> 00:00:24,860
Next, we also need to ensure that our frontend

12
00:00:24,860 --> 00:00:25,680
is running.

13
00:00:25,680 --> 00:00:27,980
So I'm just going to open up a new terminal

14
00:00:27,980 --> 00:00:32,880
for that, cd into the frontend folder, and

15
00:00:32,880 --> 00:00:38,300
here we can run python-m http.server

16
00:00:38,300 --> 00:00:41,460
and set the port to 3000.

17
00:00:41,460 --> 00:00:43,340
This will use the http.server

18
00:00:43,340 --> 00:00:45,860
module to run our frontend.

19
00:00:45,860 --> 00:00:48,180
And now we have it running.

20
00:00:48,180 --> 00:00:50,380
Now we can open this up in our browser and

21
00:00:50,380 --> 00:00:53,880
get started with our testing.

22
00:00:53,880 --> 00:00:56,040
So our application is loaded up in our browser.

23
00:00:56,040 --> 00:00:58,700
For our first test, let us try to simply submit

24
00:00:58,700 --> 00:01:01,860
the form without entering any location or

25
00:01:01,860 --> 00:01:03,680
selecting any preference.

26
00:01:03,680 --> 00:01:05,760
Let's get suggestions.

27
00:01:05,760 --> 00:01:07,840
As you can see, we quickly get a front-end

28
00:01:07,840 --> 00:01:10,500
validation blocker that tells us to fill in

29
00:01:10,500 --> 00:01:12,060
this field.

30
00:01:12,060 --> 00:01:14,300
We have also implemented this check in our

31
00:01:14,300 --> 00:01:15,400
integration code.

32
00:01:15,400 --> 00:01:17,880
So even if your browser does not support this,

33
00:01:17,880 --> 00:01:20,060
our code is going to make sure to handle it.

34
00:01:20,060 --> 00:01:23,140
Now let us enter a city, say Paris, and see

35
00:01:23,140 --> 00:01:24,240
what we get.

36
00:01:24,240 --> 00:01:27,660
Go in and type in Paris.

37
00:01:27,660 --> 00:01:30,220
It gets suggestions without any preferences

38
00:01:30,220 --> 00:01:32,740
and let's see if we get a list of destinations

39
00:01:32,740 --> 00:01:34,300
back.

40
00:01:34,300 --> 00:01:36,920
So we are getting an error that tells us that

41
00:01:36,920 --> 00:01:39,100
we can't get travel destinations.

42
00:01:39,100 --> 00:01:41,400
Let us debug that to see what we may have

43
00:01:41,400 --> 00:01:42,400
gotten wrong.

44
00:01:42,400 --> 00:01:44,940
Let me recreate the error.

45
00:01:44,940 --> 00:01:47,320
You see, error fetching travel destinations.

46
00:01:47,320 --> 00:01:51,700
So first, let us go into our developer console,

47
00:01:51,700 --> 00:01:54,660
see what we might be missing.

48
00:01:54,660 --> 00:01:57,060
So here we have two errors in the console.

49
00:01:57,060 --> 00:01:58,220
It says response.data

50
00:01:58,220 --> 00:02:00,240
is not a function.

51
00:02:00,240 --> 00:02:02,720
That's on line 2, 7, 6.

52
00:02:02,720 --> 00:02:04,820
Let us check that out.

53
00:02:04,820 --> 00:02:08,160
Back in VS Code, let me close out of the terminal.

54
00:02:08,160 --> 00:02:10,840
And let's scroll down to where we have line

55
00:02:10,840 --> 00:02:14,160
2, 7, 6.

56
00:02:14,160 --> 00:02:15,500
This is where the error is coming from,

57
00:02:15,500 --> 00:02:17,120
because we are catching the error.

58
00:02:17,120 --> 00:02:19,240
But it's telling us that response.data

59
00:02:19,240 --> 00:02:21,100
is not a function.

60
00:02:21,100 --> 00:02:22,820
So let's investigate that.

61
00:02:22,820 --> 00:02:26,800
Yeah, so this is definitely a mistake by me.

62
00:02:26,800 --> 00:02:28,560
This is supposed to be response.json,

63
00:02:28,560 --> 00:02:29,560
not response.data,

64
00:02:29,560 --> 00:02:30,880
probably because I typed data here,

65
00:02:30,880 --> 00:02:32,620
and I just called data here.

66
00:02:32,620 --> 00:02:35,080
So my bad, this is response.json.

67
00:02:35,080 --> 00:02:36,780
Let's save that.

68
00:02:36,780 --> 00:02:38,940
The front end should automatically be updated

69
00:02:38,940 --> 00:02:39,960
when we reload the page.

70
00:02:39,960 --> 00:02:41,560
So let's just head back to the browser

71
00:02:41,560 --> 00:02:44,620
and continue our test.

72
00:02:44,620 --> 00:02:46,040
Now back here in the browser, I'm just going

73
00:02:46,040 --> 00:02:48,140
to keep this DevTools tab open for now, so

74
00:02:48,140 --> 00:02:50,200
that we can investigate our errors.

75
00:02:50,200 --> 00:02:53,440
Let us reload the page a couple of times.

76
00:02:53,440 --> 00:02:57,800
Now let's type in Paris once again, Paris,

77
00:02:57,800 --> 00:03:01,500
and it gets suggestions.

78
00:03:01,500 --> 00:03:05,700
So we have our loading indicator.

79
00:03:05,700 --> 00:03:07,100
And now this time we're getting an internal

80
00:03:07,100 --> 00:03:10,480
server error from our API.

81
00:03:10,480 --> 00:03:12,740
Let us check that out.

82
00:03:12,740 --> 00:03:14,520
Now back in VS Code, I'm just going to pull

83
00:03:14,520 --> 00:03:16,260
up my command line once again.

84
00:03:16,260 --> 00:03:19,180
Let's check what is going on on our server.

85
00:03:19,180 --> 00:03:21,180
So get this internal server error.

86
00:03:21,180 --> 00:03:22,780
No details here.

87
00:03:22,780 --> 00:03:25,300
Let's head back to our browser.

88
00:03:25,300 --> 00:03:26,880
Here in our browser, if we go to the network

89
00:03:26,880 --> 00:03:29,500
tab, we can see the error here.

90
00:03:29,500 --> 00:03:31,800
By the way, let me dock this at the side so

91
00:03:31,800 --> 00:03:36,160
that we can just investigate here.

92
00:03:36,160 --> 00:03:38,500
It says unavailable.

93
00:03:38,500 --> 00:03:40,440
Model is overloaded.

94
00:03:40,440 --> 00:03:41,540
Please try again later.

95
00:03:41,540 --> 00:03:42,760
Now this is something that is coming directly

96
00:03:42,760 --> 00:03:44,840
from the Gemini API so this is not really

97
00:03:44,840 --> 00:03:45,500
our fault.

98
00:03:45,500 --> 00:03:47,420
It's a transient error.

99
00:03:47,420 --> 00:03:50,000
If we click get suggestions again, that will

100
00:03:50,000 --> 00:03:52,500
probably clear.

101
00:03:52,500 --> 00:03:55,880
So I waited for exactly 2 minutes and tried

102
00:03:55,880 --> 00:03:59,880
2 more times and now we get our results back.

103
00:03:59,880 --> 00:04:01,760
Now this just goes to show some of the issues

104
00:04:01,760 --> 00:04:03,860
you can have when you are working with all

105
00:04:03,860 --> 00:04:04,660
these APIs.

106
00:04:04,660 --> 00:04:06,700
As you can see, we got an error that the model

107
00:04:06,700 --> 00:04:08,160
was unavailable.

108
00:04:08,160 --> 00:04:10,280
This is not a very common error.

109
00:04:10,280 --> 00:04:12,580
I think I've only gotten this error once.

110
00:04:12,580 --> 00:04:14,560
So just something to keep in mind when you're

111
00:04:14,560 --> 00:04:16,260
working with these APIs, you should have a

112
00:04:16,260 --> 00:04:18,339
fallback for this type of situations.

113
00:04:18,339 --> 00:04:20,779
But now successfully, we have gotten our travel

114
00:04:20,779 --> 00:04:22,600
suggestions back.

115
00:04:22,600 --> 00:04:26,100
As you can see, we have Palace of Versailles,

116
00:04:26,100 --> 00:04:27,700
Disneyland Paris.

117
00:04:27,700 --> 00:04:28,600
We have the budget.

118
00:04:28,600 --> 00:04:30,980
These are all moderate.

119
00:04:30,980 --> 00:04:33,300
We scroll down a little bit, we see the description

120
00:04:33,300 --> 00:04:35,520
for each place.

121
00:04:35,520 --> 00:04:38,180
It is a world-renowned theme park resort offering

122
00:04:38,180 --> 00:04:40,900
two parks, Disneyland Park and Walt Disney

123
00:04:40,900 --> 00:04:42,060
Studios Park.

124
00:04:42,060 --> 00:04:43,940
We also have the best time to visit Disneyland

125
00:04:43,940 --> 00:04:47,880
which is around Spring, May or early Autumn

126
00:04:47,880 --> 00:04:49,200
that's in Paris.

127
00:04:49,200 --> 00:04:51,160
And the top attractions are the Sleeping Beauty

128
00:04:51,160 --> 00:04:53,500
Castle, that'll be lovely to see, the Big

129
00:04:53,500 --> 00:04:56,540
Thunder Mountain and the Twilight Zone Tower

130
00:04:56,540 --> 00:04:57,440
of Terror.

131
00:04:57,440 --> 00:04:58,760
Interesting.

132
00:04:58,760 --> 00:04:59,600
Awesome.

133
00:04:59,600 --> 00:05:01,240
And now that we have the dev tools open, we

134
00:05:01,240 --> 00:05:05,240
get some behind the scenes view to our request.

135
00:05:05,240 --> 00:05:08,260
Let's click the request that eventually worked.

136
00:05:08,260 --> 00:05:10,040
And first if we start with the payload, you

137
00:05:10,040 --> 00:05:12,580
can see we are sending our location as Paris.

138
00:05:12,580 --> 00:05:14,820
We didn't select any preferences so that's

139
00:05:14,820 --> 00:05:16,560
why this is an empty list.

140
00:05:16,560 --> 00:05:21,180
And in the response, yeah, this, we see our

141
00:05:21,180 --> 00:05:23,880
destination is returned and it's a list of

142
00:05:23,880 --> 00:05:25,980
destination objects with all the parameters

143
00:05:25,980 --> 00:05:28,380
that we want it to send back.

144
00:05:28,380 --> 00:05:29,700
As you can see, we also have the attractions

145
00:05:29,700 --> 00:05:32,080
sent as a list.

146
00:05:32,080 --> 00:05:33,520
Awesome.

147
00:05:33,520 --> 00:05:35,480
Now let me move this to the side a little

148
00:05:35,480 --> 00:05:40,080
bit further and let us try a search with preferences.

149
00:05:40,080 --> 00:05:41,660
Let's say Paris still so that we can see the

150
00:05:41,660 --> 00:05:44,160
difference in what it returns and now let's

151
00:05:44,160 --> 00:05:48,600
say we want beaches, we want cuisine and we

152
00:05:48,600 --> 00:05:51,960
want shopping and nightlife.

153
00:05:51,960 --> 00:05:55,080
Let us hit get suggestions and see what we

154
00:05:55,080 --> 00:05:57,260
get back.

155
00:05:57,260 --> 00:06:01,240
So I got hit with the unavailable error a

156
00:06:01,240 --> 00:06:04,360
few times again but after a few tries we now

157
00:06:04,360 --> 00:06:07,940
get a set of results when choosing preferences

158
00:06:07,940 --> 00:06:09,560
and you see these are quite different from

159
00:06:09,560 --> 00:06:11,140
what we got earlier.

160
00:06:11,140 --> 00:06:16,320
We have Deauville which is a chic coastal

161
00:06:16,320 --> 00:06:19,080
resort town in Normandy famous for its grand

162
00:06:19,080 --> 00:06:21,420
casino, horse racing, American film festival

163
00:06:21,420 --> 00:06:23,620
and beautiful sandy beaches so it's actually

164
00:06:23,620 --> 00:06:27,360
respecting our beach selection and the budget

165
00:06:27,360 --> 00:06:28,940
here is luxury.

166
00:06:28,940 --> 00:06:31,240
We also have this destination and if we look

167
00:06:31,240 --> 00:06:33,040
at the top attractions we have a place for

168
00:06:33,040 --> 00:06:36,440
shopping and dining respecting our food and

169
00:06:36,440 --> 00:06:39,540
cuisine and shopping preferences.

170
00:06:39,540 --> 00:06:42,240
So everything working just fine if we look

171
00:06:42,240 --> 00:06:44,940
behind the scenes we look at our payload we

172
00:06:44,940 --> 00:06:49,040
We see we now send not just our location,

173
00:06:49,040 --> 00:06:54,120
but also a list of preferences here.

174
00:06:54,120 --> 00:06:57,480
And our response or our preview, we also have

175
00:06:57,480 --> 00:07:01,100
our list of destinations, and it contains

176
00:07:01,100 --> 00:07:04,460
objects of destinations now respecting our

177
00:07:04,460 --> 00:07:08,000
specific request that now contains preferences.

178
00:07:08,000 --> 00:07:08,960
And there we have it.

179
00:07:08,960 --> 00:07:12,140
Our travel suggestions feature works perfectly.

180
00:07:12,140 --> 00:07:13,000
So amazing.