Ionic 3: Consumindo API da Marvel

Neste artigo, veja como criar um app mobile com Ionic na versão 3. Para você ter um overview, vou aproveitar a API disponibilizada gratuitamente pela Marvel para mostrar como consumir dados externos de uma API. Não vou abordar a instalação do Ionic. Caso você ainda não tenha ele instalado, basta seguir os passos demonstrados no seu site oficial.

O primeiro passo é escolher um diretório para a aplicação. Em seguida, execute no terminal o comando demonstrado abaixo.

ionic start apiApp blank

O comando ionic start irá criar um novo projeto chamado apiApp com o template blank. Para o próximo passo, você precisará de um editor de textos neste artigo iremos utilizar o Visual Studio Code. Abaixo veja a estrutura do projeto que acabamos de criar aberta no VS Code.

Estrutura projeto Ionic 3

Depois de criar uma estrutura básica para o app, você precisa criar um provider para acessar dados externos. Para isso, execute o comando abaixo no terminal. Ele irá criar um novo @Injectable dentro da solução, chamado HeroService, na seguinte estrutura: app/providers/hero-service/hero-service.ts

ionic g provider HeroService

Agora implemente o código necessário para que o provider faça uma requisição GET na API da Marvel.

Como você pode ver no método acima, para acessar a API da Marvel, é preciso algumas credencias que podem ser encontradas neste link. Você irá utilizá-las para criar uma hash com a seguinte estrutura: (chave pública + chave privada+ timestamp) em um hash md5. Para essa ação, você precisará de um módulo chamado ts-md5, que pode ser baixado no portal NPM através do seguinte comando:

npm install ts-md5

O próximo passo é importar o provider na HomePage. Para isso, copie o código abaixo e cole no seu arquivo home.ts.

Agora, crie um componente para listar os heróis. Para isso, utilize um dos exemplos do site oficial do Ionic.

Para testar o código, execute o comando abaixo no seu terminal:

ionic serve

Ele deve abrir a url http://localhost:8100/ no seu navegador. Veja a execução do código na imagem abaixo:

 
Lista de heróis Marvel

Pronto, você já tem uma lista com todos os heróis. Agora, crie um evento para que o usuário possa clicar em cada personagem e ver os detalhes (nome, thumb e descrição). Todos esses dados devem ser requisitados de uma outra rota na API da Marvel.

O primeiro passo é atualizar o provider com essa nova requisição:

Depois você precisa de uma nova página para exibir esses novos dados. Para isso, execute no terminal o comando a seguir:

ionic generate page description

A execução irá criar uma nova página na solution. Depois disso, você precisa passar um id para a página buscar os dados do herói na API da Marvel. Para isso, atualize o seu arquivo home.ts com o código abaixo:

O próximo passo será atualizar o arquivo home.html e os arquivos description.ts e description.html.

home.html

description.ts

description.html

E este será o resultado:

 
App Marvel

Foi simples? Você acabou de criar um APP em Ionic 3 consumindo dados de uma API externa. Caso tenha dúvida sobre algum passo, deixe seu comentário. Se quiser, veja o código final desse artigo no meu Git.

Compartilhe:

Share on facebook
Facebook
Share on twitter
Twitter
Share on pinterest
Pinterest
Share on linkedin
LinkedIn

Table of Contents

Postagens Relacionadas

iphone12

Apple iPhone 12 Pro Max

Apple iPhone 12 Pro Max  CPU Apple A14 Bionic  RAM 6 GB  Armazenamento 512 GB  Display 6.7 XDR OLED  Câmera 12 Mp + 12 Mp
RockBottomRiser

Rock Bottom Riser

Rock Bottom Riser 01/03/2021(US) – Documentário – 1h 10min –   Nota: 0/10   Sinopse     Elenco Nainoa Thompson Como – master navigator Moses
SaferatHome

Safer at Home

Safer at Home 26/02/2021(US) – Filmes – 0h 0min –   Nota: 0/10   Sinopse     Elenco Mais informações Título Original Safer at Home
SouLunaOUltimoShow

Sou Luna: O Último Show

O elenco de “Sou Luna” se apresenta ao vivo pela última vez no mítico estádio Luna Park em Buenos Aires. Vamos acompanhá-los na intimidade dos bastidores e r…