Lesson 4: Basic REST APIs
Full Weather Reporting API
Overview
In this lesson we build on the previous lessons and enhance our Weather Reporting System by adding a full RESTful API to our existing flow that allows the client application to Create (POST), Read (GET), Update (PUT/PATCH), and Delete (DELETE).
This is a common pattern in HTTP flows that provide a custom data access layer for a web or mobile application.
Objective
Learn about how to implement the various REST operations using a combination of HTTP-IN nodes and Object nodes.
Description:
Enhance the incoming weather report to support additional fields including humidity, wind, wind direction, and UV index.
Update the web form to allow the submission of these additional properties
Add new endpoints to the flow to support a /weather-report API with GET, POST, PUT, PATCH, and DELETE.
Test the new web app with the new endpoints.
Terminal Objective: Possess a solid understanding of how to create an HTTP-Flow that exposes BASIC REST API endpoints (GET, POST, PUT, PATCH, DELETE) and then uses the various Native Object nodes to implement those operations.
Enabling Objectives:
Learn to use an HTTP-IN POST node combined with NO CREATE
Learn to use an HTTP-IN PUT node combined with NO PUT
Learn to use an HTTP-IN PATCH node combined with function node to build patch payload and NO PATCH
Learn to use an HTTP-IN GET node combined with NO GET
Learn to use an HTTP-IN DELETE node combined with NO DELETE
New Skills: NO-3, NO-4, NO-5, NO-6
Detailed Steps
Add New Properties to Weather Report Object-Type
Edit the weather-report object type and add the following properties:
Humidity
Wind Speed
Wind direction
UV index
Open the submit-weather-report flow and modify the HTML form using the following HTML.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Weather Report</title>
</head>
<body>
<h1>Submit Weather Report</h1>
<form id="weatherForm">
<label for="temperature">Temperature (°C):</label>
<input type="number" id="temperature" name="temperature" required><br><br>
<label for="humidity">Humidity (%):</label>
<input type="number" id="humidity" name="humidity" required><br><br>
<label for="windSpeed">Wind Speed (m/s):</label>
<input type="number" id="windSpeed" name="windSpeed" required><br><br>
<label for="windDirection">Wind Direction (degrees):</label>
<input type="number" id="windDirection" name="windDirection" required><br><br>
<label for="UVIndex">UV Index:</label>
<input type="number" id="UVIndex" name="UVIndex" required><br><br>
<label for="stationId">Station ID:</label>
<input type="text" id="stationId" name="stationId" required><br><br>
<button type="submit" id="submitButton">CREATE</button>
</form>
<h2>Weather Report Details</h2>
<p id="weatherReportDetails"></p>
<script>
let currentId = null;
document.getElementById('weatherForm').addEventListener('submit', async function(event) {
event.preventDefault();
const temperature = parseFloat(document.getElementById('temperature').value);
const humidity = parseFloat(document.getElementById('humidity').value);
const windSpeed = parseFloat(document.getElementById('windSpeed').value);
const windDirection = parseFloat(document.getElementById('windDirection').value);
const UVIndex = parseFloat(document.getElementById('UVIndex').value);
const stationId = document.getElementById('stationId').value;
const data = {
temperature,
humidity,
windSpeed,
windDirection,
UVIndex,
stationId
};
try {
const url = currentId ? `/weather-report/${currentId}` : '/weather-report';
const method = currentId ? 'PUT' : 'POST';
const response = await fetch(url, {
method,
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(data)
});
if (response.ok) {
const result = await response.json();
currentId = result.id;
// Change button to 'UPDATE' if an existing report is being updated
document.getElementById('submitButton').textContent = 'UPDATE';
document.getElementById('weatherReportDetails').innerHTML = `
<strong>ID:</strong> ${result.id} <br>
<strong>Temperature:</strong> ${result.temperature} °C <button onclick="updateField('temperature')">Update</button><br>
<strong>Humidity:</strong> ${result.humidity} % <button onclick="updateField('humidity')">Update</button><br>
<strong>Wind Speed:</strong> ${result.windSpeed} m/s <button onclick="updateField('windSpeed')">Update</button><br>
<strong>Wind Direction:</strong> ${result.windDirection} ° <button onclick="updateField('windDirection')">Update</button><br>
<strong>UV Index:</strong> ${result.UVIndex} <button onclick="updateField('UVIndex')">Update</button><br>
<strong>Station ID:</strong> ${result.stationId} <button onclick="updateField('stationId')">Update</button><br><br>
<button onclick="deleteRecord()">Delete</button>
`;
} else {
document.getElementById('weatherReportDetails').textContent = "Error submitting report.";
}
} catch (error) {
document.getElementById('weatherReportDetails').textContent = "Network error.";
}
});
function updateField(field) {
const newValue = prompt(`Enter new value for ${field}:`);
if (newValue !== null) {
const data = {};
data[field] = field === 'stationId' ? newValue : parseFloat(newValue);
fetch(`/weather-report/${currentId}`, {
method: 'PATCH',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(data)
}).then(response => {
if (response.ok) {
return response.json();
} else {
throw new Error('Failed to update field');
}
}).then(result => {
document.getElementById('weatherReportDetails').innerHTML = `
<strong>ID:</strong> ${result.id} <br>
<strong>Temperature:</strong> ${result.temperature} °C <button onclick="updateField('temperature')">Update</button><br>
<strong>Humidity:</strong> ${result.humidity} % <button onclick="updateField('humidity')">Update</button><br>
<strong>Wind Speed:</strong> ${result.windSpeed} m/s <button onclick="updateField('windSpeed')">Update</button><br>
<strong>Wind Direction:</strong> ${result.windDirection} ° <button onclick="updateField('windDirection')">Update</button><br>
<strong>UV Index:</strong> ${result.UVIndex} <button onclick="updateField('UVIndex')">Update</button><br>
<strong>Station ID:</strong> ${result.stationId} <button onclick="updateField('stationId')">Update</button><br><br>
<button onclick="deleteRecord()">Delete</button>
`;
}).catch(error => {
alert("Error updating field: " + error.message);
});
}
}
function deleteRecord() {
fetch(`/weather-report/${currentId}`, {
method: 'DELETE'
}).then(response => {
if (response.ok) {
document.getElementById('weatherReportDetails').textContent = "Weather report deleted.";
currentId = null;
// Change button back to 'CREATE' after deletion
document.getElementById('submitButton').textContent = 'CREATE';
} else {
alert("Error deleting report.");
}
}).catch(error => {
alert("Network error.");
});
}
</script>
</body>
</html>Add a Full REST API
The steps above satify the need for a POST node to create a new record. Now let's add the additional nodes to provide for update and delete capabilities to give our flow a full REST API.
First, add a HTTP-IN POST node with a path of /weather-report and wire it in parallel with your existing /submit node so that it does the same thing.
Now add an HTTP-IN node with a verb=GET and a path=/weather-report/:reportId
Now add a function node with the following JS
// Get the reportId param from the path
msg.reportId = msg.req.params["reportId"];
return msg;
Now add a GET Object node and configure it's type for "weather-report" and it's object id for msg.reportId
Now add an HTTP-IN node with a verb=PUT and a path=/weather-report
Now add a function node with the following JS
msg.reportId = msg.req.params["reportId"];
if (!msg.payload.hasOwnProperty("id")) {
msg.payload.id = msg.reportId;
}
delete msg.payload._metaData;
return msg;
Now add a PUT Object node and configure it's type for "weather-report" and it's object id for msg.reportId, and input as msg.payload
Now add an HTTP-IN node with a verb=PATCH and a path=/weather-report
Now add a function node with the following JS
msg.reportId = msg.req.params["reportId"];
msg.patchArray = [];
// Iterate over each property in the payload
for (let key in msg.payload) {
if (!msg.payload.hasOwnProperty(key)) continue;
// Check if the key is an allowed property
switch (key) {
case "temperature":
case "humidity":
case "windSpeed":
case "windDirection":
case "UVIndex":
msg.patchArray.push({
op: "set",
path: "/" + key,
value: msg.payload[key]
});
break;
default:
throw new Error("Invalid property (" + key + ") specified.");
}
}
// Set the patchRequest if there are patches to apply
msg.payload = msg.patchArray.length > 0 ? msg.patchArray : [];
return msg;
Now add a SWITCH node with two conditions:
msg.payload: is not empty
otherwise
Dont forget to select "stopping after first match" at the bottom of the node configuration.
Now add a PATCH Object node and configure it's type for "weather-report" and it's object id for msg.reportId, and input as msg.payload
Your complete flow should now look like this:
Push SAVE to save the changes and then restart the agent.
Testing in the Revised Web App
Create Weather Summary Object-Type
Now create a new object type and call it "weather-summary". This will be the object type that is used to store hourly weather summaries.
Give it the following properties:
date
hour
avgTemperature
minTemperature
maxTemperature
avgHumidity
minHumidity
maxHumidity
avgWindSpeed
minWindSpeed
maxWindSpeed
reports
Make sure it has an auto-generated 'id' field as the primary key
Save the new object type
Create a New Weather Summarization Flow
This new flow will receive the incoming weather report using a trigger. It will then GET the existing weather summary for the current hour (if there is one). Using the report and the existing summary, it will calculate the updated values for the report and then PATCH the report with the modified values. It will also add the report to the reports array on the summary record.
Create a new flow called "weather-summarization"
Add the Inject, Prepare Event, and Start Event nodes
Add a
Last updated
Was this helpful?