Writing RESTful API for Web Development

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>