Како додати ИоуТубе листу за репродукцију у апликацију Нект.јс Реацт помоћу ИоуТубе АПИ-ја

ИоуТубе даје креаторима садржаја мноштво алата како би додали свој рад свима да би их видели. Али ти алати помажу вам само у управљању искуством на ИоуТубе-у.

Како можемо да користимо ИоуТубе АПИ за доношење видео садржаја на сопствену веб страницу?

  • ИоуТубе има АПИ?
  • Шта ћемо градити?
  • Корак 0: Први кораци са Нект.јс
  • Корак 1: Стварање Гоогле Девелопер пројекта
  • Корак 2: Захтевање ставки плејлисте са ИоуТубе АПИ-ја
  • Корак 3: Приказивање видео снимака са ИоуТубе плејлисте на страници

ИоуТубе има АПИ?

Аха! ИоуТубе, заједно са многим другим Гоогле услугама, има АПИ који можемо користити за искоришћавање свог садржаја на начине изван ИоуТубе-а. А АПИ је прилично опсежан.

Помоћу ИоуТубе-овог АПИ-ја можете да радите ствари попут управљања видео снимцима, приступа аналитици и репродукције. Али користићемо га за преузимање видео снимака са плејлисте да бисмо их могли додати на страницу.

Шта ћемо градити?

Саставићемо апликацију Нект.јс која користи ИоуТубе АПИ за преузимање видео снимака са плејлисте.

Узећемо те видео записе и приказаћемо њихове сличице на страници која води до видео записа.

Корак 0: Први кораци са Нект.јс

Да бисмо завртили апликацију, користићемо Нект.јс. Користећи предиво или нпм, лако можемо створити нову апликацију која ће нам омогућити да заронимо право у код.

Дакле, да бисте започели, дођите до места на којем желите да направите свој пројекат и покрените:

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

Та скрипта ће вас питати за назив пројекта. Користићу „ми-иоутубе-плаилист“ и инсталираће све зависности потребне за почетак.

Затим дођите до тог директоријума и покрените yarn devда бисте покренули развојни сервер и спремни смо за полазак.

Пратите заједно са урезивањем!

Корак 1: Стварање Гоогле Девелопер пројекта

Да бисмо користили АПИ, требат ће нам нови пројекат на Гоогле Девелопер конзоли који ће нам омогућити да генеришемо АПИ кључ за употребу услуге.

Прво идите на: //цонсоле.девелоперс.гоогле.цом/.

Када стигнемо и пријавимо се са Гоогле налогом, желећемо да направимо нови пројекат.

У овом тренутку можете свом пројекту дати име како желите. Идем са „Моја ИоуТубе плејлиста“. Затим кликните на Цреате.

Гоогле вас подразумевано неће убацити у нови пројекат. Покреће се посао за креирање тог пројекта, али када се заврши, можете отворити сигурносну копију бирача пројеката и одабрати свој нови пројекат.

Даље, желимо да креирамо АПИ кључ. Дођите до Цредентиалс, кликните Цреате Цредентиалс, а затим изаберите АПИ кључ.

Ово ће створити нови АПИ кључ који ћете желети да копирате и сачувате за касније.

Напомена: Овај АПИ кључ треба чувати у тајности. Ако ово изложите или додате негде доступно јавности, попут ГитХуб-а, други то могу злоупотребити и оставити вам рачун да платите.

На крају, морамо да додамо ИоуТубе АПИ као услугу. Дођите до Библиотеке на бочној траци, потражите „ИоуТубе“, а затим изаберите ИоуТубе Дата АПИ в3 .

Коначно, након што се страница учита, кликните на Енабле (Омогући) која ће вас одвести на нову страницу контролне табле и бићете спремни.

Корак 2: Захтевање ставки плејлисте са ИоуТубе АПИ-ја

Да бисмо затражили наше податке, користићемо функцију гетСерверСидеПропс.

Прво отворите 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 } } } 

Ево шта радимо:

  • Стварамо нову константу која чува нашу АПИ тачку
  • Стварамо и извозимо нову getServerSideProps  функцију
  • Унутар те функције дохваћамо своју крајњу тачку
  • Затим то трансформишемо у ЈСОН
  • На крају, податке враћамо као реквизите у наш објекат

Сада, ако деструктурирамо dataпроп са Homeи из конзоле одјавимо те податке попут следећег:

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

Сада можемо видети да имамо грешку:

Не користимо наш АПИ кључ, па хајде да га користимо.

Направите нову датотеку у корену назива пројекта .env.localи додајте следећи садржај:

YOUTUBE_API_KEY="[API Key]" 

Обавезно замените [API Key]својим АПИ кључем из 1. корака.

У овом тренутку ћете желети да поново покренете сервер како би Нект.јс могао да види нову променљиву.

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