Voltapp 🇫🇷

Voltapp 🇪🇸

🎉 Home

Voltapp Introduction

CUSTOMIZE A TEMPLATE ⏱

Discover Templates

Create your Airtable

Connect your data

Publish your app

LEARN VOLTAPP

Discovery of the interface

Nodes

Graph

Variables

Custom the design

Placing elements

Design examples & Devices

Managing pages

Create dynamic content

Manage data with Airtable

Combine templates

https://www.youtube.com/watch?v=vcPE6NtLNDA

A graph system to code visually

Voltapp offers you its visual programming system giving you access to the power of code without the need to code.

Indeed, graphs allow to trigger behaviors according to various events (such as the click of a button or the reception of Airtable data).

We add a click block and a debug block to display a message when the button is clicked.

We add a click block and a debug block to display a message when the button is clicked.

Each time the button is clicked, the debug message "Coucou" is displayed

Each time the button is clicked, the debug message "Coucou" is displayed

A graph is represented by a set of blocks connected to each other. Each block flow (i.e. a set of blocks all connected to each other) always starts with an event triggered on the node.

Event blocks

The events, represented by the pink color, correspond to the beginnings of the block flows. They are automatically triggered by the Voltapp engine according to various external conditions (the appearance of the node, the result of a server request, a click on the node, etc.). There can only be one block per event on a given node, and the list of possible events is different for each block.

We can see that on the selected text block, 5 events are available. When we select an event we can see what it is used for, then add it to the graph.

We can see that on the selected text block, 5 events are available. When we select an event we can see what it is used for, then add it to the graph.

Control blocks

The controls, represented by the cyan color, are global blocks that allow to modify the flow (generate two possible flows according to a condition for example), or to make global actions (like displaying a debug or opening a file for example).

This graphe shows the yellow message “Loop” after a one-second delay. It repeats this operation three times through the loop block. After the third message, the graphe shows the “end” message.

This graphe shows the yellow message “Loop” after a one-second delay. It repeats this operation three times through the loop block. After the third message, the graphe shows the “end” message.

Gif debug.gif

Expression blocks

The expressions, represented by the purple color, are also global blocks. They do not alter the flow but return values that can be used by the graph. Expressions allow for example to make a calculation or to return the current date for example.

Action blocks

Actions, represented by the yellow color, are very similar to controls in terms of behavior. The difference is that they are created by the nodes directly, and their functionality is linked to the nodes they belong to.

TODO: find an example of a cool action

Variable blocks

Finally, the variable blocks, represented in the graph by the blue color, are blocks allowing to manipulate variables. There are two kinds of variable blocks:

This very simple graph changes the value of the background variable from blue to orange using the background set block when the user clicks on the Button node.

This very simple graph changes the value of the background variable from blue to orange using the background set block when the user clicks on the Button node.