...
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"); }); }} |
Realize a importação da classe MingleService e a Configuration.
...
Bloco de código | ||||
---|---|---|---|---|
| ||||
const config = new Configuration(); |
Configurações do módulo:
Em aplicações web utilizeAplicações web: config.modules.web = true;
Aplicações Em aplicações mobile utilize: config.modules.web = false;
...
Produção = 'https://mingle.totvs.com.br/api'
Como neste exemplo nós 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); |
...
Bloco de código | ||||
---|---|---|---|---|
| ||||
this.mingleService.init() .then( init => { resolve('Mingle Service Init'); }) |
Agora que você criou a classe que configura e inicia o uso da biblioteca Minglerealizou 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 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 2.1anterior
3- Adicione o bloco de código 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 terceiro arquivo)
Bloco de código | ||||
---|---|---|---|---|
| ||||
export function initializeApp1(appInitService: AppInitService) {
return (): Promise<any> => {
return appInitService.mingleConfiguration();
}
}
|
Bloco de código | ||||
---|---|---|---|---|
| ||||
providers: [ AppInitService, MingleService, { provide: APP_INITIALIZER, useFactory: initializeApp1, deps:[AppInitService], multi: true}, {provide: HTTP_INTERCEPTORS, useClass: MingleHttpInterceptor, multi: true} ] |
Agora que você já conhece o mingleService e sua configuração inicial já está funcionando, vamos utilizar o Mingle para realizar a autenticação do usuário ao seu servidor.
Pré requisitos:
Considere o arquivo: login.component.ts
Importe a classe MingleService:
Bloco de código | ||||
---|---|---|---|---|
| ||||
import { MingleService } from '@totvs/mingle';
|
basta compilar a aplicação e acompanhar o terminal de logs.
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 de API utilizando o gateway do Mingle.Na sua função de login, utilize o método mingleService.auth.login(usuário, senha, alias)
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> |