---
title: "Back-Office Fournisseur - Portail B2B en libre-service"
description: "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."
locale: "fr"
canonical: "https://portfolio.josedacosta.info/fr/realisations/supplier-backoffice-european-sourcing"
source: "https://portfolio.josedacosta.info/fr/realisations/supplier-backoffice-european-sourcing.md"
html_source: "https://portfolio.josedacosta.info/fr/realisations/supplier-backoffice-european-sourcing"
author: "José DA COSTA"
date: "2013"
type: "achievement"
slug: "supplier-backoffice-european-sourcing"
tags: ["AngularJS 1.2", "CoffeeScript", "Restangular", "Express.js", "Grunt", "SCSS", "Bootstrap 3", "Flot.js", "WSSE", "Bing Translate", "gettext", "Node.js", "Bower"]
generated_at: "2026-04-23T15:45:22.469Z"
---

# 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.

**Date:** 2014 - 2016  
**Duration:** ~2 ans  
**Role:** Senior Software Engineer (99,1% du code applicatif)  
**Technologies:** AngularJS 1.2, CoffeeScript, Restangular, Express.js, Grunt, SCSS, Bootstrap 3, Flot.js, WSSE, Bing Translate, gettext, Node.js, Bower

### Key Metrics

- Lignes de code: **-** - CoffeeScript, SCSS, HTML
- Fichiers source: **-** - Fichiers applicatifs (hors dépendances)
- Controllers AngularJS: **-** - Controllers, directives, services, filtres
- Langues supportées: **-** - FR, EN, DE, ES, IT
- Endpoints API: **-**
- Directives custom: **-**

## Présentation

_Définition et périmètre du projet_

### Domain

Objets publicitaires et promotionnels B2B - sourcing, distribution, place de marche européenne

### Target Users

Responsables commerciaux, responsables marketing et chefs de produits chez les fournisseurs d'objets promotionnels en Europe (France, Royaume-Uni, Allemagne, Espagne, Italie)

**Content:** **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.

**Domain:** Domaine

**Target Users:** Utilisateurs cibles

**Functional Scope:** Périmètre fonctionnel

**Scope Auth:** Authentification multi-méthode (WSSE, token, SSO inter-sites)

**Scope Dashboard:** Tableau de bord interactif avec compteurs de visites et graphiques de tendance sur 6 mois

**Scope Contract:** Gestion du contrat commercial (options ES+, dates de parution)

**Scope Profile:** Gestion complète du profil public (7 sections)

**Scope Products:** Gestion des produits ES+ avec declinaisons, attributs et prix degressifs

**Scope News:** Gestion d'actualites multilingues avec docs

**Scope Stats:** Statistiques avancees de 3 sources avec filtres, graphiques et export CSV

**Scope I18n:** i18n complète (5 langues) avec intégration automatique Bing Translate

## Objectifs, contexte, enjeux et risques

_Vision stratégique et contraintes opérationnelles_

### Context

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.

- 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

**Objectives:** Objectifs

**Context:** Contexte

**Stakes:** Enjeux

**Stakes Revenue:** 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

**Stakes Satisfaction:** Satisfaction fournisseurs - la qualité de cet outil impacte directement la relation commerciale avec les clients B2B payants

**Stakes Europe:** Scalabilite européenne - le support de 5 langues avec formats de dates adaptes témoigne d'une ambition de marche continental

**Stakes Network:** Couverture réseau - 60+ sites revendeurs alimentes par le contenu fournisseur géré via ce portail

**Risks:** Risques

**Risk1 Title:** Sécurité - WSSE + MD5

**Risk1 Desc:** 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

**Risk2 Title:** Dette technique - AngularJS 1.2

**Risk2 Desc:** 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

**Risk3 Title:** Dépendance API

**Risk3 Desc:** 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

**Risk4 Title:** Zero couverture de tests

**Risk4 Desc:** 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_

- Phase 1 - Architecture et développement initial
- Phase 2 - Enrichissement fonctionnel
- Phase 3 - Production et maintenance

**Phase1 Period:** ~2013-2014

**Phase2 Period:** 2014-2016

**Phase3 Period:** 2016-2019

## Acteurs et interactions

_Composition de l'équipe et dynamiques de collaboration_

### Team

L'analyse de l'historique git (28 commits au total, toutes branches confondues) révèle deux contributeurs :

**José 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 José 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.

### Methodology

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.

**Team:** Équipe de développement

**Stakeholders:** Parties prenantes

**Stakeholder Api:** Équipe API (Symfony/Propel) - back-end fournissant toutes les données métier

**Stakeholder Bing:** API Bing Translate - service de traduction automatique externe

**Stakeholder Suppliers:** Fournisseurs (ex : Plastoria S.A.) - utilisateurs finaux gérant leur presence B2B

**Stakeholder Resellers:** Revendeurs - bénéficiaires indirects (le contenu des fournisseurs est affiche sur leurs sites)

**Methodology:** Méthodologie de travail

## Résultats

_Impact mesurable pour la croissance personnelle et la valeur business_

### For Me

- 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

### For Company

- 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

**For Me:** Pour moi

**For Company:** Pour l'entreprise

## Les lendemains du projet

_Cycle de vie au-dela de la livraison initiale_

### Immediate

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.

### Medium Term

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.

### Current State

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.

**Immediate:** Impact immédiat

**Medium Term:** Évolution a moyen terme

**Current State:** État actuel

## Regard critique

_Rétrospective honnete et enseignements durables_

### Strength

- 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

### Improvement

- 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

### Would Change

- 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

### Lesson

- 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

**Strengths:** Points forts

**Improvements:** Points d'amélioration

**Would Change:** Ce que je ferais différemment

**Lessons:** Enseignements durables