Vamos agora nos concentrar no desenvolvimento do aplicativo.

Definiremos apenas uma seção que incluirá um título, um formulário de pesquisa e um espaço vazio span elemento.

Nós vamos definir o input elemento conforme necessário e forçá-lo a esperar 24 caracteres para evitar solicitações AJAX desnecessárias. Em meus testes, percebi que o comprimento do ID de um canal do YouTube é 24, embora você possa atualizar o minlength e maxlength atribua valores se você notar algo diferente.

O span O elemento aparecerá com uma mensagem apropriada sob certas condições. Por exemplo, se procurarmos um ID de canal do YouTube que não existe ou se, por algum motivo, a resposta não for bem-sucedida (ou seja, 400 Bad Request, 404 Not Found, etc.).

Ao longo do caminho, veremos a marcação das informações do canal que serão geradas dinamicamente.

Aqui está a marcação inicial da página:

1

 class="top-banner"https://webdesign.tutsplus.com/>

2

   class="container"https://webdesign.tutsplus.com/>

3

     class="text"https://webdesign.tutsplus.com/>

4

      
Simple App With the YouTube API

5

       class="label"https://webdesign.tutsplus.com/>Use UC8lxnUR_CzruT2KA6cb7p0Q for testing which refers to the Envato Tuts+ channel ID

6

7

8

       type="search" minlength="24" maxlength="24" placeholder="Insert a valid YT channel ID" autofocus required>

9

       type="submit"https://webdesign.tutsplus.com/>SUBMIT

10

       class="msg"https://webdesign.tutsplus.com/>

11

12

13

Encontre um ID de canal do YouTube

Uma maneira rápida de encontrar o ID de um canal do YouTube é por meio do código-fonte da página. Primeiro, navegue até a página do canal desejado, depois visualize seu código-fonte e pesquise por https://www.youtube.com/channel/. O ID do canal virá depois deste URL base.

3. Defina os estilos principais

Como este é um tutorial extenso, por uma questão de simplicidade, pularemos os estilos iniciais e nos concentraremos apenas nos principais – você pode ver todos eles clicando no botão CSS guia da demonstração.

Estilos de formulário

Em telas médias e superiores (>700px), o layout deve ficar assim:

Em telas menores, os elementos do formulário serão divididos em duas linhas:

Aqui estão os estilos associados:

1

/*CUSTOM VARIABLES HERE*/

2

3

.top-banner form {

4

  position: relative;

5

  display: grid;

6

  grid-template-columns: 1fr auto;

7

  grid-gap: 15px;

8

  align-items: center;

9

  justify-content: center;

10

  max-width: 1000px;

11

}

12

13

.top-banner form input {

14

  font-size: clamp(24px, 2vw, 32px);

15

  height: 40px;

16

  padding-bottom: 10px;

17

  border-bottom: 1px solid currentColor;

18

}

19

20

.top-banner form input::placeholder {

21

  opacity: 1;

22

  color: var(--white);

23

}

24

25

.top-banner form button {

26

  font-weight: bold;

27

  padding: 15px 30px;

28

  border-radius: 5px;

29

  background: var(--red);

30

  transition: background 0.3s ease-in-out;

31

}

32

33

.top-banner form button:hover {

34

  background: var(--darkred);

35

}

36

37

.top-banner form .msg {

38

  position: absolute;

39

  top: 100%;

40

  left: 0;

41

}

42

43

@media (max-width: 700px) {

44

  .top-banner form {

45

    grid-template-columns: 1fr;

46

  }

47

48

  .top-banner form .msg {

49

    position: static;

50

  }

51

}

Estilos de canal

Assim que conseguirmos retornar do servidor as informações de um canal, elas aparecerão em um layout de cartão como este:

Os estilos não são nada muito complicados, por isso não entraremos em mais detalhes neste momento:

1

/*CUSTOM VARIABLES HERE*/

2

3

.card {

4

  padding: 4%;

5

  text-align: center;

6

  margin-top: 70px;

7

  color: var(--white);

8

  background: var(--total-black);

9

  border-radius: 7px;

10

  overflow: hidden;

11

}

12

13

.card .details img {

14

  border-radius: 50%;

15

}

16

17

.card .details .title {

18

  margin-top: 10px;

19

}

20

21

.card .details .description {

22

  max-width: 80%;

23

  margin: 30px auto 0;

24

}

25

26

.card .total-videos {

27

  position: relative;

28

  z-index: 1;

29

  margin-top: 30px;

30

}

