Lesson 1: HTTP Agent Introduction

Create Web Form to Record Weather Data

Overview

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:

1. Learn how to create a Native Object Type (schema)

2. Learn to use the HTTP-In node to serve a web form.

3. Capture form input data and create a new Native Object record using the Native Object Create node.

4. Use the HTTP-Response node to confirm successful submission.

Skills: FLOW-1, HTTP-1, HTTP-2, NO-1, NO-2, CORE-6

Detailed Steps

Part 1 — Create a New Object Type

1. 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:

{
  "primaryKey": "id",
  "type": "object",
  "$comment": "Schema representing a weather report",
  "properties": {
    "id": {
      "type": "string",
      "generate": {
        "type": "uuid",
        "format": "short"
      }
    },
    "datetime": {
      "type": "string",
      "generate": {
        "type": "datetime"
      },
      "$comment": "The date and time when the weather report was generated"
    },
    "temperature": {
      "type": "number",
      "description": "Temperature recorded in degrees"
    },
    "stationId": {
      "type": "string",
      "$comment": "Identifier for the weather reporting station"
    }
  },
  "$commentRequired": "Temperature and station ID are mandatory for instances of this Object Type",
  "required": [
    "temperature",
    "stationId"
  ]
}

Part 2 — Serving the HTML Form to a Browser

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.

1. Create a new ‘submit-weather-report’ flow and open the flow editor.

2. 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

3. 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.

4. 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

5. Wire the output of the HTTP-IN node to the input of the Template node

6. Drag an “HTTP-RESPONSE” node onto the canvas and double-click the node to open the configuration editor.

7. Give it a name (e.g. “OK”) and set the Status Code to 200

8. Wire the output of the Template node to the HTTP-RESPONSE node.

Part 3 — Accepting the Form Post (/submit)

1. 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

2. 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

3. Wire the output of the HTTP-IN node to the input of the Create Object node.

4. Drag an “HTTP-RESPONSE” node onto the canvas and double-click the node to open the configuration editor.

5. Give it a name (e.g. “OK”) and set the Status Code to 200

6. Wire the output of the Create Object node to the HTTP-RESPONSE node.

Part 4 — Save the Flow and Deploy it as an Agent

Your flow should now look like this:

Now it’s time to save your flow and deploy it for testing.

1. Click “SAVE” in the upper right corner of the flow editor. Navigate back to the Contextual Admin console.

2. Go to Components/Agents and click “+” to create a new agent.

3. 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.

4. Set the type to “HTTP to Flow”

5. Select the “flow” using the dropdown, selecting the flow that you created in Step 2

6. Select the latest image

7. Select Agent Size (Instance Compute) of “Small”

8. Push “Save Changes” to create and deploy your agent.

9. Go to the “Operations” tab and wait for the status column to show “Running”

Your agent configuration should now look like this:

Part 5 — Test Your Agent/Flow

1. Go back to the “Definition” tab and copy the Agent URL in the first field to the clipboard.

2. 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”

3. Hit enter and you should now see the HTML form for submitting a weather report!

4. Fill in the form with dummy data (e.g. 25 and “STATION1”) and push submit

5. Go back to the Admin Console and navigate to Records/Data

6. Click “Weather Reports” (weather-reports) in the list of object types

7. 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

8. Congratulations! You’ve completed your first training project.