Integrando YouTube com Angular 7

Que tal apresentar vídeos de um canal do Youtube em sua aplicação Angular? Neste artigo eu mostro como é fácil a integração em projetos angular (versão 7).

No final da publicação, link do projeto no GiHub ;)

YouTube Data API v3

O primeiro passo é obter a chave da api. Acessando o site https://developers.google.com/youtube/v3/getting-started você encontra os procedimentos necessários para conseguir as credenciais de autorização.

De forma resumida, você precisa:

1. Vá até Google Developers Console.
2. Selecione um projeto.
3. Na barra lateral à esquerda, selecione APIs e autorização. Na lista de APIs, certifique-se o estado é ON para a YouTube Data API v3.

Após a criação do projeto o passo seguinte é registrar o módulo HttpClientModule no módulo principal (app.module.ts)

import { HttpClientModule } from '@angular/common/http';

E declarar no imports:

imports: [
BrowserModule,
AppRoutingModule,
HttpClientModule,
NgxSpinnerModule

Vou utilizar a biblioteca NGX-Spinner para exibir um spinner ao carregar os vídeos. Sua utilização é simples:

Instale a biblioteca com:

$ npm install ngx-spinner --save

E declare o módulo no imports, conforme código acima.

Agora, podemos criar um serviço para realizar chamadas a API do Youtube. No terminal informe:

$ ng g service youtube

Criamos uma variável apiKey que guarda o valor da API obtida no primeiro passo.

Logo em seguida, injetamos no construtor a classe HttpClient. Ela fornece métodos para executar solicitações HTTP.

Vamos implementar um método que retorne uma lista de vídeos. Nomeamos como getVideosForChanel(). Passamos dois argumentos, o primeiro é o ID do canal. Já o segundo, limita a quantidade de vídeos.

Concatenamos essas informações na url da API, passando ainda outros parâmetros como a ordem (‘&order=date), part=snippet que contém outras propriedades que identificam o título, a descrição, entre outros, e o tipo de recurso (type=video).

let url = ‘https://www.googleapis.com/youtube/v3/search?key=' + this.apiKey + ‘&channelId=’ + channel + ‘&order=date&part=snippet &type=video,id&maxResults=’ + maxResults

Na classe do componente (app.component.ts), declaramos um array para o resultado dos vídeos:

export class AppComponent {
videos: any[];

No método construtor, injetamos o serviço criado para requisição dos vídeos (YoutubeService) e uma classe para exibir um spinner (NgxSpinnerService)

constructor(private spinner: NgxSpinnerService, private youTubeService: YoutubeService) { }

Em seguida, no método ngOnInit(), invocamos o método passando o ID do Canal, nesse exemplo o canal é do meu filho :), e um número máximo de resultados .getVideosForChanel(‘UC_LtA_EtCr7Jp5ofOsYt18g’, 15).

ngOnInit() {
this.spinner.show()
this.videos = [];
this.youTubeService
.getVideosForChanel('UC_LtA_EtCr7Jp5ofOsYt18g', 15)
.pipe(takeUntil(this.unsubscribe$))
.subscribe(lista => {
for (let element of lista["items"]) {
this.videos.push(element)
}
});
}

No resultado,.subscribe(lista => { , recuperarmos a propriedade items e adicionamos cada objeto no array criado.

No ínício da função, incluímos um time out de 3 segundos para encerrar o spinner em:

setTimeout(()=>
{
this.spinner.hide()
},3000)

Vamos finalizar, codificando o template do componente. No seguinte trecho:

<div *ngFor="let video of videos" class="col-xl-3 col-md-6 mb-4">
<div class="card border-0 shadow vh-50">
<a href="https://www.youtube.com/watch?v={{video.id.videoId}}" target="_blank">
<img [src]="video.snippet.thumbnails.medium.url" class="card-img-top" alt="..."></a>
<div class="card-body text-center">
<h5 class="card-title mb-0">
<a href="https://www.youtube.com/watch?v={{video.id.videoId}}">{{video.snippet.title}}
</a></h5>
<div class="card-text text-black-50">{{video.snippet.description.slice(0, 100)}}</div>
<p class="card-text">{{video.snippet.description}}</p>
</div>
</div>
</div>

Fazemos um loop no array usando a diretiva *ngFor. Definimos um link para exibir o vídeo através do videoID em href=”https://www.youtube.com/watch?v={{video.id.videoId}}".

Você pode exibir outras informações do vídeo, consultando a propriedade snippet.

O resultado final:

Bem tranquilo!!!

Se você leu até aqui, muito obrigado. Qualquer dúvida, deixe nos comentários.

Projeto no Github

kheronn/ng-youtube