Aller au contenu principal

Introduction

Le module "Intégrations" permet de combiner facilement des API et des services en ligne grâce à la programmation visuelle. Ce module offre une interface conviviale où vous pouvez faire glisser et connecter des blocs-nœuds, créant ainsi la logique de vos applications de manière visuelle. Cela simplifie le développement, le rendant accessible même à ceux qui ne sont pas des programmeurs professionnels, et accélère considérablement le processus d'intégration de différents systèmes :

Éléments principaux de l'interface du module Intégrations​

Avant de commencer à créer vos premiers flux et intégrations, examinons l'interface. Comprendre comment sont organisés les éléments principaux facilitera votre travail et vous aidera à vous familiariser plus rapidement.

1. Panneau gauche avec les nœuds​

Le panneau gauche est l'endroit où vous trouverez tous les nœuds disponibles. Ce sont les éléments à partir desquels vous construirez vos flux de données.

Pour utiliser un nœud, il vous suffit de le faire glisser sur la zone de travail. Tous les nœuds ont leur propre fonction et peuvent être configurés individuellement.

Exemples de nœuds :

  • Inject : permet d'envoyer des données dans le flux manuellement.
  • Debug : affiche des données et des messages dans le menu de débogage.
  • Function : permet d'écrire du code personnalisé en JavaScript.
  • Template : utilisé pour créer des modèles de texte ou HTML.

2. Onglets​

Les onglets sont situés au-dessus de la zone de travail et vous permettent de basculer entre différents projets ou flux de données. C'est pratique si vous travaillez sur plusieurs intégrations en même temps ou si vous souhaitez diviser la logique en plusieurs flux.

  • Création de Nouveaux Onglets : Vous pouvez ajouter un nouvel onglet en cliquant sur le bouton avec le signe plus +. Chaque nouvel onglet représente un flux de données distinct, ce qui vous aide à mieux organiser votre projet.
  • Renommer les Onglets : Pour renommer un onglet, double-cliquez sur son nom et saisissez un nouveau nom. Cela est particulièrement utile si vous avez de nombreux onglets et que vous souhaitez comprendre clairement ce qu'il y a dans chacun d'eux.
  • Suppression des Onglets : Vous pouvez supprimer un onglet s'il n'est plus nécessaire. Cependant, faites attention à ne pas perdre des données importantes.

Exemple : Si vous travaillez sur une intégration de paiements, vous pouvez créer des onglets distincts pour chaque service.

3. Zone de Travail​

La zone de travail est la partie centrale de l'interface où vous construisez et éditez vos flux de données.

  • Placement des Nœuds : Une fois que vous avez fait glisser un nœud depuis le panneau gauche, il apparaîtra dans la zone de travail. Ici, vous pouvez le déplacer, le connecter à d'autres nœuds et créer la logique de votre flux.
  • Connexion des Nœuds : Pour connecter des nœuds, il vous suffit de faire glisser une ligne de la sortie d'un nœud à l'entrée d'un autre. Ainsi, les données seront transmises dans le flux d'un nœud à l'autre.
  • Gestion des Flux : La zone de travail permet de créer plusieurs flux de données, ce qui aide à organiser des intégrations et des logiques complexes.

Conseil : Vous pouvez zoomer sur la zone de travail à l'aide de la souris ou du pavé tactile pour voir tous les détails de votre flux.

4. Formulaire d'édition du nœud​

Lorsque vous double-cliquez sur un nœud dans la zone de travail, une formulaire d'édition du nœud s'ouvre. C'est une fenêtre où vous configurez le comportement du nœud.

  • Champs de Paramètres : Chaque nœud a ses propres paramètres que vous pouvez éditer. Par exemple, pour le nœud Function, vous pouvez écrire et modifier du code.
  • Sauvegarde des Modifications : Après avoir édité le nœud, cliquez sur le bouton Submit pour enregistrer les modifications.

Exemple : Dans le nœud Function, vous pouvez écrire du code en JavaScript qui transforme des données. Dans le nœud Template, vous pouvez créer un modèle qui insère dynamiquement des données.

5. Panneau de débogage​

