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
Last modified 2mo ago