Angular에서 동영상 가져오기 서비스 만들기

우리는 지금 며칠 동안 Angular를 탐색해 왔으며 API에서 일부 데이터를 가져와서 멋지게 만들어 보겠습니다.

우리는 API 호출을 수행하고 이러한 모든 호출을 수행하는 사용자 정의 서비스를 만드는 방법을 배울 것입니다.

최종 결과는 다음과 같습니다.

HttpClient 모듈 사용

요청을 하기 위해 우리는 HttpClient 모듈을 사용할 것입니다.
전체 애플리케이션이 이를 활용할 수 있도록 이 모듈을 app.module.ts에 로드할 것입니다.

파일 맨 위에서 가져오기를 정의하여 시작하겠습니다.

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

그런 다음 BrowserModule 뒤에 실제 가져오기를 배치할 수 있습니다.

@NgModule({
  declarations: [
        // All declarations
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    // Other imports
  ],
  providers: [],
  bootstrap: [AppComponent]
})

서비스 만들기

이제 API와 통신할 서비스를 만들 수 있습니다.

즐겨찾는 터미널을 열고 프로젝트 폴더에서 다음 명령을 실행합니다.

Typescript가 이것을 활용할 수 있도록 먼저 영화 모델을 만들어 봅시다.

ng generate class movie

편집기에서 movie.ts 파일을 열고 다음과 같이 만듭니다.

export class Movie {
    Poster: string;
    Title: string;
    Type: string;
    Year: string;
    imdbID: string;
}

이제 서비스를 생성하자

ng generate service movie

그러면 movie.service.ts 파일이 생성됩니다.

선택한 편집기에서 이 파일을 열고 몇 가지 기본 사항을 정의하여 시작하겠습니다.

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Movie } from './movie';

export type ApiResponse = {
  Response: string;
  Search: Movie[];
  totalResults: string;
};

@Injectable({
  providedIn: 'root'
})
export class MovieService {
  apiURL: string = 'http://www.omdbapi.com/?apikey={key}';

  constructor(private httpClient: HttpClient) {}
}

영화를 얻기 위해 OMDBapi을 사용할 것입니다. 웹 사이트에서 여전히 무료 APIKey를 얻을 수 있습니다.

이 예에서는 이 URL을 파일에 배치하고 실제 예에서는 env 파일을 키로 사용하거나 상수 파일을 URL 저장에 사용합니다.

이제 방법을 만들 수 있습니다. 특정 영화를 검색하는 검색 방법이 될 것입니다.

searchMovie(name: string) {
    return this.httpClient.get<any>(`${this.apiURL}&s=${name}`);
}

서비스 호출

이제 우리는 물론 서비스를 호출하고 우리가 얻은 영화를 보여주고 싶습니다.
welcome.component.ts 파일을 열고 가져오기에서 서비스를 로드합니다.

import { MovieService } from '../movie.service';

이제 구성 요소에 주입해야 하지만 생성자에 추가해야 합니다.

constructor(private movieService: MovieService) { }

또한 영화 변수를 영화 클래스의 배열로 정의해 보겠습니다.

movies: Movie[];

ngOnInit에서 서비스에 전화를 걸어 배트맨 영화를 요청할 것입니다.

ngOnInit(): void {
    this.movieService.searchMovie('Batman').subscribe(result => {
      this.movies = result.Search;
    });
}

서비스를 호출하고 결과를 구독합니다. 차례로 영화 변수를 result.Search 값으로 설정합니다.

이제 영화를 반영하도록 HTML 파일을 조정하겠습니다.

<div class="grid grid-cols-5">
    <div class="max-w-sm rounded overflow-hidden shadow-lg" *ngFor="let movie of movies">
        <img class="w-full" [src]="movie.Poster" [alt]="movie.Title">
        <div class="px-6 py-4">
            <div class="font-bold text-xl mb-2">{{ movie.Title }}</div>
        </div>
    </div>
</div>

이제 초기 영화 검색 앱이 생겼습니다!

당신한테 달렸습니다

이제 이 코드를 가져오고 검색할 수 있는 입력 필드 또는 특정 영화를 만드는 것은 사용자에게 달려 있습니다.

포스터를 클릭하면 이 영화에 대한 자세한 정보를 볼 수 있습니다.

이것으로 무엇을 만들었는지 알려주세요!

GitHub에서 이 프로젝트의 일부를 찾을 수 있습니다.

읽어주셔서 감사합니다. 연결합시다!

제 블로그를 읽어주셔서 감사합니다. 내 이메일 뉴스레터를 구독하고 Facebook에 연결하거나