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

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:

1. 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.
2. 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<any> {
    return this.http.get(this.ApiRest);
  }

  //Método responsável por converter em nomes mais legiveis para cliente
  getColumns(): Array<PoTableColumn> {
    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<any> = new Array();
  colunasTable: Array<any> = 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:

<po-page-default p-title="Lista de Fornecedores">
    <po-table
      p-container="light"
      [p-columns]="colunasTable"
      [p-items]="supplierList">
    </po-table>
  </po-page-default>

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:

<div class="container">
  <router-outlet></router-outlet>
</div>

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!