No-code : faire un site en moins d'une journée grâce à Bubble.io

19/05/2020 – Monique

  • Outils utilisés

    Bubble (facultatif : Google Sheets, Integromat)

  • Prix

    Gratuit

  • Difficulté

    Intermédiaire

Pendant le confinement, on a vu de nombreux projets voir le jour très rapidement pour s’adapter à la situation. Cette rapidité d’exécution a été en partie possible grâce à la démocratisation d’outils no-code, ces outils qui permettent de créer des sites et applications mobiles sans coder.

Ainsi, un entrepreneur américain a utilisé la plateforme Bubble pour créer en trois jours « Give Local », une plateforme pour aider les restaurants en difficulté en proposant aux clients d’acheter des bons d’achat utilisables à la réouverture du restaurant de leur choix. En une semaine, la plateforme a été rachetée par le quotidien national américain « USA Today » !

Inspirée par ces exemples, j’ai décidé de tester cet outil pour faire un clone d’HelloWays (un site pour trouver des randonnées à proximité des grandes villes).

Voici le résultat de mon test !

Pourquoi utiliser Bubble.io ?

Avant de commencer, faisons un point sur Bubble. En effet, ce n’est pas le seul outil no-code  de création de sites : vous avez sûrement déjà entendu parler de Webflow, Squarespace ou encore WordPress. 

Pour moi, le principal élément différenciant de Bubble, c’est que la plateforme est conçue pour construire des applications web complexes, c’est à dire des applications qui vont permettre à l’utilisateur de créer un compte, de stocker les informations du profil de l’utilisateur, ses amis, ses suiveurs, ses suiveurs, ses tweets, ses messages, ses goûts, ses favoris, ses utilisateurs bloqués et bien d’autres choses encore – tout cela dans la base de données de l’application web. 

A contrario, les autres outils mentionnés sont plutôt adaptés à la création de sites statiques qui présentent des informations à un utilisateur, sans qu’il puisse interagir avec les données présentées.  Ainsi, des sites comme Facebook, Airbnb ou encore LinkedIn sont des applications web, tandis que ce blog ou Konbini sont des sites statiques. 

Autre élément important à prendre en compte avant de se lancer : Bubble est beaucoup plus difficile à prendre en main que WordPress, Wix ou Squarespace, mais une fois que l’outil est maîtrisé, il offre beaucoup plus de possibilités.

Cas d'usage : utiliser Bubble pour faire un clone d'HelloWays

Commençons par créer notre application ! Avec Bubble, on peut créer et héberger autant de projets que l’on veut gratuitement, mais pour enlever le logo Bubble et utiliser un nom de domaine personnalisé, il faut passer sur un plan payant ($29/ par mois).

Une fois que vous avez créé votre compte, rendez-vous sur l’onglet « My apps », puis cliquez sur « New app ». On vous posera quelques questions sur l’application que vous allez créer, et vous serez ensuite redirigés vers l’éditeur visuel de la plateforme.

Par défaut, un modèle de page est déjà installé, mais vous pouvez l’effacer en cliquant sur « Start with a blank page »

Etape 1 : La base de données

Maintenant que l’on a notre application, il faut ajouter nos données.  La base de données est disponible dans l’onglet « Data ». Cette base est structurée de la manière suivante : 

  • Data types : Les types permettent de décrire les différents éléments de la base de données. Par défaut, toute application contient le type User (utilisateur). Dans notre cas, on veut afficher des randonnées. Pour cela, nous allons créer le type « randonnees ».
  • Fields : Une fois que l’on a défini un type d’éléments, il faut décrire ses propriétés grâce aux « fields ». Dans notre cas, nous avons besoin du département dans lequel on peut effectuer la randonnée, du niveau de difficulté, de sa durée, etc. Pour créer une nouvelle propriété, il faut cliquer sur « Create a new field », puis définir son nom (« field name ») et son type (« field type »).

Pour gagner du temps, j’ai importé une feuille Google Sheet directement dans ma base de données grâce à Integromat (tutoriel ici). Bubble offre également la possibilité d’importer une base de données existante au format csv, mais c’est une fonctionnalité payante. 

Les différentes entrées de la base de données se trouvent dans l’onglet « App Data ». 

Etape 2 : Créer l'interface utilisateur

Maintenant que nous avons notre base de données, on peut s’occuper de l’interface de notre application. Pour le fond d’écran, on va ajouter une image, et l’étirer pour qu’elle couvre tout l’écran.

[video-to-gif output image]

💡 Pour aligner les éléments horizontalement ou verticalement, faites un clic droit, puis sélectionnez « Center horizontally » ou « Center vertically » pour aligner les éléments. 

Après notre fond d’écran, ajoutons un titre, deux menu déroulant pour les filtres et un bouton pour que les utilisateurs puissent afficher les randonnées qui correspondent à leurs critères. Pour faciliter la mise en forme de la page, il est plus pratique d’insérer ces éléments dans un groupe.

Image bubblegroup.gif

💡 Pour avoir un aperçu en temps réel des évolutions apportées à la page, cliquez sur « Preview » en haut à droite.

A) Les menus déroulants

Grâce aux deux menus déroulants, les utilisateurs pourront trouver une randonnée en fonction de 2 critères : le département et/ou la difficulté. 

