Suchen und filtern Sie Sendungen und Filme auf Netflix mithilfe der ReelGood-API
Hergestellt mit:
Diese App ist derzeit defekt – ReelGood ist auf die Verwendung der V3-API auf ihrer Website umgestiegen und die V2-API funktioniert nicht mehr. Wenn Sie herausfinden möchten, wie die neuen API-Endpunkte verwendet werden können, und eine PR beisteuern möchten, tun Sie dies bitte.
Siehe Ausgabe Nr. 5.
Bisher stellt dieses Projekt mithilfe von Vorlagen lediglich eine einzelne Seite mit API-Ergebnissen als Text und Bilder dar.
Es gibt keine ausgefallenen Berichte oder Filter.
Ich könnte dies auch in Vue anstelle von Moustache nachbauen.
ReelGood ist ein Dienst, der eine Auflistung von Fernsehsendungen und Filmen in vielen Online-Diensten, einschließlich Netflix, bereitstellt.
ReelGood verfügt auf seiner Website über eine großartige Benutzeroberfläche, die zum Suchen und Filtern einfach zu navigieren ist. Dabei nutzen sie auch eine API. Ich wollte meine eigenen Show-Guide-Berichte und Empfehlungslisten erstellen, also ziehe ich mit clientseitigem JS Daten aus ihrer API und rendere sie auf einer Website.
Sehen Sie sich die Website an:
Wenn Sie neu bei Netlify / Lambda Functions sind, lesen Sie mein Kochbuch.
Testen Sie den JSON-API-Endpunkt direkt:
Klonen Sie das Repo:
$ git clone [email protected]:MichaelCurrin/netflix-assistant.git
$ cd netflix-assistant
Es gibt keine Build- oder Installationsschritte!
Weiter unten.
Verwendung von Serverless für API-Anfragen
Diese App kann keine Browseranfragen direkt über die ReelGood-API ausführen (lokal ist dies in Ordnung, aber auf der bereitgestellten Site wird eine Fehlermeldung angezeigt). Die API-Änderung führt dazu, dass CORS-Fehler auftreten.
Deshalb wurde diese App neu gestaltet, um die kostenlose Funktionsfunktion von Netlify (basierend auf AWS Lambda) zu nutzen.
Eine Funktion wird mithilfe eines kurzen JS-Skripts definiert und dieses wird auf Netlify gehostet. Wenn eine Anfrage an den Endpunkt dieser Funktion gestellt wird, wird eine Anfrage an die ReelGood-API gestellt und das Ergebnis wird als zwischengespeicherte JSON-Antwort zurückgegeben.
Das ist viel einfacher als das Erstellen einer Python- oder Node-API, da hierfür viel mehr Code erforderlich ist und nicht auf Netlify gehostet werden kann.
Der Nachteil ist, dass die Funktion nur in der Cloud und nicht auf einem lokalen Server funktioniert.
Es gibt einige Möglichkeiten, dies zu umgehen:
http
Bibliothek einrichten und einfach eine zusätzliche Zeile hinzufügen, um das JS-Skript auf einem bestimmten Endpunkt aufzurufen – das bedeutet, dass Sie nur einen Server und einen Port benötigen.Beachten Sie, dass die lokale Nutzung begrenzt ist – siehe Abschnitt oben.
Starten Sie einen Webserver im Stammverzeichnis.
Sehen Sie sich die Ansätze in diesem Kern an oder verwenden Sie einen der folgenden Ansätze.
$ python3 -m http.server
Im Browser öffnen. z.B
In diesem Projekt gibt es ein einfaches Shell-Skript, das Bash und cURL verwendet, um Daten von der ReelGood-API abzurufen.
Anstatt wie oben beschrieben eine On-Demand-Funktion zu verwenden, besteht dieser Ansatz darin, Daten aus der API zu extrahieren und als JSON-Daten zu speichern, die in der bereitgestellten App verbleiben oder der Versionskontrolle übergeben werden können, wenn Sie daran interessiert sind. Dann kann das Frontend diese Daten nutzen – was viel schneller geht, da das gesamte Paging bereits erledigt ist. Auf Kosten leicht veralteter Daten und der Abfrage einer großen statischen JSON-Datei. Es könnten einige Aufräumarbeiten durchgeführt werden, sodass die JSON-Datei nur relevante Felder enthält.
Dieses Skript ruft die ersten beiden Seiten von Sendungen von der API ab, deren IMDB- und ReelGood-Werte über 50 % liegen. Eine fortgeschrittenere Handhabung mit Python oder ähnlichem wird empfohlen, wenn Sie intelligent seitenweise arbeiten möchten, d. h. durch einen höheren skip
ersetzen, bis keine Seiten mehr vorhanden sind.
Ausführen als:
$ cd scrape
$ ./get_shows.sh
Sehen Sie sich dann die im Unterverzeichnis out
erstellten JSON-Dateien an
Remote-Setup
Dieses Repo kann kostenlos auf Netlify bereitgestellt werden – als statische Website plus Netlify-Funktionen für die serverlosen Backend-Aufrufe an die externe API.
Der CORS-Header muss für API-Anfragen festgelegt werden und kann auf Github-Seiten nicht festgelegt werden. Außerdem wird hierbei die Funktion auf Netlify verwendet, die von GitHub Pages nicht unterstützt wird.
Auf der Website von ReelGood gibt es eine Übersicht über TV-Sendungen und Filme, die auf Netflix gestreamt werden können.
Die Seite unterstützt Filterparameter, Bestelloptionen und Anzeigeformatoptionen.
Die Showdaten werden von der ReelGood-API abgerufen.
Dies geschieht beim ersten Laden der Seite, wenn Sie Filter/Sortierung anwenden und auch, wenn Sie unten auf der Seite auf „Mehr laden“ klicken.
Die Nutzung der API ist kostenlos und auf der FAQ-Seite finden Sie Einzelheiten zur Beantragung des API-Zugriffs. Ich habe festgestellt, dass die API leicht zugänglich ist, ohne ihnen eine E-Mail senden zu müssen. Ich habe noch keine Dokumentation dafür gefunden, daher vergleiche ich meine GUI-Auswahl mit den gestellten API-Anfragen und folgere daraus, wie die Felder in den API-Anfragen funktionieren und was die Antwortfelder bedeuten.
$.getJSON
(Frontend) und axios
(Funktion) zu vermeiden, um das Projekt zu vereinfachen.Um CORS-Fehler zu vermeiden, verwendet dieses Projekt eine Funktion namens Lambda auf Netlify, um Daten auf der Serverseite anzufordern und die Daten dann in derselben Domäne wie die Browseranforderung verfügbar zu machen.
Siehe Netlify-Funktion.
Siehe auch Blogbeitrag.
Ein lokales Setup könnte eine Netlify-Bibliothek verwenden oder einfach auf die ursprüngliche URL zurückgreifen (die glücklicherweise keine CORS-Fehler auf localhost verursacht, obwohl dies auf Netlify der Fall ist), basierend auf einem Flag wie ENV=dev
oder local/remote.
Veröffentlicht unter MIT von @MichaelCurrin.