Lesson 1: HTTP Agent Introduction
Last updated
Last updated
Create a Web Form to Record Weather Data
Objective: Set up a simple HTTP flow that serves a web form for inputting weather data (temperature, humidity, wind speed, etc.).
Description: This project introduces basic HTTP flows and interaction with Native Objects by allowing users to manually input weather data into the system. The flow will store this data as Native Objects in your system.
Terminal Objective: Gain a basic understanding of Object-Types, HTTP flows and how to create Native Objects in a flow.
Enabling Objectives:
Learn how to create a Native Object Type (schema)
Learn to use the HTTP-In node to serve a web form.
Capture form input data and create a new Native Object record using the Native Object Create node.
Use the HTTP-Response node to confirm successful submission.
Skills: FLOW-1, HTTP-1, HTTP-2, NO-1, NO-2, CORE-6
Create a new object-type schema for a “weather-report” object with the following fields:
ID (auto-generated UUID)
Date-time (also auto-generated)
Temperature (in C)
Station ID (string), which reports which weather station submitted the report
NOTE: You can use the AI Assistant to create the schema by simply asking it to “create a weather report schema with auto generated ID and auto generated datetime properties as well as “temperature” and “station ID” properties to represent the reporting weather station”
Here is the resulting schema from the AI assistant for this prompt:
Follow the steps below to create an HTTP endpoint that will respond to an HTTP GET and serve the HTML form that you created using chatGPT.
Create a new ‘submit-weather-report’ flow and open the flow editor.
Drag an “HTTP-IN” node onto the canvas and double-click the node to open the configuration editor.
Set the Method to “GET”
Set the URL to “/form”
Give the node a name (e.g. “Serve Web Form”)
Click “Done” to save your changes
Use ChatGPT to create a web-form for collecting the temperature report using the following prompt:
“Create a web app with a form for submitting a weather report with only two fields: temperature and station Id (string). When the user pushes the submit button, the app should post to ‘/submit’ endpoint on the server.”
Make sure the generated code submits a post-body that has temperature and stationId with the same names as what is in the native object schema that you created in Part 1.
Drag a “Template” node onto the canvas and double-click the node to open the template editor:
Give it a name.
Set the Syntax Highlight setting to “HTML”
Paste the HTML/JS from ChatGPT into the multi-line template field
Click “Done” to save your changes
Wire the output of the HTTP-IN node to the input of the Template node
Drag an “HTTP-RESPONSE” node onto the canvas and double-click the node to open the configuration editor.
Give it a name (e.g. “OK”) and set the Status Code to 200
Wire the output of the Template node to the HTTP-RESPONSE node.
Drag an “HTTP-IN” node onto the canvas and double-click the node to open the configuration editor.
Set the Method to “POST”
Set the URL to “/submit”
Give the node a name (e.g. “Submit Web Form”)
Click “Done” to save your changes
Drag a Create Object node onto the canvas and double-click to open the configuration editor.
Give it a name (e.g. “Create Weather Report”)
Set the object-type to “weather-report” using the drop-down
Click “Done” to save your changes
Wire the output of the HTTP-IN node to the input of the Create Object node.
Drag an “HTTP-RESPONSE” node onto the canvas and double-click the node to open the configuration editor.
Give it a name (e.g. “OK”) and set the Status Code to 200
Wire the output of the Create Object node to the HTTP-RESPONSE node.
Your flow should now look like this:
Now it’s time to save your flow and deploy it for testing.
Click “SAVE” in the upper right corner of the flow editor. Navigate back to the Contextual Admin console.
Go to Components/Agents and click “+” to create a new agent.
Give the agent an “ID”, “Name”, and “Description. For example:
ID: submit-weather-report
Name: Submit Weather Report
Description: HTTP Agent that allows a user to submit a weather report using a web-based form.
Set the type to “HTTP to Flow”
Select the “flow” using the dropdown, selecting the flow that you created in Step 2
Select the latest image
Select Agent Size (Instance Compute) of “Small”
Push “Save Changes” to create and deploy your agent.
Go to the “Operations” tab and wait for the status column to show “Running”
Your agent configuration should now look like this:
Go back to the “Definition” tab and copy the Agent URL in the first field to the clipboard.
Open a browser and paste the URL into the browser and then add “/form” onto the end (remember our first HTTP-IN node was configured to response to “/form”
Hit enter and you should now see the HTML form for submitting a weather report!
Fill in the form with dummy data (e.g. 25 and “STATION1”) and push submit
Go back to the Admin Console and navigate to Records/Data
Click “Weather Reports” (weather-reports) in the list of object types
Since you have submitted one report using the web form, you should now see that report (and only that report) in the list of weather reports
Congratulations! You’ve completed your first training project.
