@wizsolucoes/angular-white-label NPM

Wiz Angular White Label Schematic

Sobre
Uso
Sobre a aplicação gerada
Desenvolvimento do schematic

Sobre

Schematic para gerar código boilerplate com a arquitetura de referência para aplicações Angular "white label".

Compatível com as versões suportadas do Angular (^8.0.0, ^9.0.0 e ^10.0.0) e otimizado para as versões ^10.0.0.

Uso

# Generate a new angular application
ng new my-app --style=scss

# Enter the directory
cd my-app

# Add Wiz stylesheet
npm i @wizsolucoes/ng-material-theme

# Add white label arquitecture
ng add @wizsolucoes/angular-white-label

IMPORTANTE: Este schematic supõe que a aplicação usa SASS e deve ser executado em projetos novos, pois faz a sobrescrita de arquivos.

Sobre a aplicação gerada

Arquitetura white-label

Diagrama de classes

diagrama de classes

AppComponent

O componente base da aplicação Angular. O componente usa a url para se identificar, solicita sua configuração do serviço de configuração e delega a customização visual ao serviço de tema.

O método whoami e responsável por identificar o tenant baseado na url da aplicação.

ThemingService

Serviço de tema responsável por aplicar configurações visuais ao DOM.

ConfigurationService

Serviço de configuração que é efetivamente um repositório dos dados de configuração, no sentido do repository pattern. ConfigurationService tem como dependência ConfigurationInMemoryService, ConfigurationCacheService, ConfigurationApiService que servem como fontes de dados.

O serviço de configuração consulta os dados na seguinte ordem de preferência: 1. Dados em memória 2. Dados em cache, se o cache estiver habilitado 3. API

O uso do cache pode ser habilitado e desabilitado pelo serviço de configuração.

Os dados sempre são guardados em memória após consulta independente da fonte.

De forma geral, este é o serviço que deve ser injetado nos componentes da aplicação que dependem de configuração.

ConfigurationApiService

Serviço responsável por fazer uma requisição http para buscar a configuração.

ConfigurationCacheService

Serviço responsável por usar o local storage para buscar e guardar a configuração.

ConfigurationInMemoryService

Serviço responsável por buscar e guardar a configuração em memória.

Experimente

Depois de gerar uma aplicação Angular com a arquitetura white label. Siga estes passos para experimentar com a configuração.

1. Configure os recursos

Primeiramente, configure os recursos da aplicação, como a configuração de SSO.

2. Instale as dependências

npm install

3. Rode o servidor de teste

A aplicação angular starter faz uma requisição GET para http://localhost:3000/config para buscar a configuração. O projeto tem um json-server que pode ser usado para responder essa requisição.

Em um terminal rode o servidor:

npm run server

Em outro terminal rode a aplicação Angular:

npm start

4. Modifique a resposta do servidor de teste

Para mudar as respostas do servidor e visualizar como a aplicação se comporta, modifique o arquivo /server/db.json e atualiza a página do browser onde a aplicação está rodando.

Exemplos

Repare nos exemplos a seguir como o tema, a logo e a disponibilidades de funcionalidades são configurados de acordo com o a url da aplicação e o conteúdo do arquivo /server/db.json.

Exemplo 1

{
  "theme": {
    "primary-color": "teal"
  },
  "logoImageUrl": "https://bulma.io/images/bulma-logo.png",
  "features": ["sales"]
}

tela com tema bulma

Exemplo 2

{
  "theme": {
    "primary-color": "#1E88E5"
  },
  "logoImageUrl": "https://raw.githubusercontent.com/wizsolucoes/angular-white-label/master/docs/logowiz.png",
  "features": ["sales", "documentation"]
}

tela com tema wiz

Estrutura e recursos

A estrutura da aplicação segue a estrutura da arquitetura de referência para aplicações Angular e tem os mesmos recursos. Para alguns dos recursos é necessário fazer uma configuração antes de utilizar a aplicação. Leia mais sobre a configuração dos recursos aqui: https://github.com/wizsolucoes/angular-starter-schematic#recursos.

Desenvolvimento do schematic

Por onde começar

# Instalar as dependências
npm install

# Buildar schematic
npm run build

# Executar os testes
npm test

Testando o schematic localmente

1. Gere um distribuível do schematic

# Instalar as dependências
npm install

# Buildar schematic
npm run build

# Gerar tarball eg. wizsolucoes-angular-white-label-1.0.1.tgz
npm pack

2. Gere uma nova aplicação e instale e execute o schematic

# Gerar uma nova aplicação Angular em outra pasta para testar o schematic
ng new my-app --style=scss

# Entrar na pasta da nova aplicação
cd my-app

# Adicionar folha de estilos Wiz
npm i @wizsolucoes/ng-material-theme

# Instalar schematic
npm i --no-save ../path/to/angular-white-label-schematic/wizsolucoes-angular-white-label-1.0.1.tgz

# Executar schematic
ng g @wizsolucoes/angular-white-label:ng-add