Comment utiliser Bubble : Tutoriel étape par étape (2025)

Vous souhaitez créer une application mais pensez qu'il faut connaître énormément de code ?

C'est un gros problème.

De nombreux utilisateurs souhaitent créer leur propre contenu, concevoir leurs propres pages et même lancer leurs propres applications, mais ils se sentent bloqués.

Ils veulent utiliser les fonctionnalités de l'IA et apprendre à faire les choses en regardant des tutoriels vidéo, mais tout cela leur semble encore bien lointain.

Voici la solution : Bubble. 

Nous allons vous montrer comment utiliser Bubble.

Bulle

Finies les difficultés avec les bases de données complexes ! Bubble vous permet de gérer les données de votre application de manière visuelle. Commencez dès aujourd’hui à créer votre application axée sur les données !

Essayez Bubble gratuitement Lire l'avis complet

Création de votre compte Bubble

Accès au site web de la bulle

La première étape pour créer votre application est d'accéder au site web de Bubble.

Ouvrez votre navigateur web préféré — c'est le programme que vous utilisez pour consulter les sites web.

Les navigateurs les plus courants sont Chrome, Firefox, Safari et Edge. Dans la barre d'adresse en haut, saisissez “bubble.io&#8221 et appuyez sur Entrée.

Vous serez ainsi redirigé directement vers la page d'accueil de Bubble.

Cherchez un bouton qui dit quelque chose comme « S'inscrire », « Commencer » ou « Créer un compte ».

Voici votre billet pour commencer la construction.

S'inscrire pour un compte gratuit

Cliquer sur ce bouton lance le processus d'inscription.

Tout comme lorsque vous créez un compte de messagerie ou de jeu, vous devrez fournir certaines informations.

Bubble a besoin de votre adresse e-mail pour pouvoir vous contacter, et vous choisirez un mot de passe pour sécuriser votre compte.

Choisissez un mot de passe fort — un mélange de lettres, de chiffres et de symboles est préférable — et notez-le dans un endroit sûr pour ne pas l'oublier.

Bubble pourrait vous poser quelques autres questions, par exemple sur l'utilisation que vous comptez faire de Bubble.

Ne vous inquiétez pas ; choisissez simplement l'option qui semble se rapprocher le plus de ce que vous voulez faire.

Comprendre l'interface à bulles

Une fois connecté, vous verrez l'interface Bubble.

Voici l'écran principal où vous allez créer votre application. Il peut paraître un peu chargé au premier abord, mais il est organisé en sections.

Les parties les plus importantes sont :

• L'onglet Conception : C'est ici que vous créez visuellement les pages de votre application. Vous glisserez et déposerez des éléments comme des boutons, texte des boîtes et des images sur cette zone.
• L'onglet Flux de travail : Ici, vous indiquez à votre application ce qu'elle doit faire. Vous créez des « workflows » qui sont comme des instructions que votre application doit suivre lorsqu'un utilisateur clique sur un bouton ou saisit du texte.
• L'onglet Données : C’est ici que vous gérez la base de données de votre application. Une base de données est comme un classeur numérique où vous stockez des informations.
• L'arbre des éléments : Ceci vous montre tous les éléments que vous avez ajoutés à votre page, organisés comme une liste.
• Le rédacteur immobilier : Lorsque vous cliquez sur un élément, cette zone vous montre toutes les façons de modifier son apparence et son comportement.

Créer la première page de votre application

Découverte de l'éditeur visuel

L'éditeur visuel est l'endroit où vous concevrez concrètement l'apparence de votre application.

C'est comme une toile vierge. Sur la gauche de l'écran, vous verrez un ensemble d'outils appelés « éléments ».

Ce sont des éléments que vous pouvez glisser-déposer sur votre page. Considérez-les comme des blocs de construction numériques.

Vous disposez de zones de texte pour les mots, de boutons sur lesquels cliquer, d'images pour afficher des photos et bien plus encore.

Ajout de texte et de boutons

Commençons par quelque chose de simple.

Pour ajouter du texte, cliquez sur l'élément “Text” et faites-le glisser au milieu de votre page.

Maintenant, vous pouvez y saisir ce que vous voulez. 

Peut-être quelque chose comme « Bienvenue dans mon application ! » ou « Cliquez sur le bouton ci-dessous. »

Ensuite, ajoutons un bouton.

Cliquez sur l'élément « Bouton » et faites-le glisser sous votre texte. Vous pouvez modifier le texte du bouton en saisissant du texte dans la zone prévue à cet effet.

Essayez quelque chose comme « Démarrer » ou « Cliquez ici ».

