كيفية دمج قائمة تشغيل يوتيوب في تطبيق Next.js React باستخدام واجهة برمجة تطبيقات YouTube

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

هل يوتيوب يمتلك واجهة برمجة تطبيقات (API)؟

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

ماذا سنبني في هذا الدليل؟

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

الخطوة 0: البدء مع Next.js

لإنشاء تطبيقنا، سنستخدم إطار عمل Next.js، الذي يشتهر بمرونته وقدرته على بناء تطبيقات React قوية. باستخدام yarn أو npm، يمكننا بسهولة إعداد مشروع جديد والبدء في كتابة الكود مباشرةً. للبدء، انتقل إلى المجلد الذي ترغب في إنشاء مشروعك فيه، ثم قم بتشغيل أحد الأوامر التالية في سطر الأوامر:

yarn create next-app
# أو
npx create-next-app

سيطلب منك هذا السكريبت إدخال اسم المشروع. يمكنك تسميته بما يناسبك، على سبيل المثال "my-youtube-playlist"، وسيقوم السكريبت بعد ذلك بتثبيت جميع التبعيات اللازمة لبدء العمل.

بعد اكتمال التثبيت، انتقل إلى دليل المشروع الذي تم إنشاؤه حديثًا وقم بتشغيل الأمر yarn dev لبدء خادم التطوير الخاص بك. الآن، أصبحنا جاهزين للانطلاق!

يمكنك متابعة التغييرات عبر سجل الالتزامات (commit history) للمشروع.

الخطوة 1: إنشاء مشروع في Google Developer Console

لاستخدام واجهة برمجة تطبيقات يوتيوب، نحتاج إلى إنشاء مشروع جديد في وحدة تحكم مطوري جوجل (Google Developer Console). هذا المشروع سيمكننا من إنشاء مفتاح API ضروري للوصول إلى الخدمة. أولاً، توجه إلى الرابط التالي: https://console.developers.google.com/.

إنشاء مشروع جديد

بعد تسجيل الدخول بحسابك على جوجل، ستحتاج إلى إنشاء مشروع جديد. انقر على زر “إنشاء مشروع” (Create Project).

يمكنك تسمية مشروعك بأي اسم تفضله. على سبيل المثال، سنستخدم اسم "My YouTube Playlist". ثم انقر على زر “إنشاء” (Create). بشكل افتراضي، لن ينقلك جوجل مباشرة إلى المشروع الجديد. سيبدأ عملية إنشاء المشروع في الخلفية، وبمجرد الانتهاء، يمكنك فتح محدد المشروع (project selector) واختيار مشروعك الجديد.

إنشاء مفتاح API

بعد تحديد المشروع، سنحتاج إلى إنشاء مفتاح API. انتقل إلى قسم “بيانات الاعتماد” (Credentials) في الشريط الجانبي، ثم انقر على “إنشاء بيانات اعتماد” (Create Credentials)، واختر “مفتاح API” (API key).

سيؤدي هذا إلى إنشاء مفتاح API جديد. قم بنسخه وحفظه في مكان آمن لاستخدامه لاحقًا.

ملاحظة هامة: يجب الحفاظ على سرية مفتاح API هذا. إذا قمت بكشفه أو إضافته إلى مكان عام مثل GitHub، فقد يستغله الآخرون بشكل مسيء، مما قد يكلفك فواتير غير متوقعة.

تفعيل YouTube Data API v3

أخيرًا، نحتاج إلى تفعيل خدمة واجهة برمجة تطبيقات يوتيوب. انتقل إلى “المكتبة” (Library) في الشريط الجانبي، ابحث عن “YouTube“، ثم اختر “YouTube Data API v3“.

بعد تحميل الصفحة، انقر على زر “تفعيل” (Enable). سيتم نقلك إلى لوحة تحكم جديدة، وستكون الخدمة جاهزة للاستخدام.

الخطوة 2: طلب عناصر قائمة التشغيل من YouTube API

لجلب البيانات الخاصة بنا، سنستخدم الدالة getServerSideProps في Next.js، والتي تتيح لنا جلب البيانات على جانب الخادم (server-side) قبل عرض الصفحة. افتح الملف pages/index.js وأضف الكود التالي أعلى مكون Home:

const YOUTUBE_PLAYLIST_ITEMS_API = 'https://www.googleapis.com/youtube/v3/playlistItems';

export async function getServerSideProps() {
  const res = await fetch(`${YOUTUBE_PLAYLIST_ITEMS_API}`);
  const data = await res.json();

  return {
    props: {
      data,
    },
  };
}

شرح الكود الأولي

ما قمنا به هنا هو كالتالي:

