Olá, meu nome é Flávio Almeida, e apresento a vocês o botão azul. Isso mesmo: este curso inteiro girará em torno deste botão que, ao ser clicado, acessará uma API Web, e entre sua apresentação e a busca dos dados, lidaremos com Promise e implementaremos um mecanismo de Retry, setTimeout, Delay.
Além disso, teremos que interagir de maneira um pouco diferente com o usuário, já que ele terá um número limite de cliques no botão, e de tempo para tal. Iremos organizar o código por meio de composição de funções, na qual introduziremos mônadas, ou seja, precisaremos lidar mais e melhor com este paradigma funcional para aplicá-lo no programa.
Ainda, desacoplaremos o código trabalhando com barramento de eventos, aplicando padrão de projeto Publish-subscribe, tudo neste botão. Embora pareça um exagero, tudo isso pode acontecer com você no projeto em que estiver trabalhando, e o mais importante é que você conseguirá pinçar cada técnica aprendida e utilizar em seu projeto, com JavaScript puro, quando necessário.
Organizaremos nosso código em módulos usando um sistema nativo de módulos do Google Chrome, algo que será vigente nos navegadores do mercado, e que estamos antecipando aqui. Antes de começarmos, porém, é recomendado fazer o exercício obrigatório desta aula, com os pré requisitos de infraestrutura, e o que mais você precisará saber antes de dar seguimento ao curso.
Estando tudo no lugar, e bem feito, vamos começar!
Com o projeto descompactado, vamos entrar na pasta project e subir o servidor através do comando:
node serverLembre-se da dica da atividade anterior na qual alguns sistemas Linux usam o binário
nodejsno lugar denode. Se este for o seu caso, suba o servidor através do comandonodejs server.
Como foi explicado na atividade de download e infraestrutura, será exibido no console a mensagem
Server is running at http://localhost:3000Vamos acessar o endereço http://localhost:3000 que exibirá uma página padrão já criada que exibe um título e um botão.
Ela possui a seguinte estrutura:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap-theme.css">
<title>Notas Fiscais</title>
</head>
<body class="container">
<h1 class="text-center">Notas Fiscais</h1>
<div class="text-center">
<button id="myButton" class="btn btn-primary">Buscar</button>
</div>
</body>
</html>Este arquivo fica dentro da pasta project/public. Aliás, todos os arquivos estáticos do projeto ficam nessa pasta, inclusive os arquivos do Boostrap que utilizaremos para aplicar um visual profissional em nossa aplicação com pouco esforço.
Para esquentar os neurônios, nossa primeira tarefa será buscar uma lista de notas fiscais da API REST disponibilizada pelo servidor do projeto que baixamos através do endereço http://localhost:3000/notas. Porém, antes de pensarmos no código que escreveremos, precisamos primeiro pensar em como organizaremos nosso código. Sem sombra de dúvidas, vamos organizá-lo em módulos. Porém, como faremos o carregamento deles em nosso navegador?
A partir do ES2015 (ES6) foi introduzido um sistema de módulos padrão na linguagem caracterizado pelo uso da sintaxe import e export. Todavia, por haver divergências sobre como implementar o carregamento de módulos nos navegadores essa parte não foi especificada jogando a responsabilidade do carregamento no colo de bibliotecas e pré-processadores JavaScript. No entanto, a polêmica sobre o carregamento de módulos parece estar chegando ao fim.
Versões mais recentes do Google Chrome já suportam o carregamento nativos de módulos através da tag <script type="module">. Outros navegadores começaram a implementar este recurso também.
Partiremos do princípio que o aluno já conhece o sistema de módulos do ES2015, pois focaremos apenas na estratégia de seu carregamento pelo navegador, aliás, primeira novidade aqui. Caso o aluno queira saber mais sobre o sistema de módulos do ES2015 e como suportá-lo em diversos navegadores através de um processo de compilação, ele pode consultar o curso JavaScript Avançado - Parte 3.
Vamos criar o módulo principal da aplicação app.js dentro da pasta public/app. Todos os arquivos que escreveremos ficarão dentro da pasta app. Por enquanto ele não terá dependência de nenhum módulo, mas quando houver, o navegador será inteligente para baixa-lo para nós, sem termos a necessidade de importá-lo através da tag <script>.
Nosso módulo associará um evento clique ao único botão que existe na página. Por enquanto exibiremos apenas um alerta para o usuário toda vez que o botão for clicado:
// public/app/app.js
document
.querySelector('#myButton')
.onclick = () => alert('oi');Através da propriedade onclick do elemento e com auxílio de arrow function temos um código mais terso.
Agora, vamos realizar o carregamento do módulo através da tag <script type="module">:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap-theme.css">
<title>Notas Fiscais</title>
</head>
<body class="container">
<h1 class="text-center">Notas Fiscais</h1>
<div class="text-center">
<button id="myButton" class="btn btn-primary">Buscar</button>
</div>
<script type="module" src="app/app.js"></script>
</body>
</html>Porém, a importação de um módulo só funcionará se estivermos acessando a aplicação através de um servidor web e não diretamente pelo sistema de arquivo. É dessa forma porque o sistema de módulos do navegador realizará requisições Ajax para carregar nosso módulo. Sendo assim, tenha certeza de estar acessando nossa página através do endereço http://localhost:3000.
O curso JavaScript: de padrões a uma abordagem funcional possui 156 minutos de vídeos, em um total de 74 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:
Impulsione a sua carreira com os melhores cursos e faça parte da maior comunidade tech.
1 ano de Alura
Assine o PLUS e garanta:
Formações com mais de 1500 cursos atualizados e novos lançamentos semanais, em Programação, Inteligência Artificial, Front-end, UX & Design, Data Science, Mobile, DevOps e Inovação & Gestão.
A cada curso ou formação concluído, um novo certificado para turbinar seu currículo e LinkedIn.
No Discord, você tem acesso a eventos exclusivos, grupos de estudos e mentorias com especialistas de diferentes áreas.
Faça parte da maior comunidade Dev do país e crie conexões com mais de 120 mil pessoas no Discord.
Acesso ilimitado ao catálogo de Imersões da Alura para praticar conhecimentos em diferentes áreas.
Explore um universo de possibilidades na palma da sua mão. Baixe as aulas para assistir offline, onde e quando quiser.
Acelere o seu aprendizado com a IA da Alura e prepare-se para o mercado internacional.
1 ano de Alura
Todos os benefícios do PLUS e mais vantagens exclusivas:
Luri é nossa inteligência artificial que tira dúvidas, dá exemplos práticos, corrige exercícios e ajuda a mergulhar ainda mais durante as aulas. Você pode conversar com a Luri até 100 mensagens por semana.
Aprenda um novo idioma e expanda seus horizontes profissionais. Cursos de Inglês, Espanhol e Inglês para Devs, 100% focado em tecnologia.
Transforme a sua jornada com benefícios exclusivos e evolua ainda mais na sua carreira.
1 ano de Alura
Todos os benefícios do PRO e mais vantagens exclusivas:
Mensagens ilimitadas para estudar com a Luri, a IA da Alura, disponível 24hs para tirar suas dúvidas, dar exemplos práticos, corrigir exercícios e impulsionar seus estudos.
Envie imagens para a Luri e ela te ajuda a solucionar problemas, identificar erros, esclarecer gráficos, analisar design e muito mais.
Escolha os ebooks da Casa do Código, a editora da Alura, que apoiarão a sua jornada de aprendizado para sempre.