Conception de la mise en page

Vous remarquerez peut-être que les choses sont un peu désordonnées.

Ne vous inquiétez pas, nous pouvons régler cela. Vous pouvez cliquer et faire glisser les éléments pour les déplacer.

Vous voyez ces lignes bleues qui apparaissent lorsque vous faites glisser le curseur ?

Ils vous aident à aligner les choses. 

Essayez de déplacer votre texte et votre bouton jusqu'à ce que le résultat soit satisfaisant.

Vous pouvez aussi modifier la taille des éléments en cliquant sur les petits carrés situés aux coins et en les faisant glisser. Agrandissez ou réduisez le texte, ou étirez le bouton.

Ajout de fonctionnalités de base

Comprendre les flux de travail

Bon, on a réussi à rendre notre appli jolie.

Mais comment y parvenir ? faire quelque chose?

C’est là qu’interviennent les flux de travail. Un flux de travail est comme un ensemble d’instructions.

Il indique à votre application ce qu'elle doit faire lorsqu'un utilisateur clique sur un bouton ou effectue une autre action.

Faire faire quelque chose à un bouton

Faisons en sorte que notre bouton fasse quelque chose de simple.

Cliquez sur le bouton que vous avez créé. Ensuite, recherchez un onglet intitulé « Flux de travail ».

😊 Cliquez dessus. Vous verrez alors un bouton qui dit « Cliquez ici pour ajouter un événement ».

" Un événement C'est ce qui lance le processus. Cliquez sur ce bouton.

Choisissez « Actions de l'élément », puis cliquez.

Maintenant, nous devons indiquer à l'application ce qu'elle doit faire lorsque l'on clique sur le bouton.

Faisons en sorte qu'un message s'affiche. Cliquez sur « Ajouter une action ».

Vous verrez une liste des fonctionnalités de votre application. Trouvez et cliquez sur « Alerte ». Dans la zone de texte, saisissez le message que vous souhaitez afficher. Par exemple : « Vous avez cliqué sur le bouton ! »

Désormais, lorsqu'une personne cliquera sur le bouton, une petite fenêtre s'affichera avec votre message. Voilà votre premier flux de travail !

Ajout de champs de saisie

Les champs de saisie permettent aux utilisateurs de saisir des informations.

Imaginez-les comme des zones de texte où les gens peuvent écrire leur nom, leur adresse e-mail ou toute autre information.

Pour ajouter un champ de saisie, cliquez sur l'élément “Input” et faites-le glisser sur votre page.

Tout comme pour le texte et les boutons, vous pouvez le déplacer et modifier sa taille.

Vous pouvez également modifier le type d'informations attendues par le champ de saisie.

Consultez l'éditeur de propriétés. Vous pouvez choisir s'il s'agit de texte, de numéros, d'e-mails ou de mots de passe.

Pages de connexion et navigation

Création de plusieurs pages

La plupart des applications comportent plusieurs pages.

Vous pouvez avoir une page d'accueil, une page de profil ou une page de paramètres.

Pour créer une nouvelle page, recherchez un bouton ou un lien qui dit « Nouvelle page » ou quelque chose de similaire.

Cliquez dessus, et vous obtiendrez une nouvelle page blanche.

Donnez-lui un nom, comme “Profil” ou “Paramètres.”

Lier des pages avec des boutons

Maintenant, faisons en sorte que les gens puissent naviguer entre les pages.

On peut le faire avec des boutons. Retournez à votre première page.

Faites glisser un bouton sur la page. Dans le flux de travail du bouton, ajoutez une nouvelle action.

Cette fois, choisissez « Navigation » puis « Aller à la page ».

Ensuite, choisissez la page vers laquelle vous souhaitez que le bouton redirige les utilisateurs. 

Désormais, lorsqu'une personne cliquera sur ce bouton, elle sera redirigée vers l'autre page.

Création d'un menu de navigation

Si votre site comporte de nombreuses pages, un menu de navigation peut s'avérer utile.

Il s'agit simplement d'une rangée de boutons en haut ou en bas de votre application qui permet aux utilisateurs de naviguer facilement entre les pages.

Pour créer un menu de navigation, ajoutez un élément “Group” en haut de votre page.

Ensuite, ajoutez quelques boutons à l'intérieur du groupe.

Chaque bouton doit rediriger vers une page différente, comme précédemment. Vous pouvez ainsi naviguer facilement dans votre application.

Transmission de données entre les pages

Parfois, on souhaite transférer des informations d'une page à une autre.

