LogoLogo
Visit Contextual.ioSign Up
  • Getting Started
    • Welcome
    • Tour: Hello, AI World!
  • TRAINING
    • Basic Developer Training Course
      • Lesson 1: HTTP Agent Introduction
      • Lesson 2: Logging and Error Handling Basics
      • Lesson 3: Event Processing Agent Introduction
  • Services Catalog
    • What's in the Catalog?
      • Intro Patterns
      • Object Type Bundles
    • Browse by Platform
    • All Intro Patterns
      • Anthropic Claude Image Analysis
      • Mistral AI Prompt and Response
      • xAI Grok Prompt and Response
      • DeepSeek Chat Prompt and Response
      • Qwen Chat Prompt and Response
      • Perplexity AI Search and Response
      • Firecrawl Website Scraper
      • Groq Prompt and Response
      • Nyckel Dog Breed Classification
      • RapidAPI ClassifyAI Text Classification
      • RapidAPI YouTube AI Video Summary
      • UnifyAI Model Comparison
      • WebPilot URL Analysis and Summarization
      • OpenAI Assistants Prompt and Response
      • OpenAI Sync
    • All Prebuilt Solutions
      • Invoice AI
      • Lead Generation Form
    • All Object Type Bundles
      • Work Order Management System ITIL Object Type Bundle
        • Work Order
        • User
        • Role
        • Permission
        • Asset
        • Task
        • Action
        • Attachment
        • Comment
        • Notification
        • Audit Log
        • Service Level Agreement
        • Custom Fields
        • Work Order Template
        • Work Order Transition
        • Escalation Policy
        • Tag
  • Components & Data
    • Object Types
      • Data in Contextual
        • Secrets
        • Validation
        • Versioning
      • Examples
      • Creating an Object Type
      • Object Type Details
        • Definition
        • Data Schema
          • Automatic Record Metadata
          • Generated Values
            • Dates and Times
            • UUIDs
          • Frequently Used Validation
          • Disallowing Null Property Values
          • Disallowing Undefined Properties
          • Secrets
          • AI Assistant
          • ID and PrimaryKey Permanence
        • UI Schemas
        • Features
        • Triggers
        • Actions
        • Audit Trail
        • Versions
        • Templates
        • Records
      • Using Object Types in Flows
      • Records
        • Records and Your Tenant API
        • Record Import
    • Flows
      • Nodes
      • Wires
      • Message Object
      • Flow Editor
        • Basics
        • Saving Changes
        • In-Flow Testing with Debugger
        • Restart Agents to Make Changes Active
        • Config
      • Node Reference
        • Common
          • Log Tap
          • Inject
          • Debug
          • Complete
          • Catch
          • Status
          • Link In
          • Link Call
          • Link Out
          • Comment
        • Event
          • Prepare Event
          • Event Start
          • Event End
          • Event Error
        • Object
          • Search Object
          • Get Object
          • Create Object
          • Patch Object
          • Put Object
          • Delete Object
          • Run Action
        • Request
          • Send to Agent
          • HTTP GET
          • HTTP PATCH
          • HTTP PUT
          • HTTP DELETE
          • HTTP POST
          • GQL
          • Produce Message
        • Function
          • Function
          • Switch
          • Change
          • Range
          • Template
          • Delay
          • Trigger
          • Exec
          • Filter
          • Loop
        • Models
          • ML Predict
        • Network
          • MQTT In
          • MQTT Out
          • HTTP In
          • HTTP Response
          • HTTP Request
          • WebSocket In
          • WebSocket Out
          • TCP In
          • TCP Out
          • TCP Request
          • UDP In
          • UDP Out
        • Sequence
          • Split
          • Join
          • Sort
          • Batch
        • Parser
          • csv
          • html
          • json
          • xml
          • yaml
    • Agents
      • Creating an Agent
      • Types of Agents
        • Event to Flow
        • HTTP to Flow
          • Custom Domains
      • How Agents Work
        • Flow Execution
        • HTTP Load Balancing
        • Event Routing
      • Scale and Performance
        • Flow execution
        • Parallel Instances
        • Event Lag Scaling
        • Compute Threshold Scaling
        • Instance Compute Sizing
      • Agent Details
        • Definition
        • Operations
        • Logs
          • Session Log
          • Message Log
        • Audit Trail
        • Versions
      • Using Agents in Flows
    • Connections
      • Creating a Connection
      • Types of Connections
        • Basic
        • Bearer
        • Client Grant
        • Kafka
        • Password Grant
        • Public
        • Pulsar
      • Using Connections in Flows
    • JWKS Profiles
      • Using JWKS Profiles in Your Solution
  • PATTERNS
    • Solution Architecture
      • Events, Messages, Queues
    • Working with Data
      • Search Object Node & Pagination
      • Message Payload Content - Triggers and Actions
    • Industry Cookbooks
      • Field Services
  • Tenants
    • Tenant Workspace
    • Tenant Logs
      • Contextual Log Query Language (CLQL)
        • String Searches
        • Keyword Searches
        • Advanced Operators
    • Tenant API
      • API Keys
        • API Key Settings
        • API Key Permissions
      • Documentation
  • Release Notes
    • 2024
      • 2024.12.09
Powered by GitBook
On this page
  • Overview
  • Detailed Steps

Was this helpful?

  1. TRAINING
  2. Basic Developer Training Course

Lesson 1: HTTP Agent Introduction

PreviousBasic Developer Training CourseNextLesson 2: Logging and Error Handling Basics

Last updated 7 months ago

Was this helpful?

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