Arquivos ADVPL - REST – Sem Preju

CRUD Fornecedor usando PO.UI(Angular) e ERP Protheus – part 3

Rafael Gonçalves — Mon, 01 Feb 2021 13:33:10 +0000

Olá pessoal.

Nos post anterior vimos:

Parte 1 – Como configurar, testar API no Protheus e listar fornecedores no Angular (PO.UI) aqui.
Parte 2 – Como criar o formulário para inclusão de fornecedor aqui.

Dando continuidade na nossa série de criar um CRUD em PO.UI, vamos agora criar as ações de editar e excluir um fornecedor.

Vamos começar com a exclusão, para isso vamos usar a mesma API mas o verbo agora será DELETE ao invés de GET ou POST. Vamos primeiro testar nossa API e consultar se nosso backend está funcionando corretamente (essa etapa é opcional), para isso vamos usar novamente o Postman, apontando para nossa API passaremos o código + loja do fornecedor como parâmetro na URL, ficando assim, http://localhost:8084/rest/api/crm/v1/customerVendor/2/A2_COD+A2_LOJA(no lugar de A2_COD+A2_LOJA informe um fornecedor e loja que exista em seu ambiente, e também troque o ip e porta do backend para os seus dados) como no print abaixo.

A resposta deverá ser um arquivo JSON com a mensagem de registro deletado com sucesso, se tudo ocorreu corretamente aqui, vamos começar a tratar nosso frontend para usar a mesma API.

A Primeira etapa do FrontEnd será ajustar o componente de lista fornecedores para adicionar duas novas ações para cada item na lista(editar e excluir), para isso altere o arquivo supplier-list.component.ts e deixe como o código abaixo:

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { PoNotificationService, PoTableAction } from '@po-ui/ng-components';
import { SupplierListService } from './supplier-list.service';

@Component({
  selector: 'app-supplier-list',
  templateUrl: './supplier-list.component.html',
  styleUrls: ['./supplier-list.component.css']
})
export class SupplierListComponent implements OnInit {

  supplierList: Array&lt;any&gt; = new Array();
  colunasTable: Array&lt;any&gt; = new Array();

  //Parte 3 
  //Adicionado ação deleter e editar
  actions: Array&lt;PoTableAction&gt; = [
    { action: this.updateSupplier.bind(this), icon: 'po-icon-edit', label: 'Alterar Fornecedor'},
    { action: this.deleteSupplier.bind(this), icon: 'po-icon-delete', label: 'Excluir Fornecedor' }
  ];

  //Parte 3 
  //método para editar
  updateSupplier(row: any) {
    console.log('Edit');
    const supplierId = row.code + row.storeId;
    this.router.navigate([`/supplierform/${supplierId}/${row.type}`]);
  }
    
  //Parte 3 
  //método para deleter o fornecedor
  deleteSupplier(row: any) {
    console.log('deleteSupplier');
    const supplierId = row.code + row.storeId;
    this.SupplierListService
    .deleteSupplier(supplierId, row.type)
    .subscribe(() =&gt; {
      this.updateSupplierList(); //atualiza a lista
      this.poNotification.success('o Fornecedor foi excluido com sucesso');
    }
    , err =&gt; this.poNotification.error(err)); //exibe erro 
  }
  constructor(private SupplierListService: SupplierListService,
    private router: Router,
    private poNotification: PoNotificationService) { }

  ngOnInit(): void {
    this.updateSupplierList(); //busca a lista de fornecedores do nosso Api
    this.colunasTable = this.SupplierListService.getColumns(); //atualiza as colunas que queremos ser listadas em nossa tabela.
  }
  //Metódo responsável por se isncrever no serviço e atualizar a lista de fornecedores
  updateSupplierList(): void {
    this.SupplierListService.getSupplierList().subscribe(response =&gt; {
      this.supplierList = response.items;
    });
  }
}

Foram incluídos:

Nova variável chamada actions com as ações que desejamos em nossa lista.
Novos métodos
- updateSupplier, será responsável por atualizar um fornecedor (opção de editar).
- deleteSupplier, será responsável por deletar um fornecedor.

Agora devemos ajustar o arquivo supplier-list.service.ts e incluir o método responsável por enviar para nossa API a requisição de exclusão, o arquivo final deve ficar como o código abaixo:

import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { PoTableColumn } from '@po-ui/ng-components';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class SupplierListService {

  ApiRest = 'http://localhost:8084/rest/api/crm/v1/customerVendor'; //Endereço da nossa API responsável por lista os fornecedores
  
  constructor(private http: HttpClient) { }

  //Método responsável por buscar e listar nossos fornecedores
  getSupplierList(): Observable {
    return this.http.get(this.ApiRest + `/2`); //supplier
  }

  
  //Método para remover Fornecedor
  deleteSupplier(Id: string, type: string = '2') {
    return this.http.delete(this.ApiRest + `/${type}/${Id}`);
  }


  //Método responsável por converter em nomes mais legiveis para usuário
  getColumns(): Array {
    return [
      { property: 'code', label: 'Código'},
      { property: 'storeId', label: 'Loja' },
      { property: 'name', label: 'Nome' },
      { property: 'strategicCustomerType', label: 'Fisica/Juridica' ,
        type: 'label', //part3 add 
        labels: [
          { value: 'F',color: 'color-08', label: 'Física' },
          { value: 'J', color: 'color-12',label: 'Juridica' }
        ] },
      { property: 'registerSituation', label: 'Situação' ,
      type: 'label', //part3 add 
      labels: [
        { value: '1', color: 'color-07', label: 'Inativo' },
        { value: '2', color: 'color-11', label: 'Ativo' },
        { value: '3', color: 'color-09', label: 'Cancelado' },
        { value: '4', color: 'color-12', label: 'Pendente' },
        { value: '5', color: 'color-08', label: 'Suspenso' }
      ]  },
    ];
  }
}

E para finalizar a opção de excluir, vamos alterar o arquivo supplier-list.component.html e no component po-table adicionar as nossas ações, o arquivo final deve ficar como o código abaixo:

