netflix assistant

ผู้ช่วย Netflix ?

ค้นหาและกรองรายการและภาพยนตร์ใน Netflix โดยใช้ ReelGood API

ทำด้วย:

• ฟังก์ชั่น Netflify
• ReelGood API (เนื่องจาก Netlify API ไม่สามารถเข้าถึงได้)
• moustache.js แพ็คเกจ NPM

ข้อผิดพลาด

ขณะนี้แอปนี้ใช้งานไม่ได้ - ReelGood ย้ายไปใช้ V3 API บนไซต์ของพวกเขา และ V2 API ใช้งานไม่ได้อีกต่อไป หากคุณต้องการทราบว่าตำแหน่งข้อมูล API ใหม่สามารถนำมาใช้และสนับสนุน PR ได้อย่างไร โปรดดำเนินการ

ดูฉบับที่ #5

ข้อจำกัด

จนถึงขณะนี้ โปรเจ็กต์นี้แสดงผลลัพธ์ API เพียงหน้า เดียว ในรูปแบบข้อความและรูปภาพ โดยใช้เทมเพลต

ไม่มี การรายงานหรือการกรองที่หรูหรา

นอกจากนี้ฉันอาจสร้างสิ่งนี้ใหม่ใน Vue แทนที่จะเป็น Moustache

ดูตัวอย่าง

เว็บแอป

วัตถุประสงค์

ReelGood เป็นบริการที่ให้รายการทีวีและภาพยนตร์ผ่านบริการออนไลน์มากมาย รวมถึง Netflix

ReelGood มี GUI ที่ยอดเยี่ยมบนเว็บไซต์ซึ่งง่ายต่อการค้นหาและกรอง พวกเขายังใช้ API เป็นส่วนหนึ่งของสิ่งนี้ด้วย ฉันต้องการสร้างรายงานคำแนะนำการแสดงและรายการคำแนะนำของตัวเอง ดังนั้นฉันจึงดึงข้อมูลจาก API ด้วย JS ฝั่งไคลเอ็นต์และแสดงผลบนเว็บไซต์

การใช้งาน

ดูเว็บไซต์:

• netflix-assistant.netlify.app

หากคุณยังใหม่กับฟังก์ชัน Netlify / Lambda โปรดดูตำราอาหารของฉัน

ทดสอบตำแหน่งข้อมูล JSON API โดยตรง:

• การแสดงของ Netflix
  • สิ่งนี้ถูกสอบถามโดยส่วนหน้าของเว็บไซต์ ฟังก์ชันนี้จะดึงข้อมูลจาก ReelGood API แล้วส่งคืน การแคชได้รับการตั้งค่าเพื่อลดการใช้ทรัพยากร แบบสอบถามที่ทำเสร็จแล้วถูกจำกัดโดยสามารถขยายให้มีความยืดหยุ่นมากขึ้น เช่น การใช้พารามิเตอร์และการทำเพจภายใน
  • จุดสิ้นสุด: /.netlify/functions/shows
  • สคริปต์: ฟังก์ชั่น/shows.js

การติดตั้ง

โคลน

โคลน repo:

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

ไม่มีขั้นตอนการสร้างหรือติดตั้ง!

ดำเนินการต่อด้านล่าง

โครงสร้างพื้นฐาน

การใช้ Serverless กับคำขอ API

แอปนี้ไม่สามารถทำคำขอของเบราว์เซอร์ได้โดยตรง ReelGood API (ในเครื่องถือว่าใช้ได้ แต่บนไซต์ที่ปรับใช้ คุณได้รับข้อผิดพลาด) การเปลี่ยนแปลง API จึงมีข้อผิดพลาด CORS

ดังนั้นแอปนี้จึงได้รับการออกแบบใหม่เพื่อใช้ฟีเจอร์ ฟังก์ชัน ฟรีของ Netlify (สร้างบน AWS Lambda)

