Kevin Hagner

Amateur de tout ce qui touche à la technologie, j'ai vite été attiré par les cryptomonnaies qui m'intriguaient par leurs fonctionnements techniques. Ce n'est que quelques années plus tard qu'elles commençaient aussi à m'intéresser pour leur potentiel de diversification patrimoniale. Malheureusement, la législation française rend celle-ci complexe à mettre en place, car elle exige une journalisation très stricte de la moindre transaction pour être en mesure de calculer l'imposition sur les plus-values à reverser à l'État. N'ayant pas trouvé de logiciel permettant de réaliser ce suivi efficacement, je le développe moi-même. En plus de sa finalité, ce projet aura été une opportunité pour moi de monter en compétence sur des technologies qui m'intéressent.

Pour ce projet, je suis donc parti d'un socle en Symfony 5 pour la gestion du back-end avec un front en Vue.JS. Les API permettant aux deux entités de communiquer ont été réalisées avec API Plateform.

L'un de mes clients a entrepris une refonte complète du design de son site. À cette occasion, nous avons décidé de migrer sur le thème Hyvä afin de profiter des optimisations que celui-ci offre. J'ai été amené à expérimenter Alpine.js de façon assez poussée, notamment lors du portage des produits bundles dont l'implémentation était à personnaliser.

Pour mesurer l'impact de la refonte et repérer les éventuels problèmes, tant au niveau technique (par exemple, via la survenue d'erreurs JavaScript) qu'à celui de l'UX, la solution Contentsquare a été mise en place. Elle nous permet de suivre le parcours utilisateur de façon à cerner les difficultés rencontrées lors de leurs navigations et de trier les points par importance.

Ce client implémente son propre ERP à l’usage des commerçants, mais aussi des logiciels de caisses, de stocks et de logistique. Dans ce cadre, il m'avait missionné pour réaliser une interface permettant de synchroniser la plateforme Magento de certains de leurs partenaires au reste de leur écosystème.

• Une grosse partie de mon travail résidait dans la création d’un socle de web-service capable d’envoyer et recevoir des données de leur API. Ainsi, la liste des comptes clients des deux sources est fusionnée en temps réel. Il en est de même pour le stock et le contenu des paniers.
• J’ai aussi dû désactiver complètement le checkout de Magento et rediriger l’internaute sur une page externe de façon transparente, avec autologin.
• Un gros travail de rendu en Knockout.js a également été fait sur les fiches produits pour permettre l'affichage des dates de disponibilités depuis l’API, et de proposer à l’acheteur trois boutons d’ajouts au panier différents en fonction du mode de livraison. Elles sont mises à jour en AJAX de façon à pouvoir continuer d’utiliser le full-page cache de Magento.
• Un sélecteur de magasin physique de livraison a été implémenté de façon à ce que l’internaute puisse définir une fois pour toutes celui dans lequel il compte récupérer sa commande et conserver l’information au fil des pages. Ce stockage s’effectue dans le local storage du navigateur web.
• J’ai également créé une nouvelle entité importable depuis le back-office de Magento. Elle a été incorporée au système d’import original de façon à ce que son usage soit transparent pour l’administrateur du site qui pourra employer des fichiers CSV ayant la même forme que ceux qu’il utilisera par exemple pour l’import des produits ou des clients.
• De façon à faciliter au maximum la tâche aux futurs intégrateurs du module, une attention particulière a été accordée à la gestion des logs, qui supportent plusieurs niveaux de verbosités ; sont séparés de ceux générés par le cœur de Magento ; et sont expurgés des données personnelles pour éviter tout problème avec le RGPD.
• Pour conserver l’image de marque du client, une nouvelle page de configuration à l'écart de celle de Magento, avec sa propre icône a également été rajoutée dans le menu du back-office.
• Enfin, un mécanisme d’export des données du Magento sous la forme de CSV compréhensible par l’ERP destinataire a été implémenté. Celui-ci permet de gérer l’export des clients, des commandes et des produits et fonctionne de façon asynchrone, c’est-à-dire via le système de queues et de consommateurs Magento.

Initialement, je travaillais avec ce client sur la maintenance d'un back-office Magento qu'ils employaient comme un ERP B2B. Des opérateurs l'utilisaient pour créer des commandes directement depuis celui-ci.

