A um tempo atrás (31 de dezembro de 2023 para ser exato kkk) , eu estava mexendo no google app script e criei uma API simples para fazer a listagem de dados de canais no Youtube. O meu objetivo era carregar dados sobre um dado canal do Youtube como sua URL de acesso, thumbnais, playlists, logo, descrição, palavras chave e etc. Além disso, esta mesma API deveria ser capaz de receber o código de uma playlist de um canal. E através deste código ser capaz de listar todos vídeos pertencentes a esta playlits, assim como dados informativos dessa playlist como título, descrição, thumbnais, total de visualizações e etc. E por fim me trazer dados de um vídeo onde eu só informava o ID do vídeo e ele me retornava dados como título, descrição, URL, views, quantidade de comentários e etc.

O propósito desta API era para construir uma plataforma de vídeos focada em cursos gratuitos de programação. Sabemos que no Youtube existem canais que oferecem cursos que são muito melhores do que qualquer curso pago por aí. Então, desta forma, se eu conseguisse reunir a playlist dos melhores canais do Youtube numa única plataforma, eu teria em mãos uma ferramenta de estudo muito útil para quem deseja aprender programação.

Porém muito tempo se passou e somente a estrutura desta API ficou pronta, eu nunca cheguei a projetar o frontend conectado com esta API. Mas numa conversa recente com um amigo meu (esta conversa foi hoje kkk) eu acabei me animando com esta API e vou disponibiliza-la no github com uma simples documentação para quem desejar criar algo em cima dela.

O código fonte vai ficar disponível junto a algumas instruções básicas sobre a sua intalação.

A documentação

O projeto se basei num resultado final super simples que são apenas três endpoints que devem ser acessados por uma requisição GET.

Cada um destes endpoints oferecem dados baseado num recurso que são:

1. chanelId: Um ID válido de um canal do Youtube
2. playlistId: Um ID válido de uma playlist de um canal do Youtube
3. videoId: Um ID válido de um vídeo do Youtube

{
  "title": "Dev Aprender | Jhonatan de Souza",
  "url": "https://www.youtube.com/channel/UCm63tB8wsKOVvxoU4iMpS2A",
  "description": "Aqui você irá aprender:\n✔️Segredos para se tornar um PROFISSIONAL bem remunerado trabalhando com programação Python\n✔️ Freelancing, Dicas de Carreira, trabalho remoto, como ganhar mais como programador\n✔️ Javascript, SQL, Python, Automação, Aplicações do zero!\n\nRedes Sociais\n▶Instagram: https://www.instagram.com/devaprender/  \n",
  "thumbnails": {
    "high": {
      "height": 800,
      "width": 800,
      "url": "https://yt3.ggpht.com/VKuVrrgTqg39qayXEgez_e4YSj15EzKI5gKQkghem7EOMGgcNtjp47CL9HMMEYESvS7qtfnyBhM=s800-c-k-c0x00ffffff-no-rj"
    },
    "default": {
      "url": "https://yt3.ggpht.com/VKuVrrgTqg39qayXEgez_e4YSj15EzKI5gKQkghem7EOMGgcNtjp47CL9HMMEYESvS7qtfnyBhM=s88-c-k-c0x00ffffff-no-rj",
      "width": 88,
      "height": 88
    },
    "medium": {
      "height": 240,
      "width": 240,
      "url": "https://yt3.ggpht.com/VKuVrrgTqg39qayXEgez_e4YSj15EzKI5gKQkghem7EOMGgcNtjp47CL9HMMEYESvS7qtfnyBhM=s240-c-k-c0x00ffffff-no-rj"
    }
  },
  "logo": "https://yt3.ggpht.com/VKuVrrgTqg39qayXEgez_e4YSj15EzKI5gKQkghem7EOMGgcNtjp47CL9HMMEYESvS7qtfnyBhM=s88-c-k-c0x00ffffff-no-rj",
  "banner": "https://yt3.googleusercontent.com/We_8hE9MjUhL8m0fGK0xkuW0V3ZYKyiiZ18lwPK_CugTbK_xAO1sVEJPQCQXSDU_7tQ9WGBRRA",
  "country": "BR",
  "keywords": "\"dev aprender\" \"deve aprender\" javascript sql c# html css programação algorítimos \"banco de dados\" python bot robô",
  "playlistsSize": 8,
  "playlists": [
    "PLnNURxKyyLIJ5ftIIYFLNNLyCmBx5uXYM",
    "PLnNURxKyyLIKvXocwRwLCQqPU0mcTSLxJ",
    "PLnNURxKyyLIKX73U7hISjIY7T5KiNNLu_",
    "PLnNURxKyyLIIBGBjTU8MQ2JodP7KxBxji",
    "PLnNURxKyyLIKcJfUMhXzrz98Z7eO1-gg-",
    "PLnNURxKyyLIL9yBZjOU6PFf8NgxdM2iK2",
    "PLnNURxKyyLIInBfeGiJ8L314AD015mHkv",
    "PLnNURxKyyLIIyJ_XKZHzU8SQyGu7yuqhn"
  ],
  "publishedAt": "2018-10-07T21:24:04Z"
}

playlistId

Se eu pegar a primeira playlist da requisição acima, eu posso usa-la como parâmetro da próxima requisição que é baseada na playlisId.

{
  "playlistDetails": {
    "playlistId": "PLnNURxKyyLIKvXocwRwLCQqPU0mcTSLxJ",
    "playlistTitle": "CRIANDO UM APP DO ZERO - Dev VLOG",
    "playlistDescription": "Veja como estou criando um aplicativo de conversão de cripto moedas com Flutter e Python do zero!",
    "playlistThumbnail": {
      "maxres": {
        "url": "https://i.ytimg.com/vi/IftUFXo2e-k/maxresdefault.jpg",
        "height": 720,
        "width": 1280
      },
      "standard": {
        "height": 480,
        "url": "https://i.ytimg.com/vi/IftUFXo2e-k/sddefault.jpg",
        "width": 640
      },
      "default": {
        "height": 90,
        "width": 120,
        "url": "https://i.ytimg.com/vi/IftUFXo2e-k/default.jpg"
      },
      "high": {
        "height": 360,
        "width": 480,
        "url": "https://i.ytimg.com/vi/IftUFXo2e-k/hqdefault.jpg"
      },
      "medium": {
        "width": 320,
        "height": 180,
        "url": "https://i.ytimg.com/vi/IftUFXo2e-k/mqdefault.jpg"
      }
    },
    "channelTitle": "Dev Aprender | Jhonatan de Souza",
    "channelDescription": "Aqui você irá aprender:\n✔️Segredos para se tornar um PROFISSIONAL bem remunerado trabalhando com programação Python\n✔️ Freelancing, Dicas de Carreira, trabalho remoto, como ganhar mais como programador\n✔️ Javascript, SQL, Python, Automação, Aplicações do zero!\n\nRedes Sociais\n▶Instagram: https://www.instagram.com/devaprender/  \n",
    "channelThumbnail": "https://yt3.ggpht.com/VKuVrrgTqg39qayXEgez_e4YSj15EzKI5gKQkghem7EOMGgcNtjp47CL9HMMEYESvS7qtfnyBhM=s88-c-k-c0x00ffffff-no-rj",
    "totalViews": "19330643",
    "privacyStatus": "public",
    "playlistSize": 4
  },
  "playlistVideos": [
    "IftUFXo2e-k",
    "ctgSnU_laSI",
    "23MV2a3BYS0",
    "hCrQcg6sj4Q"
  ]
}

videoId

