JavaScript: consumindo e tratando dados de uma API

Entendendo o Javascript - Apresentação

[00:00:00] Olá! Boas-vindas ao treinamento sobre consumo de API e tratamento de dados que retornam a partir dela. O meu nome é Mônica Hillman, mas você pode me chamar de Moni Hillman. Eu serei a instrutora que vai te guiar nessa jornada de aprendizado.

[00:00:13] Vamos contextualizar a nossa história. Nós somos uma dupla de desenvolvedores da Alura, especificamente do produto AluraBooks, uma plataforma de venda de livros técnicos. Nós trabalhamos com a linguagem JavaScript.

[00:00:26] Durante nosso desenvolvimento, encontramos um problema nos dados dos usuários do AluraBooks. Vários usuários moravam na mesma rua e cada um deles estava escrevendo o nome dessa rua de formas diferentes. Isso impediu que os nossos cientistas de dados fizessem uma análise mais aprofundada sobre os nossos clientes.

[00:00:45] Faremos um brainstorming para construir uma solução, passando por vários termos e conceitos sobre o JavaScript. Os termos são: JavaScript assíncrono e síncrono, Event Loop, Call Stack e Task Queue.

[00:01:01] Esses quatro assuntos específicos vão nos ajudar a entender o funcionamento do JavaScript. A partir disso, aprenderemos sobre Callbacks, Fetch API e Promises e, em seguida, sobre assincronicidade, assunto relacionado ao JavaScript assíncrono e às requisições, que é o consumo da API.

[00:01:23] Esses três tópicos nos gerarão mais dúvidas, especialmente sobre: Then; JSON; tratamento de erros com catch; e Finally, que são métodos das Promises, termo que acabamos de mencionar.

[00:01:38] Também aprenderemos sobre Async Await, sobre tratamento de erros com Async e Promise All. Isso vai nos ajudar a entender funções assíncronas, assim, continuaremos o nosso aprendizado sobre assincronicidade.

[00:01:52] Por fim, vamos aprender um pouquinho sobre getElementById, sobre Value e sobre addEventListener. Usaremos esses três tópicos para manipularmos o DOM e chegar na solução esperada. Repare que passaremos por vários tópicos para chegarmos na solução.

[00:02:11] Mas, afinal, qual vai ser a solução? Começaremos pegando o formulário de cadastro de clientes da AluraBooks. Depois, vamos consumir a API do ViaCEP. Quando o nosso usuário for se cadastrar e colocar o CEP, vai puxar já o nome da rua, o nome da cidade e o estado automaticamente.

[00:02:29] A partir de agora, teremos todos os nomes de rua escritos da mesma maneira, e isso vai facilitar muito a vida dos nossos cientistas de dados. Vamos testar e verificar a solução final.

[00:02:43] Estou com a tela de cadastro do AluraBooks aberta e eu vou até o CEP. Vou colocar um CEP padrão que vai devolver um endereço de São Paulo. Em seguida, vou clicar no campo de "CEP" e apertar “zoom” para vermos melhor.

[00:02:57] Agora, adicionaremos um "01001000" e tiraremos o mouse do campo de CEP. Selecionando fora, ele completa automaticamente o endereço da Praça da Sé, cidade de São Paulo e o estado de São Paulo.

[00:03:11] O próximo passo é enviar esse formulário. Ele vai pedir para eu completar tudo e poderemos testar depois. O ponto principal, é: conseguimos resolver o problema dos nossos cientistas de dados. Agora ele completa automaticamente o endereço, a cidade e o estado.

[00:03:24] Se você quer passar por toda essa trilha de aprendizado comigo e resolver esse problema do AluraBooks, além de outros projetos pessoais seus, te convido a participar do treinamento. Te vejo nos próximos vídeos!

Entendendo o Javascript - Importando JS no HTML

[00:00:00] Olá, estudante! Que bom ver você mais uma vez nos cursos da Alura. Dessa vez, nós seremos uma dupla de desenvolvedores da própria Alura e trabalharemos no projeto da AluraBooks, mais especificamente no cadastro de novos clientes da AluraBooks, que é uma empresa de livros.

