Pour mon projet de portfolio, la première étape a été de choisir la technologie adéquate. Connaissant déjà Vue.js, j'ai décidé de me tourner vers React pour m'entraîner sur une technologie très populaire, tout en gardant à l'esprit l'importance de créer quelque chose de performant.

C'est alors que j'ai découvert Gatsby, un framework basé sur React. Le choix de Gatsby s'est imposé grâce à sa capacité à générer des sites extrêmement rapides via la génération de pages statiques et son intégration fluide avec GraphQL.

Le projet se décompose en deux parties principales. Tout d'abord, un projet Symfony dédié au front-end avec Twig où l'utilisateur soumet l'URL qu'il souhaite convertir. Ensuite, cette URL est transmise à un second projet Symfony, qui gère le traitement côté serveur. Ce second service envoie l'URL à Guttemberg pour la convertir en PDF, puis renvoie le fichier PDF généré au front-end pour que l'utilisateur puisse le télécharger.

L'un des objectifs clés de ce projet était de créer un véritable produit vendable sous forme d'abonnement, avec différents plans tarifaires. Chaque utilisateur se voit attribuer un nombre limité de conversions en fonction du plan choisi. La gestion et la sécurisation de ces fonctionnalités sont assurées par une base de données gérant la création de comptes, les différents plans et leurs relations.

Ce projet m'a permis de développer mes compétences en "Développer à l’aide d’un framework de développement côté serveur", car j'ai pu mettre en pratique les principes de modularité et de découplage que permet une architecture basée sur des microservices. Grâce à Symfony, j'ai appris à structurer des services autonomes qui peuvent être déployés, maintenus et mis à jour de manière indépendante, tout en interagissant de manière fluide avec d'autres services. Cette approche offre une flexibilité et une scalabilité importantes, permettant d'améliorer ou de remplacer des modules spécifiques sans avoir à toucher l'ensemble du système.

Dans le cadre de notre projet à l'IUT, nous avons travaillé en autonomie sur un Proof of Concept (POC) pour une entreprise, avec pour objectif de créer un visualisateur de produits en 3D destiné à des sites E-commerce. Ce projet, réalisé en collaboration avec un partenaire, a été particulièrement enrichissant car il nous a permis de découvrir et de manipuler des technologies nouvelles, comme WordPress, WooCommerce, Three.js, et React.js, tout en renforçant nos compétences en travail de groupe et en communication.

Le Plugin WordPress

Pour ce projet, nous avons conçu et développé un plugin WordPress personnalisé qui ajoute un champ d'entrée dans le back-office de WooCommerce pour chaque produit. Ce champ permet d'insérer un lien vers un fichier GLB hébergé sur un serveur. Lorsqu'il est renseigné, le plugin remplace la visualisation traditionnelle du produit par un canvas affichant un visualisateur 3D, développé avec Three.js et React.js. Cette réalisation a mis en pratique notre compétence à concevoir et développer des composants logiciels, tels que des plugins et des extensions, en intégrant des fonctionnalités avancées dans une plateforme existante.

Le Serveur Three.js

Nous avons mis en place un système de communication entre WordPress et le canvas distant grâce à la méthode postMessage, permettant d'envoyer le lien GLB et de gérer les variations de produits. Ce mécanisme assure une mise à jour dynamique du modèle 3D en fonction des sélections faites par l'utilisateur sur le site E-commerce.

Le visualisateur 3D est hébergé sur un serveur externe, géré via React.js, et est intégré dans le plugin WordPress par le biais d'un iframe. Three.js est utilisé pour afficher le modèle en 3D et adapter les matériaux en temps réel en fonction des variations choisies, ce qui permet de créer une expérience utilisateur interactive et immersive, essentielle dans le domaine du E-commerce.

Ce projet a été l'occasion de combiner la conception de composants logiciels et le développement de dispositifs interactifs avancés, tout en travaillant sur une architecture modulaire et intégrée.

Maintien et Sécurisation d’un Environnement Numérique

Dans le cadre de mes projets, j'ai participé à la maintenance des environnements en documentant les bugs via des tickets et en mettant à jour les README pour refléter les nouvelles fonctionnalités et modifications. J'ai également mis en place des linters front-end pour garantir la qualité du code et géré les mises à jour des outils utilisés sur plusieurs projets, en testant chaque version pour éviter les régressions.

Concernant la sécurité au sein de l'entreprise, j'ai dû me familiariser avec les pratiques de sécurité web, notamment les accès GitLab. Chaque projet était protégé par des clés d'accès, nécessitant une demande d'autorisation pour chaque projet, ce qui pouvait rendre l'accès rapide et l'assistance difficiles. Pour résoudre ce problème, le pôle SI a développé un outil interne permettant d'obtenir des accès temporaires, facilitant ces processus tout en garantissant la sécurité.

Mise en Place d'une Chaîne d'Intégration Continue

Pour me former à l'intégration continue (CI) et au déploiement continu (CD) sur GitLab, j'ai réalisé un projet personnel avec Vue.js pour créer un package ES6. J'ai mis en place une CI/CD dans GitLab qui automatisait des actions spécifiques lors des merges, incluant le déploiement de mon package sur un dépôt GitLab, accessible au sein du groupe créé.

En parallèle, j'ai développé un autre projet Vue.js pour récupérer et installer le package. J'ai mis en place des tests d'installation du package en utilisant les runners GitLab, qui exécutent les jobs des pipelines. Ces pipelines automatisent le test et le déploiement, garantissant que chaque nouvelle version du package est correctement intégrée. Enfin, le projet final a été publié automatiquement sur GitLab avec un artifact accessible en front, validant ainsi le processus CI/CD mis en place.