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]