In this video, we'll be testing out our travel
destination search feature that we just built.
So let's begin.
First, you need to make sure that your server
is running.
So let us check that.
In our backend folder, let us run our server
with the python main.py
command.
That's good.
Next, we also need to ensure that our frontend
is running.
So I'm just going to open up a new terminal
for that, cd into the frontend folder, and
here we can run python-m http.server
and set the port to 3000.
This will use the http.server
module to run our frontend.
And now we have it running.
Now we can open this up in our browser and
get started with our testing.
So our application is loaded up in our browser.
For our first test, let us try to simply submit
the form without entering any location or
selecting any preference.
Let's get suggestions.
As you can see, we quickly get a front-end
validation blocker that tells us to fill in
this field.
We have also implemented this check in our
integration code.
So even if your browser does not support this,
our code is going to make sure to handle it.
Now let us enter a city, say Paris, and see
what we get.
Go in and type in Paris.
It gets suggestions without any preferences
and let's see if we get a list of destinations
back.
So we are getting an error that tells us that
we can't get travel destinations.
Let us debug that to see what we may have
gotten wrong.
Let me recreate the error.
You see, error fetching travel destinations.
So first, let us go into our developer console,
see what we might be missing.
So here we have two errors in the console.
It says response.data
is not a function.
That's on line 2, 7, 6.
Let us check that out.
Back in VS Code, let me close out of the terminal.
And let's scroll down to where we have line
2, 7, 6.
This is where the error is coming from,
because we are catching the error.
But it's telling us that response.data
is not a function.
So let's investigate that.
Yeah, so this is definitely a mistake by me.
This is supposed to be response.json,
not response.data,
probably because I typed data here,
and I just called data here.
So my bad, this is response.json.
Let's save that.
The front end should automatically be updated
when we reload the page.
So let's just head back to the browser
and continue our test.
Now back here in the browser, I'm just going
to keep this DevTools tab open for now, so
that we can investigate our errors.
Let us reload the page a couple of times.
Now let's type in Paris once again, Paris,
and it gets suggestions.
So we have our loading indicator.
And now this time we're getting an internal
server error from our API.
Let us check that out.
Now back in VS Code, I'm just going to pull
up my command line once again.
Let's check what is going on on our server.
So get this internal server error.
No details here.
Let's head back to our browser.
Here in our browser, if we go to the network
tab, we can see the error here.
By the way, let me dock this at the side so
that we can just investigate here.
It says unavailable.
Model is overloaded.
Please try again later.
Now this is something that is coming directly
from the Gemini API so this is not really
our fault.
It's a transient error.
If we click get suggestions again, that will
probably clear.
So I waited for exactly 2 minutes and tried
2 more times and now we get our results back.
Now this just goes to show some of the issues
you can have when you are working with all
these APIs.
As you can see, we got an error that the model
was unavailable.
This is not a very common error.
I think I've only gotten this error once.
So just something to keep in mind when you're
working with these APIs, you should have a
fallback for this type of situations.
But now successfully, we have gotten our travel
suggestions back.
As you can see, we have Palace of Versailles,
Disneyland Paris.
We have the budget.
These are all moderate.
We scroll down a little bit, we see the description
for each place.
It is a world-renowned theme park resort offering
two parks, Disneyland Park and Walt Disney
Studios Park.
We also have the best time to visit Disneyland
which is around Spring, May or early Autumn
that's in Paris.
And the top attractions are the Sleeping Beauty
Castle, that'll be lovely to see, the Big
Thunder Mountain and the Twilight Zone Tower
of Terror.
Interesting.
Awesome.
And now that we have the dev tools open, we
get some behind the scenes view to our request.
Let's click the request that eventually worked.
And first if we start with the payload, you
can see we are sending our location as Paris.
We didn't select any preferences so that's
why this is an empty list.
And in the response, yeah, this, we see our
destination is returned and it's a list of
destination objects with all the parameters
that we want it to send back.
As you can see, we also have the attractions
sent as a list.
Awesome.
Now let me move this to the side a little
bit further and let us try a search with preferences.
Let's say Paris still so that we can see the
difference in what it returns and now let's
say we want beaches, we want cuisine and we
want shopping and nightlife.
Let us hit get suggestions and see what we
get back.
So I got hit with the unavailable error a
few times again but after a few tries we now
get a set of results when choosing preferences
and you see these are quite different from
what we got earlier.
We have Deauville which is a chic coastal
resort town in Normandy famous for its grand
casino, horse racing, American film festival
and beautiful sandy beaches so it's actually
respecting our beach selection and the budget
here is luxury.
We also have this destination and if we look
at the top attractions we have a place for
shopping and dining respecting our food and
cuisine and shopping preferences.
So everything working just fine if we look
behind the scenes we look at our payload we
We see we now send not just our location,
but also a list of preferences here.
And our response or our preview, we also have
our list of destinations, and it contains
objects of destinations now respecting our
specific request that now contains preferences.
And there we have it.
Our travel suggestions feature works perfectly.
So amazing.