Il a ensuite été décidé de déprécier ce service qui devenait de moins en moins pratique pour le remplacer par un logiciel fait maison se présentant sous la forme d'une multitude de mini-API écrites en Python à l'aide de Flask RESTX qui communiquent avec un nouveau front réalisé en Vue.JS.

Concernant les technologies Python, j'ai notamment travaillé sur :

• la création de migrations à l'aide d'Alembic ;
• la réalisation de requêtes SQL complexes grâce à sqlalchemy ;
• l'écriture de tests unitaires avec unittest ;
• l'utilisation de Flask-RESTX pour :
  • concevoir des modèles et leurs liens avec la base de données ;
  • implémenter des CRUD permettant de manipuler ces modèles ;
  • créer des validateurs de données ;
  • générer des documentations avec Swagger ;

Du côté de Vue.JS, j'ai expérimenté :

• l'utilisation de Vite comme serveur de développement ;
• l'utilisation de TypeScript ;
• la création de components, avec props, évènements, templates, méthodes, etc. ;
• le système de traduction vue-i18n ;
• VeeValidate pour la gestion des formulaires ;
• Vue-Cal pour la réalisation de calendriers ;

Ce site web a été réalisé à l'aide de Jekyll, un générateur de site statique. J'ai bien évidemment écrit son contenu, mais je me suis aussi occupé du design en LESS, notamment du responsive et du thème sombre.

J'ai aussi profité de l'occasion pour expérimenter TypeScript, que j'ai utilisé pour implémenter le système d'accordéon qui permet d'étendre ou de cacher le détail des missions.

Enfin, j'ai employé Lighthouse pour rendre ce site le plus optimisé possible, particulièrement au niveau du SEO et de son accessibilité.

Dans le cadre de cette mission, j'ai rejoint une équipe dont l'objectif était de porter un site initialement sur Magento 1 vers Magento 2. Mon travail consistait surtout dans la personnalisation du back-office de façon à simplifier la gestion des commandes, des produits et des retours aux différents administrateurs et commerciaux qui auront à l'utiliser.

J'ai ainsi été amené à travailler de façon poussée sur les uiComponents pour créer de nouvelles grilles et formulaires sur le back-office, et à en modifier des existantes. Voilà quelque un de ces développements :

• affichage des produits achetés directement dans la grille listant les commandes ;
• mise à jour de la couleur de fond des grilles listant les commandes et des clients en fonction de paramètres arbitraires définis dans notre module ;
• ajout d'onglets et de boutons d'actions sur les fiches clients ;
• ajout de popups, dont certaines avec des formulaires ;
• création d'un système de gestion des taux de changes customisés ;
• création d'un formulaire dans une vue qui contient lui-même des grilles ;

Côté front, un gros travail a été accompli pour afficher des données arbitraires sur les produits simples, configurables, bundles et groupés. Ces données étant évolutives, il fallait gérer leurs valeurs dynamiquement via des requêtes AJAX, car elles ne peuvent pas être cachées. Il était donc également nécessaire de réaliser les différents scripts JavaScripts, templates Knockout.js et des end-points d'API de façon à pouvoir efficacement rapatrier ces informations.

Un acteur spécialisé dans la réparation et le recyclage de matériel électronique avait besoin d'un site permettant à ses clients d'enregistrer des demandes de retour de matériel défaillant. Le client final devait donc acheter des prestations de réparation, et envoyer ensuite son matériel au réparateur une fois la commande validée. Le réparateur se chargeait ensuite de la réparation, puis renvoyait l'objet une fois celui-ci fonctionnel.

La particularité de ce site est de ne pas posséder de catalogue traditionnel, mais d’un unique tunnel qui permet de filtrer les prestations de réparation en fonction du matériel que le client désire retourner. Un routeur personnalisé a dû être conçu pour représenter « l’entonnoir » par lequel le client passe pour affiner sa sélection des réparations.

Par exemple, la page https://site.fr/smartphone/apple liste tous les téléphones Apple réparables, et https://site.fr/smartphone/apple/iphone11 toutes les pièces précises du téléphone, comme l'écran, la batterie, etc. Une fois la sélection des pièces effectuées, le client était redirigé dans le tunnel traditionnel de Magento.

Ce client a fait appel à mes services pour continuer à maintenir un site Magento 1 en production pendant que son équipe de développeurs se concentrait sur une refonte en Magento 2.

Dans ce cadre, j'ai notamment :

