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.