{
  "title": "APP Conversor de CRIPTO MOEDAS c/ Python e Flutter [JOGOS NFT]",
  "url": "https://www.youtube.com/watch?v=IftUFXo2e-k",
  "description": "🔥Quer se TORNAR um PROGRAMADOR Python e aprender DIRETAMENTE comigo? Então clique aqui: https://link.devaprender.com/mp\nVou criar um app conversor de cripto moedas do ZERO com python e flutter! Você terá a chance de acompanhar todo o processo de criação de um app que usa usa python, dart e flutter, além de acompanhar como eu farei todo esse processo tendo 0 conhecimento do flutte e dart. Descubra como irei fazer a conversão de moedas de jogos nft como bomb crypto crypto motorcycle fish crypto hpx crypto e jogos nft de formal geral\n\n𝗠𝗲𝘂 𝗰𝗮𝗻𝗮𝗹 𝗱𝗼 𝗧𝗲𝗹𝗲𝗴𝗿𝗮𝗺 - [𝗰𝗼𝗺 𝗴𝘂𝗶𝗮 𝗴𝗿𝗮𝘁𝘂𝗶𝘁𝗼 𝗽𝗮𝗿𝗮 𝗶𝗻𝗶𝗰𝗶𝗮𝗻𝘁𝗲𝘀] : t.me/devaprender\r\n𝗜𝗻𝘀𝘁𝗮𝗴𝗿𝗮𝗺: https://www.instagram.com/devaprender\npróximo episódio: https://youtu.be/ctgSnU_laSI\n\n\n✅𝗚𝗥𝗨𝗣𝗢 𝗧𝗘𝗟𝗘𝗚𝗥𝗔𝗠 𝗢𝗙𝗜𝗖𝗜𝗔𝗟 𝗗𝗢 𝗖𝗔𝗡𝗔𝗟: \n▸ Entre aqui ➜ https://bit.ly/TelegramDevAprender\n\nCONTATO COMERCIAL(não respondo dúvidas de videos)\n------------------------\njhonatan@devaprender.com\n\ncanal do kalle hallden que me inspirou a criar essa ideia https://youtube.com/c/KalleHallden",
  "thumbnails": {
    "standard": {
      "url": "https://i.ytimg.com/vi/IftUFXo2e-k/sddefault.jpg",
      "width": 640,
      "height": 480
    },
    "maxres": {
      "width": 1280,
      "height": 720,
      "url": "https://i.ytimg.com/vi/IftUFXo2e-k/maxresdefault.jpg"
    },
    "high": {
      "height": 360,
      "url": "https://i.ytimg.com/vi/IftUFXo2e-k/hqdefault.jpg",
      "width": 480
    },
    "default": {
      "width": 120,
      "height": 90,
      "url": "https://i.ytimg.com/vi/IftUFXo2e-k/default.jpg"
    },
    "medium": {
      "height": 180,
      "width": 320,
      "url": "https://i.ytimg.com/vi/IftUFXo2e-k/mqdefault.jpg"
    }
  },
  "viewCount": "9658",
  "commentCount": "145"
}

Finalizando

Com esta ferramenta em mãos nós podemos construir uma aplicação bem interessante baseada em vídeos do Youtube. Temos algumas opções de montarmos a nossa base de dados. Eu vou listar duas formas de fazer isso.

Listando playlist por canais

Neste formato, primeiro deveríamos construir uma lista de canais válidos para entrarem em nossa plataforma. Com a listagem em mãos, devemos fazer uma iteração nesta lista de canais para capturar os dados de cada canal. Para cada canal nós vamos acessar a sua playlist e iterar sobre ela. Para cada playlist nós vamos ter uma listagem de vídeos. Devemos iterar esta listagem de vídeos e capturar os seus dados.

Estas informações devem ficar salva dentro de nossa própria plataforma. Pois ela será a nossa base de dados. Em requisições futuras, você não vai mais precisar consultar a API diretamente. Se o canal pesquisado existir dentro de sua base de dados, tudo que precisa fazer é iterar por esta base de dados e exibir suas informações no frontend da aplicação.

Resumindo… os dados JSON mostrados acima, devem estar salvos dentro de uma pasta no seu projeto. Por exemplo, uma pasta chamada “Dev Aprender | Jhonatan de Souza” deveria estar dentro do seu projeto. E dentro desta pasta deveria estar salvo os três arquivos JSON que foram retornados pela requisição feita na API.

Então teríamos:

