O YouTube tem uma API?
Sim! YouTube, juntamente com muitos outros serviços do Google, tem uma API que podemos usar para aproveitar nosso conteúdo de maneiras fora do YouTube. E a API é bastante extensa.
Com a API do YouTube, você pode gerenciar seus vídeos, acessar análises e gerenciar a reprodução. Mas vamos usá-lo para capturar vídeos de uma lista de reprodução, para que possamos adicioná-los a uma página.
O que vamos construir?
Nós vamos montar um Next.js aplicativo que usa a API do YouTube Para buscar vídeos de uma lista de reprodução.
Iremos assistir a esses vídeos e exibir as miniaturas em uma página vinculada ao vídeo.
Etapa 0: Introdução ao Next.js
Para ativar um aplicativo, usaremos o Next.js. Usando yarn ou npm, podemos criar facilmente um novo aplicativo que nos permitirá mergulhar direto no código.
Portanto, para começar, navegue até o local em que deseja criar seu projeto e execute:
yarn create next-app
# or
npx create-next-app
Esse script solicitará um nome de projeto. Vou usar “my-youtube-playlist” e instalará todas as dependências necessárias para começar.
Em seguida, navegue até esse diretório e execute yarn dev para iniciar seu servidor de desenvolvimento e estamos prontos para começar.
Etapa 1: criando um projeto do desenvolvedor do Google
Para usar a API, precisaremos de um novo projeto no console do desenvolvedor do Google que permita gerar uma chave de API para usar o serviço.
Primeiro, vá para: https://console.developers.google.com/.
Uma vez lá e logado com sua conta do Google, queremos criar um novo projeto.
Nesse ponto, você pode nomear seu projeto como desejar. Vou com “Minha lista de reprodução do YouTube”. Então clique em Create.
Por padrão, o Google não o leva ao novo projeto. Ele inicia um trabalho para criar esse projeto, mas, uma vez concluído, você pode abrir novamente o seletor de projetos e selecionar seu novo projeto.
Em seguida, queremos criar uma chave de API. Navegue para Credenciais, clique em Criar credenciais e selecione a chave da API.
Isso criará uma nova chave de API que você deseja copiar e salvar para mais tarde.
Nota: Essa chave de API deve ser mantida em segredo. Se você expô-lo ou adicioná-lo em algum lugar disponível ao público como o GitHub, outras pessoas podem abusar e deixar uma conta para pagar.
Por fim, precisamos adicionar a API do YouTube como um serviço. Navegar para Biblioteca na barra lateral, pesquise “YouTube” e selecione API de dados do YouTube v3.
Finalmente, após o carregamento dessa página, clique em Ativar, que o levará a uma nova página do painel e você estará pronto para começar.
Etapa 2: solicitando itens da lista de reprodução da API do YouTube
Para solicitar nossos dados, vamos usar o getServerSideProps função.
Primeiro, abra o pages/index.js e adicione o seguinte acima do Home componente.
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
}
}
}
Aqui está o que estamos fazendo:
- Estamos criando uma nova constante que armazena nosso terminal de API
- Estamos criando e exportando um novo
getServerSidePropsfunção - Dentro dessa função, buscamos nosso endpoint
- Em seguida, transformamos isso em JSON
- Finalmente, retornamos os dados como adereços em nosso objeto
Agora, se desestruturarmos o data suporte de Home e o console efetue logout desses dados da seguinte maneira:
export default function Home({ data }) {
console.log('data', data);
Agora podemos ver que recebemos um erro:
Não estamos usando nossa chave de API, então vamos usar isso.
Crie um novo arquivo na raiz do projeto chamado .env.local e adicione o seguinte conteúdo:
YOUTUBE_API_KEY="[API Key]"
Certifique-se de substituir [API Key] com sua chave de API da Etapa 1.
Neste ponto, você desejará reiniciar o servidor para que o Next.js possa ver a nova variável.
Agora, atualize o getServerSideProps para adicionar sua chave à solicitação da API:
export async function getServerSideProps() {
const res = await fetch(`${YOUTUBE_PLAYLIST_ITEMS_API}?key=${process.env.YOUTUBE_API_KEY}`)
E se recarregarmos a página, novamente, obteremos um erro:
Agora, não temos o ID da lista de reprodução e os filtros que queremos capturar nossos dados.
Usando os parâmetros do API de itens da lista de reprodução, vamos atualizar nosso terminal da API novamente:
const res = await fetch(`${YOUTUBE_PLAYLIST_ITEMS_API}?part=snippet&maxResults=50&playlistId=[Playlist ID]&key=${process.env.YOUTUBE_API_KEY}`)
Aqui, estamos adicionando:
part=snippet: isso indica à API que queremos o snippetmaxResults=50: define o número máximo de itens da lista de reprodução retornados para 50playlistId=[Playlist ID]: isso adiciona o parâmetro para configurar o ID da lista de reprodução. Aqui, você deve atualizar esse valor para o ID da lista de reprodução de sua escolha.
Nota: você pode encontrar o ID da lista de reprodução no URL da lista de reprodução que deseja usar.
E, finalmente, quando recarregamos a página, temos nossos dados:
Etapa 3: mostrando vídeos da lista de reprodução do YouTube na página
Agora que temos nossos dados, queremos exibi-los.
Para usar o que já temos do Next.js, podemos transformar a grade existente em uma grade de miniaturas do YouTube.
Vamos substituir todo <div> com o className do styles.grid para:
<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="" />
</p>
<h3>{ title }</h3>
</a>
</li>
)
})}
</ul>
Aqui está o que estamos fazendo:
- Estamos mudando o
<div>para um<ul>então é mais semântico - Criamos um mapa através dos itens da nossa playlist para criar novos itens dinamicamente
- Estamos destruindo nossos dados, capturando o ID, o título, a miniatura e o ID do vídeo
- Usando o ID, adicionamos uma chave ao nosso
<li> - Também movemos o
classNamedostyles.cardde<a>ao<li> - Para o nosso link, usamos o ID do vídeo do YouTube para criar o URL do vídeo
- Adicionamos nossa imagem em miniatura
- Nós usamos nosso
titlepara o<h3>
E se recarregarmos a página, podemos ver que nossos vídeos estão lá, mas os estilos estão um pouco fora.
Para corrigir isso, podemos começar adicionando os seguintes estilos ao .grid dentro do Home.module.css Arquivo:
list-style: none;
padding: 0;
margin-left: 0;
Também podemos mudar
align-items: center;
para
align-items: flex-start;
o que ajudará a corrigir o alinhamento dos nossos vídeos.
Mas perceberemos que ainda não temos duas colunas como o layout Next.js original.
Sob nossa .grid classe que acabamos de atualizar, adicione o seguinte:
.grid img {
max-width: 100%;
}
Isso garante que todas as nossas imagens não excedam o contêiner. Isso evitará o estouro e permitirá que nossas imagens se estabeleçam em duas colunas.
E isso nos dá os nossos vídeos da lista de reprodução.
O que mais podemos fazer?
Incorpore um player e mostre esse vídeo ao clicar
O YouTube também fornece controles para o seu próprio player. Portanto, usando JavaScript, podemos tirar proveito e quando alguém clica em uma das miniaturas de nossos vídeos, podemos mostrar um player incorporado e reproduzir esse vídeo.
Referência da API do player do YouTube para incorporações de iframe
Obter dados de análise
Enquanto o YouTube fornece algumas análises em seu painel, talvez você queira algo mais avançado.
Você pode usar as APIs de análise e relatórios para obter mais informações sobre seu canal e vídeos.
APIs de relatórios e análises do YouTube