Il faut donc connecter les menus déroulants à notre base de données : ceci est possible avec l’option « dynamic choices ».  On doit ensuite indiquer à Bubble où trouver la liste des options du menu déroulant (« Choices sources »), et le type des éléments de cette liste (« Type of choices »). 

On veut obtenir la liste des départements disponibles dans notre base de données, on va donc faire une recherche dans l’élément « randonnées » de notre base de données, puis sur une propriété spécifique de cet élément, la propriété « département », qui est un nombre. Cette recherche se traduit de la manière suivante sur Bubble : Search for randonneess’s (notre élément) departement (une des propriétés de cet élément)

Pour finir, répétons le même procédé pour le deuxième menu déroulant.

B) La liste des randonnées

Bubble possède une option très pratique pour afficher une liste d’éléments provenant de la base de données, les repeating groups. Avec ce type de groupe, il suffit de mettre en forme une seule cellule, et cette mise en forme s’appliquera ensuite à tous les éléments de la liste. 

Comme nous voulons afficher les randonnées, nous devons choisir l’élément « randonnees » comme type de contenu (« content type « ) et ensuite faire une recherche dans notre base pour retrouver cet élément et l’utiliser comme notre source de données (data source). Pour finir de configurer le groupe, on doit ensuite configurer sa mise en forme : le nombre de colonnes et de rangées, les bordures… 

Une fois que c’est fait, créons un autre groupe qui abritera toutes les informations suivantes sur nos randonnées : 

Comme pour le repeating group, le type de contenu de la cellule est l’élément randonnées, mais cette fois ci, la source de données n’est pas l’élément randonnées tout seul, mais l’élément randonnées de cette cellule (« Current cell’s randonnées »).

Nous devons changer la source de données parce qu’un groupe répétitif affiche la liste complète des randonnées, tandis que chaque groupe doit contenir une seule randonnée. 

On peut maintenant insérer les éléments. Le groupe que l’on vient de créer est un « groupe parent », tous les éléments que l’on va créer dedans seront donc les « enfants » de ce groupe.

Ainsi, pour afficher l’image de la randonnée contenue dans cette cellule, on doit  utiliser l’expression suivante : Parent group’s randonnees’s image. Cette expression dynamique permet d’afficher automatiquement l’image qui correspond à chaque randonnée qui est dans la cellule.

Vous remarquerez qu’une fois qu’on a besoin d’insérer l’élément une seule fois et le design est ensuite automatiquement appliqué à toutes les autres cellules.

[video-to-gif output image]

Faisons la même chose pour afficher : 

  • le titre
  • le département
  • un bouton avec un lien pour accéder à l’itinéraire de la randonnée
  • 3 boutons différents pour décrire la difficulté, la longueur et la durée de la randonnée

⚠️ Attention : on ne peut pas ajouter de lien directement dans un bouton, il faut d’abord créer le bouton, puis insérer le lien dans le bouton.

✨ Tada ! On a presque fini, voici le résultat : 

Etape 3 : Afficher les randonnées

Enfin, la dernière étape est d’afficher les résultats quand l’utilisateur clique sur le bouton  « Trouver votre randonnée », en prenant en compte le département et le niveau de difficulté qu’il aura choisi.

Pour cela, on va utiliser les « workflows« , la fonctionnalité de Bubble qui permet de concevoir le back-end de notre application. Un workflow est une combinaison d’un événement et d’une série d’actions : Utilisateur clique sur Se connecter ➡ envoyer l’utilisateur sur la page de connection.  

Pour notre application, l’élément déclencheur est le clic déclenché par le bouton « Trouvez une randonnée ». Pour associer un workflow à ce bouton, il faut cliquer sur « Start/Edit workflow », puis choisir l’action qui va suivre une fois que l’utilisateur cliquera sur le bouton. Ici, on veut afficher une liste d’éléments d’un repeating group, donc on va choisir « Element Actions » ➡ « Display list ».

D’abord, on veut afficher les randonnées d’un département toutes difficultés confondues. Pour le premier cas, on doit demander à Bubble de rechercher les randonnées qui correspondent au département choisi dans le menu déroulant « Choisissez un département ».

Ensuite, on doit filtrer cette liste pour afficher uniquement les randonnées d’un département qui correspondent au niveau de difficulté choisi par l’utilisateur si l’utilisateur choisit un département et un niveau de difficulté.

Dans ce cas de figure, on va utiliser l’opérateur :minuslist: et faire une autre recherche pour trouver toutes les randonnées qui ne correspondent pas au niveau de difficulté choisi par les utilisateurs et les enlever de la liste.

Pour compléter notre workflow, ajoutons quelques finitions :

  • une étape supplémentaire pour faire défiler l’écran vers le bas et afficher les randonnées
  • un nouveau workflow pour réintialiser la valeur des menus déroulants à chaque fois que l’utilisateur change d’option 

Voici le résultat final !  

Et voilà, on a fini de construire notre clone d’HelloWays avec Bubble ! Vous pouvez le retrouver ici.

 Aujourd’hui, on a juste utilisé les fonctionnalités les plus basiques, mais si vous voulez aller plus loin, voici quelques liens utiles pour trouver des tutoriels plus avancés : 

Abonnez-vous pour être prévenu.e dès que je publierai un nouvel article !

Laisser un commentaire

©  2019 | Monique Bayama