Workflow Bubble : comment fonctionne ce système ?

Si vous avez déjà utilisé Bubble, vous savez que c’est un outil puissant qui utilise un sytème de “workflows”. Qu’appelle t-on les workflows et comment fonctionnent-ils ? On vous explique tout !

Qu’est-ce que Bubble ?

On dit de l’outil Bubble qu’il est un app builder no-code, en français un créateur d’application sans code. L’outil a pour objectif principal de permettre à ses utilisateurs de développer des applications web sans avoir à coder. En effet, le principe des outils no-code et de rendre le développement web plus accessible en général. Grâce à une interface graphique optimisée et des méthodes de conception reposant sur le drag-and-drop (glisser-déposer), Bubble permet à un utilisateur n’ayant aucune connaissance en langage de programmation de développer une application puissante. 

Bubble est un célèbre outil qui fait beaucoup parler de lui car il présente de nombreux avantages : temps de conception réduit, gain d’argent, flexibilité, puissance, etc. Bubble est aussi idéal pour lancer sa start-up, pour se connecter avec d’autres outils comme Airtable ou encore pour créer des PWA.

Attention, les outils no-code peuvent paraître très simples à utiliser d’un point de vue extérieur mais ils nécessitent tout de même une formation plus ou moins poussée. Bubble requiert plusieurs heures d’apprentissage avant d’être maîtrisé. Il est parfois plus intéressant de passer par un développeur Bubble que d’apprendre à utiliser entièrement l’outil. Mais dans tous les cas, les outils no-code resteront plus facile à apprendre qu’un seul langage de programmation. 

Cette mise en garde mérite d’être précisée, car elle désigne un point très concret. Ce que le no-code supprime, c’est l’écriture du code, pas la conception : modéliser des données, définir qui a le droit de voir quoi, prévoir ce qui se passe quand deux personnes modifient la même fiche restent des questions entières. Sur Bubble, le contrôle d’accès passe par les privacy rules, appliquées côté serveur : un type de données créé sans règle est lisible par tout le monde, y compris via l’API de l’application. C’est le contrôle d’accès défaillant placé en tête du Top 10 de l’OWASP, et c’est la différence la plus visible entre une application de démonstration et une application livrée.

Pourquoi utiliser Bubble ?

Vous souhaitez promouvoir votre activité de manière intéractive ? Proposer à vos employés une application en interne ? Bénéficier de la visibilité d’un site web sur une application ? Bubble est votre ami ! Grâce à Bubble vous pouvez développer des applications web puissantes, dynamiques et totalement personnalisées pour répondre à vos besoins les plus précis.

Les workflow Bubble : définition

Bubble a un fonctionnement qui lui est propre. La logique de sa conception repose sur les workflows. 

Par définition, un workflow est un événement qui exécute une série d’actions lorsqu’on le déclenche. Prenons un exemple de workflow très simple : un utilisateur clique sur un bouton (événements), un document s’ouvre (action). C’est donc la combinaison de l’événement et de la série d’actions qui définit un workflow. Un exemple de workflow plus complexe est : un utilisateur s’inscrit à la newsletter (événement), un e-mail est envoyé à l’utilisateur, une popup s’ouvre pour confirmer son inscription et la page change (actions). Chaque workflow n’est spécifique qu’à une page de l’application développée. 

Les workflows ont une conséquence directe sur la facture, et c’est le point que la plupart des tutoriels passent sous silence. Depuis 2023, Bubble mesure la consommation en workload units : chaque chargement de page, chaque action de workflow et chaque recherche en consomme, et le dépassement du quota inclus est facturé 0,30 $ par tranche de 1 000 unités. Deux applications sur le même plan peuvent donc coûter très différemment. Les gros postes sont connus : une recherche non filtrée qui ramène toute une table, une action répétée dans une boucle, un workflow programmé qui tourne toutes les minutes sans nécessité. Filtrer côté serveur plutôt que côté écran est la première optimisation à faire.

