Before we dive into the topics which we're going to cover in this lesson I want to take a quick moment
to talk about the big picture goal for this section.
The goal is to allow users to be able to fetch a forecast for their location from the weather Web site.
So instead of someone running a command from the terminal to get the forecast they'll be able to pull
up a you are all in the browser here they'll see a form they type their address into an input they click
a button and a few hundred milliseconds later their weather information shows up.
This is going to provide a much nicer interface for interacting with our node application.
They'll be able to do so via the browser as opposed to doing so by running commands from the terminal
getting all of this done is going to require us to actually fill out that one route we created earlier
in the class that was forward slash whether when we originally created it we just had it send back some
static Jason.
We created an object with some dummy data inside the goal in this section is to have the code inside
of here actually use the geo code and forecast functions we created earlier.
It's then going to send that Jason data back to the browser and the browser will be able to render the
forecast correctly.
Let's go ahead and kick things off in this video by talking about how the browser is going to be able
to send the address to this route because think about it the weather route needs to know what address
it should geo code and fetch the forecast for to get that done and we'll use a query string.
So the browser is going to provide a query string as part of the.
You are all the server will then read the query string value to get the address information to kick
things off.
I'm going to close all open files except for app dot J s that's the only file we're going to need inside
of the web server folder and I am going to collapse the public and templates directory just to stay
a bit organized.
Now you've already worked with query strings before you'll remember that we used them with the geo coding
API over in weather app.
We had the utilize directory in there we had geo code dot J S inside of this file when we created the
U.R.L..
We used a query string to provide the access token and then we provided that value.
And I also used it to set up one of the options we explored which was limit limiting us to just these
single first result.
We're going to go ahead and also use a query string with the end point we're going to create to accept
the address to get started.
Let's go ahead and create a second.
You are real that sends back Jason we're going to use that to experiment with query strings and express
then you'll use what you've learned as the challenge to integrate that into forward slash weather up
above.
So down here app dot get let's set up a you are all like forward slash products let's say we're creating
an end point that sends back products to be displayed in the browser on our e-commerce site.
Now right here we still get request and we still get response.
And for the moment we're just going to send back some Jason using response dot sent.
I'm going to send back and static object and the only property we're gonna have on here is products
and we'll set it equal to an empty array sending back no products.
Now I'm gonna save app dot J S and we're going to crack that you are L open in the browser I'm going
to leave the web app open in a separate tab I'll visit local host three thousand forward slash products.
Now when we visit this we are going to get our static Jason showing up and this is never going to change
if we wanted to actually implement some sort of search feature we would use a query string and remember
query strings get provided on the end of the U.R.L. we start them off with a question mark and then
we provide key value pairs to pass additional information to the server.
So in this case the format is key equals value for an e-commerce site.
I might want users to be able to search amongst the list of products for a specific one and for that
I could set up a search query argument search equals and let's say the person is searching for games.
So I would put their search term right inside of here.
Now if I hit enter this is going to fire off another request to our Express server but it's going to
pass along this additional information.
Now since we're the ones creating the back end we can choose to support as many or as few query string
options as we'd like.
We can support 0 1 or 30 in this case we're passing just one along.
If we did want to provide a second or a third we would just separate them using the ampersand that is
shift seven on your keyboard followed by another key value pair maybe I want to setup support for something
like rating which allows me to search for products that have a specific rating let's say I want to only
see five star products.
So the best games possible if I send this off now we're passing two pieces of information along to the
server.
And the question is how does the server actually get that information.
Now this information it's available to us inside of our Express route handler.
That's our function.
Right here we have both request and response.
And we've used response plenty of times before information about that query string though that lives
on request.
Let's go ahead and explore that down below the request object has a query property on their query is
also an object and this contains all of the query string information before we go any further let's
just dump this to the console to see what exactly we get.
So right here console dot log then going to dump request dot query to the console.
I'll save at DOT and J S so the server restarts and all we're gonna do is refresh our current page in
the browser.
Now the response is still exactly the same.
But if I head back over to visual studio code down below I can see I'm getting an object printing I
have a search property with the value games and I have a rating property with the value of five.
So the query string that was provided along with the request has been passed by express and the data
is made available to us in this object.
If I wanted to grab the string value for search I could use request dot query dot search.
Now I'm grabbing one of the individual values and if I refreshed the browser once again we would be
able to see that string print inside of the terminal.
So being able to work with request dot query is how we're going to access those additional values passed
along with a request.
Now Express doesn't give us a way to force a given query option to be provided.
So for this example let's say that search needs to be provided.
You have to search for something but you don't have to provide a rating.
If we wanted to actually set that up we'd have to use an if statement to add a little bit of conditional
logic inside of our function.
Let's go ahead and do just that making sure that search is actually there before we send back the products
right here to do that.
We will use an if statement I am going to set up an if statement and the goal is to run this if statement
only when something has gone wrong when there is no search term.
So right here let's start by accessing these search request dot query dot search.
That is exactly what we just used down below.
Now this is only going to run the code block when search is provided.
We want the opposite effect so to flip that we will use the logical not operator to flip true to false
or false to true.
Now this code is only going to run when there is no search term and that is the intended result.
Right here.
What are we going to do.
I'm going to use response dot send to send back some Jason right here I'm going to provide the object
and I'll set up an error message providing them with a little feedback.
I can say you must provide a search term perfect.
Now if we don't provide search we're going to see our error message showing up.
And if we do we'll see the product's array coming back.
Now there's a problem with this code.
I'm about to intentionally generate an error message because it's an error that comes up in the Q and
A very often and I want to make sure that students actually know what's going on.
So I'm gonna save app dot J.S. making sure node man restarts over in the browser what we're gonna do
is get rid of search we can actually get rid of the entire query string just heading over to forward
slash products.
I'm gonna do just that.
And what do we get.
We get our message showing up correctly.
Error.
You must provide a search term in the terminal though you can see we did indeed get a javascript error
printing.
And if I scroll up to the top of it it says the following cannot set headers after they are sent to
the client.
You're gonna see this error message when you try to respond to a request twice.
You can't do that.
H TTP requests have a single request that goes to the server and a single response that comes back.
In this case we are indeed trying to respond twice.
If there is no search term we use response dot send to send back the error but then the code down below
it still runs we can see undefined was printed because there was no search field provided.
That's coming from this line right here.
Then we'll use response dot send again to try to send back the other object.
This is what's causing the error.
So if you ever see cannot set headers after they are sent to the client that means you are sending two
responses back when you can only send one.
Do address this with our current setup.
All we need to do is add return right here before response dot send by using return we are stopping
the function execution that is this function right here.
So if there is no search term we stop the function and send back their response which means the code
down below doesn't run.
Now you could have also just added on else and put the success case code right inside of here.
But this is a pretty common pattern with Express so I wanted to make you aware of it.
So when you write express code and look at other code people have written code like this actually makes
sense to you.
So now we have enforced that the search term is provided.
I'm going to save app dot J S and scroll to the bottom.
I can see that my server did restart.
There are no errors and if I refresh things in the browser we still get our error message.
But this time over in the terminal nothing has gone wrong since we only tried to respond a single time.
Now let's add on search and makes sure that still works right here.
Question mark.
Search equals games and I'll leave off ratings since that shouldn't be required.
And right here we are now getting our success content showing up down below.
We have our little products Jason available so that is it for the basics of query strings.
The client whether it's us typing a You are all in the browser or us providing a you RL V a client side.
JavaScript can set up that query string it gets sent off to the server the server can use that information
with their request and it can send a response back.
Now currently we aren't using these search term to do anything meaningful but down below you could imagine
we had an array of products and we used the array filter method to actually filter.
That brings us to the other route we have set up forward slash weather now that we've explored how we
can use the query string.
It's gonna be your challenge for the video to do something similar for the end point.
We're actually going to wire up with the weather application right here.
What I'd like you to do is update the weather end point right here to accept an address.
Now this address which will be provided as part of the query string that's going to be required.
And it's gonna be the only query option that we support.
So you have to provide the address.
Otherwise we won't know which location to fetch.
The weather for.
So if no address is provided you're going to setup the root handler to send back an error message.
You can send back a Jason object like we did down below setting up an error property with a message
like address must be provided.
Now if there is an address that's great for the moment you're going to continue to send back these static.
Jason above in the next several videos we'll worry about actually geo coding things and getting the
forecast then these values will no longer be static.
They'll be dynamic.
Now when you do send this back I also want you to add on an additional property address and the value
for address should just be whatever address was passed in.
So you're taking the input and you're adding it on to the response sending it back just so that information
is available.
Now step number three you want to go to forward slash whether when you do that you should see the error
saying you must provide an address so you'll go over to forward slash whether with the address query
options set up in the query string and when you do this I would expect to see this object with the address
property added and the value would be Philadelphia matching up with the value right here.
You could then visited again with a different new RL to make sure you see that as you change the address.
All right.
Take as much time as you need to knock that one out test your work and when you're done come back and
click play
how'd you do.
Let's go ahead and kick things off in the browser by switching up are you are real.
I'm gonna go from forward slash products to forward slash weather.
Now in this case I'm not providing the address so I would expect to see my error showing up instead
of seeing the dummy data to actually get that done.
We're gonna continue on with step number one.
No address.
Send back an error message in here.
We'll use an if statement like we did down below.
So if the condition and the code to run we're going to start by accessing request dot query dot address.
Now this is going to run the code if there is an address we'll flip that using the logical not operator.
Now the codes only going to run when there's no address and we're going to send back that error.
I'll use return to make sure the function stops.
Then I'll use response.
Dot send to send back the following object.
The object will have a single property error and we'll provide a little message that's e r o r perfect
the string can say something simple like you must provide an address the exact text you chose to set
up here is not important for the challenge.
Anything similar would have worked.
Now we have the error handling set up.
If there is an address I want to continue to send back the Jason and that is exactly what this code
is going to do.
If there is no address I now get my error.
Let's go ahead and set one up though.
We use the question mark address equals I'll use Philadelphia as mine and right here.
I do indeed see that static Jason showing up.
Now I wanted you to also add an additional property on to the object that contains the value provided.
So right here address is going to get its value from request that query dot address which we know exists
since we already added the conditional logic up above.
Now that we have this in place I should be able to refresh the browser once again see my additional
property with my search term right inside I'm going to swap out Philadelphia for something like Boston
and if I run that what do I get.
I'm seeing Boston show up as the value for address now that we have the query string in place.
We are indeed headed in the right direction and the weather endpoint is going to be easy to continue
to expand on and actually use that address to geo code and fetch the forecast information down below.
I'm gonna remove those challenged comments save the file for the final time in this one and that's where
we're gonna stop for the moment.
Now that we know how to get additional information along with their request we're gonna continue on
in the next video.
So stay tuned and I'll see you then.