Tutoriel Bubble No Code Station

Tutoriel Bubble - Une liste de ressources indispensables pour apprendre à maîtriser de A à Z la plateforme no code Bubble

Table des matières

Vous souhaitez trouver des tutoriels Bubble pour progresser dans votre apprentissage de la plateforme no code et créer une marketplace ou un SaaS ? No Code Station vous propose une série de plusieurs tutoriels afin de monter en compétence sur Bubble.

Le no code vous intéresse ? Suivez le guide !

Pourquoi apprendre Bubble ?

Bubble.io est une plateforme no code permettant de réaliser des applications web complexes. Plus précisément, Bubble se définit comme une plateforme de Visual Scripting. Via une interface visuelle, Bubble permet de créer un site web en glissant déposant (drag and drop) des éléments afin de créer une page.

Ce qui fait la réelle spécificité de Bubble par rapport à d’autres produits no code c’est sa fonctionnalité de workflows. Cette fonctionnalité permet de mettre en place de la logique au sein même de votre application.

Par exemple, vous pouvez mettre en place logique suivante : « si je clique sur un bouton, alors passer à la page suivante et envoyer un mail à mon client ». Et le meilleur dans tous cela, c’est que vous pouvez intégrer ces workflows sur tous les éléments de votre page (du texte, des images, des inputs, des boutons, des formes…). Les workflows peuvent bien évidemment s’imbriquer entre eux et vous pouvez enchaîner sur un même élément plusieurs workflows. C’est cela qui rend Bubble extrêmement puissant.

L’autre point qui nous intéresse dans Bubble, c’est la possibilité de gérer une base de données. Mais au lieu de le faire via un processus complexe tel que du SQL par exemple, Bubble propose de gérer une base de donnée comme un tableur de type Excel ou Google Sheet. Si vous maîtrisez ce type d’outil, vous ne devriez pas être trop déroutés. Toutefois, la base de données étant la structure de votre site, on vous conseille de bien comprendre comment fonctionne une base de données d’un point de vue technique afin de pouvoir mettre en place une structure solide qui puisse être pérenne our la suite de votre application. Après avoir fait quelques tests, vous devriez normalement être plus à l’aise avec la base de données. Le gros point positif de cette base de donnée, c’est qu’elle est dynamique. En effet, sur Bubble, vous pouvez la lier avec les workflows pour mettre en place ce que les développeurs appellent le CRUD (Create / Read / Update / Delete). Ainsi, vous allez pouvoir augmenter et améliorer votre base de données avec le temps via les workflows.

Enfin, si on devait terminer sur un point, cela serait sur la possibilité de faire appel à des API externes sur Bubble. En effet, Bubble a développé un plugin qui s’appelle API Connector et qui permet de vous brancher à une API externe. Cela vous permettra par exemple de faire appelle à une application externe ou encore de faire appelle à une logique externe que vous avez développé. Cette possibilité de faire appel à une API vous permet d’améliorer votre application Bubble. Outre cela, c’est le mariage parfait entre le no code et le code. Ainsi que vous soyez développeur ou que vous ne connaissiez aucune ligne de code, la plateforme Bubble vous permettra de vous exprimer.

On ne pourra pas vous le cacher, Bubble est une plateforme qui n’est pas facile au premier abord. Etant donné qu’elle a sa propre logique, vous pourrez être (même si vous êtes développeur à l’origine) être quelque peu dérouté, voire perdu. Toutefois, étant donné la puissance de l’outil, on ne peut que vous conseiller de vous accrocher parce qu’on vous promet que le jeu en vaut clairement la chandelle. Si vous avez pour projet de créer une application complexe, Bubble est clairement adapté à votre projet et cela serait dommage de ne pas tester.

Pour vous aider à bien démarrer, on vous propose une belle série de tutoriels pour prendre en main la plateforme no code Bubble

Notre guide complet sur Bubble

Les bases de Bubble