• أنشأنا ثابتًا جديدًا (constant) لتخزين نقطة نهاية (API endpoint) واجهة برمجة التطبيقات.
• أنشأنا وصدرنا دالة getServerSideProps جديدة.
• داخل هذه الدالة، قمنا بجلب البيانات من نقطة النهاية.
• ثم حولنا الاستجابة إلى تنسيق JSON.
• أخيرًا، أعدنا البيانات كـ props (خصائص) داخل كائن.

الآن، إذا قمنا بتفكيك خاصية data من مكون Home وعرضنا هذه البيانات في وحدة التحكم (console) كالتالي:

export default function Home({ data }) {
  console.log('data', data);
  // ...
}

سنلاحظ ظهور خطأ يشير إلى الحاجة لمفتاح API:

هذا يحدث لأننا لم نستخدم مفتاح API الخاص بنا بعد. دعنا نصلح ذلك.

إضافة مفتاح API إلى المتغيرات البيئية

قم بإنشاء ملف جديد في جذر المشروع باسم .env.local وأضف المحتوى التالي:

YOUTUBE_API_KEY="[API Key]"

تأكد من استبدال [API Key] بمفتاح API الذي حصلت عليه في الخطوة 1. في هذه المرحلة، ستحتاج إلى إعادة تشغيل خادم التطوير الخاص بك (restart your server) حتى يتمكن Next.js من التعرف على المتغير الجديد.

الآن، قم بتحديث دالة getServerSideProps لإضافة مفتاحك إلى طلب API:

export async function getServerSideProps() {
  const res = await fetch(`${YOUTUBE_PLAYLIST_ITEMS_API}?key=${process.env.YOUTUBE_API_KEY}`);
  const data = await res.json();

  return {
    props: {
      data,
    },
  };
}

وإذا قمنا بإعادة تحميل الصفحة مرة أخرى، فسنحصل على خطأ آخر:

هذا الخطأ يشير إلى أننا نفتقد معرف قائمة التشغيل (playlist ID) والفلاتر (filters) التي نريد استخدامها لجلب البيانات. بالاستعانة بالمعلمات المتاحة في واجهة برمجة تطبيقات عناصر قائمة التشغيل، دعنا نحدث نقطة نهاية API مرة أخرى:

export async function getServerSideProps() {
  const res = await fetch(`${YOUTUBE_PLAYLIST_ITEMS_API}?part=snippet&maxResults=50&playlistId=[Playlist ID]&key=${process.env.YOUTUBE_API_KEY}`);
  const data = await res.json();

  return {
    props: {
      data,
    },
  };
}

شرح المعلمات المضافة

هنا، قمنا بإضافة المعلمات التالية:

• part=snippet: تخبر هذه المعلمة واجهة برمجة التطبيقات بأننا نريد الحصول على جزء “القصاصة” (snippet) من البيانات، والذي يحتوي على المعلومات الأساسية مثل العنوان والصور المصغرة.
• maxResults=50: تحدد هذه المعلمة الحد الأقصى لعدد عناصر قائمة التشغيل التي سيتم إرجاعها إلى 50.
• playlistId=[Playlist ID]: تضيف هذه المعلمة معرف قائمة التشغيل. يجب عليك تحديث هذه القيمة بمعرف قائمة التشغيل التي تختارها.

ملاحظة: يمكنك العثور على معرف قائمة التشغيل في عنوان URL الخاص بقائمة التشغيل التي ترغب في استخدامها على يوتيوب.

أخيرًا، عند إعادة تحميل الصفحة، سنرى بياناتنا بنجاح!

يمكنك متابعة التغييرات عبر سجل الالتزامات (commit history) للمشروع.

الخطوة 3: عرض مقاطع فيديو قائمة تشغيل يوتيوب على الصفحة

بعد أن أصبح لدينا البيانات، حان الوقت لعرضها على صفحتنا. للاستفادة من المكونات الافتراضية التي يوفرها Next.js، يمكننا تحويل الشبكة (grid) الموجودة إلى شبكة من الصور المصغرة لمقاطع فيديو يوتيوب. استبدل عنصر <div> بالكامل الذي يحمل الخاصية className بقيمة styles.grid بالكود التالي:

<ul className={styles.grid}>
  {data.items.map(({ id, snippet = {} }) => {
    const { title, thumbnails = {}, resourceId = {} } = snippet;
    const { medium } = thumbnails;
    return (
      <li key={id} className={styles.card}>
        <a href={`https://www.youtube.com/watch?v=${resourceId.videoId}`}>
          <p>
            <img width={medium.width} height={medium.height} src={medium.url} alt={title} />
          </p>
          <h3>{title}</h3>
        </a>
      </li>
    );
  })}
</ul>

شرح التعديلات على الكود

في هذا التعديل، قمنا بالآتي:

