Hello 👋

Déjà 3 semaines ! Comment se passe ton développement ? Est-ce que les tips t’ont aidé et donné des idées ? N’hésite pas à me faire un feedback.

Petite nouveauté cette semaine avec 3 tips + 1 partagé par notre premier contributeur Peter P !

Bonne lecture, et bonne chasse aux oeufs ce week-end pour les amateurs de chocolat 🍫🐣

Charles

Les tips Bubble

1. Quand c’est l’heure, c’est l’heure

Tu l’auras remarqué : le Date/Time Picker est un peu fourbe. A vide, tu distingues bien la date à l’intérieur, alors qu’en réalité il n’a aucune valeur chargée.

Si tu choisis de changer juste l’heure, il attendra que tu sélectionne le jour également pour donner une valeur à l’élément.

Pire : il se peut que la valeur chargée ne soit pas la valeur affichée.

Pour ne pas avoir un champ vide non renseigné par l’utilisateur, tu peux mettre en Initial Content -> Current Date Time, comme ça tu charges par défaut la date du jour + l’heure, libre à l’utilisateur de la modifier ensuite mais au moins il y aura une valeur.

En haut, l’input n’a aucune valeur (chargement par défaut). En bas, l’input a comme Initial Content le Current Date Time.

Comme tu peux le voir, il y a un problème d’affichage car j’ai choisi des créneaux de 30 minutes pour l’heure donc Bubble arrondit. Si tu charges une date dedans, la valeur affichée ne sera donc pas bonne : l’utilisateur devra cliquer et choisir 12:00 s’il veut midi.

A toi d’arbitrer donc selon ton usage de cette feature !

1. Appelles-moi si tu peux 📞

Tu veux certainement implémenter un bouton pour tes utilisateurs mobile, ce qui leur permettrait d’appeler, d’envoyer un SMS ou un mail ? Rien de plus simple !

La cible de ton lien doit être :

• mailto:[email protected] pour envoyer un mail

• tel:06xxxxxxxx pour appeler ce numéro

• sms:06xxxxxxxx pour envoyer un texto à ce numéro

Tu peux l’utiliser directement avec l’élément Link > External link > tel:06xxx ou dans un workflow avec l’action Open an external Website > tel:06xxx

Ce que tu ne sais peut-être pas, c’est que tu peux charger l’élément mailto: avec plus de paramètres :

• cc : pour rajouter un mail en copie

• bcc : pour mettre un destinataire en copie invisible

• subject : pour rajouter un sujet

• body : pour pré-remplir le corps du mail

Pour tester, crées un bouton avec un workflow Open an external website et le lien :

mailto:[email protected][email protected]&[email protected]&subject=Coucou&body=J'espère que tu vas bien

Pour insérer les paramètres, tu dois mettre un “?” après le mail, puis séparer chaque paramètre et sa variable des autres avec “&”. Ton logiciel de mail s’ouvre.

Pratique, non ?

Tu peux charger aussi le lien sms:06xxx avec un paramètre subject mais ça ne fonctionne pas sur tous les appareils donc c’est moins intéressant.

1. Vide la corbeille 🗑

Imagine que tu as une table Rapport avec un champ Document Justificatif de type File (je sais que c’est pas vrai, mais imagine). Tu supprimes un Rapport inutile via workflow et tu te dis que tu en est débarrassé.

Sauf que.

Bubble va te conserver le fichier physique que tu avais uploadé et lié au champ Document Justificatif. Pour rappel, tu as 500Mo de stockage avec le plan Free, autant te dire que ça va vite ! Tu vas donc devoir supprimer le fichier physique en même temps que l’objet qui y fait référence.

Tu vas pouvoir gérer ton workflow de suppression ainsi :

• Data > Delete an uploaded file > le lien vers le champ fichier de l’objet en question

• puis Data > Delete Thing > l’objet que tu veux supprimer

Comme ça tu es tranquille : pas de surcharge du stockage pour rien !

A noter que si tu veux juste supprimer le fichier physique, tu dois vider ensuite le lien vers le fichier au sein de ton objet. Fais le grâce à Data > Make change to Thing > l’objet en question > et dans le champ en question, ne met aucune valeur.

Si tu ne fais pas ça, si tu cherche à voir si le champ du fichier joint est vide, tu auras quand même une valeur alors que l’objet physique est supprimé.

1. Le hack de la communauté : utilise le survol dans les workflows

Je te rajoute un tips supplémentaire fourni par un membre de notre communauté : Peter P (si tu en as un aussi à partager, fais signe!).

Merci Peter 🙏

Le mini-tuto : le contenu parfait ruine tes designs !

Ce vendredi, c’est @manjdesigns qui te rappelles que ton design doit être adapté à des contenus qui ne lui sont pas favorables afin de fonctionner partout.

Voici donc un design en tuile. Va t’il fonctionner avec du contenu réel ?

Que va t’il se passer si quelqu’un utilise une image blanche ? Le coeur du Like ne sera plus visible car il est blanc sur blanc !

Résolvons ça avec un fond transparent derrière l’icone Like. Ça marche !

Pour les longs titres : ne les laisse pas dépasser ! Sous Bubble, veille aussi à l’espace d’interligne de tes titres afin que le retour à la ligne soit harmonieux.

Pour les cartes (tu vois très bien ce dont je parle, dans ces fameux Repeating Group), on peut les laisser aléatoires selon la hauteur du contenu.

Ou alors changer la hauteur de la carte. Ou changer le design pour être adapté aux longues tuiles.

En résumé, le contenu idéal imaginé sur les maquettes n’est souvent pas reproductible sur ton vrai projet.

N’hésite pas à utiliser des textes trop longs, des images moches et mal centrées. Bref : utilises le contenu que tes utilisateurs posteront réellement.

L’inspiration Bureau

Par @tranmautritam

Une page d’accueil qui respire, très fonctionnelle pour un eshop. Les + :

➡️ un focus sur le produit / service

➡️ un design bon pour le responsive car les blocs s’y prêtent bien

➡️ des éléments distincts : logo + menu (à cacher en responsive) + menu minimal (à garder sur mobile) + photo d’un produit + un slogan accrocheur

L’inspiration mobile

Par @amir.uix

Un design qui reprend tout ce qu’il faut pour un eshop minimaliste, avec :

➡️ des visuels vibrants grâce à la transparence des images

➡️ une disposition efficace qui met en avant l’information utile

A noter que ce design sera possible lorsque vous serez responsable du choix des photos produit car il faudra un fond transparent et donc un PNG que Bubble gère sans souci. Comme vu dans le mini-tuto avant.

Ca y est !

Tu as fini la lecture pour ce vendredi 🎉🥳.

J’espère une fois de plus que tu as trouvé des tips utiles qui te resserviront dès que tu auras fermé ce mail.

Comme d’habitude, n’hésites pas à me faire tes remarques, qu’elles soient positives ou négatives. Cette newsletter est faite pour toi, elle doit t’apporter du contenu utile !

Si tu aimes ce format, n’hésite pas à le partager, ça pourrait intéresser tes amis et connaissances.

A vendredi prochain 👋

Charles

Nocodeur & formateur Bubble

coachMVP.fr