Le panneau de débogage se trouve à droite et est utilisé pour visualiser les sorties et les messages du nœud Debug.

  • Visualisation des Messages : Lorsque vous exécutez le flux de données, le nœud Debug envoie des messages dans le menu de débogage. Cela vous aide à voir ce qui se passe dans votre flux et à vérifier l'exactitude des données.
  • Filtrage des Messages : Vous pouvez filtrer les messages pour ne voir que les données dont vous avez besoin. C'est pratique lorsque vous avez beaucoup de sorties provenant de différents nœuds Debug.
  • Effacement de la Fenêtre de Débogage : Utilisez le bouton d'effacement pour supprimer les anciens messages et vous concentrer sur les nouvelles données.

Exemple : Si vous utilisez le nœud Function pour effectuer des calculs, ajoutez un nœud Debug à la fin du flux pour vérifier si votre code traite correctement les données.

6. Boutons de contrôle​

Bouton « Ouvrir en plein écran »​

  • Ce bouton permet d'étendre l'interface du module Intégrations en plein écran, ce qui est utile lors de la manipulation de flux de données complexes ou lors de la démonstration d'un projet sur un grand moniteur.
  • En cliquant sur ce bouton, vous obtiendrez plus d'espace pour l'édition et pourrez mieux voir tous les détails de vos flux.

Bouton « Publier »​

  • C'est le bouton principal qui enregistre et déploie toutes les modifications apportées à vos flux de données, les rendant actifs. Après avoir ajouté ou modifié des nœuds, assurez-vous de cliquer sur ce bouton pour que vos paramètres commencent à fonctionner.

Bouton « Importer »​

  • Ce bouton permet d'importer un schéma existant à partir de JSON ou d'un exemple de la liste. Vous pouvez en savoir plus dans la section Importer.

Schéma d'entrée et transmission de schéma entre les nœuds​

Chaque nœud dans le formulaire d'édition affiche un bloc Schéma d'entrée — c'est le schéma des données qui proviennent du nœud précédent dans le flux. Le schéma montre les champs disponibles sous forme de paires « clé - type », en tenant compte de l'imbrication des objets.

Si la description du champ provient de Swagger, elle sera affichée à côté de la clé. Ces mêmes descriptions sont prises en charge par l'éditeur de code (Monaco) sous forme d'autocomplétions et de suggestions lors de l'écriture de modèles Mustache.

Quels nœuds transmettent le schéma au nœud suivant​

Tous les nœuds ne peuvent pas transmettre le schéma. Voici la liste des nœuds qui le font :

  • Function — le schéma est formé à partir du champ Exemple de Sortie (JSON). Ce champ est également utilisé comme données fictives lors de l'appel du flux sans exécution réelle du code Function.
  • Admin API — le schéma est tiré de la description de la méthode dans Swagger. En cliquant sur le bouton Exécuter, le schéma est mis à jour avec la réponse réelle de l'API. Les champs qui correspondent à la description Swagger conservent leurs descriptions textuelles.
  • Http Request — au départ, il n'y a pas de schéma. Le schéma apparaît après avoir cliqué sur le bouton Exécuter et est tiré de la réponse réelle.

Bouton Exécuter​

Les nœuds Admin API et Http Request prennent en charge le bouton Exécuter dans le formulaire d'édition. Il lance l'exécution de toute la chaîne de nœuds depuis le début du flux jusqu'au nœud actuel.

Particularités :

  • Le serveur exécute le flux selon l'état du dernier Publish — avant de tester, assurez-vous que le flux est publié.
  • Si le nœud function sur le chemin ne transmet pas de données plus loin, mais que son Exemple de Sortie (JSON) est rempli, cette valeur est utilisée comme données fictives.
  • En cas de réponse réussie, le résultat est transmis au nœud suivant sous forme de schéma.
  • En cas d'erreur, le schéma n'est pas transmis au nœud suivant.

Appel automatique des nœuds en lecture seule​

Tous les nœuds admin-api effectuant des requêtes uniquement en lecture (GET) sont appelés automatiquement lors de l'ouverture de la page Intégrations et lors de la mise à jour du flux via le bouton Publier. Cela permet d'avoir toujours un schéma de données à jour sans lancement manuel.