Tutorial: Aplicação REST API com Node, em Typescript, usando Express e SQLite

Photo by Goran Ivos on Unsplash

Nesse tutorial você vai aprender a criar uma aplicação REST API com Node.js, em linguagem Typescript , usando o framework Express e base de dados SQLite.

Originalmente foi escrito para meus alunos das turmas de desenvolvimento web, como conteúdo introdutório a programação back-end com base de dados SQL.

As instruções apresentadas aqui independem do editor de código ou IDE utilizados, mas para elaborar e testar o código desse tutorial foi utilizado o Visual Studio Code.

Os comandos utilizados nesse tutorial são baseados diretamente no yarn, mas caso você prefira npm use:

• npm init em vez de yarn init
• npm install módulo em vez de yarn add módulo
• npm run script em vez de yarn script
• npx comando em vez de yarn comando

Requisitos

Para seguir esse tutorial você vai precisar dos seguintes softwares instalados no seu sistema:

• Node.js
• yarn
• Typescript compiler (tsc)
• Git

1. Projeto Node base

O primeiro passo é criar um projeto Node base, ou seja:

1. criar uma pasta vazia para o projeto
2. criar um projeto Node vazio dentro dessa pasta

A partir do terminal de comandos:

mkdir app-express
cd app-express
yarn init --yes

Isso irá criar o arquivo de configuração geral do seu projeto, package.json.

Você também pode criar a pasta a partir da interface do seu sistema operacional, como do Explorer, no Windows, ou do Finder, no macOS.

Caso você use use um editor de código, como o Visual Studio Code ou o Sublime Text, você já pode abrir a pasta recém criada e usar o terminal desses editores para executar o comando de inicialização do projeto Node, assim como os próximos comandos.

Configuração do Typescript

Em seguida, para usar Typescript no seu projeto, você deve adicionar a configuração, executando o seguinte comando pelo terminal:

tsc --init

Após executado, um arquivo tsconfig.json será criado na pasta do seu projeto.

Esse tutorial irá se basear na seguinte configuração desse arquivo:

"compilerOptions": {
    "target": "es6",   
    "module": "commonjs",
    "outDir": "./dist",
    "strict": true,
    "esModuleInterop": true,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true
}

Ajuste o seu arquivo para essa configuração.

Para facilitar a rotina de desenvolvimento, em seguida adicione os scripts start, build e dev ao arquivo de configuração do projeto Node, package.json, dentro da propridade scripts:

"scripts": {
    "dev": "ts-node ./src/index.ts",
    "build": "tsc",
    "start": "node ./dist/index.js"
},

Aproveite para definir o nome do script principal do projeto, trocando index.js por ./src/index.ts nesse mesmo arquivo de configuração:

"main": "./src/index.ts"

Para finalizar a configuração do Typescript, devem ser instalados o módulos dos types para o Node, e o módulo ts-node, por meio do seguinte comando no terminal:

yarn add @types/node typescript
yarn add -D ts-node

2. Módulos Express e Cors

O próximo passo é instalar os módulos do Express e do Cors no seu projeto, usando os seguintes comandos no terminal:

yarn add express
yarn add cors

E, como nosso projeto será codificado em Typescript, também deverão ser instalados os types para esses módulos:

yarn add @types/express
yarn add @types/cors

Express

O Express é um módulo Node.js que fornece uma estrutura mínima para implementar um servidor web.

Cors

O CORS (Corss-rigin Resource Sharing) é um mecanismo utilizado pelos navegadores para compartilhar recursos entre diferentes origens.

Por causa desse mecanismo, assumindo que você esteja rodando o seu app front-end em http://localhost:3000 e o seu servidor, numa porta e ou domínio diferentes, como em http://locahost:4000 (de acordo com este tutorial), ao tentar se conectar ao back-end, poderá receber uma mensagem de erro.

Isso acontece porque o sistema de segurança do navegador bloqueia a interação do script de uma origem com recursos de outra origem diferente.

O Cors é um pacote Node.js para fornecer um middleware do Express que permite definir quais domínios e métodos HTTP o servidor permite conexão.

3. Script principal do projeto

Para conseguir — finalmente — rodar nosso servidor pela primeira vez, é preciso criar a pasta src na pasta do seu projeto, e o script principal, index.ts, dentro da pasta src, com o seguinte código:

import express from 'express'
import cors from 'cors'

// Porta do servidor
const PORT = process.env.PORT || 4000

// Host do servidor
const HOSTNAME = process.env.HOSTNAME || 'http://localhost'

// App Express
const app = express()

// Endpoint raiz
app.get('/', (req, res) => {
	res.send('Bem-vindo!')
})

// Cors
app.use(cors({
	origin: ['http://localhost:3000']
}))

// Resposta padrão para quaisquer outras requisições:
app.use((req, res) => {
	res.status(404)
})

// Inicia o sevidor
app.listen(PORT, () => {
	console.log(`Servidor rodando com sucesso ${HOSTNAME}:${PORT}`)
})

Até esse ponto, nosso projeto deverá ter a seguinte estrutura de pastas e arquivos:

├─ 📁 node_modules/
├─ 📁 src/
│   └─ 📄 index.ts
├─ 📄  package.json
├─ 📄  tsconfig.json
└─ 📄  yarn.lock

Agora já podemos rodar nosso projeto, executando no terminal:

yarn dev

Feito isso, e abrindo o endereço http://localhost:4000 na janela do navegador, a mensagem "Bem-vindo!" deverá ser exibida.

4. Modelo de dados

Numa aplicação web, normalmente faz uso de muitas entidades de dados, como Produto, Usuário, Postagem etc..