/Dev Aprender | Jhonatan de Souza
    channel.json
    playlist.json
    LwTbvEIOsKI.json
    UtkPIpov6h8.json
    3-yCdGUpXBM.json
    gv9dRvkn0rI.json
    ....

Onde chanel.json é apenas o arquivo JSON de resposta da primeira chamada a API. Em playlist.json haveria apenas os dados JSON da segunda chamada a API. E em cada um dos demais arquivos com um nome estranho (que é o ID de cada video) estaria o arquivo JSON correspondente a resposta da requisição feita a um único vídeo.

A importância destes dados estarem salvos dentro da aplicação é que não vamos precisar mais ficar consultando a API diretamente.

E quando fossemos listar os canais em nossa aplicação no frontend, apenas precisaríamos ler esta pasta e abrir os dados do canal para exibir na tela o seu nome, imagem e etc. Se o usuário clicar no canal, poderia abrir a página do canal listando logo abaixo a sua playlist. E para cada playlist, quando for clicada, o sistema vai acessar o arquivo playlist.json e abrir uma nova página com a listagem de todos os vídeos daquela playlist. E quando um destes vídeos for clicado ele vai abrir o arquivo JSON que contém o seu ID para capturar os dados daquele vídeo e exibir na tela.

O fluxo seria mais ou manos por  aí…

Listando as playlist diretamente

Se você quiser construir uma plataforma mais focada nos cursos ao invés de mostrar os canais por trás dos cursos explicitamente, você pode apenas montar a sua base de dados com os arquivos JSON de playlist. Neste modelo, a sua plataforma vai listar apenas as playlist do canal para o usuário acessar.

Usando a biblioteca do Youtube Iframe Player

Para que a plataforma fique com uma melhor usabilidade, podemos usar a API que manipula o player de vídeo do youtube. Com esta API somos capazes de capturar os dados de acesso a cada vídeo assistido e com isso podemos salvar o estado de onde o usuário parou quando estava assistindo um vídeo.

Isso é importante para que o usuário não fique perdido durante a sua trajetória de estudos. Se ele parou no vídeo 10 de um certo curso, a nossa aplicação poderá ser capaz de capturar o momento do tempo em que aquele usuário parou de assistir e assim iniciar o vídeo de onde ele parou quando ele voltar a assisitr mais tarde.

Abaixo segue um exemplo básico de manipulação do Youtube Iframe Player

<!DOCTYPE html>
<html>
  <body>
    <!-- Div que conterá o player do YouTube -->
    <div id="player"></div>

    <script>
      // 1. Carrega a API do IFrame Player de forma assíncrona.
      var tag = document.createElement('script');
      tag.src = "https://www.youtube.com/iframe_api";
      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

      // 2. Cria um objeto de player depois que a API for baixada.
      var player;
      function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
          height: '390',
          width: '640',
          videoId: 'M7lc1UVf-VE',  // ID do vídeo que deseja carregar
          events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          }
        });
      }

      // 3. Executa o vídeo quando o player estiver pronto.
      function onPlayerReady(event) {
        event.target.playVideo();
      }

      // 4. Pausa o vídeo quando o estado mudar.
      var done = false;
      function onPlayerStateChange(event) {
        if (event.data == YT.PlayerState.PLAYING && !done) {
          setTimeout(stopVideo, 6000);
          done = true;
        }
      }

      function stopVideo() {
        player.stopVideo();
      }

      // Exemplo de uso de alguns métodos da API:
      function pauseVideo() {
        player.pauseVideo();
      }

      function getCurrentTime() {
        alert("Tempo atual do vídeo: " + player.getCurrentTime());
      }

      function seekToTime(seconds) {
        player.seekTo(seconds, true);
      }
    </script>
  </body>
</html>

Este exemplo foi retirado da página oficial desta API e você pode conferir aqui:

https://developers.google.com/youtube/iframe_api_reference?hl=pt-br

O código fonte do projeto no google app scripts vai ficar disponível neste link:

Link aqui

Bem pessoal, é isso!