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.