Writing RESTful API for Web Development

Miguel Sy

January 14, 2021

What is an API?
  • Application Programming Interface
  • A software intermediary that allows two applications to communicate and interact
  • For our use case in web development, it allows different devices to communicate over a network (the internet)
  • Restaurant Analogy: Restaurant Menu and Waiter is the API

<br/>

What is REST?
  • Representational State Transfer
  • A software architectural style that defines a set of constraints and characteristics
  • Relatively simpler when compared to other protocols
  • Requires DECOUPLING between the server and client
  • Client only needs to understand how to navigate information provided by the server (via knowledge of API endpoints)

<br/>

Main Characteristics of a RESTful API in Web Development
  • Uses HTTP as its transport layer
  • All HTTP methods should follow standard use-case
  • Body of a request or response should represent a resource or a collection of resource
  • Supports the JSON format

<br/>

Best Practices on Implementing RESTful APIs
  • API endpoints (URLs) are in lowercase and in the form of a noun that represents the resource it provides access to

<div class="mb-3 ml-4"> <img class="img-fluid" src="http://strapi.saperium.com/uploads/restapi12_a5ee57e332.png"> </div>

  • Make Proper Use of URL Parameters, Queries, and Request Body

    • URL Parameter – Resource Identification
      • Example: /users/:userId
    • URL Query – Additional Options
      • Example: /users?page=1
    • Request Body – Contains Data for Modifying Resource
  • Resources that belong to a collection should be prefixed by the collection’s URL

    • Example: /users -> collection, /users/:userId/settings -> resource
  • Strictly follow HTTP Method Spec (CRUD)

    • Post – Create a Resource
      • Respond with Request Parameters
    • Get – Read a Resource
      • Respond with Resource
    • Put – Update a Resource (Full Update)
      • Respond with Request Parameters
    • Patch – Update a Resource (Partial Update)
      • Respond with Request Parameters
    • Delete – Delete a Resource
      • Respond with Request Parameters

    *Don't Update or Delete Using the HTTP POST Method

  • Follow Correct HTTP Status Codes on Server Response

    • 200 – OK
    • 400 – Bad Request
    • 401 – Unauthorized
    • 404 – Resource Not Found
    • 500 – Internal Server Error
    • 503 – Service Unavailable

<br/>

Node.js Express RESTful API Exercise
  • Goal: Create a Simple User CRUD
    • Create a User (User ID, Username, Email, Password)
    • Get the Users Collection
    • Get the User
    • Update the User
    • Delete the User

<br/>

Prerequisites (Follow these steps if you don’t have a current app yet)

1. Create a New Express App <div> <img class="img-fluid img-width-50" src="http://strapi.saperium.com/uploads/restapi3_34234347f8.png"> </div>

2. NPM Install <div> <img class="img-fluid img-width-50" src="http://strapi.saperium.com/uploads/restapi7_851e890f7c.png"> </div>

3.Install nodemon and shortid <div> <img class="img-fluid img-width-50" src="http://strapi.saperium.com/uploads/restapi13_7485df745c.png"> <img class="img-fluid img-width-50" src="http://strapi.saperium.com/uploads/restapi16_4e229bd539.png"> </div>

4. Replace NPM Start with Nodemon and Run ‘npm start’ <div> <img class="img-fluid img-width-50" src="http://strapi.saperium.com/uploads/restapi8_e4a6901354.png"> </div>

<br/>

Exercise Steps (Put User as an Example)

1. Set Index Router for Home Route

<div> <img class="img-fluid img-width-50" src="http://strapi.saperium.com/uploads/restapi14_bdc1553306.png"> </div>

2. Add a Route

<div> <img class="img-fluid img-width-50" src="http://strapi.saperium.com/uploads/restapi9_e298e36067.png"> </div>

3. Add a Controller

<div> <img class="img-fluid img-width-50" src="http://strapi.saperium.com/uploads/restapi6_f973ceb369.png"> </div>

4. Test API Route via Postman

  • Set HTTP Method and Request URL

<div> <img class="img-fluid img-width-50" src="http://strapi.saperium.com/uploads/restapi11_967e3d9261.png"> </div>

  • Set Request Headers

<div> <img class="img-fluid img-width-50" src="http://strapi.saperium.com/uploads/restapi10_b2a20c0da7.png"> </div>

  • Set Request Body

<div> <img class="img-fluid img-width-50" src="http://strapi.saperium.com/uploads/restapi4_a5a64248fb.png"> </div>

  • Check Server Response

<div> <img class="img-fluid img-width-50" src="http://strapi.saperium.com/uploads/restapi17_e37c57b8a7.png"> </div>

  • Verify Resource State

<div> <img class="img-fluid img-width-50" src="http://strapi.saperium.com/uploads/restapi18_6b0cea1517.png"> </div>