Nous y sommes !

Je suis très heureux de te présenter le premier numéro de Tips pour ton MVP avec Bubble, la newsletter qui te donnes des tips pour construire ton MVP (ou celui de tes clients) avec Bubble. J’ai essayé de faire au plus simple niveau slogan.

Chaque semaine, je te présente 3 astuces et rappels sur Bubble qui m’ont aidé à progresser dans mon développement depuis plus de 2 ans.

Tu n’as pas d’idées pour le design de tes applications ? Je te partage l’inspiration graphique issue de ma veille Instagram avec un design de site version bureau + un design mobile.

Un mini-tuto sélectionné sur Instagram viendra te donner un éclairage sur un thème utile : choix des polices, de l'espacement, des règles de design, de persona, de couleurs, de tailles de boutons… Bref, plein de conseils simples et précis pour être encore plus fullstack.

Enfin, selon l’actualité du moment, je te rajouterai des infos et des sites qui pourraient t'intéresser : nouveau constructeur de landing page, outil graphique pour ton design, news sur Bubble, etc.

Cette newsletter est la tienne : je compte sur toi pour m’aider à l’améliorer. Tes retours sont précieux pour qu’elle te soit toujours plus intéressante.

Bonne lecture !

Charles

Les tips Bubble

1. Lis le manuel (débutant)

On va commencer par le début, mais si tu es débutant c’est vraiment important : lis le manuel Bubble. C’est une véritable mine d’or sur la façon dont les éléments réagissent entre eux et sur la théorie du programme.

👉 Tu le trouveras ici : https://manual.bubble.io

Pas très digeste de commencer par ça, à moins que tu sois en manque de cours magistraux, auquel cas tu vas pouvoir te faire plaisir.

L’idéal est plutôt d’y faire appel en mode contextuel, lorsque tu t’interroge sur un élément particulier. Pour cela, passe ta souris sur une zone qui te pose question : une petite bulle ? See reference apparait. Cliques dessus et tu arriveras sur la rubrique d'aide correspondante.

Je pense que Bubble a inséré un petit challenge en easter egg, puisque tu verras que c’est extrêmement compliqué de passer dans la zone pour faire apparaitre la petite box, puis de réussir à cliquer dessus avant qu’elle ait disparu… Pour info, je dois faire un score dans les 80%, mais si tu y arrives à chaque fois : bravo !

Félicitations si tu arrives à ne pas faire disparaitre la fameuse petite bulle...

Suis le lapin blanc et tu arriveras directement sur l’explication.

2. Cliquer ailleurs pour éviter un bug + infos sur le type d’objet (Débutant)

Petit tips pour que tu évites de créer une erreur des plus courantes et des bugs en pagaille.

Tu veux afficher un élément si la valeur d’une zone texte est Bidule. Tu crées donc ta condition dans l'élément When Input A’s value is Bidule et tu appuie sur Enter.

🤯 Et là tu as zappé que tu as nommé un autre élément contenant Bidule sur la page, ce qui signifie que Bubble va en fait surveiller la valeur de cet élément, ce qui est difficile à voir car Bubble supprime les guillemets quand tu n’édites pas la condition…

Pour y remédier, ne tape jamais sur Enter quand tu édites une condition, clique plutôt en dehors de la zone.

On voit les guillemets... On les voit plus... On les voit... On les voit plus

Tu remarqueras aussi que quand tu passes ta souris sur une variable, il te précise le type de variable, ce qui est très pratique pour vérifier d’un coup d’oeil le type des valeurs que tu choisis.

3. Transformer un type (avancé)

Petite fonctionnalité pratique : tu peux transformer un type de données en un autre pour les besoins de ton application. Si c’est simple pour transformer vers un type Texte, depuis peu Bubble autorise aussi le passage d'un texte en un nombre.

Une fois que tu as sélectionné ta variable Text, cliques sur More et cherche :transform to Number. Si c’est possible, il te mettra un beau nombre. Attention, comme le répète ce bon manuel Bubble, la fonction « prend en compte les paramètres régionaux du navigateur de l'utilisateur pour déchiffrer les symboles dénotant des séparateurs décimaux et des milliers ». Donc le nombre créé en saisissant la donnée ne sera pas le même selon la localisation des tes utilisateurs.

Tu pourras aussi transformer un champ Date (une valeur pas lisible directement) en un beau texte de date (jeudi 19 mars 2021) mis en forme (mais il prend le format Texte de façon irréversible et tu ne pourras plus travailler en mode Date avec lui après) grâce à l’opérateur :formatted as 3/19/21.

Tu peux alors choisir le mode d’affichage que tu veux pour cette date (jour + mois, mois complet, etc.).

L’inspiration UI Bureau

Par @omnicreativora

J’aime particulièrement l’efficacité de cette landing page et son côté relaxant et professionnel.

➡️ Les logos ne sont pas trop marqués grâce à un seul niveau de gris

➡️ La page respire

➡️ Des couleurs rassurantes et claires

C'est joli, non ?

L’inspiration UI Mobile

Par @sepide_moqadasi

J’aime le côté pep’s qu’apporte la couleur jaune, mélangée à des aplats blanc et gris clair pour concentrer la vue sur les éléments jaunes contrastés.

➡️ Je n’aurai pas forcément choisi la couleur jaune pour un thème « Healthy food », mais plutôt du vert qui rappelle l’aspect naturel

➡️ Ça reste assez cohérent malgré tout et ça donne plutôt faim 😋

Le mini-tuto : choisir entre le Dropdown ou le bouton Radio.

Cette semaine, c’est l’excellent Sergio Cardenas @ui_sergio qui nous éclaire sur l'utilisation de l'élément adapté pour un choix.

Utilisez le bouton radio pour …

1️⃣ Mettre l'accent sur d'autres options

2️⃣ Pour moins de 5 options

3️⃣ Lorsque la réponse rapide est la priorité

Utilisez les menus déroulants pour …

1️⃣ Grand nombre d'options

2️⃣ Pour aider votre utilisateur à décider plus facilement

Merci Sergio !

C’est tout pour cette semaine.

J’espère que tu as apprécié et appris des choses. Tu peux répondre à ce mail et me donner ton avis, je suis un vrai humain donc je lirai ton message avec beaucoup d’intérêt et te répondrai dès que possible.

Si tu as aimé, n'hésite pas à partager

Bon développement, à vendredi prochain !

Charles

Nocodeur Bubble et formateur