JavaScript: entendendo promises e async/await
Construindo a página - Apresentação
Olá, estudante! Boas-vindas a este curso de JavaScript assíncrono. Meu nome é Mônica Hillman, e serei a instrutora que irá te guiar durante toda essa jornada de aprendizado.
Audiodescrição: Mônica se descreve como uma mulher branca, de cabelos lisos castanho-escuros com algumas mechas loiras, e olhos castanho-escuros com um delineado preto. Ela usa óculos de armação arredondada marrom, tem um piercing prateado no septo, veste uma camiseta preta, e está sentada em frente a uma parede clara iluminada em gradiente roxo, com duas prateleiras de madeira dispostas verticalmente contendo livros e enfeites.
O que vamos desenvolver?
Durante este curso, vamos desenvolver a página de upload de arquivos do CodeConnect. Essa página possui uma barra de navegação lateral e também uma seção principal com duas colunas.
A primeira coluna é a parte onde podemos fazer o upload de uma imagem de prévia do projeto. Podemos testar essa funcionalidade clicando no botão "Carregar imagem" e selecionando um arquivo. Ao fazer isso, a imagem do projeto é atualizada pela que escolhemos no computador.
Na segunda coluna, temos um formulário para descrever o projeto:
- No primeiro campo de digitação ("Nome do projeto"), podemos inserir o nome do projeto (colocaremos "Gato bonifácio", por exemplo);
- No segundo campo ("Descrição"), colocamos a descrição do projeto (no nosso caso, colocaremos "Portfólio do gato");
- No terceiro campo ("Tags"), podemos inserir palavras-chave para encontrar o projeto, como a palavra "Programação", por exemplo. Nesse campo, pressionamos "Enter" para construir um item na lista de tags de acordo com o que digitamos.
Abaixo do formulário, temos as seguintes opções: "Descartar" ou "Publicar". Se clicarmos no botão "Publicar", será retornada a mensagem "Deu tudo certo!" em um alerta.
O que vamos aprender?
Primeiramente, iremos reforçar alguns conceitos de HTML e CSS. Depois aprenderemos conceitos de assincronicidade, como promises, async e await, blocos try…catch, e funcionalidades de JavaScript que conseguem executar algo após determinado tempo, como o setTimeout().
Esses são conceitos essenciais para pessoas desenvolvedoras no mercado de trabalho. Você irá se deparar com eles no momento de fazer upload de informações para o banco de dados, isto é, para o back-end, ou quando quiser retornar dados já existentes para mostrar dinamicamente na tela.
Quais são os pré-requisitos?
É importante ter uma base de HTML e CSS, pois apesar de abordar isso neste curso, não iremos nos aprofundar nessas duas tecnologias. Além disso, é importante ter noção de lógica de programação.
Conclusão
Se você se interessou em aprender todos esses conceitos, matricule-se no curso e nos encontramos no próximo vídeo. Até lá!
Construindo a página - Menu lateral
Estamos desenvolvendo a página de upload de arquivos da CodeConnect.
Menu lateral
Acessando o projeto no Figma
Começaremos com o projeto no Figma aberto, onde identificamos que a primeira coisa que precisamos desenvolver é a barra de menu lateral.
Para isso, vamos dividir a tela, de modo que seja possível visualizar metade do Figma e metade do código. Com o Figma à esquerda e o Visual Studio Code à direita, podemos iniciar.
Criando o menu lateral
Inicialmente, vamos acessar o arquivo base index.html, disponibilizado na atividade Preparando o ambiente. Ao final do código, na primeira linha dentro da tag body, vamos adicionar a tag aside. Essa tag representa o menu lateral, e no escopo dela, vamos começar a inserir os outros elementos.
index.html:
<!-- código omitido -->
<body>
<aside>
</aside>
<script src="scripts.js"></script>
</body>
<!-- código omitido -->
Adicionando o logotipo
O primeiro elemento que vamos adicionar será o logotipo do CodeConnect. No escopo da tag aside, usaremos a tag img com o atributo src="./img/Logo.svg". Também vamos colocar um texto alternativo (atributo alt), que será "Logo do CodeConnect".
<!-- código omitido -->
<aside>
<img src="./img/Logo.svg" alt="Logo do CodeConnect">
</aside>
<!-- código omitido -->
Criando o menu de navegação
Em seguida, temos o menu de navegação. Por isso, vamos utilizar a tag nav. No escopo dela, precisamos passar a lista de links, então usamos a tag ul, cuja classe será lista-links.
<!-- código omitido -->
<aside>
<img src="./img/Logo.svg" alt="Logo do CodeConnect">
<nav>
<ul class="lista-links">
</ul>
</nav>
</aside>
<!-- código omitido -->
Adicionando os itens do menu de navegação
O primeiro item da lista de links deve ser inserido no escopo da tag li, que vamos adicionar em ul. Esse primeiro link será o botão "Publicar", então vamos colocar uma âncora (tag a) com o atributo href recebendo uma hashtag (#), por enquanto. Além disso, a classe dessa âncora será link-destaque, para facilitar a estilização. Dentro de a, digitaremos o texto "Publicar".
Construímos esse item da lista como uma âncora pois, mesmo aparentando ser um botão visualmente, ele não tem a funcionalidade de gerar alguma ação com o clique, sem ser levar para outra tela. Por isso, podemos utilizar um link (
a) em vez de um botão (button).
<!-- código omitido -->
<aside>
<img src="./img/Logo.svg" alt="Logo do CodeConnect">
<nav>
<ul class="lista-links">
<li>
<a href="#" class="link-destaque">Publicar</a>
</li>
</ul>
</nav>
</aside>
<!-- código omitido -->
Podemos dar continuidade aos demais links, utilizando um novo li abaixo do primeiro. Dentro dele, vamos colocar outra âncora (a), também com o atributo href="#", mas agora colocaremos uma imagem (img) no escopo dela, com o atributo src igual a ./img/feed.svg entre aspas duplas.
Feito isso, na linha abaixo, adicionaremos o texto "Feed".
<!-- código omitido -->
<aside>
<img src="./img/Logo.svg" alt="Logo do CodeConnect">
<nav>
<ul class="lista-links">
<li>
<a href="#" class="link-destaque">Publicar</a>
</li>
<li>
<a href="#">
<img src="./img/feed.svg">
Feed
</a>
</li>
</ul>
</nav>
</aside>
<!-- código omitido -->
Agora temos um item da lista contendo um link, que será representado por uma imagem e um texto. Isso se repete para os links de "Perfil", "Sobre nós" e "Sair", então apenas repetiremos o mesmo processo. Ao final, teremos o seguinte resultado do menu de navegação:
<!-- código omitido -->
<aside>
<img src="./img/Logo.svg" alt="Logo do CodeConnect">
<nav>
<ul class="lista-links">
<li>
<a href="#" class="link-destaque">Publicar</a>
</li>
<li>
<a href="#">
<img src="./img/feed.svg">
Feed
</a>
</li>
<li>
<a href="#">
<img src="./img/account_circle.svg">
Perfil
</a>
</li>
<li>
<a href="#">
<img src="./img/info.svg">
Sobre nós
</a>
</li>
<li>
<a href="#">
<img src="./img/logout.svg">
Sair
</a>
</li>
</ul>
</nav>
</aside>
<!-- código omitido -->
Estilizando o corpo da aplicação
Uma vez colocados os links faltantes no código, podemos começar a estilização da aplicação. Para isso, vamos abrir o explorador de arquivos à esquerda e abrir o arquivo styles.css.
Feito isso, vamos iniciar a estilização ao final do código, utilizando o seletor de body para definir uma cor de fundo para a aplicação geral, não somente do menu lateral.
Para isso, usaremos a propriedade background-color, que receberá a variável var(--background-color), construída anteriormente no projeto base.
Na sequência, podemos definir a cor do texto (color) como var(--text-color). Assim, teremos a cor de fundo escura e a cor dos textos como branca.
Depois, podemos definir a fonte (font-family) como var(--font-family).
styles.css:
/* código omitido */
body {
background-color: var(--background-color);
color: var(--text-color);
font-family: var(--font-family);
}
No caso acima, deixamos as variáveis com nomes ideais para adicionar às propriedades correspondentes, mas agora precisamos começar a posicionar os elementos do body.
Podemos fazer isso através da propriedade display: flex. Agora, todos os elementos do body se tornarão flex items e serão posicionados lado a lado pela configuração padrão do flex-direction.
Depois, podemos usar as propriedades justify-content: center e align-items: start. Isso irá centralizar todos os elementos do body e alinhá-los pelo início do elemento em si. Dessa forma, o topo dele será o foco do alinhamento.
/* código omitido */
body {
background-color: var(--background-color);
color: var(--text-color);
font-family: var(--font-family);
display: flex;
justify-content: center;
align-items: start;
}
Feito isso, podemos adicionar um height de 100vh, que definirá a altura da tela como 100% da altura da tela da pessoa usuária. Depois, usaremos um gap de 27px para fazer o espaçamento dos itens do body, além de um padding de 56px acima e abaixo, e 0 nas laterais.
/* código omitido */
body {
background-color: var(--background-color);
color: var(--text-color);
font-family: var(--font-family);
display: flex;
justify-content: center;
align-items: start;
height: 100vh;
gap: 27px;
padding: 56px 0;
}
Você pode conferir essas configurações no Figma do projeto.
Estilizando o menu lateral
Agora vamos estilizar o aside, logo após o body. Primeiramente, precisamos colocar um background-color diferente: nesse caso, var(--itens-background).
Depois, precisamos arredondar a borda da barra lateral. Faremos isso com a propriedade border-radius com o valor de 10px. Além disso, podemos definir uma altura (height) de 100%, de modo que o menu lateral ocupe 100% do espaço disponível para ele.
/* código omitido */
aside {
background-color: var(--itens-background);
border-radius: 10px;
height: 100%;
}
Em seguida, vamos utilizar um padding de 40px acima e abaixo, 16px nas laterais. Além disso, vamos adicionar a propriedade text-align recebendo o valor center.
/* código omitido */
aside {
background-color: var(--itens-background);
border-radius: 10px;
height: 100%;
padding: 40px 16px;
text-align: center;
}
Estilizando os links do menu lateral
Nesse momento, podemos utilizar a extensão Live Server para visualizar as alterações realizadas através do código CSS. Com o navegador aberto, podemos visualizar que alguns padrões foram estilizados, como o fundo da aplicação e o fundo do menu lateral.
No entanto, ainda precisamos estilizar os links. Dito isso, ao final do código de styles.css, vamos selecionar a classe .lista-links. No escopo dela, vamos colocar primeiro a propriedade display: flex seguida de flex-direction: column.
Isso dará a possibilidade de utilizar o gap para fazer um espaçamento entre os links. Sendo assim, vamos adicionar a propriedade gap com o valor de 40px. Feito isso, vamos definir uma margin-top de 80px, um align-items com o valor center, e um list-style-type com o valor none.
/* código omitido */
.lista-links {
display: flex;
flex-direction: column;
gap: 40px;
margin-top: 80px;
align-items: center;
list-style-type: none;
}
Dessa forma, conseguimos posicionar tudo corretamente na tela. Alinhamos os itens ao centro e também tiramos os estilos padrão da lista, que são os pontos à esquerda de cada item.
Por fim, vamos utilizar o seletor .lista-links li a, que também receberá display: flex, além de flex-direction: column. Com isso, conseguimos colocar as imagens acima do texto.
Também colocaremos um gap de 10px, seguido de um align-items: center. Com isso, definimos um espaçamento entre as imagens e os textos, além de alinhá-los ao centro.
/* código omitido */
.lista-links li a {
display: flex;
flex-direction: column;
gap: 10px;
align-items: center;
}
Para finalizar, vamos utilizar a propriedade text-decoration: none para remover o estilo de link, em que temos uma linha abaixo do texto. Depois, definiremos a cor do texto como var(--secondary-color). Por último, iremos configurar a font-size como 22px.
/* código omitido */
.lista-links li a {
display: flex;
flex-direction: column;
gap: 10px;
align-items: center;
text-decoration: none;
color: var(--secondary-color);
font-size: 22px;
}
Conclusão
Com isso, conseguimos estilizar todos os itens da lista, mas ainda existem algumas coisas a serem estilizadas, como o destaque do botão "Publicar", por exemplo.
Daremos continuidade à estilização no próximo vídeo!
Construindo a página - Seção principal
Estamos desenvolvendo o menu lateral da aplicação e precisamos adicionar alguns estilos no primeiro botão para destacá-lo.
Ao final do arquivo styles.css, vamos utilizar o seletor .lista-links li:first-of-type a {}. Esse seletor vai entrar na lista de links, pegar o primeiro li, que definimos com first-of-type, e dentro desse primeiro li, vai pegar a primeira âncora.
Vamos definir que esse seletor vai receber o color: var(--primary-color). Com isso, o primeiro texto da lista de links ficará com a fonte em verde.
styles.css
.lista-links li:first-of-type a {
color: var(--primary-color);
}
Agora, precisamos selecionar a classe .link-destaque, onde vamos colocar um border de 1px solid var(--primary-color). Depois, podemos adicionar um padding de 12 px em cima e embaixo, e 30 px aos lados. Em seguida, adicionamos um border-radius de 8px.
.link-destaque {
border: 1px solid var(--primary-color);
padding: 12px 30px;
border-radius: 8px;
}
Dessa maneira, definimos a borda com a cor verde, além de um espaçamento interno e um arredondamento nas bordas.
Criando a seção principal
Podemos continuar a adicionar os elementos da aplicação. Conferindo o Figma do projeto, conferimos que ainda precisamos adicionar uma seção principal. Dentro dessa seção principal temos uma imagem, que está em cima de um quadrado. Abaixo dela, temos um botão para "Carregar imagem", o nome do arquivo da imagem carregado e um formulário com informações sobre ela.
Vamos abrir o index.html para implementar essa seção. Após o fechamento do aside, vamos abrir um espaço pressionando "Enter" três vezes.
Nesse espaço, vamos abrir a tag main. Dentro dela, vamos ter uma div com a classe container-upload-imagem. Dentro dela, vamos colocar uma div class='container-image'.
Depois, vamos colocar uma imagem com a tag img, cujo src será ./img/imagem1.png. O texto alternativo, na propriedade alt, vai ficar vazio por enquanto. Em seguida, vamos adicionar uma classe (class) chamada main-imagem.
Depois do fechamento da div class='container-imagem', vamos pressionar um "Enter" e adicionar um botão (tag button), cujo texto será "Carregar imagem".
Em seguida, vamos adicionar uma nova div com classe container-imagem-nome. Dentro disso, vamos inserir um parágrafo (tag p), que vai receber image_projeto.png, assim como está no Figma. Depois, vamos colocar uma tag img com a src igual a ./img/close.svg.
index.html
<main>
<div class="container-upload-imagem">
<div class="container-imagem">
<img src="./img/imagem1.png" alt="" class="main-imagem">
</div>
<button id="upload-btn">Carregar imagem</button>
<div class="container-imagem-nome">
<p>image_projeto.png</p>
<img src="./img/close.svg">
</div>
</div>
</main>
Conseguimos fazer a primeira coluna do main, com a imagem carregada, o botão e o nome dessa imagem. Agora, precisamos fazer o formulário.
Criando o formulário
Após o fechamento da div de container-upload-imagem, vamos abrir um espaço e adicionar uma nova div com a classe container-descricao. Dentro dessa div, vamos colocar um h2 com o texto Novo Projeto.
Depois, vamos inicializar um formulário com a tag form, que vai ter uma div contendo uma label for="nome" com o valor de Nome do Projeto. Depois, vamos colocar um input do tipo text com o id igual a nome e também o name como nome.
Para cada campo do nosso formulário, vamos precisar inserir um label e um input dentro de uma div, para depois facilitar na hora de estilizar.
Quando inserimos um campo de digitação grande, podemos utilizar a tag
textareaem vez deinput, como faremos no caso do campo de descrição!
Por fim, precisamos colocar a lista de tags previamente inseridas. Para isso, antes do fechamento do formulário, podemos adicionar um ul. Dentro desse ul, vamos ter a classe lista-tags. Ela conterá um li e um p. O p vai ter o texto de Front-end. Depois, podemos colocar uma imagem cuja fonte será ./img/close-black.svg.
Por fim, precisamos inserir os botões de "Descartar" e "Publicar". Eles serão colocados após o ul da lista de tags, então vamos abrir um espaço com "Enter" e adicionar uma div com a classe chamada container-botoes.
Dentro da div, vamos colocar o primeiro botão com a classe botao-descartar e o texto "Descartar". Depois, embaixo, vamos adicionar mais um botão, agora com a classe botao-publicar e o texto "Publicar".
<div class="container-descricao">
<h2>Novo projeto</h2>
<form>
<div>
<label for="nome">Nome do projeto</label>
<input type="text" id="nome" name="nome" />
</div>
<div>
<label for="descricao">Descricao</label>
<textarea id="descricao" name="descricao"></textarea>
</div>
<div>
<label for="categoria">Tags</label>
<input type="text" id="categoria" name="categoria" />
</div>
<ul class="lista-tags">
<li>
<p>Front-end</p>
<img src="./img/close-black.svg">
</li>
</ul>
<div class="container-botoes">
<button class="botao-descartar">Descartar</button>
<button class="botao-publicar">Publicar</button>
</div>
</form>
</div>
Próximos passos
Conseguimos implementar toda a parte do HTML da nossa segunda seção! Agora, precisamos estilizar todo o restante da aplicação. Vamos para o próximo vídeo, então, para nos aventurar bastante com CSS!
Sobre o curso JavaScript: entendendo promises e async/await
O curso JavaScript: entendendo promises e async/await possui 87 minutos de vídeos, em um total de 49 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:
- Construindo a página
- Assincronicidade
- Manipulando tags
- Coletando dados do formulário
- Gerando interações com o formulário