O modelo REST (Representational State Transfer), traz uma nova forma na criação de Web Service utilizando a semântica de métodos HTTP (GET, POST, PUT e DELETE), diferentemente do SOAP, que necessita de camadas intermediárias.

Características:

Cronapp permite consumir serviços REST por Bloco de programação ou Fonte de dados. Nesse tutorial veremos apenas como consumir via Bloco de programação, para entender como obter os recursos por Fonte de dados, veja as documentações: Fonte de dados e Fonte de dados tipo Web Service (REST / SOAP).

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, é importante garantir que você já tenha 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 um array de objetos.É possível filtrar o objeto informando o seu ID no final do endereço: https://jsonplaceholder.typicode.com/todos/2uma lista de objetos.

{
	"userId": 1,
	"id": 2,
	"title": "quis ut nam facilis et officia qui",
	"completed": false
}

Para consumir web services REST, o Cronapp disponibiliza duas funções dois blocos de programação em sua API. Elas permitem obter tanto o conteúdo disponibilizado pelo serviço quanto o cabeçalho da requisição, caso necessite:

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 Obter Conteúdo da requisição.

Utilizando Parâmetros (Query String)

Image Removed

servidor.

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 defina um nome tanto para o arquivo quanto para a função, como mostrado na figura 1.1.

Image Added

Figura 1.1 - Criando bloco de programação vazio

Arraste os blocos e configure como na figura abaixo.

Image Added

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

1. Adicione o bloco imprime; (categoria Texto).
2. Encaixe o bloco Adicione o bloco Obter conteúdo da URL (categoria Util);
   Selecione o método da requisição como
   • Método de requisição: GET;
   Selecione o tipo
   • Tipo de conteúdo
   como
   • : JSON
   ;
   • .
   • Informe o Endereço endereço URL  da sua API;
   • Adicione o bloco criar mapa e configure um ou mais Parâmetros de acordo com os campos da sua API, nesse caso poderíamos escolher entre: id, nome, sabor, preco, quantidade, created_at e updated_et;
   • Escreva o filtro de acordo com o campo escolhido, nesse caso Bolo, que é um nome.

Testando API

O bloco imprime foi adicionado a função para validar corretamente o funcionamento da sua API no console do depurador do Cronapp.

Para realizar o teste, adicione um botão em uma view e vincule o Blockly criado ao botão. Após isso, acesse a aplicação, clique sobre o botão e observe a resposta que irá aparecer no console do depurador.

Image Removed

Figura 2 - Adicionando Botão e vinculando Blockly

Image Removed

Figura 3 - Console do depurador exibindo JSON retornado pela API

Essa mesma API pode ser testada em outras plataformas a exemplo do Postman, seguindo o padrão do bloco Obter conteúdo da URL (Query String).

https://my-api-strapi.herokuapp.com/produtos?preco=15&nome=Bolo

URL domínio / produtos ? preco = 15 & nome = Bolo

1. da sua API com o parâmetro do recurso a ser obtido. Nesse exemplo estamos concatenando com o bloco Criar texto com:
   • endPoint: https://jsonplaceholder.typicode.com/todos/
   • id do recurso: 25

Vinculando bloco ao componente

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

) e adicione o componente Botão. Na aba propriedades, clique na subaba Eventos e clique em "..." (seta maior da Figura 1.3) do evento Ao clicar para abrir sua janela (1 da Figura 1.3). Após, clique em "..." (seta menor 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 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 Added

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
produtos: É a função que irá buscar nosso registro
• ;
• ?: Separa a função dos parâmetros chave (key)
;
• preco: É uma chave (key), parâmetro a ser usado para obter o registro;
• 15: É o valor (value) especificado na chave (key);
• &: ampersand que permite adicionar outro parâmetro na URL.

Image Removed

• ;
• 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 de função Para (com retorno) (categoria Funções) para criarmos uma função vazia, informe um nome ao bloco Para (com retorno), por exemplo "ObterConteudo". Em seguida arraste os blocos e configure como na figura abaixo:

Image Added

Figura 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 https://jsonplaceholder.typicode.com/todos/
3. Adicione o bloco criar mapa (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 e completed.
4. Escreva o filtro de acordo com o campo escolhido.
   • 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

Vinculando bloco ao componente

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

) e adicione outro componente botão. Na aba propriedades, clique na subaba eventos e clique em "..." (seta maior da Figura 2.2) do evento ao clicar para abrir sua janela (1 da Figura 2.2). Após, clique em "..." (seta menor da Figura 2.2) dessa janela para abrir a janela de seleção de bloco (2 da Figura 2.2) e selecione a função do bloco criado (3 da Figura 2.2). 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 2.3) devido ao bloco imprime da função.

Image Added

Figura 2.3 - Console do depurador exibindo um array de objeto de retorno da requisiçãoFigura 4 - Teste de API no Postman