---
title: "Back-Office Fornecedor - Portal B2B de Autoatendimento"
description: "SPA multilingue permitindo aos fornecedores europeus de produtos promocionais gerenciar toda sua presenca no ecossistema European Sourcing - painel, perfil, produtos, estatisticas e campanhas comerciais em 5 idiomas."
locale: "pt"
canonical: "https://portfolio.josedacosta.info/pt/realizacoes/supplier-backoffice-european-sourcing"
source: "https://portfolio.josedacosta.info/pt/realizacoes/supplier-backoffice-european-sourcing.md"
html_source: "https://portfolio.josedacosta.info/pt/realizacoes/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:47:49.257Z"
---

# Back-Office Fornecedor - Portal B2B de Autoatendimento

SPA multilingue permitindo aos fornecedores europeus de produtos promocionais gerenciar toda sua presenca no ecossistema European Sourcing - painel, perfil, produtos, estatisticas e campanhas comerciais em 5 idiomas.

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

### Key Metrics

- Linhas de codigo: **-** - CoffeeScript, SCSS, HTML
- Arquivos fonte: **-** - Arquivos aplicativos (excl. dependencias)
- Controllers AngularJS: **-** - Controllers, diretivas, servicos, filtros
- Idiomas suportados: **-** - FR, EN, DE, ES, IT
- Endpoints API: **-**
- Diretivas custom: **-**

## Apresentacao

_Definicao e escopo do projeto_

### Domain

Produtos publicitarios e promocionais B2B - sourcing, distribuicao, marketplace europeu

### Target Users

Gerentes comerciais, gerentes de marketing e gerentes de produto em fornecedores de produtos promocionais na Europa (Franca, Reino Unido, Alemanha, Espanha, Italia)

**Content:** **supplierbo.europeansourcing.com** (Supplier Back-Office) e uma **aplicacao de pagina unica (SPA)** que serve como **portal de autoatendimento para fornecedores** da plataforma European Sourcing. Oferece um espaco privado e multilingue onde fornecedores de produtos publicitarios e promocionais podem gerenciar toda sua presenca em todos os sites do grupo European Sourcing (europeansourcing.com, tendanceobjet.com, etc.).

A aplicacao faz parte de um ecossistema mais amplo de **15+ aplicacoes interconectadas** desenvolvidas pela **Medialeads**, a empresa de tecnologia por tras do European Sourcing. O mercado de produtos promocionais e um setor B2B especializado onde fornecedores oferecem itens personalizaveis (canetas, bolsas, texteis, gadgets) com varias opcoes de marcacao (serigrafia, gravacao, bordado) para revendedores (agencias de comunicacao por objeto, distribuidores).

Antes deste portal, os fornecedores precisavam contar com intervencoes manuais da equipe European Sourcing para atualizar seus perfis, produtos e conteudos. O Supplier BO deu a eles **autonomia total** sobre sua presenca comercial, impactando diretamente sua visibilidade e desempenho de vendas na plataforma.

**Domain:** Dominio

**Target Users:** Usuarios-alvo

**Functional Scope:** Escopo funcional

**Scope Auth:** Autenticacao multi-metodo (WSSE, token, SSO entre sites)

**Scope Dashboard:** Painel interativo com contadores de visitas e graficos de tendencia de 6 meses

**Scope Contract:** Gestao de contrato comercial (opcoes ES+, datas de publicacao)

**Scope Profile:** Gestao completa do perfil publico (7 secoes)

**Scope Products:** Gestao de produtos ES+ com variantes, atributos e precos escalonados

**Scope News:** Gestao de noticias multilingues com imagens

**Scope Stats:** Estatisticas avancadas de 3 fontes com filtros, graficos e exportacao CSV

**Scope I18n:** i18n completa (5 idiomas) com integracao automatica Bing Translate

## Objetivos, contexto, desafios e riscos

_Visao estrategica e restricoes operacionais_

### Context