Faisons simple pour démarrer. Inscrivez-vous sur la plateforme Bubble et commencez les leçons (lessons) qu’ils proposent dès le démarrage. Il suffit de cliquer aux différent endroits proposés pour commencer à mettre en place le design de votre application, ainsi que la logique.

Dans un second temps, nous vous conseillons de regarder les courtes vidéos de démarrage appelés : Bubble Crash Course. Les vidéos à visionner sont juste ci-dessous et sont très bien faites pour commencer à apprendre le fonctionnement de Bubble.

Comment approfondir Bubble avec d’autres tutoriels ? 

Si vous avez visionné les vidéos ci-dessus, vous commencez probablement à comprendre la puissance de Bubble et son intérêt par rapport à d’autres plateformes no code.

Bien évidemment, ces tutoriels Bubble ne sont qu’un avant-goût du type de projets et des fonctionnalités de Bubble. Il vous faudra beaucoup plus de temps pour approfondir la plateforme. Pour se faire, Bubble propose sur son propre site web des tutoriels plus avancés qu’on vous conseille de réaliser. 

5 tutoriels Bubble avancés que vous devriez réaliser 

La plateforme est allée beaucoup plus loin que les tutoriels Bubble débutants. En effet, cette dernière propose à ses utilisateurs des tutoriels Bubble avancés, voire experts pour prendre en main la plateforme et surtout gagner en compétences. 

D’un point de vue marketing, elle a choisi une voie assez intéressante pour susciter l’intérêt des « bubblers ». Au lieu de proposer seulement des tutoriels classiques, elle nous propose de réaliser des clones d’applications en no code. Cette stratégie de communication semble être la bonne. En effet, lorsque vous souhaitez monter un projet d’une application web, vous voulez la plupart du temps réaliser une application qui ressemble à telle ou telle app.

Quoi de mieux que de s’inspirer des plus grandes applications du moment pour les recréer et voir la puissance de Bubble ?

Parmi toutes les tutoriels et clones possibles à refaire sur Bubble, on vous propose d’en suivre 5 qu’on vous détaille un peu plus ci-dessous.

Clone Uber tutoriel bubble nocodestation

Tutoriel Bubble – Clone Uber 

Pour ce premier tutoriel, la plateforme no code Bubble propose de réaliser un clone no code d’Uber. Bien évidemment toutes les fonctionnalités ne seront pas recréées, mais on a beaucoup aimé certaines features à refaire qui vont vous permettre de beaucoup progresser sur Bubble, voire de vous permettre de lancer un projet similaire.

Dans ce tutoriel, vous allez apprendre :

      • Créer un système d’authentification
      • Sélectionner un lieu de départ et une adresse d’arrivée sur une Google Map
      • Créer un portail pour les VTC
      • Créer un résumé de toutes les courses
      • Créer un compte utilisateur
      • Créer un système de notation des chauffeurs

Bien évidemment tout cela se fera sans code grâce à Bubble.

Tutoriel Bubble – Clone AirBnB 

C’est probablement un des clones les plus célèbres chez Bubble que tous les débutants s’arrachent (à raison d’ailleurs) lorsque l’on démarre son apprentissage sur la plateforme. AirBnB est l’exemple type de la marketplace. C’est-à-dire qu’elle met en relation des personnes entre elles et prend une commission au passage sur cette mise en relation. De très nombreux entrepreneurs souhaitent mettre en place de type de business qui est complexe à mettre en oeuvre au début (il faut assez de demande et d’offres pour créer ce genre de projets), mais qui peut s’avérer très lucratif par la suite. Avec Bubble, vous pouvez largement créer une marketplace de qualité. Pour cela, suivez le tutoriel du clone AirBnB.

Encore une fois, toutes les fonctionnalités de la plateforme ne seront pas traitées, mais vous trouverez quelques features très intéressantes à mettre en place :

      • Une page de login
      • La possibilité de créer son propre listing
      • Une page pour lister tous les logements de la plateforme
      • La page sur le détail complet du logement
      • Une page de checkout pour faire payer l’utilisateur (point intéressant car vous allez apprendre à configurer Stripe)
