An introduction to Visual Programming

and Low-Code Development

JENGA+
Dr. Isaac Nyabisa

2024
https://www.outsystems.com/

2
https://kiss ow.com/low-code/visual-
programming-overview/

3
fl
https://www.mendix.com/

4
https://nodered.org/

5
 Flow-based programming (FBP)

https://jpaulm.github.io/fbp/
6
 Visual Programming Interface for Node-
RED

Canvas
Display e.g.,
debug messages

Component menu

7
Visual Programming Interface for Node-
RED

View installed components

8
Visual Programming Interface for Node-
RED

Install components

9
 Flows in Node-RED

Inject a timestamp

Deploy ow to see its e ect

Display a message

Nodes - Composed of a network of nodes

- Nodes perform computational tasks

10
fl
ff
Flows in Node-RED

Communication channel

11
Flows in Node-RED

Output ports

Input ports

12
Advancing the app

Transforming received data into meaningful time

13
 Earthquake application

https:// ows.nodered.org/ ow/edca3ef3e88a00e7e082

https://gist.github.com/dceejay/edca3ef3e88a00e7e082# le- ow-json
14
fl
fl
fi
fl
Weather dashboard

15
Con gure the dashboard

16
fi
Weather dashboard

17
 Creating Custom Components
- Create a directory where you will develop the code, and create the following les.
- package.json standard le used by Node.js modules to describe their contents

- transmit.js To generate a standard package.json le, navigate to the node

directory on the terminal and use the command npm init
- transmit.html When prompted, give it the name node-red-contrib-transmit
Once generated, you must add a node-red section:

{
"name": "transmit",
"version": "1.0.0",
"description": "Transmits data received on output port.",
"main": "transmit.js",
"node-red" : {
"nodes": {
"transmit": "transmit.js"
}
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "isaac nyabisa",
"license": "ISC"
}

18
fi
fi
fi
 transmit.js
module.exports = function(RED) {
function TransmitNode(config) {
RED.nodes.createNode(this, config);
var node = this;
node.on('input', function(msg) {
node.send(msg);
});
}
RED.nodes.registerType(“transmit", TransmitNode);
}

The node is wrapped as a Node.js module. The module exports a function that gets called when the runtime loads the node on
start-up. The function is called with a single argument, RED, that provides the module access to the Node-RED runtime api.
The node itself is de ned by a function, TransmitNode that gets called whenever a new instance of the node is created.

The function calls the RED.nodes.createNode function to initialize the features shared by all nodes. After that, the node-
speci c code lives.

The node registers a listener to the input event which gets called whenever a message arrives at the node.

Within this listener, it calls the send function to pass the message on in the ow.

Finally, the TransmitNode function is registered with the runtime using the name for the node, transmit.

19
fi
fi
fl
 transmit.html
<script type="text/javascript">
RED.nodes.registerType('transmit',{ A node’s HTML le provides the following things:
category: 'function',
color: '#E9967A', • the main node de nition that is registered with the editor
defaults: { • the edit template
name: {value:""} • the help text
In this example, the node has a single editable property, name.
},
inputs: 1,
outputs: 1,
icon: "serial.svg",
label: function() {
return this.name||"transmit";
}
});
</script>

<script type="text/html" data-template-name="transmit">

<div class="form-row">
<label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
<input type="text" id="node-input-name" placeholder="Name">
</div>
</script>

<script type="text/html" data-help-name="transmit">

<p>A simple node that send input received on its output port.</p>
</script>

20
fi
fi
 Installing the custom node

In your node-red user directory, typically ~/.node-red, run:

cd C:\Users\my_name\.node_red
npm install C:\Users\my_name\Documents\GitHub\node-
red-contrib-transmit

Restart node-red and check on the component menu/palette for your custom
component.

21