O Supplier BO esta integrado em um ecossistema existente complexo: a API REST central (`api.europeansourcing.com` construida com Symfony/Propel), o site marketplace publico, o extranet v2, o motor de busca, a plataforma de traducao, servicos de feed de dados, ferramentas de exportacao e uma aplicacao movel.

O projeto esta hospedado na organizacao GitHub `medialeads` (a empresa de tecnologia por tras do European Sourcing). A infraestrutura roda em servidores dedicados OVH (Kimsufi) com a aplicacao implantada em `/var/www/es_suppliers/`. O front-end e totalmente desacoplado do back-end, comunicando-se exclusivamente via chamadas REST com autenticacao WSSE.

- Dar aos fornecedores autonomia total para gerenciar 100% do perfil, produtos, noticias e estatisticas sem intervencao da equipe European Sourcing
- Entregar uma interface multilingue completa em 5 idiomas europeus (FR, EN, DE, ES, IT) com traducao automatica via Bing Translate
- Fornecer analises acionaveis dando aos fornecedores visibilidade sobre estatisticas de consulta (visitas, cliques, tendencias) em multiplas plataformas
- Gerenciar campanhas comerciais incluindo produtos promocionais ES+, publicidades e posicionamentos destacados

**Objectives:** Objetivos

**Context:** Contexto

**Stakes:** Desafios

**Stakes Revenue:** Impacto direto na receita - opcoes comerciais (ES+, Ideia da Semana, Emailing, Palavra-chave Lider) sao ofertas pagas. O Supplier BO e a ferramenta pela qual os fornecedores ativam e gerenciam seu investimento comercial

**Stakes Satisfaction:** Satisfacao dos fornecedores - a qualidade desta ferramenta impacta diretamente o relacionamento comercial com os clientes B2B pagantes

**Stakes Europe:** Escalabilidade europeia - suporte a 5 idiomas com formatos de data adaptados demonstra ambicao de mercado continental

**Stakes Network:** Alcance da rede - 60+ sites de revendedores alimentados pelo conteudo dos fornecedores gerenciado atraves deste portal

**Risks:** Riscos

**Risk1 Title:** Seguranca - WSSE + MD5

**Risk1 Desc:** O hash MD5 de senhas no lado do cliente e criptograficamente fraco. A autenticacao WSSE, embora funcional, nao atende aos padroes de seguranca modernos como JWT ou OAuth2

**Risk2 Title:** Divida tecnica - AngularJS 1.2

**Risk2 Desc:** AngularJS 1.2 (~2013) atingiu fim de vida em 2021. Todas as dependencias (Bower, Express 3.x, jQuery 1.11) datam de 2013-2014, criando risco de manutencao

**Risk3 Title:** Dependencia de API

**Risk3 Desc:** Toda a logica de negocios reside na API central. O Supplier BO e totalmente dependente da disponibilidade e funcionamento correto de api.europeansourcing.com

**Risk4 Title:** Zero cobertura de testes

**Risk4 Desc:** Nenhum arquivo de teste identificado (0 spec/test). Para uma aplicacao deste tamanho com logica de negocios no lado do cliente (validacao, calculo de precos, gestao de atributos), isso representa risco significativo de regressao

## Fases de implementacao

_Acoes concretas e contribuicoes pessoais_

- Fase 1 - Arquitetura e desenvolvimento inicial
- Fase 2 - Enriquecimento funcional
- Fase 3 - Producao e manutencao

**Phase1 Period:** ~2013-2014

**Phase2 Period:** 2014-2016

**Phase3 Period:** 2016-2019

## Atores e interacoes

_Composicao da equipe e dinamicas de colaboracao_

### Team

A analise do historico git (28 commits no total, todas as branches) revela dois contribuidores:

**José DA COSTA** (branches `jose` e `master`): autor de **99,1% do codigo** (19.007 linhas adicionadas de 19.172 no total). Ele realizou a importacao inicial do SVN em 18 de janeiro de 2016, incluindo todo o codigo aplicativo. Isso confirma que toda a aplicacao (arquitetura, modulos, diretivas custom, i18n, estilos) foi desenvolvida por José antes da migracao para Git. Seus commits posteriores focam em melhorias no modulo de estatisticas.

