Node.js: continue seu projeto full stack criando uma API com Express

Iniciando o 1º projeto - Apresentação

Boas-vindas ao curso de um React e Node.js da Alura! Meu nome é Bernardo Severo e serei seu instrutor ao longo deste curso.

Autodescrição: Tenho 22 anos, sou branco, tenho cabelos curtos castanhos, uso óculos de grau arredondados e estou em um quarto com uma leve iluminação azul ao fundo.

O que vamos aprender?

Este curso é ideal para quem deseja se aprofundar em desenvolvimento back-end com JavaScript, mais especificamente com Node.

O Node é uma das ferramentas mais utilizadas no mercado de trabalho atualmente. Existem diversas oportunidades para qualquer senioridade, então, este estudo será de grande ajuda para você se tornar uma pessoa desenvolvedora em breve!

Neste curso, daremos continuidade ao projeto AluraBooks que desenvolvemos no curso anterior. Nosso objetivo é criar uma API de livros, que nos fornecerá informações dos livros que utilizaremos no projeto.

Em resumo, usaremos o Postman para enviar requisições a essa API, para consultar os livros do "banco de dados" do AluraBooks. Além da leitura de dados, também será possível inserir, editar e deletar dados!

Quais são os pré-requisitos?

Para acompanhar este curso, é ideal que você tenha conhecimento intermediário em JavaScript. Se necessário, você pode buscar outros cursos da Alura voltados especificamente para JavaScript, antes de começar este curso de Node.

Para complementar seus estudos, você pode explorar outros conteúdos da plataforma, como Alura+, artigos e podcasts!

Este é o segundo curso da Formação Full Stack: React e Node.js, logo, também é recomendado que você tenha cursado o primeiro curso para acompanhar seus estudos de maneira linear.

Bons estudos!

Iniciando o 1º projeto - Start no projeto

No último curso, aprendemos React e trabalhamos no front-end do AluraBooks. Agora, para dar continuidade ao nosso aprendizado, vamos desenvolver o back-end do projeto, desenvolvendo um servidor de dados para o front-end que já está pronto.

Criação do projeto

Vamos abrir o Visual Studio Code. Mais à esquerda da tela inicial, temos o título "Iniciar" com as seguintes opções:

Novo Arquivo
Abrir
Clonar um Repositório Git

Vamos clicar em "Abrir". Alternativamente, você pode acessar "Arquivo > Abrir" no menu superior do VS Code ou usar o atalho "Ctrl + O".

Uma janela de seleção de arquivos será aberta. Vamos navegar até o local onde queremos guardar nosso novo projeto e criar uma pasta chamada "alura-books-server". Em seguida, daremos um clique duplo sobre essa pasta recém-criada para abri-la no VS Code.

Primeiramente, vamos realizar as instalações necessárias e criar o projeto nos moldes básicos. No menu superior do VS Code, acessaremos "Terminal > Novo terminal". Alternativamente, você pode usar o atalho "Ctrl + '". O terminal aparecerá na parte inferior da tela.

Anteriormente, já instalamos o Node. Ele nos proporciona o comando npm init, com o qual inicializaremos um novo pacote Node. Vamos executá-lo:

npm init

Ao rodar o comando, teremos alguns comunicados no terminal. Não vamos nos aprofundar neles, por enquanto.

Na sequência, podemos informar os seguintes dados para o nosso projeto:

nome do pacote
versão
descrição
ponto de entrada
comando de teste
repositório do Git
palavras-chaves
autor(a)
licença

Podemos deixar todos os campos vazios (ou com seus valores padrões), basta pressionar "Enter" em cada um deles. Caso queira, você pode preencher os campos de descrição, repositório e autoria.

Ao final, é preciso confirmar os dados, pressionando "Enter" mais uma vez. Finalizado esse processo,surgirá um arquivo chamado package.json na estrutura do projeto (na lateral esquerda do VS Code). Vamos clicar nele para abri-lo:

{
  "name": "alura-books-server",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Bernardo Severo",
  "license": "ISC"
}

Trata-se de um arquivo em formato JSON com informações sobre o nosso projeto. Futuramente, também constarão dados sobre as nossas dependências, ou seja, as ferramentas que utilizaremos.

Instalação de dependências

A seguir, vamos instalar uma dependência chamada Express, uma das ferramentas mais usadas no mercado de trabalho para criação de servidores Node.

Para instalá-la, executaremos o seguinte comando no terminal:

npm install express

Finalizada a instalação, notaremos algumas mudanças no projeto. A primeira delas está no arquivo package.json. Agora, temos o campo dependencies, onde consta o Express e sua versão:

