@totvs/mobile-mingle NPM

Mingle

Dependências de versões

Pacote para projetos que utilizam a versão 5 do angular.

@angular: <= 5.2.3
@rxjs: <= 5.4.3
@typescript: <= 2.4.2

Para versões superiores recomendamos a utilização do nosso novo pacote: Mingle

O que é?

O Mingle é uma biblioteca escrita em typescript para facilitar a comunicação com o servidor Mingle.

Como usar?

Para começar a usar o mingle, a primeira coisa a fazer é instalar o pacote necessário para seu funcionamento. Rode o seguinte comando na pasta do seu projeto:

$ npm i --save @totvs/mobile-mingle

Também é necessário rodar os seguintes comandos para instalar os plugins necessários:

Ionic Native - Device

$ ionic cordova plugin add cordova-plugin-device
$ npm install --save @ionic-native/device

Ionic Native - Geolocation

$ ionic cordova plugin add cordova-plugin-geolocation --variable GEOLOCATION_USAGE_DESCRIPTION="To locate you"
$ npm install --save @ionic-native/geolocation

Ionic Native - Globalization

$ ionic cordova plugin add cordova-plugin-globalization
$ npm install --save @ionic-native/globalization

Ionic Native - Globalization

$ ionic cordova plugin add cordova.plugins.diagnostic
$ npm install --save @ionic-native/diagnostic

No arquivo app.module.ts da aplicação, importar as classes responsáveis pelo módulo e pela configuração do Mingle:

import { Configuration, MingleModule } from '@totvs/mobile-mingle';

Definir um método para efetuar a configuração:

export function mingleFactory() {
  let config = new Configuration();
  config.app_identifier = <APP_ID>;
  config.environment = <DEV | PROD>;
  config.server = <http | https + MINGLE_SERVER_ADDRESS>;
  config.modules.crashr = <true | false>;
  config.modules.usage_metrics = <true | false>;
  config.modules.gateway = <true | false>;
  return config;
}

Fazer a importação do MingleModule, passando como parâmetro do forRoor o método que o configura:

@NgModule({
  declarations: [...],
  imports: [
    ...,
    MingleModule.forRoot({
      provide: Configuration,
      useFactory: mingleFactory
    })
  ],
  bootstrap: [IonicApp],
  entryComponents: [...],
  providers: [...]
})
export class AppModule {}

No arquivo app.component.ts, importar as classes MingleService e MingleError:

import { MingleService, MingleError } from '@totvs/mobile-mingle';

Adicionar o MingleService no construtor da classe:

constructor(..., private _mingleService: MingleService, ...)

A primeira coisa a fazer é inicializar o Mingle, e verificar se o usuário já está autenticado:

this._mingleService.init().subscribe(
  (res) => {
    console.log('Mingle inicializado');
    this._mingleService.getUser().subscribe(
      () => {
        if (!this._mingleService.getSessionInfo().user) {
          console.log('Sessão não iniciada');
          this.rootPage = LoginPage;
        } else {
          this.rootPage = HomePage;
        }
      }
    );
  }
);

Essa chamada já irá registrar um evento de APP_INITIATED (Aplicativo inicializado).

Após isso é necessário verificar se as variáveis de autenticação já estão definidas. Uma exception será lançada no caso dos dados não estiverem setados. Sendo necessário realizar o login.

this._mingleService.isReadyForAuthenticatedRequests();

É possível efetuar o login com as credenciais passadas pelo usuário (Usuário/Senha/Alias)

this._mingleService.auth.login(user, password, alias)
  .subscribe(() => {
    console.log('Sign in ok');
    this._navCtrl.setRoot(HomePage);
  },
  (authError) => {
    console.log('Erro de autenticação: Usuário ou senha invalidos!');
  }
);

Em caso de sucesso, um evento de USER_LOGIN será registrado. Caso contrário, um evento de WRONG_CREDENTIALS será gerado.

Para deslogar o usuário do sistema, usar o método logout do mingleService (um evento de USER_LOGOUT será gerado):

this.this._mingleService.auth.logout()
  .subscribe(
    () => {
      this._app.getRootNav().setRoot(LoginPage);
      console.log("Usuário deslogado");
    }
  );

Módulo Gateway

A função do módulo gateway é fazer chamadas REST num determinado backend previamente cadastrado no Mingle.

Para isso, pasasse para o mingle a URI do backend:

let url = 'customers';

let params = {
  page: 1,
  pageSize: 10
};

this._mingleService.gateway
  .get(url, {}, params)
  .map(response => <Customer[]>response.body)
  .subscribe(
    (customers) => {
      console.log('Customers: ', customers);
    }
  );

Além do método GET, também estão disponíveis os métodos POST, PUT, PATCH e DELETE.

Módulo Métricas

A função do módulo de métricas do mingle é registrar quaisquer tipos de dados pertinentes para o app em questão.

Para o registro da métrica, é necessário informar apenas uma descrição:

this._mingleService.registerMetric('CUSTOMERS_VIEWED').subscribe();

Esse código registrará uma métrica informando que determinado usuário visualizou a lista de clientes, por exemplo.

Além do nome da métrica, o app pode passar, opcionalmente, quaisquer dados que faça sentido para sua aplicação, por exemplo:

let customData = {
  device3gEnabled: true,
  deviceWifiEnabled: false
};
this._mingleService.registerMetric('CUSTOMERS_VIEWED', customData).subscribe();

Baixe o código completo do projeto de exemplo em https://github.com/devtotvs/mingle-sample

Interceptor Http

O mingle também disponibiliza uma classe chamada MingleHttpInterceptor que funciona como um interceptador de requisições.

O objetivo desse interceptador é que a qualquer chamada http feita pelo app usando apenas o recurso /api/customers, automaticamente será adicionado na requisição a url do mingle, e os headers de Authorization (token), Content-Type e tenantId.

Para usar o MingleHttpInterceptor, basta configuar no app.module.ts:

Importar o interceptor do Mingle e a classe HTTP_INTERCEPTORS do angular:

import { MingleHttpInterceptor } from '@totvs/mobile-mingle';
import { HTTP_INTERCEPTORS } from '@angular/common/http';

Adicionar o interceptor na seção providers do NgModule:

@NgModule({
  declarations: [
    ...
  ],
  imports: [
    ...
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    ...
  ],
  providers: [
    ...,
    { provide: HTTP_INTERCEPTORS, useClass: MingleHttpInterceptor, multi: true }
  ]

Depois dessas configurações, o mingle estará pronto para utilizar o interceptor automaticamente.