Par exemple, si vous avez une page de profil, vous pourriez vouloir envoyer le nom de l'utilisateur de la page d'accueil vers la page de profil.

Pour ce faire, vous devez utiliser quelque chose appelé paramètres de page.

Lorsque vous créez un bouton qui redirige vers une autre page, vous pouvez ajouter un paramètre à l'URL. 

C'est comme ajouter une petite étiquette qui indique à la page quelles informations afficher.

Sur la page de destination des données, vous pouvez utiliser ce paramètre pour afficher les informations.

Par exemple, vous pouvez ajouter un élément texte et lui indiquer d'afficher le nom de l'utilisateur à partir du paramètre.

La page de profil affichera désormais le nom correct.

Tester et prévisualiser votre application

Comment prévisualiser votre travail

D'accord, vous avez créé des pages et ajouté des actions. 

Maintenant, vous voulez voir à quoi ressemble votre application et comment elle fonctionne.

Bubble simplifie la tâche. Cherchez un bouton intitulé « Aperçu » ou quelque chose de similaire.

Cela ressemble généralement à un bouton de lecture.

Cliquez dessus, et Bubble ouvrira un nouvel onglet dans votre navigateur affichant votre application.

C'est comme voir votre application en direct. Vous pouvez cliquer sur les boutons, saisir du texte dans les champs et vérifier que tout fonctionne comme prévu.

Tester différents scénarios

Lorsque vous prévisualisez votre application, ne cliquez pas au hasard.

Essayez d'imaginer différentes façons dont les gens pourraient utiliser votre application.

Cliquez sur chaque bouton. Saisissez du texte dans chaque champ. Observez les résultats lorsque vous effectuez différentes actions.

Par exemple, si vous avez une page de connexion, essayez de saisir un mot de passe incorrect.

Vérifiez si votre application affiche un message d'erreur.

Si vous avez un bouton qui enregistre les données, vérifiez votre base de données pour vous assurer que les données sont correctement enregistrées.

Débogage des problèmes courants

Parfois, les choses ne se passent pas comme prévu. Ce n'est pas grave.

Cela arrive à tout le monde. Lorsqu'on trouve un problème, on l'appelle un « bug ». Pour corriger un bug, il faut le « déboguer ».

Bubble possède des outils qui peuvent vous aider à trouver des bugs.

Recherchez un outil appelé le “Débogueur.

Il peut vous montrer ce qui se passe en coulisses lorsque votre application s'exécute. Cela peut vous aider à comprendre pourquoi quelque chose ne fonctionne pas.

Les problèmes courants incluent :

• Les boutons ne fonctionnent pas.
• Les données ne s'enregistrent pas correctement.
• Les pages ne se chargent pas.
• Messages d'erreur.

Alternatives à la bulle

Je cherche d'autres choses Alternatives à Bubble dans le domaine du développement d'applications sans code et à faible code ?

Voici quelques options populaires :

• Softer: Cette plateforme excelle dans la transformation rapide de vos feuilles de calcul et bases de données (comme Airtable et Google Sheets) en applications web et portails clients. Elle est réputée pour sa simplicité d'utilisation et ses modèles prédéfinis.
• Buzzy: Une plateforme no-code performante permettant de créer des applications web complexes hautement personnalisables. Son écosystème de plugins est riche, mais sa prise en main peut s'avérer plus difficile.
• Glisser: Cet outil mise sur la simplicité et vous permet de créer des applications mobiles directement à partir de Google Sheets. Il est idéal pour créer rapidement des outils internes et des applications simples.
• Softgen: Cette plateforme basée sur l'IA vise à simplifier le développement d'applications en interprétant les descriptions des utilisateurs et en générant des applications. Elle est conçue pour le prototypage rapide et l'amélioration itérative.
• Adalo: Une plateforme sans code axée sur la création d'applications mobiles natives avec une interface glisser-déposer facile à utiliser et une place de marché pour les composants pré-construits.

Conclusion

Vous avez réussi ! Vous comprenez maintenant comment utiliser les bases de Bubble.

Ce guide vous a donné un aperçu rapide, mais il y a encore tellement plus que vous pouvez faire.

Vous n'avez besoin d'aucune ligne de code.

Si vous souhaitez vous lancer directement dans votre prochain projet, n'oubliez pas ces conseils : pratiquez constamment.

N'ayez pas peur de chercher YouTube ou consultez les tutoriels Bubble.io pour plus de solutions détaillées.

Vous trouverez une multitude de ressources et de bonnes pratiques pour les débutants.

La plateforme Bubble est un excellent endroit pour trouver de l'aide.

Foire aux questions