netflix assistant

مساعد نيتفليكس؟

ابحث عن العروض والأفلام وقم بتصفيتها على Netflix باستخدام ReelGood API

مصنوع من:

• وظائف نتفليفاي
• ReelGood API (نظرًا لعدم إمكانية الوصول إلى Netlify API)
• حزمة mustache.js NPM

خطأ

هذا التطبيق معطل حاليًا - تم ترحيل ReelGood لاستخدام V3 API على موقعهم ولم تعد V2 API تعمل. إذا كنت تريد معرفة كيفية استخدام نقاط نهاية واجهة برمجة التطبيقات الجديدة والمساهمة في العلاقات العامة، فيرجى القيام بذلك.

راجع العدد رقم 5.

القيود

حتى الآن، يمثل هذا المشروع صفحة واحدة فقط من نتائج واجهة برمجة التطبيقات (API) كنص وصور، باستخدام القوالب.

ليس هناك تقارير أو تصفية خيالية.

كما يمكنني أيضًا إعادة بناء هذا في Vue بدلاً من Moustache.

معاينة

تطبيق الويب

غاية

ReelGood هي خدمة توفر قائمة بالبرامج التلفزيونية والأفلام عبر العديد من الخدمات عبر الإنترنت، بما في ذلك Netflix.

يمتلك ReelGood واجهة مستخدم رسومية رائعة على موقعه على الويب والتي يسهل التنقل فيها للبحث والتصفية. يستخدمون أيضًا واجهة برمجة التطبيقات (API) كجزء من هذا. كنت أرغب في إنشاء تقارير دليل العرض وقائمة التوصيات الخاصة بي، لذلك أقوم بسحب البيانات من واجهة برمجة التطبيقات الخاصة بهم باستخدام JS من جانب العميل وعرضها على موقع ويب.

الاستخدام

عرض الموقع:

• netflix-assistant.netlify.app

إذا كنت جديدًا في استخدام وظائف Netlify / Lambda، فراجع كتاب الطبخ الخاص بي.

اختبر نقطة نهاية JSON API مباشرة:

• عروض نيتفليكس
  • يتم الاستعلام عن هذا من خلال الواجهة الأمامية للموقع. تقوم هذه الوظيفة بجلب البيانات من ReelGood API وإرجاعها. تم إعداد التخزين المؤقت لتقليل استخدام الموارد. الاستعلام الذي تم إجراؤه محدود ويمكن توسيعه ليكون أكثر مرونة مثل أخذ المعلمات وإجراء الترحيل داخليًا.
  • نقطة النهاية: /.netlify/functions/shows
  • البرنامج النصي: وظائف/shows.js

تثبيت

استنساخ

استنساخ الريبو:

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

لا توجد خطوات البناء أو التثبيت!

تابع أدناه.

بنية تحتية

استخدام Serverless لطلبات API

لا يمكن لهذا التطبيق تنفيذ طلبات المتصفح مباشرة ReelGood API (هذا أمر مقبول محليًا ولكن تحصل على خطأ على الموقع المنشور). تغيير API DSO هناك أخطاء CORS.

لذلك تمت إعادة تصميم هذا التطبيق لاستخدام ميزة الوظائف المجانية الخاصة بـ Netlify (المبنية على AWS Lambda).

يتم تعريف الوظيفة باستخدام برنامج نصي JS قصير ويتم استضافتها على Netlify. عند تقديم طلب إلى نقطة نهاية هذه الوظيفة، يتم تقديم طلب إلى ReelGood API ويتم إرجاع النتيجة كاستجابة JSON مخبأة.

هذا أبسط بكثير من قول إنشاء Python أو Node API، حيث يحتاج ذلك إلى الكثير من التعليمات البرمجية ولا يمكن استضافته على Netlify.

استخدام نقطة نهاية الوظيفة محليًا

الجانب السلبي هو أن الوظيفة تعمل فقط في السحابة وليس على خادم محلي.

هناك بعض الطرق للتغلب على هذا:

• قم بإعداد خادم Python/Node محليًا والوصول إليه على المضيف المحلي. يمكنك إعداد خادم باستخدام برنامج نصي قصير مع مكتبة http وربما إضافة سطر إضافي لاستدعاء البرنامج النصي JS على نقطة نهاية معينة - وهذا يعني أنك تحتاج فقط إلى خادم واحد ومنفذ واحد.
• استخدم Netlify CLI (ربما شيء مثل netlify على NPM).
• احصل على كود HTML/JS لتشغيله على المضيف المحلي، ولكن مع ذلك قم بالإشارة إلى نقطة النهاية الوظيفية لتطبيق 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

نشر

الإعداد عن بعد

يمكن نشر هذا الريبو على Netlify مجانًا - كموقع ويب ثابت بالإضافة إلى وظائف Netlify للمكالمات الخلفية بدون خادم إلى واجهة برمجة التطبيقات الخارجية.

يجب تعيين رأس CORS لطلبات API ولا يمكن تعيين ذلك على صفحات Github. يستخدم هذا أيضًا الوظيفة الموجودة على Netlify، والتي لا تدعمها صفحات GitHub.

مصدر البيانات

يوجد على موقع 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 على المضيف المحلي لحسن الحظ على الرغم من أنه يفعل ذلك على Netlify) استنادًا إلى علامة مثل ENV=dev أو local/remote.

رخصة

تم إصداره تحت معهد ماساتشوستس للتكنولوجيا بواسطة @MichaelCurrin.