Ionic 3 e Angular 5: Criando App com pesquisa e ordenação de dados


Ionic 3 e Angular 5: Criando App com pesquisa e ordenação de dados

Nesse artigo, veja como criar um app mobile com Ionic na versão 3 e o Angular na Versão 5. Para você ter um overview, vou aproveitar a API disponibilizada gratuitamente pela TVmaze para mostrar como consumir dados externos de uma API retornando os dados de episódios da série The Walking Dead (TWD).

Para o nosso exemplo irei criar um app com uma lista de episódios do TWD, iremos listar esses dados, ordenar e criar uma pesquisa.

Criando o nosso app

Para criar um novo app Ionic 3 com o Angular 5, você deve estar com a última versão do Ionic Cli instalada no seu computador, para verificar se o seu ambiente está OK basta digitar o seguinte comando no seu terminal:

ionic -v

No momento que estou escrevendo esse artigo, ele esta na versão 3.19.0.

Quando nos criamos um app Ionic 3, ele nos disponibiliza alguns templates, eu não irei detalhar eles, pois sairia do foco desse artigo. Eu irei utilizar o blank nesse artigo. Para criar um projeto com esse template, execute o comando abaixo no seu terminal.

ionic start app-search blank

O comando a cima irá criar um diretório chamado app-search, entre nele e execute o comando abaixo para que você possa verificar se o projeto foi criado corretamente.

ionic serve

Veja o resultado desse primeiro passo na imagem abaixo:

App Ionic 3 com Angular 5

Criando o nosso provider

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 TWDService, na seguinte estrutura: app/providers/twd-service/twd-service.ts

ionic g provider TWDService

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

No código acima temos um provider com um método chamado load, esse método deve buscar na API da TVmaze todos os episódios da série TWD e retornar em uma Promise.

Implementando o provider

O próximo passo será importar o provider na HomePage. Para isso, copie o código abaixo e atualize o seu arquivo home.ts.

No update a cima eu criei um método chamado getAll que recebe os dados do nosso provider.

Criando os nossos pipes

Nosso próximo passo será a criação de dois pipes, um para Search e outro para Sort. Para isso, execute o comando abaixo no seu terminal:

ionic g pipe search
ionic g pipe sort

Agora atualize o seu arquivo pipe/search/search.ts com o código abaixo:

Navegando pelo código a cima nós temos:

  • 16 e 17: estamos validando os itens da nossa lista.
  • 19 a 21: estamos verificando se o valor existe dentro da nossa lista.

Agora atualize o arquivo sort.ts com o seguinte código:

Registrando os pipes

O primeiro passo para implementar de um pipe e registrar ele no AppModule. Para isso, atualize o seu arquivo app.module.ts com o código abaixo:

Note que o arquivo a cima foi atualizado nas linhas 11 e 12 fazendo referência ao caminho dos nossos arquivos e nas linhas 18 e 19 adicionando eles em declarations.

Agora atualize o arquivo home.ts com o código abaixo:

Entendendo o código a cima:

  • 14,15 e 16: Estou adicionando as variáveis para os nossos pipes.
  • 30 a 33: Aqui estou criando o método para fazer o nosso sorter.

Agora volte no seu arquivo home.html e atualize ele com o código abaixo.

Nessa atualização eu adicionei nas linhas:

  • 10: Um campos de pesquisa;
  • 11: Um botão para order;
  • 14: Estou adicionando os pipes criados na diretiva ngFor;

Testando os pipes

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

ionic serve

Podemos ver o resultado na imagem abaixo:

Resultado final do post

Detalhes do episódio

Para que possamos ver os detalhes de um episódio, eu irei criar uma nova página chamada details. Para isso, execute o seguinte comando no seu terminal:

ionic generate page details

A execução irá criar uma nova página na solution. Depois disso, você irá precisar passar o id de um dos itens da lista para pagina de detail. Para isso, atualize o seu arquivo home.ts com o código abaixo:

O próximo passo será criarmos uma model chamada episode.ts e atualizar os arquivos: twd-service.ts, details.ts e details.html.

Crie um novo diretório no caminho src/app/models e dentro dele um arquivo chamado episode.ts, em seguida atualize ele com o seguinte código.

Model para episódios

twd-service.ts

provider

details.ts

arquivo details.ts

details.html

arquivo detail.html

E este será o resultado:

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

Chansondouce

Chanson douce

Chanson douce () – Drama, Crime – 1h 40min –   Nota: 6/10   Sinopse     Elenco Leïla Bekhti Como – Myriam Karin Viard
OutpostInfernoNegro

Outpost 2: Inferno Negro

O ano é 1945, 2ª Guerra Mundial, e um cientista alemão de nome Klausener está trabalhando em uma tecnologia nova e assustadora que tem o poder de criar um ex…
Atrevimiento

Atrevimiento

Atrevimiento () – Mistério – 0h 0min –   Nota: 7/10   Sinopse     Elenco Tomás Becerra Como – Ángel Romero Flores Como –