Para finalizarmos nossa série e fazer a edição de um registro, vamos precisar primeiramente incluir uma nova rota (vamos reutilizar o mesmo form de inclusão mas agora vamos receber na URL o código + loja do fornecedor, para isso no arquivo app-routing.module.ts, vamos criar uma nova rota que receberá 2 parâmetros, um o ID do nosso fornecedor e outro para o tipo (nosso caso será sempre 2 = fornecedor, mas poderíamos editar facilmente um cliente por exemplo), o arquivo final deve ficar como o código abaixo:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { SupplierListComponent } from './supplier-list/supplier-list.component';
import { SupplierFormComponent } from './supplier-form/supplier-form.component';
const routes: Routes = [
  { path: '', component: SupplierListComponent },
  { path: 'supplier', component: SupplierListComponent }, //lista de fornecedor
  { path: 'supplierform', component: SupplierFormComponent }, //form do fornecedor - Incluir
  { path: 'supplierform/:id/:type', component: SupplierFormComponent }, //form do fornecedor - Editar
];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Alteraremos também o arquivo supplier-form.component.ts, nele vamos precisar:
No ngOninit, vamos verificar se em nossa URL temos os parametros ID e Tipo (criados na nossa rota) se encontrar significa que estamos editando um fornecedor e nesse caso vamos carregar os dados do fornecedor e mudar o titulo da página.
Vamos criar a ação no novo botão “atualizar” para confirmar alterações em um forncedor (esse botão será criado no HTML do form, logo abaixo).

O arquivo supplier-form.component.ts deve ficar como o código abaixo:

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { PoDynamicFormField, PoNotificationService } from '@po-ui/ng-components';
import { Supplier } from '../model/supplierModel';
import { SupplierFormService } from './supplier-form.service';
import { first } from 'rxjs/operators';

@Component({
  selector: 'app-supplier-form',
  templateUrl: './supplier-form.component.html',
  styleUrls: ['./supplier-form.component.css']
})
export class SupplierFormComponent implements OnInit {

  //fields: Array = []; //campos "dinamicos" para usar no formulário
  supplier: Supplier = new Supplier();//model de um fornecedor
  supplierValues = {    type: 2, code: "", storeId: "", shortName: "", name: "", strategicCustomerType: "J", entityType: "J",
  number: "", address: "", zipCode: "", stateId: "", stateInternalId: "", registerSituation: "1",
  stateDescription: "", complement: "", district: "", cityCode: "", cityDescription: ""}; //array com os valores do fomulário
  supplierType: string | any = '2'; //no nosso exemplo será sempre 2=fornecedor, mas poderia ser 1=cliente
  supplierId: string | any;
  title = 'Inclusão de Fornecedor';

  constructor(private supplierFormService: SupplierFormService, //servico do form
    private poNotification: PoNotificationService, //usar as notificações do PO.UI
    private route: ActivatedRoute,
    private router: Router,
  ) { }

  ngOnInit(): void {
    //define valores padrão para formulário
    this.supplierValues = {
      type: 2, code: "", storeId: "", shortName: "", name: "", strategicCustomerType: "J", entityType: "J",
      number: "", address: "", zipCode: "", stateId: "", stateInternalId: "",registerSituation: "1",
      stateDescription: "", complement: "", district: "", cityCode: "", cityDescription: ""
    }
    this.route.paramMap.subscribe(parameters => {
      this.supplierId = parameters.get('id');
      this.supplierType = parameters.get('type');
    });

    if (this.supplierId) { //se tem o ID na URL, significa alteração
      this.title = 'Alteração de Fornecedor';
      this.setFormValue(); //atribui os valores do API para o formulário
    }
  }

  //Método para inserir um novo fornecedor
  insertSupplier(): void {
    this.getSupplierFromForm();
    this.supplierFormService.postNewSupplier(JSON.stringify(this.supplier)) //grava o novo fornecedor
      .pipe(first())
      .subscribe(() => {
        this.poNotification.success('Fornecedor foi inserido com Sucesso');
        this.router.navigate(['/supplier']); //redireciona para lista de fornecedor
      }, err => {
        //se error devolve o erro do Backend para o usuário
        let messErr = JSON.parse(err.error.errorMessage);
        this.poNotification.error(`Erro código ${messErr.code},  ${decodeURIComponent(escape(messErr.message))}, detalhe: ${decodeURIComponent(escape(messErr.detailedMessage))}.`)
      }
        
        ); //exibe erro ao inserir fornecedor
  }

   //alimenta o modelo de dados
  private getSupplierFromForm(): void {
    // dados pessoais
    this.supplier.code = this.supplierValues.code;
    this.supplier.storeId = this.supplierValues.storeId;
    this.supplier.name = this.supplierValues.name;
    this.supplier.shortName = this.supplierValues.shortName;
    this.supplier.strategicCustomerType = this.supplierValues.strategicCustomerType;
    this.supplier.entityType = this.supplierValues.entityType;
    this.supplier.type = this.supplierValues.type;
    this.supplier.registerSituation = this.supplierValues.registerSituation;

    // Endereço
    this.supplier.address.address = this.supplierValues.address;
    this.supplier.address.city.cityCode = this.supplierValues.cityCode;
    this.supplier.address.city.cityDescription = this.supplierValues.cityCode;
    this.supplier.address.city.cityInternalId = this.supplierValues.cityCode;
    this.supplier.address.state.stateId = this.supplierValues.stateId;
    this.supplier.address.state.stateInternalId = this.supplierValues.stateId;



  }

  //part 3
  //Método para editar um fornecedor
  updateSupplier(): void {
    this.getSupplierFromForm(); //seta no modelo fornecedor os valores do Formulário para então enviar para API
    this.supplierFormService
      .putSupplier(this.supplier.code + this.supplier.storeId, JSON.stringify(this.supplier), this.supplierType)
      .pipe(first())
      .subscribe(() => {
        this.poNotification.success('Fornecedor alterado com Sucesso');
        this.router.navigate(['/supplier']);//redireciona para lista de fornecedor
      }, err => this.poNotification.error(err));//exibe erro ao editar fornecedor
  }


  //part 3
  //Método para atribuir valores aos campos para formulário
  private setFormValue(): void {
    this.supplierFormService
      .getSupplier(this.supplierId, this.supplierType)
      .pipe(first())
      .subscribe((supplier:Supplier) => {
        console.log(supplier);
        this.supplierValues.code = supplier.code;
        this.supplierValues.storeId = supplier.storeId;
        this.supplierValues.name = supplier.name;
        this.supplierValues.shortName = supplier.shortName;
        this.supplierValues.strategicCustomerType = supplier.strategicCustomerType;
        this.supplierValues.entityType = supplier.strategicCustomerType;
        this.supplierValues.type = supplier.type;
        this.supplierValues.registerSituation = supplier.registerSituation;
        // Endereço
        this.supplierValues.address = supplier.address.address;
        this.supplierValues.cityCode = supplier.address.city.cityCode;
        this.supplierValues.cityCode = supplier.address.city.cityDescription;
        this.supplierValues.cityCode = supplier.address.city.cityInternalId;
        this.supplierValues.stateId = supplier.address.state.stateId;
        this.supplierValues.stateId = supplier.address.state.stateInternalId;

      });

  }



  //array para definir os nomes dos campos do formulário
  fields: Array = [
    {
      property: 'code',
      label: 'Código',
      divider: 'Dados Pessoais',
      maxLength: 6
    },
    {
      property: 'storeId',
      label: 'Loja',
      maxLength: 2
    },
    {
      property: 'name',
      label: 'Nome',
      maxLength: 40
    },
    {
      property: 'shortName',
      label: 'Nome Reduzido',
      maxLength: 20
    },
    {
      property: 'strategicCustomerType',
      label: 'Tipo do cliente',
      options: [
        { label: 'Cons. Final', value: 'F' },
        { label: 'Produtor Rural', value: 'L' },
        { label: 'Revendedor', value: 'R' },
        { label: 'Solidario', value: 'S' },
        { label: 'Exportação', value: 'X' }
      ]
    },
    {
      property: 'entityType',
      label: 'Tipo da entidade',
      options: [
        { label: 'Juridica', value: 'J' },
        { label: 'Fisica', value: 'F' }
      ]
    },
    {
      property: 'registerSituation', //Campo: A1_MSBLQL / A2_MSBLQL  == Status: 1 - Ativo, 2 - Inativo, 3 - Cancelado, 4 - Pendente, 5 -Suspenso
      label: 'Situação(MSBLQL)',
      options: [
        { label: 'Inativo', value: '1' },
        { label: 'Ativo', value: '2' }
      ]
    },
    {
      property: 'type',
      label: 'Tipo',
      options: [
        { label: 'Cliente', value: 1 },
        { label: 'Fornecedor', value: 2 }
      ]
    },
    {
      property: 'zipCode',
      label: 'CEP',
      divider: 'Endereço',
      maxLength: 9
    },
    {
      property: 'address',
      label: 'Endereço'
    },
    {
      property: 'cityCode',
      label: 'Cidade',
      options: [
        { label: 'Adolfo', value: '00204' },
        { label: 'São José do Rio Preto', value: '49805' },
        { label: 'José Bonifácio', value: '25706' },
        { label: 'Joinville', value: '09102' }
      ]
    },
    {
      property: 'stateId',
      label: 'Estado',
      options: [
        { label: 'Santa Catarina', value: 'SC' },
        { label: 'São Paulo', value: 'SP' },
        { label: 'Rio de Janeiro', value: 'RJ' },
        { label: 'Minas Gerais', value: 'MG' }
      ]
    },
    /*{
      property: 'branchId',
      label: 'Filial',
      divider: 'Sistemico'
    },
    {
      property: 'companyInternalId',
      label: 'Empresa'
    }*/
  ]
}

Agora a ultima etapa é ajustar o html que irá exibir os dados do nosso formulário para o usuário, para isso, edite o arquivo supplier-form.component.html, nele temos dois botões que serão exibidos em momentos diferentes, um para inclusão (action insertSupplier) e outro para alteração(updateSupplier), o que controlará quando cada um deve aparecer é a variavel no *ngIf, e deixe com a seguinte informação:

Após todas essas etapas, ao acessar o endereço http://localhost:4200/supplier, deve ser exibida a lista de fornecedores, se clicarmos nas ações e em excluir, o mesmo deve ser removido e a lista carregada, se selecionarmos a opção editar, o formulário deve ser aberto com os dados preenchidos, o resultado final da lista será semelhante ao print abaixo:

O código fonte desse e de outros exemplos podem ser encontrados em nosso git oficial.

Post interessantes:

Aprenda a instalar o Protheus no Windows aqui.

Aprenda a instalar o Protheus no Linux aqui.

configurar serviço rest aqui.

Retornar datas por extenso aqui.

Barras de progresso aqui.

Dúvidas e sugestões, entre em contato.

Obrigado e até a próxima!

O post CRUD Fornecedor usando PO.UI(Angular) e ERP Protheus – part 3 apareceu primeiro em Sem Preju.

CRUD Fornecedor usando PO.UI(Angular) e ERP Protheus – part 2

Rafael Gonçalves — Tue, 12 Jan 2021 14:25:09 +0000

Olá pessoal

No post anterior(veja aqui), configuramos nosso ambiente e criamos a listagem de fornecedores, vamos agora continuar com os próximos passos. Vamos agora criar a rotina para cadastrar um novo fornecedor, para isso vamos usar a mesma API mas o verbo agora será POST ao invés de GET. Vamos primeiro testar nossa API e consultar se nosso backend está funcionando corretamente (essa etapa é opcional), para isso vamos usar novamente o Postman.

Desta vez usaremos o verbo post a url apontando para nossa API e o Body da requisição será um arquivo do tipo JSON com os dados do fornecedor que queremos incluir, como no print abaixo.

 {            
    "type": 2,
    "code": "805539",
    "storeId": "01",    
    "shortName": "FORN 1              ",
    "name": "FORNECEDOR 99                           "   ,
    "strategicCustomerType": "J",
    "entityType":"J",
    "address": {
                "address": "RUA SEMPREJU                            ",
                "state": {
                    "stateId": "SP",
                    "stateInternalId": "SP"
                },
                "city": {
                    "cityCode": "00204"
                }
            }
}

A resposta deverá ser um arquivo JSON com todos os dados no nosso fornecedor, se tudo ocorreu corretamente aqui, vamos começar a tratar nosso frontend para usar a mesma API.

Criando Formulário para Inclusão do Fornecedor

A Primeira etapa do FrontEnd será criar o módulo, o serviço e o componente que iremos trabalhar, vamos executar os seguintes comandos(um de cada vez):

ng generate module supplier-form

ng generate service supplier-form\supplier-form

ng generate component supplier-form

Após isso deverá ter sido criada em seu projeto uma estrutura parecida com a imagem abaixo.

Antes de iniciarmos a codificação do nosso service e compomente, vamos criar alguns models para refletir o formato da entidade na TOTVS(Entidade Fornecedor retornada pelo WS, criamos somente os campos que vamos usar aqui no WS o correto seria criar a entidade toda). Para isso criamos uma pasta em nosso projeto chama model, e dentro dela os arquivos abaixo:

supplierModel.ts

import { Address } from './addressModel';

export class Supplier {
    companyInternalId: string;
    code: string ;
    name: string;
    storeId: string ;
    shortName: string;
    strategicCustomerType: string;
    registerSituation: string;
    type: number;
    entityType: string;
    address: Address = new Address();
    constructor(obj = {}) {
        Object.assign(this, obj);
    }
}

addressModel.ts

import { State } from './stateModel';
import { City } from './cityModel';

export class Address {
  address: string ;
  number: string ;
  zipCode: string ;
  complement: string ;
  district: string ;
  city: City = new City();
  state: State = new State();
  constructor(obj = {}) {
    Object.assign(this, obj);
}
}

cityModel.ts

export class City {
    cityCode: string ;
    cityInternalId: string ;
    cityDescription: string ;
    constructor(obj = {}) {
        Object.assign(this, obj);
    }
  }

stateModel.ts

export class State {
    stateId: string ;
    stateInternalId: string ;
    stateDescription: string ;
    constructor(obj = {}) {
        Object.assign(this, obj);
    }
  }

O resultado final deverá ser uma para como o print abaixo:

Criaremos a seguir a rota para o nosso novo componente, para isso edite o arquivo app-routing.module.ts e adicione as informações do novo componente, abaixo o resultado deve ser semelhante ao fonte abaixo:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';


import { SupplierListComponent } from './supplier-list/supplier-list.component';
import { SupplierFormComponent } from './supplier-form/supplier-form.component';

const routes: Routes = [
  { path: '', component: SupplierListComponent },
  { path: 'supplier', component: SupplierListComponent }, //lista de fornecedor
  { path: 'supplierform', component: SupplierFormComponent }, //form do fornecedor - inlcuir
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Agora só falta incluirmos nosso novo componente dentro do arquivo app.module.ts para podermos iniciar a codificação do formulário, o resultado final será semelhante ao código abaixo:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { PoModule } from '@po-ui/ng-components';
import { RouterModule } from '@angular/router';
import { PoNotificationModule  } from '@po-ui/ng-components';
import { PoDynamicModule } from '@po-ui/ng-components';
import { PoButtonModule } from '@po-ui/ng-components';
import {PoTemplatesModule  } from '@po-ui/ng-templates';

//incluir o componente para lista de fornecedores
import { SupplierListComponent } from './supplier-list/supplier-list.component';
import { SupplierFormComponent } from './supplier-form/supplier-form.component'; //formulario de inclusão/alteração

@NgModule({
  declarations: [
    AppComponent,SupplierListComponent,SupplierFormComponent
  ],
  imports: [
    PoNotificationModule,PoDynamicModule,PoButtonModule  ,PoTemplatesModule,
    BrowserModule,
    AppRoutingModule,
    PoModule,
    RouterModule.forRoot([])
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

No arquivo supplier-form.service.ts vamos criar o serviço responsável por enviar para nossa API os dados de um novo fornecedor para ser registrado, por agora esse aquivo é bem simples e somente realizar um post na API, abaixo o fonte que usamos(atenção para o endereço do seu backend):

import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Injectable } from '@angular/core';

import { Supplier } from '../model/supplierModel';

@Injectable({
  providedIn: 'root'
})
export class SupplierFormService {

 //Endereço de nosso backend
  ApiRest = 'http://localhost:8084/rest/api/crm/v1/customerVendor';
  
  constructor(private http: HttpClient) { }
  
  //Metódo para criar um novo Fornecedor
  postNewSupplier(body: string) {
    return this.http.post(this.ApiRest, body );
  }

}

No arquivo supplier-form.component.ts vamos criar o nosso tratamento do formulário, vamos usar o componente do PO.UI chamado po-dynami-form que facilita bastante a criação de formulário, no nosso componente vamos definir as colunas do formulário através do array fields , o método getSupplierFromForm, será responsável de pegar as informações no form e incluir no modelo “Supplier” (json esperado pela nossa API), e o método insertSupplier, será o reponsavel de chamar nosso serviço de post na API e apresetar mensagem de sucesso (em caso de sucesso, vamos redirecionar o usuári para nossa lista de fornecedores) ou falha, o código final deverá ser semelhante ao fonte abaixo:

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { PoDynamicFormField, PoNotificationService } from '@po-ui/ng-components';
import { Supplier } from '../model/supplierModel';
import { SupplierFormService } from './supplier-form.service';
import { first } from 'rxjs/operators';

@Component({
  selector: 'app-supplier-form',
  templateUrl: './supplier-form.component.html',
  styleUrls: ['./supplier-form.component.css']
})
export class SupplierFormComponent implements OnInit {

  //fields: Array&lt;PoDynamicFormField&gt; = []; //campos "dinamicos" para usar no formulário
  supplier: Supplier = new Supplier();//model de um fornecedor
  supplierValues = {    type: 2, code: "", storeId: "", shortName: "", name: "", strategicCustomerType: "J", entityType: "J",
  number: "", address: "", zipCode: "", stateId: "", stateInternalId: "",
  stateDescription: "", complement: "", district: "", cityCode: "", cityDescription: ""}; //array com os valores do fomulário
  supplierType: string | any = '2'; //no nosso exemplo será sempre 2=fornecedor, mas poderia ser 1=cliente
  supplierId: string | any;
  title = 'Inclusão de Fornecedor';

  constructor(private supplierFormService: SupplierFormService, //servico do form
    private poNotification: PoNotificationService, //usar as notificações do PO.UI
    private route: ActivatedRoute,
    private router: Router,
  ) { }

  ngOnInit(): void {
    //define valores padrão para formulário
    this.supplierValues = {
      type: 2, code: "", storeId: "", shortName: "", name: "", strategicCustomerType: "J", entityType: "J",
      number: "", address: "", zipCode: "", stateId: "", stateInternalId: "",
      stateDescription: "", complement: "", district: "", cityCode: "", cityDescription: ""
    }
  }

  //Método para inserir um novo fornecedor
  insertSupplier(): void {
    this.getSupplierFromForm();
    this.supplierFormService.postNewSupplier(JSON.stringify(this.supplier)) //grava o novo fornecedor
      .pipe(first())
      .subscribe(() =&gt; {
        this.poNotification.success('Fornecedor foi inserido com Sucesso');
        this.router.navigate(['/supplier']); //redireciona para lista de fornecedor
      }, err =&gt; {
        //se error devolve o erro do Backend para o usuário
        let messErr = JSON.parse(err.error.errorMessage);
        this.poNotification.error(`Erro código ${messErr.code},  ${decodeURIComponent(escape(messErr.message))}, detalhe: ${decodeURIComponent(escape(messErr.detailedMessage))}.`)
      }
        
        ); //exibe erro ao inserir fornecedor
  }
  //alimenta o modelo de dados
  private getSupplierFromForm(): void {
    // dados pessoais
    this.supplier.code = this.supplierValues.code;
    this.supplier.storeId = this.supplierValues.storeId;
    this.supplier.name = this.supplierValues.name;
    this.supplier.shortName = this.supplierValues.shortName;
    this.supplier.strategicCustomerType = this.supplierValues.strategicCustomerType;
    this.supplier.entityType = this.supplierValues.entityType;
    this.supplier.type = this.supplierValues.type;
    // sistemicos
   // this.supplier.branchId = this.supplierValues.branchId;
   // this.supplier.companyInternalId = this.supplierValues.companyInternalId;
    // Endereço
    this.supplier.address.address = this.supplierValues.address;
    this.supplier.address.city.cityCode = this.supplierValues.cityCode;
    this.supplier.address.city.cityDescription = this.supplierValues.cityCode;
    this.supplier.address.city.cityInternalId = this.supplierValues.cityCode;
    this.supplier.address.state.stateId = this.supplierValues.stateId;
    this.supplier.address.state.stateInternalId = this.supplierValues.stateId;
  }

  //array para definir os nomes dos campos do formulário
  fields: Array&lt;PoDynamicFormField&gt; = [
    {
      property: 'code',
      label: 'Código',
      divider: 'Dados Pessoais',
      maxLength: 6
    },
    {
      property: 'storeId',
      label: 'Loja',
      maxLength: 2
    },
    {
      property: 'name',
      label: 'Nome',
      maxLength: 40
    },
    {
      property: 'shortName',
      label: 'Nome Reduzido',
      maxLength: 20
    },
    {
      property: 'strategicCustomerType',
      label: 'Tipo do cliente',
      options: [
        { label: 'Cons. Final', value: 'F' },
        { label: 'Produtor Rural', value: 'L' },
        { label: 'Revendedor', value: 'R' },
        { label: 'Solidario', value: 'S' },
        { label: 'Exportação', value: 'X' }
      ]
    },
    {
      property: 'entityType',
      label: 'Tipo da entidade',
      options: [
        { label: 'Juridica', value: 'J' },
        { label: 'Fisica', value: 'F' }
      ]
    },
    {
      property: 'registerSituation',
      label: 'Situação',
      options: [
        { label: 'Inativo', value: '1' },
        { label: 'Ativo', value: '2' }
      ]
    },
    {
      property: 'type',
      label: 'Tipo',
      options: [
        { label: 'Cliente', value: 1 },
        { label: 'Fornecedor', value: 2 }
      ]
    },
    {
      property: 'zipCode',
      label: 'CEP',
      divider: 'Endereço',
      maxLength: 9
    },
    {
      property: 'address',
      label: 'Endereço'
    },
    {
      property: 'cityCode',
      label: 'Cidade',
      options: [
        { label: 'Adolfo', value: '00204' },
        { label: 'São José do Rio Preto', value: '49805' },
        { label: 'José Bonifácio', value: '25706' },
        { label: 'Joinville', value: '09102' }
      ]
    },
    {
      property: 'stateId',
      label: 'Estado',
      options: [
        { label: 'Santa Catarina', value: 'SC' },
        { label: 'São Paulo', value: 'SP' },
        { label: 'Rio de Janeiro', value: 'RJ' },
        { label: 'Minas Gerais', value: 'MG' }
      ]
    },
    /*{
      property: 'branchId',
      label: 'Filial',
      divider: 'Sistemico'
    },
    {
      property: 'companyInternalId',
      label: 'Empresa'
    }*/
  ]
}

Agora a ultima etapa é ajustar o html que irá exibir os dados do nosso formulário para o usuário, para isso, edite o arquivo supplier-form.component.html, e deixe com a seguinte informação:

Após todas essas etapas, ao acessar o endereço http://localhost:4200/supplierform, deve ser exibida o form permitindo a inclusão em nosso backend e exibindo os erros encontrados se existirem, o resultado final será semelhante ao print abaixo:

O código fonte desse e de outros exemplos podem ser encontrados em nosso git oficial.

Post interessantes:

Aprenda a instalar o Protheus no Windows aqui.

Aprenda a instalar o Protheus no Linux aqui.

configurar serviço rest aqui.

Retornar datas por extenso aqui.

Barras de progresso aqui.

Dúvidas e sugestões, entre em contato.

Obrigado e até a próxima!

O post CRUD Fornecedor usando PO.UI(Angular) e ERP Protheus – part 2 apareceu primeiro em Sem Preju.

CRUD Fornecedor usando PO.UI(Angular) e ERP Protheus – part 1

Rafael Gonçalves — Tue, 05 Jan 2021 13:40:13 +0000

Olá pessoal

Hoje vou iniciar uma série onde vamos demonstrar como realizar manutenção no cadastro de fornecedor (CRUD) usando o REST e a Angular (com PO.UI).

Usamos como referência o seguinte post.

Primeiro vamos realizar as configurações necessárias para nosso projeto, nessa etapa vamos precisar:

Serviço REST configurado e rodando, para isso temos um post onde explicamos essa configuração, pode ser encontrado aqui. Caso queira criar um WS (não precisamos para este post) pode ser encontrado aqui.
Criar novo projeto angular, para isso precisamos dos seguintes passos:
1. Node.js – Responsável por administrar os pacotes NPM para a instalação do Angular em batch (linha de comando). Para assegurar que a instalação ocorreu bem, no Prompt de Comando rode o seguinte comando npm -v, deverá aparecer a versão que foi instalada do npm (administrador de pacotes do Node.js).
2. Instalar Angular CLI – Responsável por nos ajudar a iniciar um projeto ou adicionar novas funcionalidades a projetos existentes. Para isso basta rodar no Prompt de Comando: npm install –g @angular/cli
3. Projeto Angular – Executar o comando CLI ng new e informar o nome do nosso projeto, no nosso exemplo usaremos o seguinte: ng new CRUD_Cliente
4. Adicionar o PO.UI (Biblioteca de componentes baseado no Angular, poderiamos utilizar qualquer outra biblioteca como Ant, Material, Bootstrap, entre outras), Utilizando o comando ng add do Angular CLI, vamos adicionar o Po em seu projeto e o mesmo se encarregará de configurar o tema, instalar o pacote e importar o módulo do Po. Execute o comando abaixo na pasta raiz do seu projeto(dentro da pasta do nosso projeto CRUD_CLiente): ng add @po-ui/ng-components.
5. Agora podemos testar nosso aplicativo angular para isso no Prompt de Comando, digite: ng serve (pode demorar alguns minutos na primeira execução), após acesso em seu navegador http://localhost:4200/ você deverá ver a página de boas vindas do angular.
6. Instalar Postman – O postman nos ajuda a realizar a consulta na API do protheus sem necessidade de desenvolver nenhum código.

Agora que temos os requisitos configurados, precisamos encontrar a API que será responsável para este nosso CRUD. No site o api.totvs.com.br, podemos ver todas as API disponíveis e realizar filtros para localizarmos a que nos interessa mais, em nosso caso encontramos a API Cliente/Fornecedor.

Vamos agora começar a nossa aplicação Angular para nosso CRUD, primeiramente vamos listar todos os nossos fornecedores que existe no ERP (usando a API).

Para testar nosso backend antes de usa-lo no angular, vamos abrir o postman e verificar se a API está respondendo corretamente (esse passo é opcional, eu gosto sempre de isolar pois assim tenho certeza que meu backend esta funcionado e se tiver algum problema é em meu frontend). Para isso no postman, informe a URL onde seu serviço REST esta respondendo, para minha configuração é:

http://localhost:8084/rest/api/crm/v1/customerVendor/2

Deverá ser exibido como resposta no formato Json com os dados dos nossos fornecedores, confirme o print abaixo.

O ultimo parâmetro da url significa:

Valor 2, diz para minha API que eu quero somente os fornecedores,;
Valor 1, diz para minha API que eu quero somente os clientes;
Valor 3 ou vazio, diz para minha API que eu quero todos os clientes e fornecedores.

para isso vamos para o Angular (aqui usaremos o VS Code) e usando as facilidades do angular CLI, vamos criar um novo módulo que será responsável por essa tarefa, para isso dentro no nosso projeto usando o Prompt de Command, vamos executar os seguintes comandos(um de cada vez):

ng generate module supplier-list

ng generate service supplier-list\supplier-list

ng generate component supplier-list

Após isso deverá ter sido criada em seu projeto uma estrutura parecida com a imagem abaixo.

Após a criação das rotinas, criaremos o serviço de listagem de fornecedores. Para isso, podemos acessar o arquivo supplier-list.service.ts e vamos criar o método que irá buscar estas informações no backend.

Também criei dentro do service um método para alterar e definir os nomes das colunas, o arquivo supplier-list.service.ts deverá ter o seguinte conteúdo:

import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { PoTableColumn } from '@po-ui/ng-components';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class SupplierListService {

  ApiRest = 'http://localhost:8084/rest/api/crm/v1/customerVendor/2'; //Endereço da nossa API responsável por lista os fornecedores
  
  constructor(private http: HttpClient) { }

  //Método responsável por buscar e listar nossos fornecedores
  getSupplierList(): Observable {
    return this.http.get(this.ApiRest);
  }

  //Método responsável por converter em nomes mais legiveis para cliente
  getColumns(): Array {
    return [
      { property: 'code', label: 'Código'},
      { property: 'storeId', label: 'Loja' },
      { property: 'name', label: 'Nome' },
      { property: 'strategicCustomerType', label: 'Fisica/Juridica' },
      { property: 'registerSituation', label: 'Situação' },
    ];
  }

}

Agora que temos o serviço responsável por buscar os dados na API, vamos configurar nosso component para pegar utilizar os dados recebidos no servido e disponibilizar para nossa interface, no arquivo suppliur-list.components.ts, deverá ter a seguinte informação:

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { PoNotificationService } from '@po-ui/ng-components';
import { SupplierListService } from './supplier-list.service';

@Component({
  selector: 'app-supplier-list',
  templateUrl: './supplier-list.component.html',
  styleUrls: ['./supplier-list.component.css']
})
export class SupplierListComponent implements OnInit {

  supplierList: Array = new Array();
  colunasTable: Array = new Array();

  constructor(private SupplierListService: SupplierListService,
    private router: Router,
    private poNotification: PoNotificationService) { }

  ngOnInit(): void {
    this.updateSupplierList(); //busca a lista de fornecedores do nosso Api
    this.colunasTable = this.SupplierListService.getColumns(); //atualiza as colunas que queremos ser listadas em nossa tabela.
  }
  //Metódo responsável por se isncrever no serviço e atualizar a lista de fornecedores
  updateSupplierList(): void {
    this.SupplierListService.getSupplierList().subscribe(response => {
      this.supplierList = response.items;
    });
  }
}

Agora devemos ajustar o html que irá exibir os dados para o usuário, para isso, edite o arquivo supplier-list.component.html, inclua a deixe com a seguinte informação:

Após essas etapas, só precisamos criar a rota no angular responsável por mostrar nosso html, para isso edite o arquivo app-routing.modules.ts e inclua as informações do nosso novo componente, como o código abaixo:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';


import { SupplierListComponent } from './supplier-list/supplier-list.component';

const routes: Routes = [
  { path: '', component: SupplierListComponent },
  { path: 'supplier', component: SupplierListComponent }, //lista de fornecedor
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Devemos ainda verificar o arquivo app.component.html para garantir que está exibindo as informações da nossa roda, esse arquivo deve ter o seguinte conteúdo:

Agora só falta incluírmos nosso novo componente dentro do arquivo app.module.ts, o resultado final será semelhante ao código abaixo:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { PoModule } from '@po-ui/ng-components';
import { RouterModule } from '@angular/router';
import { PoNotificationModule  } from '@po-ui/ng-components';
import { PoDynamicModule } from '@po-ui/ng-components';
import { PoButtonModule } from '@po-ui/ng-components';
import {PoTemplatesModule  } from '@po-ui/ng-templates';

//incluir o componente para lista de fornecedores
import { SupplierListComponent } from './supplier-list/supplier-list.component';

@NgModule({
  declarations: [
    AppComponent,SupplierListComponent
  ],
  imports: [
    PoNotificationModule,PoDynamicModule,PoButtonModule  ,PoTemplatesModule,
    BrowserModule,
    AppRoutingModule,
    PoModule,
    RouterModule.forRoot([])
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Após todas essas etapas, ao acessar o endereço http://localhost:4200/, deve ser exibida a lista de Fornecedores que temos em nosso ERP.

*Obs.: caso tenha erro de CORS, veja mais aqui.

O código fonte de outros exemplos podem ser encontrados em nosso git oficial.

Post interessantes:

Aprenda a instalar o Protheus no Windows aqui.

Aprenda a instalar o Protheus no Linux aqui.

configurar serviço rest aqui.

Retornar datas por extenso aqui.

Barras de progresso aqui.

Dúvidas e sugestões, entre em contato.

Obrigado e até a próxima!

O post CRUD Fornecedor usando PO.UI(Angular) e ERP Protheus – part 1 apareceu primeiro em Sem Preju.

Alterando para o novo visual do Protheus com PO UI

Rafael Gonçalves — Tue, 15 Dec 2020 13:43:41 +0000

Olá pessoal, já conferiram o novo visual do protheus?

Com a evolução da tecnologia, o Protheus veio se adaptando e evoluindo conforme as necessidades do mercado, um avanço mesmo por exemplo, foi a utilização de CSS nos componentes gráficos, através das funcionalidades fornecidas com o usdo to TWebEngine e FWCallApp, será possível criar aplicações com o visual e recursos usados na web, ou seja visualmente mais modernos, e através de REST integrá-las com o Protheus.

A documentação (inclusive em como ativar) você confere em https://tdn.totvs.com/display/framework/Nova+interface+do+Protheus+com+PO+UI

Nessa primeira fase, a novidade chega com a tela de login e a de seleção de ambiente, abaixo o print do novo visual.

O código fonte desse e outros exemplos podem ser encontrados em nosso git.

Post interessantes:

Ponto de entrada ao acessar o sistema aqui.

Aprenda a instalar o Protheus no Windows aqui.

Aprenda a instalar o Protheus no Linux aqui.

Retornar datas por extenso aqui.

Barras de progresso aqui.

Dúvidas e sugestões, entre em contato.

Obrigado e até a próxima!

O post Alterando para o novo visual do Protheus com PO UI apareceu primeiro em Sem Preju.

Autenticação com JWT + Protheus + Angular

Rafael Gonçalves — Tue, 13 Oct 2020 11:37:04 +0000

Olá pessoal

Essa dica vai para quem está iniciando no desenvolvimento Angular e quer realizar o login usando o protheus como backEnd!

Nesse exemplo vamos usar a autenticação via JWT (usando os serviçoes já existentes no protheus), para saber mais sobre JWT no protheus, acesse a documentação aqui.

A documentação oficial da rotina pode ser encontrada aqui.

O exemplo funcional pode ser baixado em nosso git, clique aqui para ser direcionado.

Para executar esse projeto, temos que executar os passos abaixos:

1-Configurar o serviço REST no protheus, aqui tem um exemlo de como fazer isso.

2-Com o nosso serviço REST configurado e validado, conseguimos realizar a autentição de nosso usuário, então agora passamos para o angula, não itemos entrar em detalhes como criar um projeto angular com JWT, pois não é o foco desse post, mas um bom exemplo pode ser encontrado aqui. Nesse post vamos baixar o nosso projeto disponivel no GIT.

3-Assumiremos aqui que você tem o Angular e Angular.Cli ja instalado em seu computador.

4-Após baixar o projeto, no diretório raiz vamos instalar as dependencias com o comando:

npm install

5-Após a conclusão, vamos iniciar nosso projeto com o comando:

ng serve

6-Se tudo ocorreu bem até aqui, ao acessar a URL localhost:4200, você se deparará com a tela abaixo para realizar o login usando usuario e senha do protheus.

7-Insira um usuário e senha e aguarde o carregamento, uma lista com todos os clientes do seu ERP protheus deverá ser exibida como o print abaixo.

Nesse etapa o que conseguimos realizar:

-Autenticação de usuário usando o Protheus como BackEnd

-Usar JWT para verificar se nosso usuário ainda é válido na seção

-Consumir WebService REST para retornar a lista de clientes do ERP Protheus.

-Integrar Angular + Protheus

Assim finalizamos nosso objetivo desse post, se você quiser mais conteudos de ADVPL + REST + Angular deixe nos comentários sugestões!

O código fonte desse e outros exemplos podem ser encontrados em nosso git.

Post interessantes:

Aprenda a instalar o Protheus no Windows aqui.

Aprenda a instalar o Protheus no Linux aqui.

Retornar datas por extenso aqui.

Barras de progresso aqui.

Dúvidas e sugestões, entre em contato.

Obrigado e até a próxima!

O post Autenticação com JWT + Protheus + Angular apareceu primeiro em Sem Preju.

Meu primeiro serviço REST no Protheus – parte 2

Rafael Gonçalves — Fri, 13 Mar 2020 13:36:53 +0000

No post anterior sobre REST aprendemos a configurar o appserver para responder como servidor REST, se ainda nao viu esse post clique aqui.

Nesse post vamos criar um WebService simples para retornar os dados dos clientes através de REST.

Trataremos neste código sobre paginação, filtros e retorno JSON.

O para acessar o nosso WS, vamos usar {endereço WS configurado}/path definido no WS.

Abaixo o código usando:

#include "TOTVS.CH"
#Include "RWMAKE.CH"
#Include "RESTFUL.CH"

//Exemplo de WS para retorno do cliente
//Para mais informações acesse: www.sempreju.com.br e/ou nosso GIT https://github.com/llrafaell/SemPreju-Exemplos
WSRESTFUL SPCliente DESCRIPTION "Clientes API" FORMAT APPLICATION_JSON
	WSDATA page					AS INTEGER	OPTIONAL
	WSDATA pageSize 			AS INTEGER	OPTIONAL
	WSDATA searchKey 			AS STRING	OPTIONAL
	WSDATA branch				AS STRING 	OPTIONAL
	WSDATA byId					AS BOOLEAN	OPTIONAL

//Endereço para pegar os dados
//http://localhost:8082/rest/api/v1/spcliente
//WSMETHOD GET customers DESCRIPTION 'SP Lista de Clientes' WSSYNTAX '/api/v1/spcliente' PATH '/api/v1/spcliente' TTALK 'V1' PRODUCES APPLICATION_JSON  //-- Retorna lista de clientes, com possibilidade de paginaçao e filtros.
WSMETHOD GET customers DESCRIPTION 'SP Lista de Clientes' WSSYNTAX '/api/v1/spcliente' PATH '/api/v1/spcliente' PRODUCES APPLICATION_JSON  //-- Retorna lista de clientes, com possibilidade de paginaçao e filtros.

END WSRESTFUL




//-------------------------------------------------------------------
/*/{Protheus.doc} GET / cliente
Retorna a lista de clientes disponíveis.

@param	SearchKey		, caracter, chave de pesquisa utilizada em diversos campos
		Page			, numerico, numero da pagina
		PageSize		, numerico, quantidade de registros por pagina
		byId			, logico, indica se deve filtrar apenas pelo codigo

@return cResponse		, caracter, JSON contendo a lista de clientes

@author	rafael.goncalves
@since		Mar|2020
@version	12.1.27
/*/
//-------------------------------------------------------------------
WSMETHOD GET customers WSRECEIVE searchKey, page, pageSize, branch WSREST SPCliente
	Local lRet:= .T.
	lRet := Customers( self )
Return( lRet )

Static Function Customers( oSelf )
	Local aListCli	:= {}
	Local cJsonCli		:= ''
	Local oJsonCli	:= JsonObject():New()
	Local cSearch		:= ''
	Local cWhere		:= "AND SA1.A1_FILIAL = '"+xFilial('SA1')+"'"
	Local nCount		:= 0
	Local nStart 		:= 1
	Local nReg 			:= 0
	Local nAux			:= 0
	Local cAliasSA1		:= GetNextAlias()

	Default oself:searchKey 	:= ''
	Default oself:branch		:= ''
	Default oself:page		:= 1
	Default oself:pageSize	:= 20
	Default oself:byId		:=.F.

	// Tratativas para realizar os filtros
	If !Empty(oself:searchKey) //se tiver chave de busca no request
		cSearch := Upper( oself:SearchKey )
		If oself:byId //se filtra somente por ID
			cWhere += " AND SA1.A1_COD = '"	+ cSearch + "'"
		Else//busca chave nos campos abaixo
			cWhere += " AND ( SA1.A1_COD LIKE 	'%"	+ cSearch + "%' OR "
			cWhere	+= " SA1.A1_LOJA LIKE 		'%" + cSearch + "%' OR "
			cWhere	+= " SA1.A1_NOME LIKE 		'%" + FwNoAccent( cSearch ) + "%' OR "
			cWhere	+= " SA1.A1_NREDUZ LIKE 	'%" + FwNoAccent( cSearch ) + "%' OR "
			cWhere	+= " SA1.A1_NREDUZ LIKE 	'%" + cSearch  + "%' OR "
			cWhere	+= " SA1.A1_NOME LIKE 		'%" + cSearch + "%' ) "
		EndIf
	EndIf

	If !Empty(oself:branch) //se filtra a loja
		cWhere += " AND SA1.A1_LOJA = '"+oself:branch+"'"
	EndIf

	dbSelectArea('SA1')
	DbSetOrder(1)
	If SA1->( Columnpos('A1_MSBLQL') > 0 ) //verifica se o campo de controle de bloqueio existe, se sim filtra esse caso
		cWhere += " AND SA1.A1_MSBLQL <> '1'"
	EndIf

	cWhere := '%'+cWhere+'%' //monta a expressao where

	// Realiza a query para selecionar clientes
	BEGINSQL Alias cAliasSA1
		SELECT SA1.A1_COD, SA1.A1_LOJA, SA1.A1_NOME, SA1.A1_END
		FROM 	%table:SA1% SA1
		WHERE 	SA1.%NotDel%
		%exp:cWhere%
		ORDER BY A1_COD
	ENDSQL

	If ( cAliasSA1 )->( ! Eof() )
		//-------------------------------------------------------------------
		// Identifica a quantidade de registro no alias temporário
		//-------------------------------------------------------------------
		COUNT TO nRecord
		//-------------------------------------------------------------------
		// nStart -> primeiro registro da pagina
		// nReg -> numero de registros do inicio da pagina ao fim do arquivo
		//-------------------------------------------------------------------
		If oself:page > 1
			nStart := ( ( oself:page - 1 ) * oself:pageSize ) + 1
			nReg := nRecord - nStart + 1
		Else
			nReg := nRecord
		EndIf

		//-------------------------------------------------------------------
		// Posiciona no primeiro registro.
		//-------------------------------------------------------------------
		( cAliasSA1 )->( DBGoTop() )

		//-------------------------------------------------------------------
		// Valida a exitencia de mais paginas
		//-------------------------------------------------------------------
		If nReg  > oself:pageSize
			oJsonCli['hasNext'] := .T.
		Else
			oJsonCli['hasNext'] := .F.
		EndIf
	Else
		//-------------------------------------------------------------------
		// Nao encontrou registros
		//-------------------------------------------------------------------
		oJsonCli['hasNext'] := .F.
	EndIf

	//-------------------------------------------------------------------
	// Alimenta array de clientes
	//-------------------------------------------------------------------
	While ( cAliasSA1 )->( ! Eof() )
		nCount++
		If nCount >= nStart
			nAux++
		    aAdd( aListCli , JsonObject():New() )
			aListCli[nAux]['id']	:= ( cAliasSA1 )->A1_COD
			aListCli[nAux]['name']	:= Alltrim( EncodeUTF8( ( cAliasSA1 )->A1_NOME ) )
			aListCli[nAux]['branch']	:= ( cAliasSA1 )->A1_LOJA
			aListCli[nAux]['address']	:= ( cAliasSA1 )->A1_END
			If Len(aListCli) >= oself:pageSize
				Exit
			EndIf
		EndIf
		( cAliasSA1 )->( DBSkip() )
	End
	( cAliasSA1 )->( DBCloseArea() )
	oJsonCli['clients'] := aListCli

	//-------------------------------------------------------------------
	// Serializa objeto Json
	//-------------------------------------------------------------------
	cJsonCli:= FwJsonSerialize( oJsonCli )

	//-------------------------------------------------------------------
	// Elimina objeto da memoria
	//-------------------------------------------------------------------
	FreeObj(oJsonCli)
	oself:SetResponse( cJsonCli ) //-- Seta resposta
Return .T.

O código fonte desse e outros exemplos podem ser encontrados em nosso git.

Para testar o nosso WS, vamos usar a ferramenta Postman.

1-Instale o postman através do link de download aqui.

2-Execute o postman e informe a URL como no print abaixo:

3-Ao clicar em “SEND”, se tudo ocorreu bem, devemos ver a nossa lista de clientes como retorno.

4-Para usarmos o filtro ou paginação, devemos adicionar as “tag”no Header de nossa requisição, para isso no postman, vamos clicar em Header e por exemplo adicionar um filtro, no nosso WS o filtro foi definido com a tag searchKey, a requisição e retorno deve ficar como o print abaixo.

Assim concluimos nosso primeiro WS.

Post relacionados:

Aprenda a instalar o Protheus aqui.

Aprenda a mudar o logo do sistema aqui.

Aprenda a diferença de path relativo e absoluto aqui.

Dúdivas e sugestões, entre em contato.

Obrigado e até a próxima!

O post Meu primeiro serviço REST no Protheus – parte 2 apareceu primeiro em Sem Preju.

Webservice REST no ERP Protheus – parte 1

Rafael Gonçalves — Mon, 17 Feb 2020 17:21:27 +0000

Introdução

REST é um acrônimo para Representational State Transfer – uma descrição quase sem sentido da tecnologia de serviço da web mais usada! O REST é uma maneira de dois sistemas de computador se comunicarem via HTTP de maneira semelhante aos navegadores e servidores da Web.

Compartilhar dados entre dois ou mais sistemas sempre foi um requisito fundamental do desenvolvimento de software. Por exemplo, considere comprar um seguro automóvel. Sua seguradora deve obter informações sobre você e seu veículo para solicitar dados das autoridades de registro de automóveis, agências de crédito, bancos e outros sistemas. Tudo isso acontece de forma transparente em tempo real para determinar se uma política pode ser oferecida.

O principal nesta arquitetura são as URLs do sistema e os resources (resource é um recurso, entidade). Ele aproveita os métodos HTTP para se comunicar, que são:

GET: Use solicitações GET para recuperar apenas informações / representação de recursos – e não modificá-las de nenhuma maneira. Como as solicitações GET não alteram o estado do recurso, esses métodos são considerados seguros . Além disso, as APIs GET devem ser idempotentes , o que significa que fazer várias solicitações idênticas deve produzir o mesmo resultado todas as vezes até que outra API (POST ou PUT) altere o estado do recurso no servidor.

POST: Use APIs do POST para criar novos recursos, por exemplo, um arquivo é subordinado a um diretório que o contém ou uma linha é subordinada a uma tabela de banco de dados. Falando estritamente em termos de REST, os métodos POST são usados para criar um novo recurso na coleção de recursos.

DELETE: Conforme o nome se aplica, as APIs DELETE são usadas para excluir recursos

PUT: Use APIs PUT principalmente para atualizar o recurso existente (se o recurso não existir, a API poderá decidir criar um novo recurso ou não). A principal diferença entre POST e PUT é que o primeiro pode lidar não somente com recursos, mas também pode fazer processamento de informações

Configuração REST no Protheus

O web service REST do AdvPL não utiliza as seções HTTP e WebServices utilizadas para o configurar o modelo SOAP.

Apesar disso o REST também utiliza working threads para atender as requisições recebidas também pelo protocolo HTTP.

O primeiro passo para criarmos um serviço REST é configurar o Protheus como um servidor HTTP REST. Para isso vamos manipular o arquivo .ini do AppServer, conforme exemplo abaixo:

A função HTTP_START que prepara o AppServer como servidor HTTP para REST, necessitando ser configurada na seção ONSTART:

[GENERAL] MAXSTRINGSIZE=10

[ONSTART] JOBS=HTTPJOB REFRESHRATE=120

[HTTPJOB] MAIN=HTTP_START ENVIRONMENT=LOBO_12_25

A chave MAXSTRINGSIZE é obrigatória na seção GENERAL com valor mínimo 10 para que o REST suporte requisições com mais de 1Mb

Habilitando o servidor HTTP para REST:

[HTTPV11] Enable=1 Sockets=HTTPREST

Obs:
A chave Sockets referencia a(s) seção(ões) com a configuração de porta e URL que a mesma irá atender, permitindo que o Application Server seja configurado com mais de uma porta HTTP do REST:

Configuração do(s) socket(s) definidos na seção HTTPV11:

[HTTPREST] Port=8084 IPsBind= URIs=HTTPURI Security=0 ;Public=classe/path/get1,classe2/path/gety,classe3/path/post ;Notenant=classe/path/get2,classe2/path/getv,classe3/path/post2

Parâmetro	Descrição
Port	Porta HTTP
IPsBind	Indica os IPs que serão atendidos por essa porta, se não informado atenderá qualquer IP / DNS associado ao servidor
URIs	Seções com configuração de URL e ambiente (pelo menos uma seção)
Security	Indica se a autenticação de requisição esta habilitada
Public	Chave pública que contém listas de EndPoints que não possuem autenticação
NoTenant	Ao ser usada não será validada as empresas/filiais, apenas a autenticação do usuário.

Observação:
O HTTP do REST verifica existência do campo Authorization no HEADER da requisição, porém a autorização é realizada pelo framework do produto que está/ utilizando o protocolo

Para facilitar o desenvolvimento e testes pode-se configurar a chave Security com valor 0 (zero) para desabilitar a autenticação

A chave URIs referência a(s) seção(ões) com a configuração da URL que a porta irá atender, permite também que seja configurado com mais de uma URL como exemplo abaixo:

[HTTPREST] Port=8084 IPsBind= URIs=HTTPURI,HTTPURI2 Security=1

Configuração da(s) seções URIs:

[HTTPURI] URL=/rest PrepareIn=99,01 Instances=1,1

CORSEnable=1 AllowOrigin=*

Parâmetro	Descrição
URL	Indica o endereço que será atendido Nesse exemplo http://localhost:8012/rest
Preparein	Informações de empresa e filial para preparação do ambiente das working threads
Instances	Configuração de inicialização de working threads
CorsEnable	Indica se habilita o CORS

Observaçoes
A chave CORS é utilizada para permitir que páginas WEB de diferentes domínio do qual o servidor HTTP do Protheus está alocado, consigam realizar a requisição na nossa URI.

Essa parte configuração não temos muito como fugir do que está descrito no TDN, está bem documentado por parte da TOTVS.

Após a configuração, o appserver.ini deverá ficar da seguinte maneira:

[HTTPV11] Enable=1 Sockets=HTTPREST

[HTTPREST] Port=8084 URIs=URIHTML SECURITY=1

[URIHTML] URL=/rest PrepareIn=All Instances=2,2 CORSEnable=1 AllowOrigin=*

[ONSTART] jobs=HTTPJOB RefreshRate=30

[HTTPJOB] MAIN=HTTP_START ENVIRONMENT=LOBO_12_25

Iniciando o AppServer

Após a adição das seções no .ini, deve reiniciar o appserver e podemos ver no log que está no ar nosso servidor http/rest:

Testando a Configuração REST

Com nosso servidor web no ar, vamos acessar via navegador a URI que configuramos no .ini, para ter 100% de certeza que esta tudo ok com o nosso servidor REST

Para acessar nossa URI, devemos acessar o caminho definido via navegador. Nesse caso, (exemplo acima) a URL que vamos acessar para testar nossa URI é a seguinte:

http://localhost:8084/rest

Se tudo estiver ok, será exibido a seguinte tela:

Onde nada mais é que uma página WEB contendo todas as API’s Rest que está disponível no nosso ERP Protheus.

Conclusão

Neste artigo vimos como configurar o servidor Protheus como HTTP REST, dessa forma podemos utiliza-lo para realizar integrações com outros aplicativos.

Referencias:

https://tdn.totvs.com/pages/viewpage.action?pageId=185747842

https://tdn.totvs.com/display/framework/REST+ADVPL

https://tdn.totvs.com/pages/viewpage.action?pageId=185757438

https://tdn.totvs.com/display/tec/Instances

No próximo post vamos criar o nosso promeiro WebServer REST.

Até lá

Abraços

O post Webservice REST no ERP Protheus – parte 1 apareceu primeiro em Sem Preju.