Hello !
Comment se passe ton développement cette semaine ?
Merci aux 5 porteurs de projet qui m’ont présenté leur MVP Bubble cette semaine ! C’était de très belles découvertes et l’occasion de faire connaissance et de s’échanger quelques tips en live.
D’ailleurs, j’ai remarqué que quand on se lance avec Bubble on peut vite amoureux de l’outil et des possibilités qu’il offre 😍 Ne ries pas, ça m’est aussi arrivé au tout début…
Mon conseil : ne te détourne pas de ta mission ! Rappelles toi que tu es parti à l’aventure pour répondre à la peine d’une catégorie de personne. L’outil n’est qu’un moyen.
Si tu ne me suis pas encore sur LinkedIn, n’hésite pas à m’ajouter. En attendant, je te partage ma réflexion de la semaine :
"J'ai une idée incroyable ! Ça va être révolutionnaire 🥳 "
On a tous déjà envoyé cette phrase à des amis. D'ailleurs, ils nous ont souvent approuvé et ont applaudi notre génie visionnaire 👏
Et ils n'avaient pas tort : l'idée est absolument incroyable et jamais vue.
Sauf qu'elle ne répond à aucun besoin, ce n'est qu'une idée. Aussi belle soit elle.
Et le risque, c'est que personne ne soit prêt à payer pour se la procurer parce qu'elle s'apparente à un gadget.
👉 Pour éviter cet écueil :
1/ Partez des besoins que vous connaissez (avec une réponse médiocre ou sans réponse)
2/ Planchez sur une réponse à ce besoin
3/ Proposez votre idée/solution aux personnes intéressées avec le prix que vous jugerez "correct"
4/ Améliorez l'idée ou le prix jusqu’à trouver votre Product Market fit (merci Tom TAIEB pour la précision)
😎 Lancez-vous ! Une bonne idée est une idée qui se frotte à son marché et qui s'y pique (aussi vite que possible pour ne pas perdre de temps, vous en aurez besoin plus tard)
Le meme de la semaine
Je t’adresse ce petit encouragement : ne baisse pas les bras ! Si aujourd’hui tu passes une mauvaise journée, n’oublie pas tout le chemin parcouru ⛰
Quand tu entreprends, tu es souvent trop critique avec toi-même. Un peu de bienveillance, félicite-toi pour tout ce beau chemin, ce que tu as appris et qui t’as fait grandir.
Bonne route !
Les tips Bubble
1. All you need is Slug
Tu as un annuaire d’objet et tu as créé une page /objet/ qui affiche ensuite la valeur de l’objet qui est chargé. Sauf que ce n’est pas ultra-joli, et tu auras une adresse du style https://domaine.com/objet/1234x4567.
On a fait plus lisible.
Tu veux plutôt afficher une url du style https://domaine.com/objet/cadre-photo ?
J’ai ce qu’il te faut : un slug. Autrement dit, un raccourci lisible que tu vas afficher à la place du nom unique de l’objet (efficace lui, mais pas beau).
Tu vas procéder en 2 étapes au moment de la création de l’objet :
dans ton workflow Create a new thing, tu crées ton objet. Jusque-là ok.
juste après, tu mets un nouveau step : Set a thing’s slug… En Thing to change, tu mets le Result du Step précédent, et en slug tu choisis l’emplacement de la variable lisible de ton objet. Et voila.
Maintenant si tu charges ton objet dans la page /objet/ tu auras un bel affichage du type /objet/ordinateur-portable-15-pouces
Tu noteras que Bubble a automatiquement remplacé les espaces par des tirets pour avoir des URL correctes.
🧐 Et si je crée un second objet nommé pareil : ordinateur portable 15 pouces, que se passe-t-il ?
👉 ton site crashe et tu ne pourras plus jamais le récupérer. Non, je plaisante. Bubble va juste indenter proprement le slug suivant en rajoutant un chiffre. Tu auras donc /objet/ordinateur-portable-15-pouces-1
2. Custom States of Bubble 🇺🇸
Je ne te présente plus les Custom States et leur utilisation incontournable dans ton projet (si tu veux une présentation, écris-moi en privé, promis ça restera anonyme 😶)
Tu pourrais être tenté dans ton développement de les mettre un peu partout sur les éléments auxquels ils se rattachent, mais tu risques de ne jamais les retrouver, ce qui est gênant.
La solution la plus simple est de les attacher à la page et de bien les nommer pour comprendre qui sert à quoi.
Pour créer un custom state sur une page, cliques sur la page et ensuite sur le bouton ℹ︎ en haut à droite dans l’inspecteur. Le volet Element inspector s’affiche.
Tu retrouves donc toutes tes variables ici, n’oublie pas que les custom states ne survivent pas à un reload de la page car ils sont par nature temporaires 😵
Par contre une fois ta page chargée, affecte leur la valeur souhaitée grâce au workflow Element Actions > Set state > tu trouves la page dans la liste > tu choisis le custom state qui va recevoir la valeur.
3. Ça rame ou ça casse
Ton application est lente : la barre de chargement est interminable, tes workflows renvoient des erreurs… Avant de te résoudre à résilier ton abonnement gratuit, tu décides d’écrire un mail salé à Bubble pour leur dire ce que tu as sur le cœur 😩
Attends un peu ! As-tu pensé aux performances de ton application ? Es-tu sûr que tu n’es pas en train de faire fumer tes serveurs façon OVH ? Dans le doute, va voir dans l’onglet Logs > Capacity. Tu auras un aperçu sur les metrics importants qui t’aideront à comprendre ce qui arrive à ton site : surcharge, dépassement de capacité, utilisation du CPU (l’unité centrale), nombre de workflows lancés et pages vues…
Très utile, car parfois tes workflows ne sont pas optimisés et vont consommer beaucoup de ressources, ce qui risque de faire planter ton site. Pour éviter que tu draines toute la puissance des serveurs partagés et que tu pénalises tes voisins, Bubble te limite, ce qui provoquera des ralentissements.
Pas de panique donc, mais essaye vite de comprendre d’où le problème vient pour le résoudre…
Le mini-tuto : améliore ton design !
Cette semaine, c’est @hazicsaba qui te donne des tips pour embellir ton site.
créées des jolies ombres
Les ombres sont essentielles, elles nous aident à créer du contraste et font ressortir les éléments. Mails il y a une grande différence entre une ombre élégante et une ombre cheap.
l’alignement c’est la clé.
Essaye de toujours trouver un point de référence pour aligner tes éléments. C’est plus facile de comprendre comment ton site est organisé quand les éléments sont alignés.
Tout n’est pas équivalent
Si tu mets en avant trop d’éléments comme les bordures ou les éléments décoratifs, ta structure sera plus difficile à comprendre.
Hiérarchise tes éléments ! Mets l’accent sur ceux qui ont besoin de sortir du lot et réduit l’importance de ceux qui doivent rester discrets.
Regroupe les éléments intentionnellement
Si 2 éléments sont proches de l’autre, le cerveau humain va penser qu’ils sont connectés. Le principe : ce qui est lié doit être visuellement regroupé.
L’inspiration Bureau
Je te présente un beau dashboard, réalisé par Olesia Podokopna
➕ dashboard clair et joyeux
➕ des éléments faciles à reproduire sous Bubble
➕ un menu bien rangé qui laisse de l’espace pour le reste
L’inspiration mobile
Une fois n’est pas coutume, une application de nourriture se retrouve à l’honneur de la sélection hebdomadaire. C’est @andri145_ qui nous l’apporte.
➕ des contrastes alléchants qui donnent du peps à l’appli
➕ un fond discret qui laisse toute la place au produit
➕ une interface épurée qui met l’information importante en valeur
➖ la couleur jaune qui rappelle la junk food et risque de ne pas être adaptée à de la nourriture plus généraliste
➖ par rapport à d’autres applications, manque évident de visuels qui sont ici remplacés par des pictogrammes colorés n’ayant pas le même impact.
Et voila !
Comment te sens-tu après ce petit shot de Bubble ? Inspiré ? Tu fonces tester les custom states ?
Je te souhaite un bon week-end, de repos ou de Bubble intense sur ton side (ou main) projet.
J’espère que cette newsletter t’apprend des choses intéressantes. En tout cas, j’essaye de sélectionner au mieux ce qui pourrait t’inspirer. Dis-moi comment je peux encore améliorer le contenu ou les rubriques 😎
J’attends ton retour avec impatience, bon week-end !
Charles-Édouard Turquais
CTO nocode & formateur Bubble