In this video you're going to learn how to make HDTV requests from your no J.S. application which I'm
very excited to get to.
Why is this so important.
Because this is how your application is going to be able to communicate with the outside world.
So if you want to get real time weather data into your app you're gonna have to make an HDTV request
if you want to send an email to someone from your application that's gonna be a another H TTP request.
And if you wanted to send someone a text message using something like the Twilio API that would also
be an HDTV request.
It is at the core of building real world applications that actually communicate with the outside world.
Now with those three examples the weather data emails sending and text message sending.
It's going to be our node application making HDTV requests to another companies servers to get some
task done.
That means somewhere in our code we're gonna specify the.
You are well we want to make a request to.
This is provided via the api is documentation.
We're going to fire that request off sending some data possibly and getting a response back.
So to get weather information I would send to the location I want the weather information for I would
then get back the weather information and I could use it in whatever way I wanted to.
Now let's go ahead and explore the weather API.
We're gonna use in this video if we head over to the browser we can find this over at Dark Sky dot net.
This is Andrew from the future with a very important update.
If you head over to Dark Sky dot net you'll see this banner right up top right here.
It says that Dark Sky has joined Apple and that is indeed true.
They go into more details about the acquisition right here.
Now one of the many downsides of this acquisition is that the dark sky API is getting shut down so they're
shutting down the API.
They're shutting down the Android app and they're even shutting down the web app.
So by the time you visit dark sky dot net it's possible that this right here doesn't even show up.
You might even get redirected over to Apple dot com.
The app store or somewhere else.
So there was no notice given for this.
So one day I woke up the acquisition went through and all of the sudden the class was broken.
So I'm coming back to update the class.
We'll be switching from the dark sky API to a real time weather API provided by a service called weather
stack.
Now the good news here is that these two API eyes are pretty similar so we'll still be able to build
our real time weather application with node.
We'll just source our weather data from a different API.
Now this will require a few small changes so throughout the next several lessons I'll be coming back
in with interruptions like this one when we need to change something to work with the new API.
Now in the original lesson what we did from here is we signed up for the dark sky API that is no longer
possible.
So instead let's go ahead and sign up for the weather stack API.
We can find that by opening up a brand new tab.
And right here I'll head over to whether stack dot com.
Now like dark sky we can sign up for weather stack for free.
And there's no credit card required.
They also have a generous free tier allowing us to make a thousand requests a month.
So right here let's take a moment to sign up for the API then we'll figure out how we can get that real
time weather data.
Let's continue on by clicking sign up for free to create an account that will redirect us over to their
pricing page.
And as mentioned we'll be using their free tier where no credit card is required.
This comes with the thousand API calls a month which is more than enough for what we're building and
we get access to their real time weather data which is exactly what we're looking for.
So right here let's click sign up under the free tier option.
Then we'll just provide some basic account details starting off with our email and a password to log
in down below.
The only other information we need to provide is our address right here.
So I'll take a quick moment to provide this information.
And once we have that in place we'll be able to use the API to fetch that real time weather data.
So down below I am all done with that.
If we keep scrolling down we are at the end of the form.
We have company details which are not required so I'll leave those off.
Then all we need to do is confirm that we are not a robot and we have to agree to their terms and conditions.
Now you could choose to opt out of this right here.
But when you're signing up for an API that you're using in an application I would recommend always receiving
the notifications they sent.
If the API changes you want to get notified ahead of time so you can change your application before
things break.
If the API goes down you want to get notified so you can pass that information along to your users who
are seeing a broken application.
So it's always best to get notified about the API as you're working with.
Right here.
We should be able to sign up.
It's going through the process.
And when the sign up process is complete we are brought over to this quick start guide.
This gives us all of the information we need to fetch real time weather data.
So let's explore what we have right here.
The first thing we have right here is your API access key so your API Key is a randomly generated string
and your API Key will look different from mine.
This is kind of like a password.
You'll end up using your API key to authenticate when making requests to whether stack.
So when you're working with whether stack you have to have an account in order to fetch data.
And this API key is how weather stack links.
The request you've made with your account that's going to allow it to keep track of how many requests
you've made.
So the API access key is something we'll use in just a minute when we start to fetch real time weather
data and you should treat this like you would any other password.
So it's not something you'd want to share in a public setting.
Next up down below they list out the various API endpoints that are supported.
Now these endpoints are just different.
You are cells that allow us to access the various services that whether stack provides.
So right here we have things like their current weather data their historical weather data and other.
Now as mentioned the only data we get access to on the free plan is the current weather data and that's
fine since that's all we need.
So down below they also have the base you are.
It is a TTP colon forward slash forward slash API weather stack dot com.
So what I'd like to do from here is make our first request for real time weather data.
We'll end up combining this base you are all down below with other information including our API access
key up above.
So let's take our key.
I'll copy that to the clipboard then we'll head over to a brand new tab and we'll make our first API
request for real time weather data.
So right over here for the moment we'll make this request from a browser tab once we understand how
it works and we can see the data we have access to will end up making the same request from our no J
Yes application so we can use the weather data in our weather app.
For now let's just explore the basic structure.
So as mentioned we start off with H TTP colon forward slash forward slash that is API dot weather stack
dot com.
Then to access the current weather data it is a forward slash current.
Now this is a good start but we're still missing some important information we have to provide our API
key as well as the location that we're trying to fetch the weather for to get that done what we'll do
is set up a query string right here we can set up our query string by adding a question mark then we
can set up as many key value pairs as we need to to add things like our API key and our location.
So the format for the query string is key equals value.
If we needed to set up a second key value pair I could do so by using an ampersand followed by my second
key value pair right here.
As an example I could set name equal to Andrew.
So this is the general structure we'll be using we'll end up setting up key value pairs for our API
key and the location we're trying to fetch the weather for.
So right here let's remove everything after the question mark.
And the first query parameter that we have to provide is access underscore key.
This is where we provide our API key so I'll set access key equal to the API key that we just copied
to the clipboard.
Right here I'll paste that in after the API key.
I'll set up an ampersand allowing me to define a second key value pair.
The second one is for the location.
So right here I'll set query equal to and what we'll do is provide a latitude and longitude set of coordinates
for the location we're trying to search for.
Now later on we'll figure out how to search for something by its name like Philadelphia.
Then we'll get to the latitude and longitude so we can use it right here.
But for the moment let's just provide the coordinates for Alcatraz in San Francisco.
So right here that would be 3 7 dot 8 2 6 7.
Then we'll add a comma followed by the longitude.
That would be minus one to two dot for two three three.
So we've set up our base U.R.L. that is all of this stuff over here.
From there we set up our access key making sure that weather stack knows who we are.
Then we've set up our query allowing us to fetch the weather for that specific location.
Now once again this is our request we'll end up making from our code later on.
For now though let's hit enter and see what happens right here.
The request was made and what we're seeing is our weather data for that location.
Now in Firefox when you pull up a U R L and the response is Jason it uses this tool to make that response
a bit easier to work with.
Well I'd like to do though is head over to the Raw Data tab.
So if we switch over to raw data this right here is the raw response.
This is Sam Jason exactly like the Jason we worked with in our notes application.
So if we had access to this in our code we know that we could take it we could pass it and we could
start to access those properties.
Now let's head back over to the Jason tab.
So right here we have our nice past weather data.
So that is it for the differences for the moment now that we have this U.R.L. in place.
We're going to jump back in to the regular lesson now in the regular lesson we'll end up making this
H TTP request from our node application that's going to allow us to access the weather data in our app.
Now there will be a couple of other changes throughout the lesson so I'll jump back in with a couple
of other interruptions as those come up.
For now though let's jump back in to the regular lesson let's go ahead and move into visual studio code
and actually make the same request we're making here.
But from our application to start I'm going to delete everything in app dot and J S we have our little
set time out example and that helped us illustrate how asynchronous programming works.
But now it's time to move on to some more real world stuff.
Now to make HDTV requests there are a few different things we can do.
We can use the core node modules which we will cover a little bit later but those are very low level.
So it requires you to write a lot of unnecessary code to get everything working together.
There are a bunch of NPM modules that are essentially wrappers around that core module making it much
easier and more streamlined to make HDTV requests.
And that's what we're going to use throughout the course.
Although as mentioned we will explore how to do it the bare bones way shortly.
For now we're going to use a single NPM module to make our HDTV requests and appropriately enough it
is called request.
You can find it by googling NPM request that is going to hopefully bring you to the package page.
Right here it is NPM J Ask.com forward slash package forward slash request.
We can visit that page to learn a bit more about what it's going to do for us and this like the other
packages we've used is super popular with about six million weekly downloads.
This is Andrew with a quick update.
If you pull up the NPM package page for request you'll see this message right up top that says this
package has been deprecated and that's true.
If you request package has indeed been deprecated which just means that the original maintainers no
longer plan to release new versions or continue working on the project the existing versions worked
just fine though and you can still use request as you move through the class.
You'll still be able to make those HDTV requests without any problem.
So request is deprecated but it's not going anywhere.
Down below we can see that almost fifty thousand other NPM packages depend on request and the weekly
downloads are at an all time high with 20 million weekly downloads.
So as you go through the class you'll be able to continue using request exactly like I do in the videos.
Now if you're looking for an alternative package that's not deprecated.
The good news is that the postman organization they have forked the request module and they're continuing
to support it releasing new versions.
You can find that by just changing the You are all a little bit.
So right here just before request and right after the forward slash I'll add postman hyphen.
So now we're pulling up the package page for a package called postman hyphen request.
If I go ahead and visit that page right here you can see this is the NPM package page for the alternative
version.
So the postman organization is great.
We'll actually use the tool postman later in the class to test our own API eyes as we start to create
them for the moment though we won't talk about postman but postman request is a nice alternative to
the request module.
It has the same API so you can install the latest version of this and use this exactly like I use request
in the class.
All right.
That's it for this quick interruption.
Let's jump back into the regular video.
Remember you are more than welcome to just use request or you could go ahead and use postman request
now if we scroll down we can see all sorts of different examples as to how this can be used.
We're going to explore more advanced features like promises and async await a little later.
For now we're gonna get started with a nice simple example.
Let's go ahead and actually install this into our project so we can make a request from our node application
over inside of the terminal.
We first need to initialize weather app as an NPM project.
If you remember we got that done by running NPM in it from the root of the project.
So in this case from the weather app folder.
Now when we ran that command we got brought to a questionnaire asking us to fill out a ton of values.
And if you remember we used the default value for all of them.
So what I'm going to do is actually use control C to shut that down.
So I've done nothing.
Then I'm going to use NPM in it again with the Y Aflac.
This just says answer yes to every single question using the default value.
So we don't have to go through that little questionnaire when we do this it automatically generates
the package.
Dot Jason file with all of the default values in place.
We can now customize them to fit our needs.
And now we can run npm install commands to install the modules we need from the terminal.
Let's go ahead and do just that.
I'm going to use NPM I which is short for install to install the request module at the latest version
two point eighty eight point zero.
Now I'm not using the G global flag since this is a module I want to require and use inside of my scripts.
So let's go ahead and get that done.
I'm gonna run the command that is going to install the request module.
Then we're gonna move over to app dot J S to load it in and use it.
So inside of app not J.
S Let's go ahead and start by requiring request.
I'm gonna make a constant called request and I'm going to require the module we just installed which
was indeed a request.
And this is actually going to work because we installed the module we have package.
Jason we have package lock down.
Jason and in the node modules directory we have all of the necessary modules to get request to work.
So we have request itself as well as all of its dependencies showing up inside of there.
Now that we have this in place let's go ahead and use it.
We need to work with that same you are L we just explored in the browser where we got the Jason data
back over in the browser.
I'm going to visit that tab where we were getting the Jason response and I'm going to grab the U.R.L..
This is the U are L that contains our secret key as well as that random set of coordinates which we
will learn how to change later.
So instead of visiting the You are all in the browser and seeing the data here we're going to visit
it via the request module and we'll get that data back as a variable we can access in our code.
So right here let's start by storing the U.R.L..
I'm going to create a concept you are all whose value will be a string and I am going to paste the entire
contents of that you are L right here this is Andrew with another quick update.
Make sure you use the weather stack.
You are all that we just explored earlier.
So take the entire U.R.L..
Copy that to the clipboard and use that as the value for the U.R.L. variable.
You won't be using the dark sky.
You are all like I do in the lesson.
Instead you'll be using your weather stack.
You are all we're not going to change anything for the moment.
We're just going to make their request so we get this exact same data back.
But in our note app now from here we can actually use request which is a function to make the request.
We are going to call it providing to it to arguments.
The first is an options object which outlines what we'd like to do.
That's where we provide the U.R.L. and other information.
The second argument is a function to run once we actually have that response.
So once the data is available for you to use in your application let's start with that first argument.
That is the options object right here.
We're going to set that up.
And as mentioned there is a single required property which is U.R.L. we have to provide the U.R.L. value.
We want to use and I have that in a variable with the same name.
That's all for the first argument.
The second argument after that object is going to be a function.
This is the function to run when we're actually getting the response back.
So right here I'm going to set up that callback function and this function will run when either one
we have the weather data or two.
Something went wrong and we weren't able to get the weather data.
So maybe as an example your machine doesn't have a network connection.
Maybe you're not connected to the Internet.
In that case this request would indeed fail.
Now this function gets called with two arguments it gets called with an error.
If there was one otherwise this argument will be undefined and it gets called with the response where
we can actually access the response.
This includes all sorts of information.
And it does include the Jason response we need.
Now if you're not familiar with the ins and outs of each TTP request that's OK.
We're actually going to dissect them in detail in just a couple of videos for now let's go ahead and
try to use the response in our program to get started.
Let's go ahead and just dump the response object to the console.
So console dialog response.
This is going to contain everything about the response way more information than just that Jason data.
I'm going to run the program from the terminal down below.
I will use clear to clear the terminal output then node A.J. asked to run our script.
Now what's going to happen is a ton of information is going to get dumped to the terminal.
We can see there are hundreds of lines of information.
Response has a lot of properties we can use and those properties have other properties and so on and
so on.
Now if we start to scroll up we can see we have one really long string shown in green.
This is actually the string Jason data that we want to pass and access.
If we scroll up to the top of that string this is on the body property.
Now there are plenty of other properties for getting the response headers or these status code or that
you are L or any other information you would want about their request.
We'll explore those a bit later when we dissect HDTV requests.
For now let's just focus on that one property the body property which contains our data represented
as a Jason string.
Now we already worked with Jason so we know how to pass a Jason string right here.
I'm going to create a concept called data and I'm going to set it equal to we'll be using Jason dot
pass to pass our data and the data lives on response dot body.
Now we're gonna go ahead and actually work with that data.
I'm going to log the data object to the screen right here we have app.
J ust in its modified state.
Let's go ahead and rerun the program.
I can just use the backspace key to bring me back to the terminal down below and from here we're going
to rerun the script with our passing code in place.
So I'm going run node apt at J.
S. This time we're still going to see a lot of stuff print but a lot less.
Now if we scroll up we're going to see an endless amount of information.
For example we have all of these objects I see properties related to wind speed and wind gusts I have
temperature min and max for the day all sorts of useful forecast information and we'll explore more
of this in the next video for now to wrap up I just want to access a single property that is the currently
property so data dot currently.
This is Andrew with one last update for the lesson with the dark sky API it was data dot currently with
the V weather stack API as shown below it is data dot current so make sure to use that property in a
couple of moments I'll talk about properties on the old response that don't exist on weather snack but
don't worry we'll start to talk about the differences in data in the next lesson this contains current
forecast information and if we rerun the program this time we're gonna see a lot less output we have
what maybe 20 lines we have a summary so wherever this location is it is indeed clear and I have information
about things like the temperature it is currently fifty four point two eight degrees I have things about
the humidity pressure wind speed all current weather information for that location.
So now that we have this in place we have indeed accessed our first H TTP API from node j s allowing
us to pull in outside information into our applications.
I'm excited to continue exploring TTP requests asynchronous node end of the weather API in the next
video.
So let's go ahead and jump right in.