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 do Angular, 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.
Bloco de código | ||||||||
---|---|---|---|---|---|---|---|---|
| ||||||||
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 config = new Configuration(); config.modules.web = true; config.environment = 'DEV'; config.modules.usage_metrics = true; config.modules.gateway = 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(); .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 e a Configuration.
Bloco de código | ||||
---|---|---|---|---|
| ||||
import { MingleService, Configuration } from '@totvs/mingle'; |
O primeiro passo é definir a constante config como “new Configuration();” dentro do método mingleConfiguration()
Bloco de código | ||||
---|---|---|---|---|
| ||||
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;
Para definir qual servidor do Mingle:
Existem três servidores, sendo eles:
Desenvolvimento = 'https://dev-mingle.totvs.com.br/api'
Homologação = 'https://hom-mingle.totvs.com.br/api'
Produção = 'https://mingle.totvs.com.br/api'
Como neste exemplo ainda estamos desenvolvendo, vamos utilizar o ambiente "Mingle Desenvolvimento":
config.server = 'https://dev-mingle.totvs.com.br/api'
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:
Bloco de código | ||||
---|---|---|---|---|
| ||||
this.mingleService.setConfiguration(config); |
Em seguida inicie o aplicativo utilizando o método init() da classe mingleService:
Bloco de código | ||||||||
---|---|---|---|---|---|---|---|---|
| ||||||||
this.mingleService.init() .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 preferencia pode ser uma função importada de um arquivo externo).
Bloco de código | ||||||||
---|---|---|---|---|---|---|---|---|
| ||||||||
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
Bloco de código | ||||||||
---|---|---|---|---|---|---|---|---|
| ||||||||
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
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 requisição de API utilizando a segurança que o gateway do Mingle proporciona.
HTML |
---|
<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> |