Présentation d’un projet WordPress atypique : Création d’un tableau d’affichage des résultats en temps réel pour un événement sportif. Meetup WPrennes #5 - 26 septembre 2016

1. LeaderboarddynamiquepourleRedBullÉléments
MeetupWordPress–Rennes–26/09/2016
LeaderboarddynamiquepourleRedBullÉléments
MeetupWordPress–Rennes–26/09/2016
+ Cas client
atypique
Tableau d’affichage
des résultats en temps réel
pour un événement sportif.

2. LeaderboarddynamiquepourleRedBullÉléments
MeetupWordPress–Rennes–26/09/2016 Brice Capobianco
Site // b-website.com
Twitter // @BriceCapobianco
Plugins //
• Simple Revisions Delete
• WP Plugin Info Card
• WP Envato Affiliate Card (add-on)
2
Resp. commercial en agence & freelance WordPress

3. LeaderboarddynamiquepourleRedBullÉléments
MeetupWordPress–Rennes–26/09/2016
LeaderboarddynamiquepourleRedBullÉléments
MeetupWordPress–Rennes–26/09/2016
Le
Red Bull Éléments
Une course extrême en relais.
3

4. LeaderboarddynamiquepourleRedBullÉléments
MeetupWordPress–Rennes–26/09/2016 Le Red Bull Éléments
50 km pour une course extrême par équipe...
“Rameurs, trailers,
parapentistes et
vététistes, tous
membres de la
même planète
outdoor ! ”
4

5. LeaderboarddynamiquepourleRedBullÉléments
MeetupWordPress–Rennes–26/09/2016 Le tracking GPS
DotVision Motion - Solution GPS Live pour évènement sportif
5
1. Puce GPS
ultrasensible
2. Modem GPRS
3. Traitement des
données
4. Injection dans l’API

6. LeaderboarddynamiquepourleRedBullÉléments
MeetupWordPress–Rennes–26/09/2016
LeaderboarddynamiquepourleRedBullÉléments
MeetupWordPress–Rennes–26/09/2016
Le leaderbord
Tableau dynamique
d’affichage des résultats.
6

7. LeaderboarddynamiquepourleRedBullÉléments
MeetupWordPress–Rennes–26/09/2016 La demande client
1. Classement des équipes
2. Progression grâce à une timeline
3. Affichage du sport pratiqué par le relayeur en course
4. Temps et différentiels avec l’équipe leader
5. Gérer les statuts d’équipe
6. Top 3 toujours visible
Affichage sur 3 écrans (22 premiers, 22 suivants, etc.)
Affichage de l’ensemble des équipes sur le site
Redbull.com
7
A partir des données brutes, il fallait afficher :

8. LeaderboarddynamiquepourleRedBullÉléments
MeetupWordPress–Rennes–26/09/2016
8

9. LeaderboarddynamiquepourleRedBullÉléments
MeetupWordPress–Rennes–26/09/2016
9

10. LeaderboarddynamiquepourleRedBullÉléments
MeetupWordPress–Rennes–26/09/2016 Pourquoi utiliser WordPress ?
10
A priori, c’est un simple moteur de blog, et ça, tout le monde le sait…
Ma réponse dans les slides à venir.

11. LeaderboarddynamiquepourleRedBullÉléments
MeetupWordPress–Rennes–26/09/2016 De quoi avons-nous besoin ?
1. D’un accès à l’API du prestataire de Géo Tracking
2. D’une fonction permettant la connexion à l’API
3. D’un système de cache en cas de perte de connexion
4. De beaucoup de fonctions de traitement des données
5. D’AJAX pour mettre à jour les scores automatiquement
11
De WordPress, mais on s’en doutait.

12. LeaderboarddynamiquepourleRedBullÉléments
MeetupWordPress–Rennes–26/09/2016
LeaderboarddynamiquepourleRedBullÉléments
MeetupWordPress–Rennes–26/09/2016
Le développement
WordPress
et les fonctions du cœur.
12

