Versões comparadas

Chave

  • Esta linha foi adicionada.
  • Esta linha foi removida.
  • A formatação mudou.

Pré requisitos

  1. Projeto do tipo mobile ou web criado. Caso haja dúvidas de como criar esse tipo de projeto acesse o link ( Criar projeto );

Passos

Antes de consumir um serviço REST no Cronapp, é necessário ter um serviço que disponibilize. Para saber como criar um dentro do Cronapp, acesse a página Disponibilizando Web Service Rest.

Neste exemplo foi utilizado uma API externa gratuita de testes (https://jsonplaceholder.typicode.com/todos/), ela retorna uma lista de objetos.


Bloco de código
languagejs
firstline1
titleModelo do objeto usado
linenumberstrue
{
	"userId": 1,
	"id": 2,
	"title": "quis ut nam facilis et officia qui",
	"completed": false
}

Consumindo Serviço REST

Para consumir web services REST, o Cronapp disponibiliza dois blocos de programação em sua API:

  1. Obter Conteúdo da requisição: retorna o conteúdo solicitado pela requisição;
  2. Obter cabeçalho da URL: obtêm o cabeçalho da requisição HTML.

Neste exemplo usaremos o bloco servidor.

Informações

Os blocos de programação Clientes são assíncronos, dessa forma. Dessa forma, caso use blocos clientes, será necessário além do além do bloco de requisição REST, usar também o bloco Promessa, que fica aguardando a resposta do serviço para dar continuidade a execução da função. Para saber mais,   acesse o tutorial.

Para testar os dois exemplos abaixo, basta chamar a função criada no evento de clique de um botão, por exemplo. O resultado será visualizado na aba Console do Depurador do Cronapp.

Via URI

Um URI identifica exclusivamente uma instância específica de um tipo de recurso. Caso o recurso permita, podemos informar parâmetros entre "/", porém é imprescindível que a ordem informada dos parâmetros seja a mesma ordem que a função espera receber.

Estrutura do URI: <domínio>/<função>/<parâmetro1>/<parâmetro2>/<parâmetroN>

  • domínio: URL do serviço;
  • função: função que gera o serviço;
  • /: Separa domínio, função e parâmetros;
  • Parâmetro: valores usados para filtrar o retorno,

Bloco de programação

Crie um bloco de programação tipo servidor e define um nome tanto para o arquivo quanto para a função, como mostrado na figura 1.1.


Figura 1.1 - Criando bloco de programação vazio


Arraste os blocos e configure como na figura abaixo.


Figura 1.2 - Bloco Obter conteúdo da URL via URI


  1. Adicione o bloco imprime (categoria Texto);
  2. Encaixe o bloco Obter conteúdo da URL (categoria Util);
    • Método de requisição: GET;
    • Tipo de conteúdo: JSON;
  3. Informe o endereço URL da sua API com o parâmetro do recurso a ser obtido.
    • Nesse exemplo usaremos ( https://jsonplaceholder.typicode.com/todos/25 ).

Vinculando bloco ao componente

Abra o formulário home (localização Formulário/Web/Autenticado

Tooltip
onlyIcontrue
appendIconKein Icon

Endereço: src/main/webapp/views/logged/home.view.html

) e adicione o componente botãoBotão. Na aba propriedades, clique na subaba eventos Eventos e clique em "..." (seta da Figura 1.3) do evento ao Ao clicar para abrir sua janela (1 da Figura 1.3). Após, clique em "..." (seta da Figura 1.3) dessa janela para abrir a janela de seleção de bloco (2 da Figura 1.3) e selecione a função do bloco criado (3 da Figura 1.3). Por fim, salve tudo e execute o projeto.


Image RemovedImage Added

Figura 1.3 - Vinculando bloco ao componente

Testando API

Acesse a página home no navegador, clique no botão e volte a IDE. Ao abrir o console do depurador da IDE, o conteúdo da API estará impresso no console (Figura 1.4) devido ao bloco imprime da função.


Image Modified

Figura 1.4 - Console do depurador exibindo o objeto de retorno da requisição

Via Query String

A requisição via query string nos permite utilizar diversos parâmetros como filtro para obter um registro específico da API. Esses parâmetros não necessitam estar em uma ordem predefinida. 

Estrutura do Query String: <domínio>/<função>?<chave1>=<valor1>&<chave2>=<valor2>&<chaveN>=<valorN>

  • domínio: URL do serviço;
  • função: função que gera o serviço;
  • /: Separa domínio e função;
  • ?: Separa a função dos parâmetros chave (key);
  • Chave: parâmetro passado;
  • =: atribui valor à chave;
  • Valor: especificado;
  • &: (ampersand) que permite adicionar outro parâmetro na URL.

Bloco de programação

Vamos criar outra função dentro do arquivo de bloco REST (criado na figura 1.1), para isso, arraste o bloco Para com retorno (categoria Funções) para criarmos uma função vazia. Em seguida arraste os blocos e configure como na figura abaixo.


Figura 3 2.1 - Bloco Obter conteúdo da URL via Query String


  1. Adicione o bloco imprime (categoria Texto);
  2. Encaixe o bloco Obter conteúdo da URL (categoria Util);
    • Método de requisição: GET;
    • Tipo de conteúdo: JSON;
    • Endereço URL: informe o endereço da API até a função, para esse exemplo será "https://jsonplaceholder.typicode.com/todos/".
  3. Adicione o bloco criar mapa e (categoria Mapas) e configure um ou mais Parâmetros de acordo com os campos esperados por sua API.
    • Para esse exemplo podemos usar qualquer atributo do objeto: userId, id, title completed;
  4. Escreva o filtro de acordo com o campo escolhido.
    1. Para esse exemplo usamos os atributos "completed" e "id", passando os valores "false" e "1" respectivamente.


Após finalizada, a requisição montada na Figura 3 ficou: https://jsonplaceholder.typicode.com/todos?completed=false&id=1

Testando API

O bloco imprime foi usado na função para validar o funcionamento da API no console do depurador do Cronapp.

Image Removed

Vinculando bloco ao componente

Abra o formulário home (localização Formulário/Web/Autenticado

Tooltip
onlyIcontrue
appendIconKein Icon

Endereço: src/main/webapp/views/logged/home.view.html

) e adicione outro componente botão. Na aba propriedades, clique na subaba eventos e clique em "..." (seta da Figura 1.3) do evento ao clicar para abrir sua janela (1 da Figura 2.3). Após, clique em "..." (seta da Figura 2.3) dessa janela para abrir a janela de seleção de bloco (2 da Figura 2.3) e selecione a função do bloco criado (3 da Figura 2.3). Por fim, salve tudo e execute o projeto.


Image Added

Figura 2.2 - Vinculando bloco ao componente

Testando API

Acesse a página home no navegador, clique no botão e volte a IDE. Ao abrir o console do depurador da IDE, o conteúdo da API estará impresso no console (Figura 1.4) devido ao bloco imprime da função.


Image Added

Figura 2.3 Figura 4 - Console do depurador exibindo um array de objeto de objeto de retorno da requisição


Nessa página:

Índice


Outras informações:

Web Services