Welcome to the second video in
the Data Selfie App Project. Thank you, Joey Lee,
for this sample project. I'm excited to keep
building this with you who are watching this right now. So one of the things, one of the
reasons for this project, one of the things I'm excited
to demonstrate to you is what is this whole thing
about client side and server side programming. If you watched the first
video, all I did really was make two files,
Index.js, the JavaScript node code to run on the server,
and Index.html, the web page that the server is hosting
up to run on the client. And this is one of the
most confusing things when you're first
learning to program and thinking about client
side versus server side, when do I want to do one
or what goes on where. So let's take a minute to
dissect that a little bit here. We have the file Index.js. This is the server. Only functionality
on the server right now is as follows,
host static files. The goal here is to build
additional functionality, what other kinds of things does
the server need to do? Save information to our
database, for example, retrieve information
from the database and pass it to the client, also. But for right now, all it
does is host static files and the static file
it happens to host is Index.html living
on the server. What happens, the client
connects to the server and says, we'd like to request
to view your website, your web application. And so with that
request, Index.html gets sent to the client. Then it gets rendered
in the client's browser. If this Index.html
happens to have JavaScript files with it or references
to other JavaScript files. And, of course, there could be
other media and other things going along as well, that
JavaScript is sent as raw text and get executed here. So the big difference, even
though we might have JavaScript in two places, we have
JavaScript in Index.js, we have JavaScript
in index.html, this JavaScript that's
running on the server is never seen by the client. It has no ability to access this
code, it can make a request. This is a program that's
running, the code is in it. This is an important distinction
because at some point, when we start
connecting to APIs, as we might need to do
some authentication. So that's another thing that we
want to do here on the server. We said earlier
save to database. That's the thing that we
can't do on the client. The server has to
take care of that. Here's another thing. Some APIs could
authenticate from here, like the JavaScript code
could go here, execute and connect to the API. But then, whatever is in
here is visible to the user. You could do view source
and see the JavaScript, you could see the
API keys there. So this is an important point. We may in most cases want
to do authentication here on the server. So we're keeping track
of a list of things we want to do in the
server and keeping track, we don't really have
a list of things we want to do in the client. In this particular
video right now, I don't want to add any of this
functionality to the server. I'm going to do that later. What I want to do right
now is add functionality to the client. So I'm adding JavaScript
to Index.html. Something that I can only do
on the client is geolocate. Geolocate. Right? The client is
somewhere in the world. There could be many of them. That's another thing. There's only one server,
I'm writing the server, there's only one
Index.html file. But that file can be sent
to many different clients. Those clients could
geolocate themselves and then send that data
back to the server. It's particularly confusing
because when you're practicing this and
developing this, remember I've got the server
and the client running here locally on my laptop, so
they're both in one place. Towards the end of
this video series, I'm going to show you
how to take the server and deploy it to the
cloud, so to speak, or a server that's somewhere
else that many clients could ultimately connect to. So I'm just repeating
a lot of the same stuff over and over again. So all we're going to do in
this first step is figure out how to geolocate where the
client is, show the client their latitude and longitude
on their browser page, and then we'll be ready
for the next step, which I'll do in the
subsequent video to send that information on the server
and have the server save it to a database. One of the things that
is available to you if you're writing JavaScript
for client side browsers is the web API navigator. So this interface, this
Navigator interface has information about the
user agent, the identity, the specific user itself. Things like the user's
language or at least their language setting in
the browser, their battery about a battery left, yes. There's a navigator and
API functions for battery, and geolocation is one of them. So you can check out
the Mozilla web docs for all the different things
you can access via the navigator object. The one I want to look at
here is just geolocation. So here I am on
the geolocation API page, which I can access
with that navigator object. One thing that's really key
here is this little note. This feature is available
only in secure contexts HTTPS. So this is quite true
of several things. For example, if your website is
not hosted in a secure context you may not be able to get
access to a user's webcam. That's another feature that
we're going to add here. And so this is
something you really need to be conscientious about. For us right now developing
locally on this laptop the permissions are
much more loose. We're allowed to access
geolocation, allowed to access the
camera on local host because we haven't actually
deployed anything to a real web server where there's users
besides ourselves just playing around with it. But this is definitely
something going to want to watch out for when
you get to that deployment stage. The other thing to
really be aware of is not all-- not every browser
that anybody might be using on any operating
system with any version is going to have
support for geolocation. So the first thing you would
always want to do in your code is test to see if geolocation is
even a thing that's available. Luckily for us, the
code for how to do that is right here on the
documentation page. So I would consider
retyping it, but it'll be easy to just copy-paste. So I'm going to take
that, I'm going to go back to the Index.html file. I'm going to add to
the body a script tag so that I can put
this code in here. And I'm going to say console.log
gelocation available, and then console.log
geolocation not available. So at a minimum here,
when I load the page, I should see one or the
other of those messages. And geolocation is available. Fantastic. So if geolocation
is available, then I can choose to take the
next step and geolocate. The way that I do that is by
calling to getCurrentPosition function. And the getCurrentPosition
function requires me to pass in
a callback function that is executed when the position
is ready to be retrieved. That's a bit of a
mouthful, but we can copy-paste the code that's
here on the documentation page and then unpack
that a little bit. So let's go to our code. If it's available, I
want to put this here, so let's look at this. Navigator.geoloc
ation.getCurrentPosition. That's really the
function I'm calling. I can take all of this out. This is what we're
calling right here. The issue is, we need to
give it a callback, right? This is going to
happen asynchronously. So only when it's ready to
grab that latitude-longitude, this function will get called. I don't need this
do something here. This is a nice little-- it's implying the
documentation is implying now you do something with that. All I wanted it to do to see
that this works is actually console log this out. So I'm going to say console log,
position coordinates latitude, and console log position
coordinates longitude. Get the current position. When it's ready, call this
callback passive position and console log in. I am trying to do this series
about building these projects using updated ES6 syntax. There's a variety of different
versions of JavaScript. Yes, this is actually
from quite a while ago. I have a bunch of videos
about different versions of JavaScript, but
what I mean here specifically is I want
to use the arrow syntax. So what I can actually do is
eliminate this function key word and just say position arrow
into these two lines of code. So this is a nice way
of writing saying, let's get the current
position when it's ready, console log it. And in fact, I'm just
going to say console-- I'm going to simplify
this even further. Just going to say console.log
position.coordinates, OK? Because I want to
look at the full object to see what's in there. Oh, I want to look at position. I want to look at everything. So let's do that. Let's see what happens. So I'm going to go back
here and hit refresh. Now look at this. This is really important. Localhost 3000, that's the
URL present for my website, it's just localhost, I'm
just developing locally. If you had deployed
this somewhere and your website was
DataSelfieApp.com, it would say DataSelfieApp.com
wants to, what? Know your location. So, of course, of
course, of course this is something that the
user has to opt into, right? You can't just secretly
behind the scenes log users location without
them saying yes, this is OK. So not only does
the website have to be secure, so that
information is transferred securely, but it also has to be
explicitly allowed by the user. This might be
different if you were doing geolocation within
an app itself because maybe the user by purchasing
the app or maybe the user by downloading the app and
through system settings has already oft opted into
that app using location, but just on a website itself
the user is going to say allow. So I'm going to say allow. And then-- [CHUCKLES] Boy, that took a while. Took a while. So you could see that
for it to figure out, for it to do the location,
that takes a while. How is it doing the location? This is this laptop. It didn't have a GPS in it. Let's look and see what's
in here, first of all. So we have coordinates,
we have timestamp. Coordinates have accuracy,
altitude, possible heading, latitude, longitude, speed. So there's a lot of
extra information here that you might get if
you were doing this on mobile. So that would be excellent. We'll pause this
video, try to make this run in a
mobile browser, then see what else you get there. And what I'm looking
for, of course, is just the latitude
and longitude. Now, just out of curiosity,
let's see where I am and see how accurate it got. Looks like it got
it exactly right. So this is not where the
International Space Station is, but this is exactly the code
from my International Space Station example. I just hard-coded in the
latitude and longitude that I got from
geolocating myself, and then there I am, right here
in New York City on Broadway between Washington Place
and Wimberley Place at the Tisch School of the Arts. That's exactly where I am. So it works. Most likely, my
guess, my assumption, is that it's able to
locate me by the IP address where I'm connected
to the NYU Wi-Fi and the NYU Wi-Fi,
that IP address, is registered to this
particular address at Tisch School of the Arts. But if I'm opening this
on a mobile device, I would most likely
get that latitute and longitude the GPS itself. A good exercise could then be
to add the Leaflet.js code right here and actually have
the browser geolocate and then show the user
where it thinks they are. But I'm going to do something
much simpler because really what I want to do
is get to sending that data to the server. This is the heart of
this particular module of this series, which is how
to communicate data that's extracted in the client,
send it to the server, and save it to the database. So in many ways we're
done, but let's at least add that latitude and
longitude to the web page itself so we can
see it in the Dom. Let's add a couple
of Dom elements. For example, I'll
just say latitude, I'll make a span, latitude,
and that'll be empty. And then I'll add a break
and say the same exact thing, but longitude. Let me also add the
degree symbol, which I can do by just
saying & deg semicolon, and the same exact
thing down here. & deg semicolon. So now if I refresh the
page here, there we go. Latitude and
longitude are blank. It's got the position there,
let's pull out the latitude, position.coodinates.latitude
and then I can say document.getElementByID. The ID is latitude,
and then I can say text content
equals that latitude, and I can do the same
thing with the longitude. I'm having serious
case of deja-vu here because we did a lot
of this kind of idea in the previous video. And then I can put that here. And now we are ready to go. Now I can refresh the
page and there we go. We see the latitude
and longitude right there in the
browser itself. There you have it. Now we're done with step two. We have data that we have
acquired from the navigator geolocation API on the client. We have a server that is
hosting the code that is being sent to the client to run. The next step is
for that information once it's retrieved
on the client to be sent back to the server
and saved in a database. And the way that's
going to happen is through a POST request. In previous videos, I have
covered the Fetch function extensively and looking at
how to do a get request, how to retrieve
data using Fetch. It makes sense, Fetch kind of
implies fetch, retrieve, get. But it so happens that the
fetch function can also be used to send data by making
it instead of a Get a POST. I can fetch a POST,
I can POST a Fetch. Who knows what the lingo
means, but I can send data from the client to the server. That'll be the next step. Then after that, we'll save
the status of the database that gets sent, and
more and more and more. Before you move on
to the next video, I might suggest just playing
around with the client code, add the map with Leaflet, think
about maybe a more elegant interaction, maybe there
should be a button the user presses to retrieve the
current latitude and longitude, try it on a mobile device. There's a bunch of
things you could try. Let me know how that
goes in the comments, and I'll see you
in the next step. Thanks for watching. [MUSIC PLAYING]
