LeaderboarddynamiquepourleRedBullÉléments
MeetupWordPress–Rennes–26/09/2016
LeaderboarddynamiquepourleRedBullÉléments
Meet...
LeaderboarddynamiquepourleRedBullÉléments
MeetupWordPress–Rennes–26/09/2016 Brice Capobianco
Site // b-website.com
Twitter...
LeaderboarddynamiquepourleRedBullÉléments
MeetupWordPress–Rennes–26/09/2016
LeaderboarddynamiquepourleRedBullÉléments
Meet...
LeaderboarddynamiquepourleRedBullÉléments
MeetupWordPress–Rennes–26/09/2016 Le Red Bull Éléments
50 km pour une course ext...
LeaderboarddynamiquepourleRedBullÉléments
MeetupWordPress–Rennes–26/09/2016 Le tracking GPS
DotVision Motion - Solution GP...
LeaderboarddynamiquepourleRedBullÉléments
MeetupWordPress–Rennes–26/09/2016
LeaderboarddynamiquepourleRedBullÉléments
Meet...
LeaderboarddynamiquepourleRedBullÉléments
MeetupWordPress–Rennes–26/09/2016 La demande client
1. Classement des équipes
2....
LeaderboarddynamiquepourleRedBullÉléments
MeetupWordPress–Rennes–26/09/2016
8
LeaderboarddynamiquepourleRedBullÉléments
MeetupWordPress–Rennes–26/09/2016
9
LeaderboarddynamiquepourleRedBullÉléments
MeetupWordPress–Rennes–26/09/2016 Pourquoi utiliser WordPress ?
10
A priori, c’e...
LeaderboarddynamiquepourleRedBullÉléments
MeetupWordPress–Rennes–26/09/2016 De quoi avons-nous besoin ?
1. D’un accès à l’...
LeaderboarddynamiquepourleRedBullÉléments
MeetupWordPress–Rennes–26/09/2016
LeaderboarddynamiquepourleRedBullÉléments
Meet...
LeaderboarddynamiquepourleRedBullÉléments
MeetupWordPress–Rennes–26/09/2016 Connexion à l’API 1/2
13
WordPress et son HTTP...
LeaderboarddynamiquepourleRedBullÉléments
MeetupWordPress–Rennes–26/09/2016 Connexion à l’API 2/2
14
WordPress et son HTTP...
LeaderboarddynamiquepourleRedBullÉléments
MeetupWordPress–Rennes–26/09/2016 Stockage des data – le cache
15
WordPress et s...
LeaderboarddynamiquepourleRedBullÉléments
MeetupWordPress–Rennes–26/09/2016 Mise à jour de l’affichage - AJAX
16
WordPress...
LeaderboarddynamiquepourleRedBullÉléments
MeetupWordPress–Rennes–26/09/2016 Connexion via proxy
17
Petit imprévu de derniè...
LeaderboarddynamiquepourleRedBullÉléments
MeetupWordPress–Rennes–26/09/2016 Développements PHP
18
Là où WordPress n’a plus...
LeaderboarddynamiquepourleRedBullÉléments
MeetupWordPress–Rennes–26/09/2016 Conclusion
19
Convaincu par le gain de temps a...
LeaderboarddynamiquepourleRedBullÉléments
MeetupWordPress–Rennes–26/09/2016
LeaderboarddynamiquepourleRedBullÉléments
Meet...
Prochain SlideShare
Chargement dans…5
×

Cas client atypique

45 vues

Publié le

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

Publié dans : Internet
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
45
Sur SlideShare
0
Issues des intégrations
0
Intégrations
1
Actions
Partages
0
Téléchargements
0
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

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

×