13. LeaderboarddynamiquepourleRedBullÉléments
MeetupWordPress–Rennes–26/09/2016 Connexion à l’API 1/2
13
WordPress et son HTTP API
$response = wp_remote_get ( $url, $args );
$args = array(
'timeout' => 10,
'headers' => array(
‘API-Key' => AUTH_KEY,
),
)

14. LeaderboarddynamiquepourleRedBullÉléments
MeetupWordPress–Rennes–26/09/2016 Connexion à l’API 2/2
14
WordPress et son HTTP API
is_wp_error( $response );
 Si erreur, recuperation du cache
$data = wp_remote_retrieve_body( $response );
$code = wp_remote_retrieve_response_code( $response );
 Si $code est égale 200, on enregistre $data pour le traiter plus
tard.

15. LeaderboarddynamiquepourleRedBullÉléments
MeetupWordPress–Rennes–26/09/2016 Stockage des data – le cache
15
WordPress et sa Transients API
set_transient( ‘data_API’, $response, $expiration );
 Enregistrement des données de l’API
 Fonctionne pour la création et la MAJ
$response = get_transient( ‘data_API’ );
 Récupération des données si API hors ligne

16. LeaderboarddynamiquepourleRedBullÉléments
MeetupWordPress–Rennes–26/09/2016 Mise à jour de l’affichage - AJAX
16
WordPress et sa Plugin API avec la référence wp_ajax (action)
add_action( 'wp_ajax_call_rbe', 'rbe_ajax_board' );
add_action( 'wp_ajax_nopriv_call_rbe', 'rbe_ajax_board' );
 nopriv_ pour les utilisateurs non authentifiés
function rbe_ajax_board() {
// Fonctions de traitements et d’affichage
}
+ Appel en AJAX (jQuery) toutes les XX secondes avec
l’action call_rbe.

17. LeaderboarddynamiquepourleRedBullÉléments
MeetupWordPress–Rennes–26/09/2016 Connexion via proxy
17
Petit imprévu de dernière minute… heureusement qu’il y a WordPress 
Problématique : Serveur Redbull sécurisé par un firewall = requêtes sortantes
bloquées.
Solution : utilisation des constantes :
define( ‘WP_PROXY_HOST‘, ‘<ip_proxy>’ );
define( ‘WP_PROXY_PORT‘, ‘< port_proxy>’ );
define( ‘WP_PROXY_BYPASS_HOSTS‘, ‘localhost, sd.redbull.fr’ );
Pour l’authentification : WP_PROXY_USERNAME et WP_PROXY_PASSWORD
Depuis WordPress 2.8, ces constantes peuvent être définies dans le fichier wp-
config.php

18. LeaderboarddynamiquepourleRedBullÉléments
MeetupWordPress–Rennes–26/09/2016 Développements PHP
18
Là où WordPress n’a plus de valeur ajoutée
Construction des équipes à partir des numéros de dossard
3 critères de tri (multisort) : Status, Rank, Checkpoint
Séparation en 3 tableaux pour l’affichage
Calcul des temps totaux et différentiels avec l’équipe leader
Affichage de la progression sur une frise (+CSS)
+ Gérer les erreurs de l’API, les changements de tracé de dernière minute

19. LeaderboarddynamiquepourleRedBullÉléments
MeetupWordPress–Rennes–26/09/2016 Conclusion
19
Convaincu par le gain de temps apporté par WordPress ?
Vous l’aurez compris, ce cas client était plutôt
un prétexte pour vous présenter quelques fonctions
(trop) peu connues du core…

20. LeaderboarddynamiquepourleRedBullÉléments
MeetupWordPress–Rennes–26/09/2016
LeaderboarddynamiquepourleRedBullÉléments
MeetupWordPress–Rennes–26/09/2016
Merci !
Des questions ?
20