{
  "name": "alura-books-server",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Bernardo Severo",
  "license": "ISC",
  "dependencies": {
    "express": "^4.18.2"
  }
}

Esse arquivo serve para armazenar todas as dependências do nosso projeto. Caso alguém entre nesse projeto agora e rode o comando npm install, o sistema saberá que é necessário instalar o Express também!

A segunda mudança é o surgimento da pasta "node_modules", que está repleta de arquivos. Tudo que o Express precisa de código para funcionar está guardado nessa pasta. Além disso, também temos um novo arquivo chamado package-lock.json, que guarda informações das dependências.

Tanto a pasta "node_modules" quando o arquivo package-lock.json serão automaticamente atualizados pelo Node, sempre que instalarmos ou desinstalarmos dependências. Então, não é preciso nos preocupar com eles.

Assim, criamos nosso projeto, demos um nome a ele, geramos o arquivo package.json e instalamos o Express, a principal dependência do nosso projeto! Nos próximos vídeos, começaremos a criar nossos primeiros códigos.

Iniciando o 1º projeto - Olá mundo

No último vídeo, criamos a base do projeto, analisamos brevemente o arquivo package.json e instalamos o Express. A seguir, vamos para uma parte mais prática!

Nosso objetivo inicial é fazer o código mais básico possível para criar nosso primeiro "Olá Mundo".

Express

Na lateral esquerda do VS Code, vamos clicar com o botão direito do mouse na área onde temos a estrutura de pastas do projeto e selecionar "Novo Arquivo" e nomeá-lo "app.js".

No curso anterior, o app.js foi o arquivo principal do nosso projeto React. Dessa vez, não será diferente — o app.js será o arquivo principal do nosso projeto Node.

Nesse arquivo, vamos começar importando o Express. Diferentemente do curso de React em que usamos as expressões import e from, primeiramente vamos declarar uma constante chamada express. Nela, chamaremos a função require(), passando como parâmetro "express":

//app.js

const express = require("express")

Em seguida, vamos criar uma constante chamada app, que será nossa aplicação Express. Nela, chamaremos a função express() que importamos na linha anterior, que cria uma aplicação Express:

const express = require("express")

const app = express()

Porta

No curso anterior, ao rodar a aplicação React, podíamos acessá-la em localhost:3000. O número 3000 diz respeito à porta da aplicação na nossa rede, seja local ou em qualquer outro lugar.

Nossa aplicação atual também precisará de uma porta, então vamos informá-la na constante port. No caso, optaremos pela porta 8000:

const express = require("express")

const app = express()

const port = 8000

Assim, o front-end ficará na porta 3000 e o back-end, na 8000.

Rota

A seguir, criaremos nossa primeira rota. De início, vamos simplesmente criá-la e testá-la. Mais adiante, entenderemos em mais detalhes de que se trata o conceito de rota.

Na linha 7, usaremos a função get() da aplicação, que receberá dois parâmetros. O primeiro parâmetro é o path, ou seja, o caminho para acessar o servidor em determinada página.

Por exemplo, vamos imaginar que acessamos o site alura-books.com/home ou alura-books.com/livros-favoritos. Nesses exemplos, o /home e o /livros-favoritos são o caminho!

No caso, criaremos o caminho que será simplesmente uma barra (/):

const express = require("express")

const app = express()

const port = 8000

app.get('/', )

No segundo parâmetro, informaremos uma função com os parâmetros (req, res). Não vamos detalhar esses conceitos agora, mas vale saber que req vem da palavra "request" (requisição), o que recebemos quando uma pessoa chama nosso serviço. Já res vem da palavra "response" (resposta), o que devolvemos para a pessoa que fez o chamado.

Dentro dessa função, usaremos res.send() para definir a mensagem "Olá mundo!", que será enviada de volta para a pessoa usuária:

const express = require("express")

const app = express()

const port = 8000

app.get('/', (req, res) => {
    res.send("Olá mundo!")
})

Listener

Além disso, também é necessário indicar para a aplicação Express que ela deve ficar escutando as mensagens recebidas na porta 8000. Em outras palavras, é como avisar a aplicação: "Fique escutando na porta 8000, pois podem chegar pedidos de pessoas usuárias por lá!".

Portanto, usaremos a função listen() que, em português, significa "escutar". Como parâmetros, passaremos a porta e uma função com uma mensagem que será exibida no console quando a aplicação começar a escutar:

const express = require('express')

const app = express()

const port = 8000

app.get('/', (req, res) => {
  res.send('Olá mundo!')
})

app.listen(port, () => {
  console.log(`Escutando a porta ${port}`)
})

Não se preocupe se todos esses conceitos ainda não estiverem muito claros. Na sequência, nós vamos testar esse código e tudo ficará mais fácil de entender.

Vamos salvar nosso progresso ("Ctrl + S") e testar.

Testes

No menu superior do VS Code, vamos selecionar "Terminal > Novo Terminal". Para o Node ler o arquivo app.js, vamos executar o seguinte comando:

node app.js

Ao rodar, receberemos a seguinte mensagem no terminal:

Escutando a porta 8000

Esta é exatamente a mensagem que definimos dentro da função listen(). Ou seja, quando executamos nosso projeto Node, o método listen() foi chamado, indicando que a aplicação está ouvindo a porta 8000. A partir de então, tudo que for enviado nessa porta será recebido.

No navegador, vamos acessar a seguinte URL:

localhost:8000

Como resultado, temos uma página com o texto "Olá mundo!". Trata-se da mensagem que definimos na rota anteriormente!

Para nos certificar de que tudo está funcionando, vamos voltar ao código e alterar essa mensagem que definimos na rota. Em vez de "Olá mundo!", colocaremos "Olá mundo da Alura!":

const express = require('express')

const app = express()

const port = 8000

app.get('/', (req, res) => {
  res.send('Olá mundo da Alura!')
})

app.listen(port, () => {
  console.log(`Escutando a porta ${port}`)
})

Após salvar essa modificação, vamos voltar ao navegador e atualizar a página ("F5"). O texto exibido, porém, continuará sendo "Olá mundo!", ele não será atualizado.

Atualmente, estamos rodando nosso projeto da maneira mais simples possível e não temos a funcionalidade de hot reload, ou seja, a atualização automática do que foi modificado no código.

Para interromper o servidor, vamos pressionar "Ctrl + C" no terminal integrado do VS Code. Em seguida, executaremos o comando de inicialização novamente:

node app.js

Mais uma vez, teremos a mensagem do método listen():

Escutando a porta 8000

Agora, vamos voltar ao navegador e atualizar a página de novo. Dessa vez, a frase na tela será atualizada para "Olá mundo da Alura!", como definimos no código.

Nodemon

Reinicializar a aplicação toda vez que o código for alterado para testar pode ser trabalhoso, então vamos recorrer a uma ferramenta chamada Nodemon para nos ajudar nesse processo. Ela permitirá a atualização automática.

Primeiramente, vamos interromper o servidor, pressionando "Ctrl + C" no terminal integrado do VS Code. Em seguida, para instalar o Nodemon, executaremos o seguinte comando:

npm install -g nodemon

Finalizada a instalação, vamos abrir o package.json. No final do arquivo, constará o Nodemon como uma nova dependência:

{
  "name": "alura-books-server",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Bernardo Severo",
  "license": "ISC",
  "dependencies": {
    "express": "^4.18.2",
    "nodemon": "^2.0.20"
  }
}

Agora, para rodar nossa aplicação, utilizaremos um comando diferente:

nodemon app.js

Voltando ao navegador, nossa aplicação estará exibindo a mensagem "Olá mundo da Alura!". Para checar se a atualização automática está funcionando, modificaremos a mensagem mais uma vez. Dessa vez, colocaremos ""Olá mundo da Alura do Brasil!":

const express = require('express')

const app = express()

const port = 8000

app.get('/', (req, res) => {
  res.send('Olá mundo da Alura do Brasil!')
})

app.listen(port, () => {
  console.log(`Escutando a porta ${port}`)
})

Após salvar a alteração, voltaremos ao navegador e atualizaremos a página. A mensagem será automaticamente atualizada para "Olá mundo da Alura do Brasil!". O hot reload está funcionando como esperado!

Recapitulando

Espero que você esteja gostando do curso até agora!

Diferentemente do front-end em que as alterações são facilmente visualizáveis na tela, o back-end pode não ser tão visível. Mas nós já conseguimos desenvolver nossa primeira aplicação "Olá mundo" com Node!

Nosso código ainda está bem simples. Em resumo, nós:

criamos uma aplicação com a função express()
escolhemos a porta 8000
definimos a primeira rota do nosso projeto (não se preocupe, estudaremos mais o conceito de rota neste curso)
fizemos a indicação para a aplicação escutar na porta 8000

Até a próxima aula!

Sobre o curso Node.js: continue seu projeto full stack criando uma API com Express

O curso Node.js: continue seu projeto full stack criando uma API com Express possui 165 minutos de vídeos, em um total de 40 atividades. Gostou? Conheça nossos outros cursos de Node.JS em Programação, ou leia nossos artigos de Programação.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

Iniciando o 1º projeto
Criando as primeiras rotas
JSON para armazenar dados
Parâmetros nas requisições
Lidando com erros