Consumindo API REST com Ionic – O guia absolutamente completo

Nessa vídeo aula eu vou mostrar como fazer requisições HTTP a uma API REST.
Esse exemplo é valido tanto para aplicações feitas com Angular e Ionic.
E também como paginar os resultados utilizando o InfiniteScroll.

 

O que é API REST

REST significa Representational State Transfer, em português Transferência de Estado Representacional e é um conjunto arquiteturas mais moderno para construção de webservices.

 

Criando uma aplicação de exemplo

Será criado uma aplicação onde eu vou mostrar como criar uma conta, efetuar um login e incluir/alterar/excluir/consultar um usuário.

Vou usar também a API Reqres que prove vários exemplos de endpoints com dados fake.

E vou mostrar como paginar os dados utilizando o componente InfiniteScroll do Ionic.

O passo a passo abaixo é o mesmo mostrado no vídeo.

  • Passo 1: Criar o aplicativo.
  • Passo 2: Configurar o aplicativo para requisições HTTP.
  • Passo 3: Ajustar a Home para exibir os botões para os exemplos.
  • Passo 4: Criar o provider a criação de conta/login/CRUD de usuários.
  • Passo 5: Criar a página de criação de conta
  • Passo 6: Criar a página de login.
  • Passo 7: Criar a página para listar usuários.
  • Passo 8: Criar a página para incluir/alterar um usuário.
  • Passo 9: Criar a pagina para exibir um usuário.

 

Passo 1: Criar o aplicativo

 

Passo 2: Configurar o aplicativo para requisições HTTP

Registrar o HttpModule na parte de imports.

Arquivo app.module.ts

 

Passo 3: Ajustar a Home para exibir os botões para os exemplos

Arquivo home.ts

 

Arquivo home.html

 

Passo 4: Criar o provider a criação de conta/login/CRUD de usuários

 

Arquivo users.ts

 

Passo 5: Criar a página de criação de conta

 

Arquivo create-account.ts

 

Arquivo create-account.html

 

Passo 6: Criar a página de login

 

Arquivo login.ts

 

Arquivo login.html

 

Passo 7: Criar a página para listar usuários

 

Arquivo user-list.ts

 

Arquivo user-list.html

 

Passo 8: Criar a página para incluir/alterar um usuário

 

Arquivo user-edit.ts

 

Arquivo user-edit.html

 

Passo 9: Criar a pagina para exibir um usuário

 

Arquivo user-detail.ts

 

Arquivo user-detail.html

 

Clique no botão abaixo para ver o código fonte gerado nessa aula

 

Código fonte gerado na aula

 

Referências

 

Gostou desse artigo? Aproveite e curta e compartilhe para que mais pessoas possam também visualiza-lo!

Ainda ficou alguma dúvida ou tem alguma sugestão? Deixa aí nos comentários!