netflix assistant

Netflix 助手？

使用 ReelGood API 在 Netflix 上搜尋和過濾節目和電影

製成：

• Netflix 功能
• ReelGood API（因為 Netlify API 無法存取）
• Mustache.js NPM 套件

錯誤

此應用程式目前已損壞 - ReelGood 已遷移到在其網站上使用 V3 API，而 V2 API 不再運作。如果您想了解如何使用新的 API 端點並貢獻 PR，請這樣做。

請參閱問題#5。

限制

到目前為止，該專案僅使用模板將單頁 API 結果表示為文字和圖像。

沒有花哨的報告或過濾。

另外，我可能會在 Vue 中重建它，而不是 Mustache。

預覽

網路應用程式

目的

ReelGood 是一項提供包括 Netflix 在內的許多線上服務的電視節目和電影清單的服務。

ReelGood 在其網站上有一個很棒的 GUI，可以輕鬆導航以進行搜尋和過濾。他們也使用 API 作為其中的一部分。我想建立自己的演出指南報告和推薦列表，因此我使用客戶端 JS 從他們的 API 中提取資料並將其呈現在網站上。

用法

查看網站：

• netflix-assistant.netlify.app

如果您不熟悉 Netlify / Lambda 函數，請參閱我的食譜。

直接測試 JSON API 端點：

• Netflix 節目
  • 這是由網站前端查詢的。該函數從 ReelGood API 取得資料並傳回。設定快取是為了減少資源使用。完成的查詢受到限制，可以擴展為更靈活，例如獲取參數並在內部進行分頁。
  • 端點：/.netlify/functions/shows
  • 腳本：functions/shows.js

安裝

複製

克隆儲存庫：

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

沒有建置或安裝步驟！

下面繼續。

基礎設施

使用 Serverless 進行 API 請求

此應用程式無法直接執行瀏覽器請求 ReelGood API（在本機這沒問題，但在部署的網站上您會收到錯誤）。 API 變更導致存在 CORS 錯誤。

因此，該應用程式經過重新設計，以使用 Netlify 的免費Functions功能（基於 AWS Lambda 建置）。

函數是使用簡短的 JS 腳本定義的，該腳本託管在 Netlify 上。當對此函數的端點發出請求時，系統會向 ReelGood API 發出請求，並將結果作為快取的 JSON 回應傳回。

這比建立 Python 或 Node API 簡單得多，因為這需要更多程式碼並且無法託管在 Netlify 上。

在本地使用函數端點

缺點是該功能只能在雲端運行，不能在本機伺服器上運行。

有一些方法可以解決這個問題：

• 在本機設定 Python/Node 伺服器並在本機上存取它。您可以使用帶有http庫的簡短腳本來設定伺服器，只需添加一行額外的行來調用某個端點上的 JS 腳本 - 這意味著您只需要一台伺服器和一個連接埠。
• 使用 Netlify CLI（可能類似 NPM 上的 netlify）。
• 取得要在本機上執行的 HTML/JS 程式碼，但仍使用自訂 URL 來引用 Netlify 應用程式的函數端點。

用法

請注意，本地使用受到限制 - 請參閱上面的部分。

伺服器

在根目錄中啟動 Web 伺服器。

請參閱本要點中的方法或使用下面的方法。

• 使用 VS Code 的 Live Server 擴充功能（具有自動重新載入功能）。
• 啟動 Python Web 伺服器（無自動重新載入）。

  $ python3 -m http.server

在瀏覽器中開啟。例如

• https://本地主機:8000

刮刀

這個專案中有一個基本的 shell 腳本，它使用 Bash 和 cURL 從 ReelGood API 取得資料。

這種方法不是使用上面介紹的按需函數，而是從 API 中抓取數據並將其儲存為 JSON 數據，如果您關心的話，可以將其保留在已部署的應用程式中或提交給版本控制。然後前端可以使用該資料 - 這會快得多，因為所有分頁都已處理。以稍微陳舊的資料和查詢大型靜態 JSON 檔案為代價。可以進行一些清理，以便 JSON 檔案僅包含感興趣的欄位。

腳本從 API 取得節目的前兩頁，其中 IMDB 和 ReelGood 分數高於 50%。如果您想智慧分頁，建議使用 Python 或類似的更高級處理 - 即替換為更高的skip值，直到沒有更多頁面。

• 刮/get_shows.sh

運行為：

$ cd scrape
$ ./get_shows.sh

然後查看out子目錄下建立的JSON文件

部署

遠端設定

此儲存庫可以免費部署在 Netlify 上 - 作為靜態網站以及用於無伺服器後端呼叫外部 API 的 Netlify 函數。

必須為 API 請求設定 CORS 標頭，但無法在 Github Pages 上設定。此外，這使用了 Netlify 上的 Function，而 GitHub Pages 則不支援該功能。

數據來源

在 ReelGood 的網站上，您可以查看可在 Netflix 上觀看的電視節目和影片。

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

此頁面支援過濾器參數、排序選項和顯示格式選項。

顯示資料是從 ReelGood API 檢索的。

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

這是在初始頁面加載、應用過濾/排序以及單擊頁面底部的“加載更多”時完成的。

該 API 可以免費使用，並且在其常見問題解答頁面上提供了請求 API 存取的詳細資訊。我發現無需向他們發送電子郵件即可輕鬆存取該 API。我還沒有找到它的文檔，所以我將我所做的 GUI 選擇與發出的 API 請求進行比較，並推斷 API 請求上的欄位如何運作以及響應欄位的含義。

發展

未來發展

• 考慮避免混合使用$.getJSON （前端）和axios （函數）來簡化專案。
• 利用 Netflix 數據做一些更具互動性（可搜尋）和有用的事情（分頁更多數據並更好地呈現）。

拉姆達

為了避免 CORS 錯誤，該專案使用 Netlify 上的函數（又稱 Lambda）來請求伺服器端的數據，然後使資料在與瀏覽器請求相同的網域中可用。

請參閱 Netlify 函數。

另請參閱部落格文章。

本機設定可以使用 Netlify 函式庫，或者只是基於ENV=dev或 local/remote 等標誌使用原始 URL（幸運的是，即使在 Netlify 上確實如此，它也不會在本機上產生 CORS 錯誤）作為後備。

執照

由 @MichaelCurrin 在 MIT 下發布。