netflix assistant

넷플릭스 어시스턴트?

ReelGood API를 사용하여 Netflix에서 프로그램과 영화를 검색하고 필터링합니다.

다음으로 제작:

• 넷플릭스 기능
• ReelGood API(Netlify API에 접근할 수 없기 때문)
• mustache.js NPM 패키지

오류

이 앱은 현재 작동하지 않습니다. ReelGood은 사이트에서 V3 API를 사용하도록 마이그레이션되었으며 V2 API는 더 이상 작동하지 않습니다. 새로운 API 엔드포인트를 어떻게 사용하고 PR에 기여할 수 있는지 알아보고 싶다면 그렇게 하세요.

문제 #5를 참조하세요.

제한 사항

지금까지 이 프로젝트는 템플릿을 사용하여 API 결과의 단일 페이지를 텍스트와 이미지로 표현했습니다.

멋진 보고나 필터링이 없습니다 .

또한 Mustache 대신 Vue에서 이것을 다시 빌드할 수도 있습니다.

시사

웹 앱

목적

ReelGood은 Netflix를 포함한 다양한 온라인 서비스에서 TV 프로그램 및 영화 목록을 제공하는 서비스입니다.

ReelGood의 웹사이트에는 검색 및 필터링을 위해 쉽게 탐색할 수 있는 훌륭한 GUI가 있습니다. 그들은 또한 이것의 일부로 API를 사용합니다. 나는 나만의 쇼 가이드 보고서와 추천 목록을 만들고 싶었기 때문에 클라이언트 측 JS를 사용하여 API에서 데이터를 가져와 웹사이트에 렌더링했습니다.

용법

사이트 보기:

• 넷플릭스-assistant.netlify.app

Netlify/Lambda Functions를 처음 사용하는 경우 내 요리책을 참조하세요.

JSON API 엔드포인트를 직접 테스트합니다.

• 넷플릭스 프로그램
  • 이는 웹사이트 프런트엔드에서 쿼리됩니다. 이 함수는 ReelGood API에서 데이터를 가져와서 반환합니다. 캐싱은 리소스 사용량을 줄이기 위해 설정됩니다. 수행된 쿼리는 매개변수를 사용하고 내부적으로 페이징을 수행하는 등 보다 유연하게 확장될 수 있으므로 제한됩니다.
  • 끝점: /.netlify/functions/shows
  • 스크립트: 기능/shows.js

설치

클론

저장소를 복제합니다.

$ git clone [email protected]:MichaelCurrin/netflix-assistant.git
$ cd netflix-assistant

빌드나 설치 단계가 없습니다!

아래에서 계속하세요.

하부 구조

서버리스를 사용하여 API 요청

이 앱은 브라우저 요청을 직접 ReelGood API로 수행할 수 없습니다(로컬에서는 괜찮지만 배포된 사이트에서는 오류가 발생합니다). API 변경으로 인해 CORS 오류가 발생했습니다.

그래서 이 앱은 Netlify의 무료 Functions 기능(AWS Lambda 기반)을 사용하도록 재설계되었습니다.

함수는 짧은 JS 스크립트를 사용하여 정의되며 이는 Netlify에서 호스팅됩니다. 이 함수의 엔드포인트에 요청이 완료되면 ReelGood API에 요청이 이루어지고 결과가 캐시된 JSON 응답으로 반환됩니다.

이는 훨씬 더 많은 코드가 필요하고 Netlify에서 호스팅할 수 없기 때문에 Python 또는 Node API를 구축하는 것보다 훨씬 간단합니다.

로컬에서 함수 엔드포인트 사용

단점은 이 기능이 클라우드에서만 작동하고 로컬 서버에서는 작동하지 않는다는 것입니다.

이 문제를 해결할 수 있는 몇 가지 방법이 있습니다.

• Python/Node 서버를 로컬로 설정하고 localhost에서 액세스합니다. http 라이브러리가 포함된 짧은 스크립트를 사용하여 서버를 설정할 수 있으며 특정 엔드포인트에서 JS 스크립트를 호출하기 위해 추가 행을 추가하기만 하면 됩니다. 이는 서버와 포트가 하나만 필요하다는 의미입니다.
• Netlify CLI를 사용하세요(NPM의 netlify와 비슷할 수도 있음).
• localhost에서 실행할 HTML/JS 코드를 가져오되 여전히 사용자 정의된 URL을 사용하여 Netlify 앱의 함수 엔드포인트를 참조하세요.

용법

로컬 사용은 제한되어 있습니다. 위 섹션을 참조하세요.

