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.