Aplicações white-label sem ngIf

Esses são os slides correspondentes a apresentação ocorrida no Meetup AngularSP acontecido no dia 24/09/2020.

Transcript

1. Aplicações white-label Uma abordagem sem *ngIf Igor Debastiani Desenvolvedor Web Front-End
2. Índice • O que é uma aplicação white-label • Imaginando um caso • Onde precisamos mexer • Organizando melhor • Resultado • Recursos
3. Fonte: https://www.vendasta.com/blog/white-label-apps/ O que é uma aplicação white-label? "White-label apps are applications built by a white or private label app development company and rebranded and resold by other businesses."
4. Imaginando um caso Existem dois mercados (desses de bairro) que gostariam de expandir suas atividades a partir de um site. Uma das formas de atender ambos os leads é oferecer uma aplicação white-label customizada para cada caso com um preço e manutenção como diferenciais.
5. Onde precisamos mexer? Criar arquivos com os dados de cada marca na pasta "./environments": - No environment.mercado-pedro ficam textos, títulos, vocativos e informações nesse sentido; - Na pasta mercado-pedro ficam os assets e estilos específicos da marca. <- Arvore de arquivos na pasta src evidenciando o environments
6. É interessante definir um modelo que possua as informações utilizadas por cada cliente. A necessidade de um modelo é para se certificar que todos os clientes terão todas as informações. Onde precisamos mexer?
7. Todos os clientes precisarão ter o mesmo modelo, garantindo que nenhum erro irá acontecer na consulta dessas propriedades. Onde precisamos mexer?
8. Define as configurações de substituição de arquivos, inclusão de estilos e caminhos específicos de assets. Arquivo: angular.json Onde precisamos mexer?
9. Detalhando a captura de tela anterior para o cliente mercado-pedro. Arquivo: angular.json Onde precisamos mexer?
10. Label "fim-passo-1" Onde precisamos mexer? Cria o elo com a linha de comando para que as configurações anteriores entrem em efeito ao ser definida a flag "configuration" Arquivo: Angular.json
11. Até aqui só adicionamos configurações e procedimentos de linha de comando para configurações simples. Para usar qualquer uma delas use a flag "configuration", da seguinte forma: O próximo passo é definir os novos padrões e também as configurações de produção. Caso isso não seja feito, um "ng serve" sem configuration irá retornar erro. Organizando melhor
12. Label "fim-passo-2" • Internalizar os arquivos de cada environment em sua respectiva pasta; • Retirar a palavra environment do nome dos arquivos (p/ facilitar); • Criar a pasta do environment padrão • Refletir alterações no angular.json: - Remover a configuration "production" no serve e no build; - Adicionar as configurações de prod no serve e build; - Mudar o caminho dos arquivos para refletir a estrutura ao lado - Alterar o serve padrão. Organizando melhor
13. Resultado Para cada cliente: • Estilos customizados • Esquema de cores • Baseref API customizado • Textos customizados Label "fim-front"
14. Recursos https://github.com/gdinn/white-label Minhas redes sociais: https://www.linkedin.com/in/igor-debastiani-3b579b124/ Repositório Do projeto:
15. Aplicações white-label Uma abordagem sem *ngIf Igor Debastiani Desenvolvedor Web Front-End Obrigado.