[00:00:19] Trabalharemos preferencialmente com JavaScript. Para conseguirmos fazer um código ou uma programação em JavaScript, precisamos de um arquivo dessa linguagem.

[00:00:31] Sendo assim, você precisa baixar o arquivo disponível no "Configurando Seu Ambiente", na atividade anterior a esse vídeo. Isso também garante que construiremos o mesmo projeto. Tendo ele baixado, descompactaremos a pasta e abriremos no Visual Studio Code ela.

[00:00:50] Então, eu vou em "Arquivo" no canto superior esquerdo, "Abrir pasta" e vou procurá-la no meu computador. Eu coloquei em "Meus Documentos > dev > Cadastro AluraBooks". Após selecionarmos a pasta, vamos abri-la e criar o arquivo JavaScript.

[00:01:05] À esquerda, localizaremos a opção "EXPLORER" ou "EXPLORADOR". Depende da língua que está o seu Visual Studio Code. Nele, selecionaremos "Novo Arquivo" ou "New File". Você vai criar o arquivo script.js. Dentro dele, apertaremos console.log("Hello World") e salvaremos.

[00:01:05] O processo é diferente do CSS. Antes tínhamos feito um arquivo styles.css com todos os nossos estilos. Para criarmos um arquivo JavaScript, colocamos o final .js. Essa é diferença básica entre cada um deles. Se você fizer de outra linguagem, provavelmente esse final também vai ser diferente.

[00:01:50] Como testaremos o console.log que acabamos de escrever? Vou abrir esse script no meu computador, indicando os programas que eu desejo abrir, mas pode ser que dê um erro, porque esses arquivos JavaScript são executáveis.

[00:02:05] Então, dependendo do caso, pode ser que você tente abrir e ele rode no seu computador. Mas isso não funciona, porque ele não vai entender o que é console, nem o que é log, não vai entender nada.

[00:02:16] Para resolver esse problema, vamos importar o script no arquivo index.html. No final do index.html, antes de fechar o body, você vai abrir a tag script src="script.js" e vai salvar.

[00:02:33] Olha só que diferente: antes, quando importávamos outros tipos de arquivo, como externa, fonte ou estilos do CSS, íamos no head, no início do HTML, e colocávamos a tag link rel. Depois, definíamos a relação daquele arquivo, que era o stylesheet, e href, que é o link do arquivo, seja o externo, que é o fonts.google, seja até o styles.css.

[00:03:03] Vamos abrir no navegador esse script para ver se funcionou mesmo. Precisamos abrir o index.html, que é onde importaremos e acessaremos "Inspecionar".

[00:03:17] Você pode abrir isso tanto com "F12", quanto clicando com o botão direito do mouse, que vai ter a opção "Inspecionar". Lá dentro, ele vai abrir as "Ferramentas do Desenvolvedor". Tem várias opções, mas para a nossa, vai interessar o Console.

[00:03:30] Clicando no Console, vai parecer o "Hello World", então a nossa importação está funcionando com sucesso. Já configuramos a nossa ferramenta e nela visualizaremos tudo que construirmos com JavaScript, todo o código que fizermos. Todo o resultado vai aparecer nesta "Ferramenta do Desenvolvedor". Então, é ali que vamos testar todas as integrações e todos os nossos aprendizados.

[00:03:50] Então ainda temos muita coisa para aprendermos de JavaScript, facilitando o desenvolvimento desse formulário de cadastro da AluraBooks. No próximo vídeo, estudaremos JavaScript assíncrono e síncrono. Te vejo lá!

Entendendo o Javascript - Síncrono ou Assíncrono?

[00:00:00] Anteriormente, estávamos discutindo sobre os termos síncrono e assíncrono, mas onde é que isso funciona na vida real? Quando começou a pandemia, tudo se tornou home office, as aulas se tornaram online e as reuniões de trabalho também eram online.

[00:00:14] Participávamos de muitas videochamadas, seja na aula, em que a professora falava da casa dela e ouvíamos da nossa casa, seja no trabalho, onde o pessoal atualizava seus status, o que eles estavam fazendo, e você falava o seu também, ou até no happy hour com seus amigos.