• غيرنا العنصر <div> إلى <ul> ليكون أكثر دلالية (semantic).
• استخدمنا دالة map للتكرار على عناصر قائمة التشغيل (data.items) وإنشاء عناصر جديدة ديناميكيًا لكل فيديو.
• قمنا بتفكيك البيانات (destructuring) للحصول على id، title، thumbnail، ومعرف الفيديو (video ID).
• استخدمنا id كخاصية key لعنصر <li>، وهو أمر ضروري في React لتحسين الأداء.
• نقلنا الخاصية className بقيمة styles.card من العنصر <a> إلى العنصر <li>.
• لإنشاء الرابط، استخدمنا معرف الفيديو الخاص بيوتيوب (resourceId.videoId) لتشكيل عنوان URL للفيديو.
• أضفنا صورة مصغرة (thumbnail image) للفيديو.
• استخدمنا عنوان الفيديو (title) كنص داخل وسم <h3>.

إذا قمنا بإعادة تحميل الصفحة الآن، سنرى مقاطع الفيديو معروضة، لكن التنسيقات قد تكون غير مضبوطة تمامًا.

تحسين التنسيقات (CSS)

لإصلاح التنسيقات، يمكننا البدء بإضافة الأنماط التالية إلى الفئة .grid داخل ملف Home.module.css:

.grid {
  list-style: none;
  padding: 0;
  margin-left: 0;
}

يمكننا أيضًا تغيير قيمة الخاصية align-items من center إلى flex-start في نفس الفئة .grid، مما سيساعد في ضبط محاذاة مقاطع الفيديو.

.grid {
  /* ... */
  align-items: flex-start;
}

لكننا سنلاحظ أننا ما زلنا لا نملك عمودين كما في التخطيط الأصلي لـ Next.js.

لحل مشكلة الأعمدة، أضف الكود التالي أسفل فئة .grid التي قمنا بتحديثها للتو:

.grid img {
  max-width: 100%;
}

هذا يضمن أن جميع صورنا لا تتجاوز عرض الحاوية الخاصة بها، مما يمنع تجاوز المحتوى (overflow) ويسمح لصورنا بالاستقرار في عمودين بشكل صحيح.

وبهذا نكون قد عرضنا مقاطع فيديو قائمة التشغيل الخاصة بنا بنجاح. يمكنك متابعة التغييرات عبر سجل الالتزامات (commit history) للمشروع.

ماذا يمكننا أن نفعل أيضًا؟

لقد قمنا بدمج قائمة تشغيل يوتيوب بنجاح، لكن إمكانيات YouTube API لا تتوقف عند هذا الحد. إليك بعض الأفكار الإضافية لتطوير تطبيقك:

تضمين مشغل فيديو وعرضه عند النقر

يوفر يوتيوب أيضًا أدوات تحكم لمشغل الفيديو الخاص به. باستخدام بعض أكواد JavaScript، يمكنك الاستفادة من هذه الإمكانية بحيث عند النقر على إحدى الصور المصغرة للفيديو في تطبيقك، يتم عرض مشغل فيديو مدمج (embedded player) وتشغيل الفيديو مباشرة. هذا يوفر تجربة مشاهدة متكاملة داخل موقعك.

• مرجع YouTube Player API لتضمين iframe

الحصول على بيانات التحليلات

بينما يوفر يوتيوب بعض التحليلات الأساسية في لوحة التحكم الخاصة به، قد تحتاج إلى بيانات أكثر تفصيلاً أو تخصيصًا. يمكنك استخدام واجهات برمجة تطبيقات التحليلات والتقارير (Analytics and Reporting APIs) للحصول على رؤى أعمق حول قناتك ومقاطع الفيديو الخاصة بك، مما يساعدك في فهم جمهورك وتحسين استراتيجية المحتوى.

• واجهات برمجة تطبيقات YouTube Analytics and Reporting APIs

الخلاصة التقنية

في هذا الدليل الشامل، استكشفنا كيفية دمج قوائم تشغيل يوتيوب بسلاسة في تطبيقات Next.js React باستخدام واجهة برمجة تطبيقات يوتيوب (YouTube Data API v3). لقد مررنا بالخطوات الأساسية بدءًا من إعداد مشروع Next.js، ومرورًا بإنشاء مشروع في Google Developer Console والحصول على مفتاح API، وصولاً إلى جلب البيانات وعرضها بشكل فعال على الصفحة. أظهرنا كيف يمكن لـ getServerSideProps في Next.js أن تلعب دورًا حيويًا في جلب البيانات على جانب الخادم، وكيف يمكن لبعض التعديلات البسيطة في CSS أن تحول عرض البيانات الخام إلى واجهة مستخدم جذابة ومتجاوبة. هذه العملية لا تزيد من قيمة موقعك فحسب، بل تمنحك أيضًا تحكمًا كاملاً في كيفية تقديم محتوى الفيديو الخاص بك، مما يعزز تجربة المستخدم ويفتح الباب أمام تخصيصات متقدمة مثل تضمين المشغلات والحصول على تحليلات دقيقة.