# Seu Primeiro Backend ✨

Author: Paulo Queiroz
Language: pt
Source: https://raggesilver.com/pt/blog/03-your-first-backend

Criando seu primeiro backend em Node.js

Se você já está trabalhando em seu conhecimento de HTML e CSS, talvez já tenha
se aventurado um pouco em JavaScript, provavelmente está pronto para começar a
criar seu primeiro backend. Neste artigo, usaremos Node.js para criar um backend
simples que servirá como base para seus projetos futuros.

> Quer pular a leitura e ir direto para o código?
> [Clique aqui](#configurando-o-seu-ambiente) para ir direto à parte prática
> deste tutorial.

## O que é um backend?

Primeiro de tudo, vamos definir o que é um backend. O backend é a parte de uma
aplicação web responsável por processar dados e responder aos pedidos do
frontend. É o motor que impulsiona o frontend e faz tudo funcionar. O backend é
responsável por lidar com coisas como autenticação de usuários, operações com
banco de dados e a lógica de negócios. Mas por que precisamos de um backend? Não
podemos simplesmente construir tudo com HTML, CSS e JavaScript?

![Well yes, but actually no meme](https://raggesilver-com.fly.storage.tigris.dev/images/blog/well-yes-but-actually-no.webp)

Brincadeiras à parte, as duas principais razões pelas quais precisamos de um
backend são **segurança** e **desempenho**.

### Segurança 🛡️

A coisa mais importante que você precisa saber sobre o motivo de precisarmos de
um backend para segurança é que **qualquer coisa que você carregar em um
navegador pode ser vista por qualquer pessoa**. Se você tiver qualquer tipo de
informação sensível no navegador, saiba: isso não é seguro.

Quando um usuário cria uma conta no seu site, você precisa armazenar as
informações dele em algum lugar, como um banco de dados. Você precisa de
credenciais para ler e gravar dados em um banco de dados. O motivo pelo qual
você não pode simplesmente enviar as informações do usuário do frontend
diretamente para o banco de dados é que você teria que armazenar sua senha do
banco de dados no frontend, o que permitiria que qualquer pessoa acessasse seu
banco de dados como bem quisesse.

Podemos mitigar esse problema criando um backend, um programa que recebe os
dados do frontend, os valida e depois os envia para o banco de dados. Seu
backend terá as credenciais do banco de dados, mas os usuários não terão acesso
a elas.

### Desempenho 🚀

Outra razão pela qual precisamos de um backend é o desempenho. Se o seu
aplicativo precisa fazer muito processamento, é melhor fazê-lo no servidor do
que no cliente. O servidor geralmente é mais poderoso que o cliente, então ele
pode lidar com mais processamento. Imagine alguém com um celular de 10 anos
atrás, 34 abas abertas e vários aplicativos rodando em segundo plano. Se você
enviar para essa pessoa uma lista com 10.000 itens e pedir para ela ordenar, o
celular provavelmente vai travar. Se você fizer o mesmo em um servidor, ele
provavelmente vai lidar com isso sem problemas.

## Configurando o seu ambiente

Antes de começarmos a programar, precisamos configurar nosso ambiente. Hoje em
dia, existem duas maneiras de configurar um ambiente de desenvolvimento: usando
uma solução local ou uma plataforma na nuvem. Vou te ensinar como configurar um
ambiente local, mas se você preferir usar a nuvem, recomendo o
[StackBlitz](https://stackblitz.com/) — ele é melhor que soluções como o
Codesandbox, que exigem que você execute o código em uma VM; o StackBlitz roda a
IDE diretamente no seu navegador, e faz isso de graça.

### Ambiente local

Alguns dos passos a seguir podem variar dependendo do seu sistema operacional,
mas a ideia geral é a mesma. Estarei usando macOS para este tutorial.

1. **Instale o Node.js**: Node.js é uma ferramenta que nos permite rodar
   JavaScript fora de um navegador. Você pode baixá-lo no
   [site oficial](https://nodejs.org/).
   - Siga as instruções no site para instalar o Node.js na sua máquina.
2. **Instale uma IDE**: Você pode usar qualquer editor de texto que preferir. Eu
   recomendo o [Visual Studio Code](https://code.visualstudio.com/). Ele é
   gratuito, open source, e fácil de usar para iniciantes.

## Criando seu primeiro Backend

Crie uma nova pasta vazia para o seu projeto em qualquer lugar do seu
computador. Em seguida, abra essa pasta na sua IDE. No VS Code, você pode abrir
uma pasta clicando em `Arquivo > Abrir Pasta...` ou clicando no botão
`Abrir Pasta` na tela de boas-vindas.

![VS Code Open Folder](https://raggesilver-com.fly.storage.tigris.dev/images/blog/blog_03-vscode-welcome.webp)

Depois de abrir sua pasta na IDE, abra uma janela de terminal — você pode fazer
isso clicando em `Terminal > Novo Terminal` no VS Code. No terminal, execute o
seguinte comando para criar um novo projeto Node.js:

```bash
npm init -y
```

Esse comando cria um novo arquivo `package.json` na pasta do seu projeto. O
arquivo `package.json` é onde você define as dependências e os scripts do seu
projeto.

> **npm** é um gerenciador de pacotes para Node.js. Ele permite que você instale
> e gerencie pacotes para seus projetos Node.js. Assim como importar o Font
> Awesome ou Bootstrap no seu HTML, você pode importar pacotes nos seus projetos
> Node.js. Porém, em vez de usar uma tag `<link>`, você instala pacotes usando
> npm.

> Curiosidade: npm significa Node Package Manager (gerenciador de pacotes do
> Node).

Neste tutorial, usaremos uma framework chamada Express. O Express é uma
framework web leve para Node.js que facilita a criação de servidores web. Para
instalar o Express, execute o seguinte comando no terminal:

```bash
npm install express
```

Esse comando instala o pacote Express no seu projeto. Se você abrir o arquivo
`package.json`, verá que o Express foi adicionado como uma dependência.

Antes de prosseguirmos, adicione uma linha ao seu arquivo `package.json`, logo
após `"version"` e antes de `"main"`:

```jsonc
{
  "name": "seu-app",
  "version": "1.0.0",
  "type": "module", // Adicione esta linha
}
```

> Podemos falar sobre o campo `type` mais tarde, mas por enquanto, saiba que ele
> é necessário para o código que escreveremos.

Agora que temos o Express instalado, vamos criar um servidor web simples.

### Criando um servidor web

Crie um novo arquivo na pasta do seu projeto chamado `index.js`. Este arquivo
será o ponto de entrada para sua aplicação. No `index.js`, adicione o seguinte
código:

```js
import express from "express";

const app = express();
const port = 3000;

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

app.listen(port, () => {
  console.log(`Servidor rodando em http://localhost:${port}`);
});
```

Esse código cria uma nova aplicação Express, define uma rota que responde com
`Olá, Mundo!` quando você visita a URL raiz (`/`), e inicia um servidor que
escuta na porta 3000.

Para testar, execute o seguinte comando no terminal:

```bash
node index.js
```

Esse comando inicia seu servidor. Se você abrir o navegador e navegar para
`http://localhost:3000`, você deverá ver `Olá, Mundo!` exibido na página!

![Olá, Mundo!](https://raggesilver-com.fly.storage.tigris.dev/images/blog/blog_03-hello_world.webp)

Parabéns! Você acabou de criar seu primeiro backend com Node.js e Express.

### Entendendo o código

Vamos analisar o código que acabamos de escrever:

```js
// Importe o pacote express que instalamos anteriormente
import express from "express";

// Crie uma nova aplicação Express
const app = express();
const port = 3000;

// Defina uma rota que responde com "Olá, Mundo!".
// Falaremos mais sobre rotas mais adiante.
app.get("/", (req, res) => {
  res.send("Olá, Mundo!");
});

// Inicie o servidor e registre uma mensagem no console
app.listen(port, () => {
  console.log(`Servidor rodando em http://localhost:${port}`);
});

// O servidor agora está rodando e ouvindo por pedidos. Ele continuará
// rodando até que você o interrompa pressionando Ctrl+C no terminal
// (ou fechando a janela do terminal).
```

> Leia mais sobre portas
> [aqui](<https://wikipedia.org/wiki/Port_(computer_networking)>)

## Rotas

Antes de elaborarmos mais sobre o código, vamos falar sobre rotas. Uma rota é um
padrão de URL que o servidor escuta. Quando um pedido é feito ao servidor, ele
verifica a URL do pedido e a compara com uma rota. Se a URL corresponder a uma
rota, o servidor executa o código associado a essa rota.

No navegador, você pode pensar em cada página que você pode visitar como uma
rota. Por exemplo, `google.com/` é uma rota, `google.com/chrome` é outra rota, e
assim por diante.

No nosso código, definimos uma única rota que escuta pedidos para a URL raiz
(`/`). Quando um pedido é feito para a URL raiz, o servidor responde com
`Olá, Mundo!`.

### Rotas do Frontend vs. Backend

Vale notar que, neste tutorial, estamos desenvolvendo uma API RESTful. REST é
uma arquitetura de desenvolvimento backend que, entre outras coisas, separa o
backend do frontend. Ele faz isso porque um servidor web, como o que estamos
criando, é capaz de renderizar HTML e CSS, servir imagens, arquivos e muito
mais.

Em uma API RESTful, o servidor (backend) apenas se comunica com o cliente
(frontend) para trocar dados. Pense em envio de formulários, autenticação de
usuários e operações com banco de dados. O servidor não se preocupa com como os
dados são exibidos, apenas com como eles estão estruturados.

### Métodos HTTP

A comunicação entre o servidor e o cliente é feita via HTTP. O protocolo HTTP
define um conjunto de métodos que o cliente pode usar para interagir com o
servidor. Os métodos mais comuns são:

- **GET**: Usado para recuperar dados do servidor.
- **POST**: Usado para enviar dados ao servidor.
- **PUT**: Usado para atualizar dados no servidor.
- **DELETE**: Usado para deletar dados do servidor.

Quando você navega em um site, seu navegador envia um pedido GET ao servidor
para recuperar a página que você solicitou. Quando você envia um formulário, seu
navegador envia um pedido POST ao servidor com os dados do formulário.

### Métodos de Rotas

A maioria dos servidores web, incluindo o Express, permite que você defina rotas
para diferentes métodos HTTP. No nosso código, usamos o método `app.get()` para
definir uma rota que responde a pedidos GET. Você também pode usar `app.post()`,
`app.put()` e `app.delete()` para definir rotas para outros métodos HTTP. É
importante notar que **podemos definir múltiplas funções para a mesma rota**.

Se tivéssemos um projeto maior em que precisássemos criar e deletar usuários,
poderíamos definir rotas assim:

```js
app.get("/users", (req, res) => {
  // Obter todos os usuários
});

app.post("/users", (req, res) => {
  // Criar um novo usuário
});
```

Perceba como ambas as rotas têm a mesma URL (`/users`), mas respondem a métodos
HTTP diferentes. Essa é uma prática comum em APIs RESTful.

## Tornando isso útil

Já fizemos bastante até agora, mas nosso backend só consegue responder com
`Olá, Mundo!` em uma única rota.

Vamos torná-lo um pouco mais útil criando uma API simples que retorna uma lista
de alunos.

```js
// app.get("/", ...)

const students = [
  { id: 1, name: "Alice", age: 20 },
  { id: 2, name: "Bob", age: 21 },
  { id: 3, name: "Charlie", age: 22 },
];

app.get("/students", (req, res) => {
  return res.json(students);
});

// app.listen(...)
```

Se você tentar navegar para `http://localhost:3000/students`, não verá a lista
de alunos. Em vez disso, você verá uma mensagem de erro dizendo que o servidor
não pode fazer o pedido GET para `/students`. Isso acontece porque toda vez que
você faz mudanças no seu servidor, é necessário reiniciá-lo. Para evitar isso,
podemos rodar o servidor com o flag `--watch`:

```bash
# Se o seu servidor já estiver rodando, pare-o pressionando Ctrl+C
# no terminal
node --watch index.js
```

Agora, quando você navegar para `http://localhost:3000/students`, deverá ver uma
resposta JSON com a lista de alunos. Agora podemos retornar dados úteis, como
arrays e objetos do nosso servidor. Legal, né?

## Consumindo a API

Até agora, todos os nossos testes foram feitos no navegador. Como as APIs
RESTful não devem renderizar HTML ou exibir algo no navegador, precisamos de
outro método para usar nossa API. É aí que entra o frontend.

Vamos criar um arquivo HTML simples que busca a lista de alunos da nossa API.

```html
<!doctype html>
<html lang="pt-br">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Alunos</title>
  </head>
  <body>
    <h1>Alunos</h1>
    <ul id="students">
      <!-- Alunos serão adicionados aqui -->
    </ul>

    <!-- Vamos adicionar um JavaScript para interagir com o nosso servidor -->
    <script>
      fetch("http://localhost:3000/students")
        .then((response) => response.json())
        .then((students) => {
          const studentsList = document.getElementById("students");
          for (const student of students) {
            const li = document.createElement("li");
            li.innerText = `${student.name} (${student.age})`;
            studentsList.appendChild(li);
          }
        });
    </script>
  </body>
</html>
```

Salve este código em um arquivo chamado `index.html` na mesma pasta que o seu
arquivo `index.js` — esse arquivo poderia estar em qualquer outro lugar no seu
computador, mas, para fins de organização, vamos mantê-lo na mesma pasta que o
restante do nosso projeto.

Abra o arquivo no seu navegador e você verá... nada.

Isso porque o servidor está bloqueando o pedido. Este é um recurso de segurança
chamado CORS (Cross-Origin Resource Sharing). Ele impede que sites façam pedidos
para outros sites sem permissão. Como não estamos preocupados com outras pessoas
usando nossa API, podemos desabilitar o CORS no nosso servidor.

> Escreverei mais sobre CORS em um artigo futuro, onde exploraremos mais
> profundamente os pedidos HTTP e segurança.

> **Atenção**: Desabilitar o CORS pode expor seu servidor a vulnerabilidades de
> segurança. Tenha cuidado ao fazer isso em um ambiente de produção.

Para desabilitar o CORS no Express, instale um pacote chamado `cors`:

```bash
npm install cors
```

Em seguida, importe e use o pacote `cors` no seu arquivo `index.js`:

```js
import express from "express";
import cors from "cors";

const app = express();
const port = 3000;

app.use(cors());

// ...
```

Agora, se você abrir o arquivo `index.html` no navegador, deverá ver uma lista
de alunos exibida na página. Você acabou de criar um frontend simples que
consome dados da sua API!

## Conclusão

Neste artigo, aprendemos como criar um backend simples com Node.js e Express.
Cobrimos o básico do desenvolvimento backend, rotas, métodos HTTP e como
consumir uma API a partir do frontend.

Este é apenas o começo da sua jornada no desenvolvimento backend. Há muito mais
para aprender, como bancos de dados, autenticação e segurança.

Vou escrever um post dando continuidade a esse, onde mergulharemos mais fundo no
desenvolvimento backend. Vamos aprender a receber dados do frontend (através de
formulários, por exemplo) e como armazenar e manipular dados. Fique ligado!

> P.S.: o código deste artigo está disponível em
> [GitHub](https://github.com/raggesilver/blog-03-example)