• Démo
• Contexte
• Comment ça marche
  • Authentification
  • Récupération des données
  • Dataviz nuage de mots
  • Mini-moteur de recherche
  • Déploiement

Démo

Retrouvez ci-dessous les donateurs de cette cagnotte.

Contexte

J’ai récemment pris en charge la création d’une levée de fonds (crowdfunding) sur Hello Asso.

Je voulais mettre en avant les personnes qui y ont participé (de manière équitable) : d’où l’idée de publier sur une page web l’ensemble des donateurs et le montant total qu’ils ont atteint.
La solution devait être :

• avec des données réelles ;
• simple à déployer ;
• simple à maintenir.

Comment ça marche

Authentification

Dans un premier temps, on doit se connecter à l’API de Hello Asso pour récupérer les données en temps réel. La documentation sur le sujet est assez claire : à partir du client_id et du client_secret, on obtient un token d’authentification valide pendant 20 minutes.

Récupération des données

Une fois qu’on a le token, on peut accéder aux détails d’une collecte de fonds précise. Encore une fois, la documentation sur la récupération de ces données est claire.

Dans notre contexte, on a besoin du nom de chaque donateur. On a donc des données qui ressemblent à cet array de json:

[{"nom": "nom1"}, {"nom": "nom2"}, {"nom": "nom3"}, {"nom": "nom4"}, {"nom": "nom5"}, ...]

Dataviz nuage de mots

J’ai opté pour la librairie d3 JS pour visualiser les noms, afin qu’ils soient :

• tous de la même taille ;
• de couleurs alternées pour mieux les distinguer ;
• responsive, parce que les visiteurs utilisent différents types d’appareil ;
• mis en avant au survol de la souris (ou au clic sur mobile).

Voici un aperçu statique de ce que ça donne (flouté, car c’est pour généraliser la méthode) :

Mini-moteur de recherche

Plus il y a de donateurs, plus il est compliqué de retrouver un nom particulier. Un mini moteur de recherche est donc l’idéal : à la saise d’un mot-clé, la page simule un survol de la souris (ou clic sur mobile) :

• le nom qui contient le mot-clé est mis en avant ;
• les autres noms deviennent moins opaques ;
• l’URL de la page est actualisé pour que l’utilisateur puisse partager la mise en avant de sa contribution.

Déploiement

J’ai également rajouté :

• le nombre de participants ;
• le montant total collecté ;
• un bouton d’appel à l’action (CTA) ;
• et une mention de mon adresse mail si besoin d’aide (surtout pour les donateurs qui ne s’y trouvent pas)

Ensuite, j’ai utilisé Gitlab pages pour déployer cette simple page.

Pour accéder au code complet, n’hésitez pas à me contacter directement, je vous le partagerai avec plaisir !