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

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

كيف يمكننا استخدام YouTube API لجلب محتوى الفيديو الخاص بنا إلى موقعنا على الويب؟

  • يوتيوب لديه API؟
  • ماذا سنبني؟
  • الخطوة 0: الشروع في استخدام Next.js
  • الخطوة 1: إنشاء مشروع Google Developer
  • الخطوة 2: طلب عناصر قائمة التشغيل من YouTube API
  • الخطوة 3: عرض مقاطع فيديو قائمة تشغيل YouTube على الصفحة

يوتيوب لديه API؟

نعم! لدى YouTube ، إلى جانب الكثير من خدمات Google الأخرى ، واجهة برمجة تطبيقات يمكننا استخدامها للاستفادة من المحتوى الخاص بنا بطرق خارج YouTube. وواجهة برمجة التطبيقات (API) واسعة جدًا.

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

ماذا سنبني؟

سنقوم بتجميع تطبيق Next.js الذي يستخدم YouTube API لجلب مقاطع الفيديو من قائمة التشغيل.

سنأخذ مقاطع الفيديو هذه وسنعرض صورًا مصغرة لها على صفحة مرتبطة بالفيديو.

الخطوة 0: الشروع في استخدام Next.js

لتدوير أحد التطبيقات ، سنستخدم Next.js. باستخدام yarn أو npm ، يمكننا بسهولة إنشاء تطبيق جديد يتيح لنا الغوص في الكود.

لذا ، للبدء ، انتقل إلى المكان الذي تريد إنشاء مشروعك فيه وتشغيله:

yarn create next-app # or npx create-next-app 

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

ثم انتقل إلى هذا الدليل وقم بتشغيله yarn devلبدء خادم التطوير الخاص بك ونحن على استعداد للذهاب.

اتبع جنبا إلى جنب مع الالتزام!

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

لاستخدام واجهة برمجة التطبيقات ، سنحتاج إلى مشروع جديد في وحدة تحكم مطوري Google والذي سيتيح لنا إنشاء مفتاح API لاستخدام الخدمة.

أولاً ، توجه إلى: //console.developers.google.com/.

بمجرد الوصول إلى هناك وتسجيل الدخول باستخدام حساب Google الخاص بك ، سنرغب في إنشاء مشروع جديد.

في هذه المرحلة ، يمكنك تسمية مشروعك بأي شيء تريده. أنا ذاهب مع "My YouTube Playlist". ثم انقر فوق إنشاء.

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

بعد ذلك ، نريد إنشاء مفتاح API. انتقل إلى بيانات الاعتماد ، وانقر فوق إنشاء بيانات الاعتماد ، ثم حدد مفتاح API.

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

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

أخيرًا ، نحتاج إلى إضافة YouTube API كخدمة. انتقل إلى المكتبة في الشريط الجانبي ، وابحث عن "YouTube" ، ثم حدد YouTube Data API v3 .

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

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

لطلب بياناتنا ، سنستخدم وظيفة getServerSideProps.

أولاً ، افتح pages/index.jsالملف وأضف ما يلي فوق Homeالمكون.

const YOUTUBE_PLAYLIST_ITEMS_API = '//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 } } } 

هذا ما نفعله:

  • نقوم بإنشاء ثابت جديد يخزن نقطة نهاية API الخاصة بنا
  • نحن نقوم بإنشاء وتصدير getServerSideProps  وظيفة جديدة
  • داخل هذه الدالة ، نحضر نقطة النهاية
  • ثم نحول ذلك إلى JSON
  • أخيرًا ، نعيد البيانات كدعامات في كائننا

الآن ، إذا قمنا بإتلاف dataالخاصية من Homeوتسجيل خروج هذه البيانات مثل ما يلي:

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

يمكننا الآن أن نرى أننا حصلنا على خطأ:

نحن لا نستخدم مفتاح API الخاص بنا ، لذلك دعونا نستخدم ذلك.

أنشئ ملفًا جديدًا في جذر المشروع المسمى .env.localوأضف المحتوى التالي:

YOUTUBE_API_KEY="[API Key]" 

تأكد من استبدال [API Key]مفتاح API الخاص بك من الخطوة 1.

في هذه المرحلة ، ستحتاج إلى إعادة تشغيل الخادم الخاص بك حتى يتمكن Next.js من رؤية المتغير الجديد.

Now, update the getServerSideProps function to add your key to the API request:

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

And if we reload the page, again, we get an error:

Now, we’re missing the playlist ID and the filters we want to grab our data.

Using the parameters from the playlist items API, let’s update our API endpoint again:

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

Here, we’re adding:

  • part=snippet: this tells the API we want the snippet
  • maxResults=50: this sets the maximum number of playlist items that get returned to 50
  • playlistId=[Playlist ID]: this adds the parameter to configure the playlist ID. Here, you should update that value to the playlist ID of your choice.

Note: you can find the playlist ID in the URL of the playlist you want to use.

And finally, when we reload the page, we have our data:

Follow along with the commit!

Step 3: Showing YouTube playlist videos on the page

Now that we have our data, we want to display it.

To make use of what we already have from Next.js, we can transform the existing grid into a grid of YouTube thumbnails.

Let’s replace the entire with the className of styles.grid to:


    
    {data.items.map(({ id, snippet = {} }) => { const { title, thumbnails = {}, resourceId = {} } = snippet; const { medium } = thumbnails; return (
  • { title }

  • ) })}

Here’s what we’re doing:

  • We’re changing the to a
      so it’s more semantic
    • We create a map through the items of our playlist to dynamically create new items
    • We’re destructuring our data grabbing the id, title, thumbnail, and video ID
    • Using the ID, we add a key to our
    • We also move the className of styles.card  from the to the
    • For our link, we use the YouTube video ID to create the video URL
    • We add our thumbnail image
    • We use our title for the

    And if we reload the page, we can see that our videos are there, but the styles are a bit off.

    To fix this, we can start by adding the following styles to .grid inside of the Home.module.css file:

    list-style: none; padding: 0; margin-left: 0; 

    We can also change

    align-items: center; 

    to

    align-items: flex-start; 

    which will help fix the alignment of our videos.

    But we’ll notice we still don’t have two columns like the original Next.js layout.

    Under our .grid class that we just updated, add the following:

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

    This makes sure all of our images don’t exceed the container. This will prevent the overflow and will let our images settle in to two columns.

    And that gives us our playlist videos.

    Follow along with the commit!

    What else can we do?

    Embed a player and show that video on click

    YouTube also gives controls for their own player. So using some JavaScript, we can take advantage and when someone clicks one of our video thumbnails, we can show an embedded player and play that video.

    YouTube Player API Reference for iframe Embeds

    Get analytics data

    While YouTube provides some analytics in its dashboard, maybe you want something more advanced.

    You can use the Analytics and Reporting APIs to get more insight into your channel and videos.

    YouTube Analytics and Reporting APIs

    Follow me for more Javascript, UX, and other interesting things!

    • ? Follow Me On Twitter
    • ?️ Subscribe To My Youtube
    • ✉️ Sign Up For My Newsletter