Back-Office Fournisseur - Portail B2B en libre-service
SPA multilingue permettant aux fournisseurs européens d'objets publicitaires de gérer l'ensemble de leur presence sur l'écosystème European Sourcing - tableau de bord, profil, produits, statistiques et campagnes commerciales dans 5 langues.
Lignes de code
18,711
CoffeeScript, SCSS, HTML
Fichiers source
185
Fichiers applicatifs (hors dépendances)
Controllers AngularJS
18
Controllers, directives, services, filtres
Langues supportées
5
FR, EN, DE, ES, IT
Endpoints API
~35
Directives custom
14
Présentation
Définition et périmètre du projet
supplierbo.europeansourcing.com (Supplier Back-Office) est une application monopage (SPA) servant de portail fournisseur en libre-service pour la plateforme European Sourcing. Elle offre un espace prive et multilingue ou les fournisseurs d'objets publicitaires et promotionnels peuvent gérer l'intégralité de leur presence sur tous les sites du groupe European Sourcing (europeansourcing.com, tendanceobjet.com, etc.).
L'application fait partie d'un écosystème plus large de 15+ applications interconnectées developpees par Medialeads, l'entreprise technologique derriere European Sourcing. Le marche de l'objet publicitaire est un secteur B2B spécialisé ou les fournisseurs proposent des articles personnalisables (stylos, sacs, textiles, gadgets) avec différentes options de marquage (serigraphie, gravure, broderie) aux revendeurs (agences de communication par l'objet, distributeurs).
Avant ce portail, les fournisseurs devaient compter sur des interventions manuelles de l'équipe European Sourcing pour mettre a jour leurs profils, produits et contenus. Le Supplier BO leur a donne une autonomie totale sur leur presence commerciale, impactant directement leur visibilité et leurs performances de vente sur la plateforme.
Objets publicitaires et promotionnels B2B - sourcing, distribution, place de marche européenne
Responsables commerciaux, responsables marketing et chefs de produits chez les fournisseurs d'objets promotionnels en Europe (France, Royaume-Uni, Allemagne, Espagne, Italie)
| Category | Technology | Role |
|---|---|---|
| Front-end Language | CoffeeScript | Primary front-end language, compiled to JavaScript |
| Framework | AngularJS ~1.2.0 | SPA framework (Single Page Application) |
| HTTP Client | Restangular ~1.4.0 | REST API communication |
| Server | Express.js ~3.4.7 | Static file server (production) |
| Build Tool | Grunt ~0.4.4 | Compilation, minification, watch |
| CSS | SCSS (Sass) + Compass | CSS preprocessor |
| CSS Framework | Bootstrap 3 (Sass) | Responsive CSS framework |
| Charts | Flot.js ~0.8.2 | Interactive statistics charts |
| Auth | WSSE (opensoft-wsse) | API request security |
| i18n | gettext (PHP) + JSON | 5-language translation system |
| Translation | Bing Translate API | Automatic content translation |
| Icons | Font Awesome ~4.0.3 | Icon library |
| Dates | Moment.js ~2.8.1 | Date manipulation and formatting |
| Upload | angular-upload ~1.0.10 | File and image uploads |
Objectifs, contexte, enjeux et risques
Vision stratégique et contraintes opérationnelles
- Donner aux fournisseurs une autonomie totale pour gérer 100% de leur profil, produits, actualites et statistiques sans intervention de l'équipe European Sourcing
- Proposer une interface multilingue complète en 5 langues européennes (FR, EN, DE, ES, IT) avec traduction automatique via Bing Translate
- Fournir des analyses exploitables donnant aux fournisseurs une visibilité sur les statistiques de consultation (visites, clics, tendances) sur plusieurs plateformes
- Gerer les campagnes commerciales incluant les produits promotionnels ES+, publicites et mises en avant
Le Supplier BO s'intégré dans un écosystème existant complexe : l'API REST centrale (api.europeansourcing.com construite avec Symfony/Propel), le site marketplace public, l'extranet v2, le moteur de recherche, la plateforme de traduction, les services de flux, les outils d'export et une application mobile.
Le projet est hébergé sous l'organisation GitHub medialeads (l'entreprise technologique derriere European Sourcing). L'infrastructure tourne sur des serveurs dédiés OVH (Kimsufi) avec l'application déployée sur /var/www/es_suppliers/. Le front-end est entièrement découplé du back-end, communiquant exclusivement via des appels REST avec authentification WSSE.
- Impact direct sur le chiffre d'affaires - les options commerciales (ES+, Idee de la Semaine, Emailing, Mot Cle Leader) sont des offres payantes. Le Supplier BO est l'outil par lequel les fournisseurs activent et gerent leur investissement commercial
- Satisfaction fournisseurs - la qualité de cet outil impacte directement la relation commerciale avec les clients B2B payants
- Scalabilite européenne - le support de 5 langues avec formats de dates adaptes témoigne d'une ambition de marche continental
- Couverture réseau - 60+ sites revendeurs alimentes par le contenu fournisseur géré via ce portail
Sécurité - WSSE + MD5
Le hachage MD5 des mots de passe cote client est cryptographiquement faible. L'authentification WSSE, bien que fonctionnelle, ne repond pas aux standards de sécurité modernes comme JWT ou OAuth2
Dette technique - AngularJS 1.2
AngularJS 1.2 (~2013) a atteint sa fin de vie en 2021. Toutes les dépendances (Bower, Express 3.x, jQuery 1.11) datent de 2013-2014, créant un risque de maintenance
Dépendance API
Toute la logique métier reside dans l'API centrale. Le Supplier BO est entièrement dépendant de la disponibilité et du bon fonctionnement de api.europeansourcing.com
Zero couverture de tests
Aucun fichier de test identifié (0 spec/test). Pour une application de cette taille avec de la logique métier cote client (validation, calcul de prix, gestion d'attributs), cela représente un risque de régression significatif
Phases de réalisation
Actions concretes et contributions personnelles
- Conception et construction de l'architecture SPA complète from scratch avec AngularJS 1.2 et CoffeeScript
- Création de 18 controllers organises par domaine fonctionnel (Contact, Profil, Produit, Statistique, Actualite, Contrat)
- Construction de 14 directives custom réutilisables formant un mini-framework UI (minigeekDatatable, minigeekFlotChart, minigeekI18n, minigeekForm, minigeekDownload)
- Implémentation de l'authentification WSSE avec gestion multi-fournisseurs par contact et SSO inter-sites via chiffrement RC4
- Ingenierie du système i18n hybride : labels JSON générés par PHP/gettext pour l'UI + champs API multilingues indexés par id_language
- Développement du theme SCSS complet avec 97 fichiers de styles bases sur Bootstrap 3
- Construction du module statistiques avec 3 sources de données (European Sourcing, TendanceObjet, Produits ES+) avec graphiques Flot.js filtrables
- Implémentation du module de gestion des produits ES+ : CRUD avec docs, prix degressifs, attributs dynamiques, declinaisons, copie en masse, videos YouTube
- Création des sections de gestion de publicites et médias (bannieres, photos, intégration YouTube/Dailymotion/Vimeo)
- Migration de l'intégralité du code source de SVN vers Git (18 janvier 2016)
- Amelioration de la gestion des plages de dates dans les statistiques (dates min/max) et intégration de la nouvelle interface de traduction
- Maintien d'un déploiement de production stable via serveurs dédiés OVH avec Express.js servant les fichiers statiques
- Application activement utilisee par les fournisseurs européens jusqu'a au moins aout 2019 (documenté par captures d'écran)
- Workflow de déploiement par branches : branches de développement mergees dans master, déploiement via branche prod
Acteurs et interactions
Composition de l'équipe et dynamiques de collaboration
L'analyse de l'historique git (28 commits au total, toutes branches confondues) révèle deux contributeurs :
Jose DA COSTA (branches jose et master) : auteur de 99,1% du code (19 007 lignes ajoutees sur 19 172 au total). Il a réalisé l'import initial depuis SVN le 18 janvier 2016, incluant l'intégralité du code applicatif. Cela confirme que l'ensemble de l'application (architecture, modules, directives custom, i18n, styles) a été développée par Jose avant la migration vers Git. Ses commits ulterieurs portent sur des améliorations du module statistiques.
Thomas C. (branche fancyweb) : 21 commits représentant 0,9% du code (165 lignes ajoutees). Ses contributions couvrent des evolutions fonctionnelles et corrections de bugs après le déploiement initial : modifications de l'interface de traduction, correction de destinataire mail, fonctionnalités de sélection de produits et corrections de gestion des actualites.
- Équipe API (Symfony/Propel) - back-end fournissant toutes les données métier
- API Bing Translate - service de traduction automatique externe
- Fournisseurs (ex : Plastoria S.A.) - utilisateurs finaux gérant leur presence B2B
- Revendeurs - bénéficiaires indirects (le contenu des fournisseurs est affiche sur leurs sites)
Le contrôle de version est passe de SVN (~2013) a Git avec GitHub en janvier 2016. Le workflow de déploiement utilisait une progression par branches : branches de développement mergees dans master, puis déploiement via la branche prod. L'équipe Medialeads utilisait un DokuWiki dédié pour la documentation technique partagee.
Résultats
Impact mesurable pour la croissance personnelle et la valeur business
- Maîtrise des patterns d'architecture SPA avec AngularJS avant l'adoption généralisée des frameworks bases sur les composants
- Construction d'une bibliotheque de directives réutilisables (minigeek*) servant de framework UI personnel sur plusieurs projets
- Acquisition d'une experience approfondie en modelisation de domaine B2B complexe : catalogues produits multilingues, prix degressifs, gestion de declinaisons
- Développement de compétences en patterns d'intégration API REST avec sécurité WSSE, gérant 35+ endpoints
- Approfondissement de l'expertise en internationalisation avec un système hybride couvrant 5 langues européennes
- Autonomie fournisseur a 100% - libre-service complet pour la gestion du profil, produits, actualites et statistiques
- 5 marches européens couverts - i18n complète avec support FR, EN, DE, ES, IT et formats de dates localises
- 60+ sites revendeurs alimentes par le contenu fournisseur géré via ce portail
- Outil de revenus direct - options commerciales (ES+, Idee de la Semaine, Emailing, Mot Cle Leader) gérées via le BO
- ~5-6 ans d'utilisation en production stable (~2014 a 2019) prouvant la durabilité des choix architecturaux
- 9 modules fonctionnels livrés : authentification, tableau de bord, contrat, profil (7 sous-sections), produits ES+, actualites, statistiques (3 sources), i18n, gestion des médias
Les lendemains du projet
Cycle de vie au-dela de la livraison initiale
Après le déploiement, le Supplier BO est devenu l'outil opérationnel quotidien de tous les fournisseurs European Sourcing. Les captures d'écran d'aout 2019 montrent une application mature et pleinement fonctionnelle avec des contrats commerciaux actifs et des données fournisseurs reelles (options de contrat, dates de parution, listes de produits). L'outil a été activement utilise pendant au moins 5 ans après le déploiement initial.
L'application a continue de recevoir des améliorations jusqu'en 2016 (fonctionnalités de sélection de produits, mises a jour de l'interface de traduction, améliorations de la gestion des actualites) avant d'entrer en phase de maintenance stable. Le déploiement par branches (master/prod) permettait des releases controlees.
L'application est archivee dans la sauvegarde "EUROPEAN SOURCING 2019". Le code source complet, les dumps de base de données et 25+ captures d'écran détaillées sont conserves sur le NAS. Le code démontré que si la technologie front-end (AngularJS 1.2) est devenue obsolete, l'architecture API REST decouplée est restee réutilisable - prouvant que la séparation front/back était le bon choix architectural.
Regard critique
Rétrospective honnete et enseignements durables
- Architecture SPA decouplée - séparation nette entre front-end et API REST permettant une évolution independante. Le front-end ne fait aucune hypothese sur la technologie du back-end
- Framework de directives réutilisables - les directives minigeek* (DataTable, FlotChart, i18n, Form, Download) forment un mini-framework UI coherent qui a considerablement accéléré le développement
- Internationalisation soignee - 5 langues avec traduction automatique, formats de dates adaptes par locale et detection automatique de la langue du navigateur témoignent d'un soin reel pour l'experience utilisateur européenne
- Interface professionnelle - les captures d'écran de 2019 révèlent une interface propre, moderne (pour son époque), avec une navigation claire et un design coherent sur tous les modules
- Gestion complexe des produits - le module ES+ géré des produits avec declinaisons, attributs dynamiques, prix degressifs et docs - une complexité fonctionnelle significative bien maîtrisée cote front-end
- Zero couverture de tests - aucun fichier spec/test identifié. Pour une application de cette taille avec de la logique métier cote client (validation, calculs de prix, gestion d'attributs), c'est un risque significatif
- Hachage MD5 des mots de passe - cryptographiquement faible et inapproprie pour le hachage de mots de passe. bcrypt ou argon2 auraient été appropriate
- Versions de dépendances obsoletes - AngularJS 1.2 (2013), Express 3.x (2013), jQuery 1.11 (2014), Bower (deprecie depuis 2017). L'ensemble de la stack était déjà obsolete lors des dernières captures d'écran
- Duplication du code de login - le pattern d'authentification pour la sélection multi-fournisseurs est repete a l'identique dans LoginCtrl et RedirectCtrl au lieu d'etre extrait dans un service partage
- Manipulation directe du DOM - certaines directives utilisent la manipulation DOM via jQuery ($("body").append(...), $elem.find(...)) au lieu des mécanismes AngularJS, compliquant les tests et la maintenance
- Ajouter des tests unitaires (Karma/Jasmine) pour les controllers et des tests E2E (Protractor) pour les parcours utilisateurs critiques des le départ
- Planifier une migration vers Angular 2+ ou React/Vue.js autour de 2017-2018 pour prolonger la durée de vie de l'application
- Extraire la bibliotheque de directives minigeek* dans un package npm versionne partage entre les front-ends de l'écosystème European Sourcing
- Remplacer WSSE+MD5 par JWT ou OAuth2 avec hachage bcrypt cote serveur
- Implémenter un service d'authentification partage pour eliminer la duplication de logique de login entre controllers
- Le découplage front/back paie sur le long terme - même avec une stack front-end devenue obsolete, l'API REST reste réutilisable pour un nouveau front-end sans modification
- Les composants réutilisables sont un investissement - le framework minigeek* a probablement accéléré considerablement le développement de chaque section
- L'i18n doit etre pensee des le jour 1 - l'intégration native de 5 langues dans l'architecture (filtres, directives, service de localisation) rend l'i18n transparente pour le développeur
- La documentation et les tests sont des polices d'assurance - l'absence de tests et de documentation (README quasi vide) rend l'archeologie du projet considerablement plus difficile des années plus tard
Parcours associe
Experience professionnelle liee a cette realisation
Competences mobilisees
Competences techniques et humaines appliquees
Competences techniques
Competences humaines
Galerie d'images
Captures et visuels du projet