APIからのポケモンカード

多くのアプリのように、我々はアプリを特定のAPIからデータをプルしたい.
この場合、それはポケモンTCG(トレーディングカードゲーム)APIです.
APIを包むサービスを作るのは良い習慣なので、今日を見ていきます.
最後の結果は、ポケモンカードのこのリストになります.

Note: Today's article covers a wrapped API, for your casual API's I refer you to my article on showing Ionic API Results.

APIの追加

APIはtypescript変種として来ますので、HTTPラッパーで私たちの呼び出しをラップする必要はありません.
我々はプロジェクトにパッケージを追加する必要があります.

npm install --save pokemon-tcg-sdk-typescript

これはポケモンTCG APIをインストールします.
それから、我々はAPI呼び出しのためにすべてのロジックを実装することができる我々自身のサービスを作成したいです.

ng g service services/card

内部でサービスを生成しますshared フォルダcard.service.ts .
開放するcard.service.ts ファイルを起動し、Pokemontcg APIをインポートします.

import { PokemonTCG } from 'pokemon-tcg-sdk-typescript'

ここで、特定のカード名のAPIを検索できる関数を作りたいと思います.

searchCard(name:string) {
    let params:PokemonTCG.IQuery[] = [{name: 'name', value: name}];
    return PokemonTCG.Card.where(params);
}

APIは、特定の検索を提供するために使用できるiQueryと呼ばれるものが付属しています.
その後、カードAPIを呼び出し、検索クエリを渡します.

コンポーネントでのAPIサービスの使用

これまでのところ、カードサービスを持っていますが、コンポーネントが話をしていなければ、あまり役に立ちません.
tab 2を変更しましょう.ページコンポーネントは、以前はsecured for logged in users .
カードの空の配列を定義することから始めましょう.

cards: Card[];

負荷Card 以下のようにAPIからタイプします.

import { Card } from 'pokemon-tcg-sdk-typescript/dist/sdk';

次に、コンストラクタに独自のラッピングサービスを追加します.

constructor(private cardService: CardService) {}

これは、我々が作成したカードサービスをロードします.あなたはまだそれをインポートする必要があります.

import { CardService } from '../services/card.service';

我々が必要とする最後のものは、ポケモンの特定の名前を捜すことができる機能です.

searchCard(event) {
    this.cardService.searchCard(event.srcElement.value).then(cards => {
      this.cards = cards;
    })
}

この関数はイベントを受け取ります.その時点で、それはカードサービスを呼び出し、呼び出しますsearchCard メソッド.これは、カードのリストを返し、コールバックとしてこれらのカードへのローカル参照を設定します.
では、この関数をHTMLファイルからどのように呼び出すかを見てみましょう.

<ion-searchbar (search)="searchCard($event)"></ion-searchbar>

イオン探索バーはこれを達成するための素晴らしい方法です.私は(search) コールバックは、私が部分的な要求でAPIを氾濫したくなかった時から.
これは、検索イベントがすべてのダニの上でそれをする代わりに、検索または入力をクリックするならば、火がつくだけであることを意味します.
今、私たちはすべてのカードをショーケースにグリッドが必要です.

<ion-grid>
    <ion-row>
      <ion-col size="4" *ngFor="let card of cards">
          <img [src]="card.imageUrl" [title]="card.name">
      </ion-col>
    </ion-row>
</ion-grid>  

これは私たちのカードをループし、我々の出力に画像を追加します.
それは、4/12を意味します.そして、基本的に幅の1/3を意味します.
そして、我々が現在ポケモンを捜して、Enterをクリックするならば、それはそれです.

今日のコードは次のとおりですGitHub repo .

読んでいただきありがとうございます、接続しましょう！

私のブログを読んでくれてありがとう.私の電子メール会報を購読して、接続してくださいFacebook or