Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Cas client atypique

251 views

Published on

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

Published in: Internet
  • Be the first to comment

Cas client atypique

  1. 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. 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. 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. 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. 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. 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. 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. 8. LeaderboarddynamiquepourleRedBullÉléments MeetupWordPress–Rennes–26/09/2016 8
  9. 9. LeaderboarddynamiquepourleRedBullÉléments MeetupWordPress–Rennes–26/09/2016 9
  10. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 20. LeaderboarddynamiquepourleRedBullÉléments MeetupWordPress–Rennes–26/09/2016 LeaderboarddynamiquepourleRedBullÉléments MeetupWordPress–Rennes–26/09/2016 Merci ! Des questions ? 20

×