31

32

.card .total-subscribers {

33

  position: relative;

34

  display: inline-grid;

35

  grid-template-columns: auto auto;

36

  grid-gap: 10px;

37

  align-items: center;

38

  font-weight: bold;

39

  margin-top: 60px;

40

  background: var(--red);

41

}

42

43

.card .total-subscribers dotlottie-player {

44

  position: absolute;

45

  top: 50%;

46

  left: 50%;

47

  transform: translate(-50%, -50%);

48

}

49

50

.card .total-subscribers .outer {

51

  padding: 10px;

52

}

53

54

.card .total-subscribers svg {

55

  fill: var(--red);

56

  background: var(--white);

57

  padding: 5px;

58

  box-sizing: content-box;

59

}

4. Adicione o JavaScript

Neste momento, estamos prontos para construir a funcionalidade principal do nosso aplicativo YouTube. Vamos fazê-lo!

No envio do formulário

Cada vez que um usuário envia o formulário pressionando o botão Digitar chave ou o Enviar botão, faremos duas coisas:

1. Interrompa o envio do formulário e evite recarregar a página.
2. Pegue o valor que está contido no campo de pesquisa.

Aqui está o código inicial:

1

const topBanner = document.querySelector("https://webdesign.tutsplus.com/.top-banner"https://webdesign.tutsplus.com/);

2

const form = topBanner.querySelector("https://webdesign.tutsplus.com/form"https://webdesign.tutsplus.com/);

3

const input = topBanner.querySelector("https://webdesign.tutsplus.com/input"https://webdesign.tutsplus.com/);

4

5

form.addEventListener("https://webdesign.tutsplus.com/submit"https://webdesign.tutsplus.com/, (e) => {

6

  e.preventDefault();

7

  const channelId = input.value;

8

});

Execute uma solicitação AJAX

Antes de passarmos pela solicitação AJAX, é importante ler a documentação e entender como estruturá-la. No nosso caso, queremos obter informações do canal, por isso vamos nos concentrar no ponto final do canal e passe os seguintes parâmetros:

1. O part parâmetro com valores o snippet e statistics nomes.
2. A chave da API. Novamente, você deve usar sua própria chave.
3. O ID do canal que estamos interessados ​​em obter informações. Em uma seção anterior, abordamos uma maneira de encontrar o ID de um canal existente.

Podemos até experimentar as solicitações HTTP por meio da ferramenta auxiliar que está disponível no lado direito do esta página.

Com tudo o que foi dito acima em mente, nosso URL de solicitação deve ser semelhante a este:

1

const BASE_URL ="https://webdesign.tutsplus.com/https://www.googleapis.com/youtube/v3/channels?part=statistics,snippet"https://webdesign.tutsplus.com/;

2

const API_KEY = "https://webdesign.tutsplus.com/AIzaSyAHupLf37J-vEziyQ-pItfoaLS5XUqdVq8"https://webdesign.tutsplus.com/;

3

const channelID = input.value;

4

5

const url = `${BASE_URL}&id=${channelId}&key=${API_KEY}`;

Usaremos o Buscar API para executar a solicitação AJAX — presumo que você esteja familiarizado com essa técnica. Há também uma série se você precisar de uma atualização. Conforme discutido anteriormente, adicionaremos tratamento de erros adequado para casos malsucedidos. Por exemplo, se procurarmos um canal inexistente ou se a solicitação de status não tiver sido bem-sucedida.

Então, nossa solicitação AJAX seria mais ou menos assim:

1

...

2

3

form.addEventListener("https://webdesign.tutsplus.com/submit"https://webdesign.tutsplus.com/, (e) => {

4

  ...

5

6

  fetchYTStatistics(channelId)

7

    .then((data) => {

8

      if (typeof data.items !== "https://webdesign.tutsplus.com/undefined"https://webdesign.tutsplus.com/) {

9

        createCard(data);

10

      } else {

11

        msg.textContent = "https://webdesign.tutsplus.com/Please search for a valid YT channel ID 😩"https://webdesign.tutsplus.com/;

12

      }

13

    })

14

    .catch((error) => {

15

      msg.textContent = error;

16

    });

17

});

18

19

async function fetchYTStatistics(channelId) {

20

  const url = `${BASE_URL}&id=${channelId}&key=${API_KEY}`;

21

  const response = await fetch(url);

22

23

  if (!response.ok) {

24

    return Promise.reject(

25

      `Something isn't working as expected. Error: ${response.status}`

26

    );

27

  }

28

  const data = await response.json();

29

  return data;

30

}

Aqui está um exemplo dos dados de resposta:

Construa o cartão

Com a solicitação AJAX implementada, cada vez que digitarmos um ID de canal no campo de pesquisa, a API retornará os dados do canal, se estiverem disponíveis. Em seguida, coletaremos apenas os dados necessários e os anexaremos à página como um componente do cartão.

Duas coisas a serem observadas aqui:

• A animação Lottie será reproduzida apenas se o número de inscritos no canal tiver pelo menos 1 milhão.
• Usaremos a API NumberFormat para formatar os números relacionados aos vídeos e inscritos do canal.
• Os links externos não funcionarão a menos que você visualize a demonstração do CodePen no modo de depuração.

Aqui está o código responsável por este trabalho:

1

function createCard(data) {

2

  const allData = data.items[0];

3

  const { customUrl, title, description, thumbnails } = allData.snippet;

4

  const { default: thumbnail } = thumbnails;

5

  const { videoCount, subscriberCount } = allData.statistics;

6

  const div = document.createElement("https://webdesign.tutsplus.com/div"https://webdesign.tutsplus.com/);

7

  div.classList.add("https://webdesign.tutsplus.com/card"https://webdesign.tutsplus.com/, "https://webdesign.tutsplus.com/container"https://webdesign.tutsplus.com/);

8

9

  const markup = `

10

11

      ${thumbnail.width}" height="https://webdesign.tutsplus.com/${thumbnail.height}" src="https://webdesign.tutsplus.com/${thumbnail.url}" alt="https://webdesign.tutsplus.com/${title}">

12

13

        ${customUrl}" target="_blank">${title}

14

15

      
${description}

16

17

18

      ${customUrl}/videos" target="_blank">Browse

19

      ${formatNumber(videoCount)} videos

20

21

22

      ${

23

        subscriberCount >= 1000000

24

          ? ``

25

          : ""

26

      }

27

28

        ${formatNumber(subscriberCount)}

29

        Subscribers

30

31

32

33

34

35

  `;

36

37

  div.innerHTML = markup;

38

  document.body.appendChild(div);

39

}

40

41

function formatNumber(number) {

42

  return new Intl.NumberFormat("https://webdesign.tutsplus.com/en"https://webdesign.tutsplus.com/, {

43

    notation: "https://webdesign.tutsplus.com/compact"

44

  }).format(number);

45

}

A marcação gerada conforme é renderizada no console do navegador:

Redefinir coisas

Por último, após a solicitação AJAX, faremos o seguinte:

• Remova o .card elemento da página.
• Limpe o conteúdo do .msg elemento.
• Limpe o valor do campo de pesquisa e dê foco a esse campo.

Aqui está o código relacionado:

1

...

2

3

if (document.querySelector("https://webdesign.tutsplus.com/.card"https://webdesign.tutsplus.com/)) {

4

  document.querySelector("https://webdesign.tutsplus.com/.card"https://webdesign.tutsplus.com/).remove();

5

}

6

msg.textContent = ""https://webdesign.tutsplus.com/;

7

form.reset();

8

input.focus();

Seu aplicativo do YouTube está pronto!

Pronto, pessoal! Esta realmente foi uma jornada bastante longa, então obrigado por acompanhar! Espero que você tenha gostado do resultado final e que tenha ajudado você a aprender algumas coisas novas.

Mais uma vez, não se esqueça de colocar sua própria chave para testes de aplicativos ao vivo!

Como lembrete, vamos dar uma olhada novamente no aplicativo:

Como sempre, muito obrigado pela leitura!

Próximos passos

Há tantas coisas que você pode fazer para estender a funcionalidade deste aplicativo do YouTube. Aqui estão alguns pensamentos:

• Crie outra seção para mostrar os vídeos mais recentes do canal.
• Em vez de mostrar apenas um canal de cada vez, modifique o código para mostrar informações de vários canais simultaneamente em formato de grade, como fizemos com o aplicativo de previsão do tempo.

Se houver mais alguma coisa que você queira ver como extensão de aplicativo, informe-nos em X ou nos comentários da demonstração!

Descubra mais tutoriais e recursos de JavaScript

Interessado em praticar JavaScript moderno por meio de projetos práticos e divertidos? Em caso afirmativo, confira estes tutoriais de JavaScript: