Blog ENI : Toute la veille numérique !
-25€ dès 75€ sur les livres en ligne, vidéos... avec le code FUSEE25. J'en profite !
Accès illimité 24h/24 à tous nos livres & vidéos ! 
Découvrez la Bibliothèque Numérique ENI. Cliquez ici
  1. Livres et vidéos
  2. Bubble
  3. Utiliser les workflows
Extrait - Bubble Programmez vos premières applications en no-code
Extraits du livre
Bubble Programmez vos premières applications en no-code
1 avis
Revenir à la page d'achat du livre

Utiliser les workflows

Les workflows

Les workflows sont le ciment de la création d’une application. Ils vont régir l’ensemble des actions qui vont se dérouler sur la page. Un workflow est composé :

  • d’un événement (Event) qui déclenche le workflow ;

  • d’actions : des fonctionnalités qui vont se lancer à la suite de manière linéaire.

Les événements (Events)

Chaque événement (Events) va ainsi déclencher le workflow qui lui est propre, qui va lui-même déclencher une cascade d’actions prévues dans le workflow.

Les différents types d’événements

Les événements peuvent être catégorisés en deux catégories :

  • Les événements actifs qui se déclenchent à la suite d’une action de l’utilisateur sur la page comme cliquer sur un bouton, ouvrir la page ou changer la valeur d’un élément.

  • Les événements passifs qui se déclenchent sans nécessité d’action de la part de l’utilisateur. Ces événements se déclenchent :

  • soit temporellement ces événements sont donc programmés à travers des workflows spécifiques, les Scheduled Workflow ;

  • soit à la suite d’un changement dans la base de données. Ces événements se déclenchent à travers des workflows spécifiques : les data trigger.

Créer un nouvel événement

Un événement peut être créé de deux façons :

  • Dans l’interface Design, depuis la fenêtre contextuelle d’un élément posé sur la page en cliquant sur Add/Edit Worflow. Tous les éléments ne disposent pas de cette option. 

  • Dans l’interface Workflow, en cliquant sur Add an Event. Une liste de choix vous permet de créer des événements en fonction de différentes actions réalisées sur la page.

images/05SOB01.png

Les différents événements disponibles

General : ce sont des événements disponibles en permanence, dépendants de conditions sur la  page telles que :

images/05SOB02.png
  • User is logged in : quand l’utilisateur vient de se connecter....

Les pages dynamiques

Rappel de la structure de Bubble

Bubble est composé d’un ensemble de pages, qui représente chacune un écran de votre application. Chaque écran peut être relié à un autre par un lien (Visual Element : link) ou un workflow Navigation : Go to page. Ces deux derniers peuvent être utilisés pour envoyer de la donnée dans ses pages.

Le nom de la page est important car il sera utilisé comme URL. Par exemple, la page Bibliothèque sera accessible sur l’URL https://monappbubble.com/bibliotheque (dans le cas où monappbubble.com est votre nom de domaine).

Changer le nom d’une page

 De la même façon qu’un élément, pour changer le nom d’une page sélectionnez-la et modifiez le nom dans le champ Page title de sa fenêtre contextuelle.

images/05sob12.png

Connexion et Inscription

Sur Bubble, les fonctions d’inscription et de connexion sont distinctes :

  • L’inscription correspond à un nouvel utilisateur.

  • La connexion correspond à un utilisateur déjà inscrit.

Construire un système d’inscription pour l’utilisateur

L’inscription d’un utilisateur sur Bubble est très simple. Elle se compose obligatoirement :

  • d’un élément Text pour enregistrer l’e-mail.

  • d’un élément Text pour enregistrer le mot de passe.

  • d’un bouton pour déclencher le workflow.

Le reste de la connexion se fera par workflow.

Création d’un pop-up d’inscription

Le pop-up d’inscription est la façon la plus rapide de créer une interface de connexion.

 Ajoutez un Popup sur la page index, que la nommerez Inscription.

 Sur le pop-up, ajoutez un contanier Group qui intègre la totalité du pop-up.

 Renommez ce container Group en container Inscription.

 Dans ce container Group, ajoutez un élément Text dans lequel vous écrirez Inscription, cela servira de titre.

 Changez le style pour qu’il ressemble à un titre. Vous pouvez utiliser le style pré-configuré Heading 2 dans les styles de la fenêtre contextuelle.

 Ajoutez ensuite un élément Input que vous nommerez Sign up : Email afin de pouvoir retrouver ce champ précis depuis l’interface Workflow. Activez l’option This input should not be empty.

 Dans la liste déroulante Content format sélectionnez Email car c’est dans ce champ que l’utilisateur devra saisir son email (une adresse sans @ sera refusée par Bubble).

 Dans le champ Placeholder saisissez Email.

 Ajoutez un second élément Input que vous nommerez Sign up : Password afin de pouvoir retrouver ce champ précis depuis l’interface Workflow.

 Dans la liste déroulante Content format choisissez Password car c’est dans ce champ que l’utilisateur devra saisir son mot de passe (cette configuration cachera le texte inscrit en le remplaçant par des étoiles ***). Activez l’option The input should not be empty.

 Dans le champ Placeholder saisissez Password.

 Ajoutez ensuite un bouton que vous nommerez...

Les conditions et conditionals

Les conditions sont les équivalents des structures de code « if ... then » . Si la condition est vérifiée, alors l’action se réalise

Il existe deux types de conditions :

  • Les conditions qui se trouvent dans l’interface Workflows.

  • Les « conditionals » accessibles depuis l’interface Design, dans l’onglet Conditional de la fenêtre contextuelle d’un élément. Ils permettent d’appliquer des conditions à des éléments de l’interface.

Les conditions dans les workflows

Les conditions peuvent être placées dans le champ Only when sur l’interface Workflow, depuis :

  • un événement, ce qui bloquera le workflow ;

  • une action, ce qui fera sauter l’action en question pour passer à la suivante.

images/05SOB27.png

La logique des conditions dans les workflows est un point majeur à comprendre car cela permet de programmer l’intégralité des workflows en fonction des interactions de l’utilisateur ainsi que de son état (connecté, déconnecté, abonné à un service…).

images/05SOB28.png

Les conditionals dans le design

Uniquement disponibles dans l’interface Design, les conditionals représentent des conditions visuelles ou des états ayant un impact (le plus souvent visuel) sur l’application...