Il paraît que l’on regarde son téléphone 221 fois par jour.
A chaque fois que l’on effectue ce coup d’oeil, on passe (normalement) par l’ écran verrouillé.
Quel meilleur emplacement donc que le fond d’écran, de l’écran verrouillé pour afficher une phrase motivante ou un texte inspirant ?
Et si, en plus cet écran changeait régulièrement pour de nouvelles citations, de nouvelles couleurs, de nouvelles polices de caractères .
C’est le genre de réflexion qui m’a amené à écrire le mini service ecran-inpirant.fr.
Comment j’ai procédé ?
étape 1 : Validation de l’idée
J’ai vérifié que, sur mon iPhone, je pouvais mettre à jour mon fond d’écran, à partir de l’url d’une image ✅. Merci l’application Apple Raccourcis.
étape 2 : Génération d’une image random
Ensuite j’ai commencé un projet laravel avec comme objectif de MVP, générer une image avec des dimensions et un texte en dur placé en plein milieu ✅. un bon vieux « lorem ipsum » à fait l’affaire.
Durant cette étape j’ai commencé à entrevoir les difficultés de placement d’un texte sur une image. J’allais devoir régler le problème d’un texte long avec une grosse taille de police sur une image toute petite.
étape 3 : go prod
J’adore l’approche lean (better done then perfect) et c’est tout logiquement que j’ai mis l’embryon de service en prod avec avec une vraie citation « Le mieux est l’ennemi du bien. (Voltaire) ».
Cela implique, recherche et achat du nom de domaine, déploiement du code, validation des dns.
Assez rapidement le service était up&running et mon iPhone commencait à mettre à jour son fond d’écran verrouillé avec le meme texte mais des couleurs et des polices différrentes.
étape 4 : des vrais citations et des difficultés de placement
Cette partie m’a obligé à revoir ma facon de générer les images. Comme évoqué, certaines citations sont très longues et comme je voulais que le service reste simple, tout en affichant un texte joli et accessible sur une image colorée j’ai du jouer avec les césures de textes et les tailles de polices pour que tout rentre et soit bien placé.
Je n’avais plus jouer avec du traiement d’images depuis mes débuts et ce fut plutot rafraichissant.
Bien sur j’ai créé une petite base de données, un seeder de citations et j’ai migré le tout.
étape 5 : page d’accueil
Pour un service aussi simple je voulais faire une page d’accueil plutot jolie tout en restant simple et accessible. Pour le fun j’ai fais en place que chaque refresh procure des couleurs et un écran inspirant différent. Le résultat me parait plutot probant 😁
étape 6 : Ajout des presets
Une fois le placement de texte effectué je voulais que l’on puisse faire 2 choses :
- spécifier une largeur x hauteur
- spécifier un preset (iphone7, iphone14, fullhd, galaxy8, …)
le tout depuis l’url. Cette partie n’était pas la plus amusante (surtout la collecte des résolutions de tous les iphone) mais le résultat est là et cela marche.
Ca me fait penser que je devria faire des presets pour les réseaux sociaux. En passant un get.ecran-inspirant/linkedin et voir la vignette parfaitement intégré dans le réseau social devrait etre pertinent.
Comment ça marche ?
Tout est automatique. J’ai intégré plusieurs polices de caractère, plusieurs dizaines de citations collectées un peu partout.
Il suffit ensuite (coté utilisateur) d’appeler une url, avec des paramètres (ou non) et l’on voit une image différente s’afficher à chaque refresh.
Au refresh un citation est choisie, une couleur de fond est définie. En fonction de cette dernière je défini la couleur du texte et la police, je teste différrentes combinaisons de césures + taille de police jusqu’a trouver la bonne et je n’ai plus qu’a afficher le rendu 👌.
Cela rend le process du changement de fond d’écran (sur iPhone) super simple et la génération d’écrans inspirants super facile.
Stack Technique
Simple : Laravel 10 + TailwindCss pour la page d’accueil et c’est tout. Je voulais m’amuser à faire un service amusant. L’objectif est atteint 🏁.