Explore

Build a basic Service-Oriented Architecture (SOA) web application with Express

Engineering Web Applications with SOA and RESTful API Endpoints:

To help students understand Service-Oriented Architecture (SOA) and RESTful API endpoints, let’s break down the concepts and relate them to the lab exercise, "Build a basic Service-Oriented Architecture (SOA) web application with Express."

⁠

What is SOA (Service-Oriented Architecture)?

Definition:

SOA is a software design approach where an application is built as a collection of independent, reusable services. Each service performs a specific task and communicates with other services through well-defined interfaces (e.g., APIs).

These services are loosely coupled, meaning they can operate independently and can be reused in different applications.

Key Characteristics of SOA:

Modularity: Each service is a self-contained unit that performs a specific function (e.g., managing students in this lab).

Interoperability: Services communicate using standard protocols (e.g., HTTP) and data formats (e.g., JSON).

Reusability: Services can be reused across different applications or systems.

Scalability: Services can be scaled independently based on demand.

How SOA is Illustrated in the Lab:

In this lab, the Express server acts as the backbone of the SOA. It provides services (via RESTful API endpoints) to manage student data.

Each RESTful endpoint (e.g., /students, /students/:id) represents a service that performs a specific task, such as retrieving, adding, updating, or deleting student records.

The services are modular and can be reused or extended (e.g., integrating a database like MongoDB in future lessons).

⁠

What is a RESTful API?

Definition:

A RESTful API (Representational State Transfer API) is a way for applications to communicate with each other over the web using standard HTTP methods like GET, POST, PUT, and DELETE.

RESTful APIs are commonly used in SOA to expose services to clients (e.g., a web browser or mobile app).

Key Principles of RESTful APIs:

Stateless: Each request from a client to the server must contain all the information needed to process the request. The server does not store client state between requests.

Resource-Based: RESTful APIs treat everything as a resource (e.g., students in this lab). Resources are identified by URLs (e.g., /students).

HTTP Methods:

GET: Retrieve data (e.g., fetch all students).

POST: Create new data (e.g., add a new student).

PUT: Update existing data (e.g., modify a student’s details).

DELETE: Remove data (e.g., delete a student).

Historical note: The earliest motivation for the use of web servers in commercial IT was to front end access to SQL databases.

JSON as the Data Format: RESTful APIs often use JSON to exchange data between the client and server.

How RESTful APIs are Illustrated in the Lab:

The lab defines RESTful endpoints to manage student data:

GET /students: Fetch all student records.

POST /students: Add a new student.

PUT /students/:id: Update an existing student by ID.

DELETE /students/:id: Delete a student by ID.

These endpoints allow the front-end (HTML + JavaScript) to interact with the back-end (Express server).

⁠

How SOA and RESTful APIs Work Together in the Lab

SOA in the Lab:

The lab demonstrates SOA by breaking the application into services (e.g., managing student data).

Each service is implemented as a RESTful API endpoint in the Express server.

The services are modular and can be extended (e.g., integrating MongoDB in future lessons).

RESTful API Endpoints in the Lab:

The RESTful API endpoints act as the interface between the client (front-end) and the server (back-end).

For example:

The GET /students endpoint retrieves all student records and sends them to the front-end as a JSON response.

The POST /students endpoint accepts a new student record from the front-end and adds it to the in-memory data store.

Front-End and Back-End Communication:

The front-end (HTML + app_clientside.js) sends HTTP requests to the RESTful API endpoints to perform CRUD operations.

The back-end (Express server) processes these requests and sends appropriate responses.

⁠

Illustrating SOA and RESTful APIs in the Lab

1. Modular Services (SOA):

Each RESTful endpoint in the Express server represents a service:

GET /students: A service to retrieve all students.

POST /students: A service to add a new student.

PUT /students/:id: A service to update a student.

DELETE /students/:id: A service to delete a student.

These services are independent and reusable. For example, the GET /students service can be reused in a mobile app or another web application.

2. RESTful API Endpoints:

The RESTful API endpoints are implemented in the app.js file:

javascript

app.get('/students', (req, res) => {

res.json(students);

});

app.post('/students', (req, res) => {

const newStudent = req.body;

students.push(newStudent);

res.status(201).json(newStudent);

});

app.put('/students/:id', (req, res) => {

const id = parseInt(req.params.id);

const index = students.findIndex(student => student.id === id);

if (index !== -1) {

students[index] = { ...students[index], ...req.body };

res.json(students[index]);

} else {

res.status(404).send('Student not found');

}

});

app.delete('/students/:id', (req, res) => {

const id = parseInt(req.params.id);

students = students.filter(student => student.id !== id);

res.status(204).send();

});

3. Front-End Interaction:

The front-end (index.html + app_clientside.js) interacts with the RESTful API endpoints to perform CRUD operations.

For example:

When the user submits the form to add a new student, the app_clientside.js script sends a POST request to the POST /students endpoint.

The server processes the request, adds the new student to the in-memory data store, and sends a response back to the front-end.

4. JSON as the Data Format:

The server and client exchange data in JSON format. For example:

The GET /students endpoint returns a JSON array of student records:

json

[

{ "id": 1, "name": "Alice", "course": "JavaScript" },

{ "id": 2, "name": "Bob", "course": "Node.js" }

]

⁠

Benefits of SOA and RESTful APIs in the Lab

Modularity:

Each service (endpoint) is independent and can be developed, tested, and maintained separately.

Scalability:

The services can be scaled independently. For example, if the GET /students endpoint experiences high traffic, it can be optimized or scaled without affecting other endpoints.

