Histórico da Página

Para começar a utilizar o a biblioteca @totvs/mingle em sua aplicação é necessário possuir: 

• NPM/Node.js
• Typescript: 3.2.2 ou superior
• Gerenciador de pacotes npm 
• Biblioteca @totvs/mingle
• Envio das informações no formato de encoding suportado pelo Mingle de acordo com a nossa documentação oficial
• Entrar em contato com a equipe framework protheus ou o devteam do Mingle para solicitar um Alias no ambiente de desenvolvimento.

A biblioteca Mingle foi criada para facilitar a comunicação entre os aplicativos e o servidor Mingle. 

Com ela nós teremos a facilidade de realizar login com poucas linhas de código, recursos para geração de métricas, interceptadores de requests entre outros diversos métodos públicos que facilitarão o trabalho do programador.

Instalação do pacote Mingle

Para começar a utilizar o Mingle o primeiro passo é fazer a instalação usando o npm: 

$ npm install --save @totvs/mingle

Acompanhe as próximas páginas deste guia para iniciar o desenvolvimento utilizando o pacote instalado.

Neste passo vamos realizar a configuração da classe MingleService que deverá ser instanciada no início da sua aplicação para que possamos tirar proveito de todas as funcionalidades da biblioteca Mingle em seu aplicativo. 

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: 

import { Injectable } from '@angular/core';
import { MingleService } 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 server = mingleService.servers.development;
     const appId = 'your_app_id';
     const web = true;
 
     this.mingleService.init(server, appId, web)
      .then( init => {
       resolve('Mingle Service Init');
     }).catch(error => {
       console.log("error" , error);
       
       reject(error);
     }); 
    console.log("Mingle Service configuration completed"); 
   });
 }}

Agora vamos analisar os trechos mais importantes do código acima:

Realize a importação da classe MingleService.

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

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. 

Existem três servidores, sendo eles: 

1. Development = 'https://dev-mingle.totvs.com.br/api'
2. Staging = 'https://hom-mingle.totvs.com.br/api'
3. Production = 'https://mingle.totvs.com.br/api'

Como neste exemplo ainda estamos desenvolvendo, vamos utilizar o ambiente "Mingle Development": 

• 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. 

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.

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 preferência pode ser uma função importada de um 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}
],

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á apresentada a mensagem:  "Mingle Service configuration completed".

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 requisição de API  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>