Une distinction structure tout le reste, et elle vaut d’être posée tôt : un workflow déclenché depuis une page s’exécute dans le navigateur du visiteur, un workflow de type backend s’exécute côté serveur. La conséquence est simple, tout ce qui ne doit pas dépendre de l’utilisateur doit vivre côté serveur : validation des données, appels à une API avec une clé secrète, envoi d’e-mails, mise à jour de plusieurs enregistrements. Un traitement laissé côté page s’interrompt si l’onglet se ferme, et une clé placée dans un workflow de page est lisible par n’importe quel visiteur.

Comment utiliser les workflows Bubble ?

Pour créer vos workflows, commencez par choisir un événement qui sera l’élément déclencheur de vos actions. La plupart du temps, l’événement est un clic sur un bouton. Dans ce cas, vous devrez alors choisir précisément à quel élément l’événement s’applique. Il est également possible d’ajouter des conditions pour que l’événement ne se déclenche que dans certaines circonstances.

Une fois votre événement créé, dans le panneau de workflow, vous pouvez choisir une par une les actions que vous souhaitez mettre en place. En fonction des actions que vous renseignez, vous aurez différents éléments à préciser, comme les sources des données à utiliser, etc. 

Si vous souhaitez ajouter un grand nombre de workflows dans votre application, vous pouvez copier-coller aussi bien les workflows complets que les actions seules. Attention, si vous collez une action sur une autre action déjà existante alors elle sera insérée avant l’action ciblée. 

En cliquant sur la flèche, vous pouvez ajouter des actions où vous le souhaitez, grâce au menu des actions. Attention, l’ordre des actions est très important ! 

Les types d’événements 

Pour vous simplifier la tâche, les événements sont classés dans des catégories. Il en existe 3 qui sont les suivantes : 

Les “Element events” (événements d’éléments)

‍Ce sont les éléments qui reviennent le plus souvent lors du développement d’applications sur Bubble. Ils regroupent les événements comme le clic sur un bouton, le clic sur une image ou sur un bloc précis. Ils sont rapportés à un élément.

Les “General events” (événements généraux)

‍Ici, on parle d’événements plus larges, lorsqu’une propriété de l’application change. Par exemple, lorsqu'un utilisateur se connecte. Ces événements peuvent être plus complexes à développer que les “Element events”.

Les “Custom events” (événements personnalisés)

‍Les événements personnalisés sont plus spécifiques et vous permettent de créer des séries d’actions réutilisables dans d’autres workflows.

Les types d’actions

De la même manière que les événements, les actions sont catégorisées. Voici les différentes catégories d’actions que vous pouvez trouver sur Bubble : 

Account management (gestion du compte)‍

Toutes les actions qui permettent de gérer l’authentification, la connexion, la déconnexion, l’inscription, etc

Navigation

Toutes les actions pour faire naviguer l'utilisateur d’une page à une autre de votre application.

Data (données)

Toutes les actions pour lire et écrire diverses données.

Email

Toutes les actions pour envoyer des emails, emails de confirmation, d’inscription, etc.

Payment & analytics (paiement et analyse)

Toutes les actions concernant le paiement, les cartes de crédits, les données bancaires, la gestion des abonnements, etc.

Plugins

‍Toutes les actions des plugins ajoutées à l’application. Attention, si les actions d’un plugin sont des actions de paiement, d’email, de navigation ou autre elles apparaîtront quand même dans la catégorie “plugins”.

API workflows sur Bubble

Grâce à l’API de Bubble, il est possible de créer des workflows qui exécutent des actions via ou vers des services externes. Les workflows API sont déclenchés sur le serveur, soit lorsqu'ils sont lancés à partir d'un autre endroit de l'application, soit via un appel à l'API de workflow de l'application. 

Les workflows API élargissent encore les possibilités de création et permettent de développer des applications plus complexes. 

Scroll, votre agence de création d’application sur Bubble

Vous rencontrez une problématique concernant les workflows ? Vous souhaitez être accompagné pour développer votre application web sur Bubble ? Chez Scroll, nous sommes là pour vous ! Pour développer avec vous des applications uniques, puissantes et qui répondent à vos besoins, nous avons créé l’agence Bubble ! Une agence composée d’experts du no-code et de Bubble prêts à concevoir des solutions sur-mesure. N’hésitez pas à nous contacter !