Connaissez vous Bubble ? Petite revue sur l'outil Bubble, le nouveau venu du No Code
Bubble, le petit nouveau
« La start-up new-yorkaise Bubble annonce une levée de fonds en série A de 100 millions de dollars », révèle Techcrunch dans un article publié le 27juillet.
Grâce à cette nouvelle levée de fond, Bubble souhaite développer sa plateforme no-code en y ajoutant de nouvelles fonctionnalités afin de continuer à répondre aux besoins de ses clients actuels et de ses potentiels nouveaux.
Bubble a connu une ascension fulgurante depuis sa création en 2012. L’idée de base était de permettre à n'importe qui, développeur ou non, de créer un site internet ou une application. Le pari semble réussi puisque déjà plus d'un million de personnes dans le monde utilise Bubble.
Incroyable non ?
Si Bubble vous intrigue, restez avec nous ! Aujourd’hui, la team Dgitags vous propose une revue sur ce nouvel outil en vogue afin de vous en faire découvrir les principales fonctionnalités.
Nous espérons que l’article vous plaira. C’est parti !
Présentation de l’outil
Bubble est un outil de développement d’applications mobiles et web sans codage, sans programmation HTML ou CSS fastidieuse. Cette plateforme permet aux utilisateurs de créer et de personnaliser des applications via une interface conviviale en utilisant la technique du glisser-déposer. Elle rend le codage obsolète et démocratise la création d’applications innovantes. Plus de 750 000 utilisateurs créent et lancent leur business sur Bubble.
Les objectifs
- Développer : vous pouvez créer n'importe quelle application Web sans code. Bubble vous permet de créer des applications interactives et multi-utilisateurs pour les navigateurs Web de bureau et mobiles.
o Personnalisez l’UX : vous pouvez comprendre ce qui se passe lorsque les utilisateurs naviguent dans votre application, clic par clic. Grâce aux conteneurs dynamiques et à la bibliothèque complète d'éléments visuels, il est facile de créer des flux d'informations, des chats et d'autres éléments interactifs en temps réel.
o Gérer les données et les comptes : vous pouvez par exemple configurer des comptes d'utilisateurs et activez les connexions à l'aide de mots de passe ou de plateformes compatibles OAuth 2.0tels que : Facebook, LinkedIn ou Google. Chaque application Bubble est livrée avec un système de gestion des utilisateurs prêt à l'emploi.
o Utiliser l’intégration : vous pouvez développer entièrement votre application Bubble avec des plugins Javascript ou vous connectez à n'importe quelle API avec notre connecteur API sans code.
- Designer : vous pouvez profiter d'une liberté de conception totale.
o Glisser et déposer: vous pouvez créer des conceptions au pixel près et insérez des images, des icônes, des vidéos, des maps, etc sans aucune connaissance du langage HTML ou CSS. Utilisez l’éditeur réactif pour créer des applications qui s'adaptent parfaitement aux navigateurs mobiles.
o Utilisez du contenu dynamique : vous pouvez afficher du contenu généré par l'utilisateur ou des données récupérées de services tels que Stripe, Google et Facebook. Modifiez la typographie, les couleurs ou la visibilité de tout élément de la page en fonction des informations fournies par votre application grâce à nos éléments dynamiques.
o Changez la langue d’utilisation : vous pouvez traduire le texte de votre application et affichez automatiquement la bonne langue, la bonne devise et les bons formats. Vous avez accès à plus de 80langues internationales et il est facile d'en ajouter d'autres.
- Hébergement : Bubble se charge du déploiement et de l'hébergement en toute sécurité. Il n'y a pas de limites strictes quant au nombre d'utilisateurs, au volume de trafic ou au stockage des données.
o Adapter votre application : à mesure que votre base d’utilisateurs augmente, augmentez vos ressources et passez d'une application de démonstration à une entreprise à l'échelle du Web sans modifications techniques. Vous ne payerez pas plus que ce que vous utilisez au départ.
o Contrôle des versions et sauvegardes: testez les modifications en toute sécurité sur une version de développement privée de votre site, fusionnez les modifications, puis déployez-les en direct auprès des utilisateurs en un seul clic. Revenez instantanément à n'importe quel point de l'historique de votre application si vous devez effectuer des révisions.
o Restez sécurisé et privé : assurez la sécurité de vos collaborateurs et utilisateurs grâce à des certificats SSL gratuits et automatiques pour tous les sites Web de Bubble.
- Grandissez : développez une base de clients engagés grâce à des fonctionnalités telles que le courrier électronique et le référencement qui s'intègrent aux outils que vous utiliserez. Analysez les comportements de vos utilisateurs pour prendre de meilleures décisions à mesure que votre produit et votre entreprise évoluent.
o Analyse clientèle : identifiez les parties de votre application les plus utilisées grâce à nos puissants tableaux de bord et connectez-vous aux services d'analyse et de gestion de la clientèle les plus populaires, tels que Mix panel, Google Analytics ou Segment. Vous pourrez vérifier les pages les plus vues, les flux de travail en temps réel, les produits les plus regardés, etc.
o Faites grandir votre public: envoyez des e-mails transactionnels personnalisables aux utilisateurs et intégrez-les à des services de gestion de listes d'e-mails. Contrôlez le référencement en définissant des balises méta, en personnalisant le texte et les titres des URLet en générant des plans de site.
o Processus de paiement : intégrez Stripe et Braintree à Bubble afin de prendre en charge des modèles de paiement complexes, notamment les abonnements, les paiements différés, les transactions avec des tiers, etc. Vous pouvez créer un panier de commande pour votre site de commerce électronique ou bien créer une plate-forme de financement participatif.
- Collaborez : donnez à n'importe quel membre de votre équipe la possibilité d'apporter des modifications et de fournir des commentaires concernant le projet en cours.
o Jusqu’à 40 collaborateurs : réunissez jusqu'à 40 coéquipiers qui travailleront avec vous sur votre application, avec des autorisations et des droits d'accès personnalisables. Tout le monde peut participer, sans avoir besoin d'écrire du code.
o Travaillez en même temps au même moment : vous pouvez voir ce que vos collaborateurs modifient en direct. Il vous sera possible de donner votre avis sur leur travail en temps réel grâce à des notes ou bien des commentaires.
o Sécurisez et protégez : ajoutez un mot de passe à votre application afin de pouvoir la partager de manière sélective avant de la publier.
Les fonctionnalités vous ont intéressées ? Si c’est le cas, restez avec nous. Nous allons maintenant passer à l’installation et à l’utilisation de Bubble.
L’installation
1/ Lancez Bubble sur votre ordinateur
2/ S’inscrire ou se connecter
Si vous devez vous inscrire, l’écran apparaitra de la manière suivante :
Vous pouvez vous inscrire de deux manières :
- En rentrant votre adresse mail
- En utilisant votre compte Google
Si vous devez vous connecter, l’écran apparaitra de la manière suivante :
C’est parti pour l’utilisation !
L’utilisation
Une fois connecté ou inscrit, vous pourrez commencer à utiliser Bubble. Quelques questions apparaitront. Une fois que vous avez répondu, cliquez sur « Next » (vous pouvez skipper cette étape en cliquant sur « Skip » en bas à gauche de l’encadré blanc).
Une fois cette étape terminée, vous arrivez sur l’interface d’utilisation de Bubble.
Vous avez 3 barres d'outils à connaitre pour pouvoir utiliser Bubble :
1/ Sur les côtés : vous avez la bibliothèque d'éléments : design, styles, base de données, plugins, workflow, etc.
2/ Dynamique: propriétés des éléments.
3/ Les paramètres (Settings) : options principales, par exemple : domaine, langues, SEO, mots de passe, sous-applications, etc
Même dans la version gratuite, les utilisateurs ont accès à un grand nombre d'éléments différents qui peuvent être utilisés pour construire leur application web.
Grâce à la fonctionnalité API, les utilisateurs peuvent créer des intégrations avec des ressources web tierces pour l'échange de données. Vous pouvez par exemple connecter des scripts personnalisés tels que Javascript ou bien Python.
Vous pourrez également utiliser des plugins: éléments d'interface, services de paiement, forum, etc. La bibliothèque de plugins de Bubble contient des milliers d'ajouts et d'intégrations divers.
Tous les outils de Bubble peuvent être répartis entre le back-end (algorithmes et bases de données) et le front-end (le visuel). Bubble dispose également d'outils pour l'hébergement et le référencement puisqu’il est principalement destiné à la création d’applications web. Vous aurez également accès au code source donc par exemple en cas de panne, les données pourront être restaurées.
Après-en, passons à l’explication des outils de front-end.
Design
La majorité des outils dont vous aurez besoin pour gérer le front-end se trouve dans la partie Design. Vous devrez utiliser le principe du « glisser-déposer ». Par exemple, lorsque vous faites glisser un élément, vous verrez s’afficher sa taille en pixels et les guides le long de celui-ci. Les couches sont également possibles, donc les éléments peuvent être mis les uns sur les autres sans aucun problème.
A partir du panneau supérieur de la fenêtre de travail, vous pouvez annuler les dernières actions effectuées sur l’interface, modifier les options d’affichage ou bien ajuster l’échelle.
Vous pouvez gérer les différentes fenêtres de travail comme s'il s'agissait de pages distinctes du site. Pas de panique ! En cas d’erreurs, vous avez un historique des modifications qui enregistre toutes les actions effectuées et qui permet de revenir en arrière si besoin.
Un outil qui risque de bien vous servir est l'outil de prévisualisation. Avant de publier votre application, vous pouvez voir à quoi ressemblera votre création. Toutes les modifications peuvent donc être vues et testées avant la publication définitive.
De plus, vous pouvez utiliser l'onglet Responsive pour obtenir un aperçu sur différents appareils.
Dès que vous placez un élément sur votre interface, vous pouvez modifier ses propriétés grâce au panneau des paramètres de l'élément. Il vous suffit de cliquer dessus. Ce panneau permet de contrôler la taille, les paramètres ou bien encore les transitions de l’élément en question.
Dans l’exemple ci-dessous, je suis allée dans Design, puis j’ai cliqué sur « button ». Le panneau noir s’est affiché au moment d’insérer le bouton sur l’interface. Grâce à cet encadré noir, vous pouvez effectuer des modifications sur le bouton.
Styles
Bubble vous permet de personnaliser tous les éléments de votre interface. De nombreux styles sont disponibles par défaut, et il est possible de créer ses propres styles. Ces options vous permettent de gagner du temps puisque le même style peut être utilisé dans plusieurs éléments ou fenêtres. De plus, il existe des thèmes prêts à l'emploi que vous pourrez trouver dans la boutique officielle.
Les options disponibles :
1/ Texte: police, taille, couleur, espacement, alignement.
2/ Arrière-plan: couleur unie, dégradé, image.
3/ Cadre/espace de travail : marges intérieures et extérieures.
4/ Conditionnels: changements complets ou partiels dans certains scénarios.
5/ Animations, options de transitions disponibles.
Pour ajouter un style, cliquez sur « Add Style ». Pour ajouter un thème, cliquez sur « Apply theme ».
Votre nouveau style apparaitra dans votre espace de travail.
Workflow
Le back-end est la partie invisible des applications. Ce sont tous les éléments que vous devez créer et qui constitue en quelque sorte le squelette de votre application.
Dans Bubble, ces éléments sont situés dans la partie workflow, ils sont appelés « évènements ». Ils constituent le principal moyen d'organiser l'interaction avec les visiteurs.
Par exemple, il est possible de mettre en œuvre des tâches tels que : le lancement d'événements, la gestion de bases de données, le réglage d'algorithmes logiques, etc
L'organisation d'un événement se fait en deux étapes :
1/ Première étape : la création d'événements
Les événements ont une hiérarchie d'éléments à deux niveaux :
- un événement lié à une condition spécifique se trouve au sommet
- une chaîne d'actions se trouve en dessous
En réalité, Bubble a repris le principe du If-Then qui limite les façons d’organiser la logique d’application.
Afin de résoudre ce problème, Bubble a ajouté la possibilité de créer des plugins et de les connecter à la structure du projet via une API.
2/ Deuxième étape : la connexion à l'événement
Vous ne pourrez configurer les connexions à l'événement qu'après avoir établi une chaîne d'actions étape par étape dans le gestionnaire d'événements.
Nous vous recommandons de créer un événement à l'aide du bouton correspondant dans le panneau d'édition des éléments et d'établir la relation dès le début. Les actions seront exécutées étape par étape, donc assurez-vous que les données sont disponibles à toutes les étapes de l'exécution.
Data
Lorsque vous créez un tableau avec des champs, celui-ci constitue une base de donnée. Les bases de données sont à la base des applications et des sites Web depuis des années. La force de Bubble a justement été de minimiser le codage même dans ce domaine, ce qui rend la création d’une base de données plus rapide et plus simple. L’éditeur de base de données et le système de gestion des droits sont suffisamment performants pour configurer l’accès et les hiérarchies.
Pour créer votre base de donnée, vous devez passer par 3 étapes :
1/ L'éditeur de type de données :
Un type de données est une norme permettant de définir certaines données que vous devez saisir dans une table. Cela affecte, tout d’abord, la taille finale de la base de données, qui détermine par la suite la vitesse des requêtes et des réponses. De plus, cela rend les données lisibles par les événements.
Bubble dispose de plus de 10 types de données prêts à être utilsé : String,Int, Timestamp, etc qui peuvent être étendus par des types personnalisés.
2/ L'éditeur de champs :
Cet éditeur vous permettra de créer de nouveaux champs ou de modifier des champs existants dans les bases de données. Vous pourrez également l’utiliser pour lire et rechercher des valeurs.
3/ L'éditeur de tableaux :
Ce dernier éditeur est combiné avec l'éditeur de champs. Il n'a pas réellement de limites précises. Néanmoins, il contient toutes les actions qui affectent une table dans sa globalité. Par exemple, vous pouvez utiliser certaines données telles que ID ou Nom dans différents tableaux. De plus, dans les plans Premium, l'importation et l'exportation de données au format CSV sont disponibles.
Plugins
Vous pouvez ajouter des plugins grâce à l’onglet « Plugins » situé à gauche sur le côté.
Logs
Les infos présentes dans cet onglet sont accessibles seulement aux versions payantes. Ce sont des statistiques sur par exemple le nombre de vues de votre page.
Créer un site web
Nous allons maintenant vous montrer comment concevoir et lancer une page d'accueil principale pour une entreprise quelconque.
1ère étape : Créez un nouveau projet
Tout d’abord, vous devez créer un nouveau projet. Sur la page d’accueil de Bubble, vous trouverez un onglet « Create a new app ». Cliquez sur ce bouton et remplissez le nom, le type, l'objectif et la description sur votre entreprise. Le nom ne peut pas contenir d'espaces ni de caractères spéciaux, car il sera utilisé pour créer une URL de site Web. Le domaine ressemblera à par exemple donutz.bubble.io. Les abonnements payants permettent de personnaliser les domaines.
2ème étape: Choisir son interface
À l'étape suivante, l'assistant d'application apparaît. Vous avez la possibilité de suivre ses indications pour mieux comprendre comment fonctionne les outils Bubble. Il permet de choisir un modèle de conception en fonction des réponses des utilisateurs. Vous pouvez choisir l’option « Commencer par une page blanche » ou utiliser le modèle qui vous est proposé.
Si vous choisissez le template déjà fait, vous aurez juste à changer le texte, la typographie, les images, c’est-à-dire les éléments de forme.
Si vous choisissez de commencer avec une page blanche, regardez les prochaines étapes.
3ème étape : Commencez à créer
Nous allons commencer par créer un en-tête de page qui sera constitué du nom de notre entreprise. Pour ce faire, cliquez sur « Button ». Lorsque votre application sera disponible, vous pourrez définir des éléments cliquables. Vous pouvez changer l’emplacement de l’en-tête en le glissant avec votre curseur. L’encadré noir qui apparait vous permet de gérer certains réglages de l’élément tels que sa taille, son emplacement, sa rotation, etc. Si vous voulez changer le style de l’élément, vous devez aller dans « Styles ».
4ème étape : Ajoutez une image
Vous pouvez ajouter une image en cliquant sur« Image » à gauche.
5ème étape : Ajoutez des éléments
Vous pouvez ajouter une une vidéo, du texte, une map etc.
Lorsque vous ajoutez de texte et que vous souhaitez le modifier, « le Rich Text editor » apparait. Vous pouvez par exemple changer la couleur ou la taille du texte.
Ajout d’une icône :
La page d’accueil finalisée :
Et voilà, notre design est prêt. Honnêtement nous avons créé une page d’accueil très simple juste pour vous montrer les fonctionnalités de base.
Pour la tester ou la déboguer, il est préférable d'utiliser le mode aperçu. Un bouton de mise en ligne est disponible dans le coin supérieur droit.
La marketplace
Dans la marketplace, vous aurez accès à un large choix de template : application, site vitrine, ecommerce. Sélectionnez le template qui vous convient puis créez votre première page web.
Vous pouvez également y trouver des plugins et des agencies (Bubble dispose d'un écosystème d'entreprises fournissant des services professionnels, notamment le développement d'applications Bubble et la formation).
Academy
Pour en apprendre plus sur l’utilisation de Bubble, vous avez de nombreuses ressources disponibles dans l’onglet Academy. Certaines ressources sont gratuites.
Prix de l’outil
Nos tips
Bubble vous permet d’apporter des modifications à votre site web, sans qu’il soit nécessaire de le mettre en maintenance grâce à la fonctionnalité “Switch to Live Database”.
Videos
Voici quelques vidéos pour vous permettre d’en apprendre plus sur les fonctionnalités de Bubble. N’hésitez pas à aller faire un tour sur l’onglet Academy de Bubble.
- Video comment bien démarrer avec Bubble
- Vidéo, premiers pas avec Bubble
- Vidéo, en anglais sur utilisation Bubble
Exemples de sites réalisés avec Bubble
- Comet
- Qoins
Notre évaluation finale
Bubble est donc une plateforme qui s’est révélée très utile puisqu’elle permet aux utilisateurs novices de compiler une application Web sans compétences en codage ni logiciel supplémentaire et elle permet aux utilisateurs ayant des compétences en programmation d’étendre les possibilités de Bubble grâce à des plugins et des scripts personnalisés. Bubble répond donc aux besoins de différents types d’utilisateurs.
Les points forts de Bubble :
- L'interface est simple à comprendre, intuitive et conviviale
- Bubble peut être utilisé par des personnes sans expérience préalable du codage
- Plateforme idéale pour tester des idées et créer des MVPs.
- Le prix de la plateforme est également très compétitif par rapport à d'autres sur le marché, ce qui en fait une solution rentable.
- Tutoriels disponibles sur leur site pour vous aider à utiliser les fonctionnalités Bubble.
- Il existe des plugins d'apprentissage automatique que vous pouvez déployer sans écrire une seule ligne de code --> large bibliothèque de plugins.
Les points faibles de Bubble :
- Bubble pourrait être plus facile à utiliser pour créer des designs/dessins (par exemple : quelques utilisateurs préfèrent créer leurs dessins sur Figma et les transférer par la suite sur Bubble).
- Pas de scripts d’animation personnalisés pour les éléments
- Importation/exportation de la base de données non disponible dans le plan gratuit
C’est un 4/5 pour Bubble !
Voilà c’est la fin de cette revue. Et oui déjà… Ne vous inquiétez pas, nous revenons bientôt avec encore plus de contenus :)
La team Dgitags espère néanmoins que cet article vous aura intéressé et vous aura appris des choses sur ce nouvel outil en vogue qu’est Bubble.
A bientôt !
Source:
- G2
Le blogdu Hub