**Thomas C.** (branch `fancyweb`): 21 commits representando 0,9% do codigo (165 linhas adicionadas). Suas contribuicoes cobrem evolucoes funcionais e correcoes de bugs apos a implantacao inicial: alteracoes na interface de traducao, correcao de destinatario de email, funcionalidades de selecao de produtos e correcoes de gestao de noticias.

### Methodology

O controle de versao transitou de SVN (~2013) para Git com GitHub em janeiro de 2016. O workflow de implantacao usava progressao por branches: branches de desenvolvimento mescladas no master, depois implantacao via branch prod. A equipe Medialeads usava um DokuWiki dedicado para documentacao tecnica compartilhada.

**Team:** Equipe de desenvolvimento

**Stakeholders:** Partes interessadas

**Stakeholder Api:** Equipe API (Symfony/Propel) - backend fornecendo todos os dados de negocio

**Stakeholder Bing:** API Bing Translate - servico externo de traducao automatica

**Stakeholder Suppliers:** Fornecedores (ex: Plastoria S.A.) - usuarios finais gerenciando sua presenca B2B

**Stakeholder Resellers:** Revendedores - beneficiarios indiretos (conteudo dos fornecedores exibido em seus sites)

**Methodology:** Metodologia de trabalho

## Resultados

_Impacto mensuravel para crescimento pessoal e valor de negocio_

### For Me

- Dominio dos padroes de arquitetura SPA com AngularJS antes da adocao generalizada de frameworks baseados em componentes
- Construcao de uma biblioteca de diretivas reutilizaveis (minigeek*) servindo como framework UI pessoal em varios projetos
- Aquisicao de experiencia profunda em modelagem de dominio B2B complexo: catalogos de produtos multilingues, precos escalonados, gestao de variantes
- Desenvolvimento de competencias em padroes de integracao de API REST com seguranca WSSE, gerenciando 35+ endpoints
- Aprofundamento da expertise em internacionalizacao com um sistema hibrido cobrindo 5 idiomas europeus

### For Company

- Autonomia do fornecedor em 100% - autoatendimento completo para gestao de perfil, produtos, noticias e estatisticas
- 5 mercados europeus cobertos - i18n completa com suporte FR, EN, DE, ES, IT e formatos de data localizados
- 60+ sites de revendedores alimentados pelo conteudo dos fornecedores gerenciado via este portal
- Ferramenta de receita direta - opcoes comerciais (ES+, Ideia da Semana, Emailing, Palavra-chave Lider) gerenciadas pelo BO
- ~5-6 anos de uso estavel em producao (~2014 a 2019) provando a durabilidade das escolhas arquiteturais
- 9 modulos funcionais entregues: autenticacao, painel, contrato, perfil (7 sub-secoes), produtos ES+, noticias, estatisticas (3 fontes), i18n, gestao de midia

**For Me:** Para mim

**For Company:** Para a empresa

## Apos o projeto

_Ciclo de vida alem da entrega inicial_

### Immediate

Apos a implantacao, o Supplier BO tornou-se a ferramenta operacional diaria de todos os fornecedores European Sourcing. As capturas de tela de agosto de 2019 mostram uma aplicacao madura e plenamente funcional com contratos comerciais ativos e dados reais de fornecedores (opcoes de contrato, datas de publicacao, listagens de produtos). A ferramenta foi ativamente usada por pelo menos 5 anos apos a implantacao inicial.

### Medium Term

A aplicacao continuou recebendo melhorias ate 2016 (funcionalidades de selecao de produtos, atualizacoes da interface de traducao, melhorias na gestao de noticias) antes de entrar em fase de manutencao estavel. A implantacao por branches (master/prod) permitia releases controlados.

### Current State

