Intro to REST

Lesson Objectives

1. Describe REST and list the various routes
2. Create an Index route
3. Install JSONView to make viewing JSON easier
4. Create a Show route
5. Enhance the data in your data array

URI Patterns

We want to build maintainable, scalable applications.

To do that, we want to have a plan on how we name our URLs.

Let's say we want to make an app that tracks bookmarks for us.

We want to be able to

• Create a bookmark
• See a list of our bookmarks
• See the details of one bookmark
• Update a bookmark
• Delete a bookmark

Let's take ~5 minutes to answer: How should we organize our URLs?

Good URIs shouldn't change

When you provide a link, it should always work.

resource

Some URI Pain points

• version 2.0, reorganization to make the app better (while the app should improve, the URIs should be able to stay constant, if they were designed well)
• confidential/valid/up to date/out of date - how to organize?
• moving files - you should be able to move files without changing the URI
• making the name too specific/have too many details ie putting /jane in the URL because she worked on it. Then John takes over part of Jane's work. Yikes.

Describe REST and list the various routes

Lucky for us, some brilliant minds have developed a URI pattern that solves a lot of the above problems. If we follow the pattern, we can alleviate a lot of pain points.

• REST stands for Representational state transfer
• It's just a set of principles that describe how networked resources are accessed and manipulated
• We have 7 RESTful routes that allow us basic operations for reading and manipulating a collection of data:

URL	HTTP Verb	Action
/photos/	GET	index
/photos/:id	GET	show
/photos/new	GET	new
/photos	POST	create
/photos/:id/edit	GET	edit
/photos/:id	PATCH/PUT	update
/photos/:id	DELETE	destroy

Create an Index route

Setup our app

1. mkdir fruits
2. cd fruits
3. touch server.js
4. npm init -y
5. npm install express
6. require express and set up a basic server that logs listening when you start the app
7. start the app with nodemon and make sure it is working

Let's have a set of resources which is just a javascript array. To create an index (index = like table of contents, lists all the items) route, we'd do the following:

// DEPENDENCIES
const express = require("express");
// CONFIGURATION
const app = express();
const PORT = 3000;

// 'DATA'
const fruits = ["apple", "banana", "pear"];

// ROUTES
// index
app.get("/fruits/", (req, res) => {
  res.send(fruits);
});

// Listener
app.listen(PORT, () => {
  console.log("listening on port", PORT);
});

Now go to http://localhost:3000/fruits/

Success?

[
  "apple", 
  "banana", 
  "pear"
]

Thought question: What happens when you go to http://localhost:3000 ? Why?

Install JSON Formatter to make viewing JSON easier

• JSON stands for Javascript Object Notation
• It's just a way to represent data that looks like a Javascript object or array
• JSON Formatter extension just makes it easier to view JSON data.

Install it:

1. Go to https://chrome.google.com/webstore/detail/json-formatter/bcjindcccaagfpapjjmafapmmgkkhgoa
2. Click on "Add To Chrome"

Create a Show route

To create a show route, we'd do this:

server.js

// DEPENDENCIES
const express = require("express");

// CONFIGURATION
const app = express();
const PORT = 3000;

// 'DATA'
const fruits = ["apple", "banana", "pear"];

// ROUTES
// index route
app.get("/fruits/", (req, res) => {
  res.send(fruits);
});

//add show route
app.get("/fruits/:indexOfFruitsArray", (req, res) => {
  res.send(fruits[req.params.indexOfFruitsArray]);
});

app.listen(PORT, () => {
  console.log("listening on port", PORT);
});

Now go to http://localhost:3000/fruits/1

Enhance the data in your data array

• Right now are data array fruits is just an array of strings
• We can store anything in the array, though.
• Let's enhance our data a bit:

server.js

// DEPENDENCIES
const express = require("express");

// CONFIGURATION
const app = express();
const PORT = 3000;

// 'DATA'
const fruits = [
  {
    name: "apple",
    color: "red",
    readyToEat: true,
  },
  {
    name: "pear",
    color: "green",
    readyToEat: false,
  },
  {
    name: "banana",
    color: "yellow",
    readyToEat: true,
  },
];

// ROUTES
// index
app.get("/fruits/", (req, res) => {
  res.send(fruits);
});

// show
app.get("/fruits/:indexOfFruitsArray", (req, res) => {
  res.send(fruits[req.params.indexOfFruitsArray]);
});

// Listener
app.listen(PORT, () => {
  console.log("listening on port", PORT);
});