[DING]
Welcome back.
It is time for Module 2.
And in this module, I'm going to do something
quite exciting and quite different
than what I've done so far.
Everything that I did in the previous example,
it was all client-side JavaScript--
drawing the map, graphing the global temperature data,
loading images and displaying them
on the web page with the fetch function, all of that
was done with client-side JavaScript,
meaning JavaScript written into the HTML page itself.
But there are a lot of things that you, that I,
that the people of the world who were doing this programming
thing want to do, working with data and APIs,
that you cannot do with client-side JavaScript only.
So in this module, I'm going to show
you server-side programming.
And I'm going to use a JavaScript runtime called
Node.js which can be used for server-side programming.
Now, the details of what server-side programming is,
and how I'm going to do it, that's to come.
But this project that I'm going to build,
the fundamental thing, the reason why
we need node for this project is for data persistence.
I want to gather some data, and save it, and get it back later.
And this is not something that you can easily
do without writing a server.
You could certainly use somebody else's server.
There's something called database
as a service, where I could just be like, hey, you've
got a server, can I sign up for you?
And take my data, and then I'll ask for it back later.
But I'm actually going to create a server that's
going to run on this laptop here,
and I'm in a save the date data here.
Now, at some point, I'm also going
to need to show you how to get that server
to run somewhere else besides your own laptop,
but that's a place to start.
The project that I'm going to build in this module
is called the Data Selfie App.
And the Data Selfie App is an example project
by Joey Lee who's designer and researcher.
He teaches a class right here at NYU at ITP
called Quant Humanists.
It's about data and self tracking.
And so Joey has graciously given permission
to use, to build on top of his examples,
as part of this series.
In this video's description I'll link to Joey's website
so you can learn more about his work,
as well as to the original GitHub repo for the data selfie
app so you can find all of the code for the things
that I'm going to show you.
Now, in order follow along with the code
that I'm going to write and demonstrate
as I build this project, you're going
to need to download and install some stuff that you might not
have on your computer already.
It's going to be confusing, because you might
be using Windows, or you might be using Mac,
and I'm using a Mac.
And oi, what are we going to solve this?
All right.
So let me give you a list of the things you need
and help you with some resources to find those things.
Number 1, you need to install Node.js.
That should be as easy as going to nodejs.org and following
the installation instructions for your operating system.
I do also have an entire video about downloading
and installing node, and what note
is, that I'll also link you to if you
want more background there.
You're also going to want some kind of console application,
some command-line terminal thing that you can open up
and type commands in to run Node stuff on your computer.
I'm using iTerm, which is an alternative to the Mac's
built in terminal application.
On Windows I hear people like PowerShell,
just the built-in command thing--
oh, and Git BASH.
Git BASH is possibly a good one too.
I actually have a whole workflow series
where I go through all of these bits and pieces of everything
you need to have your environment set up
to follow along with what I'm doing.
So you can also just go and find that series,
watch that, and come back here.
But all you need is download Node,
you need some kind of shell command prompt thing,
and you need a code editor.
If you've got that, you're ready to go.
So before I get to coding and building the actual project,
let's just talk for a second about, what is Node?
Now, if you go to the Node website, it says right there,
Node.js is a JavaScript runtime built on Chrome's V8 JavaScript
engine.
That is a mouthful.
Let's try to understand what that is.
What do I mean by runtime?
So normally, when I'm typing JavaScript,
I'm exevuting that stuff in the browser.
The JavaScript has no meaning without the browser itself.
Suddenly, with Node, I can start to write JavaScript
without the browser.
It's its own runtime.
The code runs on your computer.
Let's look at what that means more practically speaking.
So here I am with my command-line access
where I can type in commands.
So hopefully you're here.
You've downloaded your terminal app thingy,
you've got it going, and you've installed Node.
If I now type in n-o-d-e, node, and hit Enter,
suddenly I have entered the JavaScript runtime.
This is very similar to the developers
console in the browser.
But here, I can start typing in some JavaScript stuff,
like const x = 5, and then I could say x + 2,
and it's going to give me the number 7.
So we can see this is a runtime--
a place where I can write JavaScript and run JavaScript.
Now, this is not typically how you would use Node.
Typically, I wouldn't just be writing
a lot of code line-by-line in my terminal itself.
I would write a bunch of JavaScript code
in a JavaScript file, then execute it
through a Node command.
So let's see how that works.
So I actually have a file called index.js.
It's just a JavaScript file.
And I could put something in like console.log('hello');.
And I could say const x = 5.
And I could say something like console.log(x + 2);,
and let's see what happens.
So now, if I go back to the terminal,
I can type node index.js.
And this is me saying, hey, execute the code line-by-line,
in the order that it's written, of what you find in that file.
So I'm going to do that right now.
And there we go.
So what is it that I want to write and that index.js file.
Clearly, console logging a bunch of things,
I can see that it works.
But why am I using Node?
The reason why I'm using Node is that I want to create a server.
A server is an application that runs and listens.
And what it listens for is it listens
for requests-- people who want to connect to that server.
So this server is going to be the central repository
of the data of my application.
All of the different clients, whether it's you on your phone,
or so-and-so on their laptop, or somebody else
on their internet connected toaster,
can make a request to the server and grab some data.
So I could come back over here and just start writing--
I could Google "write a web server with Node.js,"
and I could find some code, and I could start typing in there,
and I could create that server.
It's going to open up a connection and start listening.
However, one of the ways that is very typical when
working with Node is to find a pacakge--
a Node package-- that has some of the functionality
you're looking for, install that package--
it's like a library or an add-on--
and make use of that functionality.
And the Node package that I want to use to create my web server
is something called Express.
Express is a pretty minimal and very simple
framework for making web servers.
And it has the core functionality
you need without a lot of bells and whistles.
So we can kind of get up and running with it really quickly.
So now, we have a node.
We can write JavaScript code in a thing and run it with Node.
So in theory, we could write some JavaScript
code to make a server, but we didn't need this package.
How do we have access to the Node package
Express in our Node code?
NPM stands for Node Package Manager,
and it's the thing that manages all of our Node packages
for us.
You don't have to install that.
In fact, when you installed Node, you also installed NPM--
Node Package Manager.
If I want to use NPM with this project, I need package.json.
The good news for you is that dot. json in package.json.
You know what json is, because we've worked with it.
We have gotten data in JSON format--
JavaScript Object Notation, before in previous examples.
package.json is a special kind of file.
It's basically the configuration file for your project.
This is where all the meta information about our project--
what Node packages we're using, what our project is called--
and by project, I mean web application-- all of that's
going to be in package.json.
To create the package.json file, I could, if I want,
just make a file called package.json and type
some stuff into it.
But if I want to not make any mistakes, if I want to be sure,
there's a nice command-line utility from NPM itself
that will generate the file for me.
And that is npm init.
So as long as I've got Node installed,
if I'm in the project directory I can type npm in it,
and it's going to walk me through what
I need in the Package.json not
So one thing is I need a name.
It's guessing, because the folder's called module2,
module two, that sounds good.
I'll just hit Enter.
Version number-- I'm not going to worry about the version
number.
This is important if I'm building an open source library
and I need to really keep track of version numbers.
But I'm just kind of tinkering around here.
Description-- let me add something.
This is the Data Selfie App by Joey Lee.
Entry point, index.js-- Yes that's
the file that I want to put my code in that I want to run when
I want to run this project.
Test command-- I'm not worrying about testing right now.
I'll refer you to some other videos about that
if you're interested.
Gut repository-- I'm not worrying about that.
Keywords-- example, data selfie, something like that.
I think I could give some keywords separated by commas.
Author-- this is a tricky one, because I'm basing my work
off of Joey's work.
I'll put my name in there for right now,
and I'll make sure that everything is well documented
of where it's coming from as I go.
License-- I'm going to put in MIT.
That's a very permissive license.
It basically lets you do just about anything
you want with the code.
I'm using the same license that Joey is using.
And then, look at this, it's giving me--
this is the information that is going in that package.json
file.
Does it look OK to me?
It does, I'm going to type yes.
So if I go back to my code editor, I can see.
There we go.
Here's that package.json file.
All the information that's needed is in there.
It's formatted correctly.
I'm ready to go.
But I'm not ready to go, right?
The reason I was doing this in the first place
is that I'm trying to get to the point
where I can install the Node package Express, the web
framework I want to use for creating my server.
The reason why I need this package.json
file is in this file is where I need
to make reference to Express.
I need to say Express is a package that I'm
using for my project.
But I don't want to edit this file directly,
even though I could.
What I want to do, instead, is say npm install express.
Say npm install express, and run that.
Once, I've run this, two things are going to happen.
Number one is we're going to see Express pop-up in package.json
as one of the dependencies.
It is a dependency of this project.
My project depends on the existence of the Express Node
package, which I intend to use quite a bit in this code.
The other thing that's happened is
I have a new folder called node_modules.
And when I look into this folder,
oh, my God, there's so much stuff in here.
So this is the thing-- oh, look, there's express.
I only said express.
NPM installed express.
I didn't say inherits or fresh or http-errors.
It is so happens that most Node packages depend
on other packages, and the Node Package Manager
is smart enough to know that if I'm saying install express,
it's going to go grab everything else that it needs as well.
So the nice thing is we don't have to manage that folder.
Everything that we need will be in there.
But don't be freaked out if you see
all sorts of other things in there that you do
think that you installed.
They're coming along for the ride with Express itself.
I'm finally ready to write some code.
So in order to have access to the express package, the Node
package Express, I need to use require.
So I can say const express = require('express').
This is basically like an import statement.
Hey, you know that Node package I installed called Express?
Give me that thing, and put it all in this variable called
express.
The reason why I want to do that is I
want to create a web application.
I'm going to call it app.
And the way I'm going to create that is just
call the express function.
So that whole library, the whole Node package Express,
basically comes in as a big function
that I can just execute and put in a variable.
The first thing that I want to do in a web server,
if I think back to my silly little diagram--
here's the web server, it's listening, listening,
anybody want to connect to me-- is I need to start listening.
So now, I can listen.
I could just actually say app.listen().
And when I want to start listening,
I need to also specify something known as a port.
Look at this, it's even telling me right here
in Node what I need.
The port is a unique number.
It's like a numeric address at which I'm going to listen.
So you could have different servers running
different ports, and there are specific ports
reserved for certain things.
But that's beyond the scope of what I'm doing right here.
I'm just going to pick some port that I
know won't be used by something else, like 3,000,
and then I'm going to give a callback function here which
basically is just the callback that happen
once the server is listening.
So I'll use my arrow syntax and just say
console.log to say listening at 3,000.
There are nicer ways I could clean this up,
but this is the idea--
require Express, create the app, and listen at a port.
And there we go.
I'm listening.
I could connect.
Should we connect?
So I'd be very happy to accept connections at port 3,000
right now, but I need to figure out why am I here,
what am I listening for, what kind of information
an I going to send back.
So let's make a list of some of the things
I want the server to do.
And it's pretty simple for this app.
Number 1, I want to serve web pages.
In other words, right now I'm just a server
running locally on this laptop at port 3,000,
but if I were to deploy my server to my website thingy
url.com, and people type that address into their browser,
I want to send them the HTML and JavaScript and CSS
and all that stuff that I have made for them to be
able to see in their browser.
So to simplify that let's just serve one page index.html.
So when I open up my web browser or whatever content
is in there, I should see.
So that's number one.
There's other things that I want to do, of course, like I
want to receive information and save it in the database.
And then I want to be to send information from the database
back out.
But I'm going to get to that stuff as I go further
and build this project.
Let's actually just finish off this first part
by serving a web page.
So these are all the files I have already.
I have package.json.
We know about that.
That's the configuration of my project.
index.js, that's my server code.
It gets confusing, because I'm going to have
server code and client code.
We got to keep this stuff straight.
I have node_modules.
That's all of the stuff all the Node packages
that I've installed.
I don't need to look in there.
There's also this package-lock file.
It's kind of an important file.
It's auto-generated.
You don't need to touch it.
But it's basically keeping track of the dependencies
and versions of your packages.
We can leave that aside.
index.html-- that's the file that I want to see when I go
and try to make a connection.
Right now, if I go to the browser
and try to access local host, that's
my server running locally on this computer at port 3,000,
I should see whatever the server has and is able to give to me.
So I hit Enter, and it can't get anything,
because there's nothing there.
I need to give it my index.html file.
And the way that I can do that is
by using Express to host static files.
So what do I mean by that?
First, let me type it into the code.
So I'm going to say app.use.
I want to use express.static.
And then what I need to give here is a directory name--
or I could give one file.
I might be able to say index.html.
But better yet, I want to make up a folder name.
Now, I'm going to call it public,
because I'm going to remind myself
that anything that I put in that directory
is publicly accessible from the URL,
in this case which is localhost colon 3,000.
So I'm going to go back to my finder,
and I'm going to make a folder, I'm going to call it public,
and I'm going to put index.html in there.
So now, when I run this--
I'm going to re-run my server by saying node index.js.
It's listening at port 3,000.
I go back and I refresh this page--
it doesn't say cannot get anymore.
The problem is, there's nothing there.
Well, it might be nice for me to actually add something
to my index.html file.
I could say Data Selfie App, add a paragraph, Hello.
And I could start putting JavaScript
in there and other things that we've seen so far.
And now, I'm going to hit Refresh.
And there we go.
I am serving up my web page.
Now, I haven't gotten that far.
I'm not saying we've gotten this far.
But I'm really just setting up the foundation.
I'm building the foundation for the house--
this project that I'm going to build.
What have I done so far?
I've installed Node.
I've set up a project with NPM init,
configuring a package.json.
I've written a little bit of code inside an index.js file,
using the Node module Express to create a web server.
And that web server has one job-- it has only one job--
it's to serve up any files that are in the public folder.
And the only file I have there right now is index.html.
If I wanted to be really accurate about what's going on,
I would type in index.html into the address bar itself.
And now when I hit Enter, you'll see it's the same page.
But I didn't have to do that originally,
because if you ever do a blank path, index.html is assumed.
If you're able to reproduce exactly what I have here, just
a basic Node server with Express,
serving up a single index.html file,
you're ready to move on to the next video, where
I'm going to start actually adding some features
and trying some different ideas out.
Before you go there, let me suggest a couple exercises
you could try.
Number one, maybe try to host more than one page.
What if you have index.html and something else dot html.
Or two different directories-- how could you do that?
Could you have subdirectories inside of public,
and how would you access them?
Do you put links so you could go back and forth between the two?
That would be a good thing to try out.
I'll put some solutions to that in the links
to that the video's description as well.
You might also go and grab something
that you've made previously, maybe
one of the examples from module 1,
and put that JavaScript and that HTML content
in index.html Itself, and see what happens.
Because I have plenty to do with the server,
the whole thing about this project
is saving data to a database.
And that's what I going to do in the next video.
I'm going to start to add more stuff to the HTML page.
And what I want to demonstrate to you
is how to use the geolocation API.
So if it's available, you have to opt-in and give permission,
you can capture, with this API, the latitude and longitude
of where your computer or device is.
Whether it's accurate or not is an interesting question.
And then, later, I'm going to show you
how to send that to the server so that the server can
save that along with a timestamp and maybe keep track
of your location over time.
That's something that I'm going to show you how to do.
All right.
So I'll see you the next video, where we'll
look at the geolocation API.
[DING]
[MUSIC PLAYING]