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.
Linhas de codigo
18,711
CoffeeScript, SCSS, HTML
Arquivos fonte
185
Arquivos aplicativos (excl. dependencias)
Controllers AngularJS
18
Controllers, diretivas, servicos, filtros
Idiomas suportados
5
FR, EN, DE, ES, IT
Endpoints API
~35
Diretivas custom
14
Apresentacao
Definicao e escopo do projeto
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.
Produtos publicitarios e promocionais B2B - sourcing, distribuicao, marketplace europeu
Gerentes comerciais, gerentes de marketing e gerentes de produto em fornecedores de produtos promocionais na Europa (Franca, Reino Unido, Alemanha, Espanha, Italia)
| 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 |
Objetivos, contexto, desafios e riscos
Visao estrategica e restricoes operacionais
- 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
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.
- 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
- Satisfacao dos fornecedores - a qualidade desta ferramenta impacta diretamente o relacionamento comercial com os clientes B2B pagantes
- Escalabilidade europeia - suporte a 5 idiomas com formatos de data adaptados demonstra ambicao de mercado continental
- Alcance da rede - 60+ sites de revendedores alimentados pelo conteudo dos fornecedores gerenciado atraves deste portal
Seguranca - WSSE + MD5
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
Divida tecnica - AngularJS 1.2
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
Dependencia de API
Toda a logica de negocios reside na API central. O Supplier BO e totalmente dependente da disponibilidade e funcionamento correto de api.europeansourcing.com
Zero cobertura de testes
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
- Projeto e construcao da arquitetura SPA completa do zero com AngularJS 1.2 e CoffeeScript
- Criacao de 18 controllers organizados por dominio funcional (Contato, Perfil, Produto, Estatistica, Noticia, Contrato)
- Construcao de 14 diretivas custom reutilizaveis formando um mini-framework UI (minigeekDatatable, minigeekFlotChart, minigeekI18n, minigeekForm, minigeekDownload)
- Implementacao da autenticacao WSSE com gestao multi-fornecedor por contato e SSO entre sites via criptografia RC4
- Engenharia do sistema i18n hibrido: labels JSON gerados por PHP/gettext para UI + campos API multilingues indexados por id_language
- Desenvolvimento do tema SCSS completo com 97 arquivos de estilo baseados em Bootstrap 3
- Construcao do modulo de estatisticas com 3 fontes de dados (European Sourcing, TendanceObjet, Produtos ES+) com graficos Flot.js filtraveis
- Implementacao do modulo de gestao de produtos ES+: CRUD com imagens, precos escalonados, atributos dinamicos, variantes, copia em massa, videos YouTube
- Criacao das secoes de gestao de publicidade e midia (banners, fotos, integracao YouTube/Dailymotion/Vimeo)
- Migracao de todo o codigo fonte de SVN para Git (18 de janeiro de 2016)
- Melhoria na gestao de intervalos de datas nas estatisticas (datas min/max) e integracao da nova interface de traducao
- Manutencao de implantacao de producao estavel via servidores dedicados OVH com Express.js servindo arquivos estaticos
- Aplicacao ativamente usada por fornecedores europeus ate pelo menos agosto de 2019 (documentado via capturas de tela)
- Workflow de implantacao por branches: branches de desenvolvimento mescladas no master, implantacao via branch prod
Atores e interacoes
Composicao da equipe e dinamicas de colaboracao
A analise do historico git (28 commits no total, todas as branches) revela dois contribuidores:
Jose 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 Jose 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.
- Equipe API (Symfony/Propel) - backend fornecendo todos os dados de negocio
- API Bing Translate - servico externo de traducao automatica
- Fornecedores (ex: Plastoria S.A.) - usuarios finais gerenciando sua presenca B2B
- Revendedores - beneficiarios indiretos (conteudo dos fornecedores exibido em seus sites)
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.
Resultados
Impacto mensuravel para crescimento pessoal e valor de negocio
- 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
- 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
Apos o projeto
Ciclo de vida alem da entrega inicial
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.
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.
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.
Analise critica
Retrospectiva honesta e licoes aprendidas
- 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
- 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
- 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
- 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
Trajetoria relacionada
Experiencia profissional ligada a esta realizacao
Competencias aplicadas
Competencias tecnicas e humanas aplicadas
Competencias tecnicas
Competencias humanas
Galeria de imagens
Capturas e visuais do projeto