Usando Angular 8 para consumir Api da Marvel
Consumindo Api da Marvel Comics de forma simples.
A Marvel disponibilizou sua Api e resolvi testar, fazendo uma aplicação simples usando o queridinho Angular. Para isso é necessário se registrar na plataforma da Marvel para ter acesso a sua API, de forma gratuita, Veja aqui .
O intuito aqui é criar um layout para que possa acomodar os dados da Api da Marvel. Quem sabe uma outra série de artigos derive desta, implementando melhorias do código desta aplicação.
Requisitos
O que a aplicação vai fazer é pesquisar na base de dados da Marvel (via API) para caracteres com base na entrada do usuário e exibirá os resultados. As tecnologias utilizadas para esta série serão:
- Angular CLI
- NodeJs
- Angular Material
- Chave pública para consumo da api Marvel
Já abordamos aqui no blog sobre o framework Angular que é possível reutilizar seu código para criar aplicativos para qualquer destino de implantação, seja para web, webapps, mobile nativo e desktop nativo. A equipe da Google tem melhorado bastante ele desde seu lançamento. Confira o tutorial.
API da Marvel
A primeira parte é conseguir a chave de API da Marvel, então vá até o Portal de desenvolvedores da Marvel, é necessário efetuar login e confirmar seus dados para obter uma chave da API.
Liste os domínios que podem fazer chamadas para a Marvel Comics API usando sua chave de API : Adicione o IP da sua máquina ou use localhost e clique em atualizar as informações.
Para a chave pública de API, você pode chamar diretamente a API em http://gateway.marvel.com/v1/public….
Por exemplo, um usuário com uma chave pública de “1234” e uma chave privada de “abcd” poderia construir uma chamada válida da seguinte maneira: http://gateway.marvel.com/v1/public/comics?ts=1&apikey=1234&hash=ffd275c5130566a2916217b101f26150 (o valor de hash é o digest md5 de 1abcd1234).
Estou usando a primeira opção (characters) para buscar os personagens, mas fique a vontade para explorar a api.
Montando o layout com angular
Optei em usar Angular para testar o Material Angular. Estou utilizando a versão 8 do angular
Abra o seu terminal e crie um projeto angular:
$ npm install -g @angular/cli
$ ng new catalogoMarvel
Usando o Material angular para criar nosso layout responsivo, você pode acessar a documentação do material Aqui para usar o módulo de animations e outros no decorrer do projeto. ele vai exibir algumas opções de templates, escolhi a primary.
$ ng add @angular/material
Apos a instalação ele atualiza seu projeto e você terá uma saída como esta aqui:
UPDATE src/main.ts (391 bytes)
UPDATE src/app/app.module.ts (502 bytes)
UPDATE angular.json (3824 bytes)
UPDATE src/index.html (495 bytes)
UPDATE src/styles.css (181 bytes)
Depois de instalado podemos conferir na nossa Module (app.module.ts) que o módulo de animação foi instalado.
Agora, continuando o uso do angular material podemos adicionar também a interface de navegação da nossa aplicação e é o que vamos fazer através do terminal, eu dei o nome de navBar mas use como preferir:
$ ng g @angular/material:material-nav — name navbar
você vai ter uma saída parecida com esta:
PS C:\Users\Danielle\Angular\catalogoMarvel> ng g @angular/material:material-nav — name navbar
CREATE src/app/navbar/navbar.component.html (937 bytes)
CREATE src/app/navbar/navbar.component.spec.ts (1248 bytes)
CREATE src/app/navbar/navbar.component.ts (578 bytes)
CREATE src/app/navbar/navbar.component.css (193 bytes)
UPDATE src/app/app.module.ts (1053 bytes)
Vamos trabalhar no nosso app.component.html, como não vamos precisar dessa informações, podemos apagar e redigir a nossa para ter a carinha do nosso layout de Catálogo para exibir os heróis Marvel.
Conferindo como ficou adicionando apenas a nossa navBar, inclua a navbar no html:
<app-navbar></app-navbar>
no seu terminal digite ng serve e acesse http://localhost:4200/ para conferir nossa navbar adicionada:
$ ng serve
Agora vamos na navbar.component.html e então, adicione a rota, vamos precisar dela futuramente. ;)
<router-outlet> </router-outlet>
Vamos editar o nosso CSS, acesse o navbar.component.css e exclua essa parte do toolbar, pois não vamos precisar. Já que vamos mudar a cor do nosso navmenu, vamos padronizar com a cor primary do material design.
No <mat-toolbar color=”primary”> temo a cor primary, vamos estilizar, tornando o outro menu da mesma cor.
antes
<mat-toolbar>Menu</mat-toolbar>
depois
<mat-toolbar color=”primary”>Menu</mat-toolbar>
Vamos ter algo assim:
Crie o serviço para consumir a API
Criando o serviço para listar os personagens, para isso use o seguinte comando no terminal:
$ ng g service characters/character/shared/characters-api
CREATE src/app/characters/character/shared/characters-api.service.spec.ts (369 bytes)
CREATE src/app/characters/character/shared/characters-api.service.ts (142 bytes)
Acesse o serviço que você acabou de criar characters-api.service.ts e importe os modulos de httpClient, map e rxjs, para acessar a API da Marvel, é preciso algumas credenciais que configuramos lá na primeira parte deste tutorial. Você irá utilizá-las para criar um hash com a seguinte estrutura: (chave pública + chave privada+ timestamp) em um hash.
Implementando os metodos requeridos para acesso a nossa api marvel. Criamos dois componentes desse serviço e indique onde você quer que seja criado:
$ ng g component characters/character
$ ng g component characters
Acesse o characters.component.ts e comece importando nosso serviço characters-api.service e rxjs também.
E no html do character.component.html vamos listar o resultado com a diretiva *ngFor. A diretiva ‘*ngFor’ é utilizada para iterar sob array , onde a cada iteração o objeto selecionado é retornado em uma variável local.
<p *ngFor=”let character of allCharacters | async”>
{{ character | json}}
</p>
Vamos criar uma rota para nossa Home
Importe o HttClientModule na app.module.ts também e adicione esse import la no module.
import { HttpClientModule } from ‘@angular/common/http’;
Ótimo, após adicionar o modulo do http, vamos em characters-api.service.ts para concluir a configuração. como aparecem alguns erros da requisição.
Nota: erro 401 ocorre quando um parâmetro ts, hash e apikey é enviado, mas o hash não é válido de acordo com a regra de geração de hash. Gerei um novo hash e não ocorreu mais o problema.
Adicione um data.result no seu método map
O resultado da nossa chave foi essa, está meio feiinho mas podemos melhorar:
Agora vamos cuidar do layout instalando a dependência flex layout, a mesma que usamos para construir sites responsivos com html e css. o latest é para instalar a versão mais recente. e aproveite para adicionar no modulo app.module.ts
$ npm i @angular/flex-layout@latest
Vamos novamente para o component characters.component.html, edite o conteúdo antigo para fazer um layout de responsa.
antigo:
<p *ngFor=”let character of allCharacters | async”>
{{character | json}} </p>
novo: usando interpolação para exibir as informações, nome e imagens dos personagens.
Já que usamos o mat-card adicione os módulos matcard e matformfield no app.module.ts
import { MatCardModule, MatFormFieldModule } from ‘@angular/material’;
Agora sim podemos conferir com o ng serve o resultado do modulo angular material:
Vamos usar um padding para separar as imagens, adicione style=”padding:5px” a Div fxFlex .
Use o css para ajustar o tamanho das imagens, perceba que umas estão bem menores que as outras, vamos melhorar isso. Acesse characters.component.css e ajuste o tamanho da imagem como preferir.
img.mat-card-image {
min-height: 374px;
max-height: 374px;
}
Ainda no Html dentro do mat-card adicione os detalhes de cada personagem, use um botão para detalhar as informações do personagem, {{character.urls[0].url}} vai nos retornar a url de cada personagem.
Podemos melhorar um pouco nosso código, Decorator input que nos permite passar uma informação de um componente ao outro component, então remova o mat-card para um component separado, usando a pagina de personagem no sigular character.component.html que foi criado anteriormente.
Passando input characters.component.html e trabalhamos com o seletor do character.component.ts selector: ‘app-character’, é este seletor que vamos chamar ou melhor passar esse input no characters.component.html.
Logo após importa-lo no character.component.ts
Nosso resultado então é este a segui. Claro que este layout foi simples, a intensão foi um teste rápido que pode ser encorajado a melhoria como uma página para cada personagem, efetuar busca, incluir ordenação. Dá pra fazer muitas coisas.
Resumo
Conseguimos criar uma chave para acesso a API da Marvel, criamos um flex-layout usando material design angular para exibir os dados dos personagens e que pode ser acessado no repositório também: https://github.com/dannyserena/catalogoMarvelApi