Reusability:

The RESTful API endpoints can be reused in other applications (e.g., a mobile app or another web app).

Ease of Integration:

The RESTful API endpoints make it easy to integrate the application with other systems (e.g., a database like MongoDB).

⁠

Conclusion

In this lab, students learn how to build a basic SOA web application using Express. The SOA principles are illustrated through the modular RESTful API endpoints, which provide services for managing student data. By interacting with these endpoints, the front-end demonstrates how SOA and RESTful APIs work together to create a scalable, maintainable, and reusable application.

How information is shared between the FRONT END VIEW webpage and the CONTROLLER:

⁠

https://www.linkedin.com/pulse/leveraging-nodejs-npmjscom-building-distributed-web-peter-sigurdson-d64qc/⁠

⁠

https://youtu.be/Je0PjnamXLE⁠

⁠

I. Lesson Overview

Objective:

Learn how to build an SOA web application, and how it is different from a Model View Controller.

By the end of this lesson, you will be able to set up a Node.js project in Visual Studio Code, use NPM to install and manage packages to:

Build a basic Service-Oriented Architecture (SOA) web application with Express

Manage data using JSON objects.

This will build the foundation for integrating MongoDB in the upcoming lessons.

Key Outcomes:

Understand the principles of a Service-Oriented Architecture (SOA) in a JavaScript environment.

Set up a Node.js project and manage dependencies with NPM.

Develop a simple HTTP API using Express. (Application Program Interface makes available method calls on OBJECTS : sometimes in the same runtime as the caller OBJECT. Often on another computer we connect to via HTTP)

Use JSON objects to create backend data storage.

⁠

Prepare to transition to a real database (MongoDB) in future lessons.

⁠

II. Required Tools and Pre-requisites

Node.js & NPM: Ensure Node.js (which includes NPM) is installed.

Installation Guide⁠

⁠

Visual Studio Code (VS Code): Your IDE for code editing.

Download VS Code⁠

⁠

Basic JavaScript knowledge: Familiarity with variables, functions, and JSON syntax.

Understanding of HTTP methods and RESTful APIs: Concepts like GET, POST, PUT, DELETE.

⁠

III. Lesson Structure & Timeline

Introduction & Overview (10 minutes)

Briefly explain what SOA is and how it helps build modular, maintainable web applications.

Discuss the role of JSON objects in simulating a backend database for now.

Environment Setup (15 minutes)

Create a project folder. c:\node_soa_webapp

Open the folder in Visual Studio Code. code .

Initialize a new Node.js project using npm init -y {preparing to do npm -publish}

Install Express with npm install express

Building the Express Server (30 minutes)

Create a new file (e.g., app.js).

Set up a basic Express server.

Create a JSON object to simulate data storage.

Define RESTful endpoints (GET, POST, PUT, DELETE).

Hands-on Lab & Testing (30 minutes)

Run the server and test endpoints using a tool like Postman or curl.

Modify the endpoints and add error handling.

Discuss how each endpoint fits into a SOA.

Wrap-up, Discussion & Homework (5-10 minutes)

Recap what you’ve learned.

Preview how this model will evolve with MongoDB next week.

Assign a short exercise to extend or modify the application.

⁠

IV. Detailed Step-by-Step Instructions

1. Setting Up Your Project

Create a New Project Directory: Open your terminal (or use VS Code’s integrated terminal) and create a folder:

mkdir soa-js-app

cd soa-js-app

Initialize the Project with NPM: Run:

npm init -y

This command creates a default package.json file to manage your project dependencies.

Install Express: Install the Express framework:

npm install express

2. Building the Express Server

Create the Server File: In VS Code, create a file named app.js and add the following code:

// Import Express

const express = require('express');

const app = express();

// Middleware to parse JSON request bodies

app.use(express.json());

// In-memory JSON object simulating a database (e.g., a list of students)

let students = [

{ id: 1, name: 'Alice', age: 22 },

{ id: 2, name: 'Bob', age: 24 }

];

// GET endpoint: Retrieve all students

app.get('/students', (req, res) => {

res.json(students);

});

// POST endpoint: Add a new student

app.post('/students', (req, res) => {

const newStudent = req.body;

// Simple ID assignment (for demo purposes)

newStudent.id = students.length ? students[students.length - 1].id + 1 : 1;

students.push(newStudent);

res.status(201).json(newStudent);

});

// PUT endpoint: Update a student's details

app.put('/students/:id', (req, res) => {

const studentId = parseInt(req.params.id);

const index = students.findIndex(student => student.id === studentId);

if (index !== -1) {

students[index] = { ...students[index], ...req.body };

res.json(students[index]);

} else {

res.status(404).send('Student not found');

}

});

// DELETE endpoint: Remove a student

app.delete('/students/:id', (req, res) => {

const studentId = parseInt(req.params.id);

const initialLength = students.length;

students = students.filter(student => student.id !== studentId);

if (students.length < initialLength) {

res.status(204).send(); // No Content

} else {

res.status(404).send('Student not found');

}

});

// Start the server

const PORT = 3000;

app.listen(PORT, () => {

console.log(`Server is running on port ${PORT}`);

});

Explanation:

Express Setup: The code initializes Express.js web server and sets up middleware to parse JSON.

In-Memory Data Store: A simple array of object literals: student records holds our JSON data objects.

RESTful Endpoints: Corresponding to the basic SQL operations of CRUD

GET /students: Returns all student records : READ

POST /students: Accepts a new student in the request body and adds it to the array. CREATE

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.