In this video you're gonna be wiring up the weather.
End Point.
We have the end point created and we already have the code written to geo code and address and get the
forecast from the geo coding output.
We're gonna put all of that together to actually finalize this end point.
Now the first thing we're gonna do is copy some of the files from the weather app project over to the
new folder.
We already wrote great code for geo coding and for fetching a forecast and we're going to repurpose
it.
So right here I'm going to open up the finder on my machine.
I'm going to go into the node course directory and from the weather app project we're going to grab
the entire utilize folder.
So I'm going to copy that to the clipboard that's going to be our two JavaScript files which we're gonna
need and we're gonna bring those over to the web server project.
I'm going to paste the Utilities folder right inside of the source directory.
So in here I'll paste the item adding the utilize folder inside of there.
So now we have the utilize directory in our project.
The one we're working on and we can use both forecast and geo code inside of there.
Now if you remember those two files they took advantage of the NPM request module.
We're gonna have to make sure we have that installed and currently it is not installed in web server.
So down below I can just shut down node on using control C and install it NPM.
I request at two point eighty eight point zero.
I'm gonna go ahead and fire that command off to install a request in the web server project and once
it is installed I'll just cycle through the previous commands using the up arrow and then restart node
man exactly like we had it before.
Now we can use both geo code and forecast inside of our callback right here to get the correct forecast
information sent back inside of the weather app.
Project in app dot J asked we had an example of what this took and we used the nested callback pattern.
So right here we used geo code.
Then we went down to use forecast.
Now the first thing we did is we actually checked if there was an address or not.
And we already have code that gets that done in place.
We already have an if statement up above that makes sure the address exists which means that down below
right here we can start the process of calling geo code which is the first thing we do inside of else.
Now obviously we can't console that log results to get them back to the requester.
Instead we're going to be using response dot send to send those results back.
In the case of an error for either geo code or forecast we'll send back an object with the error property
providing the message as the value for that property.
And if we get all the way to the end and things go well we'll send back an object like this one though
instead of having location and forecast data dumped to the terminal they would be added on to the object
we send as the response.
So console dot log calls get replaced with calls to response dot send since we're working inside of
our Express route.
Handler actually getting this done is going to be your challenge for the video.
You know how to do it.
We've gone through all of the necessary steps before and down below.
I have some challenge comments just to make sure we're all headed in the right direction so goal y are
up forward slash weather.
Right now it's sending back dummy data.
We want to make sure it can send back real forecast data based off of the address it provided as part
of the query string.
Step one you're gonna have to load in both of those functions into this file and that's gonna be easy
to do since that utilize folder has been copied into this project.
Next up you're going to actually geo code the address to get the coordinates.
If something goes wrong send back the error.
If things go well you're going to use those coordinates to get the forecast.
If something goes wrong when getting the forecast send back an error.
If things go well you're going to send back an object that looks exactly like this but with a real forecast
string the actual location that was used an address which will stay the same.
Now when you're done you want to test things out visiting a u r l like this one or address equals.
Boston should result in a real forecast string and a real location showing up.
Then switch it up picking a different location maybe a location like your current one and make sure
you see the forecast you're currently experiencing where you are.
Take as much time as you need to knock this out.
Feel free to refer back to the code we wrote before to change these two callbacks together.
When you're done test your work then come back and click play
how'd you do.
Let's go ahead and kick things off with step number one.
We're gonna load in the functions that we're going to need.
So up above at the very top of the file I'm gonna use require a couple of times to grab those two functions
and I'll go ahead and kick things off by grabbing geo code.
First though the order isn't important.
So geo code is the function I'm gonna grab.
I'm gonna get it as the return value from require and I'm gonna load in my local file dot forward slash
utilize forward slash geo code.
Next up we have the forecast function.
So right here I'll define that and I'll use require to load that file in dot forward slash utilize forward
slash forecast now that we have both of those functions available we're ready to actually use them in
the route handlers.
Down below I said handlers plural.
There's only just one.
And it is the one right here for the moment.
I'm going to comment out our old call to response dot send.
I'm gonna leave it in place just so we can remember which properties were supposed to send back.
Though I'll actually recreate it when I write my code four steps two and three.
Step two is to use the address to geo code.
So right here we are going to call the geo code function and I am going to pass the address in request
dot query dot address.
Now if you remember geo code takes in two arguments.
The second is our callback function.
And if you forgot exactly how anything worked you were allowed to crack open those files to jog your
memory.
In this case we get two potential arguments.
We either have the error message as a string or we have our data as an object.
Now when we had learned about dish structuring we actually dish structured that object creating individual
variables for the properties.
We did that in app dot J.S. inside of the weather app project.
I'm gonna do that right here as well so I'm going to d structure latitude off of there.
I'm also going to do the same for a longer dude.
And finally I'll do the same for location now down below.
The first thing we want to do is check if there was an error.
If there was an error we don't want to go on to run the forecast function because it's not going to
work.
Instead I'll use return along with response dot send to wrap things up we're going to send back an object
with an error property and the value for that is going to be a variable with the same name.
So this is a great use case for the shorthand.
Perfect.
Now maybe you didn't use the shorthand or you didn't put it on one line.
That's fine as well.
At that point we're talking about differences in syntax preference down below.
After that if statement We know that geo coding went well and it is time to actually call forecasts
so I'm going to call the forecast function passing in these three arguments.
It needs the first being the latitude.
The second being the longitude and the third being a callback function.
We're gonna have the error and if we don't have the error then we'll have our forecast data.
I'm gonna setup variables for both of those.
Excellent.
Now we can actually set up an error handler for forecast.
If there is an error.
That's OK.
We're going to stop the function and we'll use response.
Dot send it to send it back.
Excellent.
Now.
Right here.
This code only runs if everything went well.
And we're gonna work on sending back the object using the same structure we had below.
So response dot send.
I'm going to send back an object with a forecast property the value will come from the forecast data
variable up above.
Next up we have the location property.
There's a variable with that name and that's where we're gonna get the value so we can use these shorthand
right here for that.
Next up the last property is address and that value comes from.
Request duck query dot address.
Perfect.
Now that we have all of this in place I can remove the commented out call from before.
I'm also going to remove the challenged comments as the only thing left to do is test our work.
Then I'm actually going to test our work by saving the file and refreshing things in the browser.
Over here I'm seeing my static output per forecast and location.
Now I am searching for Boston.
So let's refresh the page and see what happens right here.
I'm getting the weather for the following location.
Boston Mass in the United States.
I have the input and I have my forecast partly cloudy starting in the evening it's currently twenty
nine degrees out and there is a zero percent chance of rain.
So there we go.
We now have the finalized end point.
That takes in an address and sends the forecast data back from here.
We're going to actually wire that up in the web app.
So we have the input field and we show the forecast on the screen here as a nice rendered HDMI page
as opposed to the format it comes in which is Jason.
That's where we're going to stop for this one and don't worry you're going to get a ton more experience
creating Jason based end points throughout the class.
We're going to work on a major project with database storage and authentication a bit later.
This is just an introduction into the idea of express roots.
Jason and asynchronous development.
All right.
That's where we're going to stop before this video in the next one we're going to continue on integrating
this you are well into our web application.