Dans cet article, il vous est proposé une approche pratique du Low Code avec une découverte de Node-RED, un outil de développement basé sur les flux pour la programmation visuelle développé à l’origine par IBM et maintenant open-source.
Dans le domaine du Dev aussi, la rumeur est souvent reine. Vous avez sans doute déjà entendu des affirmations péremptoires telles que :
L’IA remplacera bientôt (tous) les codeurs !
Go remplacera la plupart des langages !!
Web Assembly est l’avenir de la programmation dans les navigateurs !!!?
La nouvelle manière de coder, est de coder sans code !!??!?.
Image générée par Dall-e : Nostradamus numérique prédisant l’avenir du No-Code
cet article est basé basé principalement sur les ressources du Réseau Certa BTS SIO de David Roumanet,
L’objectif principal de Node-RED est de relier des équipements matériels, des API et des services en ligne pour faciliter l’intégration des IoT (Internet of Things).
Qui dit Low-Code dit un peu de code quand même. Ici ce sera du javascript (Node oblige).
No Code et Low Code
Historique
Loin d’être une nouveauté, l’idée de programmer sans avoir besoin de connaissances en programmation ou de compétences techniques avancées est presque aussi vielle que le code lui même.
Le WYSIWYG (What You See Is What You Get) est une technologie qui permet aux utilisateurs de créer et de modifier des documents sur un ordinateur, en affichant en temps réel l’apparence du document final tel qu’il sera vu par le lecteur, sans nécessiter de connaissances en programmation ou de compétences techniques avancées.
Le développement de cette technologie a commencé dans les années 1970 avec le logiciel Bravo développé par le Centre de recherche informatique de Xerox PARC. Ce logiciel permettait aux utilisateurs de créer des documents en utilisant des caractères de différentes tailles et des images intégrées. Toutefois, il était limité aux ordinateurs Xerox.
Approches
Les approches « low code » et « no code » font référence à des méthodes de développement d’applications qui utilisent des outils visuels pour permettre aux utilisateurs de créer des applications sans nécessiter de connaissances en programmation approfondies.
L’objectif de ces outils No Code est de permettre de transformer la phase de codage en phase de gestion de processus, pour simplifier le travail du développeur, mais surtout, diminuer les coûts de développement.
Dans une approche « Low Code » , il y a une certaine aide apportée par les développeurs sous forme de script ou de codage manuel, alors que dans une approche « no code », il n’y a aucun codage manuel impliqué et une dépendance à 100% sur des outils visuels.
Ces approches sont (ont été ?) très populaires auprès des start-ups qui doivent rapidement mettre des applications sur le marché, mais elles conviennent également aux grandes entreprises établies. Les avantages incluent la fourniture d’un ajustement étroit aux besoins métier, une mise en œuvre rapide et un coût beaucoup moins élevé que les systèmes développés en interne.
Journal du Net : 4 janvier 2022
Avantages et inconvénients de ces approches
Avantages :
- Rapidité de développement: Le Low Code a été conçu pour permettre aux développeurs de créer rapidement des applications et des systèmes sans avoir à passer du temps à écrire du code [2].
- Réduction des coûts: Les outils Low Code permettent de créer des applications avec moins de développement sur mesure et de déploiement plus rapide, ce qui peut entraîner des économies de coûts pour les entreprises.
- Utilisation des développeurs existants: Les développeurs qui n’ont pas beaucoup d’expérience en programmation peuvent être formés à l’utilisation d’outils Low Code, ce qui leur permet de contribuer à la création d’applications sans nécessiter de compétences en programmation informatique avancées .
Inconvénients :
- Limitations des fonctionnalités : les outils Low Code sont souvent limités en termes de fonctionnalités, ce qui peut limiter la capacité des développeurs à créer des applications complexes.
- Dépendance à l’égard du fournisseur de logiciels : les outils Low Code sont souvent propriétaires et dépendent donc du fournisseur de logiciels. Si le fournisseur de logiciels cesse de supporter l’outil, les entreprises qui l’utilisent peuvent rencontrer des problèmes de compatibilité.
Low Code : présentation de Node-Red
Node-Red est un langage de développement graphique créé par IBM, au début de l’année 2013. Son objectif est de relier des équipements matériels, des API et des services en ligne pour faciliter l’intégration des IoT (Internet of Things).
Node-RED fait désormais partie de la fondation JS depuis 2016 et est diffusé en open-source.
Fonctionnement
L’éditeur graphique est un service disponible dans un navigateur Internet, mais l’ensemble s’appuie sur NodeJS pour l’exécution (côté serveur).
Installation et exécution
L’environnement Node-Red s’appuie sur le gestionnaire de module NPM et Node.JS pour fonctionner :
L’installation de Node-Red se fait avec l’instruction
npm install -g --unsafe-perm node-red- L’exécution de la commande node-red lance un serveur sur le port local 1880 : http://127.0.0.1:1880
- L’arrêt de Node-Red est commandé par la séquence de touches
CTRL+C. - Les activités (fichiers de flux ou flow files) s’enregistrent dans le répertoire
/home/user/.Node-red(Linux) ouAppData(Windows)
Un rappel de sécurité indique que Node-Red n’est pas sécurisé (section ci-dessus).
Cette initiation n’ira pas jusqu’à la sécurisation d’une application Node-Red, cependant, vous pouvez vous reporter à la documentation officielle pour le faire plus tard
Exemple d’application 1: Hello world
La première application simple est l’affichage d’un « Hello World » dans la console de débogage. Pour cela, vous devez créer 5 étapes :
Faire un glisser/déposer du symbole common → inject sur la feuille centrale [Flow 1]
Un double-clic sur ce symbole pour créer la chaîne de caractères (string) World » « Hello »
- Faire un glisser/déposer du symbole
common → debugà droite du symbole inject « Hello World » - Un double-clic pour renommer le débogueur en « Hello World »
- Créer un lien entre les deux points de ces deux symboles, comme ci-dessous.
- Activez votre programme en cliquant sur le bouton rouge Deploy en haut à droite.
- Cliquez sur l’onglet [Debug] Enfin, cliquez sur la zone bleue à gauche du symbole injecteur « Hello World » : la fenêtre de débogage doit afficher un message à chaque clic.
Exemple d’application 2: passage de valeur.
- Créez un nouveau projet en ajoutant un onglet dans l’interface Node-Red :
- Pour supprimer un « flow », allez dans le menu
hamburger → Flows → Delete.
Dans ce projet, il s’agit de relier à nouveau un common → inject (pas de configuration, on garde TimeStamp par défaut) et un common → debug par défaut.
Le nombre qui s’affiche à chaque clic est un timeStamp(en secondes).
Nous allons insérer une fonction qui va convertir le timestamp en format date avant de l’envoyer dans la console de débogage.
Les fonctions dans Node-RED sont des « nodes » qui permettent d’exécuter du code JavaScript sur les messages qui passent à travers elles.
Les fonctions prennent en entrée un objet « msg » qui a généralement une propriété « payload » contenant le corps du message . Les fonctions peuvent retourner 0 ou plusieurs objets de message en sortie, qui doivent également avoir une propriété « payload ».
- Faites glisser un objet
function → functionentre les deux objets précédents (avec un peu de chance, le lien change en pointillé, lâchez l’objet). Si cela ne fonctionne pas, débranchez le lien et connectez-le à la nouvelle fonction, puis créez un nouveau lien vers l’autre objet. - Programmez ensuite l’objet fonction en double-cliquant dessus, comme suit :
- name : conversion
- Onglet[onMessage]
let date = new Date(msg.payload);
msg.payload = date.toString();
return msg;- Validez puis relancez le déploiement de la solution (bouton Deploy).
Désormais, l’affichage dans la console doit changer à chaque nouveau clic sur l’objet ‘timestamp’.
Par défaut, les objets génèrent des messages dans un objet au format JSON, nommé msg. Msg.payload contient donc le message injecté par l’objet common → inject.
Exercice
Essayez d’utiliser la fonction .split( » « ) pour n’afficher que l’heure au format HH:MM:SS.
Fermez un oeil (Si, si on vous voit…) .
Voilà un exemple de soluce.
let date = new Date(msg.payload);
msg.payload = date.toString().split(" ")[4];
return msg;Application 4 : Interactions mySQL.
Node-Red n’est pas fait pour créer des sites web (et notamment ceux avec un frond-end important) mais bien pour faciliter l’intégration des IoT : ces sondes ou équipements utilisent le protocole MQTT3 et sont limités à des messages courts.
Le protocole MQTT (Message Queuing Telemetry Transport) est un protocole de messagerie machine-à-machine (M2M) léger et ouvert, qui permet de transmettre des données de manière fiable entre des appareils connectés, même dans des environnements à faible bande passante et à haute latence. MQTT a été initialement développé par IBM et est devenu un standard de l’OASIS (Organization for the Advancement of Structured Information Standards) depuis 2014.
La version la plus couramment utilisée de MQTT est la version 3.1.1. C
Node-Red permet donc de réaliser des microservices pour ces appareils.
Cependant, Node-Red étant très orienté API RESTful, on retrouve la réception de données, via un formulaire web. Dans la réalité, il faut plutôt imaginer un composant transmettant ses données et Node-Red les stockant en base de données.
Préparation
Pour importer la bibliothèque MySQL, il faut lancer Node-Red et dans l’interface graphique, allez dans le menu Manage Palettes (touches ALT+Maj+P ou ALT+P selon votre OS).
- Dans l’onglet [Install] recherchez ‘mysql’ puis cliquez sur le bouton install.
Le gestionnaire de palette (Palette Manager) peut être utilisé pour installer de nouveaux nœuds dans la palette. Il est accessible sous l’onglet Palette de la boîte de dialogue Paramètres utilisateur.
Dans le menu des objets, il y a normalement un objet Storage → MySQL.
Création de la base de donnée
- Créez un nouvel onglet Node-Red et nommez-le « Livre d’Or » pour commencer un nouveau projet proprement.
- Lancez votre Stack (WampServer ou Xamp…)
- Script SQL à importer dans votre SGBD.
Vous pouvez utiliser phpMyAdmin ou mySQLWorkbench.
CREATE DATABASE livredor CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;
USE livredor;
CREATE TABLE `tlivre` (
`id` int(11) NOT NULL,
`name` varchar(50) NOT NULL,
`message` varchar(300) NOT NULL,
`evaluation` int(1) ) ENGINE=InnoDB DEFAULT CHARSET=utf8;
--
-- Contenu de la table `matable`
--
INSERT INTO `tlivre` (`id`, `name`, `message`, `evaluation`) VALUES
(1, 'NORRIS Chuck', 'Best web site David ;)', 5),
(2, 'KENT Clark', 'Need informations about Batman please', 4),
(3, 'PARR Hélène', 'Hey, nothing about girl in computers science!!!', 0),
(4, 'DE LA VEGA Don Diego', 'sometime Zorro? Your website is zero', 0),
(5, 'M. BEANS', 'Are you serious? Do not play with security', 2);
CREATE USER 'admtlivre'@'localhost' IDENTIFIED BY 'adm123';
GRANT ALL PRIVILEGES ON * . * TO 'admtlivre'@'localhost';La base est crée.
Réalisation
Dans la barre latérale gauche de Node-Red, nous trouvons maintenant un objet mysql dans la section storage.
- Glissez-déposez le symbole
storage → mysqldans l’espace principal de programmation. - Double-cliquez sur celui-ci pour afficher les propriétés et cliquez sur l’icône d’édition (crayon) pour saisir les informations sur la base de données.
- User : admtlivre
- Password : adm123
- Database : livredor
- Name : Exemple-Node-Red
- Cliquez sur le bouton Add
- Validez la création en cliquant sur le bouton Done.
Le symbole mysql n’a plus de triangle rouge (🔺 ), indiquant que la configuration est active.
Insérez maintenant un objet function → function puis double-cliquez dessus pour y insérer une requête SQL.
Le format de la fonction est le suivant :
msg.topic: contient la requête SQL.msg.payload: contient les données à insérer dans la table ou la base.return msg: contient le résultat de la requête.
Requête de lecture
Voici le contenu de la fonction :
msg.topic = "SELECT * FROM tlivre";
return msg
Ajoutez un bouton common → Inject (videz le contenu et changez le symbole si vous le souhaitez) ;
- Ajoutez un débogage
common → Debuget assurez-vous qu’il affichemsg.payload. - Renommez-le « Result SQL ».
- Enfin, cliquez sur le bouton
Deployde l’éditeur.
Le résultat est le suivant :
On note qu’un point vert avec la mention Connected apparaît (indiquant que les identifiants et l’accès à la base sont corrects). Ce point vert passe à OK après la requête.
Un clic sur le bouton d’injection affiche dans la console de débogage de Node-Red, l’objet de la réponse SQL. Comme pour l’API restful, on peut imaginer insérer un objet parser → json pour n’afficher que les données voulues.
Requête d’écriture
La création d’une écriture dans la base est aussi simple, en utilisant le champ msg.payload (qui peut provenir d’une fonction en amont).
Requête préparée
Voici le contenu de la fonction :
msg.payload=[6, 'MUSK Elon', 'Best book ever seen about me, no?', 5]
msg.topic = "INSERT INTO `tlivre` (`id`, `name`, `message`, `evaluation`) VALUES (?, ?, ?, ?)";
return msg;
Attention !!, Node-Red n’a pas de protection particulière contre les injections SQL. Il est donc dangereux de créer une application qui ne vérifie pas les champs reçus et il est nécessaire d’être très prudent lors du déploiement d’une application en production.
Requête paramétrée
Le contenu change légèrement, comme en NodeJS :
msg.payload={};
msg.payload.uid = 6;
msg.payload.uname = "MUSK Elon"; msg.payload.cmt = "Best book ever seen about me, no?"; msg.payload.mark = 5;
msg.topic = "INSERT INTO `tlivre` (`id`, `name`, `message`, `evaluation`) VALUES (:uid,:uname,:cmt,:mark) ON DUPLICATE KEY UPDATE `message`=:cmt;";
return msg;
La requête permet en plus, de mettre à jour le champ commentaire (voir ON DUPLICATE KEY).
- Ajoutez un bouton
common → Injectpour cette fonction (videz le contenu et changez le symbole si vous le souhaitez) ; - Cliquez sur le bouton d’injection de la fonction en écriture, puis cliquez sur le bouton d’injection de la fonction « function 1 » (lecture). Le nouvel enregistrement apparaît à la fin de la liste.
Récupération d’un formulaire HTML
Il existe un objet Network → http in qui permet de définir un lien et d’en récupérer les paramètres transmis. Il faut pour cela, disposer d’un serveur web actif (Apache ou une solution XAMPP, LAMP…), sinon une solution légère est d’installer Python puis, dans le répertoire où se trouvera le fichier HTML, lancer la commande
python -m http.server 8000
(le port sera 8000).
Le fichier HTML comporte un formulaire simple, contenant les champs nécessaires pour la base de données ,
il sera appelé avec le lien http://localhost[:port]/form.html :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test Node-Red</title>
</head>
<body>
<form action="http://localhost:1880/form" method="post">
<input name="uid" value="7">
<input name="uname" value="DrNozman">
<input name="cmt" value="Trop stylé, ce Node-Red">
<input name="mark" value="5">
<button>Envoyer</button>
</form>
</body>
</html>
Maintenant, il faut interpréter les données :
- Insérez un objet
Network → http inet double-cliquez dessus. - Choisir la méthode ‘POST’, indiquez l’url
/formet nommez-lePOST /form(plus lisible sur l’espace de travail).
Le contenu de la requête HTTP sera parsé dans la variable-objet msg.payload :
msg.payload.uidmsg.payload.unamemsg.payload.cmtmsg.payload.mark
- Copiez la fonction
SQL écritureet collez la nouvelle juste en-dessous. - Éditez son contenu (en supprimant la variable
msg.payload) :
msg.topic = "INSERT INTO `tlivre` (`id`, `name`, `message`, `evaluation`) VALUES
(:uid,:uname,:cmt,:mark) ON DUPLICATE KEY UPDATE `message`=:cmt;";
return msg;
- Ajoutez un objet
Network → http responsenommé ‘Status’ et relié à la sortie de l’objet mysql. - Ajoutez aussi un objet
common → debugrelié à la sortie de l’objet nomméPOST /formpour obtenir le résultat brut dans la console de débogage. - Reliez les objets entre-eux, comme suit :
- Lancez la solution en utilisant le bouton Deploy, puis ouvrez le formulaire HTML dans un navigateur et cliquez sur le bouton Envoyer.
La base de données doit maintenant contenir le nouveau contenu (vérifiable avec la fonction de lecture de la base).
Aller plus loin
Node-Red est très utilisé dans les systèmes domotiques, les systèmes impliquant des IoT et dans certaines applications de contrôle-commande (instrumentation).
Vous trouverez pas mal de documentations et de tutoriels traitant de note-red (Souvent en liaison avec le couple Linux/Raspery Py).
Vous pouvez également me contacter.
Liens
Différences entre low code et no code – IBM (en)
Non, nos enfants ne seront pas codeurs mais « no codeurs »
Installation et utilisation de Node-RED (DeltaLab Prototype)
Laisser un commentaire