Pular para o conteúdo principal

Requisições com HTTP Client

Em algumas aplicações, é necessário integrar com serviços externos para buscar ou enviar dados. Isso ocorre através de requisições HTTP para as APIs desses serviços. Conseguimos realizar essas requisições através do Data² Connect HTTP Client.

O objetivo desse guia é mostrar algumas funcionalidades básicas do Data² Connect HTTP Client e como utilizá-lo em suas aplicações.

Utilizaremos a PokeAPI para fazer requisições GET e pegar uma lista de Pokémons ou informações sobre um Pokémon específico, e a CleanURI para encurtar URLs via requisições POST.

info

O resultado final está diponível no fim desse guia, pronto para copiar e colar no seu Builder.

Criando um HTTP Client​

Para criar um HTTP Client, basta dar dois cliques no fundo do Builder, selecionar Connect e depois clicar em HTTP Client.

Sua primeira requisição​

Para criar uma nova requisição, clique no botão + no canto inferior esquerdo. Ao fazer isso, uma nova requisição será adicionada à lista de requisições. Iremos utilizar a PokeAPI como exemplo.

Para isso, selecione GET no seletor ao lado de New HttpRequest, e altere o nome da sua requisição para List Pokemons. No campo URL, coloque no endpoint https://pokeapi.co/api/v2/pokemon/ (documentação do endpoint /api/v2/pokemon) para retornar uma lista de pokémons.

Ao clicar no botão de SEND, é possível testar a requisição e ver a resposta no painel ao lado. É possível explorar a resposta em 3 formatos: Text, HTML e JSON.

Utilizando parâmetros​

De acordo com a documentação da PokeAPI, é possível pegar informações detalhadas de um Pokémon a partir de seu número de identificação.

Poderíamos colocar o número diretamente na URL, mas é mais interessante que isso seja um parâmetro configurável da URL, dessa forma podemos reutilizar a mesma requisição para buscar informações de diferentes pokémons.

Para isso, iremos adicionar um parâmetro à nossa requisição. Para esse passo, é necessário estar com o Inspector aberto.

  1. Crie uma nova requisição de tipo GET com o nome Get Pokemon.
  2. Clique no botão Parameters.
  3. Clique no botão + para adicionar um novo parâmetro.
  4. Coloque pokemonNumber em Key.
  5. Clique em MOCK para navegar para a definição do parâmetro no Inspector.
  6. Em Component, selecione data2-core-primitives@Number.
  7. Em Mock, coloque 1 para simular o valor do parâmetro.

Agora iremos utilizar esse parâmetro na URL. Para isso:

  1. No Inspector, clique em < Inspector para navegar para a raiz definição da requisição.
  2. Em URL, clique no f() e selecione StringConcat.
  3. Clique no + para adicionar um novo item, e coloque https://pokeapi.co/api/v2/pokemon/.
  4. Adicione outro item, clique em f(), selecione Context Reference.
  5. Clique para navegar para a definição do Context Reference.
  6. Escreva pokemonNumber em Reference.
  7. Clique em Save no Inspector.

Teste sua requisição clicando em Send no seu HTTP Client. Se tudo estiver corretor, você verá as informações do Pokémon com o número 1 (Bulbasaur).

Utilizando o HTTP Client em uma aplicação​

Para utilizar o HTTP Client em um Artboard, iremos criar:

  1. Um botão que faz a requisição da lista de Pokémons e salva o resultado no seu UI State.
  2. Um JSONViewer para visualizar o resultado da requisição.
  3. Um campo de texto que permite ao usuário escolher o número do Pokémon que deseja buscar.
  4. Um botão que faz a requisição do Pokémon escolhido e salva o resultado no seu UI State.
  5. Outro JSONViewer para visualizar o resultado das requisições.

Criando a interface​

Listar Pokémons​

Primeiramente, crie um Artboard. Em seguida, desenhe um Block para ser o botão e outro Block que será o JSONViewer.

No block que será o botão, criaremos a definição de estado (response) e a ação de enviar a requisição, pegar o resultado e salvar no estado:

  1. Em Text, escreva List Pokémons.
  2. Crie um estado novo no State Definitions chamado response.
  3. Nesse State Definition, selecione data2-core-primitives@Object em Component e no Initial Value, clique no f() e selecione Object.
  4. No On Click, clique no f() e selecione Series.
  5. Na primeira ação do Series, em Module selecione o HTTP Client que foi criado.
  6. Em Interaction, selecione sendRequest.
  7. Clique em Request para habilitar o campo, e selecione a requisição List Pokémons (ou outro nome que foi dado).
  8. Adicione uma segunda ação.
  9. Clique em f() e selecione o botão ui do lado de setter. Isso irá adicionar um Setter com Module pré-preenchido para UIState.
  10. Clique no Setter, em seguida clique em Pick Component. Clique no próprio Block do botão, e em State Prop, selecione response.
  11. Em Value, clique em f() e selecione Context Reference para transformá-lo em um data2-core-types@Reference.
  12. Em Reference, escreva prevResult.
  13. Estilize o botão como desejar.
  14. Salve o Block clicando em Save ou desselecionando o Block.

