JavaScript: criando requisições

Simulando uma API - Apresentação

Olá, estudante! Boas-vindas do curso JavaScript: Criando Requisições. O meu nome é Mônica Hillman, mas você pode me chamar de Moni Hillmann e eu serei a instrutora que vai te guiar nessa jornada de aprendizado. Durante o curso nós teremos uma dupla de desenvolvedores aqui da Alura, e recebemos a tarefa de transformar o AluraPlay em dinâmico.

Para realizar isso, nós vamos passar por três etapas. A primeira é a de transformar a lista da página inicial de vídeos em dinâmica. A segunda é permitir que o upload de novos vídeos nessa lista seja possível. E a terceira seria implementar uma ferramenta de busca.

[00:00:35] O AluraPlay se você ainda não conhece, ele é uma plataforma de compartilhamento de vídeos aqui da Alura. O projeto inicial ele tem quatro vídeos somente e temos um header com o logo no canto superior esquerdo da tela, uma barra de pesquisa no canto superior ao centro, e um botão de inserção de novos vídeos no campo superior direito.

[00:00:55] Agora o resultado que nós queremos chegar é esse. Nós temos uma página com vários vídeos que diz que foram inseridos manualmente através de uma API, nós podemos clicar no botão superior direito e inserir um novo vídeo. Vou testar com você.

No primeiro campo de digitação Link Embed, eu vou botar um link de um vídeo. No título do vídeo, eu vou botar FIAP + Alura. A imagem de perfil, eu vou botar uma que tem já salva no meu computador, mas você pode usar qualquer URL de alguma imagem que você acha no Google. E eu vou clicar no botão de "enviar" no centro da tela.

Agora, ele vai me enviar para uma página que está escrito vídeo cadastrado com sucesso. Eu vou clicar no logo no canto superior esquerdo, para voltar na página inicial. Agora quando arrastamos para baixo a tela nós já encontramos o vídeo novo cadastrado.

E eu também posso testar a função de pesquisar aqui no botão pesquisar, eu vou colocar memes na barra de pesquisa, e cliquei no botão "pesquisar" na parte superior da tela. Agora ele já filtrou o único vídeo que tinha essa palavra no título dele.

Para realizar esse projeto, durante esse curso você vai aprender como instalar o NodeJS e o json-server no seu projeto. Como Mockar uma API com o auxílio do json-server e como criar requisições GET e POST para essa API. Você também vai rever os conceitos de JavaScript assíncrono, quando a gente está construindo essas APIs. E também vai criar a funcionalidade de pesquisa. Tanto para mostrar na tela o resultado das requisições, quanto para implementar a funcionalidade de pesquisa, você vai precisar manipular o DOM.

[02:26]. E por fim, vamos tratar erros de requisições para deixar o usuário ciente do que está acontecendo na página durante a sua navegação.

Para realizar esse curso, é importante que você tenha algumas noções sobre JavaScript assíncrono, sobre manipulação de DOM, e sobre HTML e CSS. O HTML CSS é só para você entender um pouco sobre como foi feito legal, pois durante este curso nós não vamos produzi-lo.

E agora todo esse conhecimento que você vai adquirir, você pode utilizar em qualquer um dos projetos que você já construiu durante os cursos da Alura ou em projetos pessoais. E se você está interessado em fazer isso, em aprender sobre todos estes temas que eu falei eu te vejo no curso. Não deixe de se matricular. Até logo.

Simulando uma API - Projetos estáticos

Olá estudante, que bom ter você aqui hoje comigo. Lembra que durante a formação HTML e CSS nós fizemos vários projetos? Como o Alura+ que é a página inicial da nossa plataforma de streaming. Como o AluraBooks que é o nosso e-commerce, que vende livros técnicos da área de tecnologia, da área de gestão de design e vários outros.

Desta vez, nós como uma dupla de desenvolvedores aqui da Alura. Recebemos a tarefa do nosso líder técnico de trabalhar em cima do AluraPlay, de transformar esse site em dinâmico, colocar funcionalidades, como a de consumir essa lista de vídeos da tela inicial na parte superior da tela, de algum arquivo externo, de implementar funcionalidade de inserir novos vídeos nessa lista, e de realizar uma busca, porque essa lista pode ficar gigante de acordo com a quantidade de vídeos.

[00:00:48] Mas o que é que eu quero dizer quando falo sobre sites estáticos? Sites estáticos como o Alura+ e o AluraBooks, não temos como alterar aquele conteúdo que está ali dentro, sem ir direto para o código HTML, e nos estilos do CSS.

