Pesquise e filtre programas e filmes no Netflix usando a API ReelGood
Feito com:
Este aplicativo está quebrado no momento - ReelGood migrou para o uso da API V3 em seu site e a API V2 não funciona mais. Se você quiser descobrir como os novos endpoints da API podem ser usados e contribuir com um PR, faça isso.
Veja a edição nº 5.
Até agora, este projeto representa apenas uma única página de resultados da API como texto e imagens, usando modelos.
Não há relatórios ou filtros sofisticados.
Também posso reconstruir isso no Vue, em vez do Bigode.
ReelGood é um serviço que fornece listas de programas de TV e filmes em muitos serviços online, incluindo Netflix.
ReelGood tem uma ótima GUI em seu site que é fácil de navegar para pesquisa e filtragem. Eles também usam uma API como parte disso. Eu queria criar meus próprios relatórios de guia de programas e lista de recomendações, então extraio dados de sua API com JS do lado do cliente e os renderizo em um site.
Veja o site:
Se você é novo nas funções Netlify/Lambda, consulte meu livro de receitas.
Teste o endpoint da API JSON diretamente:
Clone o repositório:
$ git clone [email protected]:MichaelCurrin/netflix-assistant.git
$ cd netflix-assistant
Não há etapas de construção ou instalação!
Continue abaixo.
Usando Serverless para solicitações de API
Este aplicativo não pode fazer solicitações do navegador diretamente à API ReelGood (localmente tudo bem, mas no site implantado você recebe um erro). A API muda para que haja erros de CORS.
Portanto, este aplicativo foi redesenhado para usar o recurso Functions gratuito do Netlify (construído no AWS Lambda).
Uma função é definida usando um script JS curto e está hospedado no Netlify. Quando uma solicitação é feita ao endpoint desta função, uma solicitação é feita à API ReelGood e o resultado é retornado como uma resposta JSON armazenada em cache.
Isso é muito mais simples do que construir uma API Python ou Node, pois isso precisa de muito mais código e não pode ser hospedado no Netlify.
A desvantagem é que a Função só funciona na nuvem e não em um servidor local.
Existem algumas maneiras de contornar isso:
http
talvez, e apenas adicionar uma linha extra para chamar o script JS em um determinado endpoint - isso significa que você só precisa de um servidor e uma porta.Observe que o uso local é limitado – consulte a seção acima.
Inicie um servidor web no diretório raiz.
Veja as abordagens nesta essência ou use uma abordagem abaixo.
$ python3 -m http.server
Abra no navegador. por exemplo
Há um script shell básico neste projeto que usa Bash e cURL para obter dados da API ReelGood.
Em vez de usar uma função sob demanda conforme abordado acima, essa abordagem consiste em extrair dados da API e armazená-los como dados JSON, que podem ser deixados no aplicativo implantado ou comprometidos com o controle de versão, se você se importar com isso. Então o frontend pode usar esses dados - o que será muito mais rápido porque toda a paginação já foi tratada. Ao custo de dados ligeiramente desatualizados e da consulta de um grande arquivo JSON estático. Alguma limpeza poderia ser feita para que o arquivo JSON contenha apenas campos de interesse.
Este script obtém as duas primeiras páginas de programas da API, onde as pontuações IMDB e ReelGood estão acima de 50%. Um tratamento mais avançado com Python ou similar é recomendado se você quiser paginar de forma inteligente - ou seja, substitua por um valor skip
mais alto, até que não haja mais páginas.
Execute como:
$ cd scrape
$ ./get_shows.sh
Em seguida, visualize os arquivos JSON criados no subdiretório out
Configuração remota
Este repositório pode ser implantado no Netlify gratuitamente - como um site estático mais funções do Netlify para chamadas de back-end sem servidor para a API externa.
O cabeçalho CORS deve ser definido para solicitações de API e isso não é possível de ser definido nas páginas do Github. Além disso, isso usa Function no Netlify, que o GitHub Pages não suporta.
No site da ReelGood há uma visualização de programas de TV e filmes disponíveis para transmissão na Netflix.
A página suporta parâmetros de filtro, opções de ordenação e opções de formato de exibição.
Os dados do programa são recuperados da API ReelGood.
Isso é feito no carregamento inicial da página, quando você aplica a filtragem/classificação e também quando clica em Carregar mais na parte inferior da página.
O uso da API é gratuito e em sua página de perguntas frequentes eles fornecem detalhes para solicitar acesso à API. Descobri que, sem precisar enviar um e-mail para eles, a API é fácil de acessar. Ainda não encontrei documentação para isso, então comparo a escolha da GUI que faço com as solicitações de API que são feitas e infiro como funcionam os campos nas solicitações de API e o que significam os campos de resposta.
$.getJSON
(frontend) e axios
(Function) para simplificar o projeto.Para evitar erros de CORS, este projeto usa uma função também conhecida como Lambda no Netlify para solicitar dados no lado do servidor e depois disponibilizar os dados no mesmo domínio da solicitação do navegador.
Consulte Função Netlify.
Veja também a postagem do blog.
Uma configuração local poderia usar uma biblioteca Netlify ou apenas um substituto para o uso da URL original (que felizmente não fornece erros de CORS no host local, embora o faça no Netlify) com base em um sinalizador como ENV=dev
ou local/remote.
Lançado no MIT por @MichaelCurrin.