Blog

Bonjour à toutes et à tous, je m’appelle Augustin GRISEL et je vais vous raconter comment avec mon petit frère Paul nous avons développé Plant My Forest. 

 

Depuis de nombreuses années, je suis passionné par les technologies du web avec lesquelles je bricole des nanos projets afin de tester des trucs. Mais, avec Paul nous avions soif de challenge et envie de partager un projet dont nous sommes fier. 

 

Ni une, ni deux, nous nous sommes attelés à la conception de Bourgad (notre précédent projet). Ainsi tout un chacun peut effectuer, grâce à Bourgad, des dons sans investissement de temps ou d’argent. Malheureusement, ce projet ne fut pas couronné de succès… Néanmoins, nous avons beaucoup appris mais il était temps de tourner la page afin de nous concentrer sur un autre projet : Plant My Forest !

 

Plant My Forest combat le dérèglement climatique grâce à la plantation d’arbres. Plant My Forest est un site web où l’on plante une forêt digitale qui sera ensuite réellement plantée en Zambie ou en Tanzanie. Plant My Forest est partenaire avec WeForest (une des plus grandes ONG de plantation d’arbres au monde).

Paul avait bricolé une application en une après-midi avec les outils de no-code à sa disposition :

• Carrd : constructeur de page web

• Zapier : appelle les différentes APIs

• Stripe : donne accès à un formulaire de paiement 

• Google Sheet : héberge le leaderboard

Plant My Forest n’avait pas à être parfait, mais devait exister. Ce fut un des enseignement appris grâce à Bourgad : mieux vaut lancer le plus rapidement possible plutôt que chercher absolument à atteindre une perfection - subjective. Et cette preuve de concept répondit plus qu’à nos attentes : en seulement une après-midi, le chiffre d’affaire de Plant My Forest dépassa ceux de tous nos précédents projets. Le concept de Plant My Forest était une idée à étoffer. Deux questions étaient alors en suspens : 

• Comment susciter plus d’intérêt ?

• Comment obtenir plus de liberté pour la GUI (par rapport au no-code) ?

Pour l’intérêt, nous nous sommes inspiré de la célèbre page web : The Million Dollar Homepage sur laquelle chacun peut acheter des emplacement de pixels et leur donner la couleur qu’il souhaite. Nous voulions que les gens marquent à leur manière la forêt de Plant My Forest en disposant leurs arbres acquis sur notre carte. 

 

Ainsi avec la contrainte de carte intéractive, nous devions transposer la base des services de no-code vers du développement pur et dur. Voici la liste des technologies utilisées :

• Apache : écoute les requêtes HTTP

• MySQL : héberger les données

• Symfony (PHP) : backend de l’application

• JavaScript : en particulier avec l’API canvas (gère l’affichage de la carte intéractive)

• TailwindCSS : framework CSS souple, compatible entre les navigateurs (afin d’alléger le poids du fichier final compilé, nous utilisons PurgeCSS)

• Stripe (PHP) : permet le paiement directement sur la page de Plant My Forest sans redirection vers le site de Stripe

La transposition du no-code vers notre nouveau système codé nous a demandé 5 heures de travail. Néanmoins, la nouvelle fonctionnalité qu’est la carte devait répondre aux critères suivants :

• Afficher les arbres et le nom des forêts. La taille de la police des noms d’arbres est fonction du nombre d’arbres et du nombre de caractère

• Scrollable et zoomable (drag and pan)

• Accessible via une API JavaScript afin d’ajouter des arbres dynamiquement après un achat

Après de nombreux essaies/erreurs, la carte était enfin fonctionnelle sur navigateur… ce n’était que la partie émergée de l’iceberg : le comportement sur mobile subissait beaucoup de bugs car les événements sur navigateur et mobile sont très différents… La date de sortie approche à grands pas ! Il fallait implémenter une version la plus fonctionnelle possible, nous nous sommes concentrer alors en priorité sur la compatibilité pour les navigateurs. Le jeu en valait la chandelle car plus de 75% de notre trafic provient des réseaux sociaux sur navigateur.

 

Ainsi nous sommes fier de vous présenter Plant My Forest ! Si vous aussi vous souhaitez agir pour la Terre, planter des arbres afin de contrecarrer le dérèglement climatique !

 

Plant My Forest nous aura démontré qu’il vaut mieux lancer un projet fonctionnel et le bonifier petit à petit plutôt que de repousser sa sortie. En voulant atteindre la perfection de son application, on s’éloigne d’une potentielle sortie; à long terme cela procure surtout du découragement… les utilisateurs sont des personnes bienveillantes pouvant partager leur attente face à un produit.

 

J’espère que vous aurez apprécié lire ce billet. Je continue de travailler sur Plant My Forest en corrigeant quelques bugs et implémentant de nouvelles fonctionnalités. Voici un aperçu des nouveautés qui devrait sortir incessamment sous peu :

• positionnement personnalisable des arbres dans une forêt 

• don d’arbres à un utilisateur pour agrandir sa forêt (et lui permettre peut être d’atteindre le haut du classement)

• API pour les e-commerces leur permettant de planter un arbre à chaque achat (par exemple)

 

Si vous avez des remarques ou des questions, n’hésitez pas à me les poser, c’est avec plaisir que j’y répondrai. Et si vous souhaitez planter des arbres, cela par ici : plantmyforest.com ! ;)

 

Je vous souhaite une bonne journée.

A la prochaine.