Esse tutorial vai utilizar a entidade genérica, chamada Item, para compor o modelo de dados do projeto.

Você pode entender o Item como sendo o produto de um comércio eletrônico, ou o usuário de um sistema web com autenticação, ou uma postagem de um blog.

Assim, vamos criar os respectivos types para esse modelo em um novo script chamado item.ts, numa nova pasta, models, criada dentro da pasta src:

type Item = {
    id?: number
    nome: string
    descricao: string
}

export default Item

5. Endpoints do CRUD

Em um servidor REST, os dados são manipulados por meio de chamadas HTTP a URLs predefinidas: os endpoints.

Cada operação é definida por uma dessas URLs e pelo método HTTP usado, como por exemplo GET, POST, PUT, UPDATE e DELETE.

Assim, para o projeto desse tutorial, teremos as seguintes operações CRUD de persistência (Create, Read, Update e Delete) para a entidade Item:

• Criar um novo item: POST /api/itens
• Ler todos os itens: GET /api/itens
• Ler um item específico: GET /api/itens/{id}
• Atualizar um item: PUT /api/itens/{id}
• Apagar um item: DELETE /api/itens/{id}

Rotas

Para organizar melhor nosso projeto, é interessante criar um conjunto de rotas para cada entidade.

Assim vamos criar uma pasta routers, dentro de src, e um script itens-router.ts, dentro dessa pasta, com o seguinte conteúdo inicial:

import express from 'express'

const itensRouter = express.Router()

itensRouter.post('/itens', (req, res) => {
    res.send('Cria novo item')
})

itensRouter.get('/itens', (req, res) => {
    res.send('Lê todos os itens')
})

itensRouter.get('/itens/:id', (req, res) => {
    const id: number = +req.params.id
    res.send(`Lê o item ${id}`)
})

itensRouter.put('/itens/:id', (req, res) => {
    const id: number = +req.params.id
    res.send(`Atualiza o item ${id}`)
})

itensRouter.delete('/itens/:id', (req, res) => {
    const id: number = +req.params.id
    res.send(`Apaga o item ${id}`)
})

export default itensRouter

Em seguida, ajustamos o script principal, index.ts, para usar esse conjunto de rotas:

import express from 'express'
import cors from 'cors'
import itensRouter from './routers/itens-router'

// Porta do servidor
const PORT = process.env.PORT || 4000

// Host do servidor
const HOSTNAME = process.env.HOSTNAME || 'http://localhost'

// App Express
const app = express()

// Endpoint raiz
app.get('/', (req, res) => {
    res.send('Bem-vindo!')
})

// Cors
app.use(cors({
	origin: ['http://localhost:3000']
}))

// Rotas
app.use('/api', itensRouter)

// Resposta padrão para quaisquer outras requisições:
app.use((req, res) => {
    res.status(404)
})

// Inicia o sevidor
app.listen(PORT, () => {
    console.log(`Servidor rodando com sucesso ${HOSTNAME}:${PORT}`)
})

Vamos testar?

Para testar é preciso parar o servidor, dando um Ctrl+C no terminal, e rodar novamente o dev:

yarn dev

No navegador é possível testar os dois endpoints que usam o método GET do HTTP, ou seja o endpoint para ler todos itens e o endpoint para ler um item específico, abrindo as suas respectivas URLs:

http://localhost:4000/api/itens
http://localhost:4000/api/itens/123

Para testar os demais endpoints, recomendo o uso de um aplicativo para essa finalidade específica, como o Postman ou Insomnia.

6. Nodemon

É preciso repetir esse processo, de parar e reiniciar novamente o servidor, sempre que precisarmos testar uma nova alteração no código?

Felizmente a resposta é não.

Mas, para isso, vamos precisar instalar um novo módulo no projeto: Nodemon.

Essa é uma ferramenta que ajuda o desenvolvimento reiniciando automaticamente a aplicação Node quando algum arquivo do projeto for alterado.

Para instalar esse módulo, executamos então, no terminal, lembrando de parar o servidor com Ctrl+C primeiro:

yarn add -D nodemon

Em seguida, ajustamos a propriedade scripts do arquivo de configuração geral do nosso projeto, package.json, para o Nodemon ficar de olho na pasta src e executar a antiga ação do script dev sempre que algum de seus arquivos TS ou JSON forem alterados e salvos:

"scripts": {
    "dev": "nodemon --watch \"src/**\" --ext \"ts,json\" --exec \"ts-node ./src/index.ts\"",
    "build": "tsc",
    "start": "node ./dist/index.js"
},

Pronto! Agora é só rodar novamente o dev:

yarn dev

7. Simulando com JSON

Nosso servidor REST vai usar o formato padrão, JSON, para os dados usados nas suas operações.

Para tanto vamos ajustar o código das operações do CRUD no script itens-routers.ts para usar esse formato de dados.

Primeiro devemos configurar o nosso app Express para identificar o formato JSON. Isso é feito adicionando algumas linhas no script index.ts:

import express from 'express'
import cors from 'cors'
import itensRouter from './routers/itens-router'

// Porta do servidor
const PORT = process.env.PORT || 4000

// Host do servidor
const HOSTNAME = process.env.HOSTNAME || 'http://localhost'

// App Express
const app = express()

// JSON
app.use(express.json())
app.use(express.urlencoded({ extended: true }))

// Endpoint raiz
app.get('/', (req, res) => {
    res.send('Bem-vindo!')
})

// Cors
app.use(cors({
	origin: ['http://localhost:3000']
}))

// Rotas
app.use('/api', itensRouter)

// Resposta padrão para quaisquer outras requisições:
app.use((req, res) => {
    res.status(404)
})

// Inicia o sevid