Écrit le 01/09/2024

Symfony
Manipulation EXCEL
AssetMapper
Captcha
Bootstrap
Twig

Cod4 Completionist est un site Web destiné aux amateurs de Call of Duty, axé sur l'opus Call of Duty 4 : Modern Warfare (2007).

Sur le site, vous trouverez toutes les données sur Call of Duty 4 : Modern Warfare (2007) comme les armes, les cartes, les accessoires, …

En tant que fan de la licence Call of Duty, l’idée de ce projet m’est venu en parcourant le reddit COD et en tombant sur les multiples projets de tracking de camouflages réalisés par Emil Carlsson. J’ai décidé d’en faire de même, le modèle de données de COD m’étant plutôt familier et avec pour but d'ajouter un backend au superbe travail d’Emil.

J'ai commencé avec COD 4 parce que la base de données du jeu est assez simple comparée aux plus récents, et c'est le premier avec des défis de camouflage. Je voulais en construire un simple, puis essayer de décliner ce concept pour les nouveaux COD, plus complexes.

L'idée est également de changer de framework frontend et backend sur les autres jeux, afin que je puisse me former et essayer de nouvelles façons de coder.

Développement

Architecture

Pour la première itération de ces projets, j’ai utilisé l’architecture qui m’est la plus familière :

Docker
- Nginx
- PHP 8.3
- MySQL 8
Technos
- Symfony 7.1
- Twig
- Bootstrap 5.3

Modèle de données

Fonctionnalités

Import des données

A partir d’un excel généré à partir de multiples sources de données sur le web, j’ai créé une source de données permettant de créer et mettre à jour les données de l’application.

Basé sur phpoffice/phpspreadsheet puis dispatcher en fonction du nom de la feuille vers un type d’entité “Wiki” ou “Challenge”, les services de chacune des entités permettent de créer et mettre à jour les différentes données.

Affichage Wiki

J’ai utilisé un affichage classique Bootstrap sur 4 colonnes et 1 seule en mobile.

Affichage Challenges

L’affichage est spécifique par challenge mais garde une base commune avec une carte basique et dynamique au survol permettant d’avoir des données supplémentaires. Pour les camouflages, j’ai repris le concept visuel d’Emil que je trouve excellent.

Inscription et connexion utilisateur

Pour la création des formulaires d’inscription et de connexion, j’ai essayé d’utiliser au maximum le maker bundle afin de voir la base proposée par défaut par Symfony. C’est assez simple et complet par défaut, j’y ai ajouté un Google ReCAPTCHA v3 via un karser/karser-recaptcha3-bundle très simple d’utilisation via les FormBuilder de Symfony.

Suivi des challenges

Pour le tracking des challenges, il est nécessaire d’être connecté, autrement une pop-in vous invite à créer un compte ou vous connecter.

Une fois connecté, au clic sur un challenge, la carte change visuellement avec la superposition d’un background vert et d’une coche indiquant la complétion du challenge. Un appel est alors effectué en AJAX, permettant de mettre à jour les challenges complétés par l’utilisateur connecté.

Même principe pour la suppression, avec un affichage différent au hover, où la coche devient une croix rouge indiquant la suppression du challenge à l’utilisateur.

Points de réflexions

En développant cette application, la question principale concerna la source de données. L’idée de scrapper un site fan comme fandom.com étant la première idée mais je me suis vite rendu compte de la complexité pour un si faible volume de données. Ducoup je suis plutôt parti sur un excel alimenté par moi même via des csv ou la transformations de tableau html en csv assez simplement. Forcément pour des COD plus complexes, la question du scrapping reviendra peut-être.

Autre point, la construction du modèle relationnel autour des challenges, et encore aujourd’hui je ne suis pas sûr d’avoir adopté la bonne façon de faire. Une première approche consistait à faire des types d’entités Challenge (comme actuellement), ces entités auraient été attachées à deux types d’entités : Task et Reward afin de morceler complètement la notion de challenge et de pouvoir rattacher les tasks avec les entités des données du Wiki. Au final j’ai trouvé cette approche trop complexe et j’ai préféré construire uniquement une entité Challenge et des types de challenges enfants qui auraient chacun leurs spécificités, les challenges auraient alors pour Task une chaine de caractère décrivant la tâche à réaliser pour déverrouiller le challenge.

Compétences d'intérêt

Utilisation de phpoffice/phpspreadsheet pour la lecture et la récupération des données à partir d’un excel.
Utilisation de karser/karser-recaptcha3-bundle pour l’implantation d’un Google ReCAPTCHA v3 sur les formulaires d’inscription et de connexion.