Search…
CRANQ http-request

Using http dispatcher - From "get task" to "post a todo item"

Example 1 - Http Get

Objective: Get the #1 task data from https://jsonplaceholder.typicode.com/ and log it to the console
New concepts:
  • Using the http dispatcher for getting data
"Http get app in Cranq"
Steps:
  • Add new CRANQ project and save it as http_request_1.cranqj
  • Create a new structure node for this example
    • rename the node to http get example
    • add new input port to it and rename it to start
    • add new output port to it and rename it to log
  • Navigate into the [http get example] node with a double click
  • Now add a http dispatcher node which we'll need for calling the api,
    • add a io/http/Request dispatcher node with search
    • rename it to get task
    • set the Value of the <verb> port to "GET"
    • set the Value of the <headers> port to "" (an empty string)
    • set the Value of the <body> port to "" (also an empty string)
  • We need at least one signal to trigger the [get task] node. We will now use the <url> input port for this
    • add a new data/Store node with search to store the url of the api
    • rename it to url
    • set the Value of the <data> port to "https://jsonplaceholder.typicode.com/todos/1"
  • Connect the <data> output port of the [url] node to the <url> input port of the [get task] node
  • Connect the <start> input port of the [http get example] parent node to the <read> input port of [url] node
  • The Value of the <body> output of the [get task] node is of data type string. We would like to use it as an object so let's now parse it to JSON.
    • add the data/dictionary/JSON parser node with search
    • rename the node to body to json object
  • Connect the <body> output port of [get task] node to the <json> input port of [body to json object]
  • Connect the <parsed> output port of the [body to json object] node to the <log> output port of the [http get example] parent node
  • Save the project
  • When you run the program you will get the data of the todo with id 1

Example 2 - Http Get with parameterized url

New concepts:
  • Using the string templater
"Http get with parameterized url app in Cranq"
Steps:
  • Load the previously created http_request_1.cranqj CRANQ project
  • Save it as http_request_2.cranqj so you keep a copy of the previous example project
  • Rename the [http get example] node as http get with parameterized url
  • Navigate into [http get with parameterized url] node
  • Delete [url] node
  • We need a node which can build the templated url
    • add a string/Template filler node with search
    • name it build url
    • set its <template> input to "https://jsonplaceholder.typicode.com/todos/{taskid}". The {taskid} is the token which will be replaced by the <params> input.
  • Add a data/Store node using search to store the task id value which is being replaced by the {taskid} token in the url template.
    • name it taskid
    • set the Value field of the input port to 2.
  • The [build url] node <params> input works with key value pairs so we need to convert the [taskid] node <&data> output to a dictionary
    • add the flow/Syncer node by search
    • name it build taskid parameter
    • set the Value field of the <fields> input port to ["taskid"]. This generates a <taskid> spread port.
  • Connect the <read> input port of the [taskid] node to the <start> input port of the [http get with parameterized url] parent node
  • Connect the <data> output port of the [taskid] node to the <taskid> input port of the [build taskid parameter]
  • Connect the <synced> output port of the [build taskid parameter] node to the <params> input port of the [build url]
  • Connect the <filled> output port of the [build url] node to the <url> input port of the [get task]
  • Save the project
  • When you run the program you will get the data of the todo with id 2

Example 3 - Reusable Task getter node

New concepts:
  • Making a reusable structure node