Isso pode acarretar em um problemão. Imagina que a pessoa que é responsável por essa gestão de conteúdo não seja programadora, nós vamos deixar ela de livre acesso no nosso código, e ela pode fazer alguma coisa errada, e sei lá, quebrar, nossa aplicação. Não é o ideal, nós poderíamos ter muitos problemas.

Então o essencial, o ideal é conseguirmos fazer esse site dinâmico consumindo uma API. Ou seja, o arquivo externo que eu comentei. Mas como desenvolvedor Front-End nós não temos obrigação de saber fazer uma API, isso é um papel do desenvolvedor Back-End. Por isso, nós vamos Mockar uma API.

Mas o que é que eu quero dizer com o termo Mockar? Mockar vem da palavra mockup, nós só verbalizamos, botamos um verbo na palavra mockup, que na área de design, na área de arquitetura quer dizer um rascunho, um esboço de algo que vai ser feito no futuro mais profundamente. Aqui nós só vamos fazer um rascunho de uma API.

E como que a gente pode fazer isso? A gente vai usar o json-server, que é um pacote npm, que simula um servidor local no nosso computador. Mas ainda não conseguimos usar ele direto, nós precisamos fazer a instalação do Node.js. E eu vou fazer junto contigo no próximo vídeo a instalação dele, no meu computador também. E eu te vejo lá.

Simulando uma API - Node.js

No vídeo passado eu comentei sobre a necessidade, sobre a demanda que nós ganhamos do nosso líder técnico de transformar o projeto do AluraPlay em dinâmico. Para isso, nós vamos ter que consumir uma API, que vamos construir no json-server. E para usar o json-server, nós precisamos instalar o Node.js no nosso computador.

Para isso, você precisa entrar no site do Node, que é nodejs.dev. Entrando lá, nós vamos ter algumas opções na tela, e bem no centro dela vão ter dois botões, que é o Download Node, e Learn Node. Nós vamos clicar no botão Download Node, para fazer a instalação dele. Cliquei no botão Download Node, ele vai baixar o instalador no meu computador, vamos esperar alguns segundos e agora que ele terminou de fazer o download do instalador. Eu vou abrir ele.

Abri, ele vai dar uma breve explicação do que ele vai fazer, que vai instalar o Node no meu computador. Eu vou dar um next no botão inferior esquerdo da tela, para ir para a próxima tela. Ele vai ter os termos de licença do Node, eu aceito eles. Então vou clicar na caixinha de checkbox que fica embaixo da tela. E depois eu vou dar outro next no inferior da tela. Ele vai ter onde vai ficar instalada a pasta do Node, eu vou deixar bem na pasta padrão, que é dentro do meu arquivo de programas Node.js. Vou dar um next no canto inferior esquerdo.

Ele vai perguntar na tela quais pacotes que vão ser instalados, eu vou deixar a instalação padrão, porque eu não preciso mexer, ele já instala tudo que ele precisa. Eu vou dar next no canto inferior esquerdo, de novo.

Depois ele vem perguntando se eu quero baixar outras ferramentas através do Chocolatey, não bota um check nessa caixinha, porque eu já fiz isso e ele instala um monte de coisa que a gente não precisa no computador. Então nós só damos next no canto inferior esquerdo.

E por final, ele vai perguntar se eu estou pronta para instalar. Eu estou prontíssima, e vou clicar em install no canto inferior esquerdo. E ele abriu uma tela para ver se eu aceito que o Node faça alterações no meu computador, vou dar sim, no canto inferior esquerdo, talvez não tenha aparecido na tela, se aparecer na sua dá sim também.

Agora a gente vai aguardar instalação do nosso computador. Terminei de instalar. Então eu vou dar um finish no canto inferior esquerdo, e pronto, já tem o Node ali dentro do meu computador.

Mas o que é que é esse Node que eu acabei de instalar no seu computador e instalei no meu? O Node é o ambiente de execução, de Javascript, que antes para rodarmos algum código, precisávamos entrar em um projeto no navegador e rodar os comandos através dessa conexão entre o HTML e Javascript.

Com o Node no nosso computador nós conseguimos usar o terminal para fazer isso, e é onde vamos instalar esses pacotes como json-server a que a gente comentou antes.

Então no próximo vídeo nós vamos fazer a instalação dele, lá no terminal. E eu te vejo lá para nós aprendermos mais essa coisa nova. Até lá.

Sobre o curso JavaScript: criando requisições

O curso JavaScript: criando requisições possui 91 minutos de vídeos, em um total de 51 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:

• Simulando uma API
• Exibindo elementos
• Criando novos elementos
• Buscando elementos
• Lidando com erros