[00:00:31] Chamamos essas atividades em vídeo de videochamadas, síncronas, ou seja, quando você está falando ao mesmo tempo, simultaneamente, com os seus colegas, seus amigos.

[00:00:41] A comunicação assíncrona também era bem comum, por exemplo, as mensagens de texto, quando você mandava um "Oi" para o seu colega e ele demorava horas para responder. Quem não tem aquele amigo que demora muito tempo para te responder? Essa é a comunicação assíncrona.

[00:00:57] Então, quando você manda uma mensagem e seu amigo que demora três horas para te responder, quais são as opções? Você para de fazer suas coisas, tudo que você tem para fazer, ou você se ocupa para fazer outras tarefas até chegar essa resposta dele?

[00:01:15] Isso é o que acontece em um sistema JavaScript também. Você pode ter o sistema síncrono, que é o padrão dele: responder uma tarefa após a outra. Por exemplo, uma imagem carrega, depois a outra carrega e depois a outra carrega e assim por diante, seguindo um fluxo.

[00:01:31] Também temos como fazer um sistema assíncrono, com tarefas acontecendo, sendo concluídas uma após a outra, mas também com outras em segundo plano ou afastadas para carregar depois.

[00:01:43] Vamos aplicar esse procedimento do JavaScript síncrono, o padrão, considerando a história da conversa do seu amigo que demora 10 anos para responder. Para isso, abriremos novamente o Visual Studio Code e o script.js.

[00:01:59] Agora precisamos criar outro console.log que represente essa conversa. Primeiro vamos colocar ("Mandando oi pro amigo!"). Em seguida, criaremos uma função chamada mandaMensagem.

[00:02:17] Prosseguindo, escreveremos function mandaMensagem() {}, usando os "bigodinhos" que bastante gente usa. Vamos colocar mais console.log ali dentro para simular outros elementos dessa conversa. Então, mandaremos ("Tudo bem?").

[000:02:35] Faremos outro console.log("Vou te mandar uma solicitação!"). Agora vou colocar pontos e vírgulas. Por fim, outro console.log. Estou colocando aqui uma conversa fictícia. ("Solicitação recebida!") e fechando essa função mandaMensagem.

[00:02:57] Para chamar essa função, escreveremos o mandaMensagem e adicionaremos outro console.log que vai acontecer depois da função. Vai ser ("Tchau tchau!"), só para dizer que acabou a conversa. Vamos abrir no navegador e verificar o resultado.

[00:03:14] Então, eu vou abrir a pasta que está o projeto, "Documentos > dev > Cadastro AluraBooks", o index.html e a "Ferramenta do Desenvolvedor" novamente. Usaremos "F12" ou botão direito e "Inspecionar". Por fim, acessaremos "Console".

[00:03:31] Tudo que escrevi aparece. Vou colocar o código do lado do Console para comparamos com o primeiro Console, o "Mandando oi pro amigo!".

[00:03:44] Ele começou, depois foi para outra linha, que é o mandaMensagem. Não é a função. A função só acontece quando ela é chamada. Então, na linha nove, chamamos um mandaMensagem que rodou os três console.log que estão na função e depois foi para o "Tchau tchau!". Ou seja, está acontecendo uma coisa por vez.

[00:04:01] Imagina se essa conversa fosse muito mais longa, com console.log maiores, quanto tempo perderíamos nela. Não seria muito melhor fazer ela acontecer em segundo plano, para realizarmos nossas tarefas enquanto ela acontece?

[00:04:17] Essa é a base do assíncrono que aprenderemos durante o curso. Entenderemos como funciona essa leitura - tanto de códigos síncronos, quanto assíncronos - no próximo vídeo. Até lá!

Sobre o curso JavaScript: consumindo e tratando dados de uma API

O curso JavaScript: consumindo e tratando dados de uma API possui 74 minutos de vídeos, em um total de 45 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:

• Entendendo o Javascript
• Aplicando a assincronicidade
• Aprofundando em promises
• Criando funções assíncronas
• Manipulando formulários