ฟังก์ชั่นถูกกำหนดโดยใช้สคริปต์ JS สั้น ๆ และโฮสต์บน Netlify เมื่อคำขอเสร็จสิ้นไปยังตำแหน่งข้อมูลของฟังก์ชันนี้ คำขอจะถูกดำเนินการไปยัง ReelGood API และผลลัพธ์จะถูกส่งกลับเป็นการตอบกลับ JSON ที่แคชไว้

วิธีนี้ง่ายกว่าการบอกว่าสร้าง Python หรือ Node API มาก เนื่องจากต้องใช้โค้ดมากขึ้นและไม่สามารถโฮสต์บน Netlify ได้

การใช้จุดสิ้นสุดของฟังก์ชันในเครื่อง

ข้อเสียคือฟังก์ชันนี้ใช้งานได้เฉพาะในระบบคลาวด์เท่านั้น ไม่ใช่บนเซิร์ฟเวอร์ภายในเครื่อง

มีวิธีแก้ไขดังนี้:

• ตั้งค่าเซิร์ฟเวอร์ Python/Node ในเครื่องและเข้าถึงได้บน localhost คุณสามารถตั้งค่าเซิร์ฟเวอร์โดยใช้สคริปต์สั้น ๆ ด้วยไลบรารี http และเพียงเพิ่มบรรทัดพิเศษเพื่อเรียกสคริปต์ JS บนจุดสิ้นสุดที่แน่นอน - ซึ่งหมายความว่าคุณต้องการเพียงเซิร์ฟเวอร์เดียวและหนึ่งพอร์ต
• ใช้ Netlify CLI (อาจเป็นเช่น netlify บน NPM)
• รับโค้ด HTML/JS เพื่อทำงานบน localhost แต่ยังคงอ้างอิงตำแหน่งข้อมูลฟังก์ชันของแอป Netlify โดยใช้ URL ที่กำหนดเอง

การใช้งาน

โปรดทราบว่าการใช้งานในท้องถิ่นนั้นมีจำกัด - ดูหัวข้อด้านบน

เซิร์ฟเวอร์

เริ่มเว็บเซิร์ฟเวอร์ในไดเร็กทอรีราก

ดูแนวทางในส่วนสำคัญนี้หรือใช้วิธีการด้านล่าง

• ใช้ส่วนขยาย Live Server ของ VS Code (พร้อมการโหลดซ้ำอัตโนมัติ)
• เริ่มเว็บเซิร์ฟเวอร์ 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

จากนั้นดูไฟล์ JSON ที่สร้างขึ้นในไดเรกทอรี out

ปรับใช้

การตั้งค่าระยะไกล

Repo นี้สามารถติดตั้งใช้งานบน Netlify ได้ฟรี - เป็นเว็บไซต์แบบคงที่พร้อมฟังก์ชัน Netlify สำหรับการเรียกแบ็กเอนด์แบบไร้เซิร์ฟเวอร์ไปยัง API ภายนอก

ต้องตั้งค่าส่วนหัว CORS สำหรับคำขอ API และไม่สามารถตั้งค่าบนเพจ Github ได้ นอกจากนี้ยังใช้ฟังก์ชันบน Netlify ซึ่ง 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 โปรเจ็กต์นี้ใช้ฟังก์ชันหรือที่เรียกว่า Lambda บน Netlify เพื่อขอข้อมูลบนฝั่งเซิร์ฟเวอร์ จากนั้นทำให้ข้อมูลพร้อมใช้งานบนโดเมนเดียวกันกับคำขอของเบราว์เซอร์

ดูฟังก์ชัน Netlify

ดูโพสต์บล็อกด้วย

การตั้งค่าในเครื่องอาจใช้ไลบรารี Netlify หรือเป็นทางเลือกแทนการใช้ URL ดั้งเดิม (ซึ่งไม่ได้ให้ข้อผิดพลาด CORS บน localhost โชคดีแม้ว่าจะทำบน Netlify ก็ตาม) โดยยึดตามการตั้งค่าสถานะเช่น ENV=dev หรือ local/remote

ใบอนุญาต

เผยแพร่ภายใต้ MIT โดย @MichaelCurrin