【Ionic + Angular】TMDb APIで映画の一覧を取得して表示する

#出来上がりはこんな感じ
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">【Ionic + Angular】TMDb APIで映画の一覧を取得して表示するのに成功したぞ！ <a href="https://t.co/ma526HZ14i">pic.twitter.com/ma526HZ14i</a></p>&mdash; 高卒プログラマーげんと (@gento34165638) <a href="https://twitter.com/gento34165638/status/1305889656358146050?ref_src=twsrc%5Etfw">September 15, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

#環境
Ionic + Angularでやってますが、他のjsフレームワークでもやり方は同じかと。。

```console
$ ionic info

Ionic:

   Ionic CLI                     : 6.11.8 (/usr/local/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.3.2
   @angular-devkit/build-angular : 0.1000.8
   @angular-devkit/schematics    : 10.0.8
   @angular/cli                  : 10.0.8
   @ionic/angular-toolkit        : 2.3.3

Capacitor:

   Capacitor CLI   : 2.4.1
   @capacitor/core : 2.4.1

Utility:

   cordova-res (update available: 0.15.1) : 0.6.0
   native-run (update available: 1.1.0)   : 0.2.8

System:

   NodeJS : v10.15.1 (/usr/local/bin/node)
   npm    : 6.12.1
   OS     : macOS Catalina
```

#映画情報を取得できるTMDDb API
https://www.themoviedb.org

まずは上記リンクから会員登録をして、API keyの申請をしましょう。
**※API keyの申請で「どんなアプリケーションに使いますか？」的なことを聞かれますが、これは英語で回答しましょう:sweat_smile:**
日本語で答えるとエラーで弾かれました。。。

#Ionicプロジェクトを作る

```console
ionic start movieApp blank --capacitor
```

別になんでもいいのですが、適当にblankで作ります。

これで準備は完了！

#TMDb APIで映画の一覧を取得
まずはAPI keyを管理する`api.service.ts`のファイル名でserviceを作成する

##API情報を扱うserviceを作る

```console
ionic g service service/api
```

これでserviceフォルダの中に`api.service.ts`が作成されたかと。

```typescript:api.service.ts
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class ApiService {
  apiKey = '***';
  // 最後に &language=ja をつけると日本語に
  getNowPlayingURL = `https://api.themoviedb.org/3/movie/now_playing?api_key=${this.apiKey}`;

  constructor() { }
}
```

コメントにある通り`&language=ja`を最後につけると、API情報が日本語で取得できます（日本語の情報がある場合のみ）
https://developers.themoviedb.org/3/getting-started/languages


```typescript
getNowPlayingURL = `https://api.themoviedb.org/3/movie/now_playing?api_key=${this.apiKey}&language=ja`;
```

##APIを扱うHttpモジュールを用意
まずは`HttpClientModule`を`app.module.ts`でimport
これをしないと、必要な`HttpClient`が使えない。

```typescript:app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';

import { HttpClientModule } from '@angular/common/http';


@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    BrowserModule,
    IonicModule.forRoot(),
    AppRoutingModule,
    HttpClientModule,
  ],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}
```

次は`home.page.ts`


```typescript
import { ApiService } from './../service/api.service';
import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage implements OnInit {

  // 映画の情報を入れ込む
  list;

  constructor(
    private http: HttpClient,
    private apiService: ApiService,
  ) { }

  ngOnInit() {
    // (data: any)のようにカッコがないと「resultsなんかないぞ」とエラーくらいます
    this.getMovies().subscribe((data: any) => {
      console.log(data);
      this.list = data.results;
    });
  }

  // api.service.tsのプロパティーを使う
  getMovies() {
    return this.http.get(this.apiService.getNowPlayingURL);
  }
}
```

##画面に表示する

```html:home.page.html
<ion-header [translucent]="false">
  <ion-toolbar color="primary">
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title>
      このみる
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <ion-header collapse="condense">
    <ion-toolbar>
      <ion-title>Now Movies</ion-title>
    </ion-toolbar>
  </ion-header>

  <ion-grid>
    <ion-row>
      <ion-col>
        <ion-card *ngFor="let movie of list" class="ion-padding-top">
          <div class="ion-text-center">
            <img src="https://image.tmdb.org/t/p/w300_and_h450_bestv2/{{movie.poster_path}}" />
          </div>
          <ion-card-header>
            <ion-card-subtitle>{{ movie.release_date }}</ion-card-subtitle>
            <ion-card-title>{{ movie.title }}</ion-card-title>
          </ion-card-header>
        
          <ion-card-content>
            {{ movie.overview }}
          </ion-card-content>
        </ion-card>
      </ion-col>
     
    </ion-row>
  </ion-grid> 
</ion-content>
```

![スクリーンショット 2020-09-16 21.26.42.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167220/4051d9c1-a7b9-23b7-a095-c4f62546810a.jpeg)

これで取得できていたらOK！

いやー、TMDb APIはすごい。しかも商用も無料！

#参考にしたページ
https://stackblitz.com/edit/angular-movies-list

#終わりに
検索もできます:point_down:
[【Ionic + Angular】TMDb APIで映画の検索を実装する](https://qiita.com/kokogento/items/103d0a92d728276455ab)