Clone AirBnB tutoriel bubble nocodestation
Clone Instagram tutoriel bubble nocodestation

Tutoriel Bubble – Clone Instagram 

Instagram, l’application de partage de photo n’est plus à présenter. Et il se pourrait bien que vous ayez quelques idées dont vous pourriez vous inspirer pour monter votre propre plateforme no code de partage de photos.

Dans ce tutoriel, vous allez apprendre les éléments suivants :

      • Afficher le feed de l’utilisateur
      • Changer les paramètres utilisateurs
      • Afficher le profil de l’utilisateur
      • Comment uploader une image
      • Comment créer un système de commentaire

On regrettera l’absence d’un tutoriel sur la création d’un filtre type Instagram pour l’intégrer sur une image. De nos récentes recherches cela semble être également possible sur Bubble notamment si vous utilisez la librairie Imgix.

Tutoriel Bubble – Clone Shopify 

On a pas mal hésité avec ce tutoriel. En effet, chez No Code Station, on ne pense pas que Bubble soit (encore) la solution parfaite pour créer un shop en ligne. En effet, Bubble n’est pas véritablement positionné sur le volet e-commerce. Toutefois le tutoriel clone Shopify est pourtant intéressant sur ce qu’il va vous permettre d’apprendre :

      • Créer un nouveau store
      • Créer une page produit
      • Mettre en place le checkout
      • Mettre en place un tableau de bord pour gérer ses commandes
      • Faire une page qui liste toutes les commandes effectuées

On ne vous encouragera pas à créer votre site e-commerce sur Bubble (beaucoup trop complexe pour un débutant), mais on ne pourra que vous encourager à suivre ce tutoriel jusqu’à la fin pour progresser dan votre apprentissage de Bubble.

Clone Shopify tutoriel bubble nocodestation
Clone Quickbook tutoriel bubble nocodestation

Tutoriel Bubble – Clone Quickbook 

Quickbook n’est pas des plus connus en France, toutefois, c’est un acteur célèbre chez les financiers aux USA. Quickbook est un logiciel qui gère la compatibilité et la facturation pour les TPE/PME. L’idée derrière ce tutoriel Bubble est que vous puissiez refaire quelques fonctionnalités de ce logiciel afin de progresser, notamment toute la partie facturation :

      • Créer un tableau de bord
      • Créer un client
      • Créer une facture

La partie tableau de bord est intéressante car vous allez jouer avec les chiffres et les calculs sur Bubble et les diagrammes – ce que vous ne ferez pas dans les autres tutoriels Bubble plus haut.

Qu'est-ce que le no code ?

Vous ne savez pas ce que c'est que le no code ? Bubble vous intéresse, mais vous souhaitez découvrir d'autres plateforme no code ? Vous voulez devenir un expert sur le sujet ? Suivez notre guide complet sur le no code.

10 tutoriels Bubble supplémentaires pour devenir un expert Bubble

Après avoir fait ces différents tutoriels, vous devriez avoir largement progressé sur votre formation Bubble. Toutefois, certains sujets ne sont pas traités ci-dessus ou alors ne sont traités que de manière partielle. No Code Station, vous propose donc d’autres tutoriels créés par la communauté no code sur Youtube afin de pouvoir progresser sur d’autres points.

Cette section pourra être amenée à évoluer au fil du temps lorsque nous trouverons d’autres tutoriels Bubble intéressant à vous proposer.

Comment intégrer une API sur Bubble ?

L’intégration d’une API Externe sur Bubble est un vrai plus qui mérite de s’y attarder. En effet, c’est grâce aux API que vous pourrez améliorer votre formation sur Bubble et améliorer également vos applications créées avec la plateforme. Pour vous aider à travailler sur le sujet de l’intégration d’un API sur Bubble, nous vous conseillons d’installer le plugin API Connector ainsi que de démarrer avec les deux tutoriels Bubble suivants :  

