In this video, we'll be wrapping up this chapter
by testing out our weather feature.
First you need to make sure that you have
saved all your files.
All the files that you've worked in.
And also make sure that you're running the
updated versions of the frontend and backend
code.
So let us ensure that.
First let us bring up our backend server once
again.
That's working fine.
Our frontend server is still on, can still
serve us.
So we just need to head over to our browser
and commence our tests.
Now back in the browser, we have our previous
search, which was the image search.
Let us refresh this application once again
to make sure that our changes have kicked
in.
And now I'm just going to be doing our Paris
search once again from the text search section.
It gets suggestions to get some destinations.
We have our destinations coming in.
But we've seen all this before, that's not
why we're here.
We are here for the Check Weather button.
So let us click that.
Let us click for Giverny and see what we get.
So we're getting that.
Probably have some things to fix up in the
loading section,
but yeah, we have our weather information.
Giverny, 65 degrees Celsius, fair weather.
Humidity is 79%.
Wind speed is seven miles per hour.
Now the AI insight that we get back is that
the weather in Giverny is currently fair with
a temperature of 65°C.
Humidity and wind speed information is here,
is advisable to
stay hydrated and wear light clothing if you
plan to explore the gardens.
Pack sunscreen and a hat to protect yourself
from the sun.
Now before we do our next test, let me check
the loading indicator that was a bit buggy
and see where we missed something.
Now back in VS Code, let me close out of this.
Let's go to that indicator, it's around here.
Yeah, let us see what we missed.
So after checking for a few seconds,
I noticed that we're not closing this div.
So I think that's where our bug is coming
from.
So let's close that.
Let's make sure that other elements
are closed appropriately also.
Good.
Now let's head back to our browser and try
once again.
Now before we run this application once again,
note that Giovanni gave us 65°C, the humidity
was 79% and the wind speed was several miles
per hour.
We're going to be checking to see that the
next query does not display the same values.
So first, I'm going to click out of this,
refresh the page, do our Paris search once
again.
We have some new results.
Now let us check Chautier de Chantilly.
Hope I'm pronouncing that correctly.
Most likely not.
As you check weather, and you see our weather
loading screen shows properly now.
Didn't have that weird bug.
And now for this, we have a temperature of
82 degrees Celsius, unlike the 65 we had for
Giovanni, and humidity of 41%.
So that just kind of shows the randomization
logic that we wrote for our function that
is returning the weather information.
Like I said, in a real world scenario, you
want to use an API like the OpenWeather API
to query this information so you are getting
real world information, real time, real life
information.
But as you can see our weather feature works
fine and that's
just perfect.
We have successfully implemented a weather
retrieval feature
for our travel companion application.