Lesson 1: Build and test RESTful APIs with Postman

RESTful APIs

1. What is a RESTful API?

• Definition: REST (Representational State Transfer) is an architectural style for designing networked applications. A RESTful API allows interaction with web services using standard HTTP methods (GET, POST, PUT, DELETE).

• Key Concepts and RESTful API Charateristics:

  • Client-Server: The client (e.g., a web browser, mobile app) and server are separate entities.

  • Stateless: Each request from a client contains all the information needed to process it.

  • Cacheable: Responses can be cached to improve performance.

  • Resources: Represented as URLs (e.g., /users, /products).

  • Uniform Interface: A consistent way of interacting with resources using HTTP Methods, URLs, and data formats (typically JSON). :

    • GET: Retrieve data.

    • POST: Create new data.

    • PUT: Update existing data.

    • DELETE: Remove data.

  • URLs (Endpoints): Unique addresses used to identify resources.

  • Representations: Resources are transferred in a specific format, most commonly JSON (JavaScript Object Notation).

• Example: A RESTful API for a bookstore might have endpoints like /books to get a list of books or /books/:id to get details of a specific book.

2. Building RESTful APIs with Express Framework and a Vite React Application:

• Setting up the Project:

  1. Create a Vite React project:

     Bash

     npm create vite@latest my-api-app --template react
     cd my-api-app
     npm install

• Install Express and other dependencies:

npm install express cors body-parser

• Setup Express and Testing APIs:

  1. Initialize a Node.js Project:

     mkdir my-api-app && cd my-api-app
     npm init -y
     npm install express cors

  2. Create the server file (server.js or index.js):

     • Create index.js:

       const express = require('express');
       const cors = require('cors');
       const app = express();
       const PORT = 3000;
       
       app.use(cors());
       //app.use(bodyParser.json()); // Enable parsing JSON request bodies
       app.use(express.json());
       
       // Sample data
       let books = [
         { id: 1, title: '1984', author: 'George Orwell' },
         { id: 2, title: 'To Kill a Mockingbird', author: 'Harper Lee' },
       ];
       
       // GET all books - API Endpoints
       app.get('/books', (req, res) => {
         res.json(books);
       });
       
       // GET a specific book
       app.get('/books/:id', (req, res) => {
         const book = books.find(b => b.id == req.params.id);
         if (book) res.json(book);
         else res.status(404).send('Book not found');
       });
       
       // POST a new book
       app.post('/books', (req, res) => {
         const newBook = { id: books.length + 1, ...req.body };
         books.push(newBook);
         res.status(201).json(newBook);// 201 Created status code
       });
       
       // PUT to update a book
       app.put('/books/:id', (req, res) => {
         const index = books.findIndex(b => b.id == req.params.id);
         if (index !== -1) {
           books[index] = { id: parseInt(req.params.id), ...req.body };
           res.json(books[index]);
         } else res.status(404).send('Book not found');
       });
       
       // DELETE a book
       app.delete('/books/:id', (req, res) => {
         books = books.filter(b => b.id != req.params.id);
         res.status(204).send();
       });
       
       app.listen(PORT, () => console.log(`Server running on http://localhost:${PORT}`));

  3. Testing RESTful APIs with Postman:

     • Install Postman: Download from postman.com.

     • Testing Steps:

       1. GET Request:

          • Open Postman and enter http://localhost:3000/books.

          • Click Send to retrieve the list of books.

       2. POST Request:

          • Select POST and enter http://localhost:3000/books.

          • Go to Body, select raw, and choose JSON format.

          • Enter the following:

            {
              "title": "The Great Gatsby",
              "author": "F. Scott Fitzgerald"
            }

          • Click Send to add a new book.

       3. PUT Request:

          • Select PUT and enter http://localhost:3000/books/1.

          • Update the book information in the Body and click Send.

       4. DELETE Request:

          • Select DELETE and enter http://localhost:3000/books/1.

          • Click Send to delete the book.

     4. Integrating the API with a Vite React Application:

     • Fetching Data from API:

       • Edit src/App.jsx:

         import { useState, useEffect } from 'react';
         
         function App() {
           const [books, setBooks] = useState([]);
         
           useEffect(() => {
             fetch('http://localhost:3000/books')
               .then(response => response.json())
               .then(data => setBooks(data));
           }, []);
         
           return (
             <div className="p-4">
               <h1 className="text-2xl font-bold">Book List</h1>
               <ul>
                 {books.map(book => (
                   <li key={book.id}>{book.title} by {book.author}</li>
                 ))}
               </ul>
             </div>
           );
         }
         
         export default App;

  Run both the server and the React app:

  • In your terminal, navigate to your project directory and run: node index.js (or nodemon index.js for automatic restarts).

  • In a separate terminal, run: npm run dev (or yarn dev) to start your React development server.

Student Activity:

• Build a RESTful API using Express to manage a list of tasks.

• Test the API using Postman (add, update, delete tasks).

• Create a Vite React app to display and interact with the API.

By the end of this session, students will understand RESTful APIs, how to build them using Express, and how to test and integrate them into a React application.