Node.js Workshop I: Get Started
Posted by Jun Zhao
Updated: Jan 31, 2014
Many thanks to Thoughtworks for offering the space and Amy Schantz for setting things up. Amy, you are so so so awesome!
Thanks to David Bella for giving
such a wonderful presentation! Thanks to the Flatiron Group for supporting this event and showing up and hanging out after it!
-------------------------------
NYC Data Science Academy is offering a relative courses:
RSVP Web Development with Node.js, Beginner Level
-------------------------------
Slides:
Meetup Announcement:
Demonstrate what backend JavaScript is with v8Show differences between v8 and nodeSet up a simple web server with ExpressServe up some data to our front end Common tasks and pitfalls working in an asynchronous environment
Speaker:
David Bella is a computer programmer turned web application developer. He is an alum of the Flatiron School's Ruby 003 program and holds a degree in Computer Science from the University of Connecticut.
Outline:
node.js: event-driven, non-blocking, callbacks, usage as a web server with express
Express: web server in node.js, simple routing, simple controllers MongoDB: NoSQL database
Preparation:
Have node installed on your computer. Highly recommend using a Mac and using brew to install node, however, www.nodejs.org has instructions to get up and running on any platform. If you can run 'node' and 'npm' at your command line, you should be all set.
-------------------------------
Other Useful Info Link:
Source Code: https://github.com/davidbella/node-meetup
1. Get the Repository
Clone the git repository locally
git clone git@github.com:davidbella/node-meetup.git
Start in the start
branch and follow along
git checkout start
Try to run node server.js
cd Project
node server.js
Uh oh! Error that you need mongodb package
npm install mongodb
2) Install Mongo DB and Fire It Up!
On Mac, through brew
:
brew install mongodb
mkdir -p /data/db # Maybe - try the next step first
mongod
If you don't have brew, I recommend getting it, but there are manual installation instructions on the MongoDB website
On Windows, if you don't have a Mac, I recommend getting one 😉 but there are installation instructions here
Open a new terminal window and run the server again
node server.js
You should get a message from Mongo that you can ignore for now
Open your browser to http://localhost:3000 to verify we are running!
Here we require the Express web application framework and a local file that will act as a controller for our routes
We create an app
variable to work with as our Express app
The fun stuff starts here, with how Express handles routes
app.get('/', function(req, res) { ... } );
This will match any incoming requests to our root path, such as http://localhost:3000
and run the specified function
Notice the two parameters to our function, req
and res
. These stand for request and response and reflect the HTTP request that the client sent us, and the HTTP response that we as the server are preparing to send back to them.
Some common things to pull out of the request are querystring
parameters, which we will get to.
Some common things to set in the response is the response body, or content, which we have seen already.
In our case, we are telling the response to end
, with the words "Hello Node!"
As you can see, there are also post
, put
, and delete
functions on the app variable in addition to get
.
These functions correspond to HTTP verbs that are used to implement a REST API.
The functions on the items
controller that are called should help explain the function of each one, but here is a quick table:
Post | Create |
Get | Read |
Put | Update |
Delete | Destroy |
Notice how the HTTP verbs correspond with CRUD
- Create, Read, Update, Destroy
This is an abstraction to help us pull the logic out of server.js
and into a separate file. Since we are keeping this app simple, we are putting the database logic here, as this is the only resource.
First we require the mongodb
package. Then, we set up a couple of helpers based off of this package.
Server
will be used to connect to an actual Mongo server, in this case, our local computer on port 27017, the default.
Db
will be used to create or open the specific database in Mongo.
Finally, BSON
will be used to help us interact with the data format Mongo uses to store records.
The next few lines setting up the server, db, and opening the db are fairly explanatory.
Each of the lines that start with export
you will notice match up to the function calls we make on the items
variable in the server.js
file.
export
s allows you to create functions that can be used when someone require
s this module into their code.
3. branch 'controller-actions-to-mongo'
We'll start with the findAll
function and then work our way through the REST of the REST operations, heh. While we do so, we will highlight any differences between the functions.
Now we will start to fill in the items controller's actions to interact with the Mongo DB collection of items.
Let's follow along and read the findAll
function logically.
Take the database connection in variable db
.
Run the collection
function on that to retrieve a collection called itemscollection
.
Providing the following callback for when the collection has been retrieved
Act upon the returned collection by calling the find
function and then call toArray
on it to make it into a JavaScript array.
Once that is done, send the newly created array as the response to the browser and end the connection.
New in this function is pulling the id
we want to look up from the request object's parameters.
We perform the same collection retrieval as last time, in fact, we perform this on each REST action - perhaps someone would like to abstract it or simplify it somehow?
The difference is that instead of calling find
, we call findOne
. But in order to find a specific item, we have to pass in the id
we got from the request. However, the way Mongo stores data is through BSON, or Binary JSON. We need to convert the id
given to us to BSON before we can look it up in Mongo.
Here we require the use of the request body, which we expect to be a JSON object being sent to us by the client.
In order for Express to know how to handle this, we must explicitly configure it to use the "body parser". We can turn this on in server.js by adding the following line:
app.use(express.bodyParser());
Again, we ask Mongo for the collection and then we insert the item
, which is what the client sent to us in the body of the HTTP request.
Here also note that we provide an error message to the user if the insert fails for any reason. It is always good practice to inform the consumers of your API of any failures.
This is basically a combination of findById
and addItem
. We first accept an ID of an item to update, and then use the collection update function to modify it with the new body content passed it. Note that this is entirely destructive. It will fully replace the entire item with what you have added.
This rounds out the RESTful actions of our simple API. It closely resembles findOne
, but instead of just returning the result, it deletes it, and then returns it.
Now that we have implemented the API, we should manually make sure that it works. In this section, we will use two tools: one to interact directly with our backend database, and one to interact directly with our RESTful Node server from the command line.
Like most larger programming languages and tools, Mongo comes with a built in command line program for interacting with the database.
From the command line run:
mongo
For convenience, here is a mini Mongo cheatsheet to get up and running (I actually still use this personally whenever I work with Mongo, I hope you find it helpful)
Mini MongoDB cheat sheet
# shows all dbs on the system
show dbs
# switches to or creates the named database
use <database_name>
# inserts a new user with key value pair “name” and “david”
db.users.insert({‘name’: ‘david’})
# displays all entries in the ‘users’ collection
db.users.find()
# shows all collections in the current database
show collections
# removes a record from a collection
db.users.remove({‘name’: ‘david’})
# updates an existing entry
db.users.update({‘name’: ‘david’}, {$set: {‘title’: ‘programmer’}})
curl
is a wonderful utility to work with HTTP requests and responses via the command line. I often feel that GUI programs are more complicated and provide unnecessary complexity, especially when the operations you are trying to perform are simple, and you have a handy cheat sheet 🙂
Mini curl REST cheat sheet
# Create a new item via POST
curl -i -X POST -H 'Content-Type: application/json' -d '{"name": "first item", "points": "20"}' http://localhost:3000/items
# Gets a list of all items via GET
curl -i -X GET http://localhost:3000/items
# Gets a specific item via GET
curl -i -X GET http://localhost:3000/items/52ea3e7444c64da194968f52
# Given an item you know the ID for
# Updates the specified item via UPDATE
curl -i -X PUT -H 'Content-Type: application/json' -d '{"points": "40"}' http://localhost:3000/items/52ea3e7444c64da194968f52
# Given an item you know the ID for
# Deletes the specified item via DELETE
curl -i -X DELETE http://localhost:3000/items/52ea3e7444c64da194968f52
Notice how each of these URLs will hit a specific route with a specific HTTP verb. We defined all of these routes in our server.js
file. Further, we provided functions in the controllers/items.js
controller to handle these requests, namely, interacting with the Mongo back end database.
4. branch 'backbone-collection'
Backbone.js is a JavaScript library primarily targeted to the front end to help organize and display content. Technically, backbone implements the Model-View-Presenter pattern. Since our backend is just a simple REST API, using something like backbone on the frontend can help give our application more structure.
1) Yeah, but why are we using it?
Why not? The great thing about Node and JavaScript everywhere is that things hook up really nicely. As we will see, there isn't too much work that will go into setting up a simple backbone app.
It will also provide some code to set us up with event handling, which we will want for the final part of this presentation.
Also, just having simple reference material to work from when creating new projects can be really helpful.
Create a public/
folder and make a file called index.html
inside of it.
This file will hold our backbone template. Backbone isn't really as hard as it is made out to be, and this is a good spot to start to understand what's going on.
First, we create a div called items
. Inside the div, we define a script. Now this isn't a script like a JavaScript file, this is just an arbitrary script tag that we are going to give a type "text/template" to. This doesn't mean anything to HTML so it won't get displayed, but it means the world to backbone, which we will see soon.
Inside the script we can use this <%= %>
syntax to pull the names of our items attributes.
If we were working earlier with name
and points
we would want to name things the same way here, so they show up as we expect.
Also note that in our HTML file, we load backbone, jQuery, underscore.js, and app.js
- which we are going to write now.
3) Creating the backbone app.js
Inside the public/
folder, create a new JavaScript file called app.js
. This is pretty bad practice in general, but for now we are going to just stick all our backbone code into one file.
The first and most simple thing to do is to create a backbone model that will mimic the data we have on our backend in the Mongo database.
var Item = Backbone.Model.extend({ ...
We can also define some defaults here, so if the backend collection doesn't have these attributes for some reason, at least something will be displayed, and it won't throw off our styling in the front end.
Next up we need to define the fact that there will be more than one of these items that we will want to display.
var ItemLibrary = Backbone.Collection.extend({ ...
The cool thing about this code is that we can point our front end collection to a RESTful API endpoint, in this case /items
and backbone will automagically load the records in that collection.
This is where things begin to look a little bit complicated, but if we keep in mind that this whole next section of code simply pulls the template from the HTML index page to use as our view template, things aren't that difficult.
var ItemView = Backbone.View.extend({ ...
It does a couple of other things first. Whenever we create an item to display, it is going to create a div
with class itemContainer
and it is going to fill the contents of that div with the model we provides JSON attributes. These attributes will match up to the template attributes (the ones in the <%= %>
syntax) and generate the html properly.
7) Item Collection (Library) View
The last piece is a view to display our entire collection of items. This piece will wrap the collection itself into a view and provide logic to render each item in that collection.
A couple of interesting things are going on here, we are explicitly setting the el
attribute to be a div existing in our HTML that we want to render this collection of items.
Next up is the initialize
function which sets this view's collection to be our ItemLibrary
collection. This collection is the one that is tied to our backend API at /items
. Now we can pull those items with the .fetch()
call and finally .render()
.
Also note that we have registered two events here as well, the add
and the reset
events. This allows us to run code when something happens. This is all related to that evented callback world we talk about in Node.
The important call here is the render
function. This function looks very confusing at first, but when we step through it, it is not so bad. We iterate through each model in the collection we have and run renderItem
on it.
Up until this point we have just been doing set up. The key to it all is creating an ItemLibraryView
. This will kick everything off in its initialize
function.
Coming Soon!
Jun Zhao
View all articlesTopics from this blog: data science API NYC Meetup APIs
Subscribe Here
Posts by Tag
- Meetup (101)
- data science (68)
- Community (60)
- R (48)
- Alumni (46)
- NYC (43)
- Data Science News and Sharing (41)
- nyc data science academy (38)
- python (32)
- alumni story (28)
- data (28)
- Featured (14)
- Machine Learning (14)
- data science bootcamp (14)
- Big Data (13)
- NYC Open Data (12)
- statistics (11)
- visualization (11)
- Hadoop (10)
- hiring partner events (10)
- D3.js (9)
- Data Scientist (9)
- NYCDSA (8)
- Web Scraping (8)
- Career (7)
- Data Scientist Jobs (6)
- Data Visualization (6)
- Hiring (6)
- Open Data (6)
- R Workshop (6)
- APIs (5)
- Alumni Spotlight (5)
- Best Bootcamp (5)
- Best Data Science 2019 (5)
- Best Data Science Bootcamp (5)
- Data Science Academy (5)
- Demo Day (5)
- Job Placement (5)
- NYCDSA Alumni (5)
- Tableau (5)
- alumni interview (5)
- API (4)
- Career Education (4)
- Deep Learning (4)
- Get Hired (4)
- Kaggle (4)
- NYC Data Science (4)
- Networking (4)
- Student Works (4)
- employer networking (4)
- prediction (4)
- Data Analyst (3)
- Job (3)
- Maps (3)
- New Courses (3)
- Python Workshop (3)
- R Shiny (3)
- Shiny (3)
- Top Data Science Bootcamp (3)
- bootcamp (3)
- recommendation (3)
- 2019 (2)
- Alumnus (2)
- Book-Signing (2)
- Bootcamp Alumni (2)
- Bootcamp Prep (2)
- Capstone (2)
- Career Day (2)
- Data Science Reviews (2)
- Data science jobs (2)
- Discount (2)
- Events (2)
- Full Stack Data Scientist (2)
- Hiring Partners (2)
- Industry Experts (2)
- Jobs (2)
- Online Bootcamp (2)
- Spark (2)
- Testimonial (2)
- citibike (2)
- clustering (2)
- jp morgan chase (2)
- pandas (2)
- python machine learning (2)
- remote data science bootcamp (2)
- #trainwithnycdsa (1)
- ACCET (1)
- AWS (1)
- Accreditation (1)
- Alex Baransky (1)
- Alumni Reviews (1)
- Application (1)
- Best Data Science Bootcamp 2020 (1)
- Best Data Science Bootcamp 2021 (1)
- Best Ranked (1)
- Book Launch (1)
- Bundles (1)
- California (1)
- Cancer Research (1)
- Coding (1)
- Complete Guide To Become A Data Scientist (1)
- Course Demo (1)
- Course Report (1)
- Finance (1)
- Financial Data Science (1)
- First Step to Become Data Scientist (1)
- How To Learn Data Science From Scratch (1)
- Instructor Interview (1)
- Jon Krohn (1)
- Lead Data Scienctist (1)
- Lead Data Scientist (1)
- Medical Research (1)
- Meet the team (1)
- Neural networks (1)
- Online (1)
- Part-time (1)
- Portfolio Development (1)
- Prework (1)
- Programming (1)
- PwC (1)
- R Programming (1)
- R language (1)
- Ranking (1)
- Remote (1)
- Selenium (1)
- Skills Needed (1)
- Special (1)
- Special Summer (1)
- Sports (1)
- Student Interview (1)
- Student Showcase (1)
- Switchup (1)
- TensorFlow (1)
- Weekend Course (1)
- What to expect (1)
- artist (1)
- bootcamp experience (1)
- data scientist career (1)
- dplyr (1)
- interview (1)
- linear regression (1)
- nlp (1)
- painter (1)
- python web scraping (1)
- python webscraping (1)
- regression (1)
- team (1)
- twitter (1)