NodeJS를 사용하여 CLI 기반 무비 스크레이퍼를 만드는 방법

이 가이드는 사용자에게 영화를 요청하고 해당 영화에 대한 정보를 반환하는 CLI 애플리케이션을 만드는 방법을 안내합니다. 가장 성공하려면 최소한 Node와 NPM에 대한 초보자 이해가 있어야 합니다. 또한 bash를 사용하여 파일을 탐색하는 방법에 대한 기본적인 이해가 있어야 합니다. 원하는 경우 GUI 응용 프로그램을 자유롭게 사용할 수 있지만 터미널 예제만 제공됩니다.

전제 조건

MovieDB API 키

API 키를 얻으려면 TheMovieDB의 무료 계정이 필요합니다. 1개here에 가입할 수 있습니다.
키가 있으면 API Documentation에 문의할 수 있습니다.

노드 JS

Node JS가 설치되어 있어야 합니다. 다양한 플랫폼에 대한 지침을 찾을 수 있습니다here.

선택한 텍스트 편집기 또는 IDE.

bash 명령을 실행할 수 있는 터미널입니다.

1부(폴더 및 파일 구조 설정, NPM 패키지 설치)

먼저 프로젝트의 루트 폴더를 만듭니다. 이 가이드는 movie-scraper라고 부를 것입니다. 그런 다음 새로 만든 폴더로 이동합니다.

mkdir movie-scraper && cd movie-scraper

movie-scraper 디렉토리 내에서 다음 명령을 실행하십시오.

npm init -y

이렇게 하면 package.json 파일이 생성됩니다. 이 파일을 두 번 수정해야 합니다.
최상위 수준에 "type": "module"를 추가하고 스크립트 섹션에 "start": "node src/index.js"를 추가합니다.

이렇게 보일 것입니다. (개인 npm 설정에 따라 약간의 차이가 있을 수 있습니다. 위에서 필요한 변경 사항에만 집중하세요.)

{
  "name": "movie-scraper",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "type": "module",
  "scripts": {
    "start": "node src/index.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
  }
}

터미널에서 다음 명령을 실행하여 npm 패키지axiosdotenv 및 inquirer를 설치합니다.

npm i axios dotenv inquirer

이제 루트 폴더에 node-modules 디렉토리가 표시되어야 합니다.

.
├── node_modules
├── package-lock.json
├── package.json

또한 새로 설치된 패키지가 종속 항목package.json에 나열되어 있어야 합니다.

"dependencies": {
    "axios": "^0.26.1",
    "dotenv": "^16.0.0",
    "inquirer": "^8.2.2"
}

이제 TheMovieDB에 대한 API 키를 보유할 .env 파일을 생성할 것입니다. 이 프로젝트에 대해 git 또는 다른 버전 제어를 사용하는 경우 이 파일을 커밋하지 마십시오.
PUT_YOUR_API_KEY_HERE를 실제 API 키로 바꿉니다. 백슬래시와 인용 부호를 유지하십시오.

echo TMDB_API_KEY=\"PUT_YOUR_API_KEY_HERE\" >> .env

cat 명령을 사용하여 파일이 생성되었는지 확인할 수 있습니다.

cat .env

X 대신 API 키가 있는 다음 출력이 표시됩니다.

TMDB_API_KEY="XXXXXXXXXX"

프로그램의 로직을 포함할 src 디렉토리를 생성하고 해당 디렉토리로 이동합니다.

mkdir src && cd src

src 디렉터리에 다음 파일을 만듭니다.
Movie.jsconfig.jsgetByID.jsindex.jsprompt.jssearchMovie.js
터미널에서 하나의 명령으로 이 작업을 수행할 수 있습니다.

touch {Movie,config,getByID,index,prompt,searchMovie}.js

이제 프로젝트에 다음 파일 구조가 있어야 합니다.

.
├── .env
├── node_modules
├── package-lock.json
├── package.json
└── src
    ├── Movie.js
    ├── config.js
    ├── getByID.js
    ├── index.js
    ├── prompt.js
    └── searchMovie.js

2부(자바스크립트 파일)

다음 코드를 각 해당 파일에 복사/붙여넣기

src/config.js

import dotenv from "dotenv";
dotenv.config();

export default{
    tmbdkey: process.env.TMDB_API_KEY,
};

src/getByID.js

import config from "./config.js";
import axios from 'axios'

const getByID = async (id) => {
        const options={
            params: {
                api_key: config.tmbdkey,
                language: "en-US",
                append_to_response: `credits`
            }
    }

    let response = await axios.get(`https://api.themoviedb.org/3/movie/${id}`, options)
    return response.data

}

export default getByID;

src/index.js

import inquirer from 'inquirer';
import Movie from './Movie.js'
import moviePrompts from './prompt.js'

const movieResponse = await inquirer.prompt(moviePrompts)
const selectedMovie = await new Movie(movieResponse.movieID);
selectedMovie.summary()

src/Movie.js

import getByID from './getByID.js'

class Movie {
    constructor(id) {
        return (async () => {
            this.details = await getByID(id)
            return this
        })()
    }

    get title() {
        return this.details.title
    }

    get tagline() {
        return this.details.tagline
    }

    get overview() {
        return this.details.overview
    }

    get directors() {
        const directors = this.details.credits.crew.filter(
            (obj) => obj.job === 'Director',
        )
        return directors.map((director) => director.name)
    }

    get writers() {
        const writers = this.details.credits.crew.filter(
            (obj) => obj.job === 'Screenplay',
        )
        return writers.map((writer) => writer.name)
    }

    get cast() {
        const cast = this.details.credits.cast.slice(0, 5)
        return cast.map((castMember) => ({
            name: castMember.name,
            role: castMember.character,
        }))
    }

    summary() {
        const summary = 
`
${this.title} - ${this.tagline}
Directed By: ${this.directors}  Written By: ${this.writers}

${this.overview}

Starring:
${this.cast.map(castMember => ` ${castMember.name} as ${castMember.role}`)}
`
        console.log(summary) 
    }
}

export default Movie

src/prompt.js

import searchMovie from './searchMovie.js'

const moviePrompts = [  
    {
        name: "name",
        type: "input",
        message: "Enter a movie to search:"
    },
    {
        name: "movieID",
        type: "list",
        message: "Select a movie:",
        choices: (answers) => searchMovie(answers.name)
    }
]

export default moviePrompts

src/searchMovie.js

import config from "./config.js";
import axios from 'axios'

const searchMovie = async (movie) => {
        const options={
            params: {
                api_key: config.tmbdkey,
                language: "en-US",
                query: movie,
            }
    }

    const simpleList = movieObj => ({name: `${movieObj.title} (${movieObj.release_date.slice(0,4)})`, value: movieObj.id})

    const res = await axios.get('https://api.themoviedb.org/3/search/movie', options);

    const list = res.data.results.map(simpleList).slice(0,5)

    return list;

}

export default searchMovie;

파트 3(실행)

프로젝트 실행 루트에서

npm start

다음과 같이 사전 설정됩니다.

> [email protected] start
> node src/index.js

? Enter a movie to search: 

응용 프로그램에서 제공하는 프롬프트를 따릅니다.