[BELL RINGS]
Hello and welcome
to module three
of working with data and
APIs in JavaScript.
So I just wrapped up
module 2, the second part,
with a project called
the Data Selfie App.
And there were some new
things hopefully to you
that you learned and
are excited to apply
in future projects like
server side programming
and GET requests and
POST requests and saving
data to a database,
all of the things.
But I think there are some
key elements of building a web
application that involves data
from external API and server
side and client
side that I missed.
One of the most
crucial things I think
is making an API request
to an external data
source from the
server, and there
are a variety of reasons
why you might want
to do that or need to do that.
And I really want to demonstrate
that in this new project called
The Weather Here.
The original
Weather Here project
is once again by
Joey Lee and was
built for a course called
Quantum Humanists at NYU,
where I also teach.
In Joey’s project, the
user arrives on a web page.
There’s information about
latitude, longitude.
We know how to do that already.
There’s information about
the current weather and air
quality.
This will be new
that we want to add
and then a big Check In button.
So a press Check In button,
all that information is logged
to a database, and
then there’s also
a view where you can view
all the different check ins
plotted on a map
with leaflet.js.
Most of the functionality
that I need for this Weather
Here app we already have it
from the data selfie app,
but we can start with this
baseline of code from there.
But there are some new things
that I want to demonstrate
to you in this project.
So number one is I want to
add connected to external API.
So we’re going to use
two different APIs–
one for weather information,
one for air quality.
One of those APIs going to
require an API key and not
actually even allow us to
connect from the client side.
So we’re going to
have to look at, well,
how do I connect
to an API from Node
but then have the client build
display that information?
So that’s going to
be a key new thing.
Now I also want to figure out
how do I hide the API key.
So if I want to open
source and publish my code
but I don’t want include my
API keys, how do I do that?
So that’s going to be an
important piece of this
as well.
This project also
allows us to kind
of play with our logs
page, and let’s look
at instead of just a list
of all the information
in the database, how do
we pull a bunch of records
from the database and
plot them on a map?
And mostly, we can pull
from the previous example
I made with the
International Space Station
to create a map with leaflet.js.
And finally, before I go,
before this series wraps up,
I really think it’s
important to talk
about deploying a project into
the real world, so to speak.
So right now, I’m tinkering
and playing around,
developing the service running
here, the clients running here.
This is just all contained
within my laptop.
But if I want to deploy
this project to a server
so that it can live on the web
that many people could access
that share of the
data, participate in,
and view the
website, essentially.
How do I do that?
So we’re going to look at
a few different options
for deploying your
project onto the web.
Hopefully, I’ll give
you some pointers.
It is an option where
you can do that for free
as well as if you have
a larger project, what
sort of considerations are
for our hosting services
and paying for hosting.
So this is where
I’m going to begin.
I’ve got just sort of the
very basic functionality
from the data selfie app.
I stripped away p5, the
webcam images, a lot of stuff.
The page just loads and shows
my latitude and longitude.
When I click Check In, it’s
saving that current latitude
longitude and the
timestamp to the database.
And when I go to
View Check Ins, I
see a login of all of
my recent check ins
at this latitude,
longitude, and time.
So the very first thing that I
want to do in this series now
is add weather.
I want to build this display
on this Page information
about the current temperature
outside at this latitude
and longitude.
Now I have to figure out
where I can get the weather
information from.
So I don’t really
feel so inclined
to build my own set of sensors
in my own weather station.
So most likely, I could find
some type of APIs service
that I can make a request
to get the data back,
maybe even in JSON format.
This is very similar
to what we did
when we looked at the
International Space Station
latitude and longitude
from an external API.
And there are many weather APIs,
Google Weather API, JSON data.
You’ll probably find a ton.
One that I’ve used in
previous video tutorials
is Open Weather Map.
That’s one that you
could look into using.
The National Weather Service–
probably their other
governmental organizations
or public institutions
that have public weather
data that you could
use that have APIs,
and you request data from.
I’m somewhat arbitrarily
picking an API call Dark Sky.
What are the things I look
for when trying to pick an API
is, does it have
good documentation?
Are the examples easy to follow?
Can I get up and running
with it fairly quickly?
And looking at Dark
Sky, I find that to be
true the documentation
is pretty easy to follow,
and I can get up and
running with it quickly.
And it offers the
data in JSON format.
While it’s not entirely
a free service,
it lets you do 1,000
API calls per day free,
and that’s for
demonstration purposes.
That’s pretty much all I need.
A risk here, of course, is that
by the time you’re watching
this video, the Dark Sky
API won’t exist anymore
or the way that it works
will have completely changed.
But that’s just a fact.
So really, what you should be
taking away from this video
is less the specifics
of the Dark Sky API
but what you need to do
when you find an API,
how to get your API key,
how to make the request,
how to get the data
and then present
the data, and hopefully, maybe
follow along with this video
along but use a completely
different weather API
while you’re following.
So unlike the
International Space API
that we looked at
in a previous video,
the Dark Sky API requires
you to authenticate.
It’s pretty simple
to authenticate.
All you need is
a single API key.
Other APIs can have a much
more involved process.
But if you’re going to
follow along and use this,
you’re going to need to first
go to darksky.net and click sign
up.
You’re going to want to
register with your email address
and make up a password.
Now I’ve already done
that, so I’m just going
to go straight to logging in.
Once you’re logged
in, you’re going
to arrive exactly to this page.
And you can see this
is really important.
This is my API key.
It’s a little bit of
irony here that I’ve
made this public video
on YouTube showing
you my API key right here.
By the time you’re
watching this,
I’m going to have
regenerated my API key,
and this one won’t be valid.
So don’t try typing this one in.
You’re going to need
to get your own.
But while I’m making
this video, this
is one that I’m going to use.
The other thing that
I love about this–
already, I need to
read the documentation.
But even without reading
the documentation,
right here, I can see a
URL for making an API call.
So if I want to get the
forecast all I need is
api.darksky.net/forcast.
That’s the endpoint.
We’ve learned about endpoints.
Now my API key and then slash
latitude comma longitude.
So I can actually just click
on this, open it in a new tab.
And we can see,
look, this is weather
for that’s a latitude and
longitude for Los Angeles.
I’m getting a summary.
I’m getting near storm
distance– all sorts
information.
I can use any of this
in my application.
So let’s assume
what I want to do
is now request this API endpoint
in my client-side JavaScript.
That’s the thing that
we’ve done before.
We did that with
International Space station.
So I’m going to grab this URL.
So right here,
once I geolocated,
then I can say I can
make an API URL, which
is equal to exactly that.
I’m going to make this a
string literal because instead
of hard coding in the
latitude, longitude,
I might as well say
latitude comma longitude.
And then now I can say this is
all stuff we’ve done before.
I can fetch– make a GET
request to that API URL.
So I can say the response
equals await fetch API URL.
Now since I’m using
the keyword await,
I need to add the
async keyword up here
to this callback function.
Then I can say JSON equals
equals await response.JSON.
And then I can
console log the data.
So in theory, now, the
feature that I’ve added here
in addition to geolocating, I’m
going to take that geolocation,
set it to the darksky.net API,
and get the weather information
back.
Let’s try giving that a run–
going here to here,
hitting refresh.
I’m the only person
in the entire world
that’s really excited to
see the dreaded CORS error.
CORS stands for Cross
Origin Resource Sharing.
It can be enabled or disabled.
If it’s enabled, it’s
saying like, hey, I
want you as a separate server
from a different origin
if you’ll share my resources.
Now, the thing that’s
sort of crucial here.
If, of course,
it’s disabled, it’s
not that the API is saying you
can’t have access to my data.
It’s just requiring that you
do it from your own server.
And this is one that’s explained
in the Dark Sky APIs FAQ.
If you scroll down,
you’ll find the question,
why do I get the error, no
access control out origin?
And it’s because they explain
that it’s for security reasons.
Because the API key is
part of that request,
they want you to enforce that
you can’t make that request
from client side code.
You can only do it
from server side code.
So this is a nice
demonstration of how
we’re going to make that
request from node itself.
So in fact, what I want to
do is take this code itself
and put it in the server.
So go to index.js,
and I’m just going
to paste it in the bottom.
But where do I
want to call this?
I want to make a new
endpoint in my server that
receives the latitude and
longitude then makes a call out
to darksky.net and
then returns that
back so that I could actually
have this still in my client.
I don’t want to
actually remove this.
What I want is to
change this URL maybe
to just a local path weather
slash latitude longitude,
weather being the endpoint
that I’m going to create
and then console log it here.
So I’m going to go
into the server.
I’m going to make a new
endpoint for a get request.
I’ll call that weather.
This is now a function that
gets closed off like this.
And now, OK, I’m getting
some errors here.
What’s the issue?
This is a couple of things.
One is the argument is to the
function is called response,
so I really should call
that response here.
So I’m just going to
call this fetch response
and then say fetch
response.json.
But there’s a missing
piece here, actually.
Number one is this needs
to be an async function
because I’m using await.
And then instead
of console logging,
I want to say
response.json.json.
So I’m going to make the
API call from within here
and then send it back.
This is what’s known
as a proxy server.
It’s basically the server
is a proxy for darksky.net.
I can’t make the call
the darksky.net directly
in the client.
So I just send off the latitude,
longitude, receive it here,
and make that request.
But wait a second–
how do I have these variables,
latitude, longitude?
Oh boy, this is opening
up a can of worms
about passing
parameters with an API.
Here I am in the
client side code.
I want to send to my
new weather end pointthe
latitude, longitude that I’ve
gotten from the client side
code.
Then somehow in
the server, I need
to receive those and put them in
here when I send the Dark Sky.
Now I need to show you
how this is going to work.
But for right now,
let’s just make
sure this is actually working.
Let’s just hardcode in
the latitude, longitude.
So I’m going to go back to this
particular latitude, longitude
that I know will work.
I’m going to go to my server
I’m going to comment this out,
and I’m going to paste
in a hardcoded latitude
and longitude.
So now when I go
to that endpoint,
I don’t need to pass in
a latitude and longitude.
I am just going to get exactly
the weather for Los Angeles.
I’m also going to do the
same thing in the client.
I’m going to just temporarily
comment this out and then
get rid of the
latitude and longitude.
And I think for the
paths to be correct,
I should have
included a slash here.
OK, so let’s restart the server.
Let’s go to the client
and hit refresh.
We didn’t leave out an
async function, sketch.js.
I forgot to put my
async function in here.
Ah, right, let’s check
the server, of course.
So up here, it’s going to
give me a nice error that
says fetch is not defined.
Fetch is not defined.
I forgot about that.
Fetch– the web fetch API–
is part of the client
side browser API.
If I want to use it
from within Node,
I can, but I need to install
a Node package for that.
The package I can use to do
that is called Node-Fetch.
So I’m going to
go over back here
and say NPM install node-fetch.
If I go to my
package.json, I can just
see that that’s in there now.
And then most likely,
what I need to also do
is say a const fetch
equals require node-fetch,
so that’s going to pull the
fetch function from node-fetch.
So I can add that
up here at the top,
fetch equals require
node-fetch, rerun the server,
give it one more refresh here.
And there we go– look at that.
I now have the weather from
Los Angeles right over there.
The last step here–
I know this has been a bit
of a longer video than usual,
but I just want to finish
off this one last step–
and this last step is
sending from the client
the latitude and
longitude to the server,
so the server could send
that latitude and longitude
to Dark Sky, get the weather,
and then send the weather
backend to the client.
The way that I’m going to do
that is with route parameters.
Now, we learned about routes.
If I have a GET request
or a POST request,
I set up a route,
a path, an endpoint
for that particular request.
Route parameters are
extra parts of that path
that you can name and capture
as variables, essentially,
with data that’s
sent from the client.
Another way to do
this is with something
called a URL query string,
which I cover in another video.
And so either way
would work here,
but I’m going to go
with route parameters.
So here on the
express documentation,
we can see that
a route parameter
is specified with a colon.
So the route is users.
And then I might say users
slash Daniel or users slash
Schiffman, and that will come
in as a user ID parameter.
So to add that, I’m going
to go back to the server.
I can remove this
hardcoded lat, long in
and put back in the one that
has the latitude and longitude
variables.
So now, I need to add
the root parameters.
So one thing I
could do is I could
do slash colon lat
slash colon long,
so I could have two
parameters coming in.
I don’t know.
I think I’m going
to just make it one.
I’ll call it lat long.
And then I’ll send
it in with a comma.
And those, you can see I haven’t
used this request argument yet.
This is finally a chance
to use that request object.
Inside of the request object
is a property called params,
and inside that params object
are all of the parameters.
In this case, there’s just
one parameter– something
called lat long.
So I could type in lat
long, or I could also
put that I could also put
that in brackets in quotes.
So either way, this will work.
I’m going to just go
with the dot syntax.
And what I’m going to
do is I’m going to put
that in another variable.
So I’m going to say constant
lat long equals that.
And then actually
what I’m going to do
is undo is I’m going
to do dot split,
and I’ll split with a comma.
And then the latitude
is the lat long index 0.
And the longitude
is lat long index 1.
So in theory, as
long as I send in
as the route parameter
the latitude and longitude
separated by a comma, I can
pull it out of request.params,
split it by comma into
an array, and put them
in each one of these variables.
So I probably should have
done this more incrementally
and console log some stuff.
But let’s just hope
that this works.
I’m going to add some console
logs to debug just so I see
in case something goes wrong.
Then I’m going to go
back to the client.
Now I need to go back
to the client code.
And here I can go back
to this because this
is exactly what I’m sending in.
I’m going to the weather route
with the parameters latitude
comma longitude.
I already set that up.
OK, let me add one more console
log request.params, so we
can see the raw request params.
And let’s hope that this works–
go back to the
browser hit Refresh.
And there we go.
I have got the correct
latitude, longitude, route
and the weather
now from New York,
the actual latitude, longitude
that I sent to the server.
Let’s check the servers
logs and there you go.
You can see, there we go.
So this is the request
parameters that came in.
There was just one
called lat long.
Then I used split to
turn it into an array,
and then I took the 0 index
of the array and index number
one of the array.
So luckily, I wrote the correct
code, and it actually worked.
The next step here would be
to present that information–
well, there’s several
next steps here.
I need to save stuff
in the database
and all sorts of
other things, but
the small immediate
next step would
be to display the
weather information here
in the DOM itself.
So I’m going to leave that
for you as an exercise.
I will do that at the
beginning of the next video.
And then I’m going to
continue on and make a request
to Open Air Quality,
the Open AQ API
to get both the weather
information and the air quality
information for a single
latitude and longitude.
[MUSIC PLAYING]