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á!
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.
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.
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
.
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á!
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:
Mais de 1500 cursos completamente atualizados, com novos lançamentos todas as semanas, emProgramação, Front-end, UX & Design, Data Science, Mobile, DevOps e Inovação & Gestão.
Desafios temáticos para você turbinar seu portfólio. Você aprende na prática, com exercícios e projetos que simulam o dia a dia profissional.
Webséries exclusivas com discussões avançadas sobre arquitetura de sistemas com profissionais de grandes corporações e startups.
Emitimos certificados para atestar que você finalizou nossos cursos e formações.
Mais de 1500 cursos completamente atualizados, com novos lançamentos todas as semanas, emProgramação, Front-end, UX & Design, Data Science, Mobile, DevOps e Inovação & Gestão.
Desafios temáticos para você turbinar seu portfólio. Você aprende na prática, com exercícios e projetos que simulam o dia a dia profissional.
Webséries exclusivas com discussões avançadas sobre arquitetura de sistemas com profissionais de grandes corporações e startups.
Emitimos certificados para atestar que você finalizou nossos cursos e formações.
Luri é nossa inteligência artificial que tira dúvidas, dá exemplos práticos e ajuda a mergulhar ainda mais durante as aulas. Você pode conversar com Luri até 100 mensagens por semana.
Estude a língua inglesa com um curso 100% focado em tecnologia e expanda seus horizontes profissionais.
Acesso completo
durante 1 ano
Estude 24h/dia
onde e quando quiser
Novos cursos
todas as semanas