Hello 👋
Cette semaine je voudrai te remercier parce que nous avons passé la barre des 222 abonnés 🎈🎉🎊
Merci à tous ceux et celles qui m’ont fait des retours et qui m’ont encouragé, c’est vraiment adorable et ça me motive énormément ! Si tu veux aussi contribuer, tu peux m’envoyer tes tips que je les relaie ici à la communauté.
Pour revenir à ton projet, comment ça se passe cette semaine avec Bubble ? Tu t’accroches ? Tu es passé à un autre outil ? N’hésite pas à m’écrire pour me raconte ton aventure, peut-être que je peux te donner quelques tips en plus qui t’aideront à débloquer telle ou telle situation ?
Je voulais te partager un tweet que j’ai trouvé marrant hier, à un moment où on parle nocode, low-code, code, wireframe, mvp, fakituntilyoumakit, et autres techniques de création :
Un bon rappel pour se concentrer sur la proposition de valeur, plutôt que sur les outils pour y arriver. Je trouve qu’on s’écharpe pas mal sur la terminologie dans l’univers nocode, alors que c’est rarement la préoccupation du client…
Visuellement, si tu veux montrer un truc qui pourrait avoir été codé from scratch à ton client, je trouve qu’il n’y a toujours pas meilleur que Bubble… mais bon, tu commences à me connaître : je ne suis pas totalement impartial car j’adore vraiment l’outil ❤️
Les tips Bubble
1. Les 3 façons de visualiser ton responsive
Tu veux voir comment s’affiche ton site dans diverses tailles d’écran ?
Tu peux utiliser l’onglet Responsive de Bubble dans le menu DESIGN et étirer le curseur pour voir ce que donne l’affichage sur un écran plus ou moins large. Problème : ce n’est pas l’affichage réel avec les données finales mais les goupes/blocs de construction que tu verras.
Dans Chrome, menu Afficher > Options pour les développeurs > Outils de développement. Un panneau va s’afficher, avec en haut à gauche deux petits bouton :
Choisis le bouton à droite avec l’icône du portable et de l’écran plus grand. Tu arrives en mode Responsive : à toi de choisir une taille d’écran prédéfinie ou de passer en Responsive et d’étirer librement. Tu peux aussi saisir des dimensions précises en haut de cette barre. Avantage : c’est dispo rapido !
L’application gratuite ResponsivelyApp (https://responsively.app) : carrément magique pour avoir tous tes devices au même endroit. Pas besoin de plus de dessins sur le pourquoi du comment : c’est extrêmement simple et intuitif. Avantage : toutes les tailles au même endroit, gratis !
2. La loupe pour ne rien louper
Dans la série des petits tips utiles mais trop discrets, je voudrai te présenter la loupe en haut à droite de ton éditeur qui s’appelle en réalité App Search Tool.
En cliquant dessus à gauche du bouton Development, tu vas ouvrir ce panneau.
Pour faire simple, l’outil te permet de voir au sein de ton app quel objet utilise quel autre élément/action/événement/etc.
📕 Cas d’usage : tu as un champ Photo dans ta table User. Tu ne sais plus si tu t’en sers quelque part ? Direction App Search Tool > Search By > Uses field > Type Name : User > Field Name : Photo. Si tu cherches sur toute ton application, décoches Only Search Current Page et cliques sur Search.
Tu verras tout ce qui fait référence à cette photo, que ce soit un élément Image qui l’affiche ou un workflow qui l’enregistre. Et en un clic, tu te rend direct à l’endroit qui l’utilise.
Tu peux donc chercher littéralement tout : quand l’action “Send Email” est utilisée ? Quand l’élément Y de ta page est sollicité ? tel ou tel style ?
👉 A user tout le temps donc pour prévenir les liens brisés et des 👻
3. Les éléments fantômes 👻
Il t’arrivera de créer des champs dans ta base de données que tu souhaiteras supprimer plus tard. La meilleure façon de faire c’est d’utiliser l’App Search Tool et de chercher tout ce qui pointe vers ce champs (avec Uses Field > le champ en question).
Comme ça, pas d’erreurs ensuite.
❌ Si tu ne le faisais pas, saches que Bubble ne te préviendra pas toujours en t’affichant une erreur ! En effet, une fois supprimé le champ reste en mémoire et tu peux même l’afficher pour le restaurer grâce au bouton (Show deleted fields dans l’onglet DATA > Data Type)
Le souci, c’est que l’élément sera toujours utilisé quelque part alors qu’il est censé être supprimé ce qui va occasionner des soucis dans tes workflows très rapidement…
Tu dois donc le supprimer “en dur” via SETTINGS > General > Optimize application. Bubble va te proposer de supprimer définitivement plein de choses qu’il juge obsolètes.
👉 Je te conseille de tout décocher et d’aller chercher les champs à supprimer à la main. En l’occurence : Deleted field - Table - nom du champs. Sélectionne le (et lui seul si tu ne veux pas avoir de mauvaise surprise) et clique sur CLEAN APP.
👉 De retour dans ton app, tu devrais voir des messages d’erreurs dans le debugger… D’ailleurs, je te recommande de naviguer dans tes pages une par une, car tant que tu n’as pas chargé la page en question il peut arriver que Bubble ne parte pas à la chasse aux bugs dessus !
Le mini-tuto : Atomic Design, c’est quoi?
Tu en as certainement déjà entendu parler, @practical.ui nous explique ce qu’il signifie.
Un peu d’histoire : il y a 5 ans, Brad Frost a introduit ce concept.
Atomic Design c’est une méthode qui permet d’accélérer le développement d’interfaces graphiques. Elle a 5 niveaux : les atomes, les molécules, les organismes, les modèles et les pages.
Les atomes : ils représentent les éléments d’interface qui ne peuvent pas être plus fragmentés et servent de composants fondamentaux à l’élaboration d’une application.
Les molécules : c’est un groupe d’atomes basiques regroupés avec des propriétés distinctes. Elles forment des éléments d’interface qui fonctionnent ensemble.
Les organismes : représentent des éléments plus complexes regroupant des molécules et/ou des atomes. La plupart des organismes peuvent fonctionner seuls, sans avoir besoin d’éléments extérieurs sur la page.
Les modèles : ce sont les pages sans le contenu final mais articulées autour de la structure du contenu. Les modèles combinent les organismes dans une disposition cohérente.
Les pages : elles comprennent les données finales affichées, ce qui te permet d’itérer ensuite sur l’interface graphique plus finement. Bubble c’est un style mixte de modèle / page : les images et texte sont affichées comme sur une page, les données dynamiques n’affichent que la source de la donnée (“Parent group’s User” au lieu de Charles).
Tu connais sûrement des systèmes de design pour créer ta plateforme qui reprennent ce principe pour Bubble ?
Canvas d’Airdev : des éléments à réutiliser pour créer tes applications rapidement. D’ailleurs, les créateurs de Canvas ont lancé une agence de développement très optimisée qui se base sur ce système.
Openbuild.io : l’équivalent frenchy d’Airdev qui met à disposition un système avancé pour accélérer ses développements Bubble. Tu pourras carrément enregistrer tes atomes et tes molécules pour t’en resservir plus tard, c’est puissant ! Pareil qu’Airdev : l’agence Ideable derrière s’en sert pour accélérer son développement.
Chacun a son avis sur les éléments tout fait, mais c’est vrai que si tu les as construits et que tu les maitrises, c’est un vrai gain de temps. Tes sites vont juste se ressembler un peu… et encore, tu peux quand même introduire des petites nuances ici et là pour personnaliser l’interface !
L’inspiration Bureau
Un dashboard proposé par @gdy.lu & @stuone_com.
Je te le présente car j’aime particulièrement :
➕ la simplicité et l’efficacité de ce dashboard
➕ l’harmonie des nuances de bleu / violet
➕ le panneau latéral utile pour basculer rapidement entre les pages
➕ les données lisibles
➖ peut-être que certains éléments de menu en gris clair auraient mérités d’être plus soulignés car ils sont trop discrets
L’inspiration mobile
C’est une application médicale qui nous est proposé par Anastasia Tino
➕ un style épuré : le nécessaire visible et accessible
➖ une confusion potentielle entre l’image de l’utilisateur et le menu de droite : laquelle est le menu ?
➖ le titre des médecins pas assez contrasté pour une application médicale : des visiteurs peuvent avoir des déficiences visuelles et avoir besoin de l’information
➖ pour Bubble, pas de données de médicales car ils n’ont pas les autorisations pour les stocker (c’est un type de données sensibles, on ne peut pas les enregistrer partout n’importe comment). Fais bien attention dans tes projets à ne pas manipuler ce genre de données réglementées !
Allez hop ! Au boulot maintenant !
Je ne sais pas si tu utilises Bubble pour ton projet principal ou pour ton side projet…
Dans un cas, tu seras peut-être content de déconnecter un peu et de quitter ton écran. Dans l’autre, le week-end est synonyme de temps libre pour continuer ce side auquel tu tiens tant 😎
Dans tous les cas, amuses-toi bien sur Bubble et prends aussi le temps de déconnecter. Au bout d’un moment, tu pourrais saturer et perdre en efficacité : tu risquerai de tourner en rond et ça c’est pas bon.
Bonne chance et bon week-end !
Charles
Dev Bubble & formateur
Réussir votre MVP avec Bubble : coachmvp.fr