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 do artigo eu disponibilizei o link do projeto no GitHub.

YouTube Data API v3

O primeiro passo é obter a chave da api. Acessando este link você encontra os procedimentos necessários para conseguir as credenciais de autorização.

De forma resumida, você precisa seguir os passos abaixo:

1. Ir até a Google Developers Console
2. Selecionar um projeto
3. Na barra lateral à esquerda, selecione APIs e autorização
4. Na lista de APIs, certifique-se de que 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 o código acima.

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

$ ng g service youtube

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { map } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class YoutubeService {

  apiKey : string = 'YOUR-APIKEY-YOUTUBE';

  constructor(public http: HttpClient) { }

    getVideosForChanel(channel, maxResults): Observable<Object> {
    let url = 'https://www.googleapis.com/youtube/v3/search?key=' + this.apiKey + '&channelId=' + channel + '&order=date&part=snippet &type=video,id&maxResults=' + maxResults
    return this.http.get(url)
      .pipe(map((res) => {
        return res;
      }))
  }
}

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() e passamos dois argumentos. O primeiro é o ID do canal e 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 (neste 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 início da função incluímos um time out de três 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=%7B%7Bvideo.id.videoId}}”.

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

O resultado final: