Disponible pour vos projets

Case study : Mandatory.GG

Il y a 2 mois

Ca fait longtemps depuis le dernier (et premier) case study et je reviens aujourd’hui avec un site fraîchement sorti: Mandatory.GG

Mandatory.GG est une plateforme autour du jeu Valorant. Le but est d’avoir un hub autour du jeu qui accueille des articles, des guides, des tournois et des outils pour aider les joueurs. 

Le projet est initié par Z Agency et ZeratoR et ils m’ont contacté afin d’apporter mon aide sur le développement WordPress du site.

La première demande

Dans un premier temps, l’équipe de Z Agency m’a contacté pour réalisé 3 plugins qui pourraient être intégrer au thème WordPress qu’ils avaient.

  • Un hub Twitch : Avoir la possibilité d’avoir une page où l’on pourrait voir les streamers Twitch qui jouent à Valorant avec un mise en avant des streamers partenaires.
  • Un vidéo tabs : Avoir des onglets qui renvoient vers une vidéo (cf : La page agent).
  • Gestion de compétition : Pour les besoins d’une compétition qu’ils voulaient mettre en place, le but est d’avoir un formulaire de participation qui se sauvegarde dans la base de donnée.

Très vite un problème se pose pour moi qui est de devoir adapté ces plugins à un thème WordPress qui n’était pas du tout prévu pour ça à la base. C’est à ce moment là que j’ai soumis l’idée de créer un thème WordPress sur-mesure qui pourrait accueillir plus facilement tous ces plugins et pouvoir avoir une vraie identitée autour de Mandatory.GG

Le problème dans tout ça, c’est le délai. En effet, leur planning était déjà établi, beaucoup de chose était déjà en place et prêt à être intégré sur le site et ils ne pouvaient pas repousser cette date qui était assez proche.

La réalisation de la maquette

Avec des délais très courts, j’ai décidé de proposer malgré tout une maquette pour valider la direction qu’on prenait. J’ai fais que 2 pages en desktop : l’accueil et la page de stream.

Le but n’était pas forcément de mettre en place une UX ou UI ultra performante, mais au moins d’établir une base de travail.

Les maquettes ont été validés aussitôt, ce qui m’a permis de passer à l’intégration très rapidement.

Le développement front-end

Pour le coup, je n’avais pas le temps de réfléchir à un moyen d’optimiser mon développement et mettre en place des technos un peu exotique, j’ai du rester sur des solides qui sont HTML/CSS/JS. Pas de framework JS, pas d’animation qui part dans tous les sens, juste quelque chose d’efficace et qui rend bien.

Pour gagner du temps et vu l’architecture des maquettes, j’ai décidé d’utiliser Bootstrap pour gérer mes grilles ainsi que 2-3 composants (notamment les tabs et modals).

J’ai pu intégrer 4 pages qui sont :

  • L’accueil, qui me permettait d’avoir un article mis en avant, une liste d’article et une sidebar
  • Une page simple, que je pourrais utiliser en template pour d’autre page
  • Un article, qui est une page essentiel car l’édito est une partie essentiel de Mandatory.GG
  • La page stream, qui est la page la plus spécifique et qui méritait que je passe du temps dessus.

Pas vraiment de difficulté à ce niveau et grâce aux grids de Bootstrap, j’ai pu faire mes pages très rapidement (3-4 heures).

Le développement WordPress

Place maintenant au gros du morceau, qui est le développement WordPress. 

J’ai développé rapidement les pages que j’avais déjà intégrée, ce qui me permettait déjà de vidé le Trello de mes pages restantes. 

 

Mais je me suis rendu compte qu’il y avait beaucoup de page spécifique comme les maps, les agents, les armes ainsi que les skins, qui ont leur propre comportement ainsi que leur propre design. Pour ces pages, j’avais 2 solutions :

  • Soit je créé un template d’article, ce qui aurait pu fonctionner mais tout le contenu se serait retrouvé dans un seul endroit et en terme d’administration, c’est beaucoup moins agréable 

 

  • Ou la solution que j’ai choisis, qui est la création de custom post type. Ca permet de séparer sur l’administration les différents contenus et de mieux maîtriser l’édito.

Bien sûr chaque custom post type vient avec son lot de champs personnalisés et j’ai évidemment choisis Advanced Custom Fields pour les gérer. 

 

J’ai développer les plugins qui était prévu à la base et continuer.

Le premier problème

Mon premier vrai gros problème vient de la page stream. Pour récupérer les informations depuis l’API de Twitch, j’avais tout gérer en front. Ce qui est une très mauvaise idée car chaque personne sur la page générait une vingtaine de requête alors que Twitch en permet seulement 29 par minutes. J’ai du trouver une solution et celle qui est tombé rapidement était de gérer cette partie en back. 

 

Un simple CRON qui récupère les informations toutes les 5 minutes et les stocks sur la base de donnée. Sur le papier c’est simple mais malheureusement, je n’ai pas les compétences en PHP pour pouvoir le faire. J’ai du choisir de le faire en Node.JS où je suis beaucoup plus à l’aise. Le processus était assez simple, je récupère les informations depuis l’API de Twitch et je les envoies sur WordPress grâce à son API. J’avais jamais eu à gérer l’authentification depuis WordPress mais ce ne fut pas vraiment un problème et j’ai choisi de passer par un token JWT.

Le deuxième problème

Là où j’ai rencontré également un problème vient de la partie compétition avec l’envoi de formulaire qui se stock directement dans un custom post type. Je ne le savais pas à ce moment là mais ACF le fait très bien avec acf_form() ! Après avoir fait des tentatives avec Contact Form 7, j’ai enfin découvert comment le faire avec ACF et tout à pu se faire super facilement ! ACF reste pour le coup le plugin le plus indispensable dans le développement de thème WordPress. Le temps qu’il me fait gagner sur le développement et aux administrateurs sur la gestion du contenu est incroyable.

Je dessine une map

La dernière fonctionnalité qui fut un peu touchy, c’est la création de map. Le but est d’avoir une map de Valorant sur laquelle ont peut dessiner et placer des éléments. Par chance @timmalos m’a énormément mâcher le travail et j’avais juste à intégrer son travail sur WordPress avec un template de page.

Après pas mal d’ajustement graphique, on a pu deploy le site en prod et c’est aujourd’hui la version que vous avez. A l’heure où j’écris le site n’est pas encore entièrement terminé car avec le temps réduits, on a dû reporter certains ajustements, mais on est très content du résultat et de ses fonctionnalités.

J’espère que le site vous plaît et que j’ai pu répondre à certaines interrogation que j’ai pu avoir sur le développement du site.

Site: https://mandatory.gg

Crédits: Z Agency et ZeratoR

Twitter

@willtraore

Dribbble

@kida_agency

LinkedIn

@williamtraore