Placeholder Image

字幕表 動画を再生する

  • [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.