Comment fonctionne les states sur Bubble ?

Le sujet des states est un sujet avancé pour un bubbler. Toutefois, il se doit d’être maîtrisé absolument si vous souhaitez devenir un expert sur Bubble. Il faut comprendre que les states sont des informations qui ne sont pas enregistrées dans votre base de données, mais des informations temporaires qui sont stockées dans votre navigateur. Ci-dessous, voici 2 tutoriels Bubble vous permettant de bien comprendre les states et de les appliquer à des cas concrets :

Comment fonctionne le responsive sur Bubble ?

Sur Bubble, le responsive n’est pas chose aisée. A la différences d’autres builders web, il faut bien avouer que le responsive n’est pas le point fort de Bubble. Toutefois, cela ne veut pas dire (bien au contraire) qu’il n’est pas possible de créer une application web responsive. Il vous faudra par contre un peu de pratique afin de maîtriser le sujet. Voici ci-dessous quelques tutoriels sur le responsive sur Bubble :

FAQ : des questions supplémentaires sur Bubble

Comme vu plus haut, Bubble est une plateforme no code, c’est-à-dire que vous n’avez pas d’être développeur pour utiliser Bubble et créer des application web. 

Toutefois, ce n’est pas parce qu’il n’y a pas besoin de coder que vous ne pouvez pas utiliser du code sur la plateforme.

C’est une des grandes forces de Bubble. En effet, vous êtes capables d’intégrer du HTML (<html>), du CSS (<style>) et même du Javascript (<script>) dans un élément HTML que Bubble a prévu à cet effet. Grâce à cela vous serez capables d’améliorer vos applications web en rajoutant des petit scripts.

Pour se faire, on vous conseille vivement de connaître les bases du HTML, du CSS et du Javascript, cela vous servira beaucoup.

Etant donné que Bubble est parfaitement bien pensé pour créer des marketplaces et des SaaS, il va sans dire que l’intégration du paiement est quelque chose qui a été bien évidemment intégré. Pour se faire Bubble propose un plugin natif Stripe qui est une célèbre API de paiement.

Il est probable que selon les cas et votre projet d’application, cela soit complexe à mettre en oeuvre, mais ne vous inquiétez pas Bubble est vraiment pensé pour vous permettre de rentabiliser votre application.

 

Si vous désirez voir comment intégrer le paiement dans votre application, n’hésitez pas à faire les tutoriels Bubble clone AirBnB et Shopify qui traient de cette question.

Bien évidemment !

Bubble propose d’ailleurs toute une document sur la création d’un plugin Bubble ainsi qu’un éditeur. On ne vous le cachera pas, si vous n’êtes pas développeur il vous sera complexe de créer un plugin de A à Z. Donnez cette tâche à un développeur expérimenté et il sera en mesure de vous créer votre plugin pour votre plateforme. Vous pouvez aussi apprendre à coder !

Airtable est un logiciel qui s’apparente à un mix entre une base de données et un tableur Excel. Avec Airtable vous êtes capable de créer une API et d’interagir avec vos différentes cellules. Airtable possède une API avec laquelle vous êtes capables de vous brancher.

 

Si vous souhaitez automatiser des process via du no code, on ne peut que vous conseiller de le tester.

Avec Bubble, vous êtes capable grâce aux workflows de mettre en place des systèmes d’automatisation sur certains process. Grâce des fonctions type « schedule » ou « trigger » vous aurez la possibilité de créer un grand nombre de process automatisés.

Si vous désirez aller plus, il est bien évidemment possible de vous brancher avec Zapier pour agrandir votre champ des possibles sur l’automatisation. Un plugin Zapier existe pour cela et on ne peut que vous conseiller de l’utiliser pour créer des applications encore plus puissantes.

VOUS SOUHAITEZ PLUS DE TUTORIELS BUBBLE ?

Abonnez-vous à notre newsletter hebdomadaire pour recevoir plus de tutoriels Bubble