JSON Routes and Custom Modules

Homework

1. Review
   • Create a local http server
   • request/response cycle
   • MVC definition on MDN
   • Model-view-controller on Wikipedia
   • Create, read, update and delete on Wikipedia
2. Express Routes
   • Watch: The first 20 minutes of How to build a REST API with Node js & Express by Mosh Hamedani (we’ll eventually cover most of this video)
   • Read: Express Routes in the ExpressJS Documentation
3. Postman
   • Watch: The Basics of Using Postman for API Testing
4. Custom Modules
   • Read: Export a Module in Node.js by Tutorials Teacher
   • Watch: 15:22 - 33:00 of Node.js Tutorial for Beginners by Mosh Hamedani

---

Morning reflection

Housekeeping

1. Dailies shoutouts
   • Norville’s Ultimate Chatroom
2. Poll: Mentor pit
   • NOT anonymous!
3. Changes to afternoon Goals
4. Double-check 260 marks.

---

1. Sending JSON data

Learning Objectives

• Summarize the purpose of the Content-Type HTTP header and how they relate to MIME Type.
• Understand the difference between response.json(), response.send() and response.end().

Materials

• Article res.json() vs res.send() vs res.end() in Express
• MDN: Common MIME types
• Gist: res.send() vs res.json() vs res.end()

Key Takeaways

• When in doubt, use .send(). It dynamically sets Content-Type headers to match the data it sends.
• When sending JSON, you can either use .json() uses .send().
  • .json() is arguably less confusing
  • .json() uses .send() under the hood so the resulting HTTP headers are the same.
• .json() has JSON formatting options (replacer and space) that you’ll probably never need.
• Only use .end() when you need to end the response without providing data.
  • .send()/.json() will end the response after they send data anyway.

---

2. Custom modules with CommonJS

Learning Objectives

• Summarize the difference between CommonJS and ES Modules in Node.
  • See: Node Modules at War: Why CommonJS and ES Modules Can’t Get Along
• Create a custom (local) module.
  • Turn a file into a module: assign a value to using module.exports.
  • Load a module using require().
• Demonstrate a module’s protected variable environment.
• Load an array of objects using a custom module

Terminology

Module

A reusable block of code whose existence does not accidentally impact other code (Javascript didn’t have this before).

CommonJS Module

An agreed upon standard for how code modules should be structured. Because modules are a relatively new feature of Javascript, there are competing standards: ES Modules are used in the browser but CommonJS Modules are most common in Node.js (which supports both standards).

Materials

• Gists:
  • Node: Local modules
  • Example: Node: 3 stages of greet
  • Activity: Create custom modules

Key Takeaways

• You must prefix local module paths with ./.
• module.exports is an empty object by default.
• You can assign any value to module.exports to expose it to the outer environment.
• require() returns the value that is assigned to a module’s module.exports. All other variables will be private to the module.

---

3. JSON routes

Learning Objectives

• Define route parameter.
• Create a JSON endpoint using app.get() and custom modules.
  • Return an array of objects to GET /api/v0/definitions.
• Review:
  • Requesting data using fetch().
• Bonus: Demonstrate a route parameter using app.get() and :slug.
  • Return a single of object to GET /api/v0/definitions/:slug.

Terminology

Route parameter

A named URL segment (i.e. between or after a /) that is used to capture values based on their position in a URL. Example: in /api/image/:id, the route parameter is :id.

Materials

• Starter: Definition list
• Gist: fetch GET: Retrieving data asynchronously

Bonus Takeaways

• Route parameters are stored in request.params.
• Route parameter paths are usually placed after static routes to prevent them from “stealing” requests.

---

Open lab-time

Activities

1. Create custom modules
2. Refactor your Assignment 2 gallery to use your own custom JSON endpoint using app.get().
   1. GET /api/v0/images -> json array of objects
   2. Create a custom module for your data using require() and module.exports.
   3. Bonus: Add support for single images.
      • GET /api/v0/images/:id -> single object

Demo

1. Data logger as a module.

---

Dailies

• Submit today’s Codepen/repo/gist to the Dailies section (in Assessments) in Brightspace.