No block que será o JSONViewer iremos visualizar o resultado da requisição, lendo do UI State do botão:

  1. Mude o tipo dele para data2-blocks@JSONViewer.
  2. Nos parâmetros do JSONViewer no fim do Inspector, mude o tipo de JSON para Getter clicando no botão f() e selecionando o ui ao lado do getter (nesse passo, você também poderia clicar no Getter para navegar, e em Module selecionar UIState)
  3. Em Prop, clique em Pick Component, passe o mouse em cima do Block do botão, e selecione response.
  4. Salve o JSONViewer clicando em Save ou desselecionando.
  5. Clique no botão de preview do Artboard para testar o botão.

Informações de um Pokémon​

No mesmo Artboard, desenhe um Block para ser o campo de text, um Block para ser o botão e outro Block que será o JSONViewer.

No Block que será o botão ficarão as definições de estado (response e pokemonNumber), a ação de enviar a requisição e salvar o resultado no UIState:

  1. Em Text, escreva Get Pokémon.
  2. Crie um estado novo no State Definitions chamado pokemonNumber, selecione data2-core-primitives@Number em Component, e no Initial Value coloque 1.
  3. Crie outro estado no State Definitions chamado response, selecione data2-core-primitives@Object em Component, e no Initial Value, clique no f() e selecione Object.
  4. No On Click, clique no f() e selecione Series.
  5. Na primeira ação do Series, em Module selecione o HTTP Client que foi criado.
  6. Em Interaction, selecione sendRequest.
  7. Clique em Request para habilitar o campo, e selecione a requisição Get Pokémon (ou outro nome que foi dado).
  8. Clique em Request Parameters, e em pokemonNumber, clique no f() e selecione ui ao lado de getter. Clique para navegar. no Getter para navegar.
  9. Em Prop, clique em Pick Component e selecione o Block do botão. Em State Prop, selecione pokemonNumber.
  10. Adicione uma segunda ação.
  11. Clique em f() e selecione o botão ui do lado de setter. Isso irá adicionar um Setter com Module pré-preenchido para UIState.
  12. Clique no Setter, em seguida clique em Pick Component. Clique no Block do botão, e em State Prop, selecione response.
  13. Em Value, clique em f() e selecione Context Reference.
  14. Em Reference, escreva prevResult.
  15. Estilize o botão, e salve.

No Block que será o JSONViewer, iremos visualizar o resultado da requisição, lendo do UIState do botão:

  1. Mude o tipo dele para data2-blocks@JSONViewer.
  2. Clique em JSON, e no Module selecione UIState.
  3. Em Prop, clique em Pick Component, passe o mouse em cima do Block do botão, e selecione response.
  4. Salve.

No Block que será o campo de texto, iremos editar o UI State pokemonNumber que está no botão, para que o usuário possa digitar o número do Pokémon que deseja buscar:

  1. Mude o tipo para data2-blocks@DataFieldBlock.
  2. Em Dataset, selecione UIState.
  3. Em Field, clique em Pick Component, passe o mouse em cima do Block do botão, e selecione pokemonNumber.
  4. Em Type, selecione number.
  5. Salve.
  6. Clique no botão de preview do Artboard para testar o botão.

Exemplo: Requisição POST para encurtar URLs​

Iremos criar uma requisição POST para a url https://cleanuri.com/api/v1/shorten que é uma API que encurta URLs (cleanuri docs). Ela espera um JSON com a chave url e o valor da URL que queremos encurtar. Exemplo:

{
  "url": "https://google.com/"
}
  1. Clique em + para adicionar uma nova requisição.
  2. Selecione POST como método e altere o nome da requisição para Shorten URL.
  3. No campo URL, coloque https://cleanuri.com/api/v1/shorten.
  4. Em Parameters, adicione um parâmetro chamado url, clique em Mock para o Inspector navegar para a definição do parâmetro.
  5. Em Component, selecione data2-core-primitives@String.
  6. Em Mock, coloque https://google.com/ para simular o valor do parâmetro.
  7. Navegue para a raiz do Inspector e clique em Data.
  8. No cabeçalho, ao lado de Object, clique em + para adicionar uma chave ao objeto.
  9. Coloque url como chave e em type, selecione data2-core-types / Reference para criar a chave com o tipo correto.
  10. Clique no parâmetro adicionado, e em Reference coloque url.
  11. Salve.
  12. Clique em Send para testar a requisição.

Conclusão​

Neste artigo, aprendemos como criar um HTTP Client e realizar requisições HTTP. Vimos como adicionar parâmetros às requisições, e como utilizar o HTTP Client em uma aplicação.

Como desafio, você pode tentar fazer realizar uma requisição POST para o encurtador de URL, onde o usuário pode digitar a URL que deseja encurtar.

Resultado final​

O resultado final está disponível a seguir (e pode ser copiado e colado no seu Builder).