التشغيل السريع لـ JavaScript

يوضّح دليل البدء السريع هذا كيفية إعداد صفحة بسيطة تُرسِل طلبات إلى YouTube Data API. ويوضّح دليل البدء السريع هذا كيفية إرسال طلبَين إلى واجهة برمجة التطبيقات:

  1. ستستخدم مفتاح واجهة برمجة التطبيقات الذي يحدّد تطبيقك لاسترداد معلومات عن قناة GoogleDevelopers على YouTube.
  2. ستستخدم معرّف عميل OAuth 2.0 لإرسال طلب مفوّض يسترد معلومات عن قناتك على YouTube.

المتطلبات الأساسية

لتشغيل دليل البدء السريع هذا، ستحتاج إلى ما يلي:

  • ‫Node.js وnpm (لتشغيل خادم ويب محلي)
  • الوصول إلى الإنترنت ومتصفّح ويب
  • حساب Google

الخطوة 1: إعداد مشروعك وبيانات الاعتماد

أنشِئ مشروعًا في Cloud Console أو اختَر مشروعًا حاليًا. أكمِل المهام التالية في Cloud Console لمشروعك:

  1. في لوحة المكتبة، ابحث عن YouTube Data API v3. انقر على بطاقة واجهة برمجة التطبيقات هذه وتأكَّد من تفعيلها لمشروعك.

  2. في لوحة بيانات الاعتماد، أنشِئ بيانات اعتمادَين:

    1. إنشاء مفتاح واجهة برمجة التطبيقات ستستخدم مفتاح واجهة برمجة التطبيقات لإرسال طلبات بيانات من واجهة برمجة التطبيقات لا تتطلّب تفويض المستخدم. على سبيل المثال، لا تحتاج إلى تفويض المستخدم لاسترداد معلومات عن قناة عامة على YouTube.

    2. إنشاء معرّف عميل OAuth 2.0 اضبط نوع التطبيق على تطبيق ويب. عليك استخدام بيانات اعتماد OAuth 2.0 للطلبات التي تتطلّب تفويض المستخدم. على سبيل المثال، تحتاج إلى تفويض المستخدم لاسترداد معلومات عن قناة المستخدم الذي تمّت المصادقة عليه حاليًا على YouTube.

      في حقل مصادر JavaScript المسموح بها ، أدخِل عنوان URL http://localhost:8000. يمكنك ترك حقل عناوين URI المسموح بها لإعادة التوجيه فارغًا.

الخطوة 2: إعداد النموذج وتشغيله

استخدِم أداة مستكشف واجهات برمجة التطبيقات في اللوحة الجانبية للحصول على نموذج رمز برمجية لاسترداد معلومات عن قناة GoogleDevelopers على YouTube. يستخدم هذا الطلب مفتاح واجهة برمجة التطبيقات لتحديد تطبيقك، ولا يتطلّب تفويض المستخدم أو أي أذونات خاصة من المستخدم الذي يشغّل النموذج.

  1. افتح مستندات طريقة channels.list في واجهة برمجة التطبيقات.

  2. في تلك الصفحة، يحتوي قسم "حالات الاستخدام الشائعة" على جدول يوضّح عدة طرق شائعة لاستخدام الطريقة. يخصّ الإدراج الأول في الجدول عرض النتائج حسب معرّف القناة.

    انقر على رمز الرمز البرمجي للإدراج الأول لفتح مستكشف واجهات برمجة التطبيقات بملء الشاشة وتعبئته.

    صورة تحدّد مكان رابط رمز الرمز البرمجي في الجدول الذي يعرض حالات استخدام مستندات channels.list يحدد النص البديل لتلك الصورة الصورة كرمز كود ويحدد حالة الاستخدام المرتبطة بهذا الرابط.

  3. يعرض الجانب الأيسر من مستكشف واجهات برمجة التطبيقات بملء الشاشة ما يلي:

    1. أسفل العنوان معلّمات الطلب ، تظهر قائمة بالمعلّمات التي تتوافق مع الطريقة. يجب ضبط قيمتَي المعلّمتَين part وid. قيمة المعلّمة id هي UC_x5XG1OV2P6uZZ5FSM9Ttw، وهي معرّف قناة GoogleDevelopers على YouTube.

    2. أسفل المعلّمات، يظهر قسم باسم بيانات الاعتماد. يجب أن تعرض القائمة المنسدلة في هذا القسم القيمة مفتاح واجهة برمجة التطبيقات. يستخدم مستكشف واجهات برمجة التطبيقات بيانات اعتماد تجريبية تلقائيًا لتسهيل البدء. ولكنك ستستخدم مفتاح واجهة برمجة التطبيقات الخاص بك لتشغيل النموذج محليًا.

      صورة تعرض "بيانات الاعتماد" في "مستكشف واجهات برمجة التطبيقات" بملء الشاشة والقائمة المنسدلة مع تحديد خيار "مفتاح واجهة برمجة التطبيقات".

  4. يعرض الجانب الأيمن من مستكشف واجهات برمجة التطبيقات بملء الشاشة علامات تبويب تحتوي على عينات تعليمات برمجية بلغات مختلفة. انقر على علامة التبويب JavaScript.

  5. انسخ نموذج الرمز البرمجية واحفظه في ملف باسم example.html.

  6. في النموذج الذي نزّلته، ابحث عن السلسلة YOUR_API_KEY واستبدِلها بمفتاح واجهة برمجة التطبيقات الذي أنشأته في الخطوة 1 من دليل البدء السريع هذا.

  7. ابدأ خادم الويب باستخدام الأمر التالي من دليل العمل:

    npx http-server -p 8000

  8. افتح ملف example.html في متصفّحك. افتح أيضًا أدوات المطوّرين في المتصفّح، مثل "أدوات المطوّرين" في متصفّح Chrome.

    1. انقر على الزر تحميل في الصفحة لتحميل مكتبة Google APIs Client Library for JavaScript. بعد النقر على الزر، يجب أن تعرض وحدة تحكّم المطوّرين ملاحظة تشير إلى تحميل عميل GAPI.

    2. انقر على الزر تنفيذ لإرسال طلب بيانات من واجهة برمجة التطبيقات. بعد ذلك، يجب أن تعرض وحدة تحكّم المطوّرين ردًّا من واجهة برمجة التطبيقات.