A aplicacao esta arquivada no backup "EUROPEAN SOURCING 2019". O codigo fonte completo, dumps de banco de dados e 25+ capturas de tela detalhadas estao preservados no NAS. O codigo demonstra que embora a tecnologia front-end (AngularJS 1.2) tenha se tornado obsoleta, a arquitetura de API REST desacoplada permaneceu reutilizavel - provando que a separacao front/back foi a escolha arquitetural correta.

**Immediate:** Impacto imediato

**Medium Term:** Evolucao a medio prazo

**Current State:** Estado atual

## Analise critica

_Retrospectiva honesta e licoes aprendidas_

### Strength

- Arquitetura SPA desacoplada - separacao limpa entre front-end e API REST permitindo evolucao independente. O front-end nao faz suposicoes sobre a tecnologia do backend
- Framework de diretivas reutilizaveis - as diretivas minigeek* (DataTable, FlotChart, i18n, Form, Download) formam um mini-framework UI coerente que acelerou significativamente o desenvolvimento
- Internacionalizacao cuidadosa - 5 idiomas com traducao automatica, formatos de data adaptados por locale e deteccao automatica do idioma do navegador demonstram cuidado genuino com a experiencia do usuario europeu
- Interface profissional - capturas de tela de 2019 revelam uma interface limpa, moderna (para sua epoca), com navegacao clara e design consistente em todos os modulos
- Gestao complexa de produtos - o modulo ES+ gerencia produtos com variantes, atributos dinamicos, precos escalonados e imagens - complexidade funcional significativa bem gerenciada no lado front-end

### Improvement

- Zero cobertura de testes - nenhum arquivo spec/test identificado. Para uma aplicacao deste tamanho com logica de negocios no lado do cliente (validacao, calculos de precos, gestao de atributos), e um risco significativo
- Hash MD5 de senhas - criptograficamente fraco e inadequado para hash de senhas. bcrypt ou argon2 seriam mais apropriados
- Versoes de dependencias obsoletas - AngularJS 1.2 (2013), Express 3.x (2013), jQuery 1.11 (2014), Bower (descontinuado desde 2017). Toda a stack ja estava obsoleta nas ultimas capturas de tela
- Duplicacao do codigo de login - padrao de autenticacao para selecao multi-fornecedor e repetido identicamente em LoginCtrl e RedirectCtrl ao inves de ser extraido para um servico compartilhado
- Manipulacao direta do DOM - algumas diretivas usam manipulacao DOM via jQuery ($("body").append(...), $elem.find(...)) ao inves de mecanismos AngularJS, complicando testes e manutencao

### Would Change

- Adicionar testes unitarios (Karma/Jasmine) para controllers e testes E2E (Protractor) para fluxos criticos de usuario desde o inicio
- Planejar uma migracao para Angular 2+ ou React/Vue.js por volta de 2017-2018 para estender a vida util da aplicacao
- Extrair a biblioteca de diretivas minigeek* em um pacote npm versionado compartilhado entre os front-ends do ecossistema European Sourcing
- Substituir WSSE+MD5 por JWT ou OAuth2 com hash bcrypt no lado do servidor
- Implementar um servico de autenticacao compartilhado para eliminar a duplicacao de logica de login entre controllers

### Lesson

- O desacoplamento front/back compensa a longo prazo - mesmo com uma stack front-end obsoleta, a API REST permanece reutilizavel para um novo front-end sem modificacao
- Componentes reutilizaveis sao um investimento - o framework minigeek* provavelmente acelerou consideravelmente o desenvolvimento de cada secao
- i18n deve ser projetada desde o dia 1 - a integracao nativa de 5 idiomas na arquitetura (filtros, diretivas, servico de localizacao) torna a i18n transparente para o desenvolvedor
- Documentacao e testes sao apolices de seguro - a ausencia de testes e documentacao (README quase vazio) torna a arqueologia do projeto significativamente mais dificil anos depois

**Strengths:** Pontos fortes

**Improvements:** Pontos de melhoria

**Would Change:** O que eu faria diferente

**Lessons:** Licoes duradouras