"Reusable Task getter node"
Steps:
  • Load the previously created http_request_2.cranqj CRANQ project
  • Save it as http_request_3.cranqj
  • Rename the [http get example] node as reusable task getter example
  • Navigate into the [reusable task getter example] node
  • Delete every node except the [taskid] and [body to json object] nodes
  • Create a new node for getting todo data
    • Rename its prototye to example/ Todo getter
    • Rename its instance get todo #1
    • add new input port to it and rename it to task id
    • add new output port to it and rename it to task
  • Navigate into [get todo #1]
  • Build the get todo logic based on the http_request_2 example
    • add flow/Syncer node with search and name it build taskid parameter
      • set the Value field of the <fields> input port to ["taskid"]
    • add a string/Template filler node by search and name it build url
      • set the Value field of its <template> input port to "https://jsonplaceholder.typicode.com/todos/{taskid}".
    • add a io/http/Request dispatcher node with search. Name it get todo data
      • set the <verb> input port's Value field to "GET".
      • set the <headers> input port's Value field to "" (empty string)
      • set the <body> input port's Value field to "" (empty string)
    • connect the <taskid> input port of the [build taskid parameter] node to the <taskid> input port of the [get todo #1] parent node
    • connect the <synced> output port of the [build taskid parameter] node to the <params> input port of the [build url] node
    • connect the <filled> output port of the [build url] node to the <url> input port of the [get todo data] node
    • connect the <body> output port of the [get todo data] node to the <task> output port of [get todo #1] parent node
  • Navigate back to [reusable task getter example] node
  • Add an example/ Todo getter node with search.
    • rename it get todo #2
  • Rename [taskid] node to taskid 1
  • Set the Value of the <data> input port of [taskid 1] node to 1
  • Add a data/Store node with search
    • name it taskid 2
    • set the Value of the [taskid 2] node's <data> input port to 2
  • Connect the <read> input port of the [taskid 1] node to the <start> input port of the [reusable task getter example] parent node
  • Connect the <data> output port of the [taskid 1] node to the <task id> input port of the [get todo #1] node
  • Connect the <task> output port of the [get todo #1] node to the <read> input port of the [taskid 2] node
  • Connect the <data> output port of the [taskid 2] node to the <task id> input port of the [get todo #2] node
  • Connect the <task> output port of the [get todo #1] node to the <json> input port of the [todo response to json] node
  • Connect the <task> output port of the [get todo #2] node to the <json> input port of the [todo response to json] node
  • Save the project
  • When you run the program you get the data of the todo with id 1 and id 2

Example 4 - Http Post

Objective: Post a #201 task to https://jsonplaceholder.typicode.com/todos and log the result to the console
New concepts:
  • Use a http dispatcher for posting data
"Http get app in Cranq"
Steps:
  • Add new CRANQ project and save it as http_request_4.cranqj
  • Create a new structure node for the example
    • rename the node to http post example
    • add a new input port to it and rename it to start
    • add a new output port to it and rename it to log
  • Navigate into the [http get example] node with a double click
  • We need a http dispatcher for calling the api
    • add a io/http/Request dispatcher node with search
    • rename it to post todo data
    • set the Value of the <verb> input port to "POST"
    • set the Value of the <url> input port to "https://jsonplaceholder.typicode.com/todos"
    • set the Value of the <headers> input port to {"content-type": "application/json"}
  • We need a data/Store node for storing the post data
    • add it with search
    • rename the new store node to todo data
    • set the Value of the <data> input port to {"userId": 99,"id": 201,"title": "CRANQ todo", "completed": false} JSON
  • The data type of the Value of <body> input of [post todo data] node is string. We need a JSON serializer to be able to connect to the [todo data] store node.
    • Add a data/dictionary/JSON serializer node with search.
    • rename it to serialize todo data
  • The data type of the Value of <body> output of the [get task] node is string. We would like to use it as an object so we need to parse it to JSON.
    • add data/dictionary/JSON parser node by search
    • rename it to body to json object
  • Connect the <read> input port of the [todo data] node to the <start> input port of the [http post example] parent node
  • Connect the <data> output port of the [todo data] node to the <dict> input port of the [serialize todo data] node
  • Connect the <json> output port of the [serialize todo data] node to the <body> input port of the [post todo data] node
  • Connect the <body> output port of the [post todo data] node to the <json> input port of the [convert to json object] node
  • Connect the <parsed> output port of the [convert to json object] node to the <log> output port of the [http post example] parent node
  • Save the project
  • When you run the program you get the data of the new todo with status id 201

Example 5 - Check Http dispatcher status

Objective: Try to get data from invalid resource and check if the response status is 200 and write the result of the check to the console
New concepts:
  • use equality checker
  • use fork
"Http get app in Cranq"
Steps
  • Load the previously created http_request_1.cranqj CRANQ project
  • Save it as http_request_5 .cranqj
  • Rename the [http get example] node as http get with parameterized url
  • Navigate into [http get with parameterized url] node
  • Delete [body to json object] node
  • Set the Value of the <data> input port of node to "https://jsonplaceholder.typicode.com/a/todos/1" (not existing endpoint)
  • Add number/Equality tester for checking the status code
    • rename it to verify status code
    • set the Value of the <b> input port to 200
  • Add a flow/Fork node to write a specific message to the console based on the result of the status code verification
    • add the node with search
    • rename it to is status code 200?
  • Add data/Store nodes for storing the verification result messages
    • add the first node by search
    • rename it to status is 200
    • set the Value of the <data> input port "status is 200"
    • add the second node with search
    • rename it to status is not 200
    • set the Value of the <data> input port "status is not 200"
  • Connect the <status> output port of the [get task] node to the <a> input port of the [verify status code] node
  • Connect the <status> output port of the [get task] node to the <data> input port of the [is status code 200?] node
  • Connect the <true> output port of the [is status code 200?] node to the <data> input port of the [status is 200] node
  • Connect the <false> output port of the [is status code 200?] node to the <data> input port of the [status is not 200] node
  • We want to connect both the <status is 200> and <status is not 200> nodes to the <log> output of the so we need a flow/Forwarder
  • add flow/Forwarder node with search _ rename it to forward log
  • Connect the <data> output port of the [status is 200] node to the <data> input port of the [forward log] node
  • Connect the <data> output port of the [status is not 200] node to the <data> input port of the [forward log] node
  • Connect the <data> output port of the [forward log] node to the <log> input port of the [http get status code example] parent node
  • Save the project
  • When you run the program you will see the following log message: "status is not 200" @start which is correct because the status code was 404

Example 6 - Check Http dispatcher error

Objective: Get data from not existing url and write the error to the console
New concepts:
  • use Http dispatcher error output port
"Http get app in Cranq"
Steps:
  • Load the previously created http_request_1.cranqj CRANQ project
  • Save it as http_request_6.cranqj
  • Rename the [http get example] node as http error check example
  • Navigate into the [http error check example] node with a double click
  • Set the Value of the <data> port to an invalid url, for example: "http://x.y.z"
  • Delete the [body to json object] node
  • Connect the <error> output port of the [get task] node to the <log> output port of the [http get example] parent node
  • Save the project
  • When you run the program you will see the following log message: { "error": "Error: getaddrinfo ENOTFOUND x.y.z" } @start