• Migré le site sous OpenMage (un clone de Magento 1 créé par la communauté maintenant qu’Adobe ne supporte plus officiellement le projet) de façon à pouvoir bénéficier de PHP 7.4.
• Édité certains end-points de l’API Rest de Magento pour que la plateforme reste compatible avec les évolutions de leur ERP.
• Édité les factures PDF pour y ajouter des champs supplémentaires.

La direction informatique de l'un de mes clients désirait une petite formation sur Magento 2 de façon à comprendre les mécanismes de base du CMS et à quel point ils diffèrent avec ce qu’ils connaissent déjà : Magento 1.

Dans ce cadre, j’ai réalisé un PDF définissant certains exercices et un dépôt Git contenant les corrections. Nous avons ensuite travaillé sur les points au travers d’une vidéoconférence avec partage d’écran.

Cette formation couvrait notamment les aspects suivants :

• installation du CMS ;
• création d’un thème personnalisé ;
• modification du layout ;
• modification des JavaScripts déjà existants ;
• modification et compilation du CSS ;
• création d’un module personnalisé ;
• utilisation d’observers, de l’injection de dépendances, du système de notifications, de la traduction (y compris en JavaScript) ;
• création de nouveaux modèles, ressources modèles, repositories, factories et ajout de nouvelles tables MySQL, avec gestion des contraintes ;
• création de commandes CLI et de tâches CRON ;
• utilisation des logs, y compris dans un fichier personnalisé ;
• ajout d’attributs sur les clients et les produits ;
• modification, création et envois d’emails ;
• gestion des champs de configuration ;
• création de contrôleurs retournant du HTML, du JSON et des redirections ;
• création d’un CRUD sur le back-office ;
• gestion des actions de masses, des actions de lignes, des filtres et des marque-pages sur les grilles du back-office ;
• création et affichage d’un script en Knockout.js, avec son template.

J'avais réalisé à des fins éducatives, la conception d'un moteur de blog avec l'objectif de remplacer certains sites déjà existant actuellement sous Wordpress. Malheureusement, ce projet est actuellement en stand-by, mais il m'aura quand-même permis de prendre en mains une bonne partie des concepts de Symfony, comme :

