Histórico da Página

...

Consideramos este passo o mais importante, aqui é onde iremos configurar uma única instância da classe MingleService e ela funcionará por toda a sua aplicação. 

Utilizando o comando $ "ng generate service appinitservice" do Angular CLI, criamos um serviço AppInitService e nele realizamos a seguinte implementação: Lembrando que o Angular foi utilizado para este tutorial, mas pode ser qualquer plataforma escrita com Typescript.

import { Injectable } from '@angular/core';
import { MingleService, Configuration } from '@totvs/mingle';
@Injectable()
export class AppInitService {
 
 constructor(private mingleService: MingleService) { }
 
 mingleConfiguration(): Promise<any> {
   return new Promise((resolve, reject) => {
       
	 console.log("Mingle Service Configuration called");
    	 const configserver = new Configuration();
     config.modules.web = true;
     config.environmentmingleService.servers.development;
	 const appId = 'DEVyour_app_id';
	     config.modules.usage_metrics = true;
     config.modules.gatewayconst web = true;
     config.modules.push_notification = true;
     config.server = 'https://dev-mingle.totvs.com.br/api'
     config.app_identifier = 'identificadorDoAplicativo'
 
         this.mingleService.setConfiguration(config);
    
     this.mingleService.init();
     init(server, appId, web)
      .then( init => {
       resolve('Mingle Service Init');
     }).catch(error => {
       console.log("error" , error);
      
       reject(error);
     });  
	console.log("Mingle Service configuration completed");  
   });
 }}

...

Realize a importação da classe MingleService e a Configuration.

import { MingleService, Configuration } from '@totvs/mingle';

O primeiro passo é definir a constante config como “new Configuration();” dentro do método mingleConfiguration()

const config = new Configuration();

Configurações do módulo:

Em aplicações web utilize: config.modules.web = true; 

Em aplicações mobile utilize: config.modules.web = false;

Para utilizar as métricas automáticas do Mingle: config.modules.usage_metrics = true;

Para o servidor do Mingle realizar o sistema de gateway:  config.modules.gateway = true;

Deverão ser passados três parâmetros para a inicialização do Mingle (init):

O primeiro parâmetro que deverá ser passado é o servidor. Para definir qual servidor do Mingle:

Existem três servidores, sendo eles: Desenvolvimento

1. Development = 'https://dev-mingle.totvs.com.br/api'

...

1. Staging = 'https://hom-mingle.totvs.com.br/api'

...

1. Production = 'https://mingle.totvs.com.br/api'

Como neste exemplo ainda estamos desenvolvendo, vamos utilizar o ambiente "Mingle DesenvolvimentoDevelopment": config.

• server =

...

• this.mingleService.servers.development;

Para utilizar o ambiente Staging

• server =  this.mingleService.servers.staging;

Para utilizar o ambiente Production

• server =  this.mingleService.servers.production;

O segundo parâmetro que deverá ser utilizado é o appId. Cada ambiente possui um appId por aplicativo, o appId deve ser solicitado para um membro da equipe do Mingle.

O terceiro parâmetro deverá ser a plataforma utilizada.

• Em aplicações web utilize: web = true; 
• Em aplicações mobile utilize: web = false; a biblioteca enviará o deviceID e a plataforma do mobile para o registro de métricas e gateways do Mingle Server. 

...

Após finalizar a configuração de acordo com as regras da sua aplicação, chame a função setConfiguration() da classe mingleService passando a sua configuração anterior:

...

...

Em seguida inicie o aplicativo utilizando o método init() da classe mingleService, informando os três parâmetros acima descritos:

this.mingleService.init(server, appId, web)
   .then( init => {
    resolve('Mingle Service Init');
})

...

Agora que você realizou a configuração Mingle e o método init() já está pronto, vamos dizer para o seu aplicativo utilizar a classe AppInitService quando for compilado e iniciado.

No app.module.ts -> Providers: 

 1- Declare  AppInitService e MingleService

 2- Crie um provide para realizar o APP_INITIALIZER que será responsável por executar as configurações realizadas no passo anterior

3- Adicione o bloco de código abaixo em seu app.module.ts (pode ser logo após os imports ou então se for de sua preferencia preferência pode ser uma função importada de um terceiro arquivo externo).

export function initializeApp1(appInitService: AppInitService) {
  return (): Promise<any> => { 
    return appInitService.mingleConfiguration();
  }
}

No app.module.ts -> Providers: 

 1- Declare  AppInitService e MingleService

 2- Crie um provide para realizar o APP_INITIALIZER que será responsável por executar as configurações realizadas no tópico anterior

3- Realize a importação das classes declaradas em providers

providers: [
  AppInitService,
  MingleService,
  { provide: APP_INITIALIZER, useFactory: initializeApp1, deps:[AppInitService], multi: true},
  {provide: HTTP_INTERCEPTORS, useClass: MingleHttpInterceptor, multi: true}
]

],

Agora basta compilar a aplicação e acompanhar o terminal de logs.

Para essa aplicação utilizamos o comando:  $ "ng serve"

Em caso de compilação e configuração positiva, sem erros, no console do seu navegador será Caso  no terminal seja apresentada a mensagem:  "Mingle Service configuration completed", sua configuração inicial deu certo. 

Acompanhe os próximos tópicos desta documentação para começar a desenvolver a aplicação utilizando o Mingle, como por exemplo realizar uma autenticação ou uma chamada uma requisição de API utilizando   utilizando a segurança que o gateway do Mingle proporciona.

<style>
div.theme-default .ia-splitter #main {
    margin-left: 0px;
}
.ia-fixed-sidebar, .ia-splitter-left {
    display: none;
}
#main {
    padding-left: 10px;
    padding-right: 10px;
    overflow-x: hidden;
}

.aui-header-primary .aui-nav,  .aui-page-panel {
    margin-left: 0px !important;
}
.aui-header-primary .aui-nav {
    margin-left: 0px !important;
}
</style>