섬기는 사람

루트 디렉터리에서 웹 서버를 시작합니다.

이 요지의 접근 방식을 참조하거나 아래 접근 방식을 사용하세요.

• VS Code의 Live Server 확장(자동 다시 로드 포함)을 사용하세요.
• Python 웹 서버를 시작합니다(자동 다시 로드 없음).

  $ python3 -m http.server

브라우저에서 엽니다. 예를 들어

• https://localhost:8000

스크레이퍼

이 프로젝트에는 Bash와 cURL을 사용하여 ReelGood API에서 데이터를 가져오는 기본 쉘 스크립트가 있습니다.

위에서 설명한 대로 주문형 함수를 사용하는 대신 이 접근 방식은 API에서 데이터를 스크랩하여 JSON 데이터로 저장하는 것입니다. 이 데이터는 배포된 앱에 남겨두거나 관심 있는 경우 버전 제어에 적용할 수 있습니다. 그러면 프런트엔드에서 해당 데이터를 사용할 수 있습니다. 모든 페이징이 이미 처리되었기 때문에 속도가 훨씬 빨라집니다. 약간 오래된 데이터와 대규모 정적 JSON 파일을 쿼리하는 비용이 듭니다. JSON 파일에 관심 있는 필드만 포함되도록 일부 정리를 수행할 수 있습니다.

이 스크립트는 API에서 프로그램의 처음 두 페이지를 가져옵니다. 여기서 IMDB 및 ReelGood 점수는 50% 이상입니다. 스마트하게 페이징하려면 Python이나 이와 유사한 고급 처리를 사용하는 것이 좋습니다. 즉, 페이지가 더 이상 없을 때까지 더 높은 skip 값으로 대체합니다.

• 스크랩/get_shows.sh

다음으로 실행:

$ cd scrape
$ ./get_shows.sh

그런 다음 out 하위 디렉터리에 생성된 JSON 파일을 봅니다.

배포

원격 설정

이 저장소는 외부 API에 대한 서버리스 백엔드 호출을 위한 정적 웹사이트와 Netlify 기능으로 Netlify에 무료로 배포할 수 있습니다.

API 요청에는 CORS 헤더를 설정해야 하며 Github 페이지에서는 설정할 수 없습니다. 또한 GitHub Pages가 지원하지 않는 Netlify의 Function을 사용합니다.

데이터 소스

ReelGood 웹사이트에는 Netflix에서 스트리밍할 수 있는 TV 프로그램과 영화 보기가 있습니다.

• https://reelgood.com/source/netflix

이 페이지는 필터 매개변수, 주문 옵션 및 표시 형식 옵션을 지원합니다.

프로그램 데이터는 ReelGood API에서 검색됩니다.

• https://api.reelgood.com/v2/

이는 필터링/정렬을 적용할 때, 그리고 페이지 하단의 추가 로드를 클릭할 때 초기 페이지 로드 시 수행됩니다.

API는 무료로 사용할 수 있으며 FAQ 페이지에서 API 액세스 요청에 대한 세부 정보를 제공합니다. 이메일을 보내지 않고도 API에 쉽게 액세스할 수 있다는 것을 알았습니다. 이에 대한 문서를 아직 찾지 못했기 때문에 내가 선택한 GUI를 API 요청과 비교하고 API 요청의 필드가 작동하는 방식과 응답 필드의 의미를 추론합니다.

개발

향후 개발

• 프로젝트를 단순화하려면 $.getJSON (프론트엔드)과 axios (함수)의 혼합을 피하세요.
• Netflix 데이터를 사용하여 더욱 상호작용적이고(검색 가능) 유용한 작업(더 많은 데이터 페이지를 작성하고 더 효과적으로 표시)을 수행해 보세요.

람다

CORS 오류를 방지하기 위해 이 프로젝트는 Netlify의 Lambda라는 함수를 사용하여 서버 측에서 데이터를 요청한 다음 브라우저 요청과 동일한 도메인에서 데이터를 사용할 수 있도록 합니다.

Netlify 함수를 참조하세요.

블로그 게시물도 참조하세요.

로컬 설정은 Netlify 라이브러리를 사용하거나 ENV=dev 또는 local/remote와 같은 플래그를 기반으로 원래 URL(Netlify에서 수행하더라도 다행스럽게도 localhost에서 CORS 오류를 제공하지 않음)을 사용하는 대체 방법을 사용할 수 있습니다.

특허

@MichaelCurrin이 MIT에서 발표했습니다.