πŸ§‘πŸΎβ€πŸ’» prep

CRUD

Learning Objectives

We will build a CRUD API. CRUD stands for Create, Retrieve, Update, Delete. If you think about it, this is what most applications do:

✨ Create some “resources” πŸ• Retrieve them (GET them) πŸ“¨ Update them πŸ—‘οΈ Delete them

🎯 Goal

Our API will manage movie data. It will:

✨ Create a new movie, πŸ• Retrieve a list of movies or a single movie

We will build these endpoints:

  1. GET /movies should return all the movies
  2. GET /movies/:movieId should return a single movie (that matches the passed movieId)
  3. POST /movies should save a new movie

πŸ‘‰ Fork the Node-Starter-Kit repo and clone it to your computer. Then run npm install to install the dependencies.

πŸ• GET

Learning Objectives

GET /movies should return all the movies

In server.js, create a GET /movies endpoint that returns all the movies (see below for some sample data).

app.get("/movies", (req, res) => {
  res.send(moviesData);
});
const movies = [
  {
    id: 1,
    title: "The Godfather",
    certificate: "18",
    yearOfRelease: 1972,
    director: "Francis Ford Coppola",
  },
  {
    id: 2,
    title: "The Shawshank Redemption",
    certificate: "15",
    yearOfRelease: 1994,
    director: "Frank Darabont",
  },
  {
    id: 3,
    title: "Schindler's List",
    certificate: "15",
    yearOfRelease: 1993,
    director: "Steven Spielberg",
  },
];

πŸ§ͺ Run and test

  1. npm run dev
  2. Open Postman
  3. Make a GET request to http://localhost:3000/movies

πŸ• GET single movie

Learning Objectives

GET /movies/:movieId should return a single movie (that matches the passed movieId)

Sometimes, we do not want to list all the information in one request, maybe we only want to get the information related to a single movie. Imagine a page to display the details of one movie. We’d call the server, get all movies, then filter the one we need client-side. It would be more effective to tell the server to just return the one movie we are interested in.

We will now add a new endpoint to return only a single movie GET /movies/:movieId. In this case, movieId will tell us what movie we can return. The call will be GET /movies/10 and that will return the movie with that has movieId: "10".

This endpoint has something different. The endpoint /movies/:movieId has a dynamic part. The movieId will vary depending on what the client sends.

In server.js, create a GET /movies/:movieId endpoint that returns a single movie. The movieId will be passed as a parameter in the URL.

app.get("/movies/:movieId", (req, res) => {
  const movieId = req.params.movieId;
  const movie = moviesData.find((movie) => movie.movieId === movieId);
  res.send(movie);
});

πŸ§ͺ Run and test

  1. Save your changes
  2. Make a GET request to http://localhost:3000/movies/10

πŸ“¨ POST

Learning Objectives

POST /movies should save a new movie

In order for our server-side to receive and use the data sent by the client, we will need to install and use a middleware.

The JSON middleware makes it easy for our route handlers to read JSON data from the request. If the Content-Type request header indicates that the request body contains JSON data then the middleware calls JSON.parse to convert the request body into a JavaScript data structure.

To register the JSON middleware, add the following to the server code:

app.use(express.json()); // before our routes definition

In server.js, create a POST /movies endpoint that saves a new movie. The movie will be passed as a JSON object in the request body.

  1. Add the following code to server.js:
app.post("/movies", (req, res) => {
  const newMovie = req.body;
  moviesData.push(newMovie);
  res.send("movie added successfully!");
});
  1. Open Postman and create a new request.
  2. Set the Request Type to POST.
  3. Enter the URL for your endpoint, which should be http://localhost:3000/movies.
  4. Set the Body Type to raw and format to JSON (application/json).
  5. Enter the movie Data in the body of the request as JSON:
{
  "id": "13",
  "title": "Boyhood",
  "certificate": "15",
  "yearOfRelease": 2014,
  "director": "Richard Linklater"
}
  1. Click Send.
  2. You should see the movie you just created in the response.