Don't like this style? Click here to change it! blue.css

REST APIs and Backbone JS Oct. 9th 2015

Plug.DJ is gone. How can we write our own?

Here are the basic user stories:

So what are the technological tasks to overcome in building this yourself? One of the most foundational is the ability to have users create, navigate, activate and update playlists which are stored on a server. We'll need some sort of database (many choices there) and some sort of access layer to the database.

A REST API is the current coolest way to manage access to your data. That's what I want to expose you to today. My favorite javascript framework for working with a REST API is BackboneJS (not Angular). I hope to show you why today (I'm not in the majority with that opinion).

Basic REST APIs

REST stands for Representational state transfer and there are purists which will be happy to debate you on the RESTfulness of your design. It doesn't have to be HTTP based, it's more of a philosophy: Make stateless, simple, uniform client interfaces for server resources.

The way I think about designing a REST API is this: every piece of data has a URL I can request actions about/on that piece of data using HTTP Verbs (the main 4 are GET (read), POST (create), PUT (update), and DELETE (destroy)). An example:

Suppose I wanted to keep many users, each with an id (we can add playlists in a second). I could imagine the following interface/contract/agreement:

      
POST /user
(create a user return their id)
GET /user/:user_id
(get information about user # :user_id )
PUT /user/:user_id
(alter the information about user :user_id)
DELETE /user/:user_id
(destroy user :user_id)
      
    

If that is my contract then if my API is hosted at http://myapi.com someone putting the URL http://myapi.com/user/2 should see data about user number 2.

Hand's On Task 1: Visit http://js.prof.ninja/ajax_app/ and explore sending requests to an API in the basic ways.

Hand's On Task 2: Grab the chrome app POSTMAN and hand craft a PUT request to http://js.prof.ninja/ajax_app/api/bananaman.

Explore Task 3: Look at the source code of that ajax_app playground to see how you might create a simple REST API in PHP or how you might call it using jQuery.

If we want to adapt the API to allow for users to have playlists we might add some more URLs to our contract:

      
POST /user/:user_id/playlist
(create a playlist belonging to user :user_id)
GET /user/:user_id/playlist
(get a list of all playlists owned by user :user_id)
GET /user/:user_id/playlist/:playlist_id
(get all songs in playlist :playlist_id)
PUT /user/:user_id/playlist/:playlist_id
(alter the songs in :playlist_id)
DELETE /user/:user_id/playlist/:playlist_id
(destroy playlist :playlist_id)
      
    

Observation Task 4: Please note that the API I've shown you (and the next one I show you) is completely generic. That isn't normally how you do it. If you are only offering some services you don't need to react to all possible requests like that one I showed does. It might even look simpler to only implement the basic operations for one URL.

Real Data

In our first friday crash course I showed you Firebase, which also has a basic REST API built in. Today I'll give you your own database to play with, and a starting point for full stack web apps.

Cloud 9 Setup Task 5: Head to https://github.com/AndyNovo/quick-stack. Create a cloud9 workspace from that repo (you can fork it if you'ld like or just hand c9.io the URL of the repo). Ask for help if you need it.

MongoDB Setup Task 6: MongoDB is a JSON-based database which we can set up very quickly. To get a MongoDB running on your freshly spawned server find a bash terminal and run mongod --smallfiles --syslog --fork

Mongo Play Task 7: In your terminal type mongo. That fires up the MongoDB terminal. Type show dbs to see the dbs. Let's make one: use fruit, then db.fruit.insert({type: "Banana", tastiness: 12}) then db.fruit.find().

Node Setup Task 7: This quick-stack is built with Mongo, Node, and Express (3/4s of the MEAN stack). To get the Node server running, leave the mongo session, then type the following two commands: npm install then npm start. Ask for help if you need it.

Client-Side Code

In the example we're working with Node is serving the folder client whenever someone goes to this URL. But it serves the API for any other URL.

So now we have a REST API running in the background that can do all of the basic CRUD operations on most any URL you make.

To work with this from the front end I want to introduce you to BackboneJS.

Backbone Setup 8: Open index.html and change the bottom script scr to /js/hero.js. Click Preview Running Application. Create some heros.

Mongo Confirm 9: Fire up the mongo terminal and use quickstack then db.characters.find().

I'm out of prep time I'll do the rest by hand.