الخطوة 3: تشغيل طلب مفوّض

في هذه الخطوة، ستعدِّل نموذج الرمز البرمجية بحيث يسترد معلومات عن قناتك على YouTube بدلاً من استرداد معلومات عن قناة GoogleDevelopers على YouTube. يتطلّب هذا الطلب تفويض المستخدم.

  1. ارجِع إلى مستندات طريقة channels.list في واجهة برمجة التطبيقات.

  2. في قسم "حالات الاستخدام الشائعة"، انقر على رمز الرمز البرمجية للإدراج الثالث في الجدول. تتمثّل حالة الاستخدام هذه في استدعاء طريقة list لقناتي.

  3. مرة أخرى، في الجانب الأيسر من مستكشف واجهات برمجة التطبيقات بملء الشاشة، ستظهر لك قائمة بالمعلّمات متبوعة بقسم بيانات الاعتماد. ومع ذلك، هناك تغييران عن المثال الذي استرددت فيه معلومات عن قناة GoogleDevelopers:

    1. في قسم المعلّمات، بدلاً من ضبط قيمة المعلّمة id، يجب ضبط قيمة المعلّمة mine على true. يطلب ذلك من خادم واجهة برمجة التطبيقات استرداد معلومات عن قناة المستخدم الذي تمّت المصادقة عليه حاليًا.

    2. في قسم بيانات الاعتماد ، يجب أن تختار القائمة المنسدلة خيار Google OAuth 2.0.

      بالإضافة إلى ذلك، إذا نقرت على الرابط عرض النطاقات ، يجب أن يكون النطاق https://www.googleapis.com/auth/youtube.readonly محدّدًا.

      صورة تعرض النطاقات في "مستكشف واجهات برمجة التطبيقات" بملء الشاشة وخيار استخدام بيانات اعتماد "Google OAuth 2.0" المحدّد

  4. كما هو الحال مع المثال السابق، انقر على علامة التبويب JavaScript ، وانسخ عينة تعليمات برمجية، واحفظه في example.html.

    في الرمز البرمجية، ابحث عن السلسلة YOUR_CLIENT_ID واستبدِلها بمعرّف العميل الذي أنشأته في الخطوة 1 من دليل البدء السريع هذا.

  5. ابدأ خادم الويب باستخدام الأمر التالي من دليل العمل:

    npx http-server -p 8000

  6. انتقِل إلى ملف http://localhost:8000/example.html في متصفّحك. افتح أدوات المطوّرين في المتصفّح، مثل "أدوات المطوّرين" في متصفّح Chrome.

  7. انقر على الزر تفويض وتحميل في الصفحة لتحميل مكتبة Google APIs Client Library for JavaScript وبدء عملية التفويض. يجب أن يُطلب منك منح التطبيق إذن قراءة البيانات من حسابك على YouTube.

    إذا منحت الإذن، يجب أن تعرض وحدة تحكّم المطوّرين رسائل تشير إلى نجاح عملية تسجيل الدخول وتحميل عميل واجهة برمجة التطبيقات.

  8. انقر على الزر تنفيذ لإرسال طلب بيانات من واجهة برمجة التطبيقات. بعد ذلك، يجب أن تعرض وحدة تحكّم المطوّرين ردًّا من واجهة برمجة التطبيقات.

محتوى إضافي للقراءة