التشغيل السريع لـ 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: إعداد العيّنة وتشغيلها

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

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

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

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

   

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 للقناة "my channel".

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

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

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

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

      

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.

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

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

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

• مستندات المساعدة في Google Developers Console
• مستندات حول مكتبة برامج Google APIs لـ JavaScript
• مستندات مرجعية حول YouTube Data API