Se você busca dar um salto na sua aplicação PO-UI e fazer com que ela interaja de forma eficiente com o TOTVS Protheus, este conteúdo é para você! Vamos explorar passo a passo como integrar uma API REST ao PO-UI, focando no método POST para salvar dados diretamente no Protheus.

Introdução à Integração PO-UI e API REST

Iniciamos este projeto com um formulário simples em PO-UI, criado na aula anterior, porém sem funcionalidade para enviar e salvar dados no banco do Protheus. O grande desafio e objetivo deste tutorial é justamente implementar melhorias nesse formulário, fazendo a integração com a API REST para que ele funcione plenamente, salvando as primeiras informações no sistema.

Preparando o Ambiente e Importando a API REST

Para começar, abrimos o VS Code e criamos uma pasta chamada Rest. Nela, colocamos o arquivo fonte da API REST, já desenvolvido no curso de REST, disponível como material de apoio para facilitar o acompanhamento.

Após adicionar o código da API, o próximo passo é recompilar o arquivo ou pasta para incluir esse componente no RPO do Protheus. Com isso, a API estará pronta para ser consumida pelo nosso projeto PO-UI. Lembrando que os serviços do REST têm que estar ativados no APPServer .ini do protheus

Configurando o Formulário no PO-UI

Dentro do projeto, acessamos o arquivo app.component.html para modificar o formulário. Removemos o componente antigo po-input e adicionamos um novo formulário dinâmico utilizando a classe PoDynamicForm.

Definimos o nome do formulário como #incluirUserForm e especificamos os campos que ele terá no app.component.ts, serão eles: Código, nome, documento e telefone. Cada campo é configurado com propriedades como etiqueta, tamanho na tela (grid column) e tipo (numérico ou caractere), alinhando-os com o tipo de dado da tabela customizada no banco do Protheus.

Implementando a Lógica no app.component.ts

No arquivo app.component.ts, declaramos os campos do formulário dentro de um método público. Utilizamos a classe DynamicFormFields para criar um array com as definições de cada campo, como propriedade, etiqueta, tamanho e tipo.

Essa estrutura permite que o PO-UI gere o formulário dinamicamente, facilitando futuras alterações e manutenções.

Configurando o Botão de Salvar e a Função de Confirmação

De volta ao app.component.html, adicionamos um botão para salvar as informações do formulário. Este botão é configurado com a classe PoButton, através dela é possivel definir o tamanho que será médio e a etiqueta “Salvar”.

Também precisamos do atributo p-click que chama a função confirmForm passando o formulário como parâmetro, responsável por capturar os dados e enviar para a API REST.

Consumindo a API REST com HttpClient e Tratamento de Respostas

Para que o botão funcione, no app.component.ts importamos o serviço HttpClient para realizar chamadas HTTP e o PoNotificationService para exibir mensagens de sucesso ou erro na tela.

É necessário incluir na função confirmForm o cabeçalho da requisição com autenticação, necessária a partir da versão 12.1.24 do Protheus para consumir APIs REST. A autenticação é realizada com usuário e senha codificados em Base64.

Em seguida, fazemos a requisição POST para a URL da API com os dados do formulário, utilizando o método http.post. Utilizamos o método subscribe para tratar as respostas:

• Next: exibe uma notificação de sucesso (“Registro incluído com sucesso”).
• Error: exibe uma notificação de erro (“Erro ao incluir o registro”).
• Complete: recarrega a página para limpar o formulário e permitir um novo cadastro.

Testando a Aplicação e Verificando os Dados no Protheus

Com tudo configurado, iniciamos os serviços do Protheus (licenças, DBA Access, appserver REST) e executamos o comando ng serve -o para abrir a aplicação no navegador.

Preenchemos os campos do formulário com dados de teste e clicamos em salvar. A mensagem de sucesso aparece rapidamente e a página recarrega para um novo cadastro.

Para confirmar que os dados foram realmente salvos, acessamos o APSDU, abrimos a tabela customizada (SZ9990) e visualizamos os registros inseridos via formulário.

Tratando Erros e Debugging

Para demonstrar o tratamento de erros, desligamos o serviço REST e tentamos salvar um novo registro. A aplicação apresenta uma notificação de erro. Para observar mais detalhes do erro, clicando com o botão inverso no seu navegador selecione a opção inspecionar para acessar o modo do navegador, nele podemos visualizar detalhes da falha, como “conexão recusada”. Esse recurso é fundamental para facilitar o diagnóstico e correção durante o desenvolvimento e testes.

Considerações Finais e Próximos Passos

Esta aula foi uma breve explicação de como integrar um formulário PO-UI com uma API REST para salvar dados no TOTVS Protheus, para conferir o processo completo de forma prática sugerimos que assista o vídeo no início da página.

Cursos

Se você está buscando se tornar um desenvolvedor completo no Protheus, dominar REST, PO-UI e as demais tecnologias relacionadas ao Protheus, não fique de fora da nossa turma de alunos, clique aqui para mais detalhes.