Cat as a Service (CaaS)

This assignment involves using the HTTP request node to fetch a random cat picture and display it in the flow editor. Follow these steps:

1. Place an inject node on the canvas.

2. Use a change node to configure the URL (https://cataas.com/cat) and set the method to GET.

3. Add an HTTP request node and configure it accordingly.

4. Add the image node (which should now be available in your left sidebar) and run the flow. If everything works correctly you should see your cat directly in the qibb flow editor.

Cat GIF

Alternatively, you can request a cat GIF (Graphics Interchange Format). You can see how athttps://cataas.com/

_{Hint: This option is not included in the API documentation.}

_{Hint: You can enlarge the image width for a more expansive view, double-click on the image node, and set the width to 300, or more.}

This exercise is similar to the previous one, but this time we will use the qibb OpenAPI node to query the API.

1. Install the Qibb OpenAPI Client Node. For more information on how to install it, refer to the documentation.

2. Place an inject node on the canvas.

3. Place an OpenAPI Client Node on the canvas and configure it by adding a new connection. Set the URL to the OpenAPI JSON file (https://cataas.com/doc.json) and the host. Select the GET /cat operation. In the general tab, you can configure separate error handling to have two outputs for the OpenAPI Client node:

   1. The first one for responses with status codes 2XX

   2. The second is reserved for responses containing either 4XX or 5XX error status codes.

4. Finish by adding an image node and run the flow. If everything works correctly you should see your cat directly in the qibb flow editor.

In this assignment, we will fetch all cat tags, select a random tag, and display a cat with this tag. Additionally, we will customize the font color, size, and overlay text using the query parameters.

OpenAPI Client Node

This assignment assumes you have the OpenAPI client node installed as described in qibb OpenAPI node and https://docs.qibb.com/platform/latest/using-the-qibb-node-catalog-plugin

1. Place an Inject node on the canvas.

2. Place an OpenAPI Client node pointing to the on the Canvas and Configure it:

   1. Select the GET /api/tags operation. This operation will return an array with all possible cat tags.

   2. You can also set the Error Handling to separate in the general section for better error management.

3. Add a Change node and configure it:

   • Set the msg.tags to the output of the OpenAPI client.

   • Set the msg.to to the length of the tags array minus one.

4. Use the Random node to generate a random number between 0 and the length of the array containing all tags (msg.to).

5. Add another Change node and:

   • Use a JSONata expression to set the cat tag (msg.tag). The random number generated by the preceding node can be used to fetch a tag with this particular index. Be careful about the local and root JSONata context (https://docs.jsonata.org/programming#built-in-variables).

   • Declare msg.fontSize and set it to 50. This will be the font size of the text overlay on the cat image.

   • Define msg.fontColor and set it to red. This will be the font color of the text overlay on the cat image.

   • Use a JSONata expression to set the msg.textto the chosen tag and the string "cat". E.g. if the random tag is fluffy, the value of msg.textwould be “fluffy cat”.

   • Delete the msg.payload as it might interfere with the following HTTP request node.

   • Delete the msg.headers as it might interfere with the following HTTP request node.

6. Place another OpenAPI Client node and configure it:

   1. Set the operation to GET /cat/{tag}/says/{text}.

   2. Inside the node, set:

      • Tag path parameter to msg.tag

      • Text path parameter to msg.text

      • FontSize query parameter to msg.fontSize

      • FontColor query parameter to msg.fontColor.

7. Add an Image node and run the flow. If everything is working correctly, you should see a random picture of a cat with the tag name and the word "cat" overlaid on the image similar to the screenshot below: