[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]