• la manipulation de la base de données à l'aide de Doctrine, des migrations et de ses modèles, avec l'implémentation de validateurs de données personnalisé basé sur le composant Validator ;
• la création de routes et de contrôleurs « traditionnels » (en utilisant le système des annotations), et plus complexes (fondé sur la composition de l'URL) ;
• la gestion des comptes utilisateurs avec ACL ;
• la gestion des images en base de données ;
• la création de formulaires avec les composants Symfony, et de data types personnalisés ;
• la gestion des traductions ;
• l'utilisation avancée du cache, des caches de Doctrine et utilisant Redis ;
• l'emploi de Twig pour le templating, en créant aussi des méthodes personnalisées ;
• la création d'un éditeur WYSIWYG simpliste en Vue.js ;
• la réalisation de tests d'acceptations complets à l'aide de Selenium et du composant Panther. Ces tests s'exécutent dans différentes résolutions d'écrans de façon à valider la présence des éléments du DOM sur chaque type de périphériques.

L'un de mes confrères avait pour mission de migrer un site déjà existant sur Magento 1, vers une nouvelle plateforme en Magento 2. Il a fait appel à mon aide sur certains points, dont notamment :

• L'installation du projet sur un dépôt Git, d'un bug tracker, d'un wiki, permettant ainsi d'établir un workflow de travail propice au développement à plusieurs et à une gestion de projet optimale ;
• La conception d'un environnement de développement à l'aide de Docker Compose permettant à mes collègues de déployer rapidement le site sur leurs machines. Celui-ci est composé du serveur PHP, MySQL et ElasticSearch nécessaires à Magento, et aussi d’un proxy gérant le HTTPS en secure context et d’un capteur d’emails. Le conteneur PHP est également configuré pour fonctionner avec Xdebug.
• J'ai aussi implémenté un système permettant d'indiquer des informations personnalisées à la place du stock Magento sur les produits simples et configurables. J’avais donc à concevoir des scripts JavaScript et Knockout.js de façon à mettre à jour les valeurs inscrites en fonction de la déclinaison actuellement sélectionnée. Il me fallait également réaliser un end-point au niveau de l’API pour récupérer lors d’un unique appel, les stocks de toutes les déclinaisons possibles pour le produit en cours d’affichage.

Ce client avait décidé d’abandonner Prestashop au profit de Magento 2, notamment pour une question de rafraîchissement esthétique. Dans ce cadre, j’étais missionné pour porter les fonctionnalités back-end d’une plateforme à l’autre.

Ma première tâche était d’élaborer les environnements Docker que les autres développeurs et moi-même emploierons pour travailler en local sur le projet. Pour cela, j’ai utilisé Docker Compose. L’infrastructure construite est composée d'un proxy nginx configuré avec HTTPS, un conteneur PHP, MySQL, Elasticsearch et les emails sont redirigés vers un intercepteur plutôt que d'être réellement envoyés aux destinataires. J’ai par la suite remanié ce projet pour qu’il soit compatible pour tout type de sites web en PHP. Les sources de mes différents conteneurs Docker peuvent être trouvées sur mon profil GitHub.

Mon travail consistait ensuite dans l’implémentation de briques de communication entre l'ERP et Magento 2 de façon à pouvoir synchroniser les achats et les stocks entre les deux plateformes. Pour ce faire, j’ai dû concevoir de nouvelles commandes CLI, des tâches CRON, ainsi qu’un modèle qui se greffe sur les commandes Magento permettant de savoir lesquelles ont déjà été exportées ou non. J’ai isolé toute la partie générique dans un module externe disponible à tous via Composer. Son code source est également présent sur mon profil GitHub sur cette page.

J’ai créé une méthode de livraison spécifique au besoin du client, qui était de pouvoir récupérer sa commande directement dans les magasins physiques éligibles. Pour cela, j’ai utilisé Knockout.js et réaliser un CRUD dans le back-office de façon à pouvoir renseigner la liste des localités éligibles à cette livraison.

J’ai également réimplémenté la façon dont les factures s’affichent pour les dessiner aux couleurs de la marque. J’ai donc effectué du travail de front-end, mais qui a vocation à être imprimé en PDF, ou sur une feuille de papier.

J’ai aussi assisté les développeurs front dans la transformation des modèles de façon à ce qu’ils aient accès aux données nécessaires. J’ai, par exemple, ajouté une multitude d’attributs EAV sur les produits ou clients ; travaillé sur du JavaScript, comme pour la modification du mini-cart ou le rendu des articles sur le checkout ; ou encore, installer différents modules externes.

Finalement, j’ai également créé d’autres modules pour le compte de ce projet, mais dont les aspects techniques n’ont rien de particulier, comme un système de sélection de vue Magento en fonction du langage et du pays de livraison souhaité par l’internaute, ou un autre envoyant des emails de rapports aux administrateurs.

J’ai expérimenté l'usage de la marketplace Magento en y en mettant à la vente l’un de mes modules. L’objectif principal de cet essai était de pouvoir appréhender toutes les contraintes légales et techniques imposées par Adobe pour l’utilisation de celle-ci pour le jour où j’aurai quelque chose de plus intéressant à proposer.

Ce module m’a également permis de prendre en main le framework MFTF et Selenium pour réaliser des tests d’acceptations. J’ai aussi monté une plateforme locale permettant d’exécuter ces tests au travers d’un projet Docker dont les sources du conteneur sont disponibles sur Github.

Le CESI de Lingolsheim m'avait missionné pour dispenser une formation de trois journées d'introduction à Linux pour les classes de gestionnaire en maintenance et support informatique (GMSI). J'ai donné ces cours aux élèves de première année en 2018, 2019 et 2020. Chacune de ces sessions s'effectuait en présentiel, face à une vingtaine de participants.

J'avais réalisé un support visuel et une série d'exercices qui cadraient l'évolution du cours. L'idée était de laisser quelques minutes (entre 15 et 60) aux élèves pour travailler sur un chapitre, puis de le corriger à l'aide du support visuel et de mes explications.

Les notions abordées étaient les suivantes :

• explication du rôle du noyau au sein d'un système d'exploitation ;
• UNIX et sa philosophie ;
• Linux et sa philosophie ;
• le concept de distribution Linux ;
• l'installation de Xubuntu ;
• les concepts derrières les applications CLI et GUI ;
• GNU et sa philosophie ;
• l'utilisation des shells, notamment ceux en ligne de commande ;
• la réalisation de scripts en Bash ;
• l'administration du poste (gestion des utilisateurs, des droits, des fichiers, des processus ;
• la gestion des fichiers (partitions, systèmes de fichiers, RAID, LVM, Btrfs) ;
• une sensibilisation aux backups ;

Une petite ESN strasbourgeoise m'avait mandaté pour m'occuper des sites en Magento 1 sous son contrôle. Dans ce cadre, j'ai notamment :

• Incorporé et adapté une charte graphique. Cette expérience aura été l’une de mes premières en intégration CSS en autonomie, en prenant soin au fait que le résultat soit responsive et qu'il respecte des optimisations SEO comme l’utilisation des métadonnées schema.org.
• J’ai également formé deux apprentis à Magento 1 de façon à ce qu’ils puissent commencer leurs carrières de développeur PHP dans de bonnes conditions et en comprenant la façon dont le CMS fonctionne.
• J'ai aussi interfacé les différents modèles de Magento et l’API de Navision, qui est en SOAP. Un socle générique a été créé de façon à envoyer des requêtes à chaque sauvegarde d’objets sur Magento, si des données pertinentes ont été altérées dans celui-ci, et à récupérer de potentielles modifications de Navision à chaque chargement. Un cache spécifique a été conçu pour que les performances du système restent acceptables.
• J'ai installé une multitude de mises à jour et de correctifs de sécurités.

Ce client est une entreprise qui travaille de façon étroite avec ses différents revendeurs à travers le monde. Dans ce cadre, elle avait besoin d’une plateforme centralisant les demandes en fournitures de chacun d’eux.

• Cette plateforme n’est pas ouverte au public, l’une des premières actions à réaliser était donc de masquer le catalogue aux anonymes. Pour cela, un système de liste blanche a été implémenté définissant les pages lisibles par les visiteurs simples.
• La création de comptes est libre, mais doit être approuvée. Un mécanisme a été conçu pour que l’utilisateur ait son accès restreint jusqu’à ce qu'un administrateur du site donne son aval à l'aide d'un nouvel attribut gérable depuis le back-office.
• Un processus rendant possible l’import des catégories dans Magento 2 a également été construit. Celui-ci était nécessaire dans la mesure où tout le catalogue est récupéré depuis l’ERP, y compris les descriptions et images des catégories.
• Des tâches CRON permettant d’automatiser les imports ont été rajoutées. Cette fonctionnalité étant uniquement existante sur la version payante de Magento 2 et non sur l'open source qui est employée ici.
• L’interfaçage entre les systèmes d’imports clients et produits de Magento et les fichiers générés par l’ERP dans un format propriétaire a dû être implémenté.
• Le rendu de la page panier a également été revu de façon à pouvoir afficher les articles dans celui-ci de façon beaucoup plus condensée que ce que le thème par défaut propose. Cette refonte m’a permis de prendre en main SCSS et les outils nécessaires pour recompiler les CSS dans Magento 2.

Je devais gérer la maintenance d'un site e-commerce sur Magento 1 le temps qu'une autre équipe implémente une nouvelle version de celui-ci sur une plateforme plus récente. Il souffrait de sévères problèmes de performances, tant au niveau du back que du front-end. Je me suis efforcé à l’optimiser sur tous les aspects : j’employais le profiler d'Xdebug pour constater certains points faibles dans certains algorithmes PHP ou requêtes SQL, que je réécrivais au mieux ; j’utilisais également Lighthouse pour benchmarker le front et appliquer un maximum de conseils donnés par Google, comme privilégier les images au format WebM, ou l'activation de la compression et minification de fichiers JavaScript. Finalement, le temps de chargement des pages a été divisé par prêt de 4 en moyenne.

Ce client m’avait aussi missionné pour réaliser un POC d’intégration d’Apple Pay, Google Pay et plus globalement de la Payment Request API sur le site. Ce fut une expérience riche en enseignements sur la façon dont fonctionne cette technologie sur les navigateurs web modernes.

Réalisé en Perl 5, ce logiciel est une alternative à Docker pour une utilisation en production sur de petites infrastructures restant néanmoins complexes et sur lesquelles l’administrateur aimerait conserver une emprise complète, et ne pas l’encapsuler dans des images plus ou moins opaques. Ce projet, dont le code source est disponible sur GitHub m'aura permis d'approfondir mes connaissances sur Linux (et notamment la façon dont fonctionnent les namespaces) et en DevOps.

Je m'étais aussi attelé à écrire une documentation la plus exhaustive possible. Elle est lisible à cette adresse et elle aura également été riche en apprentissages, surtout sur LaTeX et en rédaction technique.