Créer une carte des événements WordPress à venir avec les API WordCamp.org & Meetup.com

Par Jb Audras7 juin 2017

Avec WordPress 4.8, le widget du tableau de bord va maintenant afficher un flux d’événements WP à venir pour encourager les utilisateurs de notre CMS fétiche à participer aux événements de la communauté. Super idée 🙂

Et si on allait un peu plus loin en affichant tout ça sur une carte interactive vectorielle ?

wordcamp et meetups WordPress pluginPour résumer, nous allons utiliser l’API central.wordcamp.org pour récupérer la liste des WordCamps à venir, l’API Meetup.com pour les meetups WP et amCharts pour les fonds de cartes SVG indispensables à l’affichage de ces infos.

L’objet de cet article est de présenter le petit plugin libre et gratuit que nous avons créé pour cela, mais aussi d’aller plus loin et de vous montrer comment le reproduire par vos propres moyens.

Rendu final obtenu avec notre plugin :

Avec le WordCamp Europe qui se déroulera à Paris la semaine prochaine (Emilie fait partie du staff et quasiment toute l’agence sera présente), on peut dire que c’est d’actualité.

Allez, c’est parti pour un petit retour d’expérience sur l’utilisation de ces API 🙂

Récupérer les données de l’API central.wordcamp.org

Pour se connecter à l’API, il faut utiliser le point de terminaison suivant :

Cela renvoie ce type de données, formatées en JSON. Les paramètres utilisés sont les suivants :

  • per_page : nombre d’éléments à retourner, 100 étant un nombre a priori suffisant
  • status : ici, on va uniquement récupérer les éléments ayant le statut wcpt-scheduled, c’est à dire les événements planifiés
  • order : la règle de tri, ici décroissant par date, donc du plus proche au plus lointain

Nous allons stocker les données acquises dans un transient WordPress pour les mettre en cache et éviter de réitérer l’appel à l’API à chaque affichage de notre page web (pour en savoir plus sur les transients WordPress, consultez cet article de WPFormation).

Voilà ce que ça donne :

Vous vous retrouvez donc avec un tableau PHP contenant toutes les infos nécessaires pour chaque WordCamp. On peut boucler dans les données reçues et afficher les données des événements assez facilement :

Pas si compliqué finalement ! Merci aux équipes de développeurs de la communauté pour la mise à disposition de cette API ♥

Récupérer les données de l’API Meetup.com

Alors là c’est un poil plus compliqué, car l’API meetup.com nécessite une clé pour pouvoir être utilisée. Pour cela vous devez disposer d’un compte meetup.com — mais je suppose que c’est déjà le cas puisque vous participez sûrement à de nombreux meetups WordPress 😀 .

Pour obtenir votre clé, suivez ce lien : obtenir une clé API meetup.com. Notre plugin contient un bouton d’accès direct à votre clé API.

Une fois votre clé API obtenue, on utilise le même principe. Tout d’abord, on se connecte au point de terminaison qui nous intéresse sur cette API :

Vous noterez qu’on ajoute les paramètres suivants dans l’URL :

  • member_id : toujours égal à 72560962 puisqu’il s’agit de l’identifiant de la fondation WordPress sur meetup.com. Et comme la fondation est inscrite à tous les meetups WordPress officiels, c’est ce qui va nous permettre de récupérer les événements WordPress et pas les meetups Joomla, Drupal ou encore les concours de cracher de noyaux de cerises (c’est de saison dans mon Ardèche natale) 😀
  • key : votre clé API meetup.com

Comme pour les WordCamps, on va se connecter pour récupérer les données et stocker tout ça dans un transient WP :

à aussi, on va pouvoir boucler et récupérer des données à peu près similaires à celles des WordCamps :

Youpi ! 🙂

L’affichage des données sur un fond de carte amCharts

Bon maintenant qu’on a plein de données, il n’y a plus qu’à les afficher…

Et tant qu’à faire, plutôt que de faire une liste ou un vulgaire tableau rébarbatif, plaçons tout ça sur une carte ! Ça tombe bien on a récupéré les coordonnées GPS de chaque événement.

On pourrait utiliser Google Maps, bien entendu, mais pour une fois j’aimerais bien parler d’une alternative hyper sympa et trop méconnue : amCharts. Nous avons eu le plaisir de l’utiliser sur le site du groupe Urgo qui va être mis en ligne d’ici quelques heures et sur quelques autres projets, et le principe m’à séduit : des fonds cartographiques vectoriels en SVG propres et à jour et une API Javascript bien faite pour la manipulation des données. En gros, vous pouvez afficher vos marqueurs un peu comme sur Google Maps, sauf que vous avez ici un fond de carte vectoriel 100% personnalisable !

Comme les données que nous obtenons sont mondiales, nous allons récupérer le fond de carte mondial worldlow.js. Nous récupérons également la bibliothèque Javascript amCharts.

Functions.php

On commence par ajouter nos trois scripts via le fichier functions.php  du thème.

Le fichier scripts.js est un fichier JS vide, que nous remplirons bientôt.

Vous remarquerez que dans le code ci-dessus, les fichiers JS utilisés sont rangés dans un répertoire  /maps , qui se trouve lui même tout simplement placé dans le thème (ou dans le thème enfant).

scripts.js

Nous allons initialiser la cartographie interactive. Je précise que je n’ai mis ici que les paramètres de base. L’exemple ci-après et l’extension que nous proposons sur le dépôt officiel WordPress sont plus complexes. Notez la présence de la variable markers  en ligne 8. C’est elle qui contiendra tous nos pointeurs (WordCamps et Meetups).

Génération des marqueurs en PHP + Javascript

C’est assez simple, il suffit de boucler sur les événements et de placer dans notre tableau JS markers chaque nouveau pointeur avec les informations nécessaire pour l’affichage du pointeur sur la carte. Au niveau de la doc, amCharts décrit plutôt bien l’objet MapImage que nous utilisons ici. Je vous mets un exemple ci-dessous avec les WordCamps. Pour les meetups il suffira d’adapter légèrement en fonction des infos remontées plus tôt dans cet article.

Exemple de code fonctionnel

Ci-dessous, une version simplifiée et adaptée pour pouvoir être utilisée sur CodePen (les données API appelés sont statiques et datées du 28 mai 2017, il est donc normal que celles-ci ne restent pas à jour dans le futur !).

See the Pen WordPress Events on amCharts Map by audrasjb (@audrasjb) on CodePen.0

 

Sympa non ? 🙂

Télécharger l’extension sur WordPress.org

Et voici le lien de téléchargement du plugin sur WordPress.org : https://wordpress.org/plugins/wp-community-events/

wordcamp et meetups WordPress plugin

Photo © Jonas Andrijauskas

Jb Audras

Auteur Jb Audras

Directeur technique de l’agence, auteur d’extensions, contributeur core WP, lead de WordPress 4.9.5, responsable général de la traduction (GTE) de WordPress en français et coordinateur du meetup WP Valence – @audrasjb

Tous les articles de Jb Audras

Laissez une réponse

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.