JavaScript: consumindo e tratando dados de uma API
Apresentação e layout do projeto - Apresentação
Você possui interesse em aprender como consumir uma API com JavaScript? Eu sou Rafa Silvério e estarei ao seu lado nesta jornada de aprendizado.
Audiodescrição: Rafaela Silvério se identifica como uma pessoa de pele clara, cabelos cacheados na altura do ombro e olhos castanhos. Nos olhos, usa óculos de grau, nas orelhas, usa fones de ouvido e no corpo, usa uma camiseta preta. Ao fundo, uma parede lisa iluminada em tons de rosa e azul.
Neste percurso, seremos pessoas desenvolvedoras trabalhando no projeto denominado VidFlow: uma plataforma de compartilhamento de vídeos.
Recebemos o layout desta plataforma do time de design e a nossa missão será transformar esse design em uma aplicação funcional, similar à que pode ser vista abaixo.
Todos os vídeos que estão na nossa aplicação são consumidos através da API, e também temos a opção de aplicar filtros nestes vídeos. Na barra de pesquisa, se digitarmos, por exemplo, "linguagens", todos os vídeos que contêm o termo "linguagens" em seus títulos serão filtrados e exibidos.
Isso também se aplica às nossas categorias de vídeo. Se selecionarmos a categoria "Mobile", por exemplo, filtraremos e exibiremos apenas os vídeos sobre mobile.
Se você se interessou e quer aprender tudo isso, te convidamos para essa jornada. No entanto, é necessário que você tenha como pré-requisitos conhecimentos básicos de HTML, CSS e JavaScript.
Se você já possui esses conhecimentos, vamos embarcar nessa viagem com o objetivo de aprender a consumir uma API com JavaScript e construir o VidFlow. Nos vemos lá!
Apresentação e layout do projeto - Conhecendo o projeto
Para começar, vamos construir nossa aplicação VidFlow, que será um aplicativo de compartilhamento de vídeos. Para iniciar o desenvolvimento deste aplicativo, precisamos de um projeto bem organizado.
Anteriormente, disponibilizamos a base desse projeto e agora vamos conhecer um pouco sobre a organização dessas pastas e desses arquivos para conseguirmos construir o aplicativo.
Explorando as Pastas do Projeto
Vamos abrir a aplicação no VS Code e acessar o explorador lateral. Nele, temos a pasta "backend", que conterá os arquivos do nosso back-end, que veremos mais detalhadamente ao longo do curso. Abaixo dela, há a pasta "css", na qual temos o arquivo reset.css que já vem com configurações para padronizar nosso navegador.
Nessa mesma pasta, temos o arquivo flexbox.css, que possui o CSS para posicionar nossos elementos na tela, e o arquivo estilo.css, que basicamente está estilizando nossa aplicação.
Abaixo de "css", temos a pasta "img" que conterá todas as imagens usadas para construir esta aplicação. Abaixo dessa pasta, temos os arquivos script.js, que começaremos a trabalhar em breve, e index.html, onde já temos uma estrutura básica de como será a estrutura da nossa página.
Em nosso index.html, temos o HTML definido em português do Brasil, nossos metadados configurados no <head> e o link da fonte que utilizaremos.
Esse arquivo também possui o vínculo dos arquivos de estilo da pasta "css", mencionados antes. Por fim, já alteramos o nome para VidFlow na tag <title> e adicionamos o Favicon.png, a pequena imagem que aparecerá na aba do navegador quando abrirmos nossa página.
Esta configuração já está pronta, e vale lembrar que é importante ter tudo preparado para não precisarmos nos preocupar com esses detalhes ao longo do desenvolvimento.
Agora que já conhecemos os arquivos do nosso projeto e sabemos por onde começar, vamos observar nosso layout do Figma para construir o VidFlow.
Apresentação e layout do projeto - Construindo o cabeçalho
Agora que já conhecemos a estrutura dos arquivos do nosso projeto, chegou o momento de olhar nosso layout do Figma e transformá-lo em código.
Abriremos o Figma do projeto no navegador e acessaremos o frame (quadro) denominado "1440 - Desktop Light". Quando começamos a observar esse layout, percebemos que o que mais chama atenção de primeira é a seção superior que contém a barra de navegação superior.
Ela possui três partes: à esquerda, a parte da logo do VidFlow, no centro, a barra de pesquisa e à direita, os ícones. Podemos seguir essa mesma linha de raciocínio para criar nosso HTML. Então, vamos voltar ao código e acessar o arquivo index.html.
Construindo a Seção Superior da Aplicação
Para começar, entre a abertura e o fechamento do <body>, vamos adicionar a tag <header> com abertura e fechamento para sinalizar ao HTML que esse é o nosso cabeçalho. Entre a abertura e o fechamento do <header>, vamos adicionar a tag nav, um ponto, e a classe cabecalho__container seguido de "Enter" para criar a tag <nav class="cabecalho_container"></nav>.
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link
href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="./css/reset.css">
<title>VidFlow</title>
<link rel="shortcut icon" href="./img/Favicon.png" type="image/x-icon">
</head>
<body>
<header>
<nav class="cabecalho__container"></nav>
</header>
</body>
</html>
Dica Para adiantar o trabalho ao criar tags HTML, podemos escrever o nome da tag (neste caso,
nav), seguido de um ponto e o nome da classe a ser adicionada. Após pressionar "Enter", esse atalho cria automaticamente a tag e a classe declaradas.
Entre a abertura e o fechamento da tag nav, vamos fazer a divisão mencionada anteriormente. Colocaremos a <div> que terá a nossa logo, com a classe logo__item. Abaixo dela, criaremos a nossa segunda <div> que terá a classe cabecalho__pesquisar__item, que por sua vez conterá a nossa barra de pesquisa.
Por fim, abaixo desta, vamos criar a <div> que conterá nossos itens, e será classificada como cabecalho__icones__item. As três <div>s devem ter uma linha vazia entre a abertura e o fechamento.
O resultado pode ser visto abaixo:
<!DOCTYPE html>
<html lang="pt-br">
<!-- Código omitido -->
<body>
<header>
<nav class="cabecalho__container">
<div class="logo__item">
</div>
<div class="cabecalho__pesquisar__item">
</div>
<div class="cabecalho__icones__item">
</div>
</nav>
</header>
</body>
</html>
Para o preenchimento, adicionaremos na linha vazia dentro da <div> correspondente à logo uma tag <img> com os atributos src e alt. O primeiro receberá o endereço que adicionaremos (./img/vidflow--logo-light-mode.png), correspondente à imagem do logo que está na pasta "img". Já o segundo receberá a descrição "Logo do VidFlow".
Se acessarmos a aplicação pelo navegador, veremos o logo alinhado no canto superior esquerdo, conforme desejado. Isso porque o código CSS já foi entregue pronto, senão teríamos que ajustá-lo manualmente.
Em seguida, vamos criar a nossa barra de pesquisa na segunda <div>. Para isso, adicionaremos em sua linha vazia a tag form com a classe form__pesquisa. Usaremos esse form porque a barra de pesquisa será um input, que é uma propriedade de form.
Dentro de form, adicionaremos essa tag <input> com a classe pesquisar__input e o type search. À direita da classe, adicionaremos um placeholder com a palavra "Pesquisar", que aparecerá dentro da barra de pesquisa na nossa página.
<!DOCTYPE html>
<html lang="pt-br">
<!-- Código omitido -->
<body>
<header>
<nav class="cabecalho__container">
<div class="logo__item">
<img src="./img/VidFlow--Logo-light-mode.png" alt="Logo do VidFlow">
</div>
<div class="cabecalho__pesquisar__item">
<form class="form__pesquisa">
<input type="search" class="pesquisar__input" placeholder="Pesquisar">
</form>
</div>
<div class="cabecalho__icones__item">
</div>
</nav>
</header>
</body>
</html>
Se voltarmos ao nosso Figma e aproximarmos a tela para visualizar os detalhes da barra de pesquisa, veremos vários elementos: o input, que acabamos de criar, o ícone de teclado, e dois botões. Precisaremos criar cada uma dessas partes.
Voltando ao código, logo abaixo do <input>, adicionaremos uma <img> com a classe pesquisar__input__teclado. Nesse local, colocaremos o ícone do teclado, portanto, adicionaremos a src ./img/topbar/keyboard.png. Já o alt será "Ícone de teclado".
Continuaremos ao criar os botões, que estarão abaixo da tag de imagem. O primeiro será um button com a classe pesquisar__btn. Dentro desse botão, colocaremos um <img> com o caminho ./img/topbar/search.png. O seu alt será "Ícone de lupa".
<!DOCTYPE html>
<html lang="pt-br">
<!-- Código omitido -->
<body>
<header>
<nav class="cabecalho__container">
<div class="logo__item">
<img src="./img/VidFlow--Logo-light-mode.png" alt="Logo do VidFlow">
</div>
<div class="cabecalho__pesquisar__item">
<form class="form__pesquisa">
<input type="search" class="pesquisar__input" placeholder="Pesquisar">
<img src="./img/topbar/keyboard.png" alt="Ícone de teclado" class="pesquisar__input-teclado">
<button class="pesquisar__btn">
<img src="./img/topbar/search.png" alt="Ícone de lupa">
</button>
</form>
</div>
<div class="cabecalho__icones__item">
</div>
</nav>
</header>
</body>
</html>
Vamos selecionar as três linhas desse <button>, pressionar
"Alt+Shift+Seta para baixo" para criar uma cópia desse trecho abaixo do primeiro. Faremos isso porque o botão de pesquisa por voz é bastante semelhante a este.
Vamos alterar a classe do novo botão que criamos para cabecalho__audio. Em relação ao endereço da imagem, na tag img, vamos alterar o atributo src para ./img/topbar/Mic.png para adicionar o ícone do microfone. Vamos também alterar o atributo alt para "Ícone de microfone".
<!DOCTYPE html>
<html lang="pt-br">
<!-- Código omitido -->
<body>
<header>
<nav class="cabecalho__container">
<div class="logo__item">
<img src="./img/VidFlow--Logo-light-mode.png" alt="Logo do VidFlow">
</div>
<div class="cabecalho__pesquisar__item">
<form class="form__pesquisa">
<input type="search" class="pesquisar__input" placeholder="Pesquisar">
<img src="./img/topbar/keyboard.png" alt="Ícone de teclado" class="pesquisar__input-teclado">
<button class="pesquisar__btn">
<img src="./img/topbar/search.png" alt="Ícone de lupa">
</button>
<button class="cabecalho__audio">
<img src="./img/topbar/Mic.png" alt="Ícone de microfone">
</button>
</form>
</div>
<div class="cabecalho__icones__item">
</div>
</nav>
</header>
</body>
</html>
Se tudo correu bem, ao atualizarmos a página do VidFlow no navegador, já poderemos ver a barra de pesquisa que criamos, devidamente posicionada e formatada.
Ao observarmos nossa referência no Figma, vemos que o que falta para finalizar essa barra superior são os ícones do canto superior direito.
Vamos construí-los na terceira <div> no próximo vídeo. Nos encontramos lá!
Sobre o curso JavaScript: consumindo e tratando dados de uma API
O curso JavaScript: consumindo e tratando dados de uma API possui 84 minutos de vídeos, em um total de 42 atividades. Gostou? Conheça nossos outros cursos de JavaScript em Front-end, ou leia nossos artigos de Front-end.
Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:
- Apresentação e layout do projeto
- Consumindo API
- Aprimorando o código
- Criando filtros de exibição