ExpressJS

Ao lidarmos com bancos de dados, conhecemos o TypeORM, uma biblioteca que trata da conexão com banco de dados (fazendo o mapeamento objeto relacional). Agora, para lidarmos com a API, vamos usar outra biblioteca: o ExpressJS, que cria um servidor web em nosso programa.

O primeiro passo, seguindo a própria documentação, envolve efetuar a sua instalação:

npm install express

Agora que o Express já está instalado, precisamos fazer um pequeno ajuste e incluir uma opção a mais no arquivo tsconfig.json, que ficará assim:

{
    "compilerOptions": {
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "esModuleInterop": true,
    }
}

A inclusão consiste na em "esModuleInterop": true. Essa configuração facilita a importação de módulos CommonJS, como o Express, usando a sintaxe de importação que já vínhamos adotando com ES Modules. Por padrão, o Express utiliza o mecanismo de módulos CommonJS, e a inclusão dessa linha permite trabalharmos com o Express seguindo o formato de importação que já vínhamos adotando.

# 👶🏾 Criando a primeira página web

A documentação do Express traz um exemplo bastante simples, que consiste em retornar uma mensagem de texto (”Hello World!”) quando tentarmos acessar a página web pelo browser:

import express from 'express';

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

app.get('/', (req, res) => {
  res.send('Hello World!')
})

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`)
})

No fragmento de código acima, temos a importação do express, seguida pela definição de duas importantes variáveis:

  • app, que representa a nossa aplicação web;
  • port, que indica a porta em que a nossa aplicação web será executada;

Após a definição das variáveis, o código apresenta duas etapas importantes: a definição de rotas e o início do funcionamento do servidor.

Configuração da rota

Em uma aplicação back-end, como uma API, não temos menus. Sabemos qual operação deve ser executada (gravação ou leitura de um determinado dado) a partir das rotas, que são os caminhos envolvidos em uma URL.

No site ufmt.dev/poo, por exemplo, poo é uma rota que indica que um estudante aplicado deseja obter os conteúdos de “Programação Orientada a Objetos”, não de “Algoritmos e Estruturas de Dados II”. Se este fosse o caso, o estudante teria consultado a rota aed2: ufmt.dev/aed2.

Agora que possivelmente você já entendeu a ideia, vamos ao código:

app.get('/', (req, res) => {
  res.send('Hello World!')
})

Clique aqui para consultar os métodos HTTP.

Colocando o servidor para esperar as requisições

Diferente dos programas mais simples desenvolvidos anteriormente, que terminam a execução em segundos ou minutos, em um aplicação web não se sabe quando o usuário enviará as suas requisições. Por isso, é importante que esse servidor fique trabalhando constantemente.

O trabalho do servidor consiste, principalmente, em “ouvir” as requisições, como um atendente que espera a solicitação de um cliente:

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`)
})

No caso acima, estamos informando também em qual porta o servidor deve ouvir. Lembre-se do que já discutimos sobre portas em banco de dados: um mesmo hardware pode executar diferentes servidores (banco de dados, web, DNS, etc). Cada serviço ocupa uma porta específica.

Executando a aplicação

Para executar a aplicação, podemos simplesmente executar o comando: npx ts-node caminhoparaseuarquivo.ts como já fazíamos para os demais programas. Execute o código ( e, logo após, abra o navegador na seguinte URL: http://localhost:3000 para ver o seu programa em execução.

Agilizando o processo

Na abordagem anterior, precisaremos executar novamente o comando sempre que fizermos qualquer alteração no código do nosso programa. Para evitar esse processo, podemos aprimorar a solução e usar o Nodemon, que reinicia o servidor automaticamente sempre que alterarmos o arquivo:

Para isso, instale-o:

npm install -g nodemon

E execute o seu programa da seguinte forma:

nodemon caminhoparaseuarquivo.ts
Nesta página